Webshop-onderdelen - Informatica

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

2.1Uitleg: Architectuur¶

Uitleg

Onderdelen van de webshop¶

Architectuur van de webshop

Als je de webshop bezoekt dan laadt de browser eerst de 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.2Opdracht: Verander het onderwerp¶

Tips

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

2.3Opdracht: Verander de kleur¶

Tips

Kijk in het bestand /static/style.css.

2.4Opdracht: Verander de artikelnamen¶

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

2.5Opdracht: Verander een plaatje¶

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.

2Webshop-onderdelen

2.1Uitleg: Architectuur¶

2.2Opdracht: Verander het onderwerp¶

2.3Opdracht: Verander de kleur¶

2.4Opdracht: Verander de artikelnamen¶

2.5Opdracht: Verander een plaatje¶