Introduction
In web development, layouts are crucial for maintaining consistency across different pages of an application. Laravel, a popular PHP framework, provides powerful tools to manage layouts efficiently through its Blade templating engine. In this tutorial, we'll explore different types of layouts in Laravel, how to create and use them, and how to include CSS and JavaScript assets in your layouts.
Prerequisites
Before you begin, ensure you have the following:
- Basic knowledge of PHP and Laravel.
- Laravel installed in your development environment.
Step 1: Understanding Laravel Layouts
Laravel's Blade templating engine allows you to create dynamic layouts that can be extended by various views. This helps maintain a consistent look and feel across different pages and reduces code duplication.
1.1 Types of Layouts in Laravel
- Master Layout: The main layout that includes common elements such as the header, footer, and navigation bar. All other views can extend this layout.
- Nested Layouts: Layouts that extend a master layout and are further extended by other views. Useful for creating different sections or sub-layouts.
- Component Layouts: Blade components that represent reusable pieces of a layout, like buttons, modals, or card sections.
Step 2: Creating a Master Layout
A master layout is the foundation of your Laravel application's UI. It typically contains the main HTML structure and includes placeholders for dynamic content.
2.1 Creating the Master Layout
Create a new file named master.blade.php inside the resources/views/layouts directory:
mkdir -p resources/views/layouts
touch resources/views/layouts/master.blade.php
Add the basic structure to master.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'My Laravel App')</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="{{ url('/') }}">Home</a></li>
<li><a href="{{ url('/about') }}">About</a></li>
<li><a href="{{ url('/contact') }}">Contact</a></li>
</ul>
</nav>
</header>
<main>
@yield('content')
</main>
<footer>
<p>© 2024 My Laravel App. All rights reserved.</p>
</footer>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Explanation:
@yield('title'): Defines a section where child views can inject a page-specific title.@yield('content'): Placeholder for the main content of each page.{{ asset('...') }}: Loads assets from the public directory.
2.2 Extending the Master Layout
Create a new view, e.g., home.blade.php:
touch resources/views/home.blade.php
Extend the master layout:
@extends('layouts.master')
@section('title', 'Home')
@section('content')
<h1>Welcome to My Laravel App</h1>
<p>This is the home page.</p>
@endsection
Step 3: Creating Nested Layouts
Nested layouts are useful when you need to create different sections or subsections that share a common structure.
3.1 Creating a Nested Layout
touch resources/views/layouts/dashboard.blade.php
Add content to dashboard.blade.php:
@extends('layouts.master')
@section('content')
<div class="dashboard">
<aside>
<nav>
<ul>
<li><a href="{{ url('/dashboard') }}">Dashboard Home</a></li>
<li><a href="{{ url('/dashboard/profile') }}">Profile</a></li>
<li><a href="{{ url('/dashboard/settings') }}">Settings</a></li>
</ul>
</nav>
</aside>
<section class="main-content">
@yield('dashboard-content')
</section>
</div>
@endsection
3.2 Using the Nested Layout
mkdir -p resources/views/dashboard
touch resources/views/dashboard/profile.blade.php
Use the nested layout:
@extends('layouts.dashboard')
@section('dashboard-content')
<h2>User Profile</h2>
<p>Here you can update your profile information.</p>
@endsection
Step 4: Creating and Using Blade Components
Blade components are reusable pieces of a layout.
4.1 Creating a Blade Component
mkdir -p resources/views/components
touch resources/views/components/alert.blade.php
Component content (alert.blade.php):
<div class="alert alert-{{ $type }}">
{{ $slot }}
</div>
4.2 Using the Component
Inside home.blade.php:
@extends('layouts.master')
@section('title', 'Home')
@section('content')
<h1>Welcome to My Laravel App</h1>
<p>This is the home page.</p>
<x-alert type="success">
This is a success alert!
</x-alert>
@endsection
Step 5: Including CSS and JavaScript in Layouts
5.1 CSS
Create and link public/css/app.css:
touch public/css/app.css
Inside layout:
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
5.2 JavaScript
Create and link public/js/app.js:
touch public/js/app.js
Inside layout:
<script src="{{ asset('js/app.js') }}"></script>
Step 6: Utilizing Laravel Mix
6.1 Setup
Install dependencies:
npm install
Define build in webpack.mix.js:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Run build:
npm run dev
Conclusion
Laravel's layout system, powered by Blade, allows for reusable, clean, and efficient page structures. You can build consistent applications by mastering layouts, components, and asset management.