programmeren
in python
Jaar 4 - Module 1 - Les 4: For in Templates in Flask
Dit jaar gaan we...
-
Leren hoe websites werken
-
Wat het verschil is tussen server & client software
Dit jaar gaan we...
-
Leren hoe websites werken
-
Wat het verschil is tussen server & client software
-
Zelf een website maken met Python, HTML & Javascript
-
Voor jezelf, of voor een eigen klant
De komende weken gaan we...
-
Leren hoe websites werken
-
Zelf een website maken met Python
-
Python kennis opfrissen en verdiepen
vandaag gaan we leren
-
Hoe je een 'for' gebruikt in een template in Flask
-
Hoe je dat kan combineren met een Python-lijst
Dit programma gebruikt een dictionary.
Dictionaries (herhaling)
Dit programma gebruikt een dictionary.
gebruiker = {
'voornaam': 'Piet',
'achternaam': 'de Vries',
'geboortejaar': 2000
}
print(gebruiker['voornaam'])
Dictionaries (herhaling)
demo
HTML is de codetaal die bepaalt hoe websites eruit zien.
HTML
HTML is de codetaal die bepaalt hoe websites eruit zien.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Welkom op deze site!</title>
</head>
<body>
Hallo allemaal!
<p> Welkom </p>
</body>
</html>
HTML is de codetaal die bepaalt hoe websites eruit zien.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Welkom op deze site!</title>
</head>
<body>
Hallo allemaal!
<p> Welkom </p>
</body>
</html>
Maar... een HTML pagina is "statisch".
HTML is de codetaal die bepaalt hoe websites eruit zien.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Welkom op deze site!</title>
</head>
<body>
Hallo allemaal!
<p> Welkom </p>
</body>
</html>
Maar... een HTML pagina is "statisch".
Statisch betekent dat de pagina altijd hetzelfde is, en niet kan veranderen door een actie van de gebruiker.
HTML is de codetaal die bepaalt hoe websites eruit zien.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Welkom op deze site!</title>
</head>
<body>
Hallo allemaal!
<p> Welkom </p>
</body>
</html>
Maar... een HTML pagina is "statisch".
Statisch betekent dat de pagina altijd hetzelfde is, en niet kan veranderen door een actie van de gebruiker.
Flask zorgt ervoor dat pagina's wel dynamisch worden, met templates.
Met Flask mag je variabelen
invoegen in een HTML pagina.
HTML & Flask
<!DOCTYPE html>
<html>
<head>
<title>Welkom op deze site!</title>
</head>
<body>
Hallo allemaal!
<p> Welkom </p>
</body>
</html>
Met Flask mag je variabelen
invoegen in een HTML pagina.
Dat doen we met dubbele krulhaakjes!
HTML & Flask
<!DOCTYPE html>
<html>
<head>
<title>Welkom op deze site!</title>
</head>
<body>
Hallo {{name}}!
<p> Welkom </p>
</body>
</html>
HTML & Flask
<!DOCTYPE html>
<html>
<head>
<title>Welkom op deze site!</title>
</head>
<body>
Hallo {{name}}!
<p> Welkom </p>
</body>
</html>
Met Flask mag je variabelen
invoegen in een HTML pagina.
Dat doen we met dubbele krulhaakjes!
Vanuit Flask geef je de variabele mee aan het template.
HTML & Flask
<!DOCTYPE html>
<html>
<head>
<title>Welkom op deze site!</title>
</head>
<body>
Hallo {{name}}!
<p> Welkom </p>
</body>
</html>
Met Flask mag je variabelen
invoegen in een HTML pagina.
Dat doen we met dubbele krulhaakjes!
Vanuit Flask geef je de variabele mee aan het template.
Maar... dit is maar één waarde.
HTML & Flask
<!DOCTYPE html>
<html>
<head>
<title>Welkom op deze site!</title>
</head>
<body>
Hallo {{name}}!
<p> Welkom </p>
</body>
</html>
Met Flask mag je variabelen
invoegen in een HTML pagina.
Dat doen we met dubbele krulhaakjes!
Vanuit Flask geef je de variabele mee aan het template.
Maar... dit is maar één waarde. Wat te doen met meer data?
Flask - For
<!DOCTYPE html>
<html>
<head>
<title>Welkom op deze site!</title>
</head>
<body>
Hallo {{klasnaam}}!
Leerlingen in onze klas zijn:
{naam1, naam2, naam3, naam4, ... }
<p> Welkom </p>
</body>
</html>
Als je meer data hebt, kun je heel veel variabelen gebruiken.
Dan moet je ook al die namen in Python doorgeven
HTML & Flask
@app.route('/hello_template/<string:name>')
def hello_template(name):
return render_template('front_page.html',naam1="Marielle",
naam2="Sivan", naam3="Anouar",
naam4="Boas", ....)
Dan moet je ook al die namen in Python doorgeven
HTML & Flask
@app.route('/hello_template/<string:name>')
def hello_template(name):
return render_template('front_page.html',naam1="Marielle",
naam2="Sivan", naam3="Anouar",
naam4="Boas", ....)
Dat wordt een rommel!
Dan moet je ook al die namen in Python doorgeven
HTML & Flask
@app.route('/hello_template/<string:name>')
def hello_template(name):
return render_template('front_page.html',naam1="Marielle",
naam2="Sivan", naam3="Anouar",
naam4="Boas", ....)
Dat wordt een rommel!
Het kan gelukkig ook met een lijst.
Flask - For
<!DOCTYPE html>
<html>
<head>
<title>Welkom op deze site!</title>
</head>
<body>
Hallo {{klasnaam}}!
<p>
{%for leerling in leerlingen%}
{{leerling}}
{%endfor%}
<p>
</body>
</html>
Als je meer data hebt, kun je heel veel variabelen gebruiken.
In Python geef je dan de hele lijst door.
HTML & Flask
@app.route('/lijst/')
def lijst(name):
leerlingen = ['Sivan', 'Boas', 'Marielle', 'Raymond']
return render_template('lijst.html',
leerlingen = leerlingen,
klasnaam = 'lk4cod')
demo
opdrachten
opdrachten
- Volg deze Flask tutorial: bit.ly/flask-for
opdrachten
- Volg deze Flask tutorial: bit.ly/flask-for
- Gebruik for-loops op jouw site:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/995112/images/8961292/pasted-from-clipboard.png)
opdrachten
- Volg deze Flask tutorial: bit.ly/flask-for
- Gebruik for-loops op jouw site:
- Extra:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/995112/images/8961292/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/995112/images/8961305/pasted-from-clipboard.png)
Klas 4 - Module 1 - Les 4
By Felienne
Klas 4 - Module 1 - Les 4
Leerdoel Module: Website maken met Flask Lesdoel: Begin dictionaries.
- 636