Ga naar hoofdinhoud

Projectstructuur

Tijdens de lessen groeit je project stap voor stap. Hier zie je hoe de mappenstructuur evolueert.

Bij Je eerste endpoint​

je-project/
└── main.py

Alleen een Python bestand — meer heb je niet nodig.

Bij Static files​

je-project/
├── main.py
└── static/
    └── css/
        └── style.css

CSS in een apart bestand, bereikbaar via /static/css/style.css.

Bij HTML in bestanden​

je-project/
├── main.py
└── static/
    ├── css/
    │   └── style.css
    └── pages/
        └── home.html

HTML staat nu ook in aparte bestanden.

Bij Afbeeldingen tonen​

je-project/
├── main.py
└── static/
    ├── css/
    │   └── style.css
    ├── pages/
    │   ├── home.html
    │   └── foto.html
    └── kat.jpg

Afbeeldingen staan direct in de static folder.

Bij POST met templates​

je-project/
├── main.py
├── static/
│   ├── css/
│   │   └── style.css
│   └── pages/
│       ├── home.html
│       └── groet_form.html
└── templates/
    └── groet_resultaat.html

Er komt een templates/ folder bij voor Jinja2 templates.

Verschil: static/pages vs templates
  • static/pages/ — Vaste HTML bestanden die altijd hetzelfde zijn
  • templates/ — HTML bestanden met {{ variabelen }} die door Python worden ingevuld

Bij Gegevens opslaan en POST naar database​

je-project/
├── main.py
├── mijn_data.db
├── static/
│   ├── css/
│   │   └── style.css
│   └── pages/
│       ├── home.html
│       ├── groet_form.html
│       └── naam_opslaan.html
└── templates/
    └── groet_resultaat.html

Het .db bestand wordt automatisch aangemaakt door sqlitedict.

Bij Een lijst tonen en Eén bericht tonen​

je-project/
├── main.py
├── gastenboek.db
├── static/
│   ├── css/
│   │   └── style.css
│   └── pages/
│       └── gastenboek_form.html
└── templates/
    ├── berichten.html
    └── bericht.html

Er komen geen mappen bij: een lijstpagina en een detailpagina zijn gewoon twee templates naast elkaar.

Bij Zonder herladen met htmx​

je-project/
├── main.py
├── gastenboek.db
├── static/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── htmx.min.js
│   └── pages/
│       ├── home.html
│       └── gastenboek_form.html
└── templates/
    ├── berichten.html
    ├── berichten_lijst.html
    └── bericht.html

htmx is één bestand in een nieuwe map static/js/. Bij de recepten in Wat kan htmx allemaal 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
├── static/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   ├── app.js
│   │   └── htmx.min.js
│   └── pages/
│       └── gastenboek_form.html
└── templates/
    ├── berichten.html
    ├── berichten_lijst.html
    └── bericht.html

Je JavaScript komt naast htmx te staan, in dezelfde static-map. Aan main.py verandert niets: app.mount serveert die map al.

Compleet overzicht​

MapWat staat er?Voorbeeld
/Python code en databasemain.py, mijn_data.db
static/css/CSS bestandenstyle.css
static/js/JavaScript en htmxapp.js, htmx.min.js
static/pages/Vaste HTML pagina'shome.html, form.html
static/Afbeeldingenfoto.jpg, logo.png
templates/Jinja2 templates, ook stukken voor htmxresultaat.html, berichten_lijst.html

Tip: een project met zoveel bestanden is precies waar git voor bestaat. Eén commit per werkende versie, en je durft te verbouwen omdat je altijd terug kunt. Hoe je dat in VS Code doet staat in Git in VS Code.