Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Templates and Layouts
-
0:00
A great principle of software development, which you'll hear me repeat
-
0:03
ad nauseam, is the don't repeat yourself or the DRY process.
-
0:07
In general, you should not have repetitious code anywhere in your system.
-
0:12
We want reusable, testable code to be prevalent in our application.
-
0:16
How much and how we apply it, is an art form unto itself.
-
0:19
A great example of this is Laravel''s use of
-
0:21
layouts, yield, and content blocks to DRY up our views.
-
0:27
Now that we have some very basic HTML in there,
-
0:31
we're going to need to clean it up a little bit.
-
0:33
Make it look a little nicer.
-
0:34
We're gonna do this by using Foundation 5.
-
0:37
You can really use any kind of front end framework that you want.
-
0:41
I'm going to just use downloading the complete version of Foundation 5 and
-
0:45
show you how to integrate that into our templates and working with layout.
-
0:49
So, go ahead and click on the
-
0:50
download everything button under Foundation.zurb.com and then download.
-
0:59
Okay, once this is done, we're gonna open it
-
1:00
up, look at it inside of finder, and here
-
1:04
you're gonna see, we're going to have the CSS
-
1:09
files, image files, the js file, robots, and index.
-
1:13
We really only wanna concern ourselves with
-
1:16
these three folders as they are right now.
-
1:19
So we're gonna these folders and we're
-
1:20
gonna copy them over to our Homestead directory.
-
1:25
Which here we have in Hampton and then Homestead > Projects > Laravel-basics.
-
1:31
Inside of our Laravel-basics folder, we're going to go inside
-
1:33
of our public folder and we'll paste them in here.
-
1:36
[BLANK_AUDIO]
-
1:41
The next thing going into sublime, if you
-
1:44
open up your public folder, you'll now see CSS
-
1:47
image folder, and a js folder there for
-
1:49
us to use that already contains our foundation information.
-
1:53
So what we're gonna need is to take that information and
-
1:56
integrate it into our main index file or our route file.
-
2:00
Here it's using hello.php.
-
2:03
I'm gonna paste in some code, and then we'll review what
-
2:06
that code is doing for us in order to integrate with foundation.
-
2:09
[BLANK_AUDIO]
-
2:16
All right, let's switch over to our browser, make sure it works.
-
2:18
Heading to local host or excuse me, laravel.div.
-
2:22
[BLANK_AUDIO]
-
2:27
All right, now we have our basic layout.
-
2:29
Odot will be our project for our to-do list application, quick
-
2:32
text says hi and then you're expected copy right at the bottom.
-
2:37
Let's take a look over at our hello.php file.
-
2:40
Same as what we've seen before.
-
2:41
Typical HTML mark up here we are adding a stylesheet with the foundation CSS.
-
2:48
Which is in our public folder, so we don't
-
2:49
need to define anything else other than just CSS.
-
2:52
Same thing for JS.
-
2:53
And then we go to the very bottom and you'll see
-
2:57
that we're calling two scripts, the jQuery script, the foundation minified script.
-
3:02
And then calling run foundation or run the actual foundation framework.
-
3:06
What we're gonna do next is move to create what's called a layout.
-
3:10
Now, a layout for us is going to be a way for
-
3:13
us to use a standard wrapping HTML for all of our content.
-
3:18
Avoiding duplication, or trying to create what
-
3:21
we call DRY or don't repeat yourself code.
-
3:25
We'll do that by creating a layout folder in our views folder.
-
3:28
[BLANK_AUDIO]
-
3:35
In this layouts folder, we're gonna create another file, just a standard php file.
-
3:41
We're gonna call this one main.blade.php.
-
3:44
Now, blade is the syntax language for Laravel or front end code template.
-
3:51
We're gonna get into blade in a lot more detail further on down.
-
3:54
But for now, just name your file name.blade.php and then hit Enter.
-
4:01
So now we're gonna take what's inside of our hello.php file,
-
4:05
copy all of it over and place it into our layouts file.
-
4:09
Now we don't need everything in here, every
-
4:12
time; we're gonna want to modify this section here.
-
4:16
So, this is the part that we're going to
-
4:18
want to make a change to every single time.
-
4:21
The content that we're going to want to update is inside
-
4:24
of this H1 tag, or actually inside of this div large 12.
-
4:28
So, we're going to remove the call to H1 high, and just put in a command
-
4:35
called yield, and then we're going to pass
-
4:38
through a single argument and call it content.
-
4:42
So this is going to say we would like to
-
4:44
yield the content here at this location in our template.
-
4:49
That's all we need to do in the template file
-
4:51
for now, so let's go ahead and close this file out.
-
4:54
And go back over to our hello file.
-
4:56
Now I'm going to actually delete everything in this file and hit save.
-
5:01
Now, the first thing we need to do inside of the hello file is rename this file
-
5:07
so that we can use the blade syntax in
-
5:10
order to create a tie to our main.blade.php layout.
-
5:15
So, I'm going to rename the file, and do hello.blade.php.
-
5:21
[SOUND].
-
5:26
Reopen that file.
-
5:27
And now, we can begin to use the blade syntax.
-
5:31
If you are using sublime you'll see here
-
5:34
that it's just saying that it's a php file.
-
5:37
So, we don't have the blade's syntax highlighting for sublime.
-
5:41
I can install that using the package manager.
-
5:44
I'm gonna do that now and I'll have a link below on how you can install it yourself.
-
5:48
So, I'm going to open up the commands and then do install package.
-
5:52
[SOUND] And then, the package that I'm going to search
-
5:56
for is blade, so here is the Laravel Blade Highlighter.
-
6:00
So hit Enter, it will install.
-
6:03
And now, when I close this file and reopen
-
6:06
it, you'll see it is now PHP Laravel blade.
-
6:11
In order to use the blade syntax for extending
-
6:15
into a layout or using a layout for a file.
-
6:19
We'll have to use the extends command.
-
6:21
So, we'll say extends, you'll see now we're having a little bit of highlighting
-
6:26
here and layouts.main.
-
6:31
Now, what this is telling us is we're looking in the views folder by default.
-
6:36
And then, inside of there, the layouts folder.
-
6:39
And then, we use a dot notation to say inside of the layouts folder.
-
6:43
We're going to be using the main file.
-
6:46
So main.blade.php.
-
6:48
So that is the first step.
-
6:51
Okay, so doing just extends layout main, let's
-
6:54
go to our browser and see what it does.
-
6:57
So here we've got our layout.
-
6:59
We've got the same view that we had before
-
7:01
but notice we're now missing the content that was there.
-
7:04
Which is our simple h1 tag that says hi.
-
7:07
So, we can just add that back in.
-
7:10
But if we put it in the file itself
-
7:12
it doesn't know where to put that in the HTML.
-
7:15
So we're going to have to access where we originally wrote yield
-
7:19
inside of our hello dot php or hello dot blade dot php file.
-
7:23
The way we do that is by using the keyword or the command section.
-
7:28
So let's move back over and do that now.
-
7:30
[BLANK_AUDIO]
-
7:36
So here, we're having Content and then we're going
-
7:40
to do @stop to tell us that is the end.
-
7:42
And anything in here, in this section is
-
7:45
what is going to print into our Content yield.
-
7:51
Let's go back to what we originally had before, which is our H1.
-
7:55
And then Hi.
-
7:57
All right, let's switch back over, see if that worked.
-
8:03
There we go.
You need to sign up for Treehouse in order to download course files.
Sign up