This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

✨ Vultr and Linode are back on Cloudways! VIEW PLANS→

Create Layout Using Laravel Blade Templating Engine

Updated on August 23, 2023

3 Min Read

Layouts are often the starting point of many web development projects. Laravel Blade template engine enables the developer to produce HTML based sleek designs and themes.

All views in Laravel are usually built in the blade template. Blade engine is fast in rendering views because it caches the view until they are modified. All the files in resources/views have the extension .blade.php.

Discover the efficiency of Laravel’s Blade template engine, known for its remarkable performance. This tutorial serves as your introduction to harnessing the power of this templating engine. Elevate your learning experience further with the support of tailored Laravel hosting solutions.

Note: For the purpose of this tutorial, you will need a fresh installation of Laravel project.

Create Pages Routes

First, I will create the routes to gain access to my page. Open routes/web.php and add the following lines in it.

Route::get('/', function()

{

   return View::make('pages.home');

});

Route::get('/about', function()

{

   return View::make('pages.contact');

});

Stop Wasting Time on Servers

Cloudways handle server management for you so you can focus on creating great apps and keeping your clients happy.

We are only working on views only, and thus don’t need to access the controllers.  To learn more about controllers, take a look at: Working With Controllers And Middleware

Create Views Structure

Now that the routes are ready, let’s create the Views structure by creating the following folders and files.

- resources

-- views

--- layouts

------- default.blade.php

--- pages

------- home.blade.php

------- contact.blade.php

--- includes

------- head.blade.php

------- header.blade.php

------- footer.blade.php

Create Includes

Create the following includes, with the following code:

head.blade.php

<meta charset="utf-8">

<meta name="description" content="">

<meta name="Saquib" content="Blade">

<title>Checkout our layout</title>

<!-- load bootstrap from a cdn -->

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css">

Header.blade.php

<div class="navbar">

   <div class="navbar-inner">

       <a id="logo" href="/">Single Malt</a>

       <ul class="nav">

           <li><a href="/">Home</a></li>

           <li><a href="/contact">Contact</a></li>

       </ul>

   </div>

</div>

footer.blade.php

<div id="copyright text-right">© Copyright 2017 Saquib Rizwan </div>

Create the Layout

I will use @include to bring in tiny parts of the code that I have created in includes folders, and @yield to bring in content from the individual pages I will be using.

<!doctype html>

<html>

<head>

   @include('includes.head')

</head>

<body>

<div class="container">

   <header class="row">

       @include('includes.header')

   </header>

   <div id="main" class="row">

           @yield('content')

   </div>

   <footer class="row">

       @include('includes.footer')

   </footer>

</div>

</body>

</html>

Blade allows the use of the layout that I just created by using @extends. By creating @section, I will create a section that will be used in the layout. Here I will use @section(‘content’) and in the layout, everything that I will type here will be injected in @yield in the layout.

Go to resources/views/pages and put the following code in these files.

pages/home.blade.php

@extends('layouts.default')

@section('content')

   i am the home page

@stop

pages/contact.blade.php

@extends('layouts.default')

@section('content')

   i am the contact page

@stop

Improve Your Laravel App Speed by 300%

Cloudways offers you dedicated servers for your Laravel Hosting with SSD storage, custom performance, an optimized stack, and more for 300% faster load times.

Conclusion

This is the simple foundation and the basic steps for getting starting with Blade templating engine. Now that you know the file structures and the way Laravel Blade template engine renders the view, I will demonstrate how to integrate Bootstrap template with Laravel in my next article. So stay tuned.

Q) What is a Blade in Laravel?

A) Blade is Laravel’s templating engine that enables developers to separate PHP code from HTML markup, creating dynamic and reusable views.

Q) What is the purpose of using Blade layouts in Laravel?

A) Blade layouts in Laravel separate HTML markup from PHP logic, improving code organization and enabling the reusability of common elements across multiple views.

Q) Are there any predefined Blade layouts or templates available in Laravel?

A) Yes, Laravel provides predefined Blade layouts and templates. It includes a default layout called “app.blade.php” in the “resources/views/layouts” directory, and you can also create custom layouts.

Q) How can I define and include reusable sections or components in a Blade layout?

A) Use the @yield directive to define sections and the @include directive to include reusable components or partials in a Blade layout.

Q) Can I extend or inherit from multiple Blade layouts in Laravel?

A) No, you cannot directly extend or inherit from multiple Blade layouts simultaneously in Laravel. However, you can include multiple Blade templates using the @include directive to compose views with reusable components.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Saquib Rizwan

Saquib is a PHP Community Expert at Cloudways - A Managed PHP Hosting Cloud Platform. He is well versed in PHP and regularly contributes to open source projects. For fun, he enjoys gaming, movies and hanging out with friends.

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour

CYBER WEEK SAVINGS

  • 0

    Days

  • 0

    Hours

  • 0

    Mints

  • 0

    Sec

GET OFFER

For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now