# 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?

- <span class="s1">**De voorkant**</span> 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?

- <span class="s1">**De achterkant**</span> 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](https://www.roc.ovh/uploads/images/gallery/2022-06/scaled-1680-/image-1655279215130.png)

#### Bestandsoorten

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

<table border="1" id="bkmrk-bestandssorrten-func-0"><tbody><tr><td style="background-color: #c2e0f4;">Bestandssoorten</td><td style="background-color: #c2e0f4;">Functie</td><td style="background-color: #c2e0f4;">Waar</td></tr><tr><td>HTML</td><td>Basis opmaak van een webpagina</td><td>Front-end / browser</td></tr><tr><td>CSS</td><td>Detail opmaak van een webpagina</td><td>Front-end / browser</td></tr><tr><td>JavaScript</td><td>Interactie programmeren in de browser</td><td>Front-end / browser</td></tr><tr><td>PHP</td><td>Interactie programmeren op de server</td><td>Back-end / server</td></tr></tbody></table>

### 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.

<table id="bkmrk-situatie-front-end%2C-" style="width: 108.333333%;"><thead><tr><th style="width: 4.529201%;"></th><th style="width: 58.64124%;">**Situatie**

</th><th style="width: 12.517453%;">**Front-end, back-end, beiden**

</th><th style="width: 24.312106%;">**Toelichitng**

</th></tr></thead><tbody><tr><td style="width: 4.529201%;">1

</td><td style="width: 58.64124%;">Je klikt op een knop om een filmpje te starten.

</td><td style="width: 12.517453%;"></td><td style="width: 24.312106%;"></td></tr><tr><td style="width: 4.529201%;">2

</td><td style="width: 58.64124%;">Je stuurt een contactformulier in en krijgt “Bedankt voor je bericht!”.

</td><td style="width: 12.517453%;"></td><td style="width: 24.312106%;"></td></tr><tr><td style="width: 4.529201%;">3

</td><td style="width: 58.64124%;">Een webwinkel controleert of er nog voorraad is.

</td><td style="width: 12.517453%;"></td><td style="width: 24.312106%;"></td></tr><tr><td style="width: 4.529201%;">4

</td><td style="width: 58.64124%;">Je ziet de kleuren en lettertypes van een website veranderen.

</td><td style="width: 12.517453%;"></td><td style="width: 24.312106%;"></td></tr><tr><td style="width: 4.529201%;">5

</td><td style="width: 58.64124%;">Een systeem herkent of je het juiste wachtwoord hebt ingevuld.

</td><td style="width: 12.517453%;"></td><td style="width: 24.312106%;"></td></tr><tr><td style="width: 4.529201%;">6

</td><td style="width: 58.64124%;">Je krijgt je resultaten na een online quiz.

</td><td style="width: 12.517453%;"></td><td style="width: 24.312106%;"></td></tr></tbody></table>

### Opdracht 2

Beantwoord de volgende vragen in eigen woorden

- Wat wist je nog niet?
- Waarom denk je dat er <span class="s1">**zowel frontend als backend**</span> nodig is?
- Wat lijkt jou leuker om te maken?

### Inleveren

Open het Word document [Opdracht Front-end backend.docx](https://www.roc.ovh/attachments/103) 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](https://www.apachefriends.org)

### 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.

![](https://www.roc.ovh/uploads/images/gallery/2019-10/scaled-1680-/image-1570805605149.png)

### 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](https://www.roc.ovh/uploads/images/gallery/2022-12/scaled-1680-/image-1671310391146.png)](https://www.roc.ovh/uploads/images/gallery/2022-12/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](https://www.roc.ovh/uploads/images/gallery/2023-06/scaled-1680-/image-1687096321945.png)](https://www.roc.ovh/uploads/images/gallery/2023-06/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?

- We installeren Visual Studio Code (VSC)
- We leggen uit waarom we een goede editor nodig hebben
- We openen een PHP-bestand in de `htdocs`-map

### 💡 Waarom Visual Studio Code?

- VSC is een gratis en krachtige code editor
- Hij maakt je code overzichtelijk met kleuren, inspringing en suggesties
- Hij helpt je fouten sneller te vinden en biedt slimme aanvulling
- Het is de standaard editor voor veel professionele programmeurs

**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/](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 &gt; 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

<p class="callout success">**Tip:** Klik met rechts op het bestand en kies "Reveal in File Explorer" als je het ook in Verkenner wil zien.</p>

### 💡 Extra VSC Tips

- Installeer de **PHP Intelephense**-extensie voor slimme PHP-hulp
- Gebruik **Ctrl + S** om op te slaan
- Als je veel bestanden hebt, gebruik dan **Ctrl + P** om snel te zoeken

### Opdracht

Zet dit in het bestand `test.php`

```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.

- Waarom gebruiken we Visual Studio Code en niet Kladblok?
- Wat heb je geleerd over het openen van PHP-bestanden?

### 📤 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?

- 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
<?php
echo "Hallo wereld!";
?>
```

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

#### Voorbeeld 2: HTML + PHP

```php

<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:

```php
<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
<?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

- Wat gebeurt er als je een PHP-bestand opent door erop te dubbelklikken in Verkenner?
- Stel je maakt een folder in htdocs en zet in deze fodler een .php bestand, hoe kan je dat dan via localhost in de browser openen?

### 📤 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?

- We leren wat een variabele is
- We maken een paar variabelen aan in PHP
- We tonen informatie op het scherm met `echo`
- We combineren tekst met variabelen (string **concatenatie**)

### 💡 Wat is een variabele?

- Een variabele is een soort doosje waarin je informatie kunt stoppen
- Je geeft het doosje een naam, zoals `$naam` of `$leeftijd`
- Je kunt de waarde later gebruiken of aanpassen

#### Voorbeeld

```php
<?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.

##### String concatetation

Je ziet dat de . (punt) een verbinding maakt tussen de teksten en de variabelen. Het plakt alle aan elkaar. Dit heet string concatenation.

<p class="callout success">String concatenation in PHP doe je met een . (punt)</p>

### 🛠️ Opdracht – Toon jouw info

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

Vul dit in met jouw eigen gegevens:

```php
<?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>";
?>
```

- Vervang de waarden door je eigen gegevens
- Open het bestand via `http://localhost/opdracht5.php`

### 🛠️ Opdracht – Extra uitdaging

- Voeg een variabele toe voor je favoriete hobby
- Toon dit op een derde regel met:   
    `Mijn hobby is muziek maken.`

### ℹ️ Uitleg

- In PHP begint een variabele altijd met een `$`-teken
- Tekst noemen we een **string** (tussen aanhalingstekens)
- Als je tekst en variabelen combineert, gebruik je `.` (punt) om aan elkaar te plakken

### 🧠 Reflectie

- Wat is het verschil tussen een tekst en een getal in PHP?
- Waarom is het handig om gegevens op te slaan in variabelen?
- Kun je bedenken hoe je variabelen later zou gebruiken in een formulier of website?

### 📤 Inleveren

1. Lever je het bestand `opdracht.php5`i 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?

- We leggen het verschil uit tussen strings en getallen
- We oefenen met optellen en tekst plakken
- We maken een mini-rekenmachine

### 💡 Wat is het verschil?

- **String** = tekst, tussen aanhalingstekens: `"Hallo"`
- **Getal**= nummer, zonder aanhalingstekens: `5`
- Als je twee strings met `.` (punt) combineert, dan “plak” je tekst aan elkaar
- Als je twee getallen met `+` optelt, dan krijg je de som

#### Voorbeeld

```php
<?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:

- Maakt twee variabelen met getallen
- Toont het resultaat van **optellen**, **aftrekken**, **vermenigvuldigen** en **delen**.

#### Voorbeeldcode

```php
<?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:

```php
$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!

### 🎬Voorbeeld

[https://www.youtube.com/watch?v=przRGJtl0HY](https://www.youtube.com/watch?v=przRGJtl0HY)

<iframe allowfullscreen="allowfullscreen" height="314" src="https://www.youtube.com/embed/przRGJtl0HY" width="560"></iframe>

### 🧠 Reflectie

- Wat gebeurt er als je probeert te rekenen met een string zoals `"hallo"`?
- Waarom is het handig dat PHP automatisch strings soms omzet naar getallen?
- Wat zou er gebeuren als je `$prijs` een tekst maakt in plaats van een getal?

### 📤 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

- Je maakt een [formulier ](https://www.roc.ovh/link/902#bkmrk-6-formulieren-in-html)dat gegevens verzendt naar een PHP-bestand
- Je kunt een `if` gebruiken om iets te controleren
- Je reageert in de browser op wat de gebruiker heeft ingevuld

### 🛠️ Formulier maken

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

```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](https://www.roc.ovh/link/902#bkmrk-6-formulieren-in-html) 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
<?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

- Voeg een extra if-statement toe die controleert of iemand jonger is dan 12: ```php
    if ($leeftijd < 12) {
      echo "<br>Je bent nog een kind.";
    }
    ```
- Voeg ook een if-statement toe die een compliment geeft bij een mooie leeftijd (bijvoorbeeld 16 of 21)
- **Bedenk zelf een leuke uitbreieding** of verander het programma. De code moet wel: 
    - minimaal **3 if-statements** bevatten en minimaal **1 if-then-els**e.
    - **Test je code**

### 📘 Tip

- Gebruik `$_GET["veldnaam"]` om iets op te halen uit een formulier
- Gebruik `if`, `else` of `elseif` om verschillende reacties te geven

### 🧠 Reflectie

- Kun je bedenken hoe je dit formulier zou kunnen gebruiken voor een login of een quiz?

### 📤 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

- Je gebruikt een formulier met meerdere invoervelden
- Je rekent in PHP met getallen die uit een formulier komen
- Je maakt zelf een praktische webpagina

### 🛠️ Stap 1 – Pas je formulier aan

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

```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
<?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

- Voorbeeld: je voert in €100 en 20% korting
- PHP rekent uit: `100 * (20 / 100) = 20`
- Nieuwe prijs = `100 - 20 = 80`

### 🛠️ Opdracht 1

- Laat een extra bericht zien met `if`: 
    - Bij een korting van 50% of meer: `"Wat een superdeal!"`
    - Bij minder dan 10%: `"Dat is maar een klein beetje korting."`

### 🛠️ 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

- Wat gebeurt er als je 0% korting invoert?
- En als je 100% korting invoert?
- Zou je dit op een echte webshop kunnen gebruiken?

### 📤 Inleveren

1. Het php bestand korting.php
2. PDF of txt-bestand met de antwoorden op de drie vragen in eigen woorden.

</body></html>