Skip to main content

Flask form

In deze opdracht ga je in Flask je een eenvoudige webpagina maken met een formulier. In het formulier vraag je de gebruiker om zijn naam en vervolgens gebruik je die naam voor een begroeting.

  1. Maak een nieuw Python-bestand, bijvoorbeeld app.py, en open het met een teksteditor.

  2. Voeg de volgende code toe aan het Python-bestand:

python
from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/greet', methods=['POST'])
def greet():
    name = request.form.get('name')
    return render_template('greet.html', name=name)

if __name__ == '__main__':
    app.run(debug=True)

  1. Maak een templates-map in dezelfde directory als het Python-bestand.

  2. Maak een nieuw HTML-bestand genaamd index.html in de templates-map en open het met een teksteditor.

  3. Voeg de volgende code toe aan het index.html-bestand:

<!DOCTYPE html>
<html>
<head>
    <title>Flask Opdracht</title>
</head>
<body>
    <h1>Vul je naam in:</h1>
    <form action="/greet" method="POST">
        <input type="text" name="name" required>
        <input type="submit" value="Verzenden">
    </form>
</body>
</html>

  1. Maak een nieuw HTML-bestand genaamd greet.html in de templates-map en open het met een teksteditor.

  2. Voeg de volgende code toe aan het greet.html-bestand:

<!DOCTYPE html>
<html>
<head>
    <title>Flask Opdracht</title>
</head>
<body>
    <h1>Hallo, {{ name }}!</h1>
</body>
</html>

  1. Sla zowel het Python-bestand (app.py), het index.html-bestand als het greet.html-bestand op.

  2. Ga naar de opdrachtprompt of terminalvenster en navigeer naar de projectdirectory waar het Python-bestand zich bevindt.

  3. Voer het volgende commando in: python app.py.

  4. Flask start de ontwikkelingsserver en geeft een URL weer, http://127.0.0.1:5000/.

  5. Open de weergegeven URL in je webbrowser en je zou een formulier moeten zien waar je je naam kunt invullen en verzenden.

  6. Nadat je op "Verzenden" hebt geklikt, zou je begroet moeten worden met de boodschap "Hallo, [naam]!" waarbij [naam] de ingevoerde naam is.

Met deze eenvoudige opdracht kun je een formulier maken in Flask en de ingevoerde naam gebruiken om een begroeting weer te geven. Je kunt deze opdracht verder aanpassen en uitbreiden met meer functionaliteit en stijling naar wens.

Zorg ervoor dat je begrijpt hoe dit werkt, want in een volgende opdracht moet je zelf een formulier maken.

JINJA

De HTML-template is een zogenaamde JINJA template. In een JINJA template kan je python variabelen kan je afdrukken door de variabelen tussen {{ }} te zetten.

Als je (via ChatGPT) meer informatie wilt geef dan aan dat je in Flask met een JINJA template werkt.

Inleveren

  1. Schermafdruk van de gehele browser van de pagina waarin je de naam moet invullen, en
  2. schermafdruk van de gehele browser van de pagina waarin de boodschap wordt getoond.
Back to top