Laravel / Laravel Views and Blade Templates
Creating Reusable Layouts and Components
In this tutorial, we will learn how to create reusable layouts and components using Laravel's Blade. This involves using Blade's template inheritance, sections, and components to …
Section overview
5 resourcesCovers building dynamic views using Blade templating engine.
Creating Reusable Layouts and Components Using Laravel's Blade
1. Introduction
This tutorial aims to guide you through the process of creating reusable layouts and components using Laravel's Blade. By the end of this tutorial, you will have a solid understanding of Blade's template inheritance, sections, and components. You will be able to avoid repetition and save time by reusing common elements across your views.
Prerequisites
- Basic understanding of Laravel
- Familiarity with HTML and PHP
2. Step-by-Step Guide
Understanding Blade's Template Inheritance
Blade's template inheritance allows you to define a layout with placeholders for content. These placeholders are defined using @section and @yield.
Creating a Master Layout
A master layout serves as a template for other views. It contains elements such as the header, navigation bar, footer, etc., that remain constant across different views.
<!-- Stored in resources/views/layouts/app.blade.php -->
<html>
<head>
<title>App Name - @yield('title')</title>
</head>
<body>
@section('sidebar')
This is the master sidebar.
@show
<div class="container">
@yield('content')
</div>
</body>
</html>
In the above code, @yield('title') is a placeholder for the page title. @section('sidebar') defines a section that can be filled by child views. @yield('content') is where the main content of child views will be inserted.
Creating a Child View
A child view extends a master layout and fills in the @section placeholders.
<!-- Stored in resources/views/child.blade.php -->
@extends('layouts.app')
@section('title', 'Page Title')
@section('sidebar')
@parent
<p>This is appended to the master sidebar.</p>
@endsection
@section('content')
<p>This is my body content.</p>
@endsection
The @extends directive is used to specify the master layout. @section('title', 'Page Title') fills the 'title' placeholder.
@section('sidebar') not only fills the 'sidebar' placeholder but also appends content to the master sidebar using @parent.
Finally, @section('content') provides the main content.
3. Code Examples
Example 1: Basic Layout
Let's create a basic layout with a title placeholder and a content placeholder.
<!-- Stored in resources/views/layouts/basic.blade.php -->
<html>
<head>
<title>App Name - @yield('title')</title>
</head>
<body>
<div class="container">
@yield('content')
</div>
</body>
</html>
Here you should expect that the @yield('title') will be replaced by the page title and @yield('content') will be replaced by the main content.
Example 2: Fill in the Basic Layout
Now we'll fill in the placeholders in our basic layout.
<!-- Stored in resources/views/welcome.blade.php -->
@extends('layouts.basic')
@section('title', 'Welcome')
@section('content')
<h1>Welcome to our application!</h1>
@endsection
In this example, 'Welcome' will replace @yield('title') and the h1 heading will replace @yield('content').
4. Summary
In this tutorial, we learned how to create reusable layouts and components using Laravel's Blade. We learned about Blade's template inheritance, how to define a master layout and how to create child views that fill in the placeholders defined by the master layout.
For further learning, explore Blade's other features such as including sub-views, stack directives, and component tags.
5. Practice Exercises
Now it's your turn to practice!
- Create a master layout with placeholders for a header, footer, and main content.
- Create a child view that fills in these placeholders.
- Create another child view that extends the same master layout but provides different content.
Remember, the key to mastering Laravel's Blade is practice and exploration. Happy coding!
Need Help Implementing This?
We build custom systems, plugins, and scalable infrastructure.
Related topics
Keep learning with adjacent tracks.
Popular tools
Helpful utilities for quick tasks.
Random Password Generator
Create secure, complex passwords with custom length and character options.
Use toolLatest articles
Fresh insights from the CodiWiki team.
AI in Drug Discovery: Accelerating Medical Breakthroughs
In the rapidly evolving landscape of healthcare and pharmaceuticals, Artificial Intelligence (AI) in drug dis…
Read articleAI in Retail: Personalized Shopping and Inventory Management
In the rapidly evolving retail landscape, the integration of Artificial Intelligence (AI) is revolutionizing …
Read articleAI in Public Safety: Predictive Policing and Crime Prevention
In the realm of public safety, the integration of Artificial Intelligence (AI) stands as a beacon of innovati…
Read articleAI in Mental Health: Assisting with Therapy and Diagnostics
In the realm of mental health, the integration of Artificial Intelligence (AI) stands as a beacon of hope and…
Read articleAI in Legal Compliance: Ensuring Regulatory Adherence
In an era where technology continually reshapes the boundaries of industries, Artificial Intelligence (AI) in…
Read article