Skip to main content

PHP Intro

1 Front-End en Back-End

🎯 Leerdoelen

  • Je weet wat frontend en backend zijn.

  • Je kunt het verschil uitleggen in je eigen woorden.

  • Je kunt bij een website aanwijzen wat frontend is en wat backend is.

Wat is frontend?

  • De voorkant van een website: alles wat de gebruiker ziet.

  • Wordt gemaakt met HTML, CSS, JavaScript.

  • Denk aan knoppen, kleuren, tekst, afbeeldingen.

👉 Vergelijking: de menukaart en bediening van een restaurant.

Wat is backend?

  • De achterkant van een website: alles wat op de server gebeurt.

  • Zorgt voor berekeningen, het opslaan van gegevens, inloggen, bestellingen verwerken.

  • Wordt vaak gemaakt met talen zoals PHP, Python, Node.js.

👉 Vergelijking: de keuken van een restaurant.

Client en server

De computer is geen restaurant, maar je kunt het er wel mee vergelijken: de webbrowser waar de bestellingen worden opgenomen en de webserver (ergens in de cloud) is de keuken.

image-1655279215130.png

Bestandsoorten

We kennen al HTML en CSS, later gaan we ons verdiepen in Javascript en PHP.

Bestandssoorten Functie Waar
HTML Basis opmaak van een webpagina Front-end / browser
CSS Detail opmaak van een webpagina Front-end / browser
JavaScript Interactie programmeren in de browser Front-end / browser
PHP Interactie programmeren op de server Back-end / server

Opdracht 1

Geef van elk van de onderstaande situatie wat het is:

front-end, back-end of beiden?

Licht elk antwoord in eigen woorden toe.

Situatie

Front-end, back-end, beiden

Toelichitng

1

Je klikt op een knop om een filmpje te starten.



2

Je stuurt een contactformulier in en krijgt “Bedankt voor je bericht!”.



3

Een webwinkel controleert of er nog voorraad is.



4

Je ziet de kleuren en lettertypes van een website veranderen.



5

Een systeem herkent of je het juiste wachtwoord hebt ingevuld.



6

Je krijgt je resultaten na een online quiz.



Opdracht 2

Beantwoord de volgende vragen in eigen woorden

  • Wat wist je nog niet?

  • Waarom denk je dat er zowel frontend als backend nodig is?

  • Wat lijkt jou leuker om te maken?

Inleveren

Open het Word document Opdracht Front-end backend.docx en beantwoord de vragen uit opdracht 1 en opdracht 2. Bewaar het bestand als PDF en lever dat in.

  • PDF document

2 Installeren XAMPP

Wij hebben (nog) geen webserver in de cloud. In plaats daarvan gaan we een soort 'nep-server' gebruiken en hiervoor gaan we XAMPP installeren.

Download de software

Google of download de juiste versie van apachefriends

Voer de installatie uit

Je hebt alleen Apache en MySQL nodig, de andere opties kan je beter niet installern.

Als er wordt gevraagd om php.exe aan het path toe te voegen dan kies je ja/yes. Alle andere opties kun je laten staan zoals ze default staan.

Opstarten XAMPP

Als het goed is, is er tijdens de installatie een short-cut gemaakt die heet XAMPP Control.

Deze shortcut voert C:\xampp\xampp-control.exe uit.

Druk op de eerste twee knopjes start naast Apache en MySQL. Hiermee start je de webserver en de database op. Als alles goed is dan zie je het volgende.

XAMPP Instellingen

We gaan een paar dingen anders instellen.

Allereerst gaan we de database als Windows-service laten draaien dat verhoogt de stabiliteit.

1 Stop XAMPP

Stop XAMPP en als dat niet lukt, restart je machine of gebruik de Windows task manager om XAMPP te stoppen.

2 Properties xampp-controll.exe

Ga via de file explorer naar c:\xampp\ en zoek naar xampp-controll.exe, selecteer met rechtermuis propertjes (of eigenschappen).

3 Compatibily 'Run this program as an administror'

Selecteer onder het tabje Compatibily 'Run this program as an administror'

4 OK en klaar.

.image-1671310391146.png

5 Start XAMPP

Sluit XAMPP en start XAMPP opnieuw op.

6 Groen vinkje

Druk op het rode kruisje links naast MySQL. Het kruisje wordt een groen vinkje.

image-1687096321945.png

7 index.php weg

Tenslotte, ga naar c:\xampp\htdocs\ en gooi het bestand index.html weg.

Waarom dat is dat zien we later als we met XAMPP gaan werken.

Opdracht

Voer ale 7 stappen uit.

Inleveren

  1. Screenshot van XAMPP Control panel met (minimaal) één groen vinkje en Apache en MySQL gestart.
    Er zijn geen rood gekleurde foutmeldingen te zien.

**************************

 

4 Jouw eerste PHP-pagina

In deze les ga je jouw allereerste PHP-pagina maken. Je leert hoe je PHP-code schrijft en uitvoert, en hoe je PHP en HTML samen kunt gebruiken.

🔰 Wat gaan we doen?

  • Je maakt een PHP-bestand aan in de map htdocs
  • Je schrijft je eerste echo-opdracht in PHP
  • Je bekijkt het resultaat via http://localhost

ℹ️ Uitleg

  • PHP is een programmeertaal voor de backend
  • PHP draait op de server en geeft HTML terug aan de browser
  • Een PHP-bestand eindigt op .php
  • Met echo toon je iets op het scherm

Voorbeeld 1: eenvoudige tekst

<?php
echo "Hallo wereld!";
?>

Toont de tekst "Hallo wereld!" in je browser.

Voorbeeld 2: HTML + PHP

<!DOCTYPE html>
<html>
<body>
  <h1>Welkom</h1>
  <p><?php echo "Dit is gegenereerd door PHP!"; ?></p>
</body>
</html>

Hierin zie je dat je PHP kunt combineren met gewone HTML.

🛠️ Opdracht 3A

Maak een bestand intro.php in de map htdocs en zet daarin:

<html>
<body>
  <h2>Over mij</h2>
  <p>
    <?php
      echo "Hallo! Ik ben [jouw naam] en dit is mijn eerste PHP-pagina.";
    ?>
  </p>
</body>
</html>
  • Vervang [jouw naam] door je eigen naam
  • Open in de browser via: http://localhost/intro.php

🛠️ Opdracht 3B – Extra

Laat meer zinnen zien met meerdere echo-regels en gebruik <br> om af te breken:

<?php
echo "Ik hou van programmeren.<br>";
echo "Mijn favoriete kleur is blauw.<br>";
echo "PHP is best leuk!";
?>

📌 Tip: combineer dit in een klein "dagboekje over jezelf".

📤 Inleveren

  • Maak een screenshot van de pagina in je browser met jouw naam zichtbaar
  • Laat ook de PHP-code zien

🧠 Afsluiting

  • Wat gebeurt er als je een PHP-bestand opent door erop te dubbelklikken in Verkenner?
  • Wat vond je makkelijk/moeilijk aan deze oefening?

📁 Benodigdheden

  • XAMPP of een andere PHP-server
  • Werkende htdocs-map
  • Teksteditor of IDE zoals Visual Studio Code
Back to top