Projectstructuur
Je project groeit met de lessen mee. Elke stand hieronder is de vorige plus wat die les toevoegt. Een bestand verdwijnt alleen als een les zegt dat je het verplaatst. Bestanden die je in een opdracht maakt, zoals contact.html of about.css, staan er niet bij.
Ook de map .venv ontbreekt in de bomen, net als __pycache__, die Python zelf aanmaakt. In je Explorer zie je ze wel, naast main.py; je verandert er niets in.
Bij Je eerste endpoint
je-project/
└── main.py
Alleen een Python-bestand, meer heb je niet nodig.
Bij HTML in bestanden
je-project/
├── main.py
└── static/
└── pages/
└── home.html
HTML staat nu in aparte bestanden, in static/pages/.
Bij Links tussen pagina's
je-project/
├── main.py
└── static/
└── pages/
├── about.html
└── home.html
Een tweede pagina, met een link heen en terug.
Bij CSS in een eigen bestand (static files)
je-project/
├── main.py
└── static/
├── css/
│ └── style.css
└── pages/
├── about.html
└── home.html
CSS in een eigen map, bereikbaar via /static/css/style.css.
Bij Afbeeldingen tonen
je-project/
├── main.py
└── static/
├── css/
│ └── style.css
├── pages/
│ ├── about.html
│ ├── foto.html
│ └── home.html
└── kat.jpg
Afbeeldingen staan direct in de map static.
Bij Templates met Jinja2 tot en met Een formulier beantwoorden met een template
je-project/
├── main.py
├── static/
│ ├── css/
│ │ └── style.css
│ ├── pages/
│ │ ├── about.html
│ │ ├── foto.html
│ │ ├── groet_form.html
│ │ ├── home.html
│ │ └── naam_form.html
│ └── kat.jpg
└── templates/
├── dobbelsteen.html
└── groet_resultaat.html
Er komt een map templates/ bij voor Jinja2-templates. De formulieren zelf blijven vaste bestanden in static/pages/.
static/pages/: vaste HTML-bestanden, die altijd hetzelfde zijntemplates/: HTML-bestanden met{{ variabelen }}die Python invult
Bij Gegevens opslaan met SqliteDict tot en met Doorsturen na opslaan (redirect)
je-project/
├── main.py
├── gastenboek.db
├── mijn_data.db
├── namen.db
├── bekijk_db.py
├── lees_db.py
├── proef_db.py
├── test_db.py
├── static/
│ ├── css/
│ │ └── style.css
│ ├── pages/
│ │ ├── about.html
│ │ ├── foto.html
│ │ ├── gastenboek_form.html
│ │ ├── groet_form.html
│ │ ├── home.html
│ │ ├── naam_form.html
│ │ └── naam_opslaan.html
│ └── kat.jpg
└── templates/
├── dobbelsteen.html
└── groet_resultaat.html
De .db-bestanden maakt sqlitedict zelf aan, de eerste keer dat je iets opslaat. De vier scripts en mijn_data.db komen uit de proeven in Gegevens opslaan met SqliteDict en de twee lessen erna; je server gebruikt ze niet. bekijk_db.py houd je bij de hand: daarmee kijk je in elke database van je project.
Bij Alles tonen: een for-lus in je template tot en met Een bericht verwijderen: een verborgen veld
je-project/
├── main.py
├── gastenboek.db
├── mijn_data.db
├── namen.db
├── bekijk_db.py
├── lees_db.py
├── proef_db.py
├── test_db.py
├── static/
│ ├── css/
│ │ └── style.css
│ ├── pages/
│ │ ├── about.html
│ │ ├── foto.html
│ │ ├── gastenboek_form.html
│ │ ├── groet_form.html
│ │ ├── home.html
│ │ ├── naam_form.html
│ │ └── naam_opslaan.html
│ └── kat.jpg
└── templates/
├── bericht.html
├── berichten.html
├── dobbelsteen.html
└── groet_resultaat.html
Er komen geen mappen bij: een lijstpagina en een detailpagina zijn twee templates naast elkaar.
Bij Registreren: een account opslaan en Inloggen: een wachtwoord controleren
je-project/
├── main.py
├── gastenboek.db
├── gebruikers.db
├── mijn_data.db
├── namen.db
├── bekijk_db.py
├── lees_db.py
├── proef_db.py
├── test_db.py
├── static/
│ ├── css/
│ │ └── style.css
│ ├── pages/
│ │ ├── about.html
│ │ ├── foto.html
│ │ ├── gastenboek_form.html
│ │ ├── groet_form.html
│ │ ├── home.html
│ │ ├── naam_form.html
│ │ ├── naam_opslaan.html
│ │ └── registreer.html
│ └── kat.jpg
└── templates/
├── bericht.html
├── berichten.html
├── dobbelsteen.html
└── groet_resultaat.html
De accounts staan in een eigen database, gebruikers.db, en het formulier om er een te maken is een vast bestand. gastenboek_form.html blijft waar het was; het krijgt in Inloggen alleen een wachtwoordveld.
Bij Zonder herladen met htmx
je-project/
├── main.py
├── gastenboek.db
├── gebruikers.db
├── mijn_data.db
├── namen.db
├── bekijk_db.py
├── lees_db.py
├── proef_db.py
├── test_db.py
├── static/
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ └── htmx.min.js
│ ├── pages/
│ │ ├── about.html
│ │ ├── foto.html
│ │ ├── gastenboek_form.html
│ │ ├── groet_form.html
│ │ ├── home.html
│ │ ├── naam_form.html
│ │ ├── naam_opslaan.html
│ │ └── registreer.html
│ └── kat.jpg
└── templates/
├── bericht.html
├── berichten.html
├── berichten_lijst.html
├── dobbelsteen.html
└── groet_resultaat.html
htmx is één bestand in een nieuwe map static/js/. Bij de htmx-recepten komt berichten_lijst.html erbij: een stuk pagina zonder <html> eromheen, dat een endpoint als antwoord teruggeeft.
Bij JavaScript erbij
je-project/
├── main.py
├── gastenboek.db
├── gebruikers.db
├── mijn_data.db
├── namen.db
├── bekijk_db.py
├── lees_db.py
├── proef_db.py
├── test_db.py
├── static/
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ ├── app.js
│ │ └── htmx.min.js
│ ├── pages/
│ │ ├── about.html
│ │ ├── foto.html
│ │ ├── gastenboek_form.html
│ │ ├── groet_form.html
│ │ ├── home.html
│ │ ├── naam_form.html
│ │ ├── naam_opslaan.html
│ │ └── registreer.html
│ └── kat.jpg
└── templates/
├── bericht.html
├── berichten.html
├── berichten_lijst.html
├── dobbelsteen.html
└── groet_resultaat.html
Je JavaScript komt naast htmx te staan, in dezelfde static-map. Aan main.py verandert niets: app.mount serveert die map al.
Bij Onthouden met een cookie en Onthouden op de server: sessies
je-project/
├── main.py
├── gastenboek.db
├── gebruikers.db
├── mijn_data.db
├── namen.db
├── sessies.db
├── bekijk_db.py
├── lees_db.py
├── proef_db.py
├── test_db.py
├── static/
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ ├── app.js
│ │ └── htmx.min.js
│ ├── pages/
│ │ ├── about.html
│ │ ├── foto.html
│ │ ├── groet_form.html
│ │ ├── home.html
│ │ ├── naam_form.html
│ │ ├── naam_opslaan.html
│ │ └── registreer.html
│ └── kat.jpg
└── templates/
├── bericht.html
├── berichten.html
├── berichten_lijst.html
├── dobbelsteen.html
├── gastenboek.html
└── groet_resultaat.html
Het gastenboekformulier is verhuisd: static/pages/gastenboek_form.html is nu de template templates/gastenboek.html, zodat je naam erin kan. sessies.db maakt sqlitedict aan bij de eerste keer inloggen.
Bij Een eigen 404-pagina: een handler voor fouten
je-project/
├── main.py
├── gastenboek.db
├── gebruikers.db
├── mijn_data.db
├── namen.db
├── sessies.db
├── bekijk_db.py
├── lees_db.py
├── proef_db.py
├── test_db.py
├── static/
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ ├── app.js
│ │ └── htmx.min.js
│ ├── pages/
│ │ ├── about.html
│ │ ├── foto.html
│ │ ├── groet_form.html
│ │ ├── home.html
│ │ ├── naam_form.html
│ │ ├── naam_opslaan.html
│ │ └── registreer.html
│ └── kat.jpg
└── templates/
├── 404.html
├── bericht.html
├── berichten.html
├── berichten_lijst.html
├── dobbelsteen.html
├── gastenboek.html
└── groet_resultaat.html
De foutpagina is een gewone template, naast de andere. De handler die hem gebruikt, staat in main.py.
Compleet overzicht
| Map | Wat staat er? | Voorbeeld |
|---|---|---|
/ | Python code en databases | main.py, gastenboek.db, sessies.db |
static/css/ | CSS bestanden | style.css |
static/js/ | JavaScript en htmx | app.js, htmx.min.js |
static/pages/ | Vaste HTML pagina's | home.html, about.html |
static/ | Afbeeldingen | kat.jpg |
templates/ | Jinja2 templates, ook stukken voor htmx | berichten.html, berichten_lijst.html |
Tip: bij zoveel bestanden komt git goed van pas. Maak een commit bij elke werkende versie; dan durf je te verbouwen, want je kunt altijd terug. Hoe je dat in VS Code doet staat in Git in VS Code.