Laravel 5.8 – From The Ground Up - Laravel 5.8 Tutorial From Scratch – e06 – Blade Templating Basics

Education, Programming

Laravel 5.8 – From The Ground Up

52 Lessons

Laravel 5.8 Tutorial From Scratch – e06 – Blade Templating Basics

so up next in our path to learning level we're gonna start talking about blade we already talked about blade a little tiny bit in a couple of episodes but are

gonna dive deeper now into blade blade is the rendering engine that laravel uses to parse HTML and it is very powerful so using blade we're gonna work on the

front end of our project so the first thing that I want to do is I want to be able to navigate between my pages so let's start with the customers that blade that PHP file I'm just gonna add a

ul list and it's gonna contain some lines let's say 4 and each of them is gonna have an anchor tag okay so the first thing is gonna be our home page and we could say home about us the third

page is going to be the contact page and that's gonna be contact us again obviously dummy projects here just for demonstrations the last one is gonna be customers and so now we have these links

so if I click on home of course I end up in home about us and about us and contact us looks like Contact Us is not working let's check what happened let's visit the web that PHP file ah there we

go in a previous lesson I had changed this from contact to contact – us let's go ahead and revert back to just contact and let's refresh there we go and

customers of course where our customers so now that we have this very basic navigation of course now we need to put it in every single page so what do you do

you'd have to copy it and then go to each of these pages and paste that it but I think you know that's probably not the route that we're going to do instead let's create what is known as a layout

file so a layout file is what's going to contain all of the data that is shared between many different views you can have as many layout files as your application requires but typically a

pages really only have one for the consumer facing side and maybe another layout file if you have an internal back-end system that you can log into so let's make one of those now I'm going to

create a new and I'm gonna call it lay out that blade that PHP for this demonstration I do want to use bootstrap so let's bring that in right now through a CDN I'm

gonna copy the bootstrap CDN give me a couple of minutes here to get this HTML ready all right so let me just add that into my head so we have that let me move this to the bottom there we go so we

have our script tag there and we have our CDN right here so now I can label this as container and as you can tell we're pulling in bootstrap awesome all right so the first thing I want to do is

let's find the example navigation bar here and here is the basic navigation that we're gonna use so I'm gonna copy this and I'm just simply gonna paste it right here right after body but now of

course I need to change these links so the first one is gonna be home let's get rid of this active so we'll say home and home is gonna go to just slash the second one is gonna be about us that's

gonna go to about the third link is gonna be contact contact us and then we're gonna need one more and we're gonna call this one customers and of course customers will just say customer

lists okay we can get rid of this disabled one and there we go so now we have our layout file so this is the file that we're gonna share along with all of the other views but we need

to tell blade where exactly do we want to inject each individual file and that is done with the yield command so at yield and we're gonna say content so that's all we're doing what we're doing

is we're telling blade go ahead and yield a space here for anything that is inside one of my child files and just drop it in right in this section so in our customers we can get rid of this

temporary navigation that we put here and what we're going to add is at the top of the file at extends and what are we extending well we are extending the layout file and then this whole thing

I'm going to cut it and we're gonna say this section is content well paste that back in and we'll say and section so that's how blade works so in this layout file again

this is all of the shared HTML that you're gonna have between all of your files and you're only going to set this up once obviously you can add as many sections as you need you may want to add

some stuff to the head you may want to add some stuff to the body and maybe some stuff for scripts and then in your actual blade file you're gonna say it extends that layout and this layout

comes from the file name of this this layout that blade that pH P equals layout if this was called something else like app that blade that PHP then of course here it would just say app and

then you start naming your section right now we only have the content section so we only have one section but if you had several sections of course you could start a whole new section after this and

call it your other section name here okay obviously we don't have one so let's get rid of that let's refresh the browser and see what we get and there we are so we are now leveraging bootstrap

and we have the very basic navigation bar up here and now we have our customers list let's keep refactoring through all of our views to add this in so we're going

to copy this top one let's go to the about page and then let's add this to the top let's indent this and and section okay let's visit the about Us page now nice

okay now let's do the contact page same thing I'm gonna go to the top paste that in make sure we indent this and then at the end and section hit save alright let's go to contact us there we are and

now let's do the final one the home so obviously this home one is still the laravel one let's go ahead and make our own so let's go back to my routes file so web that PHP and what we're gonna

return here this just may be a home view which doesn't exist yet so let's create it now I'm gonna duplicate this contact view and let's just call it home and then inside here we'll say welcome

five point eight okay let's go back here hit refresh and there we are so we have a fully functional website we have our home page about Us page contact us and customer list and we're

leveraging blade to do so let's recap this whole episode so we created this layout file this layout file will contain all of the HTML that is shared amongst all of your views and again you

can create as many of these as you want we just have one for now we're bringing in bootstrap by calling the CDN we copied that from their website and then we have a very basic navigation bar

right here which we also copied from the documentation and then this is the section that we're interested in we've created this container and inside the container we are yielding a section

called content so this is the section that we are targeting from each of our views now if we look at our about view for example we are extending layout and this layout

name is coming from the layout that blade the PHP file that we created and then we're starting a section and the section that we are targeting is content again content is this section that we

are yielding right here so all we're doing is we're changing this line for whatever we put in between this section and the end section and so in this case we're inserting an h1 with about us and

just a simple paragraph so that's how blade templating works now there's a lot more to blade but this alone will get you started go ahead and refactor your project that you're working on to add a

layout file and when you're ready let's move on to something else

Laravel’s templating engine is called Blade. Blade is a powerful and easy to use templating engine that helps us deliver our html content to the browser with ease. Let’s leverage Blade and a layout file to make our front-end have a navigation.

For the best experience, follow along in our interactive school at https://www.coderstape.com

Resources
Course Source Code
https://github.com/coderstape/laravel-58-from-scratch

Hit us up on Twitter with any questions or comments @codertape (https://twitter.com/CodersTape)

About This Course

Ready to get started on your path to Laravel Artisan? In this series, we are breaking down all of the basics of Laravel to get you comfortable using the world’s most popular PHP framework. Let’s get started!

    add to database laravel admin laravel artisan Artisan Command artisan commend create artisan console artisan laravel command authentication in laravel belongsto belongsto laravel example coding tutorials create artisan command create command artisan create new command artisan Create your own crud laravel crud laravel tutorial crud resource laravel crud with file upload custom artisan commands custom artisan commands laravel custom laravel database configuration laravel database relationship digital ocean dotenv eager loading eager loading in laravel eager loading vs lazy loading laravel eloquent eloquent accessors eloquent mutators eloquent orm feature testing laravel fetching data in laravel filesystem laravel form requests full stack vue gate and policy laravel google optimize hasmany hasmany laravel hasmany laravel example hasmany relationship in laravel hasone hasone relationship in laravel How to create how to queue email how to use queue installing laravel intervention image laravel laravel 5 laravel 5 auth laravel 5.4 queue laravel 5.5 queue laravel 5.8 laravel 5.8 artisan command laravel 5.8 artisan console laravel 5.8 auth tutorial laravel 5.8 authentication laravel 5.8 commands laravel 5.8 crud laravel 5.8 crud example laravel 5.8 custom middleware laravel 5.8 deprecations laravel 5.8 eager loading laravel 5.8 elixir laravel 5.8 event listeners laravel 5.8 events laravel 5.8 feature laravel 5.8 features laravel 5.8 global middleware laravel 5.8 install laravel 5.8 lazy loading laravel 5.8 listeners laravel 5.8 middleware laravel 5.8 multi auth laravel 5.8 named resource routes laravel 5.8 named routes laravel 5.8 new feature laravel 5.8 own artisan command laravel 5.8 queue laravel 5.8 queues laravel 5.8 routing laravel 5.8 telescope laravel 5.8 tutorial laravel 5.8 user auth laravel 5.8 user authentication laravel 5.8 what's new laravel 5.9 laravel admin permissions laravel api laravel artisan command laravel artisan console laravel assets laravel auth laravel auth role laravel authentication laravel authorization laravel axios post example laravel background process laravel background task laravel background worker laravel beginner to master laravel belongsto laravel belongsto vs hasone laravel belongstomany laravel best packages laravel best practices laravel best tutorial laravel bootstrap laravel command laravel command line laravel commands tutorial laravel composer install laravel connect db laravel console command laravel console testing laravel contact form send email laravel controllers laravel create laravel crud laravel crud policy laravel custom command laravel custom middleware laravel database laravel database configuration laravel database relationships laravel database seeder laravel database settings laravel db seed laravel db settings laravel debugging laravel deploy aws laravel deploy digital ocean laravel deploy on digitalocean laravel deploy on server laravel deploy to production laravel deployment laravel digitalocean laravel drag and drop file upload laravel dropzone file upload laravel dropzone image upload laravel e-commerce laravel eager loading laravel eager loading tutorial laravel eager loading with condition laravel elixir laravel eloquent laravel eloquent belongsto laravel eloquent crud laravel eloquent hasmany laravel eloquent where laravel eloquest tutorial laravel events and queue laravel events tutorial laravel factory laravel feature test laravel feature testing laravel fetching data from database laravel file storage laravel fillable example laravel flash message notification laravel for beginners laravel form validation laravel forms laravel forms bootstrap snippets laravel from scratch laravel from the ground up laravel front end laravel frontend tutorial laravel gate and policy tutorial laravel global middleware laravel hasmany laravel hasone laravel i18n laravel installation laravel installation mac laravel intervention image tutorial laravel javascript tutorial laravel jobs queue laravel language laravel language switcher laravel language tutorial laravel languages laravel lazy loading laravel listener event laravel listeners laravel localization laravel login laravel mailable tutorial laravel many to many relationship example laravel markdown email laravel markdown mail laravel mass assignment laravel middleware laravel migrate fresh laravel mix laravel mix 5.8 laravel mix vue laravel model factory tutorial laravel multiple language laravel mysql json laravel named resource routes laravel named routes laravel new features laravel news laravel nginx laravel node modules laravel npm install laravel npm run watch error laravel one to one laravel paginate laravel paginate link laravel pagination laravel pagination 5.8 laravel pagination links laravel pagination tutorial laravel phpunit laravel phpunit testing laravel pivot table example laravel policy laravel preview laravel query optimization laravel queue laravel queue event listener laravel react laravel register user laravel registration laravel registration validation laravel relationships laravel reset password laravel role middleware laravel role permission laravel roles laravel route group middleware laravel routes laravel routing laravel routing with parameters laravel sass laravel save file to database laravel scopes laravel seo tutorial laravel server laravel session data laravel ssl laravel supervisor laravel tailwind css laravel tailwind setup laravel tdd laravel tdd tutorial laravel telescope laravel telescope installation laravel telescope tutorial laravel test driven development laravel test workflow laravel testing laravel testing controllers laravel testing tutorial laravel tools laravel translation laravel tutorial laravel tutorial for beginners laravel ubuntu server laravel ubuntu tutorial laravel unit testing controllers laravel upload file laravel upload image to storage laravel upload multiple files at once laravel upload multiple image to database laravel upload multiple images laravel url slug laravel vue laravel vue js crud laravel vue setup laravel vue tutorial laravel vue.js laravel webpack error laravel webpack tutorial lazy loading lazy loading laravel lazy loading vs eager loading learn laravel learn laravel framework step by step localization in laravel localization laravel many to many laravel mvc tutorial for beginners in php mvc tutorial laravel mysql mysql relational database mysql relationship n + 1 problem n + 1 problem laravel new artisan command npm install npm run dev npm run watch laravel one to many one to one one to one laravel own artisan command pagination pagination bootstrap pagination bootstrap php mysql pagination laravel pagination laravel bootstrap pagination links pagination php php php artisan php carbon immutable php framework php framework 2019 php what's new 2019 phpunit phpunit laravel phpunit testing pivot laravel policy laravel polymorphic relationships queue and events queue email queue for laravel queue jobs queue laravel 5.8 registration form relationship laravel eloquent relationship mysql restful controller role permission in laravel roles laravel route model binding laravel routing in laravel save image to database seo friendly seo friendly content writing seo friendly website seo laravel seo optimization simple pagination laravel slugify sqlite relational database sqlite relationships between tables symfony command console symfony laravel tailwind css tailwind laravel mix telescope laravel tutorial laravel unit testing unit testing laravel upload file laravel upload file php upload image laravel upload image to database php upload images laravel upload multiple files in php url slug laravel url slug php vue vue.js vuejs laravel why use laravel queue why use queue