Files Layout

So far, we have two views, the pizzas view and the welcome view. These views have the same template at the top. While it may seem easy to copy and paste this template into every view that we would create, it can become cumbersome. For example; if you want to make a change to a part of your template, you'll have to implement this change in each of your views, one after the other.

There's a solution to this; we can create a generic layout that we would use in each of our views. That's what this module is about, so, let's dive in.

Step 1: Create a folder named "Layout" in views, then create a file in the layout folder named layout.blade.php.

Step 2: In the pizzas.blade.php file, copy the top, starting from <!DOCTYPE html> to the opening <body> tag, and paste in the layout.blade.php file. Then delete the copied part from the pizzas.blade.php. Now, cut the closing </body> and </html> tags and paste them at the bottom of the layout.blade.php file.

Step 3: We call this template in our views by using the Blade directive:

@extends('layouts.layout')

This tells Laravel that we want to use this template (layout.blade.php) in the view, but it doesn't tell Laravel what to do with the other content in the view.

Step 4: We have to define what's remaining in our pizzas.blade.php file as a section, so we can inform Laravel what to do with the section. To do this, we embed the content in:

@section('content')

and close with

@endsection

Step 5: We want Laravel to place this section in the body of the template, to do this, we place:

@yield('content')

in the <body> tag of our layout.blade.php.

Hence, your pizzas view should look like this:

pizzas view image

And your layout.blade.php should look like this:

layout.blade.php image

If we save this and preview, we should see no changes, because we've not changed our code, we only restructured the code.

Now, do the same for the welcome.blade.php file as an exercise.

Let's add a footer in our layout. In the body tag of the layout.blade.php file, add a footer tag, and add some CSS in the style section like so:

footer {
  background: #eee;
  padding: 20px;
  text-align: center;
}

Then in the body:

@yield('content')

If we save and preview, we'll see the footer at the bottom of every page, like so:

footer preview

Currently, we are placing our CSS in our views, we want to create an external file so that our frontend can have access to it.

To do this, create a folder named css in the public folder, and then create a file called main.css in the css folder. Now, head to the layout.blade.php file to cut everything in the <style> tag and paste into the main.css file.

To link the main.css file to the layout.blade.php file, we place:

<link href="/css/main.css" rel="stylesheet">

We use /css/main.css instead of public/css/main.css because everything in the public folder is available to the browser at root level.

We add styles to our main.css file if we want, but first, let's add the images we want to use for this project. In the public folder, create a folder and name it img. Drag or copy your image to this folder.

Here is the image we'll be using in this course:

course image

We can use this image in your welcome view by adding an image tag, just like we would in HTML. So head to welcome.blade.php and add:

<img src="/img/pizza-house.png" alt="pizza house logo">

Example in HTML:

<div class="content">
  <img src="img/pizza-house.png" alt="pizza house logo">
  <div class="title m-b-md">
    The North's Best Pizza
  </div>
</div>
@endsection

Delete the links because we don't need them and we want to style our title like so:

.title {
  font-size: 50px;
  text-transform: uppercase;
  border-bottom: 2px solid;
  padding: 12px 0;
  color: #5e2195;
}

Save and preview:

final preview