PHP Challenge

PHP Challenge - Mini-website bouwen

(geschatte tijdsduur 1 uur voor de planning en reflectie en 2-6 uur voor het uitvoeren. Totaal 3 - 7 uur)

datasource

🎯 Doelen

Je laat zien wat je geleerd hebt over PHP-backend programmeren.
Je maakt een mini-website met meerdere pagina’s, functies, formulieren en sessies.
Je werkt zelfstandig aan een afgerond eindproject.

📜 Opdracht

Je gaat iets maken in HTML/CSS en PHP.

Omdat we nu met back-end (PHP) gaan oefenen, gebruik je geen Javascript.

Kies één van onderstaande opties of bedenk in overleg je eigen variant:

🌟 Optie 1 – Persoonlijke website

Inlogpagina met naam via sessie
Een pagina “Over mij” met gegevens in variabelen
Hobby’s in een array en met een foreach getoond
Alleen als je goed bent ingelogd, kan je ~~ene~~een bericht versturen.
Een formulier waarin iemand je een bericht kan sturen
Je mag het versturen zelf laten zitten: laat het bericht dat iemand wilt sturen gewoon zien op een pagina dan is het goed.
Bij het bericht staat een datum (Nederlands formaat), zie voorbeeld.

🎮 Optie 2 – Quiz met score

Als je begint dan vraag je de gebruiker om een naam, deze naam sla je op in een sessie variabele.
Meerdere vragen opgeslagen in een array
Gebruik een foreach om vargen te stellen: de HTML code voor het laten zien van eenvraag komt dus maar 1x voor.
Als alle vragen zijn beantwoord dan wordt er een score of uitslag berekend. Hiervoor gebruik je een function.

🛒 Optie 3 – Simpele webshop

Formulier waarin je jouw naam invoert, een product kiest, en een actiecode kan invoeren.
De producten die ja laat zien staan in een PHP array en worden met een (PHP) loop afgedrukt.
De naam plaats je in een sessie variabele.
Als de actiecode juist is dan krijgt de gebruiker een korting van 10%.
Gebruik een function om de actiecode te controleren en de korting te berekenen
Maak een professioneel bevestingsscherm waarin de bestelling te zien is, de korting wordt berekend en het totaal bedrag wordt getoond. Laat ook de datum van vandaag zien (Nederlands formaat). Tevens laat je de naam zien die is ongevoerd (en is opgelsagen in een sessie variabele).

✅ Technische eisen

Jouw project moet aan de volgende eisen voldoen:

Minstens 3 aparte pagina’s (.php)
Gebruik van include() of require() voor menu of footer
Minstens 1 formulier die met POST of GET gegevens verwerkt
Gebruik van een array en loop (for of foreach)
Gebruik van minstens 1 zelfgemaakte functie
Gebruik van sessies ($_SESSION)

Gebruik AI om je te helpen, maar begrijp wat er gebeurt!

📑Plannig

Je maakt eerst een soort planing met daarin het volgende.

Per pagina die je moet maken beschrijf je:

Hoe moet de pagina eruit zien (geen tekening, maar beschrijven)?
Wat wordt er precies getoond op de pagina (geen tekening maar beschriving).
Wat zijn de technische eisen voor deze pagina.
Welke zaken moet je uitzoeken omdat je niet (meer) precies weet heo het werkt.
Hoe lang schat je bezig te zijn met deze pagina?

🧠 Reflectie

ls je klaar bent dan kijk je nog een keer naar de planning. Bij elke pagina beschrijf je nu (je voegt dus regels toe):

Was je wat vergeten, zo ja wat dan?
Viel het mee of tegen. leg uit!
Hoe lang ben je uiteindleijk bezig geweest met deze pagina.

📤 Inleveren

De planning in PDF
Laat een docent zien dat alles op jouw computer werkt en dat je aan alle eisen voldoet.

Extra: Design & Veilig werken

(Optionele verdieping om je project naar een hoger niveau te tillen)

🎨 Pimp je design

Je PHP-code werkt nu, maar de kans is groot dat je pagina er nog wat "kaal" uitziet (witte achtergrond, zwarte tekst). Om je website er professioneel uit te laten zien, gebruiken developers vaak CSS Frameworks.

Wat zijn CSS Frameworks?

Je kunt alle CSS zelf schrijven, maar dat kost veel tijd. Een framework is als een doos met LEGO-steentjes die al klaar liggen. Je hoeft alleen de juiste "class" aan je HTML-element te geven en het ziet er direct goed uit.

Bootstrap: De klassieker. Heel handig voor beginners. Je kopieert een stukje code in je <head> en je hebt direct toegang tot kant-en-klare knoppen, navigatiebalken en formulieren.
Kenmerk: Je gebruikt componenten (bijv. een 'card' of 'navbar').

Tailwind CSS: Modern en populair. Hierbij heb je heel veel kleine classes (zoals text-center, bg-blue-500, p-4) waarmee je zelf je ontwerp "bouwt" in de HTML.
Kenmerk: Je hebt volledige vrijheid, maar je HTML krijgt wel veel classes.

🤖 Hulp vragen aan AI voor design

Je hoeft geen designer te zijn. Je kunt AI vragen om de CSS of de classes voor je te schrijven. Hier zijn goede prompts die je kunt gebruiken:

Voorbeeld Prompts:

"Ik gebruik Bootstrap 5 via een CDN. Kun je een mooie responsive navigatiebalk maken met links naar Home, Over Mij en Contact?"

"Ik heb een HTML tabel met scores. Kun je deze stylen met Tailwind CSS zodat de rijen om-en-om grijs zijn en de header donkerblauw?"

"Maak een simpel CSS bestand voor mijn formulier. Zorg dat de inputs ronde hoeken hebben en de verzendknop groen wordt als je er met de muis overheen gaat."

Wat is een CDN?

🚀 De basis

CDN staat voor Content Delivery Network. Het klinkt heel ingewikkeld, maar eigenlijk is het een slimme truc om websites sneller te laten laden voor gebruikers, waar ze ook zijn.

Je kunt een CSS framework op twee manieren toevoegen aan jouw website.

Manier 1, downloaden

Je downloadt de bestanden (bootstrap.css) en zet ze in je eigen mapje op je computer. Je linkt ernaar in je HTML:

<link rel="stylesheet" href="css/bootstrap.min.css">

Manier 2, via CDN

Je downloadt niets. Je zet gewoon een linkje in je code naar een server van het CDN. De browser van de gebruiker haalt het bestand daar vandaan.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

Waarom is Optie B (CDN) vaak handiger (of niet)?

Snelheid: Het CDN is vaak sneller dan jouw eigen server.

Cache: Veel mensen hebben Bootstrap al eens geladen op een andere website. De browser heeft het bestand dan al opgeslagen ("in de cache"). Jouw site laadt dan direct!

Gemak: Je hoeft geen bestanden te downloaden en in mapjes te slepen. Kopiëren, plakken, klaar.

Nadeel: Als de server(s) waar de CDN staat niet werken of niet bereikbaar zijn dan werkt jouw website niet meer.

🛡️ Veilig werken met Git & VS Code

Tijdens het programmeren (zeker als je AI code laat genereren!) gaat er wel eens iets stuk. Je wilt dan eigenlijk een "Ctrl+Z" doen, maar dan voor je hele project. Daarvoor gebruiken we VCS.

Wat is VCS en Git?

VCS staat voor Version Control System. Het is een systeem dat wijzigingen in bestanden bijhoudt. De bekendste versie daarvan heet Git.

Zie Git als een tijdmachine of het maken van een "Savegame" in een spel. Voordat je een moeilijke missie gaat doen (grote code wijziging), sla je het spel op. Als je 'game over' gaat, laad je gewoon je oude savegame weer in.

Wat is VSC?

VSC is gewoon de afkorting voor Visual Studio Code, de editor waarin je typt. Het mooie is: Git zit ingebouwd in VSC!

Wat is een Commit?

In Git-termen noem je het opslaan van je werk een Commit.
Een commit is een momentopname van al je bestanden op dat moment. Je geeft elke commit een bericht mee, bijvoorbeeld: "Inlogformulier werkt nu" of "Navigatiebalk toegevoegd".

🚀 Waarom is dit handig met AI?

Stel, je vraagt ChatGPT: "Herschrijf mijn hele PHP-code zodat het veiliger is." Je plakt de nieuwe code en... BOEM. Niets werkt meer. Error meldingen overal.

Zonder Git: Paniek! Je moet met Ctrl+Z proberen terug te gaan of hopen dat je nog een backup had.

Met Git: Geen probleem. Je klikt op "Ongedaan maken" (Discard changes) in VS Code en je bent direct terug bij je laatste Commit (je laatste savepoint).

Pro Tip: Maak altijd een commit voordat je een groot stuk code van AI kopieert en plakt!