Opdracht 19: Laravel boodschappenlijst
HTMLLaravelPHP

Versie: 1.0
Doel: Bekend raken met het Laravel PHP framework, oefenen met een MVC framework, leren wat routes, views, controllers, models en migrations zijn.

Deze opdracht is gemaakt om tijdens het studeren van de Laravel Laracast video’s tussentijds je opgedane kennis in de praktijk te brengen en zelf te oefenen met programmeren. Je kunt zelf kiezen wanneer je de opdrachten doet: iedere keer als je een episode op Laracast hebt bekeken maak je de bijbehorende opdrachten, of je bekijkt meerdere episodes achter elkaar en doet vervolgens meerdere opdrachten achter elkaar. Bij vragen kun je altijd de hulp van je technisch begeleider inschakelen.

Je hebt misschien al eerder de boodschappenlijst in HTML en / of JavaScript gemaakt. Je kunt die kennis voor deze opdracht gebruiken, maar het is niet per se een voorwaarde om deze opdracht te kunnen maken.

Het eindresultaat is een webapplicatie in Laravel waar je boodschappen in kunt voeren, bewerken, verwijderen en waar je een overzicht van alle ingevoerde boodschappen kunt bekijken. Doel is om stap voor stap vertrouwd te raken met de concepten van het Laravel framework.

Deel 1

Voorwaarde: je hebt alle video’s uit section 1 bekeken (Prerequisites) en je hebt Laravel m.b.v. composer geïnstalleerd.
  1. maak een nieuw Laravel project aan genaamd Boodschappenopdracht
  2. start een webserver met het commando php artisan serve vanuit je projectmap en bezoek je website via je webbrowser

Deel 2

Voorwaarde: je hebt alle video’s uit section 2 bekeken (Routing)

We willen de volgende pagina’s aan onze applicatie toevoegen:

  • een pagina om een overzicht van alle reeds ingevoerde boodschappen te bekijken
  • een pagina om een nieuwe boodschap aan de bestaande lijst toe te voegen
  • een pagina om een boodschap te wijzigen, bijvoorbeeld het aantal of product
  1. In deze opdracht dien je alle benodigde routes te maken. Dit doe je in het bestand routes/web.php. Open dit bestand en voeg onderstaande routes toe:
VerbPathController ActionRoute Name
GET/groceriesindexgroceries.index
GET/groceries/createcreategroceries.create
POST/groceriesstoregroceries.store
GET/groceries/{grocery}/editeditgroceries.edit
PUT/PATCH/groceries/{grocery}updategroceries.update
DELETE/groceries/{grocery}destroygroceries.destroy

Een voorbeeld van hoe een route er in web.php uit kan zien is als volgt, in dit geval is dit een route voor de index action:

Route::get(‘/groceries’, ‘[email protected]’)->name(‘groceries.index’);

  1. Voeg evt. ook een redirect route toe die een bezoeker voor de url / naar /groceries redirect. (voor meer informatie over Redirect Routes zie: https://laravel.com/docs/5.8/routing#redirect-routes)

Voor meer informatie over routing zie: https://laravel.com/docs/master/routing

  1. Test nu je applicatie door naar / of /groceries te navigeren. Als het goed is krijg je een foutmelding te zien omdat we nog een Controller en Views moeten maken. Dit gaan we in de volgende opdrachten doen.

Deel 3

Voorwaarde: je hebt alle video’s uit section 2 bekeken (routing)

We gaan nu een controller maken waar de routes uit de vorige opdracht naartoe verwijzen. Noem deze controller GroceriesController. Voeg onderstaande functies toe aan deze nieuwe controller:

  • index()
  • create()
  • store()
  • edit()
  • update()
  • destroy()

Voor meer informatie over hoe je een controller kunt maken zie: https://laravel.com/docs/master/controllers

Heb je geen zin om alle benodigde controller actions zelf in te voeren dan kun je gebruik maken van Resource Controllers. Zie voor meer informatie: https://laravel.com/docs/master/controllers#resource-controllers

  1. Om te testen of de koppeling tussen route en controller werkt, kun je nu aan de index functie de volgende regel toevoegen:

return “Index page”;

Als je nu de url / opent zie je als het goed is de tekst Index page verschijnen.

Deel 4

Voorwaarde: je hebt alle video’s uit section 3 bekeken (Database Access: Tinker, Models & Migrations)

  1. Het is de bedoeling dat je straks boodschappen in kunt voeren. Deze boodschappen moeten in een database bewaard worden zodat we ze bij een volgend bezoek aan de applicatie opnieuw kunnen inzien en bewerken. Maak de benodigde migration genaamd groceries en voer hem uit.

Meer informatie: https://laravel.com/docs/master/migrations

  1. Om gegevens op te kunnen vragen, te bewerken en verwijderen hebben we nog een Model nodig. Maak een Grocery model aan.

We hebben nu een database table om de boodschappen in op te slaan. Nu gaan we enkele boodschappen invoeren in de nieuwe tabel zodat we deze in een volgende opdracht kunnen laten zien in de webbrowser. We gaan in een volgende opdracht ook een aparte boodschappen invoerpagina maken, maar om snel testgegevens in te kunnen voeren zonder eerst een aparte boodschappen invoerpagina te hoeven maken voeren we testgegevens via Tinker in.

  1. Start tinker vanuit een terminal.
  2. Voer ten minste drie nieuwe boodschappen in de database in.
  3. Voer een Eloquent query uit om alle ingevoerde boodschappen op te vragen en druk deze af.

Deel 5

Voorwaarde: je hebt alle video’s uit section 4 bekeken (Views)

  1. We gaan nu de Groceries controller uitbreiden. Maak de index controller functie leeg en hergebruik de Eloquent query uit de vorige opdracht om alle boodschappen op te vragen uit de database. Druk ze daarna af op het scherm. Dit kun je doen met de dd() helper functie.

Als het goed is zie je nu bij het verversen van je webapplicatie (op http://localhost) alle ingevoerde boodschappen, maar niet in een gebruiksvriendelijk formaat: je ziet als het goed is een Collection object. Dit is een object dat al onze boodschappen bevat.

  1. Klik op het pijltje achter de items property om alle items in de collectie te bekijken. Klik vervolgens op het pijltje achter attributes om alle waarden van het item te bekijken.

Omdat de output van de dd() helper functie niet goed leesbaar voor de bezoeker is, gaan we een Blade template maken waar we ieder item uit de collectie op de juiste manier m.b.v. HTML code weer gaan geven. Je gebruikt Blade templates om template variabelen die je vanuit een Controller toekent weer te geven. Zo scheid je logica en opmaak van elkaar.

  1. Maak een nieuwe map resources/views/groceries en voeg de volgende bestanden toe ter voorbereiding op volgende opdrachten:
    • index.blade.php
    • create.blade.php
    • edit.blade.php
  2. Open nu het bestand index.blade.php en voer een standaard HTML5 indeling in (met behulp van je IDE, bijv. Visual Studio Code).
  3. Pas vervolgens je code in de index method van je GroceriesController aan: verwijder de dd() functie en voeg een regel toe die de index.blade.php view returned met de opgevraagde groceries uit opdracht 12.
Voor meer informatie over hoe je een view returned en hoe je template variables meegeeft aan deze view zie: https://laravel.com/docs/master/views
  1. Test nu of je bij het bezoeken van je webapplicatie deze nieuwe lege HTML pagina ziet.
  2. Nu willen we de gegevens uit de template variabele in de Blade template weergeven. Breid je template uit met een loop die ieder item (boodschap) uit de template variabele op het scherm afdrukt. Je kunt bijvoorbeeld je boodschappen in een HTML tabel zetten. Zorg er ook voor dat er een totaalprijs van alle boodschappen weergegeven wordt.
  3. Maak een nieuwe map resources/views/layouts aan en voeg aan deze map het bestand app.blade.php toe. Maak hiervan de layout van je webapplicatie: voeg de volgende zaken toe:
    • een basis HTML5 document
    • een head sectie
    • een body sectie
  1. Gebruik de Blade yield, section en extends directives om de index, create en edit blade templates op te nemen in de zojuist gemaakte layout. Voeg aan de layout alvast de volgende hyperlinks toe:
    • een link naar de homepage (het overzicht met boodschappen)
    • een link naar de nog te maken pagina om een nieuw product toe te voegen
  2. Als je in opdracht 3 ook een name aan iedere route hebt gegeven, dan kun je m.b.v. de route() helper functie een URL door Laravel genereren door de name van de route op te geven. Het voordeel hiervan is dat als je route in de toekomst verandert je alleen je route in routes/web.php hoeft te veranderen, dus niet iedere hyperlink afzonderlijk in je blade templates.

Deel 6

Voorwaarde: je hebt alle video’s uit section 5 bekeken (Forms)

  1. We gaan nu een pagina maken waar een nieuwe boodschap ingevoerd kan worden. Voeg hiertoe een functie create() toe aan de GroceriesController en zorg ervoor dat deze functie de create.blade.php view returned.
  2. Vervolgens voeg je een standaard HTML5 indeling toe met een HTML formulier. Aan dit formulier voeg je voor ieder in te voeren veld (naam, aantal, prijs in dit geval) input elementen toe voor de nieuwe boodschap.
  3. Voeg ook een knop toe om de invoer te bevestigen. Gebruik de juiste form method en action (url) om de gebruikersinvoer te submitten naar de juiste route.

Tip: in Visual Studio Code kun je:

  • door html:5 + enter in te voeren een HTML5 document automatisch genereren
  • door form:post / form:get een HTML form met POST / GET action automatisch genereren
  1. Voeg onderstaande code toe aan de create functie in de GroceriesController om je nieuwe pagina te testen:

return “You called the store method on the GroceriesController”;

Als het goed is krijg je bovenstaande tekst te zien in je browser zodra je het formulier op de boodschappen toevoegen pagina verzendt.

  1. Werk de create() functie bij zodat de gegevens die vanuit het formulier op de invoerpagina gepost worden in de database opgeslagen worden.

Voor meer informatie over hoe je gegevens uit een request kunt opvragen zie: https://laravel.com/docs/master/requests

Voor meer informatie over hoe je nieuwe gegevens in een database opslaat zie: https://laravel.com/docs/master/eloquent#inserts

  1. Voer als test een nieuwe boodschap in en controleer je database of de nieuwe boodschap is ingevoerd.
  2. Zorg er voor dat na het invoeren van de nieuwe boodschap de gebruiker naar de boodschappen overzichtspagina geleid wordt.

Deel 7

Voorwaarde: je hebt alle video’s uit section 5 bekeken (Forms)

Nu ga je de edit en delete acties toevoegen.

  1. Werk eerst je blade template voor de indexpagina bij zodat er twee kolommen aan de <table>* toegevoegd worden:
    • een kolom met hyperlinks of buttons naar de boodschap edit pagina
    • een kolom met hyperlinks of buttons naar de boodschap delete actie

* Aangenomen dat je een table hebt gebruikt voor de weergave van de boodschappenlijst.

  1. Zorg er voor dat de id van iedere boodschap in de link opgenomen wordt.
  2. Voeg nu code aan de edit method van de GroceriesController toe en zorg ervoor dat deze functie de edit.blade.php view laadt en de juiste data aan de view meegeeft. De pagina moet een vooraf ingevuld formulier weergeven die de bezoeker kan wijzigen en bijwerken. Er dient dus ook een knop bijwerken te komen.

Tip: je kunt een groot deel van de code van create.blade.php overnemen voor edit.blade.php.

  1. Test je code door een bestaande boodschap te wijzigen via de edit pagina.
  2. Voeg nu code aan de destroy() method van de GroceriesController toe: deze code dient de desbetreffende boodschap te verwijderen uit de database. Na deze actie dient opnieuw de boodschappenlijst overzichtspagina geladen te worden.

Deel 8

Voorwaarde: je hebt alle video’s uit section 5 bekeken (Forms)

In deze opdracht ga je server-side validatie toevoegen: je dient altijd de ingevoerde gegevens die gebruikers naar jouw applicatie toesturen te controleren alvorens je deze bijvoorbeeld opslaat in de database. Laravel biedt uitgebreide mogelijkheden om gebruikersinvoer te valideren.

  1. Breid de store() en update() functies in de GroceriesController uit met validatie zodat:
    • een naam verplicht is en uit ten minste twee karakters bestaat
    • een aantal verplicht is en uit een geheel en positief getal bestaat
    • een prijs verplicht is en uit een getal bestaat

Deel 9

Voorwaarde: je hebt alle video’s uit section 6 bekeken (Controller Techniques)

  1. Werk nu je GroceriesController functies bij waar je gebruik kunt maken van Route Model Binding. Hierdoor spaar je een Eloquent query uit en maak je gebruik van de kracht van het Laravel framework.