Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added da-DK/images/.keep
Empty file.
Binary file added da-DK/images/Python-Webserver-with-Flask-TILE.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added da-DK/images/banner.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added da-DK/images/flask-app-link.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added da-DK/images/flask-app-with-colour.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added da-DK/images/flask-cakes.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added da-DK/images/flask-hello-paul.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added da-DK/images/flask-hello-world.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added da-DK/images/flask-on-android.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added da-DK/images/flask-template.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added da-DK/images/idle-css.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added da-DK/images/idle-flask.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added da-DK/images/idle-html.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added da-DK/images/open-terminal.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added da-DK/images/open-text-editor.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added da-DK/images/pi-run-web-app.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added da-DK/images/showcase.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 28 additions & 0 deletions da-DK/meta.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
title: Byg en Python Web Server med Flask
hero_image: images/banner.png
description: I denne guide installerer vi det simpel web framework Flask, og sætter en enkel web server op med forskellige sider, ved at bruge Python, HTML og CSS.
original_url: https://raspberrypi.org/learning/python-web-server-with-flask
theme: yellow
duration: 2
listed: true
ingredient: false
copyedit: true
curriculum: 3, design-0, programming-3, phys-comp-0, manufacture-0, community-0
interests: ''
technologies: python, html-css-javascript
site_areas: projects
hardware: ''
software: python, html-css-javascript
version: 4.1
last_tested: 2018-08-02
steps:
- title: Introduktion
- title: Byg en Flask hjemmeside
- title: Tilføj en ny side
- title: Returner HTML web sider
- title: "Udfordring: Tilføj en HTML template til den anden side"
challenge: true
- title: Tilføj farver med CSS
- title: Tilføj dynamisk indhold
- title: Hvad skal det næste være?
Empty file added da-DK/resources/.keep
Empty file.
Binary file added da-DK/solutions/webapp.zip
Binary file not shown.
45 changes: 45 additions & 0 deletions da-DK/step_1.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
## Introduktion

### Hvad skal du have

Du sætter en web server op og laver en simpel hjemmeside med Flask, Python og HTML/CSS

![flask web app](images/showcase.png)

Web serveren vil kunne reagere på dynamisk indhold som en bruger giver. Altså din hjemmeside vil kunne mere end bare vise statisk information.

--- collapse ---

---
title: Hvad har du brug for
---

### Hardware

+ En computer der kan køre Python 3 (Det kan alle)

### Software

+ [Python 3](https://www.python.org/downloads/)

--- /collapse ---

--- collapse ---

---
title: Hvad du vil lære
---

- Hvordan man installerer Python moduler med `pip`
- Hvordan man bygger en enkel web app med Python og Flask

Denne ressurse dækker elementer fra de følgende dele af [Raspberry Pi Digital Making Curriculum](https://www.raspberrypi.org/curriculum/):
- [Apply abstraction and decomposition to solve more complex problems](https://curriculum.raspberrypi.org/programming/developer/)

--- /collapse ---

--- no-print ---

Hvis du har brug for at printe projektet ud på papir, så benyt denne [papir og printer venlige version](https://projects.raspberrypi.org/en/projects/python-web-server-with-flask/print){:target="_blank"}.

--- /no-print ---
120 changes: 120 additions & 0 deletions da-DK/step_2.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
## Byg en Flask Hjemmeside

Det første vi skal gøre, er at lave en enkel web applikation med Flask og Python.

Hvis du ikke har Python 3 på din computer, er du nødt til at installere det.

--- task ---

[Hent Python 3](https://www.python.org/downloads/) og installer det.

[[[generic-python-install-python3]]]

--- /task ---

Du har også behov for at installer Flask pakken.

--- task ---

Installer `flask` Python modulet ved at bruge `pip`. Du skal være forbundet til internettet før du kan begynde.

[[[generic-python-installing-with-pip]]]

--- /task ---

Når Flask er installeret, kan du oprette din web applikation.

--- task ---

Åben en terminal eller et vindue i kommandoprompt, og brug `mkdir` kommandoen til at lave en ny mappe der hedder `webapp`.

```bash
mkdir webapp
```

--- /task ---

--- task ---

Brug 'change directory' kommandoen `cd` til at åbne den nye mappe.

```bash
cd webapp
```
--- /task ---

--- task ---

Åben Python 3 IDLE, og lav en ny fil ved at trykke på **File** og så på **New file**.

--- /task ---

--- task ---

Gem den nye fil med navnet `app.py` inde i `webapp` mappen.

--- /task ---

--- task ---

Skriv nu de følgende linjer kode i `app.py` filen:

```python
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
return 'Hello world'

if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0')
```

![idle](images/idle-flask.png)

Vi vil dykke ned i koden senere i næste skridt. Lige nu skal vi tjekke at koden virker.

--- /task ---

--- task ---

Gem dine ændringer ved at trykke på **File** og så på **Save**, eller ved at trykke <kbd>Ctrl</kbd> og <kbd>S</kbd> på samme tid.

--- /task ---

Du er så nødt til at køre din web app fra a terminalen/kommandoprompten du åbnede tidligere.

--- task ---

### On Raspberry Pi/Linux/macOS

Skriv kommandoen `python3 app.py` i terminal vinduet.

### On Windows

Skriv kommandoen `python app.py` i kommandoprompt vinduet.

--- /task ---

Hvis din kode er korrekt, så skulle vinduet vise dig noget i retningen af det her:

```
* Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger pin code: ***-***-***
```

![pi run web app](images/pi-run-web-app.png)

--- task ---

Åben nu din browser og skriv URL'en `http://127.0.0.1:5000/`. Du burde se en hvid skærm med ordene `Hello world`.

**Note:** `127.0.0.1` betyder 'home', i.e. altså din computer. `:5000` betyder 'port 5000', hvilket er porten web serveren kører på.

--- /task ---

![Flask Hello world](images/flask-hello-world.png)
77 changes: 77 additions & 0 deletions da-DK/step_3.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
## Tilføj en ny side

Nu skal du tilføje en ny side til din web app ved at lave en ny **route**.

I en web applikation, er en route en bestemt sti ind i din hjemmeside. Stien er bestemt af den URL soms brugeren skriver i deres web browser's adressefelt. Du laver routes(ruter) og bestemmer hvad hver route skal gøre.

I koden du allerede har i `app.py`, er der en enkelt route:

```python
@app.route('/')
def index():
return 'Hello world'
```

Denne route er lavet af 3 dele:

- `@app.route('/')`: bestemmer indgangspunktet; symbolet `/` betyder roden af hjemmesiden, altså `http://127.0.0.1:5000/`
- `def index()`: er navnet du giver ruten, i dette tilfælde `index`, fordi det er indekset (eller forside) på hjemmesiden.
- `return 'Hello world'`: er indholdet på din hjemmeside, som bliver returneret når brugeren går ind på denne URL.

Den anden halvdel af `app.py` koden kører web serveren og din app:

```python
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0')
```

**Note:** `host='0.0.0.0'` betyder din web app er tilgængeligt til alle enheder på netværket.

De følgende instrukser viser hvordan man laver en ny side og rute der hedder 'cakes'. Hvis du vil, kan du ændre navnet og indholdet til det du vil.

--- task ---

For at lave en ny side og en rute til den, tilføj disse linjer kode, som set nedenunder, hvor den første side og rute bliver lavet i `app.py`:

```python
@app.route('/cakes')
def cakes():
return 'Yummy cakes!'
```

--- /task ---

--- collapse ---

---
title: Den færdige kode
---

Dit færdige kode burde se sådan her ud:

```python
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
return 'Hello world'

@app.route('/cakes')
def cakes():
return 'Yummy cakes!'

if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0')
```

--- /collapse ---

--- task ---

Gem din kode og naviger til 'cakes' siden i din browser på adresssen `127.0.0.1:5000/cakes`. Du burde se en hjemmeside med teksten "Yummy cakes!" på den.

![Yummy Cakes](images/flask-cakes.png)

--- /task ---
83 changes: 83 additions & 0 deletions da-DK/step_4.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
## Returner HTML web sider

Nu skal du modificere dine eksisterende ruter til at returnere en fuld HTML web side, i stedet for almindelig tekst.

HTML web siden vil blive lavet fra en skabelon eller **template** som holder det statiske indhold af siden. I en senere sektion af dette projekt, vil du lære hvordan man indsætter data så man har en dynamisk version af siden.

--- task ---

Først, lav et `templates` mappe i din `webapp` mappe ved at skrive den følgende kommando i terminalen eller kommandoprompt vinduet:

```bash
mkdir templates
```

--- /task ---

--- task ---

Lav en ny fil i IDLE ved at trykke på **File** og **New File**, og gem filen som `index.html` i din `templates` mappe.

--- /task ---

--- task ---

Skriv den følgende HTML kode i `index.html`:

```html
<html>
<body>
<h1>My website</h1>
</body>
</html>
```

![idle html](images/idle-html.png)

--- /task ---

--- task ---

Gem dine ændringer ved at trykke **File** og **Save**, eller ved at trykke <kbd>Ctrl</kbd> og <kbd>s</kbd>.

--- /task ---

--- task ---

Gå tilbage til din `app.py` fil i IDLE, og modificer den første linje af ddin kode for også at importere `render_template` funktionen fra `flask` modulet:

```python
from flask import Flask, render_template
```

--- /task ---

--- task ---

Slutteligt, modificer din `index()` funktion til at returnere `index.html` HTML templaten i stedet for den normale tekst. Rediger kodden inde i funktionsdefinitionen så koden ser sådan her ud:

```python
@app.route('/')
def index():
return render_template('index.html')
```

Denne kode for Flask til at kigge efter `index.html` i `templates` mappen som `app.py` programet er i.

--- /task ---

--- task ---

Gem filen. Vær sikker på at dit `app.py` program stadig kører. Hvis ikke, så kør det igen ved at bruge terminalen/kommandoprompten.

--- /task ---

--- task ---

Indlæs `http://127.0.0.1:5000/` siden i din web browser for at se dit nye HTML template blive vist.

![my website](images/flask-template.png)

I dette tilfælde er hvad du ser ikke meget anderledes, fordi det eneste nye er en HTML header. Der er dog bedre mulighed for at tilføje mere!

--- /task ---
Loading