Webshop-onderdelen - Informatica

We beginnen met drie smurfen.

Schermafdruk van webshop aan het begin van dit hoofdstuk.

In dit hoofdstuk ga je kleine wijzigingen maken in je webshop, zoals teksten, kleuren en plaatjes aanpassen. Je maakt kennis met alle onderdelen van de webshop en leert hoe die samenwerken.

2.1Opdracht: Startcode voor je webshop¶

In deze opdracht krijgt iedereen uit jouw groepje een ontwikkelomgeving met toegang tot de startcode. Er is één ontwikkelomgeving per persoon en één kopie van de startcode per groepje. De ontwikkelomgeving heet een codespace. De map met code heet een repository. De repository en de codespace zijn onderdeel van de GitHub-website.

Tips

Meer informatie over de ontwikkelomgeving Codespaces vind je op
https://stanislas.informatica.nu/webshop/codespaces/

Tips

Bij de startcode zit een README.md bestand. Hierin staat hoe je code kunt starten, stoppen, wijzigingen en opslaan.
Meer informatie over de ontwikkelomgeving Codespaces vind je op
https://stanislas.informatica.nu/webshop/codespaces/

2.2Uitleg: Architectuur¶

Uitleg

Onderdelen van de webshop¶

Architectuur van de webshop

Als je de webshop bezoekt dan laadt de browser eerst een kale webpagina zonder producten. Daarna worden de artikelen geladen. Dat gaat zo snel, dat je het bijna niet ziet.

Webpagina laden¶

Het laden van de kale webpagina gaat met de volgende stappen.

Je opent een browser op je client en navigeert naar de webshop.
De browser downloadt het index.html bestand van de server.
In het index.html bestand ziet de browser dat hij de bestanden style.css en script.js moet laden.
De bestanden index.html en style.css bevatten de startpagina van de webshop, zonder producten. De informatie uit die bestanden wordt door de browser opgeslagen in een Document Object Model (DOM). De DOM staat in het geheugen van de browser en bepaalt wat de browser op het scherm toont.

Producten laden¶

Het laden van de artikelen gebeurt in de volgende stappen.

In script.js staat een JavaScript-programma. De browser voert dat programma uit.
De JavaScript-code maakt via een link verbinding met de server.
De link is gekoppeld aan een programma op de server. Dit programma is een Application Programming Interface (API, spreek uit als ee-pie-aai). De API in deze webshop is geschreven in de programmeertaal Python.
De API vraagt via het SQL-commando select informatie over artikelen op uit de database.
Het antwoord van de database wordt door de API omgezet in JSON-formaat (spreek uit als djee-sun-formaat) en teruggestuurd naar de client waarop de browser draait.
Het JavaScript-programma in de browser leest het JSON-bestand en voegt elementen toe aan de DOM. Die elementen zijn stukjes HTML met informatie over de artikelen. In die informatie zit ook een link naar het plaatje van het artikel. De browser downloadt de plaatjes en toont alle elementen die aan de DOM zijn toegevoegd op het scherm.

REST

Het geheel van linken, API, database en JSON dat op de server staat is een REST-API. De REST-API zorgt ervoor dat de JavaScript-code in de browser informatie op kan vragen over artikelen uit de webshop. De REST-API wint aan populariteit vanaf ongeveer 2010. Voor die tijd werd vaak gekozen voor een server die complete webpagina’s maakt, inclusief alle informatie over de artikelen.

Een voordeel van REST ten opzichte van de traditionele aanpak is dat REST interactievere websites mogelijk maakt. Dat komt omdat het laden van extra informatie via een REST-API sneller gaat dan het herladen van de hele webpagina. Een ander voordeel is dat een REST-API gemakkelijk door andere programma’s dan browsers gebruikt kan worden. Zo kun je bijvoorbeeld zelf een Python-programma schrijven dat gebruik maakt van de REST-interface van chatgpt.

Je leert meer over REST in de volgende hoofdstukken.

2.3Opdracht: Je eerste wijzigingen in je webshop¶

In deze opdracht ga je de eerste kleine wijzigingen maken in de startcode die je hebt gekregen.

Tips

Kijk in het bestand /static/index.html.
Zoek naar de h1 tag

Tips

Kijk in het bestand /static/style.css.

Tips

Kijk in het bestand /data/init.sql en pas daar de inhoud van de juiste velden aan.
Start de webshop opnieuw met het terminal-commando bash start.sh. Tijdens het starten wordt de database opnieuw gemaakt met de commando’s in het bestand init.sql

Tips

Er is meer uitleg over de ontwikkelomgeving Codespaces, daarin staat hoe je bestanden kunt uploaden.
De bestanden met plaatjes staan in de map /static/images.
De namen van de bestanden staan in de database /data/init.sql.
Na aanpassen van het bestand /data/init.sql moet je de database opnieuw maken met het terminal-commando bash start.sh.

2 Webshop-onderdelen

2.1Opdracht: Startcode voor je webshop¶

2.2Uitleg: Architectuur¶

2.3Opdracht: Je eerste wijzigingen in je webshop¶