Todo Laravel Project

Todo Laravel Project - Blade Template - The master layout

Laravel Project

← Prev Next →

In this Laravel project tutorial we will learn about Blade templates.

About view

A view is what user will see on the screen when they visit the page.

So, if your website has a home page then you will have a home view containing the HTML and other related stuff like CSS and JavaScript of the home page.

View files

In Laravel project the view files are placed inside the resources/views directory.

The default welcome view

When we create a new Laravel project we get to see the following view when we visit the home page 127.0.0.1:8000.

The view file of this page is welcome.blade.php and it is inside the resources/views directory.

The `.blade.php` extension

If we want to use Blade template in a view file then we have to save the file with .blade.php extension.

The master layout

For our todo-laravel project we will first create a master layout that will be shared with all other pages.

It is a good practice to reuse your template code.

Inside the resources/views directory we will create a layouts directory and inside it we will create app.blade.php file.

We will now write the following code inside the app.blade.php file.

<!doctype html>
<html>
<head>
  <title>@yield('title')</title>

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

</head>
<body>

  @yield('content')


  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

</body>
</html>

In the above HTML code we have prepared a master layout for our project.

We are using Bootstrap 4 to style our website.

The `@yield()` directive

The @yield() directive is like a placeholder and we can fill it up with some content later when we use the master layout.

In the above code we have the @yield('title') which will help us to correctly set the title of the page.

And we have the @yield('content') which will hold the HTML of the current page being viewed by the user.

Alright, this is it for this tutorial. In the next section we will work on the Home page view.

And please share this tutorial if you find it helpful :)

See you in the next tutorial. Have fun coding.