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: 

 

 

 

 

 

opdrachten

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



     
  • Extra:
     

 

 

 

 

 

Klas 4 - Module 1 - Les 4

By Felienne

Made with Slides.com

Klas 4 - Module 1 - Les 4

Leerdoel Module: Website maken met Flask Lesdoel: Begin dictionaries.

  • 700

More from Felienne