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
28 changes: 14 additions & 14 deletions cs-CZ/meta.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,17 @@ software: python, html-css-javascript
version: 4.1
last_tested: 2018-08-02
steps:
- title: Co budeš dělat
- title: Vytvoř aplikaci
completion:
- engaged
- title: Přidej novou stránku
- title: Vytvoř HTML šablonu
- title: Použij CSS styl
completion:
- internal
- title: Dynamický obsah
completion:
- external
- title: 'Výzva'
challenge: true
- title: Co budeš dělat
- title: Vytvoř aplikaci
completion:
- engaged
- title: Přidej novou stránku
- title: Vytvoř HTML šablonu
- title: Použij CSS styl
completion:
- internal
- title: Dynamický obsah
completion:
- external
- title: 'Výzva'
challenge: true
Binary file added nl-NL/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 nl-NL/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 nl-NL/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 nl-NL/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 nl-NL/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 nl-NL/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 nl-NL/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 nl-NL/images/html-file.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 nl-NL/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 nl-NL/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 nl-NL/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 nl-NL/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 nl-NL/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 nl-NL/images/solution.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 33 additions & 0 deletions nl-NL/meta.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
title: Bouw een Python-webserver met Flask
hero_image: images/banner.png
description: Installeer het Python webframework Flask en stel een eenvoudige webserver in met verschillende pagina's
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: Wat je gaat maken
- title: Maak de app
completion:
- engaged
- title: Een nieuwe pagina toevoegen
- title: Een HTML-sjabloon maken
- title: EDITED STRING
completion:
- internal
- title: Dynamische inhoud
completion:
- external
- title: 'Uitdaging'
challenge: true
Empty file added nl-NL/resources/.keep
Empty file.
Binary file added nl-NL/solutions/webapp.zip
Binary file not shown.
32 changes: 32 additions & 0 deletions nl-NL/step_1.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
## Wat je gaat maken

Zet een webserver op en maak een eenvoudige website met behulp van Flask, Python en HTML/CSS.
De webserver kan reageren op de dynamische inhoud die de gebruiker invoert.

![Een webbrowser geopend op een pagina met blauwe tekst op een beige achtergrond. De tekst luidt 'Mijn website' en bevat een link naar 'Hoi Paul'.](images/flask-app-link.png)

### Wat heb je nodig:

- Een Raspberry Pi met het nieuwste Raspberry Pi OS

--- collapse ---
---
title: Flask installeren
---

`Flask` zou vooraf geïnstalleerd moeten zijn als onderdeel van Raspberry Pi OS, dus u hoeft niets te doen.

U kunt het handmatig installeren met de opdracht:

##
--- code ---

language: bash
line_numbers: false
--------------------------------------------------------

sudo apt install python3-flask

--- /code ---

--- /collapse ---
110 changes: 110 additions & 0 deletions nl-NL/step_2.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
## Maak de app

--- task ---

Open een terminal en gebruik de opdracht `mkdir` om een nieuwe map met de naam `webapp` te maken in uw documentenmap.

##
--- code ---

language: bash
line_numbers: false
--------------------------------------------------------

mkdir ~/Documents/webapp

--- /code ---

--- /task ---

--- task ---

Gebruik de opdracht `cd` om de nieuwe map te openen.

##
--- code ---

language: bash
line_numbers: false
--------------------------------------------------------

cd ~/Documents/webapp

--- /code ---

--- /task ---

--- task ---

Open **Thonny** in het menu **Programmeren**.

--- /task ---

--- task ---

Voeg deze Python-code toe aan het lege bestand.

##
--- code ---

language: python
line_numbers: false
--------------------------------------------------------

from flask import Flask

app = Flask(**name**)

@app.route('/')
def index():
return 'Hallo wereld'

if **name** == '**main**':
app.run(debug=True, host='0.0.0.0')

--- /code ---

--- /task ---

--- task ---

Sla het nieuwe bestand op onder de naam `app.py` in de map `webapp` die u zojuist hebt gemaakt.

--- /task ---

--- task ---

Ga terug naar uw terminalvenster en voer het script uit dat u zojuist hebt geschreven:

##
--- code ---

language: bash
line_numbers: false
--------------------------------------------------------

python3 app.py

--- /code ---

--- /task ---

Als alles goed werkt, ziet u in het venster uitvoer die er ongeveer zo uitziet:

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

--- task ---

Open in het menu van je Raspberry Pi **Internet** > **Chromium webbrowser**

--- /task ---

--- task ---

Typ `localhost:5000` in de adresbalk en druk op <kbd>en voer</kbd>in. U zou de welkomstpagina moeten zien.

--- /task ---

![Flask Hallo wereld](images/flask-hello-world.png)


59 changes: 59 additions & 0 deletions nl-NL/step_3.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
## Een nieuwe pagina toevoegen

Om een nieuwe pagina aan uw web-app toe te voegen, maakt u een nieuwe **route**.

--- collapse ---
---
title: Wat is een route?
---

In de code die u al hebt, is er één route:

```python
@app.route('/')
def index():
return 'Hallo wereld'
```

Deze route bestaat uit drie delen:

- `@app.route('/')`: wat u toevoegt aan het webadres om toegang te krijgen tot deze route - `/`
- `def index()`: de naam van de route - `index`
- `return 'Hallo wereld'`: de inhoud die de gebruiker zal zien - `Hallo wereld`

--- /collapse ---

--- task ---

Voeg de code voor een nieuwe route toe aan `app.py` en **sla** het bestand op.

##
--- code ---

language: python
line_numbers: true
line_number_start: 5
line_highlights: 9-11
---

@app.route('/')
def index():
return 'Hallo wereld'

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

--- /code ---

--- /task ---

--- task ---

Typ in de **Chromium webbrowser** `localhost:5000/cakes` in de adresbalk.

U zou een webpagina moeten zien met de tekst "Lekkere taarten!" erop.

![Lekkere taarten](images/flask-cakes.png)

--- /task ---
123 changes: 123 additions & 0 deletions nl-NL/step_4.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
## Een HTML-sjabloon maken

U kunt een **sjabloon** gebruiken om uw pagina een stijl te geven. De sjabloon maakt gebruik van **HyperText Markup Language (HTML)**.

--- task ---

Ga naar je terminal en druk op <kbd>Ctrl</kbd> + <kbd>C</kbd> om je Flask-server te stoppen.

--- /task ---

--- task ---

Maak een `templates`-map in uw `webapp`-map:

##
--- code ---

language: bash
line_numbers: false
--------------------------------------------------------

mkdir templates

--- /code ---

--- /task ---

--- task ---

Ga terug naar **Thomny** en maak een nieuw bestand. Sla dit bestand op als `index.html` in uw `templates`-map.

--- /task ---

--- task ---

Voeg deze code toe aan `index.html` en **sla** uw wijzigingen op.

##
--- code ---

language: html
line_numbers: true
-------------------------------------------------------

<html>
<body>
<h1>Mijn website</h1>
</body>
</html>

--- /code ---

![Een nieuw bestand genaamd index.html met de bovenstaande code](images/html-file.png)

--- /task ---

--- task ---

--- /task ---

--- task ---

Ga terug naar uw `app.py`-bestand en wijzig de eerste regel code:

##
--- code ---

language: python
line_numbers: true
-------------------------------------------------------

from flask import Flask, render_template

--- /code ---

--- /task ---

--- task ---

Wijzig de `index()`-route om uw `index.html` HTML-sjabloon te gebruiken:

##
--- code ---

language: python
line_numbers: true
line_number_start: 5
line_highlights: 7
-------------------------------------------------------

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

--- /code ---

--- /task ---

--- task ---

Sla `app.py` op en ga terug naar de terminal om het bestand uit te voeren en uw server opnieuw op te starten:

##
--- code ---

language: bash
line_numbers: false
--------------------------------------------------------

python3 app.py

--- /code ---

--- /task ---

--- task ---

Ga naar de pagina `localhost:5000/` in **Chromium** om uw nieuwe HTML-sjabloon te zien.

![Een webbrowser verwees naar localhost:5000 met de tekst 'Mijn website' in een groot koptekstlettertype](images/flask-template.png)

--- /task ---

Loading