Bestelsysteem 2for1

Geïntegreerde Proef – door Wanne

📘 Voorwoord

Voor u ligt de onepager van ons GIP-project, waarin we een digitale oplossing ontwikkelden voor het bestellen van broodjes op school. Samen met mijn collega Mees ben ik op zoek gegaan naar een efficiëntere en gebruiksvriendelijkere manier om dit proces te organiseren.

Voorheen verliep het bestellen van broodjes via berichten die leerlingen individueel moesten sturen naar de broodjeszaak 2for1. Dit zorgde vaak voor verwarring, foutjes in de bestellingen en een gebrek aan overzicht. Het was duidelijk dat dit beter en vooral eenvoudiger kon.

Aangezien wij beiden leerlingen zijn in het zesde jaar van de richting ICW (Informatica & Communicatiewetenschappen), kwamen we op het idee om een digitaal platform te ontwikkelen. We wilden een online bestelsysteem maken via een overzichtelijke webpagina. Het doel was om niet alleen het bestelproces te vereenvoudigen voor de leerlingen, maar ook om 2for1 een handig systeem te bieden waarmee ze in één oogopslag konden zien welke broodjes wanneer besteld zijn, door wie, en in welke hoeveelheden.

Gelukkig konden we gebruikmaken van een bestaande template die beschikbaar werd gesteld door de heer C. Gratessolle. Deze template gaf ons een stevige basis om op verder te bouwen. Hierdoor konden we onze aandacht volledig richten op het ontwikkelen van de functionaliteiten, zoals het invullen en versturen van bestellingen, het beheren van gebruikers, en het genereren van een besteloverzicht. Bovendien konden we de visuele stijl van de template behouden, wat zorgde voor een consistent en professioneel ogend platform.

Met veel enthousiasme zijn Mees en ik aan de slag gegaan om onze visie werkelijkheid te maken. Het resultaat is een werkend, digitaal bestelsysteem dat niet alleen de gebruikerservaring verbetert, maar ook een efficiëntere werking mogelijk maakt voor 2for1.

In deze onepager neem ik u graag mee op onze reis: van probleemstelling tot oplossing, van idee tot eindresultaat.

🎯 Inleiding

Zoals eerder vermeld, was het oorspronkelijke systeem voor het bestellen van broodjes onnodig complex. Het proces vergde te veel handmatige stappen en was foutgevoelig, zowel voor de leerlingen die wilden bestellen als voor 2for1, die de bestellingen moest verwerken. Vanuit die vaststelling besloten Mees en ik een nieuw, digitaal bestelsysteem te ontwikkelen dat eenvoud, gebruiksgemak en efficiëntie centraal stelt.

Ons doel was duidelijk: een gebruiksvriendelijke webtoepassing bouwen waarmee broodjes snel en correct besteld konden worden, zonder overbodige handelingen of verwarring. Dankzij deze tool hoeven leerlingen enkel nog een account maken en inloggen om hun broodje te bestellen. De gegevens worden automatisch opgeslagen in een database, wat zorgt voor structuur en overzicht. 2for1 heeft op die manier een duidelijk en actueel overzicht van alle bestellingen per dag.

Voor de technische uitwerking hadden we gelukkig niet veel gespecialiseerde hardware nodig. Een gewone laptop met de lokale serveromgeving XAMPP volstond om onze applicatie te ontwikkelen en testen. Via XAMPP konden we gebruikmaken van PHP en MySQL, wat ons toeliet om een database op te zetten waarin alle gebruikersgegevens en bestellingen veilig worden opgeslagen.

Hoewel de benodigdheden beperkt waren, was het project inhoudelijk wél een grote uitdaging. Veel van de technologieën waarmee we werkten waren nieuw voor ons. Zaken zoals databasebeheer en foutafhandeling vroegen een diepgaand begrip en een flinke dosis inzet. We moesten onszelf voortdurend bijscholen en hebben moeten experimenteren tot alles werkte zoals het hoort. Het was een intens leerproces waarbij we soms vastliepen, maar telkens weer verder zochten naar oplossingen.

Een belangrijk uitgangspunt tijdens de ontwikkeling was het vermijden van nieuwe complexiteit. We wilden absoluut vermijden dat ons systeem zelf te ingewikkeld zou worden voor de gebruiker. Daarom hebben we tijdens elke stap bewust gekozen voor eenvoud in ontwerp én functionaliteit. De gebruikersinterface is overzichtelijk, de stappen zijn duidelijk, en de afhandeling gebeurt volledig op de achtergrond.

Het resultaat is een betrouwbaar systeem dat de oude, omslachtige methode vervangt met een gestroomlijnde digitale oplossing. Dankzij dit project hebben Mees en ik niet alleen een tastbaar eindproduct afgeleverd, maar ook onze vaardigheden in webontwikkeling, probleemoplossing en zelfstandig leren sterk kunnen ontwikkelen.

burger

❗ Probleemstelling

Vraagstelling

Aan het begin van ons GIP-traject gingen Mees en ik op zoek naar een geschikt projectidee. We wilden niet zomaar iets technisch bouwen; het moest een project zijn dat ook effectief iets zou betekenen voor anderen in onze omgeving. Een oplossing die niet alleen voor ons zelf interessant was, maar ook een meerwaarde bood voor de school of medeleerlingen.


Om inspiratie op te doen, zijn we in gesprek gegaan met onze leerkracht, dhr. C. Gratessolle. Tijdens dat overleg wees hij ons op een praktisch probleem binnen de schoolcontext: het bestellen van broodjes bij 2for1 verliep op een erg omslachtige manier. Leerlingen moesten individueel berichten sturen met hun keuze, wat leidde tot verwarring, fouten en extra werk voor de broodjeszaak.


Hij stelde voor dat het handig zou zijn als dit proces gedigitaliseerd kon worden. Dat idee sprak ons meteen aan. Zo kwamen we tot het besluit om het bestelproces van de broodjes te vereenvoudigen door middel van een digitale oplossing.


Gelukkig had dhr. C. Gratessolle al een template klaarliggen waarop we konden voortbouwen. Dit gaf ons een stevige technische basis en liet ons toe om sneller en efficiënter te starten met het ontwikkelen van de functionaliteiten van onze webapplicatie. Dankzij die template konden we ons meer richten op wat écht belangrijk was: het bouwen van een gebruiksvriendelijk en functioneel systeem dat het verschil maakt voor zowel leerlingen als de broodjeszaak.

Verkoopsysteem

Voor het ontwikkelen van ons bestelsysteem kozen we ervoor om een online platform te bouwen dat naadloos samenwerkt met een externe databank. Via deze webapplicatie kunnen gebruikers eenvoudig broodjes bestellen, terwijl op de achtergrond alle gegevens automatisch worden verwerkt en opgeslagen.


De webtoepassing is gekoppeld aan een MySQL-database, die we beheren via TablePlus. Deze combinatie maakt het mogelijk om alle nodige data – van gebruikersinformatie tot bestellingen – overzichtelijk en veilig op te slaan. Zodra een gebruiker zich registreert op de website, worden zijn of haar gegevens opgeslagen in de database, inclusief gebruikersnaam, wachtwoord (versleuteld) en andere relevante informatie.


Wanneer een gebruiker inlogt en een broodje bestelt, wordt die bestelling apart opgeslagen in een specifieke bestellingentabel. Op die manier blijven de gebruikersgegevens en de bestellingen gescheiden, wat zorgt voor een overzichtelijke datastructuur en maakt het makkelijker om de juiste gegevens op te vragen of aan te passen.


We kozen bewust voor een databankgestuurde aanpak, omdat dit ons toelaat om gegevens betrouwbaar op te slaan, snel op te vragen en eenvoudig aan te passen waar nodig. Bovendien zorgt deze structuur ervoor dat we het systeem later gemakkelijk kunnen uitbreiden, bijvoorbeeld door nieuwe broodjes toe te voegen of statistieken te genereren over populaire keuzes. Dankzij het gebruik van MySQL en het duidelijke onderscheid tussen verschillende datatabellen blijft het platform stabiel, overzichtelijk en makkelijk te onderhouden. De combinatie van een online webomgeving met een krachtige database vormt dan ook de stevige ruggengraat van ons hele systeem.

🎯 Doel

Met dit project willen we niet alleen onze technische kennis uitbreiden — zoals leren werken met databases, loginfunctionaliteit en webontwikkeling — maar vooral ook een oplossing bouwen die écht iets betekent voor anderen. We willen een concreet probleem binnen de schoolomgeving aanpakken en daar een digitale, gebruiksvriendelijke oplossing voor bedenken.

Ons doel is om een systeem te ontwikkelen waarmee 2for1 op een overzichtelijke manier kan zien wie welk broodje heeft besteld, en op welke dag. Door gebruik te maken van een database willen we ervoor zorgen dat alle bestellingen automatisch en foutloos worden opgeslagen. Dit zou de administratieve druk bij 2for1 aanzienlijk kunnen verlichten.

Daarnaast streven we ernaar om het bestelproces voor leerlingen veel eenvoudiger en aangenamer te maken. In plaats van losse berichtjes willen we een centraal platform creëren waar alles digitaal verloopt. Op die manier hopen we een efficiënter, sneller en betrouwbaarder systeem te bouwen dat voordelen biedt voor iedereen die bij het proces betrokken is.

verkopen

🛠️ Plan van aanpak

Om dit project op een sterke en gestructureerde manier te kunnen starten, hadden we natuurlijk eerst een goed plan nodig. Na een brainstormsessie kwamen we tot een taakverdeling die gebaseerd is op onze individuele sterktes.

Mees neemt het visuele deel van de webapplicatie op zich. Hij focust zich op het schrijven van de HTML en CSS, en zorgt ervoor dat de verschillende webpagina’s er verzorgd, overzichtelijk en gebruiksvriendelijk uitzien. Zijn oog voor design en lay-out maakt hem uitermate geschikt voor deze rol.

Ikzelf richt mij op de technische kant achter de schermen. Met behulp van JSON, PHP en MySQL werk ik aan de logica en de dataverwerking van de site. Mijn taak is om ervoor te zorgen dat alle informatie die via het platform wordt ingegeven — zoals gebruikersgegevens en broodjesbestellingen — correct en veilig wordt opgeslagen in een database.

We kozen bewust voor deze taakverdeling omdat ze inspeelt op onze sterktes. Mees is bedreven in het ontwerpen en structureren van gebruiksvriendelijke interfaces, terwijl ik mij meer thuis voel in het ontwikkelen van de achterliggende functionaliteit en het opzetten van betrouwbare dataverwerking. Op die manier vullen we elkaar goed aan en kunnen we samen bouwen aan een robuust en goed werkend eindproduct.

⚙️ Realisatie

Door onze krachten te bundelen en elkaars sterktes optimaal in te zetten, werken we stap voor stap toe naar een mooi eindresultaat. We proberen het beste van onze programmeervaardigheden te gebruiken, en helpen elkaar telkens wanneer we ergens vastlopen. Die samenwerking zorgt ervoor dat het project blijft vooruitgaan en steeds sterker wordt.

Op basis van de bestaande template hebben we zelf functionaliteiten toegevoegd zoals een login, registratieformulier en een duidelijk menu. Hierdoor krijgt onze webapplicatie niet alleen een professioneel uiterlijk, maar wordt ze ook eenvoudig in gebruik — zowel voor de leerlingen die bestellen als voor 2for1 die de bestellingen opvolgt.

Alle gegevens worden netjes opgeslagen in de database, het webdesign is overzichtelijk en gebruiksvriendelijk, en bij elke stap van de ontwikkeling doen we nieuwe kennis en ervaring op. Dankzij dit project leren we niet alleen programmeren in de praktijk, maar ontdekken we ook hoe belangrijk samenwerking en doorzettingsvermogen zijn om tot een goed eindresultaat te komen.

eten

🧪 Softwares

Slimme Weegschaal
We maken gebruik van HTML, de standaardtaal voor het opbouwen van webpagina’s. Met CSS zorgen we ervoor dat de pagina er aantrekkelijk en gebruiksvriendelijk uitziet. Zonder styling zou de site er erg saai uitzien, maar dankzij een doordachte vormgeving oogt alles veel netter en moderner. Hiermee hebben we de basisstructuur van de website opgebouwd. Vanuit die fundering zijn we verder gegaan met het toevoegen van de functionaliteiten, die we koppelen via andere programmeertalen.
Slimme Weegschaal

We gebruiken JavaScript om de verbinding te leggen tussen de frontend en de backend van onze webapplicatie. Dankzij JavaScript kunnen we de gegevens die gebruikers invullen op de website actief verwerken en doorsturen naar de server, waar ze verder worden afgehandeld.

Dit gebeurt via een AJAX-call: een techniek waarmee we gegevens asynchroon kunnen verzenden, zonder dat de hele pagina opnieuw moet laden. Bij zo’n verzoek geven we een aantal belangrijke parameters mee, zoals de data die moet worden verstuurd, het datatype (bijvoorbeeld JSON), de gebruikte methode (zoals POST of GET) en de URL waar het verzoek naartoe moet.

Door deze instellingen correct te configureren, zorgen we ervoor dat de informatie die aan de voorkant wordt ingevoerd — zoals bestellingen of gebruikersgegevens — vlot en veilig terechtkomt bij de backend, waar ze verder wordt verwerkt en opgeslagen in de database.


Slimme Weegschaal

We gebruiken PHP als programmeertaal voor de backend van onze webapplicatie. Alle gegevens die via JavaScript vanaf de frontend worden doorgestuurd, worden in de backend verder verwerkt met PHP. Ook zorgt PHP er voor dat we connectie kunnen maken met de database.

Denk bijvoorbeeld aan informatie zoals een e-mailadres, gebruikersnaam of wachtwoord. Wanneer een gebruiker probeert in te loggen, gebruiken we PHP om deze ingevoerde gegevens te vergelijken met wat er in onze database staat. Als de combinatie klopt, weten we dat de gebruiker bestaat en kunnen we hem of haar toegang geven tot het systeem.

PHP speelt dus een centrale rol in de communicatie tussen de website en de database. Dankzij deze taal kunnen we logica toevoegen aan onze applicatie, zoals gebruikersauthenticatie, het opslaan van bestellingen en het controleren van invoer. Zo wordt onze website niet alleen interactief, maar ook veilig en betrouwbaar in gebruik.


Slimme Weegschaal

We gebruiken MySQL om te communiceren met de database. Dankzij deze taal kunnen we gegevens opvragen, bewerken, toevoegen of verwijderen uit de databank. Dit doen we met behulp van zogenaamde query’s — opdrachten die we naar de database sturen.

Je kan een query zien als een vraag aan de database, zoals: "Hallo, ik zou graag alle gebruikersnamen willen uit de tabel ‘gebruikers’." De database verwerkt deze vraag en geeft vervolgens de gevraagde data terug. Via PHP kunnen we die data dan verder verwerken, bijvoorbeeld om te controleren of een gebruikersnaam al bestaat of om bestelinformatie op te halen.

SQL is dus een cruciale bouwsteen binnen ons project. Zonder deze taal zouden we niet in staat zijn om efficiënt met de database te werken, en zou het hele systeem van gebruikersregistratie en broodjesbestellingen niet mogelijk zijn geweest.


🔧 Technische uitleg

Video:

Uitleg

Hier zie je de pagina in werking je kan zien hoe we een gebruiker kunnen aanmaken en met deze gebruiker kunnen inloggen. Hier onder leg ik nog wat extra stukjes code uit.

Screenshots / Foto's technische details

Technische screenshot 1
Zoals je kunt zien, worden hier alle gegevens van de frontend doorgestuurd naar de backend. In de eerste if-statement controleren we of alle verplichte velden correct zijn ingevuld. Als dit niet het geval is, geven we een foutmelding aan de gebruiker, zodat hij weet dat er nog iets ontbreekt.

In de tweede if-statement controleren we of het eerste ingevoerde wachtwoord overeenkomt met het tweede. Als deze niet gelijk zijn, gaan we ervan uit dat de gebruiker een typfout heeft gemaakt. Ook dan tonen we een duidelijke foutmelding, zodat de gebruiker zijn invoer kan corrigeren.
Technische screenshot 2
Hier beveiligen we het wachtwoord met password_hash. Deze functie zet het wachtwoord om in een reeks tekens, waardoor het veilig opgeslagen wordt. Als de databank ooit gehackt wordt, kunnen kwaadwilligen het wachtwoord niet lezen of ontcijferen. Dit is cruciaal voor de veiligheid van de gebruikers.

Daarnaast slaan we hier de registratiegegevens op in de databank. We genereren een uniek ID voor de nieuwe gebruiker en voegen alle info toe via een query. Met prepare voorkomen we SQL-injecties. Bij bind_param() vullen we de variabelen in; de s-jes geven aan dat het om strings gaat. De variabelen komen rechtstreeks van de frontend.
Technische screenshot 3
Hier gebruiken we de tegenhanger van password_hash(), namelijk password_verify(). Je zou denken dat deze functie het gehashte wachtwoord terug omzet naar de originele vorm, maar dat klopt niet. password_verify() vergelijkt het ingevoerde wachtwoord (in plaintext) met de gehashte versie uit de database, zonder ooit de hash te ontcijferen. In dit geval is het plaintext wachtwoord wat de gebruiker invoert bij het inloggen, en de hash is wat al opgeslagen staat. Zo kunnen we veilige logins mogelijk maken, zonder dat iemand het originele wachtwoord kan achterhalen.
Technische screenshot 1
Deze PHP-code maakt verbinding met een MySQL-database. Eerst worden de benodigde verbindingsgegevens ingesteld: de hostnaam (localhost), gebruikersnaam (root), wachtwoord (leeg) en de databasenaam (2for1). Vervolgens probeert mysqli_connect() met deze gegevens een verbinding op te zetten. Het resultaat wordt opgeslagen in de variabele $con. Als de verbinding mislukt, voert het script een die()-functie uit die de foutmelding toont via mysqli_connect_error(), waarna het script stopt. Zo controleer je eenvoudig of de databaseverbinding geslaagd is voordat je verdergaat met databasebewerkingen.
Technische screenshot 2
De functie session_start() in PHP wordt gebruikt om een sessie te starten of een bestaande sessie te hervatten. Dit is essentieel bij het bouwen van een login-systeem. Wanneer een gebruiker succesvol inlogt, kun je met session_start() een sessie openen en bepaalde gegevens, zoals een gebruikers-ID, opslaan in de $_SESSION-variabele. Deze gegevens blijven bewaard zolang de sessie actief is, zelfs wanneer de gebruiker tussen pagina’s navigeert. Door op elke beveiligde pagina opnieuw session_start() te gebruiken en vervolgens te controleren of bijvoorbeeld $_SESSION['user_id'] bestaat, kun je voorkomen dat ongewenste bezoekers toegang krijgen tot afgeschermde inhoud. Als die sessievariabele niet is ingesteld, betekent dat meestal dat de gebruiker niet is ingelogd, en kun je hem automatisch doorverwijzen naar de loginpagina. Op deze manier zorgt session_start() ervoor dat alleen geauthenticeerde gebruikers bepaalde pagina’s kunnen bekijken, wat je loginproces een stuk veiliger maakt.
Technische screenshot 3
Dit is een voorbeeld van een query. Zoals eerder vermeld, gebruiken we MySQL als taal om informatie op te vragen uit de database. Een query plaatsen we meestal in een variabele, vaak genaamd $sql. In deze query staat het sterretje (*) voor "alles". De query betekent dus: "Selecteer alle gegevens van de gebruiker uit de tabel ‘users’ waarvan het e-mailadres overeenkomt met een bepaalde waarde." Met bind_param() geven we vervolgens de juiste waarde mee voor het e-mailadres. Zo kunnen we op basis van iemands e-mailadres alle bijhorende gegevens opvragen uit de database.

📚 Wat hebben we geleerd?

In dit project hebben we vooral geleerd hoe we efficiënt kunnen samenwerken aan een project. Daarnaast hebben we beiden meer inzicht gekregen in het opbouwen van een webshop en de uitdagingen die daarbij komen kijken. Het creëren van een gebruiksvriendelijk platform is daarbij ook een belangrijk aspect dat we niet uit het oog mogen verliezen. Mees heeft zich vooral verdiept in HTML en CSS, terwijl ik meer heb geleerd over databases en de achterliggende functionaliteiten. Natuurlijk worden we ook steeds beter in het opsporen en oplossen van fouten.

✅ Besluit

Het eindresultaat is een werkend bestelsysteem dat klaar is voor gebruik. We hebben bewezen dat we met onze kennis en motivatie een echte oplossing kunnen bouwen voor een concreet probleem. Ik kijk met trots terug op dit project en neem deze ervaring mee in mijn verdere ontwikkeling, zowel op technisch vlak als in mijn professionele houding.