Opdracht 18: PHP Boodschappenlijst
HTML MySql PHP

Versie: 1.0
Doel: Stap voor stap vertrouwd raken met de concepten van PHP, eerste stap maken naar het MVC ontwerppatroon: het opdelen van complexere toepassingen in drie delen: Model, presentatie (View) en applicatie logica (Controller).

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

Je gaat een webapplicatie in PHP maken waar je een overzicht van alle boodschappen kunt weergeven. Deze opdracht borduurt voort op opdracht 7, de boodschappenlijst opdracht in HTML. Heb je deze opdracht nog niet gemaakt, maak hem dan eerst zodat je een basis hebt om deze PHP opdracht te maken.

Deel 1

Voorwaarde: je hebt de Script boodschappenlijst opdracht gemaakt en je hebt alle video’s van Step 1 en 2 op https://laracasts.com/series/php-for-beginners bekeken.

  1. Maak een nieuwe map aan genaamd “Boodschappen opdracht”. Hier komen je projectbestanden in te staan die je gaat maken.
  2. Start een webserver met het commando “php -S localhost:8000” vanuit de terminal.
  3. Open je website (boodschappenlijst) en controleer of deze goed werkt.

Deel 2

Voorwaarde: je hebt alle video’s tot en met Step 7 bekeken

Herstructureer je huidige (HTML) code zodat opmaak en code beter gescheiden worden. Je boodschappen kunnen telkens wijzigen, maar de opmaak (tabel, kleuren, kopteksten) blijven hetzelfde.

  1. Maak een nieuwe file “index.php”. Zet alle dynamische gegevens, in dit geval alle boodschappen, als template variables in deze file. Maak gebruik van een associatief array om alle boodschappen (naam, aantal, stukprijs) in een template variable te zetten. Je HTML template geeft vervolgens deze boodschappen m.b.v. een loop weer.
  2. Maak een nieuwe file “index.view.php en zet hier alle HTML inhoud van je boodschappen opdracht  in: dit kan bijvoorbeeld een HTML table zijn die m.b.v. een (PHP foreach) loop alle boodschappen weergeeft. Zorg er voor dat de totaalprijs van alle boodschappen door php berekend wordt bij het laden van de pagina.

Deel 3

Voorwaarde: je hebt alle video’s tot en met Step 11 bekeken.

  1. In de vorige opdracht werden de boodschappen hard-coded in een file (index.php) gezet. Nu gaan we de boodschappen in een lokale database zetten zodat we in een latere opdracht eenvoudig wijzigingen kunnen doen aan de boodschappen. Maak een nieuwe database en maak een nieuwe table genaamd “groceries”. Voeg de volgende kolommen toe: 
  • name
  • number
  • price
  1. Bedenk zelf welke data types deze kolommen moeten krijgen. Voeg nu ten minste drie verschillende boodschappen in zodat je in de volgende opdrachten goed kunt testen. Voer voor iedere boodschap een aantal in van 1 stuks of meer in en een prijs van meer dan 0,00 euro.

Deel 4

Voorwaarde: je hebt alle video’s tot en met Step 13 bekeken

  1. In deel 3 heb je een database gemaakt met boodschappen die hier in bewaard worden. Pas nu je PHP file aan zodat de boodschappen niet meer uit een associatief array gehaald worden, maar vanuit de database. Gebruik PDO en classes waar mogelijk: zo kun je alvast een class met de naam “Grocery” maken en deze van de juiste attributes (name, number en price) voorzien. Bij het ophalen van de boodschappen uit je database worden deze attributes gevuld.

Maak ook gebruik van zelf geschreven functies. Deze functies zet je in een aparte file “functions.php” en include je vanuit je index.php file waar je deze functies gebruikt. Maak o.a. de volgende functies:

  • een functie voor het initialiseren van je database verbinding
  • een functie “fetchAllGroceries” die alle boodschappen uit de database ophaalt
  • evt. een functie “dd” (dump and die) die de waarde van een variable op het scherm toont en de programma uitvoer stopt (exit)

Deel 5

Voorwaarde: je hebt alle video’s tot en met Step 14 bekeken

In de vorige opdracht heb je het verbinding maken met de database en het opvragen van boodschappen via zelf geschreven functies gedaan. In deze opdracht dien je je code verder te herstructureren (herschrijven, aanpassen) zodat je code beter te hergebruiken en overzichtelijker wordt:

  1. Maak een map genaamd “database” aan.
  2. Voeg aan deze nieuwe map een nieuwe class (die je als nieuw bestand toevoegt) toe genaamd “Connection.php”.
  3. Voeg code aan deze nieuwe Connection class toe waarmee een verbinding met je database gemaakt kan worden. Deze code ga je voortaan gebruiken in je project i.p.v. de functie die je in de vorige opdracht schreef in functions.php. Het voordeel van de nieuwe opzet is dat alle database-connectie gerelateerde functionaliteit geordend is in 1 class “Connection”.
  4. Voeg tevens een nieuwe class “QueryBuilder.php” toe aan de map “database”.
  5. Voeg code aan de nieuwe QueryBuilder class toe waarmee je alle boodschappen kunt opvragen. Maak je code zo generiek mogelijk, dus probeer de functie zo op te zetten dat hij voor iedere willekeurige table(naam) alle rijen op kan halen. Zo kun je op een later moment naast alle boodschappen ook andere gegevens opvragen zoals bijvoorbeeld alle producten of gebruikers.
  6. Voeg nu een nieuwe file “bootstrap.php” toe aan je project (in de hoofdmap) waar je alle code voor het opzetten van een database verbinding en het initialiseren van een QueryBuilder in zet. Deze bootstrap file kun je vervolgens in je index.php file opnemen.

Deel 6

Voorwaarde: je hebt alle video’s tot en met Step 15 bekeken

Misschien heb je nu nog je database credentials (username, password) in je Connection.php class staan. Het is veiliger en flexibeler om deze configuratiegegevens in een aparte file genaamd “config.php” te zetten. Zo kan een andere gebruiker die jouw code wil hergebruiken makkelijk deze gegevens aanpassen voor zijn systeem.

  1. Voeg (in de hoofdmap) een file “config.php” toe met alle database verbindingsgegevens. Pas je code aan zodat deze gegevens voortaan gebruikt worden.

Deel 7

Voorwaarde: je hebt alle video’s tot en met Step 16 bekeken

Tot nu toe werkten we alleen vanuit het /index.php bestand. Vanaf nu gaan we een aparte GroceriesController class maken. Stel dat je op een later moment code voor iets anders (bijv. users) wilt maken, dan maak je hier weer een aparte controller (bijv. UsersController) voor. Op deze manier blijft je code overzichtelijk.

We willen een pagina om een nieuwe boodschap aan de boodschappenlijst toe te kunnen voegen: hier wordt een invoerformulier getoond met ten minste de velden naam, aantal en prijs.

  1. Maak eerst een map “views” in je hoofdmap aan. Hier zet je index.view.php in samen met een nieuwe file “create.view.php”.  Voeg ten minste een titel aan deze nieuwe pagina toe evenals een formulier met bovengenoemde invoervelden en submit button. 
  2. Voeg daarna ook een menu met hyperlinks toe aan zowel de boodschappen overzichtspagina als de boodschappen toevoegen pagina zodat bezoekers tussen beide pagina’s kunnen navigeren d.m.v. dit menu.
  3. Maak in je hoofdmap ook een nieuwe map “controllers” aan. Voeg een GroceriesController.php file toe aan de controllers map. Op dit moment staat de code die alle boodschappen opvraagt in de file index.php in de hoofdmap. Verplaats deze code naar controllers/CroceriesController.php. Op deze manier houd je de code van je webapplicatie index.php pagina en de boodschappen overzichtspagina gescheiden.
  4. Maak nu een nieuwe file “routes.php” aan in de hoofdmap waar je de koppeling tussen URL en Controller vastlegt. In dit geval voeg je ten minste twee routes toe:
    • De URL ‘/groceries’ (root van je webapplicatie) verwijst naar [email protected] method en deze index method laadt de view “index.view.php”.
    • De URL ‘groceries/create’ verwijst naar de [email protected] method en deze create method laadt de view “create.view.php”.
  5. Voeg vervolgens een Router.php class toe (zet deze bij voorkeur in een aparte map, bijvoorbeeld genaamd “core”, zie ook Laracast video voor een voorbeeld).
  6. Pas nu je index.php in de hoofdmap aan, zodat deze gebruikmaakt van de nieuwe routes en Router class. Test vervolgens alle routes.

Deel 8

Voorwaarde: je hebt alle video’s tot en met Step 17 bekeken

Breng (mits je dit niet reeds hebt gedaan) meer structuur aan in je templates: je hebt o.a. een menu met hyperlinks gemaakt naar de twee pagina’s in je webapplicatie. Ook heb je een <head> sectie in je HTML (waar je een title, css etc. in opneemt) en misschien een footer die zich op beide pagina’s herhalen. Door deze repeterende code af te splitsen in zogenaamde “partials” hoef je voortaan op slechts een plek code te wijzigen, i.p.v. op iedere pagina die deze code gebruikt.

  1. maak een map “/views/partials” aan
  2. maak in deze map een file “nav.php” aan waar je het menu met hyperlinks in zet
  3. maak in deze map een file “header.php” aan waar je het bovenste, repeterende deel van je HTML pagina in zet.
  4. (optioneel) maak in deze map een file “footer.php” aan waar je je footer in zet

Deel 9

Voorwaarde: je hebt alle video’s tot en met Step 19 bekeken

Tot nu toe heb je met routes op URL-basis gewerkt. Je werkte in je applicatie alleen nog maar met HTTP GET requests, maar het HTTP protocol kent ook andere soorten requests: o.a. POST, PUT, PATCH en DELETE. De tot nu toe gebruikte GET requests gebruik je als je informatie op wilt vragen. Zodra je informatie wilt opslaan, bijvoorbeeld een nieuwe boodschap, dan gebruik je een type POST request.

  1. Pas je router class aan zodat deze uitgebreid wordt met een get en post functie (method). 
  2. Pas ook alle andere methods waar nodig aan in deze class. 
  3. Voeg aan je routes.php bestand nu alle methods toe (in dit geval is elke route nog GET). 
  4. Test hierna je webapplicatie en zorg ervoor dat de router na deze update nog steeds goed werkt.

Deel 10

Voorwaarde: je hebt alle video’s tot en met Step 20 bekeken

  1. Breid je code uit zodat er een nieuwe boodschap aan de database toegevoegd kan worden. Zodra de bezoeker een nieuwe boodschap op de boodschappen toevoegen pagina die je in Opdracht 7 maakte invoert en op de submit knop drukt, moeten de ingevoerde gegevens ge-POST worden naar de [email protected] functie. Als het goed is heb je al de juiste route in de file routes.php hiervoor gemaakt.

Tip: test eerst je formulier en controller door in je controller een dd() of var_dump() te doen van het $_POST array om te zien wat de controller aan gegevens ontvangt van de gebruiker. Breidt vervolgens je QueryBuilder class uit met een insert() functie waarmee je nieuwe data in de database kunt opslaan. (een nieuwe boodschap in dit geval). Maak deze functie zo dynamisch mogelijk, dus dat je voor iedere tabel die je opgeeft en iedere kolom die je opgeeft gegevens in je database kunt invoeren. Op deze manier kun je deze functie voor je hele project hergebruiken.

  1. Zorg er voor dat na het succesvol invoeren van een nieuwe boodschap de bezoeker automatisch naar de boodschappen overzichtpagina doorverwezen wordt.

Vervolgopdrachten

Deze tussentijdse opdracht wordt nog verder uitgebreid met nieuwe opdrachten die gaan over Steps 18 t/m 25 op Laracast. Informeer bij je technisch begeleider of deze al beschikbaar zijn.