Laravel 6 Beginner

Laravel 6 Beginner – e6 – Blade Templates

[Music] up next in our learning let's continue talking about blade in one of the previous episodes we talked about how we

can actually output a string by using this notation so in this episode let's dive deeper into blade just as a reminder blade is just a templating engine that actually comes with level

it's part of larva and it is very very useful what I want to do in this episode is create a real-world example of how you would actually use blade to compose all of your views and let me show you

what I mean let's jump into the directories and let's go into the resources views and inside of views right now we have two directories let's start completely from scratch I will

actually delete both of these let's create a brand new blank file and I will call this file app that blade dot PHP again completely empty file and I do want to open this up in the browser so

let's go ahead and jump into my routes file and create a route that we can work with so inside of routes I can go into web that PHP and we've been using this slash hello so let's continue doing that

and let's jump into the hello controller index method so we can display our new app that blade file so let's go into app HTTP controllers and then the hello controller and here is my index method I

will actually clean this up quite a bit and all I want to do is just have a new view remember that's the helper function that we use to display any blade view and inside of here I just need to pass

in the string of app which again just corresponds to this app that blade file and just so that we know that this is working let's put an h1 and say working great now to preview this in the browser

in my terminal let's go ahead and boot up PHP artisan serf and now I can visit the website at this address and when I do of course it says that there is no

welcome view remember that we erased everything so let's go to that /hello one more time and sure enough we are working alright so that's a little bit of setup that we

needed to do in order to get started with this episode let me close everything up and let's focus in this app that blade file so typically you will have something like this right this

is going to be just a simple HTML document and it's going to have a title which for now we'll say level six beginner and then we'll have some sort of body here and in here we will put our

h1 again and say welcome to laravel six and maybe in here we will have a paragraph with some additional text about that just a very simple HTML page now by itself this doesn't quite do

anything except what you are used to this is just a simple HTML page so let me show you how we can actually make this work the first thing I want to show you is how to actually not have to

generate this file over and over for every single page because let's say that let's add a new view now a completely blank document for maybe our about page so about that blade that PHP and now I

would have to generate this one more time but notice how much repetition this would be called the about Us page and maybe this app will have as our beginners page so if I want to load this

page I would have to generate all of this code again now luckily for us blade is in place and this is what blade will do to help us fix it so what we could do is turn this app that blade into our

template so a template is just a way for us to tell laravel that this can be extended in a template you would designate certain areas where you want the user to be able to customize the

text and one of those areas would be the title you don't always want the title to be hard-coded but in our about page we do have a very unique title so how can we open up this space right here to

accept a string to do that we use the yield keyword so we'll say at yield and then inside of here we have to pass in a key that going to use to actually target it so

let's give this a key of title and how does this work exactly I'll go ahead and erase everything we need to actually tell the about view to take a look at app and to do that we say at extends and

what are we extending well we are extending the app and so now about page will contain everything that is inside app and in here we could say we're going to have a section with the key of title

and I want that to be about Us page in our controller instead of loading an app I want to load the about view so let's jump to the hello controller and again I'm going to change from the app view to

the about view and if I hit refresh now notice the title up here notice that it says about Us page and now if we needed to generate another page let's say the services page this one will say services

I will change it temporarily here to services when I hit refresh notice that it says services up here and so notice that there is no duplication in these files and we are still getting all of

this text to prove it let's take a look at the source and sure enough we are getting all of our markup but we are just injecting this one section right here we can continue to do that and

generate our entire template another place where it would make sense is inside of our body inside of our body we should probably have a section where we can actually pass in the body for this

particular page so we can use the exact same thing again and we can say this yield content area right here and now in the About section we could say we have a new section here and in this one we will

call content now as a second string you can't really do that because that wouldn't really make sense and the HTML would really look kind of funky so instead of passing a second parameter we

can use another syntax which is end section so start section and end section and anything in between here we'll actually just get pushed into this yield section all right back in my

controller let's change back to about and if I hit refresh notice that we get the exact same thing with the difference being that if I changed here from about there you go so this text here is

actually coming from the about view and this is just simply our layout file that's typically what this file is referred to as it's just a layout file and typically it is called app table so

let's continue working in our about what if I wanted to have maybe some navigation let's add a very simple navigation here with some unordered items and let's add two of those and

let's have the first one go to our about page so slash about about us let's have a second link here that goes to services so slash services services as the actual name of the link and these two routes

don't exist yet so we'll have to create those let's go ahead and go into our web that PHP file and create some new routes instead of hello let's go ahead and make this slash about and then for now I will

actually change this over to about and then in here we'll have the services and we'll also use services inside our controller that way we don't have to generate another controller so now in

our controller let's go ahead and change this over to about and then let's go ahead and also create one for services are we ready to test this out let's go back to the browser and let's go to

slash about and now we have these two links so we have about us and now we have services now of course services doesn't show anything because we don't have a body section let's go ahead and

add a content section here to services and we'll say welcome to level six from services and maybe instead of a paragraph will have some list items with service one two and three

okay there we go so now we have a very basic two page navigation without any repetition as a matter of fact remember that in my app this is all that I have and I do have a hello controller to

power both of these things as a quick side note for a little bit more in advance of a lesson here there is a shortcut for this if you have a route that has a get method and just hits a

controller and inside of that controller the only thing you're doing is returning a view and you don't need to perform any other actions there is a shortcut for that and we could do the following you

could say routes and instead of get let's do view so the first parameter remains exactly the same but the second parameter we can actually change it to be this view right here so we can pass

in just a string of about instead so about and then we can do the same thing for this services one so we'll save you slash services is going to request services that played that PHP so we can

actually comment out these two lines let me actually bump this down there we go so we have two routes and they are just responding with a view and if we hit refresh sure enough everything is still

working exactly the same except now you don't need a controller you're not gonna use this very often but it's always good to know a shortcut of how to get just a view displayed in your page right away

so now that we have this particular layout file another nice feature is that you can extract partials imagine that you wanted to extract this into a navigation partial so I'll show you how

to do this we're going to cut out this navigation out of my app that blade and let's create a new file here and we'll call it maybe nav that blade dot PHP inside of this file I'll go ahead and

paste this exact same thing so how do I bring this navigation blade and just paste it inside of here to do that we can use the keyword of include so we can say @include and then we pass in the

view name in my case Neph now if I hit refresh I get the exact same thing with just a difference that now my navigation is sitting inside this particular file so if I needed to use

this navigation file somewhere else all I need to do is just include this one particular navigation blade file pretty cool stuff let me show you a couple of more things and then we'll call it a day

for this next step I want to go back to using the actual hello controller and to do that I'll bring back these two routes that actually hit the controller imagine the following imagine that in my

services remember that right now we just have service 1 2 & 3 imagine that that was coming from my controller perhaps I have them in a table somewhere in a database for now we're gonna fake

it as just an array so we'll say services equals and then we'll have an array with all of my services and for now it will just be service 1 as half service 2 and service 3 and maybe just

add service 4 so it's a little bit different than we had before as we learn in the previous episode if I want to pass this services variable into my view as a second argument here we can say

compact and pass in services doing so will give you access to services inside of this blade file right here so let's go into the services file and instead of hard-coding 1 2 & 3 how do we actually

grab all of them from services well a very useful way of doing this in PHP is to use a for each loop and for each one that it finds we want to output a particular HTML section let's erase all

of this and let's use blade syntax for that as with every other blade you're going to start with an @ sign and let's say for each and what are we grabbing or we're grabbing services remember that's

what we named it we named it right here services so for each services as service and this is basic PHP at this point and then we're going to do end for each so whatever is in between this and this

will actually get outputted for as many times as we have services so let's add a new list item here and all I will do is just output out service and if we hit refresh and go to services there we go

so we have services 1 2 3 4 so that's a great and easy way to actually pass in a list of data from our database and then catch it inside of our view and output each one how cool is that but what if

there was no services typically for this you'll have to check if Services is actually available because what if services was completely empty imagine this example now when we hit

refresh we don't get anything but it would be nice to be able to tell the user we don't have any services currently listed but come back later and check out our services so to achieve

this we can change for each just a little bit instead of for each let's use for else and the way that for else works is it allows you to add a new section here called

at empty and then we'll end for else so with this small change whatever is between this section and this section will get output it if there are no services here we can have a list item

for say no services available now when we hit refresh we have no services available but if we do add a service as a day cool service and then maybe another cool service now

we get that instead so it's a very simple way of taking a list and if it's empty we'll have a section for it so that's what that's saying saying if my list that I'm giving you up here if

that's empty go ahead and output this section right here and if it's not empty then let's go ahead and do the following for each one I hope you see the power in blade and what I want you to do is

create as real-world of an example as you can using all of these tools that I showed you with blade and then when you're feeling comfortable with that let's move on to the next lesson

Blade is the simple, yet powerful templating engine provided with Laravel. In this episode, we will create a real-world html page example with navigation and even pass some data from our controller.

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

DigitalOcean Referral
https://m.do.co/c/7dce5364ef4d

About This Course

If you have been looking to learn Laravel, there hasn’t been a better time. The framework reached an important point in its life, with the release of Laravel 6. There has never been more demand for Laravel developers than now. In this series, we are going to get you started in your path to becoming a Laravel Artisan. Let’s get right to it!