Welkom bij je eerste stap in de wereld van web ontwikkeling! In deze les leer je de basis van Flask, een populaire Python framework voor web applicaties, en hoe je je eerste eenvoudige webpagina maakt. Je zult begrijpen hoe webapplicaties werken en hoe je een basis structuur in Python kunt bouwen.
Flask is een micro-framework voor Python, perfect voor het bouwen van web applicaties. Het is 'micro' omdat het een minimale basis heeft, wat betekent dat je flexibel bent en alleen de componenten toevoegt die je nodig hebt. Flask is populair vanwege zijn eenvoud, flexibiliteit en gebruiksgemak. Het is ideaal voor kleine tot middelgrote projecten, en het kan ook worden uitgebreid voor complexere applicaties.
Denk aan Flask als een 'gereedschapskist' voor web applicaties. Je kiest zelf welke gereedschappen (libraries en packages) je erin stopt om je project te bouwen. Dit in tegenstelling tot 'full-stack' frameworks, die vaak alles aan boord hebben.
Voordat we beginnen, moeten we Flask installeren. Open je terminal of command prompt en typ:
pip install flask
Dit installeert Flask en alle benodigde dependencies. pip is de package installer voor Python. Zorg ervoor dat je Python en pip correct geïnstalleerd hebt. Je kunt dit controleren door python --version en pip --version in de terminal te typen.
Als je een virtual environment gebruikt (aanbevolen!), activeer die dan voordat je pip install flask uitvoert.
Laten we nu onze eerste Flask applicatie maken. Maak een nieuw bestand genaamd app.py (of iets dergelijks) en voeg de volgende code toe:
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello_world():
return "Hallo, Wereld!"
if __name__ == "__main__":
app.run(debug=True)
Laten we de code uitleggen:
from flask import Flask: Dit importeert de Flask klasse.app = Flask(__name__): Dit maakt een Flask applicatie instantie. __name__ verwijst naar de naam van het huidige Python module.@app.route("/"): Dit is een decorator. Het definieert een route ('/') voor je applicatie. De route is de URL die gebruikers in hun browser typen (bijvoorbeeld http://127.0.0.1:5000/).def hello_world():: Dit is een functie die wordt uitgevoerd wanneer iemand naar de '/' route gaat.return "Hallo, Wereld!": Deze regel retourneert de tekst die in de browser wordt weergegeven.app.run(debug=True): Dit start de applicatie. debug=True is handig tijdens ontwikkeling omdat het automatische herstarten en gedetailleerde foutmeldingen toestaat.Sla app.py op. Open je terminal, navigeer naar de map waar je app.py hebt opgeslagen, en typ:
python app.py
Je zult een bericht zien dat zegt dat de applicatie draait (meestal op http://127.0.0.1:5000/). Open je webbrowser en ga naar dit adres. Gefeliciteerd! Je hebt je eerste Flask web applicatie gemaakt en 'Hallo, Wereld!' wordt weergegeven.
Laten we nu een route toevoegen die een HTML-pagina weergeeft. Maak een map genaamd templates in dezelfde map als app.py. Maak binnen de templates map een bestand genaamd index.html met de volgende inhoud:
<!DOCTYPE html>
<html>
<head>
<title>Mijn Eerste Webpagina</title>
</head>
<body>
<h1>Welkom!</h1>
<p>Dit is mijn eerste webpagina gebouwd met Flask.</p>
</body>
</html>
Verander vervolgens je app.py als volgt:
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template('index.html')
if __name__ == "__main__":
app.run(debug=True)
from flask import Flask, render_template: We importeren nu render_template.return render_template('index.html'): We gebruiken render_template om de index.html pagina weer te geven.Explore advanced insights, examples, and bonus exercises to deepen understanding.
Welkom terug bij je reis door de wereld van Flask! We hebben de basis gelegd: Flask installeren, simpele routes maken, en HTML weergeven. Nu duiken we dieper in, om te begrijpen hoe we taken op de achtergrond kunnen laten draaien in een enterprise-level webapplicatie. Dit is essentieel voor taken die lang kunnen duren, zoals het verwerken van grote bestanden, het versturen van e-mails, of het communiceren met externe API's. Zonder achtergrondprocessen zou je webapplicatie vastlopen of trager worden.
Stel je voor: je webapp moet een rapport genereren, dat gebaseerd is op data van een paar gigabytes. Als je dit direct in de routecode doet, wacht de gebruiker tot het rapport klaar is. Dit is een slechte gebruikerservaring. Achtergrondprocessen, ook wel asynchrone taken genoemd, lossen dit op. Ze laten je app de gebruikers direct een reactie geven (bv. "Rapport wordt gegenereerd, je ontvangt het binnenkort per e-mail"), terwijl het rapport in de achtergrond wordt gemaakt. Zo blijft je webapp responsief.
We gaan gebruik maken van een simpele library: threading. Deze library maakt het mogelijk om meerdere processen tegelijkertijd uit te voeren. Voor grotere enterprise-level applicaties, kun je kijken naar libraries als Celery of RQ. Deze bieden meer geavanceerde mogelijkheden voor taakverdeling en betrouwbaarheid.
Oefening 1: Simpel Achtergrondproces.
Pas je bestaande Flask applicatie aan om een simpele functie (bv. het schrijven van een tekst naar een bestand) uit te voeren in een achtergrondproces. Gebruik threading om dit te bereiken. Laat in de webpagina een bericht zien dat het proces is gestart. Voeg daarna een statische pagina toe die je bericht toont.
import threading
from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)
def lange_taak():
import time
time.sleep(5) # Simuleer een lange taak
with open("achtergrond_output.txt", "w") as f:
f.write("Taak voltooid in de achtergrond!")
print("Achtergrondtaak voltooid!")
@app.route("/")
def index():
return render_template("index.html") # maak index.html met een startknop
@app.route("/start_taak")
def start_taak():
t = threading.Thread(target=lange_taak)
t.start()
return redirect(url_for('taak_status'))
@app.route("/taak_status")
def taak_status():
# implementeer dit. Laat zien of de taak klaar is, en een link naar de output.
return render_template("status.html") # maak status.html
if __name__ == "__main__":
app.run(debug=True)
Oefening 2: Parameteroverdracht.
Breid Oefening 1 uit. Laat de gebruiker via een formulier een parameter (bv. een naam) invoeren, die meegegeven wordt aan de achtergrondtaak. Zorg ervoor dat de taak de naam gebruikt bij het schrijven naar het bestand.
Hint: Gebruik request.form om de parameter uit het formulier te halen.
Achtergrondprocessen zijn cruciaal voor veel webapplicaties:
Stel je voor, je bouwt een webshop. De orderbevestigingen, tracking-nummers, voorraad updates, etc. moeten allemaal op de achtergrond plaatsvinden.
Probeer een progress bar te implementeren in je webpagina. Laat de progress bar de voortgang van het achtergrondproces weergeven. Dit vereist het gebruik van JavaScript (bv. met behulp van AJAX) om de status van het proces op te vragen.
Duik dieper in de wereld van asynchronous programming en taakwachtrijen! Dit is een essentiële skill voor moderne web development.
Voeg een nieuwe route toe aan je Flask applicatie (bijvoorbeeld `/about`) en laat deze route een andere HTML-pagina (bijvoorbeeld `about.html`) weergeven. Zorg ervoor dat de `about.html` pagina in de `templates` map staat en andere content bevat dan `index.html`.
Verander de code in `app.py` om een fout te veroorzaken (bijvoorbeeld een typefout in de code of een ontbrekende import). Bekijk de foutmelding in de browser en probeer de fout te begrijpen en te corrigeren. Debugging is een essentieel onderdeel van programmeren!
Voeg een CSS stijl toe aan je index.html pagina (bijvoorbeeld een achtergrondkleur, font-style, etc.) en speel met verschillende HTML elementen (headings, paragraphen, lijsten).
Stel je voor dat je een simpele webpagina wilt maken voor je lokale voetbalvereniging. Je wilt een pagina maken waarop de laatste uitslagen, de stand van de competitie en een contactformulier staan. Hoe zou je dit aanpakken met de kennis die je nu hebt?
Bereid je voor op de volgende les door de basisprincipes van HTML en CSS te herzien. We gaan dieper in op het stylen van webpagina's en het toevoegen van dynamische content aan je Flask applicaties. Probeer te experimenteren met de code en de exercises.
We're automatically tracking your progress. Sign up for free to keep your learning paths forever and unlock advanced features like detailed analytics and personalized recommendations.