In deze les leer je hoe je de basis van webpagina's (HTML) en hun styling (CSS) in een Flask webapp kunt integreren. We duiken in templates, zodat je dynamisch en efficiënt webpagina's kunt genereren. Je zult leren hoe je de structuur van je website opbouwt en hoe je die er aantrekkelijk uit kunt laten zien.
HTML (HyperText Markup Language) is de basis van elke webpagina. Het definieert de structuur van de pagina met elementen zoals koppen (<h1>), paragrafen (<p>), afbeeldingen (<img>) en links (<a>).
Voorbeeld:
<!DOCTYPE html>
<html>
<head>
<title>Mijn Eerste Pagina</title>
</head>
<body>
<h1>Welkom!</h1>
<p>Dit is een eenvoudige HTML-pagina.</p>
<img src="/static/image.jpg" alt="Afbeelding">
<a href="/ander_pad">Ga naar andere pagina</a>
</body>
</html>
In dit voorbeeld:
* <!DOCTYPE html> declareert de HTML5-versie.
* De <head> bevat metadata (bijvoorbeeld de titel).
* De <body> bevat de zichtbare inhoud van de pagina.
CSS (Cascading Style Sheets) wordt gebruikt om de stijl van HTML-elementen te bepalen. Je kunt CSS op verschillende manieren toevoegen: inline (direct in de HTML-elementen), embedded (in een <style>-tag in de <head>) of external (in een apart .css-bestand, aanbevolen).
Voorbeeld (external CSS):
Maak een bestand static/style.css met de volgende inhoud:
h1 {
color: blue;
text-align: center;
}
p {
font-size: 16px;
}
In de HTML-pagina (binnen <head>):
<link rel="stylesheet" href="/static/style.css">
Deze CSS-code kleurt de kop blauw en centreert deze, en zet de tekstgrootte van paragrafen op 16 pixels. Vergeet niet om de map static te maken in de root directory van je Flask applicatie.
Flask gebruikt Jinja2 als templating engine. Met templates kun je dynamisch HTML genereren, waarbij je variabelen en logica in je HTML kunt invoegen. Templates bevinden zich meestal in een templates-map in je project.
Voorbeeld:
Maak een bestand templates/index.html:
<!DOCTYPE html>
<html>
<head>
<title>{{ titel }}</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<h1>{{ titel }}</h1>
<p>{{ bericht }}</p>
</body>
</html>
In je Flask-app (app.py):
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
titel = "Welkom bij Mijn Website"
bericht = "Dit is een dynamische webpagina!"
return render_template('index.html', titel=titel, bericht=bericht)
if __name__ == '__main__':
app.run(debug=True)
De render_template() functie geeft de template weer en vervangt de placeholders ({{ titel }}) met de waarden van de variabelen die je doorgeeft.
Explore advanced insights, examples, and bonus exercises to deepen understanding.
Welkom bij dag 2 van je Flask-webapplicatie avontuur! Gisteren hebben we de basis gelegd van HTML en CSS, de bouwstenen van elke webpagina. Vandaag gaan we een stap verder en duiken we in de cruciale wereld van achtergrondprocessen. Stel je voor: je webapp heeft een taak die lang duurt, zoals het verwerken van een grote hoeveelheid data, het verzenden van e-mails, of het genereren van complexe rapporten. Als je dit direct in de webserver uitvoert, blokkeert je applicatie totdat de taak klaar is. Dit leidt tot een slechte gebruikerservaring, omdat gebruikers moeten wachten. Achtergrondprocessen, ook wel "background tasks" of "asynchrone taken" genoemd, lossen dit op.
Het idee achter achtergrondprocessen is simpel: we verplaatsen de langdurende taken naar een apart proces, dat parallel loopt aan je webserver. Je webserver blijft zo responsief, en de gebruiker hoeft niet te wachten. Er zijn verschillende manieren om dit te implementeren in Flask:
Kortom, achtergrondprocessen zijn cruciaal voor het bouwen van schaalbare en responsieve webapps. Ze zorgen ervoor dat je applicatie soepel blijft draaien, zelfs als er complexe taken op de achtergrond worden uitgevoerd.
Stel je voor dat je een webshop hebt. De gebruiker plaatst een bestelling. In plaats van direct de orderbevestiging te verzenden, wil je dit asynchroon doen. Beschrijf, in stappen, hoe je dit zou aanpakken met behulp van Celery. Geef aan welke componenten je nodig hebt (Celery, een message broker zoals RabbitMQ of Redis, en de Flask app).
Schrijf een Flask route die, wanneer aangeroepen, een achtergrondtaak start (je hoeft nog geen echte task queue te implementeren, beschrijf het proces). Deze achtergrondtaak simuleert het genereren van een groot aantal nep-records (bijvoorbeeld 10.000 klanten). Laat de webpagina een voortgangsbalk tonen (simuleer dit in de console) die de status van de taak weergeeft.
Achtergrondprocessen zijn overal! Denk aan:
Zonder achtergrondprocessen zouden deze applicaties traag en onbruikbaar zijn. Denk aan de frustratie als je website vastloopt na het uploaden van een foto op Facebook.
Implementeer een basis-implementatie van Celery met Flask. Maak een simpele taak die een tekstbericht naar de console print. Gebruik een Redis task queue. Breid dit uit en laat Celery taken aanroepen op basis van gebruikersinteractie (bijvoorbeeld een knop op een webpagina).
Om je kennis verder uit te breiden, kun je de volgende onderwerpen bekijken:
Maak een eenvoudige HTML-pagina met een kop, een paragraaf en een afbeelding. Gebruik de tag `<img>` en zorg ervoor dat de afbeelding correct wordt weergegeven. Gebruik een afbeelding uit je statische files
Maak een extern CSS-bestand en pas verschillende stijlen toe op de HTML-pagina van de vorige oefening. Verander de tekstkleur, achtergrondkleur en lettergrootte. Voeg een `class` toe aan een element en style dit element via CSS.
Maak een Flask-route die een template weergeeft. Geef variabelen mee aan de template (bijvoorbeeld de paginatitel en een welkomstbericht). Pas dit toe in een html-pagina met de eerder gemaakte CSS en HTML.
Bouw een simpele blogpagina met Flask, waarbij je verschillende artikelen in je templates weergeeft. Gebruik HTML voor de structuur, CSS voor de opmaak en templates om de artikelen dynamisch te laden. Overweeg hoe je statische resources (zoals afbeeldingen) kunt integreren en style de blogpagina zodat deze aantrekkelijk is voor de gebruiker. Probeer bijvoorbeeld gebruik te maken van responsive design.
Maak je vertrouwd met de basis van HTML, CSS en Flask templates. Bekijk documentatie over Jinja2 en overweeg hoe je templates kunt gebruiken om complexere webapplicaties te bouwen. Bereid je voor op het leren van interactieve elementen en JavaScript-integratie.
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.