Opdracht

Officiële opgave, zie Toledo

FSWEB: Projectopdracht 2025-2026, De sociale kaart voor jongeren

De sociale kaart is een redelijk droge website waarmee je hulp- en zorgverleners in Vlaanderen kan opzoeken. De site is in essentie niet meer dan een formulier waarin je kan invullen naar wat je op zoek bent, en in welke locale dat moet zijn. De uitkomst geeft dan zowel zorgverleners (meer medische en/of klinische beroepen), hulpverleners (breder en dus ook sociaal, maatschappelijk, …) en instellingen (CAW, …). Om het algemeen te houden, noemen we die hieronder “actoren”.

Een jongerenversie moet meer drempelverlagend zijn en de bezoeker beter begeleiden in de zoektocht naar de juiste hulp. Duidelijke rubrieken zoals “Ik wil op eigen benen staan”, “Er is een noodgeval”, “ik wil een klacht indienen”, … kunnen daarbij helpen. De relatief droge data van de sociale kaart moet daarvoor verrijkt worden gegevens over toegankelijk- en betaalbaarheid en de mate waarin het initiatief zich specifiek op jongeren richt. Ook een indeling in de rubrieken van hierboven is belangrijk.

Hiervoor moet in dit vak (FSWEB) een website gemaakt worden dat een meer basic versie van de database (uit het vak DAB) gebruikt.

De database wordt jullie aangeboden in de week van 23/03/2026 wanneer we de lessen rond laravel en mysql gezien hebben

Hierbij gelden volgende technische minimumvereisten voor de website:

• Volg de logica van de HTML-elementen om je website te structureren (bv. één main-sectie, aside voor nevenstaande elementen, …)
• Maak minstens de drie volgende pagina’s:
  • Een map view pagina zoals ook te zien is op deze url De sociale kaart in kaartvorm. Je kan hiervoor de leaflet api gebruiken of google maps api.
  • Een login-pagina. Implementeer hierbij user authentication zodat je als administrator een gepersonaliseerde ervaring krijgt en elementen aan de website kan updaten. (Bijvoorbeeld extra organisaties toevoegen). Niet alleen administrators moeten kunnen inloggen maar ook organisaties die hun gegevens willen updaten. (Bijvoorbeeld: Apotheek Peeters is verhuisd en wil zijn adres updaten).
  • Een zoekpagina gelijkaardig aan de originele sociale kaart website maar met focus op jongeren en een meer intuïtieve gebruikers interface.
• Zorg daarnaast voor minstens 2 andere webpagina’s met een duidelijk verschillend doel.
  • Het is interessanter om duidelijk verschillende soorten pagina’s te maken dan varianten op hetzelfde. (Je mag deze zelf een invulling geven)
• Op elke pagina moet een navigatiemenu en een footer staan.
• Gebruik een aparte CSS-file om je website te stylen.
• Maak gebruik van een flexbox en/of grid voor het positioneren van de HTML-elementen
• Voorzie minstens 1 afbeelding, 1 animation en 1 transition. (Waar nuttig)
• Doe formuliervalidatie voor minstens twee soorten elementen, client- én serverside.
• Je website moet responsive zijn voor minstens 2 schermgroottes:
  • Een standaard laptop-scherm (14” of 15”, 1920x1080), enkel landscape
  • Een smartphone (bv. IPhone SE of OnePlus Nord 2T 5G, Android 14): afhankelijk van je eigen toestel kan je kiezen tussen iOS of Android.
• Implementeer een volledige CRUD (create, read, update en delete), zowel op de backend als met local storage.
  • In local/session storage moet je de zoekgegevens van de gebruikers stoppen zodat jongeren zich niet moeten inloggen, maar dat ze wanneer ze een volgende keer naar de website surfen hun favoriete diensten wel snel kunnen terugvinden.
• De Laravel-site moet (vrij) volledig uitgewerkt zijn. De versie in Sveltekit mag beperkter zijn.

Voor de verdere indeling en specifieke uitwerking rekenen we op de individuele invulling van de student. Aangezien jullie de doelgroep van zo een website zouden kunnen zijn … Hoe wil jij dat de website werkt en wat denk je dat jongeren kan helpen snel de juiste hulp te vinden en jongeren kan aantrekken om hiervan gebruik te maken?

Met deze minimale vereisten kan je maximaal 16/20 halen voor dit deel van het project. Je bent dus vrij om dit voorstel uit te breiden. Correct uitgewerkte uitbreidingen kunnen voor een hogere score zorgen, maar enkel als aan de minimale vereisten voldaan is. Hou echter rekening met de werklast en met het feit dat je ook nog op de andere opleidingsonderdelen moet slagen.

Deze vraag werd ons rechtstreeks gesteld van een medewerkster van de website en ze willen graag dat wij hun helpen met een efficiënte, bruikbare en aantrekkelijke website. Midden mei zitten we terug samen met hen en willen we al een deel van jullie projecten tonen om aan hen ook feedback te vragen wat ze willen hebben, want moesten ze zeer blij zijn met het resultaat kan het zijn dat we met jou contact opnemen om na de cursus de website eventueel voor hen beschikbaar te stellen. Daarom willen we voor zondag 03/05/2026 23u59 een eerste versie van je Laravel project ontvangen, je zal hier dan ook informatieve feedback op krijgen (staat dus nog niet op punten). De uiteindelijke verdediging van je website zal ergens vlak voor of tijdens de examen periode ingepland worden voor een mondelinge verdediging.

Deel 1 en 2 worden mondeling verdedigd, en dit ten laatste op het examen. Vroeger mag ook.

Zowel deel 1 als deel 2 zijn een individueel project. Voor deel 3 (de verslagen) is het voldoende om ze te uploaden via Toledo, maar hier kan wel een vraag over komen op de mondelinge verdediging van het project.

Indienen deel 0 Zip de rootfolder van je gehele website (heel het Laravel project) en geef het de benaming “AchternaamVoornaam_Laravel.zip”. Upload dit zipbestand op Toledo.

Indienen deel 1 Zip de rootfolder van je gehele website (heel het Laravel project) en geef het de benaming “AchternaamVoornaam_Laravel.zip”. Upload dit zipbestand op Toledo.

Indienen deel 2 Zip de rootfolder van je gehele website (heel het Svelte/Sveltekit project) en geef het de benaming “AchternaamVoornaam_Svelte.zip”. Upload dit zipbestand op Toledo.

Indienen deel 3 Upload de twee verslagen (“VoornaamAchternaam_verslagWebsite.docx” en “AchternaamVoornaam_verslagVerschil.docx”)

Deel 1: Laravel

Deadline: zie boven

Maak voor de backend functionaliteit van je project gebruik van Laravel en zijn integratie met de MySQL database.

Indienen doe je via Toledo; voeg enkel je zip bestand toe. Zie boven.

Deel 2: SvelteKit

Deadline: zie boven

Herbruik zoveel mogelijk de frontend van je Laravel website uit deel 1, maar maak ze meer reactive met de mogelijkheden die Svelte biedt. Indien je ervoor gekozen hebt om meer te implementeren in je website dan het minimum in deel 1, dan is het NIET nodig deze extraatjes ook in Svelte/Sveltekit te implementeren. Verder moet de website een gelijkwaardige kopie vormen van je project uit deel 1. Op dit deel kan je dus het maximum van de punten behalen door enkel de minimumvereisten van het vorige deel te implementeren.

Indienen doe je via Toledo; voeg enkel je zip bestand toe. Zie boven.

Deel 3: Verslagen

Deadline: zie boven

Je dient verder ook nog een verslag over de verschillende frameworks te maken—van ongeveer 250 woorden—waarin je een vergelijking maakt tussen de werking van Laravel en SvelteKit. Wat was makkelijker in het ene framework, wat was moeilijker. Vermeld ook welk framework je meer geneigd bent om in de toekomst te gebruiken en waarom.

Indienen doe je via Toledo; voeg enkel het Word-bestand toe. Zie boven.

ALVAST VEEL SUCCES!