programmeren

in python

Jaar 4 - Module 1 - Les 5: User input

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 gebruiker informatie kan laten invoeren

  • Hoe je die invoer kan verwerken met Python

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... tot nu toe hebben we alleen invoer aan de gebruiker laten zien.

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... tot nu toe hebben we alleen invoer aan de gebruiker laten zien.

 

We kunnen ook om invoer vragen met een form!

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> 
    <form action="/verwerk_bericht" method="post">
      <div>
        <label for="name">Naam:</label>
        <input type="text" id="naam" name="naam">
      </div>

      <div>
        <label for="mail">E-mail:</label>
        <input type="text" id="mail" name="email">
      </div>

      <div>
        <label for="msg">Bericht:</label>
        <textarea id="msg" name="bericht"></textarea>
      </div>
    
      <div>
        <input type="submit" value="Verzend bericht">
      </div>
    </form>
  </body>
</html>

Maar... tot nu toe hebben we alleen invoer aan de gebruiker laten zien.

 

We kunnen ook om invoer vragen met een form!

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> 
    <form action="/verwerk_bericht" method="post">
      <div>
        <label for="name">Naam:</label>
        <input type="text" id="naam" name="naam">
      </div>

      <div>
        <label for="mail">E-mail:</label>
        <input type="text" id="mail" name="email">
      </div>

      <div>
        <label for="msg">Bericht:</label>
        <textarea id="msg" name="bericht"></textarea>
      </div>
    
      <div>
        <input type="submit" value="Verzend bericht">
      </div>
    </form>
  </body>
</html>

Maar... tot nu toe hebben we alleen invoer aan de gebruiker laten zien.

 

We kunnen ook om invoer vragen met een form!

HTML - Forms

<form action="/verwerk_bericht" method="post">
  <div>
    <label for="name">Naam:</label>
    <input type="text" id="naam" name="naam">
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="text" id="mail" name="email">
  </div>

  <div>
    <label for="msg">Bericht:</label>
    <textarea id="msg" name="bericht"></textarea>
  </div>

  <div>
    <input type="submit" value="Verzend bericht">
  </div>
</form>

HTML - Forms

<form action="/verwerk_bericht" method="post">
  <div>
    <label for="name">Naam:</label>
    <input type="text" id="naam" name="naam">
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="text" id="mail" name="email">
  </div>

  <div>
    <label for="msg">Bericht:</label>
    <textarea id="msg" name="bericht"></textarea>
  </div>

  <div>
    <input type="submit" value="Verzend bericht">
  </div>
</form>

HTML - Forms

<form action="/verwerk_bericht" method="post">
  <div>
    <label for="name">Naam:</label>
    <input type="text" id="naam" name="naam">
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="text" id="mail" name="email">
  </div>

  <div>
    <label for="msg">Bericht:</label>
    <textarea id="msg" name="bericht"></textarea>
  </div>

  <div>
    <input type="submit" value="Verzend bericht">
  </div>
</form>

HTML - Forms

<form action="/verwerk_bericht" method="post">
  <div>
    <label for="name">Naam:</label>
    <input type="text" id="naam" name="naam">
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="text" id="mail" name="email">
  </div>

  <div>
    <label for="msg">Bericht:</label>
    <textarea id="msg" name="bericht"></textarea>
  </div>

  <div>
    <input type="submit" value="Verzend bericht">
  </div>
</form>

HTML - Forms

<form action="/verwerk_bericht" method="post">
  <div>
    <label for="name">Naam:</label>
    <input type="text" id="naam" name="naam">
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="text" id="mail" name="email">
  </div>

  <div>
    <label for="msg">Bericht:</label>
    <textarea id="msg" name="bericht"></textarea>
  </div>

  <div>
    <input type="submit" value="Verzend bericht">
  </div>
</form>

HTML - Forms

<form action="/verwerk_bericht" method="post">
  <div>
    <label for="name">Naam:</label>
    <input type="text" id="naam" name="naam">
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="text" id="mail" name="email">
  </div>

  <div>
    <label for="msg">Bericht:</label>
    <textarea id="msg" name="bericht"></textarea>
  </div>

  <div>
    <input type="submit" value="Verzend bericht">
  </div>
</form>

HTML - Forms

<form action="/verwerk_bericht" method="post">
  <div>
    <label for="name">Naam:</label>
    <input type="text" id="naam" name="naam">
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="text" id="mail" name="email">
  </div>

  <div>
    <label for="msg">Bericht:</label>
    <textarea id="msg" name="bericht"></textarea>
  </div>

  <div>
    <input type="submit" value="Verzend bericht">
  </div>
</form>

HTML - Forms

<form action="/verwerk_bericht" method="post">
  <div>
    <label for="name">Naam:</label>
    <input type="text" id="naam" name="naam">
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="text" id="mail" name="email">
  </div>

  <div>
    <label for="msg">Bericht:</label>
    <textarea id="msg" name="bericht"></textarea>
  </div>

  <div>
    <input type="submit" value="Verzend bericht">
  </div>
</form>

}

HTML - Forms

<form action="/verwerk_bericht" method="post">
  <div>
    <label for="name">Naam:</label>
    <input type="text" id="naam" name="naam">
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="text" id="mail" name="email">
  </div>

  <div>
    <label for="msg">Bericht:</label>
    <textarea id="msg" name="bericht"></textarea>
  </div>

  <div>
    <input type="submit" value="Verzend bericht">
  </div>
</form>

HTML - Forms

<form action="/verwerk_bericht" method="post">
  <div>
    <label for="name">Naam:</label>
    <input type="text" id="naam" name="naam">
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="text" id="mail" name="email">
  </div>

  <div>
    <label for="msg">Bericht:</label>
    <textarea id="msg" name="bericht"></textarea>
  </div>

  <div>
    <input type="submit" value="Verzend bericht">
  </div>
</form>

HTML - Forms

<form action="/verwerk_bericht" method="post">
  <div>
    <label for="name">Naam:</label>
    <input type="text" id="naam" name="naam">
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="text" id="mail" name="email">
  </div>

  <div>
    <label for="msg">Bericht:</label>
    <textarea id="msg" name="bericht"></textarea>
  </div>

  <div>
    <input type="submit" value="Verzend bericht">
  </div>
</form>

Welke pagina in Python de data gaat verwerken

FLASK - Forms verwerken

dat is deze pagina dus!

from flask import Flask, render_template, request



@app.route('/verwerk_bericht', methods=['POST'])
def bericht_verwerken():
  bericht = request.form['bericht']

  
  return render_template('berichten_lijst.html', 
                         berichten = berichten)

FLASK - Forms verwerken

from flask import Flask, render_template, request



@app.route('/verwerk_bericht', methods=['POST'])
def bericht_verwerken():
  bericht = request.form['bericht']

  
  return render_template('berichten_lijst.html', 
                         berichten = berichten)

Belangrijk! 

Je moet Python vertellen dat er data uit deze pagina komt!

FLASK - Forms verwerken

from flask import Flask, render_template, request



@app.route('/verwerk_bericht', methods=['POST'])
def bericht_verwerken():
  bericht = request.form['bericht']

  
  return render_template('berichten_lijst.html', 
                         berichten = berichten)

Importeer boven aan je pagina request!

FLASK - Forms verwerken

from flask import Flask, render_template, request



@app.route('/verwerk_bericht', methods=['POST'])
def bericht_verwerken():
  bericht = request.form['bericht']

  
  return render_template('berichten_lijst.html', 
                         berichten = berichten)

Met request kan je de data van het formulier opvragen.

Dat is een dictionary! Dus we halen velden op met hun naam.

FLASK - Forms verwerken

from flask import Flask, render_template, request



@app.route('/verwerk_bericht', methods=['POST'])
def bericht_verwerken():
  bericht = request.form['bericht']

  
  return render_template('berichten_lijst.html', 
                         berichten = berichten)

Met request kan je de data van het formulier opvragen.

<form action="/verwerk_bericht" method="post">
  <div>
    <label for="name">Naam:</label>
    <input type="text" id="naam" name="naam">
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="text" id="mail" name="email">
  </div>

  <div>
    <label for="msg">Bericht:</label>
    <textarea id="msg" name="bericht"></textarea>
  </div>

  <div>
    <input type="submit" value="Verzend bericht">
  </div>
</form>

Dit is de tekst van het bericht in het formulier

FLASK - Forms verwerken

from flask import Flask, render_template, request



@app.route('/verwerk_bericht', methods=['POST'])
def bericht_verwerken():
  bericht = request.form['bericht']

  
  return render_template('berichten_lijst.html', 
                         berichten = berichten)

Met request kan je de data van het formulier opvragen.

<form action="/verwerk_bericht" method="post">
  <div>
    <label for="name">Naam:</label>
    <input type="text" id="naam" name="naam">
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="text" id="mail" name="email">
  </div>

  <div>
    <label for="msg">Bericht:</label>
    <textarea id="msg" name="bericht"></textarea>
  </div>

  <div>
    <input type="submit" value="Verzend bericht">
  </div>
</form>

Dit is de tekst van het bericht in het formulier

FLASK - Forms verwerken

from flask import Flask, render_template, request



@app.route('/verwerk_bericht', methods=['POST'])
def bericht_verwerken():
  bericht = request.form['bericht']

  
  return render_template('berichten_lijst.html', 
                         berichten = berichten)

Met de data in bericht kan je nu doen wat je maar wilt!

FLASK - Forms verwerken

from flask import Flask, render_template, request

berichten = []

@app.route('/verwerk_bericht', methods=['POST'])
def bericht_verwerken():
  bericht = request.form['bericht']
  berichten.append(bericht)
  
  return render_template('berichten_lijst.html', 
                         berichten = berichten)

Met de data in bericht kan je nu doen wat je maar wilt!

Bijv opslaan in een lijst en renderen!

FLASK - Forms verwerken

from flask import Flask, render_template, request

berichten = []

@app.route('/verwerk_bericht', methods=['POST'])
def bericht_verwerken():
  bericht = request.form['bericht']
  berichten.append(bericht)
  
  return render_template('berichten_lijst.html', 
                         berichten = berichten)

Met de data in bericht kan je nu doen wat je maar wilt!

Bijv opslaan in een lijst en renderen!

FLASK - Forms verwerken

from flask import Flask, render_template, request

berichten = []

@app.route('/verwerk_bericht', methods=['POST'])
def bericht_verwerken():
  bericht = request.form['bericht']
  berichten.append(bericht)
  
  return render_template('berichten_lijst.html', 
                         berichten = berichten)

Met de data in bericht kan je nu doen wat je maar wilt!

Bijv opslaan in een lijst en renderen!

FLASK - Forms verwerken

from flask import Flask, render_template, request

berichten = []

@app.route('/verwerk_bericht', methods=['POST'])
def bericht_verwerken():
  bericht = request.form['bericht']
  berichten.append(bericht)
  
  return render_template('berichten_lijst.html', 
                         berichten = berichten)

Met de data in bericht kan je nu doen wat je maar wilt!

Bijv opslaan in een lijst en renderen!

  <body>
    <p>
    Welkom op mijn website! Hier staan alle berichten.
    </p>
    <p>
    {%for bericht in berichten%}
      
      {{bericht}} <br>
      
    {%endfor%}
    <p>
  </body>

}

demo

opdrachten

opdrachten

  • Gebruik een form op jouw site: 

 

 

 

 

 

opdrachten

  • Gebruik een form op jouw site: 

 

 

 

 

 

opdrachten

  • Gebruik een form op jouw site:



     
  • Extra: 

 

 

opdrachten

  • Gebruik een form op jouw site:



     
  • Extra: 

 

 

Klas 4 - Module 1 - Les 5

By Felienne

Made with Slides.com

Klas 4 - Module 1 - Les 5

Leerdoel Module: Website maken met Flask Lesdoel: User input met Flask

  • 819

More from Felienne