Laravel 2022 - L2 (orgineel/Bootstrap) Introductie In Laravel Level 2 ga je jouw webshop verder uitbreiden. Zo wil je bijvoorbeeld producten tonen in jouw webshop door ze uit de database op te halen. Daarnaast geven wij jou een introductie van het CSS framework Bootstrap en maken we meerdere pagina's door views en controllers aan te maken en de routes goed in te stellen. Hieronder is er een lijstje wat er in Laravel level 2 wordt behandeld: Meer pagina's (views/routings/controllers toevoegen) Introductie met Bootstrap Een losse pagina maken waar je al jouw producten laat zien Bootstrap Installatie Inleiding Voor de vormgeving en styling gaan we Bootstrap gebruiken. Bootstrap is een CSS (en Javascript) framework. Je kunt het zien als een groot aantal voorgedefinieerde styles die je kan gebruiken. Op die manier kun je snel 'even' je site oppimpen. Wat is het en hoe werkt het? Kijk maar eens op https://getbootstrap.com/docs/5.0/examples/cheatsheet/ Daar zie je allemaal user interface-elementen die met Bootstrap zijn vormgegeven. Je herkent vast wel wat van Yii want daar hebben we ook gebruik gemaakt van Bootstrap. Alle uitgebreide informatie over Bootstrap vind je op: https://getbootstrap.com/docs/5.2/getting-started/introduction/ Installatie Installatie kan op veel manieren. De eenvoudigste manier is om de volgende regel in de van je pagina te plaatsen: Hiermee laadt je de (hele grote) CSS style sheet. Installatie via download Een iets beter alternatief is om de stylesheet in je project te plaatsen. Dan zijn we niet afhankelijk van een andere server. Download daarvoor de "Compiled CSS and JS" files. Pak de zip file uit en plaats de folder die in de zip file staat in jouw Laravel project in de public folder. Je krijgt dus dit: De folder in de zip file heet zoiets als "bootstrap-5.2.2-dist". Deze folder kopieer je en hernoem je daarna zodat de naam van de folder "bootstrap" wordt. In je header kun je nu de volgende regel plaatsen. Dit zorgt ervoor dat de gedownloade versie van Bootstrap wordt geladen. Opdracht Installeer Bootstrap in je laravel project via de download-methode. Plaats vervolgens deze HTML code in je van de product-read.blade.php file. Plaats de code vóór de @foreach. Dus regel 2 t/m10 uit de volgende code worden op de juiste plaats in prodcut-read.blade.php geplaatst. .... @foreach ($products as $product) .... Laadt je productpagina opnieuw en je zult een menu-bar zien, die er zo uit ziet: Inleveren Screenshot van je product pagina mét Bootstrap menu -- Hoe werkt Bootstrap? Zoals in de vorige pagina is verteld kan je Bootstrap gebruiken om makkelijk jouw HTML op te maken zonder al te veel te CSS'en. Bootstrap maakt gebruik van de attribuut class="" . Deze attribuut gebruik je ook weleens om opmaak te doen in CSS door een eigen class naam te geven. In het geval van Bootstrap hebben ze hun eigen class namen bedacht. Zo kan je bijvoorbeeld text-success gebruiken om een groene tekst te maken. Opdracht .1 Open een view (een .blade.php file) en stop dit stukje code in: Maak deze woord ROOD! Plaats in de class attribuut de classname van Bootstrap die de text rood maakt. Weet je die niet? Zie Colors · Bootstrap v5.2 (getbootstrap.com) Jouw text is nu rood! Je kan ook meerdere classnamen van Bootstrap tegelijk gebruiken. Zo kan je bijvoorbeeld ook een achtergrondkleur toevoegen met bg- bootstrapkleur . Om te weten welke bootstrapkleuren er zijn kan je terug kijken naar de documentatie. Opdracht .2 Open de file van de vorige opdracht. Voeg een Bootstrap lichtgrijze achtergrondkleur (kleur light) toe aan de . Jouw span heeft nu een rode text met een grijze achtergrondkleur. Buttons Bootstrap heeft ook voorgekauwde opmaak voor Buttons. Zie Buttons · Bootstrap v5.2 (getbootstrap.com) Zoals je ziet valt het op dat ze dezelfde classnamen gebruiken om kleuren van een element aan te geven. Deze kleuren worden standaard door bootstrap ingesteld en kan dus ook voor andere compententen gebruikt worden. Opdracht .3 Open de file van de vorige opdracht Maak een button element aan met een tekst "Klik hier" Voeg een dark button class toe aan de button. Zorg ervoor dat je checkt welke classnamen je allemaal moet toevoegen om het te laten werken! Buttons · Bootstrap v5.2 (getbootstrap.com) Je hebt nu een button met een opmaak van Bootstrap gebruikt! Wat lever je in? Een screenshot van jouw blade.php file waarin je hebt gewerkt met Bootstrap Andere componenten Zo zijn er veel meer andere elementen die je kan opmaken. Een button met een Bootstrap opmaak is er een van. Als je meer wil zien wat Bootstrap kan aanbieden, dan raden we je ten zeerste aan om de documentatie van Bootstrap te gaan kijken: Get started with Bootstrap · Bootstrap v5.2 (getbootstrap.com) Wat heb je geleerd? Je hebt geleerd hoe Bootstrap in elkaar zit Je hebt geleerd hoe je tekst- en achtergrondkleuren gebruikt. Je hebt geleerd welke standaardkleuren Bootstrap heeft Je hebt geleerd hoe je een button maakt met een Bootstrap thema. Bootstrap Grid systeem Bootstrap maakt niet alleen jouw opmaak makkelijker, maar ook jouw structuur! Bootstrap heeft het ook makkelijker gemaakt om flexbox te gebruiken. Met flexbox kan je jouw elementen verdelen in verschillende posities. Bootstrap maakt ook gebruik van flexbox, maar nu is het simpel voor je gemaakt en kan je net als de opmaak in classnamen aanroepen. De layout van Bootstrap In Bootstrap heeft het gridysteem een standaard layout. Wij gaan per onderdeel uitleggen hoe dat in elkaar zit: Container De container is de buitenste laag. Ze zijn verantwoordelijk om al jouw content responsive te maken. Je hebt twee type containers die je kan gebruiken om jouw pagina responsvie te maken: .container : past de max-width aan op basis van jouw schermresolutie. Zie Containers · Bootstrap v5.0 (getbootstrap.com) welke resoluties dat zijn. .container-fluid : heeft 100% breedte bij alle resoluties De meeste sites gebruiken .container, omdat het aantrekkelijker maakt voor de gebruiker om jouw content te lezen. Zie hier een voorbeeld van zalando.nl die een .container design gebruikt: Zoals je ziet laat Zalando.nl altijd ruimte vrij aan de linker en rechter kant. Mensen vinden het gemakkelijker om te lezen als alle content compact bij elkaar zit. Dat is ook makkelijker voor de gebruiker om te klikken. Dan hoeven zie niet over de hele pagina te klikken. Rows en Columns In de container valt het ook op dat Zalando meerdere rows heeft. Binnen deze rows heeft het ook kolommen (columns). Zie hier het voorbeeld: Je ziet in een row twee kolommen: col-8 en col-4 . Dit zijn de kolommen (columns). In totaal passen er 12 kolommen in een row. Deze kolommen gebruik jouw ruimte in te delen. Daarom zie je bij de eerste row een col-8. Dat is de text. En bij col-4 zie je een plaatje. Dus de verhouding is dan 67% en 33%. Als je het nog een beetje ingewikkeld vindt, dan kan je nog hiernaar kijken: Bootstrap 5 grid system - examples and tutorial (mdbootstrap.com) Opdracht: Spelen met Bootstrap Nu is het tijd om aan de slag te gaan hoe Bootstrap werkt: Standaard structuur van Bootstrap Stappenplan: Maak een container Maak in de container een row Maak in de row twee kolommen met de verhouding 25% en 75% In de 25% moet een rode achtergrond van Bootstrap staan In de 75% zet je een titel en een paragraaf met text Wat lever je in? Een screenshot van jouw .blade.php file waarin je gewerkt hebt Een screenshot van jouw browser met de resultaten van de file. Navigatie maken met Bootstrap Om een goede start te maken met Bootstrap, bouwen we eerst een navigatiebar in Bootstrap. Ga naar: Navbar · Bootstrap v5.2 (getbootstrap.com) Scroll naar 'Supported Content'. Daar zie je verschillende classnames die je kan gebruiken voor de navigatie. Meest gebruikte navigation classes voor een Bootstrap navigatie .navbar-brand gebruik je voor je logo of bedrijfsnaam. .navbar-nav voor een volledige hoogte van de navigatie. Daarnaast maak je de navigatie responsive (voor mobiel dus) en krijg je een wafel (oftewel een toggler) te zien als je op mobiel ziet. .navbar-toggler gebruikt de toggle functie van bootstrap. Die kan je gebruiken om bijvoorbeeld een toggler toe te voegen aan je navigatie. .navbar-text om verticaal gecentreerde text toe te voegen. Zo ziet een navigatie eruit in Bootsatrap: Dit is de code van de navigatie. En nu denk je van: zo veel code?! Maar als we alleen de belangrijkste stukjes code meenemen dan valt het wel mee. Opdracht: Navigatie Kopieer de code van de Bootstrap Navigatie. Zoals op dat plaatje te zien, heb je een search bar met een search knopje. Dat hebben we niet nodig. Dus verwijder dat stukje uit de code. De dropdown hebben we ook niet nodig. Verwijder dat stukje code. De disabled link hebben we ook niet nodig. Ook dat stukje code verwijderen. Zoals je ziet is de code nu veel kleiner geworden. Nu gaan we kijken wat er allemaal in zit: Bedrijfsnaam/logo is de plek waar jouw (bedrijfs)logo moet staan. Je ziet in de class attribuut class="navbar-brand" . Deze classnaam is van Bootstrap. Deze class zorgt ervoor dat de opmaak van jouw bedrijfsnaam of logo goed in de navigatie past. Navbar toggler Dit stukje code is alleen op het scherm te zien als je op mobiel zit. Op de mobiel zie je dan een wafeltje op het scherm. Als je erop klikt zie je jouw navigatie items. De in de