Je gaat aan de slag met het ontwikkelen van een eigen magazine binnen een dynamische front-end. De opdracht is verdeeld in de deelopdrachten om je stap voor stap te laten ontwikkelen. Je mag elke vorm van een magazine maken, zolang de randvoorwaarden (technisch, functioneel) in basis gelijk zijn aan het foodmagazine. Je mag zelf geen 'foodmagazine' bouwen, dit moet een eigen verzonnen magazine zijn die qua functionaliteiten minimaal gelijk is aan ons gestelde voorbeeld. Deze case dient als inspiratie welke functionaliteiten er nodig zijn voor de door ons gestelde eisen. Een voorbeeldvideo van de werking kun je vinden op Brightspace in het mapje 'Praktijkopdracht'.
- Gebruik PhpStorm voor het aanmaken van een nieuw project waarin je deze opdracht maakt. Plaats dit project in de htdocs map van XAMPP, zodat je het via http://localhost/--projectnaam-- kunt benaderen.
- Kopieer in dit nieuwe project de map
assignment/webservice-start. Hierin staat de initiële code voor de webservice. Hernoem de map naarwebservice. - Kies een onderwerp voor jouw magazine en pas de informatie in
actions.phpaan naar de informatie over dat onderwerp. Zorg ervoor dat er minimaal 10 items in staan zodat je voldoende data hebt. - Test de JSON-output van jouw webservice in de browser op http://localhost/--projectnaam--/webservice om te zien of de output klopt. Gebruik eventueel een Chrome plugin voor een betere weergave van de JSON.
- (Optioneel) Publiceer je project op GitHub zodat je jouw eigen portfolio gelijk uitbreidt. Je kunt dit in PhpStorm doen
via
VCS -> Publish on GitHub
Belangrijk: Pas in opdracht 5 ga je gebruik maken van de webservice die je in opdracht 1 hebt gemaakt. Voor opdracht 2, 3 en 4 zul je dus nog handmatig teksten en afbeeldingen moeten toevoegen.
- Bepaal welke HTML/CSS-methode je voor je opdracht gaat gebruiken (zelf schrijven, Bulma of iets anders). Je kunt de kennis van Front-end Development en de Bulma Hackaton hiervoor gebruiken.
- Begin met het opmaken van de layout zoals jij wilt dat je werk eruit komt te zien. Zorg ervoor dat er minimaal 10 items zichtbaar zijn met informatie over jouw onderwerp.
- Maak je opdracht dynamisch door click events toe te voegen aan je items. Na een click op een item opent de detailweergave. Als je een ander item aanklikt, wordt de detailweergave (meer informatie over je item) vervangen door het andere aangeklikte item.
- Zorg ervoor dat de detailinformatie er ook goed uitziet in je layout met HTML/CSS. Dit kan zijn in een sidebar, onderaan of via een modal (popup).
- Ontwikkel de functionaliteit om items als favoriet toe te voegen. Dit doe je door de favorieten in je localstorage op te slaan. Voeg in het overzicht per item een "voeg toe als favoriet knop" toe om het aan deze functionaliteit via een click event werkend te maken.
- Zorg met CSS dat de favoriet een andere kleur heeft. Deze kleur moet ook na het herladen van de pagina blijven staan door je local storage te raadplegen.
- Zorg ervoor dat de items die favoriet zijn een knop krijgen om ze weer te verwijderen uit je favorieten. Uiteraard dient de kleur dan weer teruggezet te worden en de localstorage geüpdatet te worden.
- Koppel de ontwikkelde functionaliteit aan de webservice die in opdracht 1 is gemaakt, zodat zowel de initiële data als de detailweergave vanuit de PHP via AJAX worden ingeladen en met Javascript op je scherm komen.
- Belangrijk: Bij het inladen van je pagina staat er nog niets op je scherm, omdat AJAX nodig is om de data in te laden. Je eerder gemaakte HTML (vanuit opdracht 2) zul je nu dus vanuit Javascript moeten opbouwen.
- Zorg dat de linkjes van de plaatjes ook uit de webservice komen, hier moet je, als je dit nog niet had, de array uit de webservice dus voor uitbreiden.