Online museum

📘 Voorwoord

Voor u ligt mijn GIP-project voor Limburg Stemt Af, waarin ik een gedigitaliseerd museum heb ontwikkeld dat werkt via QR-codes. Dit project is tot stand gekomen dankzij dhr. F. Meyers, die onze klas inschreef voor Limburg Stemt Af.

Limburg Stemt Af is een initiatief waarbij scholen uit heel Limburg de kans krijgen om een STEM-project uit te werken. Elke school krijgt hiervoor ongeveer een half jaar de tijd (afhankelijk van het startmoment). Het doel is om een boeiend en origineel project te ontwikkelen dat aansluit bij STEM (Science, Technology, Engineering, Mathematics). Het is geen competitie waarin prijzen te winnen zijn, maar eerder een gezellige bijeenkomst waarin leerlingen hun creativiteit en technische vaardigheden kunnen tonen en STEM in de kijker wordt gezet.

Voor ons project werkten we samen met dhr. J. Conincx en mevr. J. Hoeks van het Grevenbroekmuseum. Zij gaven aan dat het handig zou zijn als het museum digitaal beschikbaar zou zijn — iets dat het beheer en de toegankelijkheid zou verbeteren. Vanuit die vraag zijn we gestart met de ontwikkeling van een online museumplatform.

Het concept is eenvoudig maar krachtig: een gebruiksvriendelijke webpagina waarop museumstukken digitaal worden voorgesteld. Bezoekers kunnen via QR-codes die bij de fysieke voorwerpen geplaatst zijn, rechtstreeks toegang krijgen tot de bijhorende informatie op de website. Zo wordt elk werkstuk overzichtelijk, interactief en makkelijk raadpleegbaar.

🎯 Inleiding

Een van de grootste uitdagingen waar het museum mee kampte, was het gebrek aan bekendheid. We merkten dat er weinig bezoekers waren en dat de interesse vanuit het grote publiek beperkt bleef. Veel mensen wisten niet eens van het bestaan van het Grevenbroekmuseum af, laat staan dat ze de moeite namen om het te bezoeken. Daarom gingen we op zoek naar een manier om het museum aantrekkelijker en toegankelijker te maken, vooral voor een jonger en technischer publiek. Al snel kwamen we tot het idee om ICT in te zetten als oplossing.

De gedachte hierachter was eenvoudig: als mensen niet naar het museum willen komen, dan brengen wij het museum naar hen toe. Door het digitaliseren van de museumstukken wilden we de collectie breder toegankelijk maken — op school, thuis of zelfs onderweg. Zo kan iedereen het museum op zijn of haar eigen tempo en op elk moment bezoeken via een smartphone, tablet of computer.

Om dit technisch mogelijk te maken, kozen we ervoor om te werken met een database. Aangezien we te maken hadden met heel wat data, zoals teksten, foto's en metadata over de werken, was het noodzakelijk om die op een efficiënte manier te kunnen opslaan, beheren en opvragen. MySQL bleek hiervoor de ideale keuze. Daarnaast gebruikten we verschillende programmeertalen en technologieën zoals PHP, HTML, CSS, JavaScript en Bootstrap. Door deze tools slim met elkaar te combineren, konden we een goed werkend en visueel aantrekkelijk digitaal museum bouwen.

Toch draaide dit project niet alleen om de technische werking. Minstens even belangrijk was het ontwikkelen van een gebruiksvriendelijke interface. We wilden een website maken die intuïtief en eenvoudig te bedienen is, ook voor mensen met weinig digitale ervaring. Denk bijvoorbeeld aan oudere bezoekers van het museum: zij moeten zonder hulp kunnen navigeren en informatie raadplegen. Alleen dan is het systeem echt geslaagd in zijn opzet.

Daarnaast hebben we ook een aparte beheermodule ontwikkeld: de admin-pagina. Deze maakt het voor de beheerders van het museum mogelijk om met slechts een paar klikken nieuwe werken toe te voegen of bestaande teksten aan te passen. Je hoeft niet technisch onderlegd te zijn: met een beetje tikken op je toetsenbord en enkele muisklikken kun je vanuit je eigen zetel het volledige digitale museum beheren. Dit verlaagt de drempel voor onderhoud en updates aanzienlijk, waardoor het systeem ook op lange termijn bruikbaar en relevant blijft.

Kortom, ons project combineert technologie, gebruiksvriendelijkheid en educatief nut om een eeuwenoud museum nieuw leven in te blazen — digitaal, laagdrempelig en toekomstgericht.

❗ Probleemstelling

Vraagstelling

Zoals eerder vermeld, kampte het museum met een groot probleem: het trok te weinig bezoekers aan omdat het simpelweg niet aantrekkelijk of bekend genoeg was. Er moest dus dringend een oplossing komen om het museum opnieuw onder de aandacht te brengen.

Aangezien de heer F. Meyers onze school had ingeschreven voor Limburg Stemt Af, vond hij dit de ideale gelegenheid om het museum als uitgangspunt te nemen voor ons project. Samen zijn we gaan nadenken over mogelijke oplossingen om het museum te moderniseren en aantrekkelijker te maken voor een breder publiek. Uiteindelijk kwamen we tot het idee om een interactieve webpagina te ontwikkelen. Op die manier kunnen bezoekers niet alleen fysiek, maar ook digitaal kennismaken met het museum. Dat is in deze tijd, waarin digitale toegankelijkheid steeds belangrijker wordt, een enorme meerwaarde.

Wat dit project echt bijzonder maakte, was de visie van dhr. Meyers. Hij denkt altijd innovatief en vooruitstrevend. In plaats van vast te houden aan wat traditioneel of vertrouwd is, moedigt hij ons aan om buiten de lijntjes te denken. Volgens hem moeten we niet enkel leren wat de school voorschrijft, maar vooral leren hoe we zelf creatieve oplossingen bedenken, net zoals we dat later op de arbeidsmarkt ook zullen moeten doen.

Hij zegt het vaak en terecht: “Jullie hebben het hele internet tot jullie beschikking, dus gebruik het ook. Ga op zoek, probeer, experimenteer en leer.” In plaats van simpelweg de bekende tools te gebruiken, stimuleerde hij ons om zelf nieuwe ideeën te verzinnen en deze tot in de puntjes uit te werken. Die vrijheid en aanmoediging hebben ervoor gezorgd dat we ons volledig konden uitleven in dit project. En wat we gevonden hebben, was inderdaad niet alleen leerzaam, maar ook bijzonder leuk.

Voor de ontwikkeling van ons digitale museum kozen we ervoor om een gebruiksvriendelijk online platform te creëren dat nauw samenwerkt met een databank. Dit platform stelt ons in staat om op een efficiënte manier informatie te beheren, zoals het toevoegen, verwijderen of aanpassen van gegevens over de tentoongestelde objecten of werkstukken. Op die manier kunnen beheerders het museum dynamisch en up-to-date houden, zonder dat daar technische kennis voor nodig is.

Voor het beheer van onze database maakten we gebruik van TablePlus – een krachtige tool waarmee we overzichtelijk en intuïtief tabellen kunnen aanmaken, bewerken en beheren. Deze tool biedt een visuele interface, wat het ideaal maakt voor zowel ontwikkelaars als begeleiders zonder veel ervaring met databases. Zo kunnen begeleiders eenvoudig nieuwe gegevens invoeren of bestaande data aanpassen, zonder te moeten werken met complexe SQL-commando’s.

Daarnaast maakten we ook gebruik van API’s (Application Programming Interfaces). Deze API’s speelden een belangrijke rol bij het genereren van QR-codes. Elke QR-code verwijst naar een specifieke pagina binnen onze webapplicatie, afhankelijk van welk werkstuk of thema eraan gekoppeld is. Wanneer een bezoeker zo’n code scant, wordt hij of zij automatisch doorgestuurd naar de juiste digitale presentatie van het object.

De QR-functionaliteit maakt ons project niet alleen interactiever, maar verlaagt ook de drempel om informatie op te zoeken. Bezoekers hoeven enkel hun smartphone te gebruiken om direct toegang te krijgen tot een rijkere museumervaring. De API fungeert hier als brug tussen onze eigen programmatie (de museumapplicatie) en de externe dienst die de QR-codes genereert.

Dankzij deze combinatie van een online databank, een webapplicatie en slimme integraties via API’s hebben we een modern en toekomstgericht platform kunnen ontwikkelen dat zowel praktisch inzetbaar is als technisch leerzaam voor ons als makers.

🛠️ Plan van aanpak

Een goed plan van aanpak was essentieel voor dit project, vooral omdat er veel technische functionaliteit aan verbonden is. Zonder een gestructureerde werkwijze zou het risico op fouten groot zijn en zou het overzicht al snel verloren gaan. Daarom heb ik op voorhand nagedacht over een logische en efficiënte opbouw voor het realiseren van mijn online webpagina.

De eerste stap was het ontwikkelen van een gebruiksvriendelijke interface. Deze moest intuïtief en overzichtelijk zijn, zodat ook de beheerders van het museum – die misschien minder vertrouwd zijn met digitale systemen – er zonder problemen mee aan de slag konden. Centraal in deze interface kwam een tabel waarin alle gegevens van de verschillende werkstukken duidelijk weergegeven werden. Denk hierbij aan informatie zoals titel, beschrijving, auteur en datum van aanmaak.

Zodra deze basis er stond, ben ik begonnen met het implementeren van kleinere functionaliteiten. Een van de eerste toevoegingen was de mogelijkheid om een kunstwerk (of tabelrij) te dupliceren. Dit was technisch gezien relatief eenvoudig, aangezien dit slechts het uitvoeren van een SQL-query vergde en het genereren van een nieuw ID.

Nadat deze kleinere functies goed werkten, begon ik aan de meer complexe onderdelen van het project. Zo moest het mogelijk worden om bestaande kunstwerken aan te passen en nieuwe toe te voegen. Daarnaast ontwikkelde ik een gezamenlijke webpagina waarop alle gegevens getoond kunnen worden aan bezoekers.

Tot slot ben ik aan de slag gegaan met het integreren van een API om QR-codes te genereren. Elke QR-code verwijst naar de bijhorende pagina van een kunstwerk. Op die manier kunnen bezoekers via hun smartphone snel en eenvoudig extra informatie opvragen – een moderne oplossing die perfect aansluit bij de digitalisering van het museum.

Deze gestructureerde aanpak zorgde ervoor dat het project overzichtelijk bleef en dat elke stap logisch voortvloeide uit de vorige.

⚙️ Realisatie

Dankzij een doordacht en efficiënt plan van aanpak kon ik dit project op een zeer gestructureerde manier uitwerken. Elke stap werd zorgvuldig voorbereid en uitgevoerd, waardoor ik functie per functie kon implementeren zonder dat onderdelen door elkaar liepen of elkaar in de weg zaten. Mijn werkwijze was eenvoudig maar doeltreffend: ik werkte elke stap volledig af tot alles correct functioneerde, en pas daarna ging ik over naar de volgende uitdaging.

Deze gestructureerde aanpak leverde niet alleen rust in mijn werkwijze op, maar maakte het ook mogelijk om elk probleem logisch te benaderen. Wanneer er zich een obstakel voordeed, ging ik stap voor stap op zoek naar een passende oplossing. Zo wist ik altijd waar ik stond in het proces, en bleef het overzicht bewaard.

De eerste fase van het project bestond uit het ontwerpen en opbouwen van de gebruikersinterface. Na wat finetuning was deze volledig klaar. Alle werkstukken werden overzichtelijk weergegeven, er stond al een kolom klaar voor de QR-codes en ook de benodigde knoppen waren voorzien. Op dat moment ontbrak enkel nog de achterliggende functionaliteit.

Maar dit was geen groot obstakel, want dankzij de duidelijke structuur kon ik deze functies één voor één toevoegen. Ik begon met de eenvoudige functionaliteiten, zoals het verwijderen en dupliceren van werkstukken. Elke knop kreeg een specifieke functie toegewezen die ik zorgvuldig testte en optimaliseerde.

Nadat deze basisfuncties goed werkten, was het tijd om de complexere onderdelen aan te pakken. Dit betrof onder andere het bewerken van bestaande QR-codes en het automatisch genereren ervan via een externe API. Tot slot realiseerde ik ook een gedeelde webpagina waarop de gegevens van het werkstuk worden weergegeven, afhankelijk van welke QR-code de bezoeker scant.

Deze gestructureerde werkwijze was onmisbaar voor het succesvol afronden van het project. Ze bood niet alleen overzicht en controle, maar maakte het ook mogelijk om telkens een stapje verder te gaan in de technische uitwerking.

🧪 Softwares

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.

Bootstrap wordt in dit project gebruikt om het platform dynamischer en gebruiksvriendelijker te maken. Dankzij de uitgebreide set van ingebouwde componenten en stijlen die Bootstrap biedt, kunnen we op een efficiënte manier een aantrekkelijke en responsieve gebruikersinterface creëren. Met behulp van vooraf gedefinieerde CSS-classes kunnen we eenvoudig elementen zoals knoppen, navigatiebalken, formulieren en lay-outs vormgeven, zonder dat we telkens alles zelf hoeven te coderen. Dit bespaart niet alleen tijd, maar zorgt er ook voor dat onze webpagina er professioneel en consistent uitziet op verschillende apparaten en schermformaten. Kortom, Bootstrap biedt ons de mogelijkheid om onze website zowel visueel aantrekkelijk als technisch solide te maken, met minimale inspanning en maximale flexibiliteit.

We gebruiken JavaScript om de verbinding te leggen tussen de frontend en de backend van onze webapplicatie. Dankzij JavaScript kunnen we de gegevens die beheerders aanpassen 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 aangepast — zoals naam van het werkstuk of de beschrijving — vlot en veilig terechtkomt bij de backend, waar ze verder wordt verwerkt en opgeslagen in de database.

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 aanpassing aan de naam, de tijd of de foto. Wanneer een beheerder iets aanpast, gebruiken we PHP om deze ingevoerde gegevens te verwerken met onze database. Eerst moeten we het foutieve uit de database halen om dan het correcte er weer in te steken

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 data en het controleren van invoer. Zo wordt onze website niet alleen interactief, maar ook veilig en betrouwbaar in gebruik.

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 titels willen uit de tabel werkstukken." De database verwerkt deze vraag en geeft vervolgens de gevraagde data terug. Via PHP kunnen we die data dan verder verwerken, bijvoorbeeld om de informatie te verwerken en dan terug te sturen.

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 gebruikersvriendelijkheid en dataverwerking niet mogelijk zijn geweest.

🔧 Technische uitleg

Video:

Uitleg

Hier kun je je technische uitleg schrijven: bijvoorbeeld hoe de database is opgezet, hoe de PHP-logica werkt, welke beveiligingsmaatregelen zijn genomen, en hoe de verschillende onderdelen samenwerken.