A great principle of software development, which you'll hear me repeat

ad nauseam, is the don't repeat yourself or the DRY process.

In general, you should not have repetitious code anywhere in your system.

We want reusable, testable code to be prevalent in our application.

How much and how we apply it, is an art form unto itself.

A great example of this is Laravel''s use of

layouts, yield, and content blocks to DRY up our views.

Now that we have some very basic HTML in there,

we're going to need to clean it up a little bit.

Make it look a little nicer.

We're gonna do this by using Foundation 5.

You can really use any kind of front end framework that you want.

I'm going to just use downloading the complete version of Foundation 5 and

show you how to integrate that into our templates and working with layout.

So, go ahead and click on the

download everything button under Foundation.zurb.com and then download.

Okay, once this is done, we're gonna open it

up, look at it inside of finder, and here

you're gonna see, we're going to have the CSS

files, image files, the js file, robots, and index.

We really only wanna concern ourselves with

these three folders as they are right now.

So we're gonna these folders and we're

gonna copy them over to our Homestead directory.

Which here we have in Hampton and then Homestead > Projects > Laravel-basics.

Inside of our Laravel-basics folder, we're going to go inside

of our public folder and we'll paste them in here.

[BLANK_AUDIO]

The next thing going into sublime, if you

open up your public folder, you'll now see CSS

image folder, and a js folder there for

us to use that already contains our foundation information.

So what we're gonna need is to take that information and

integrate it into our main index file or our route file.

Here it's using hello.php.

I'm gonna paste in some code, and then we'll review what

that code is doing for us in order to integrate with foundation.

[BLANK_AUDIO]

All right, let's switch over to our browser, make sure it works.

Heading to local host or excuse me, laravel.div.

[BLANK_AUDIO]

All right, now we have our basic layout.

Odot will be our project for our to-do list application, quick

text says hi and then you're expected copy right at the bottom.

Let's take a look over at our hello.php file.

Same as what we've seen before.

Typical HTML mark up here we are adding a stylesheet with the foundation CSS.

Which is in our public folder, so we don't

need to define anything else other than just CSS.

Same thing for JS.

And then we go to the very bottom and you'll see

that we're calling two scripts, the jQuery script, the foundation minified script.

And then calling run foundation or run the actual foundation framework.

What we're gonna do next is move to create what's called a layout.

Now, a layout for us is going to be a way for

us to use a standard wrapping HTML for all of our content.

Avoiding duplication, or trying to create what

we call DRY or don't repeat yourself code.

We'll do that by creating a layout folder in our views folder.

[BLANK_AUDIO]

In this layouts folder, we're gonna create another file, just a standard php file.

We're gonna call this one main.blade.php.

Now, blade is the syntax language for Laravel or front end code template.

We're gonna get into blade in a lot more detail further on down.

But for now, just name your file name.blade.php and then hit Enter.

So now we're gonna take what's inside of our hello.php file,

copy all of it over and place it into our layouts file.

Now we don't need everything in here, every

time; we're gonna want to modify this section here.

So, this is the part that we're going to

want to make a change to every single time.

The content that we're going to want to update is inside

of this H1 tag, or actually inside of this div large 12.

So, we're going to remove the call to H1 high, and just put in a command

called yield, and then we're going to pass

through a single argument and call it content.

So this is going to say we would like to

yield the content here at this location in our template.

That's all we need to do in the template file

for now, so let's go ahead and close this file out.

And go back over to our hello file.

Now I'm going to actually delete everything in this file and hit save.

Now, the first thing we need to do inside of the hello file is rename this file

so that we can use the blade syntax in

order to create a tie to our main.blade.php layout.

So, I'm going to rename the file, and do hello.blade.php.

[SOUND].

Reopen that file.

And now, we can begin to use the blade syntax.

If you are using sublime you'll see here

that it's just saying that it's a php file.

So, we don't have the blade's syntax highlighting for sublime.

I can install that using the package manager.

I'm gonna do that now and I'll have a link below on how you can install it yourself.

So, I'm going to open up the commands and then do install package.

[SOUND] And then, the package that I'm going to search

for is blade, so here is the Laravel Blade Highlighter.

So hit Enter, it will install.

And now, when I close this file and reopen

it, you'll see it is now PHP Laravel blade.

In order to use the blade syntax for extending

into a layout or using a layout for a file.

We'll have to use the extends command.

So, we'll say extends, you'll see now we're having a little bit of highlighting

here and layouts.main.

Now, what this is telling us is we're looking in the views folder by default.

And then, inside of there, the layouts folder.

And then, we use a dot notation to say inside of the layouts folder.

We're going to be using the main file.

So main.blade.php.

So that is the first step.

Okay, so doing just extends layout main, let's

go to our browser and see what it does.

So here we've got our layout.

We've got the same view that we had before

but notice we're now missing the content that was there.

Which is our simple h1 tag that says hi.

So, we can just add that back in.

But if we put it in the file itself

it doesn't know where to put that in the HTML.

So we're going to have to access where we originally wrote yield

inside of our hello dot php or hello dot blade dot php file.

The way we do that is by using the keyword or the command section.

So let's move back over and do that now.

[BLANK_AUDIO]

So here, we're having Content and then we're going

to do @stop to tell us that is the end.

And anything in here, in this section is

what is going to print into our Content yield.

Let's go back to what we originally had before, which is our H1.

And then Hi.

All right, let's switch back over, see if that worked.

There we go.