Laravel 5.8 – From The Ground Up

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!