programmeren

in python

Jaar 4 - Module 1 - Les 3: Templates in Flask & Dictionaries

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

 

  • Wat een dictionary is in Python

  • Hoe je een template gebruikt in Flask

Dit programma gebruikt een lijst.

Lijsten (herhaling)

In een lijst halen we een element op met een numerieke index, oftewel, een getal.

 

 

dieren = ['schildpad', 'kikker']
print(dieren[0])

Dit programma gebruikt een lijst.

Lijsten (herhaling)

In een lijst halen we een element op met een numerieke index, oftewel, een getal.

 

Bij een lange lijst is dat niet zo handig.

 

 

dieren = ['schildpad', 'kikker', 'hagedis', 'blobvis', 'hinde', ...]
print(dieren[15])

Dit programma gebruikt een lijst.

Lijsten (herhaling)

In een lijst halen we een element op met een numerieke index, oftewel, een getal.

 

Bij een lange lijst is dat niet zo handig. Als we veel dingen van verschillende soorten opslaan, gebruiken we liever een dictionary.

 

 

dieren = ['schildpad', 'kikker', 'hagedis', 'blobvis', 'hinde', ...]
print(dieren[15])

Dit programma gebruikt een dictionary.

 

 

Dictionaries

Dit programma gebruikt een dictionary.

 

 

Dictionaries

gebruiker = {
  'voornaam': 'Piet',
  'achternaam': 'de Vries',
  'geboortejaar': 2000
}

print(gebruiker['voornaam'])

Dit programma gebruikt een dictionary.

 

 

gebruiker = {
  'voornaam': 'Piet',
  'achternaam': 'de Vries',
  'geboortejaar': 2000
}

print(gebruiker['voornaam'])

Dictionaries

Aanwijzen lijkt op aanwijzen bij een lijst, maar met een naam ipv een getal

Dit programma gebruikt een dictionary.

 

 

gebruiker = {
  'voornaam': 'Piet',
  'achternaam': 'de Vries',
  'geboortejaar': 2000
}

print(gebruiker['voornaam'])

Dictionaries

Aanwijzen lijkt op aanwijzen bij een lijst, maar met een naam ipv een getal

De naam is een string dus aanhalingstekens zijn nodig

Dit programma gebruikt een dictionary.

 

 

gebruiker = {
  'voornaam': 'Piet',
  'achternaam': 'de Vries',
  'geboortejaar': 2000
}

print(gebruiker['voornaam'])

Dictionaries

Instellen gaat anders dan bij een lijst

Dit programma gebruikt een dictionary.

 

 

gebruiker = {
  'voornaam': 'Piet',
  'achternaam': 'de Vries',
  'geboortejaar': 2000
}

print(gebruiker['voornaam'])

Dictionaries

Instellen gaat anders dan bij een lijst

Ieder veld of field krijgt een naam, altijd een string

Dus ook hier aanhalingstekens!

Dit programma gebruikt een dictionary.

 

 

gebruiker = {
  'voornaam': 'Piet',
  'achternaam': 'de Vries',
  'geboortejaar': 2000
}

print(gebruiker['voornaam'])

Dictionaries

Instellen gaat anders dan bij een lijst

Ieder veld of field krijgt een naam, altijd een string

Na het veld komt een dubbele punt

Dit programma gebruikt een dictionary.

 

 

gebruiker = {
  'voornaam': 'Piet',
  'achternaam': 'de Vries',
  'geboortejaar': 2000
}

print(gebruiker['voornaam'])

Dictionaries

Instellen gaat anders dan bij een lijst

Ieder veld of field krijgt een naam, altijd een string

Na het veld komt een dubbele punt

Dan komt de waarde, dan ieder Python type zijn

Dit programma gebruikt een dictionary.

 

 

gebruiker = {
  'voornaam': 'Piet',
  'achternaam': 'de Vries',
  'geboortejaar': 2000
}

print(gebruiker['voornaam'])

Dictionaries

Instellen gaat anders dan bij een lijst

Ieder veld of field krijgt een naam, altijd een string

Na het veld komt een dubbele punt

Dan komt de waarde, dan ieder Python type zijn

Een string mag

Dit programma gebruikt een dictionary.

 

 

gebruiker = {
  'voornaam': 'Piet',
  'achternaam': 'de Vries',
  'geboortejaar': 2000
}

print(gebruiker['voornaam'])

Dictionaries

Instellen gaat anders dan bij een lijst

Ieder veld of field krijgt een naam, altijd een string

Na het veld komt een dubbele punt

Dan komt de waarde, dan ieder Python type zijn

Een getal mag ook!

demo

goed of fout?

gebruiker = {
  voornaam: 'Piet',
  achternaam: 'de Vries',
  geboortejaar: 2000
}

print(gebruiker['voornaam'])
  • Is de code goed -> schrijf wat de code print
  • Is de code fout? -> schrijf FOUT

goed of fout?

'gebruiker' = {
  'voornaam': 'Piet',
  'achternaam': 'de Vries',
  'geboortejaar': 2000
}

print('gebruiker'['voornaam'])
  • Is de code goed -> schrijf wat de code print
  • Is de code fout? -> schrijf FOUT

goed of fout?

adres_blaak = {
  'straat': 'Blaak',
  'nummer': 166
}

gebruiker = {
  'voornaam': 'Carl',
  'achternaam': 'Johnsons',
  'adres': adres_blaak
}

print(gebruiker['voornaam'])
  • Is de code goed -> schrijf wat de code print
  • Is de code fout? -> schrijf FOUT

goed of fout?

adres_blaak = {
  'straat': 'Blaak',
  'nummer': 166
}

gebruiker = {
  'voornaam': 'Carl',
  'achternaam': 'Johnsons',
  'adres': adres_blaak
}

print(gebruiker['adres']['straat'])
  • Is de code goed -> schrijf wat de code print
  • Is de code fout? -> schrijf FOUT

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.

Even opfrissen!

 

HTML & Flask

@app.route('/')
def hello():
  return "Hallo leerlingen!"

Even opfrissen!

 

HTML & Flask

@app.route('/')
def hello():
  return "Hallo leerlingen!"

Welke pagina wordt er geladen?

Even opfrissen!

 

HTML & Flask

@app.route('/')
def hello():
  return "Hallo leerlingen!"

Dit is ons antwoord

demo

Flask kan ook een variabele uit de URL halen.

 

HTML & Flask

# Parameter example
@app.route('/hello/<string:name>')
def hello_name(name):
  return "Hallo " + name

Flask kan ook een variabele uit de URL halen.

 

HTML & Flask

Welke pagina wordt er geladen?

# Parameter example
@app.route('/hello/<string:name>')
def hello_name(name):
  return "Hallo " + name

Flask kan ook een variabele uit de URL halen.

 

HTML & Flask

De tekst achter de slash

komt in de variabele name

# Parameter example
@app.route('/hello/<string:name>')
def hello_name(name):
  return "Hallo " + name

Flask kan ook een variabele uit de URL halen.

 

HTML & Flask

# Parameter example
@app.route('/hello/<string:name>')
def hello_name(name):
  return "Hallo " + name

Flask kan die variabele gebruiken

demo

HTML & Flask

# Parameter example
@app.route('/hello/<string:name>')
def hello_name(name):
  return "<b>Hallo " + name + "</b>"

We kunnen hier dus ook HTML code neerzetten.

HTML & Flask

# Parameter example
@app.route('/hello/<string:name>')
def hello_name(name):
  return "<b>Hallo " + name + "</b>"

We kunnen hier dus ook HTML code neerzetten.

 

Maar, dat wordt snel een rommeltje.

We werken liever met templates.

HTML & Flask

@app.route('/hello_template/<string:name>')
def hello_template(name):
  return render_template('front_page.html',name=name)

Geef een template als antwoord

HTML & Flask

@app.route('/hello_template/<string:name>')
def hello_template(name):
  return render_template('front_page.html',name=name)

Het template front_page.html

HTML & Flask

@app.route('/hello_template/<string:name>')
def hello_template(name):
  return render_template('front_page.html',name=name)

Het template front_page.html

<!DOCTYPE html>
<html>
  <head>
    <title>Welkom op deze site!</title>
  </head>
  <body>
    Hallo {{name}}!
    <p> Welkom </p> 
  </body>
</html>

HTML & Flask

@app.route('/hello_template/<string:name>')
def hello_template(name):
  return render_template('front_page.html',name=name)

Variabele name in het template wordt de name uit de url

<!DOCTYPE html>
<html>
  <head>
    <title>Welkom op deze site!</title>
  </head>
  <body>
    Hallo {{name}}!
    <p> Welkom </p> 
  </body>
</html>

demo

Flask in repl.it

Maak hier een nieuwe map

Flask in repl.it

Maak hier een nieuw HTML bestand

opdrachten

opdrachten

  • Volg deze HTML/Flask les: bit.ly/flask-templates

 

 

 

 

 

opdrachten

  • Volg deze HTML/Flask les: bit.ly/flask-templates
     
  • Gebruik templates op jouw site

 

 

 

 

 

opdrachten

  • Volg deze HTML/Flask les: bit.ly/flask-templates

  • Gebruik templates op jouw site






Klas 4 - Module 1 - Les 3

By Felienne

Made with Slides.com

Klas 4 - Module 1 - Les 3

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

  • 775

More from Felienne