Template A

• newEditor
• Template
• MBO
• Studiejaar 1-4

Examentraining - Xampp

Open vanuit herkenning: studenten gebruiken dagelijks websites, maar weten vaak niet welke onderdelen daarachter samenwerken. Deze les bouwt die keten stap voor stap op tot aan lokaal testen met XAMPP.

Leerdoel

Ik kan uitleggen wat internet, een website, een webserver en een browser zijn, waarvoor XAMPP wordt gebruikt, welke rol Apache, MySQL/MariaDB, PHP en phpMyAdmin hebben, en hoe ik XAMPP start en een eenvoudige testpagina via localhost open.

Welke woorden koppel jij aan XAMPP?

Gebruik de opbrengst om voorkennis zichtbaar te maken. Haal begrippen als website, browser, server, localhost, HTML of database kort op zonder al te corrigeren.

Wat is internet?

• Internet is een wereldwijd netwerk van computers

• Die computers kunnen gegevens naar elkaar sturen

• Websites, e-mail en apps maken gebruik van dit netwerk

• Internet is dus de verbinding, niet de website zelf

Benadruk het verschil tussen 'het netwerk' en 'wat erop draait'. Veel studenten gebruiken internet en website alsof het hetzelfde is.

Wat is een website?

Een website is een verzameling webpagina's en bestanden die via internet of een lokaal netwerk bekeken kunnen worden. Denk aan HTML-pagina's, afbeeldingen, stijlen en soms interactieve onderdelen zoals formulieren.

• HTML-pagina's: Dit vormt de ruggengraat (de structuur en de tekst) van de webpagina's.

• Media en stijlen: Afbeeldingen, video's en CSS-bestanden (die zorgen voor de vormgeving, kleuren en lay-out).

• Interactiviteit: Formulieren, knoppen of animaties die vaak worden aangestuurd door scripts (zoals JavaScript).

• Toegankelijkheid: Het feit dat dit via een netwerk (zoals het wereldwijde internet of een besloten lokaal intranet) met een webbrowser wordt ingeladen vanaf een webserver.

Koppel aan iets bekends: een homepage met meerdere onderliggende pagina's. Noem dat een website inhoud heeft, maar zelf niet 'draait' zonder een server.

Wat is een webserver?

• Een webserver levert websitebestanden aan op aanvraag

• Hij ontvangt een verzoek van een browser

• Daarna stuurt hij de juiste pagina of data terug

• Een webserver kan software, hardware of beide betekenen

Leg uit dat in deze les vooral de softwarekant belangrijk is: Apache als programma dat verzoeken afhandelt.

Browser en webserver

• Programma op het apparaat van de gebruiker

• Opent en toont webpagina's

• Voorbeelden: Chrome, Edge, Firefox

Webserver

Browser

• Programma of computer aan de andere kant

• Beheert websitebestanden

• Stuurt pagina's terug na een verzoek

Maak de relatie concreet: de browser vraagt, de webserver antwoordt. Dat onderscheid is nodig voordat localhost en XAMPP logisch worden.

Hoe werken ze samen?

Browser vraagt pagina op → webserver ontvangt verzoek → webserver zoekt bestanden of voert code uit → webserver stuurt antwoord terug → browser toont de pagina.

Gebruik dit als eenvoudige keten. Nog niet verdiepen in HTTP-details; het doel is begrip van de samenwerking.

Localhost en 127.0.0.1

• localhost betekent: deze eigen computer

• 127.0.0.1 is het bijbehorende IP-adres

• Beide verwijzen meestal naar dezelfde lokale machine

• Handig om websites eerst lokaal te testen

Benadruk dat studenten hier nog geen internetverbinding voor nodig hebben: browser en webserver kunnen op dezelfde computer draaien.

Wat is het verschil tussen een browser en een webserver?

A

Browser vraagt op

B

Browser slaat op

C

Webserver ontwerpt

D

Webserver typt

Correct: de browser vraagt een pagina op en toont die; de webserver ontvangt het verzoek en stuurt bestanden terug. Afleiders spelen in op verwarring met opslag, design en programmeren.

Vul de kernbegrippen in

Het internet is het netwerk waarover gegevens worden verstuurd. Een website is de verzameling pagina’s en bestanden. Een browser vraagt een pagina op bij een webserver. Via localhost test je dit op je eigen computer.

internet

website

browser

webserver

database

XAMPP

phpMyAdmin

poort

Laat studenten de vier basisbegrippen koppelen aan hun functie in de keten netwerk → inhoud → opvragen → terugsturen.

Wat is XAMPP?

Introduceer XAMPP als oefenomgeving voor lokaal webdevelopment. Het is geen websitebouwer, maar een pakket waarmee je serveronderdelen op je eigen computer kunt draaien.

Waarom gebruiken ontwikkelaars XAMPP?

• Om websites lokaal te bouwen en testen

• Om een webserver op de eigen computer te hebben

• Om met databases te werken zonder online hosting

• Om HTML, PHP en databasekoppelingen veilig uit te proberen

Koppel aan beroepspraktijk: snel testen, fouten zoeken en oefenen zonder direct iets online te zetten.

Waar staat XAMPP voor?

• X = cross-platform

• A = Apache

• M = MySQL/MariaDB

• P = PHP

• P = Perl

Letters

Betekenis

Het pakket bundelt meerdere onderdelen die samen nodig zijn om lokaal webapplicaties te draaien.

Perl hoeft niet uitgediept te worden; de les focust verder op Apache, MySQL/MariaDB, PHP en phpMyAdmin.

De onderdelen van XAMPP

• Apache: webserver

• PHP: voert server-side code uit

Data en beheer

Server en code

• MySQL/MariaDB: database

• phpMyAdmin: beheer van databases via de browser

Noem dat MariaDB vaak de plaats van MySQL inneemt, maar in de praktijk vervullen ze in deze context dezelfde rol: data opslaan en ophalen.

Hoe werken deze onderdelen samen?

Een browser opent een lokaal adres. Apache ontvangt het verzoek. Als de pagina PHP bevat, voert PHP de code uit. Als gegevens nodig zijn, haalt PHP die op uit MySQL/MariaDB. Via phpMyAdmin kun je die database bekijken en beheren.

Dit is het kernplaatje van de les. Laat studenten de keten koppelen aan de eerdere relatie tussen browser en webserver.

Waarvoor gebruiken ontwikkelaars XAMPP vooral?

A

Lokaal testen

B

Online hosten

C

Domeinen kopen

D

Afbeeldingen tekenen

Correct: XAMPP is bedoeld om lokaal een serveromgeving te draaien. Studenten verwarren dit soms met hosting of webdesignsoftware.

Vul de onderdelen van XAMPP in

In XAMPP ontvangt Apache het verzoek van de browser. Daarna kan PHP code uitvoeren. Gegevens worden opgeslagen in MySQL/MariaDB, en via phpMyAdmin beheer je die database in de browser.

Apache

PHP

MySQL/MariaDB

phpMyAdmin

localhost

htdocs

poort 80

website

Alle blanks hebben een vaste plek door hun functie in de verwerkingsketen. Bespreek vooral het verschil tussen uitvoeren, opslaan en beheren.

Waarom is localhost handig bij het testen van een website?

Bespreek dat localhost en 127.0.0.1 naar de eigen computer verwijzen, waardoor browser en webserver lokaal op dezelfde machine kunnen draaien zonder online hosting. Laat studenten het koppelen aan veilig testen en oefenen.

Installatie van XAMPP

• Download en installeer XAMPP op de computer

• Na installatie is het XAMPP Control Panel beschikbaar

• Vanuit dit venster start en stop je onderdelen

• Voor deze les zijn vooral Apache en MySQL belangrijk

Geen uitgebreide installatiestappen op de slide; houd het bij de hoofdlijn. Eventuele verschillen tussen Windows/macOS kan de docent mondeling toelichten.

Het XAMPP Control Panel

• Overzicht van beschikbare onderdelen

• Knoppen zoals Start en Stop

• Status is zichtbaar terwijl een onderdeel draait

• Hier beheer je lokaal je serveromgeving

Wijs op de interface en laat studenten termen herkennen voordat ze ermee werken.

Apache en MySQL starten

• Start Apache om webpagina's te kunnen openen

• Start MySQL als de website met een database werkt

• Een actief onderdeel blijft zichtbaar als draaiende service

• Zonder Apache opent de browser geen lokale website

Zeg expliciet dat een simpele HTML-pagina alleen Apache nodig heeft. MySQL is pas nodig zodra dataopslag of een CMS in beeld komt.

Status en poorten herkennen

• Een draaiend onderdeel heeft een actieve status in het Control Panel

• Een poort is een genummerde ingang voor netwerkverkeer

• Apache gebruikt vaak poort 80

• MySQL gebruikt vaak poort 3306

• Bij een bezette poort kan een onderdeel niet goed starten

Houd poorten functioneel: geen diep netwerkverhaal, wel het idee dat twee programma's niet tegelijk dezelfde poort kunnen gebruiken.

Waar zet je je websitebestanden?

• XAMPP gebruikt de map htdocs als webmap

• Bestanden in deze map kunnen via Apache worden geopend

• Maak bijvoorbeeld een map mijnwebsite

• Zet daarin je HTML-bestand, zoals index.html

Leg uit dat de mapstructuur direct terugkomt in het webadres. Dat helpt bij de volgende slide over localhost/mijnwebsite.

Een testpagina lokaal openen

• Start Apache in XAMPP

• Plaats je pagina in htdocs/mijnwebsite

• Open in de browser: http://localhost/mijnwebsite

• De browser vraagt de pagina op bij je lokale webserver

• Apache stuurt het bestand terug en de browser toont de pagina

Noem dat index.html automatisch vaak als startpagina wordt geladen. Als het niet werkt, controleer Apache, mapnaam en bestandslocatie.

De onderdelen in de praktijk

Bij een eenvoudige testpagina zie je de samenwerking duidelijk: de browser opent het adres, Apache levert de HTML-pagina, en localhost verwijst naar je eigen computer. Voeg je later PHP of een database toe, dan komen ook PHP en MySQL/MariaDB in dezelfde lokale omgeving in actie.

Dit is de landingsslide van de les: alles samenbrengen in één praktisch scenario.

Welke combinatie is nodig voor een simpele lokale HTML-testpagina?

A

Apache en MySQL

B

Alleen Apache

C

PHP en MySQL

D

Alleen phpMyAdmin

Correct: voor een eenvoudige HTML-pagina is alleen Apache nodig. MySQL en PHP zijn pas nodig bij dynamische of databasegestuurde onderdelen.

Vul de stappen van lokaal openen in

Je zet je bestanden in htdocs en maakt bijvoorbeeld de map mijnwebsite. Daarna start je Apache in XAMPP. In de browser open je dan localhost om de testpagina op te vragen.

htdocs

mijnwebsite

Apache

localhost

phpMyAdmin

127.0.0.2

database

poorten

Bespreek eventueel dat het volledige adres http://localhost/mijnwebsite is, en dat index.html vaak automatisch opent.

Hoe zeker voel je je nu over werken met XAMPP?

1

Heel zeker

2

Best zeker

3

Nog wat twijfel

4

Ik wil oefenen

Wat is één ding dat jij uit deze les zeker onthoudt?

Laat studenten één concreet leerpunt benoemen, bijvoorbeeld browser versus webserver, localhost, de rol van Apache of het openen van een testpagina via htdocs.

Welk onderdeel vond jij het lastigst om te begrijpen?

Gebruik antwoorden om te bepalen wat herhaling of extra voordoen nodig heeft, bijvoorbeeld poorten, de XAMPP-onderdelen of de stappen naar localhost/mijnwebsite.

Begrippenlijst

internet - wereldwijd netwerk van computers dat gegevens uitwisselt

website - verzameling webpagina's en bestanden die online of lokaal bekeken kunnen worden

webserver - systeem of software dat webpagina's op verzoek terugstuurt

browser - programma dat webpagina's opvraagt en toont

localhost - naam voor de eigen computer als lokale server

127.0.0.1 - IP-adres dat naar de eigen computer verwijst

XAMPP - pakket waarmee je lokaal een webserveromgeving kunt draaien

Begrippenlijst

Apache - webserver binnen XAMPP

MySQL/MariaDB - databasesysteem voor het opslaan en ophalen van gegevens

PHP - programmeertaal die op de server wordt uitgevoerd

phpMyAdmin - webtool om databases te beheren

htdocs - map waarin websitebestanden voor XAMPP worden geplaatst

poort - genummerde toegang voor netwerkverkeer naar een programma

Text