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

Volg deze Flask tutorial: bit.ly/flask-for

opdrachten

Volg deze Flask tutorial: bit.ly/flask-for
Gebruik for-loops op jouw site:

opdrachten

Volg deze Flask tutorial: bit.ly/flask-for
Gebruik for-loops op jouw site:
Extra: