Ontwikkelomgevingen en de architectuur van webapps
1. Multi-tier-architectuur
De combinatie van database-server, webserver en client kunnen we als het onderstaande plaatje weergeven:
Figuur 1: Multi-tier-architectuur van webapps.
Deze type softwarearchitectuur noemen we een multi-tier-architectuur.
Multi-tier-architectuur betekent dat er meerdere lagen in de applicatie zijn die verschillende taken hebben. We onderscheiden vaak deze drie lagen:
- de presentatielaag
- de applicatie- of business-logic-laag
- de persistentie- of datalaag
De applicatie die we gaan bouwen met WTIS maakt gebruik van de multi-tier-architectuur.
Lees Web Application Architecture: How the Web Works t/m ‘Web application architecture components and Three-Tier Architecture.
1.1. De presentatielaag
Deze laag beschrijft wat de gebruiker ziet en zal nagenoeg één-op-één overeenkomen met het beroepsproduct voor WTUX. Binnen dit beroepsproduct zie je al een verdeling van verantwoordelijkheden: HTML doet structuur en CSS de vormgeving. Het lagenmodel werkt soortgelijk.
De presentatielaag bestaat in veel applicaties uit HTML (mogelijk gerenderd door een andere taal zoals PHP, Python, Java of zoiets). Zelfs veel mobiele applicaties op je telefoon geven dingen weer via HTML. De meeste moderne websites hebben hier een hoop client-side broncode nog draaien met JavaScript. Maar dat valt buiten de scope van deze course.
1.2. De applicatie- of business-logic-laag
Deze laag beschrijft hoe de applicatie werkt. Bijvoorbeeld: als ik op een film klik wil ik dat de applicatie data over deze film gaat ophalen.
De applicatielaag is de connectie tussen de wat de gebruiker doet en hoe de database de data vormgeeft voor de gebruiker. Deze laag is waar de PHP-broncode die we gaan schrijven wordt uitgevoerd.
1.3. De persistentie- of datalaag
Deze laag beschrijft hoe de data opgeslagen wordt en welke data dat is. Het woord persistentie betekent in deze context dat iets opgeslagen is en blijft bestaan.
persistent (per·sis·tent): blijvend, volhardend
In ons geval is de persistentielaag de laag waar de databasesoftware Microsoft SQL Server. Maar dat kan voor andere applicaties ook dingen zijn als PostgreSQL, MySQL/MariaDB (zie ook de Stack Overflow survey in 2020).
2. Client, HTTP-server, RDBMS
2.1 Webservers
We zijn in deze lessenreeks begonnen met HTML en CSS, broncode die door een browser geïnterpreteerd (= vertaald) wordt. Een openbare website staat op een webserver. Zoals uit het hoofdstuk over netwerken is gebleken bestaat het internet uit een netwerk van meerdere computers die met elkaar verbonden zijn en verbinding maken door middel van ip-adressen. Een webserver is dus een andere machine die bestanden host en die te benaderen vallen.
Wij gebruiken achter de schermen de ‘built-in web server’ van PHP zelf. Vele andere websites gebruiken servers, zoals:
- Apache
- nginx
- lighttpd
Er zijn nog talloze voorbeelden te noemen.
Het bijzondere van een webserver zoals Apache of nginx is dat ze in plaats van alleen bestanden ook software of programma's kunnen draaien. Deze webserver wijst dan in plaats van naar een bestand naar een ander proces of voert zelf een stuk code uit.
Als wij naar een URL gaan begrijpt de webserver voor ons welke file nu door de PHP-interpreter (vertaler) vertaald mag worden. Nu kunnen we dus een dynamische website en ook uitgebreide webapps bouwen. Een PHP-script wordt elke keer opnieuw uitgevoerd als je er naartoe navigeert met de browser.
Dus je ziet niet meer de broncode zoals dit bestand index.php:
<?php
echo "<h1>Hello World!</h1>";
?>
Maar het resultaat:
Of in broncode:
<h1>Hello World!</h1>
Hetzelfde resultaat zou je krijgen als je lokaal op je machine php zou aanroepen om het bestand index.php uit te voeren:
> php index.php
<h1>Hello World!</h1>
Om een webserver veilig te installeren en juist te laten reageren is nogal wat informatie voor nodig. In deze course is daar gewoonweg geen tijd voor om daar bij stil te staan. Vandaar dat we in deze course ervoor hebben gekozen om de built-in webserver van PHP te laten draaien in een container.
2.2 Databases
Maar we zijn er nog niet.
Bij de meeste toepassingen, zoals een webwinkel of een blog, halen we de gegevens, bijvoorbeeld producten, uit een database. In PHP kan je gebruik maken van een PHP-uitbreiding: PDO (PHP Data Objects) om verbinding te maken met de database. PDO zorgt ervoor dat het werken met databases uniformer en veiliger maakt. Stapsgewijs gaat dat zo:
- verbinding maken met een databaseserver
- inloggen
- query uitvoeren
- resultaten ophalen
- resultaten in PHP uitlezen
Veel databases spreken een dialect van SQL (Structured Query Language), een taal om gegevens en alles wat er mee te maken heeft, op te vragen, op te slaan, te wijzigen en eventueel ook weer te verwijderen.