CMS

1 Wat is een CMS?

🎯 Leerdoelen

Je weet wat een CMS is.
Je kunt uitleggen wat je met een CMS zoals WordPress kunt doen.
Je begrijpt waarom veel websites met een CMS gebouwd worden.

💡 Uitleg

CMS staat voor Content Management System. Een CMS is een programma waarmee je op een eenvoudige manier een website kunt maken en beheren.

Je kunt met een CMS pagina’s aanmaken, plaatjes toevoegen, navigatiemenu’s maken en zelfs extra functies installeren – allemaal zonder te programmeren.

Een CMS bestaat meestal uit een basispakket (de 'kern') en uitbreidingen. Je kunt bijvoorbeeld thema’s toevoegen om het uiterlijk aan te passen, of plugins om functionaliteit toe te voegen zoals een webshop, contactformulier of nieuwsbrief.

Populaire voorbeelden van CMS-systemen zijn WordPress, Drupal en Joomla.

In deze module leer je werken met het meest gebruikte CMS ter wereld: WordPress.

WordPress is open-source software. Dat betekent dat je het gratis mag gebruiken en aanpassen. Je kunt WordPress zien als een grote doos met Lego-blokken:

De basisblokken vormen je website: pagina’s, menu’s, afbeeldingen, enzovoort.
Met uitbreidingen (plugins en thema’s) geef je de site een nieuw uiterlijk of voeg je functies toe zoals een online winkel.

WordPress maakt het dus mogelijk om heel snel een professionele website te bouwen – zonder dat je technische kennis nodig hebt.

🛠️ Opdracht – WordPress verkennen

Ga naar https://nl.wordpress.com en maak een gratis account aan.
Maak een nieuwe website aan. Kies een thema dat jij mooi vindt.
Voeg minstens 3 pagina’s toe (bijv. Home, Over mij, Contact).
Maak een menu met links naar je pagina’s.
Voeg minimaal één afbeelding toe op je homepage.

🧠 Reflectie

Wat vond je makkelijk of juist moeilijk aan het werken met WordPress?
Waarom denk je dat zoveel websites met een CMS zoals WordPress zijn gebouwd?
Wat zou je willen leren of verbeteren aan jouw eigen site?

📤 Inleveren

Maak een screenshot van jouw homepage in WordPress.
Lever ook een korte reflectie in als .txt of .pdf met antwoorden op de 3 vragen hierboven.

2 WordPress installeren op je eigen laptop

🎯 Leerdoelen

Je kunt zelfstandig WordPress installeren op je eigen laptop.
Je kunt een database aanmaken met phpMyAdmin.
Je begrijpt welke gegevens je nodig hebt tijdens de installatie.

💡 Uitleg

In dit onderdeel ga je een lokale WordPress-website maken met behulp van XAMPP. Dit betekent dat je website alleen werkt op jouw eigen laptop. Voor het maken van een WordPress-site zijn een paar stappen nodig. In eerdere modules heb je al met XAMPP gewerkt, dus we gaan ervan uit dat deze al geïnstalleerd is op je computer.

Stap 1 – Database aanmaken

Open phpMyAdmin via localhost/phpmyadmin. Maak een nieuwe database aan. Bedenk zelf een geschikte naam (bijv. wp-jan).

Stap 2 – WordPress downloaden

Download de laatste versie van WordPress van de officiële site:

https://wordpress.org/download/

Let op: Download het NIET van wordpress.com!

Sla het ZIP-bestand op in je htdocs-map van XAMPP (meestal: C:\xampp\htdocs).

🛠️ Opdracht 1 – WordPress map instellen

Pak het ZIP-bestand uit dat je hebt gedownload.
Er ontstaat een map met de naam wordpress.
Hernoem deze map naar wp-<jouwnaam> (vervang <jouwnaam> door jouw eigen naam, zonder spaties!).

Voorbeeld: wp-ayoub of wp-nina

We gaan nu verder met het installatieproces. Surf in je browser naar: http://localhost/wp-jouwnaam

Tijdens de installatie moet je deze gegevens invullen:

Naam van de database: de naam die je net hebt aangemaakt
Gebruikersnaam database: root
Wachtwoord database: laat dit veld leeg
Host database: localhost
Tabelvoorvoegsel: laat dit staan zoals het is (wp_)
Titel van de site: bijv. “De website van Ayoub”
Gebruikersnaam en wachtwoord om in te loggen op je WordPress-site
Je e-mailadres: nodig om je wachtwoord later te herstellen

🧠 Reflectie

Wat was het makkelijkste onderdeel van deze installatie?
Wat vond je lastig of verwarrend?
Wat is volgens jou het voordeel van lokaal werken ten opzichte van een online installatie?

📤 Inleveren

Maak een lijstje met de gegevens die jij hebt gebruikt tijdens de installatie (zie hierboven).
Sla dit op als installatiegegevens-jouwnaam.pdf (bijv. installatiegegevens-ayoub.pdf) en lever die in.
Reflectie met daarin de antwoorden op de drie vragen (txt of PDF).

3 WordPress installatie uitvoeren

🎯 Leerdoelen

Je kunt het installatieproces van WordPress starten via je browser.
Je weet hoe je Apache en MySQL moet starten in XAMPP.
Je kunt inloggen op je eigen WordPress-site via de juiste URL.

💡 Uitleg

Je bent nu klaar om WordPress te installeren. Dit doe je in je browser, maar eerst moet je controleren of de juiste onderdelen van XAMPP actief zijn:

Zorg dat Apache en MySQL zijn gestart in de XAMPP-console. Ze moeten groen zijn.

Open nu je browser en ga naar:

http://localhost/wp-<jouwnaam>

Voorbeeld: http://localhost/wp-ayoub

Je ziet nu het installatieproces van WordPress in je browser. Lees alles zorgvuldig en vul de gevraagde gegevens correct in. Gebruik hierbij de informatie die je eerder hebt genoteerd (zie opdracht 1).

Na de installatie:

Je krijgt een bevestiging te zien dat WordPress is geïnstalleerd.
Je kunt direct inloggen met de gebruikersnaam en het wachtwoord die je tijdens de installatie hebt opgegeven.
Als je deze link niet meer ziet, kun je inloggen via:

http://localhost/wp-<jouwnaam>/wp-admin

🛠️ Opdracht – Installatie controleren

Log in op WordPress via http://localhost/wp-jouwnaam/wp-admin.
Maak een screenshot van je browser, waarop de WordPress-beheerderspagina zichtbaar is, met jouw naam in de adresbalk.
Open ook phpMyAdmin en klik op de database die je net hebt aangemaakt.
Maak een screenshot van de tabellenstructuur van jouw WordPress-database.

📤 Inleveren

inloggen-gelukt-jouwnaam.jpg: Screenshot van jouw WordPress-dashboard met jouw naam zichtbaar in de adresbalk.
phpmyadmin-jouwnaam.jpg: Screenshot van jouw WordPress-database in phpMyAdmin met tabellen zichtbaar.

4 Frontend en Backend in WordPress

🎯 Leerdoelen

Je begrijpt het verschil tussen de frontend en backend van een WordPress-site.
Je weet hoe je kunt inloggen op de backend (beheeromgeving).
Je kunt schakelen tussen frontend en backend via de admin-balk.

💡 Uitleg

In WordPress werk je in twee verschillende omgevingen:

1. De backend

De backend is het beheergedeelte van je site. Hier kun je onder andere:

Nieuwe pagina’s aanmaken
Functies toevoegen via plugins
Gebruikers beheren
Thema’s (templates) installeren voor het uiterlijk van je site

Je hebt een account nodig om toegang te krijgen tot de backend. Dat account heb je aangemaakt tijdens de installatie.

De standaard URL om in te loggen op de backend is:

http://sitenaam.nl/wp-admin

Als je lokaal werkt is dit bijvoorbeeld:
http://localhost/wp-jouwnaam/wp-admin

2. De frontend

De frontend is de website zoals bezoekers deze zien. Iedereen kan deze omgeving bekijken – je hebt geen wachtwoord nodig, tenzij je dat instelt.

Switchen tussen frontend en backend

Als je bent ingelogd, zie je bovenaan een zwarte balk. Deze admin-balk is zichtbaar op alle pagina’s, zowel in de backend als de frontend.

Met deze balk kun je makkelijk wisselen tussen beide omgevingen.

🔁 Manier 1 – Naar de homepage of het dashboard

Klik linksboven in de zwarte balk op het icoon naast het WordPress-logo.
Om naar de homepage te gaan: klik op het huis-icoontje.
Om naar het dashboard te gaan: klik op het dashboard-icoontje.

🧪 Probeer dit zelf een paar keer:
Wissel tussen de backend en frontend van jouw site met behulp van de zwarte balk.

🧭 Manier 2 – Direct naar het onderdeel dat je wilt bewerken

Als je bijvoorbeeld een pagina bekijkt en je wilt de inhoud wijzigen, kun je via de zwarte balk direct naar de bewerkingspagina in de backend gaan.

Deze functie maakt het snel en makkelijk om onderdelen van je site aan te passen terwijl je ze bekijkt.

Hoe dit precies werkt, kom je later in deze module nog uitgebreid tegen!

🧠 Reflectie

Wat is het verschil tussen frontend en backend?
Waarvoor gebruik je de zwarte admin-balk?
Waarom is het handig om direct vanuit de frontend naar het bewerkvenster te gaan?

📤 Inleveren

Antwoord op de reflectievragen (pdf of txt).

Welke onderdelen van Wordpress gaan we in deze module gebruiken?

5 Pagina’s maken en aanpassen in WordPress

🎯 Leerdoelen

Je weet hoe pagina’s werken in WordPress.
Je kunt pagina’s bekijken en bewerken vanuit de frontend én de backend.
Je begrijpt het verschil tussen pagina’s in WordPress en losse HTML-bestanden.

💡 Uitleg

Als software developer heb je waarschijnlijk al vaak webpagina’s gemaakt met HTML en CSS. In WordPress kan dat ook, maar het hoeft niet!

In plaats van losse HTML-pagina’s en CSS-bestanden gebruikt WordPress een andere manier. Je maakt en bewerkt pagina’s gewoon via de backend, met een visuele editor. Je hoeft dus geen code te schrijven – al mag dat natuurlijk wel als je wilt!

Belangrijk om te onthouden:

Je hoeft niet technisch te zijn om een mooie website te maken in WordPress.
Maar als je wél technische kennis hebt, kun je die gebruiken voor extra aanpassingen.

Frontend ↔ Backend gebruiken

Via de zwarte admin-balk kun je gemakkelijk wisselen tussen de frontend en backend van je site. Zoals je eerder hebt geleerd, kun je dan heen en weer gaan tussen de homepage (frontend) en het dashboard (backend).

Maar soms wil je direct naar een specifieke pagina in de backend, bijvoorbeeld als je een stuk tekst wilt aanpassen op een bepaalde pagina.

Direct bewerken via de frontend

Als je bent ingelogd en je bekijkt een pagina via de frontend, dan zie je bovenaan een zwarte balk. Deze bevat een knop waarmee je direct naar het bewerkvenster van die pagina in de backend kunt gaan.

Dit is handig, want zo hoef je de pagina niet eerst handmatig op te zoeken in het dashboard.

Voorbeeldpagina bij installatie

Bij de installatie van WordPress wordt er automatisch een voorbeeldpagina aangemaakt. Die kun je bekijken via de volgende URL:

http://localhost/wp-<jouw-naam>/voorbeeld-pagina

Bijvoorbeeld: http://localhost/wp-ayoub/voorbeeld-pagina

🛠️ Opdracht – Voorbeeldpagina bekijken en bewerken

Ga naar http://localhost/wp-jouwnaam/voorbeeld-pagina.
Bekijk de pagina zoals een bezoeker deze zou zien.
Klik op de zwarte balk bovenin op Bewerken om de backend-versie van de pagina te openen.
Pas de titel van de pagina aan naar bijvoorbeeld: “Welkom op mijn WordPress-site”.
Pas ook de tekst op de pagina aan (bijvoorbeeld je eigen naam toevoegen).
Klik op Bijwerken om je aanpassingen op te slaan.
Bekijk de pagina opnieuw aan de frontend: zijn de wijzigingen zichtbaar?

🧠 Reflectie

Wat is het voordeel van werken met WordPress-pagina’s ten opzichte van losse HTML-bestanden?
Wat vond je makkelijker: bewerken via de frontend of backend? Waarom?
Welke rol speelt de zwarte admin-balk bij het onderhouden van pagina’s?

📤 Inleveren

Maak een screenshot van jouw aangepaste voorbeeldpagina in de frontend (met jouw aanpassing zichtbaar).
Sla het bestand op als voorbeeldpagina-jouwnaam.jpg.