PHP Intro

1 Front-End en Back-End

🎯 Leerdoelen

Wat is frontend?

πŸ‘‰ Vergelijking: de menukaart en bediening van een restaurant.

Wat is backend?

πŸ‘‰ 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

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.

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.

3 Installatie Visual Studio Code

In deze les leer je hoe je Visual Studio Code installeert, waarom we een code editor gebruiken, en hoe je PHP-bestanden opent vanuit de htdocs-map.

πŸ”° Wat gaan we doen?

πŸ’‘ Waarom Visual Studio Code?

Zonder goede editor werk je in Kladblok of iets simpels – dat is lastig lezen, foutgevoelig en traag werken.

πŸ“š Installatie

1. Ga naar de officiΓ«le website: https://code.visualstudio.com/

2. Klik op Download for Windows

3. Start het installatieprogramma en kies de standaardinstellingen (volgende, volgende...)

4. Vink aan: "Add to PATH" en "Open with Code" in contextmenu als dat wordt gevraagd

πŸ“š Eerste keer openen

Open Visual Studio Code. Je ziet een startscherm. Je hoeft je nergens aan te melden.

πŸ› οΈ Openen van een PHP-bestand

  1. Ga in VSC naar File > Open Folder
  2. Navigeer naar de map htdocs op jouw computer (bijv. C:\xampp\htdocs)
  3. Klik op Select Folder
  4. In de linkerbalkmaak je nu een nieuw bestand en die noem jeΒ test.php
  5. Klik op een bestand om het te openen en te bewerken

Tip: Klik met rechts op het bestand en kies "Reveal in File Explorer" als je het ook in Verkenner wil zien.

πŸ’‘ Extra VSC Tips

Opdracht

Zet dit in het bestand test.php

<?php

echo "TEST";

Sla op en ga nu mert de browser naar https://localhost/test.php

Wat zie je?

🧠 Reflectie

Niet inleveren mar probeer dit voor je zefl te beantwoorden als voorbereiding op de Kennis-Check.

πŸ“€ Inleveren

Maak een screenshot van:

  1. Visual Studio Code met een geopend bestand uit htdocs

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?

ℹ️ Uitleg

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>

πŸ› οΈ 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".

🧠 Afsluiting

πŸ“€ Inleveren

  1. Screenshot van de pagina in je browser met jouw naam zichtbaar

5 Variabelen en Strings in PHP

In deze les leer je hoe je gegevens kunt opslaan in variabelen, hoe je met tekst (strings) werkt, en hoe je deze informatie kunt tonen op je website met PHP.

πŸ”° Wat gaan we doen?

πŸ’‘ Wat is een variabele?

Voorbeeld

<?php
$naam = "Fatima";
$leeftijd = 16;
echo "Hallo, mijn naam is " . $naam . " en ik ben " . $leeftijd . " jaar oud.";
?>

Resultaat: Hallo, mijn naam is Fatima en ik ben 16 jaar oud.

πŸ› οΈ Opdracht – Toon jouw info

Maak een bestand opdracht5.php in je htdocs-map.

Vul dit in met jouw eigen gegevens:

<?php
$naam = "Jouw naam hier";
$leeftijd = 15;
$school = "ROC Amstelland";

echo "<h1>Over mij</h1>";
echo "<p>Ik ben " . $naam . " en ik ben " . $leeftijd . " jaar oud.</p>";
echo "<p>Ik zit op " . $school . ".</p>";
?>

πŸ› οΈ Opdracht – Extra uitdaging

ℹ️ Uitleg

🧠 Reflectie

πŸ“€ Inleveren

  1. Lever je het bestand opdracht.php5i n.
    Je tekst moet minimaal 3 variabelen gebruiken

6 Strings en Getallen in PHP

In deze les leer je het verschil tussen tekst (strings) en getallen (integers) in PHP. Je leert ook wat er gebeurt als je probeert te rekenen met tekst of tekst toevoegt aan een getal.

πŸ”° Wat gaan we doen?

πŸ’‘ Wat is het verschil?

Voorbeeld

<?php
$tekst1 = "Hallo";
$tekst2 = "wereld";
$getal1 = 10;
$getal2 = 5;

echo $tekst1 . " " . $tekst2; // Hallo wereld
echo "<br>";
echo $getal1 + $getal2;       // 15
?>

πŸ› οΈ Opdracht – Reken met getallen

Maak een nieuw bestand aan in je htdocs-map: rekenen.php

Schrijf een script dat dit doet:

Voorbeeldcode

<?php
$prijs = 7.50;
$aantal = 3;
$totaal = $prijs * $aantal;

echo "<p>Prijs per stuk: €" . $prijs . "</p>";
echo "<p>Aantal: " . $aantal . "</p>";
echo "<p>Totaalprijs: €" . $totaal . "</p>";
?>

πŸ’‘ Let op met aanhalingstekens!

Als je een getal tussen aanhalingstekens zet, wordt het een string en kun je er niet goed mee rekenen:

$getal1 = "10"; // string
$getal2 = 5;    // integer
echo $getal1 + $getal2; // dit werkt, maar PHP zet de string stilletjes om naar een getal

Tip: Probeer getallen zonder aanhalingstekens te houden als je ermee rekent!

🧠 Reflectie

πŸ“€ Inleveren

  1. Lever een screenshot in van jouw rekenen.php in de browser
    Je code moet verschillende berekningen laten zien.

7 Leeftijd check met formulier

In deze les leer je hoe je een formulier maakt dat gegevens doorstuurt naar een PHP-script, en hoe je met if-statements reageert op die gegevens.

🎯 Leerdoelen

πŸ› οΈ Formulier maken

Maak een bestand formulier.html aan in je htdocs-map. Zet hierin de volgende code:

<!DOCTYPE html>
<html>
<body>

  <h2>Hoe oud ben jij?</h2>

  <form action="leeftijd.php" method="get">
    <label for="leeftijd">Voer je leeftijd in:</label><br>
    <input type="number" name="leeftijd" id="leeftijd"><br><br>
    <input type="submit" value="Verstuur">
  </form>

</body>
</html>

Uitleg

Dit is een eenvoudig HTML-formulier dat de leeftijd vraag en die deze waarde dan opstuurd naar het bestand leeftijd.php.

πŸ› οΈ leeftijd.php

Maak nu een bestand leeftijd.php en voeg dit toe:

<?php
$leeftijd = $_POST["leeftijd"];

echo "<h2>Jouw leeftijd is: " . $leeftijd . "</h2>";

if ($leeftijd >= 18) {
  echo "Je bent volwassen.";
} else {
  echo "Je bent nog geen 18.";
}
?>

Uitleg

Op regel 2 wordt de $leeftijd uit de formulier variable gehaald.

Regel 6 t/m 10 laten zien hoe je een conditiemet een if-then-else in PHP maakt.

πŸ› οΈ Opdracht – Zelf uitbreiden

πŸ“˜ Tip

🧠 Reflectie

πŸ“€ Inleveren

  1. Lever een screenshot in van leeftijd.php met een ingevuld formulier en meerdere testleeftijden
    Je code moet minstens 3 if-statements bevatten waarvan minimaal 1 if-then-else.

8 Kortingscalculator met formulier

In deze les maak je een eigen kortingscalculator. Je vult een bedrag en een kortingspercentage in, en de PHP-code berekent de prijs na korting.

🎯 Leerdoelen

πŸ› οΈ Stap 1 – Pas je formulier aan

Pas het formulier uit formulier.html aan zodat het er zo uitziet:

<!DOCTYPE html>
<html>
<body>

  <h2>Kortingscalculator</h2>

  <form action="korting.php" method="get">
    <label for="bedrag">Voer het bedrag in:</label><br>
    <input type="number" name="bedrag" step="0.01" required><br><br>

    <label for="korting">Korting (%):</label><br>
    <input type="number" name="korting" step="1" required><br><br>

    <input type="submit" value="Bereken korting">
  </form>

</body>
</html>

πŸ› οΈ Stap 2 – Maak korting.php

Maak een nieuw bestand aan in je htdocs-map met de naam korting.php en plak daarin de volgende code:

<?php
$bedrag = $_POST["bedrag"];
$korting = $_POST["korting"];

$kortingBedrag = $bedrag * ($korting / 100);
$nieuwBedrag = $bedrag - $kortingBedrag;

echo "<h2>Resultaat</h2>";
echo "<p>Oorspronkelijk bedrag: €" . $bedrag . "</p>";
echo "<p>Korting: " . $korting . "%</p>";
echo "<p>Korting in euro: €" . round($kortingBedrag, 2) . "</p>";
echo "<p>Bedrag na korting: €" . round($nieuwBedrag, 2) . "</p>";
?>

πŸ“˜ Uitleg berekening

πŸ› οΈ Opdracht 1

πŸ› οΈ Opdracht 2

Maak een .txt. of PDF en geef antwoord op de volgende vragen.

Vraag 1

In het formulier staat: <input type="number" name="bedrag" step="0.01" required><br><br>
Wat doet step="0.01"; wat gebeurt er als je step ="1" gebruikt?

Vraag 2

In het formulier staat: <input type="number" name="bedrag" step="0.01" required><br><br>
Wat doet required; wat gebeurt er als je dit weglaat?

Vraag 3

In het formulier staat: <input type="number" name="bedrag" step="0.01" required><br><br>
Verander name="bedrag" naar name="prijs". Test of de berekening nog werkt.

Leg uit wat je moet aanpassen in de code korting.php om de berekning weer te laten werken na deze aanpassingen.

🧠 Reflectie

πŸ“€ Inleveren

  1. Het php bestand korting.php
  2. PDF of txt-bestand met de antwoorden op de drie vragen in eigen woorden.
Revision #12
Created 28 May 2025 22:36:26 by Max
Updated 12 June 2025 16:57:34 by Max