Laravel - Blade Templates: A Beginner's Guide

Hello there, aspiring web developers! Today, we're going to dive into the wonderful world of Laravel's Blade templating engine. Don't worry if you've never coded before – I'll be your friendly guide through this journey, and we'll take it step by step.

Laravel - Blade Templates

What is Blade?

Blade is Laravel's powerful templating engine. Think of it as a magical tool that helps us create dynamic and reusable HTML templates. It's like having a super-smart assistant who can fill in the blanks in your web pages with real data.

Why Use Blade?

It's simple and easy to learn
It makes your code cleaner and more readable
It helps you avoid repetition (remember, developers are lazy – in a good way!)

Now, let's roll up our sleeves and get started!

Steps for Creating a Blade Template Layout

1. Create a Master Layout

First, we need to create a master layout. This is like the skeleton of your website – it contains the parts that stay the same on every page.

Create a new file called layout.blade.php in the resources/views directory:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
</head>
<body>
    <header>
        <h1>My Awesome Website</h1>
    </header>

    <main>
        @yield('content')
    </main>

    <footer>
        <p>&copy; 2023 My Awesome Website</p>
    </footer>
</body>
</html>

Let's break this down:

@yield('title'): This tells Blade, "Hey, we'll fill in the title later for each page."
@yield('content'): This is where the main content of each page will go.

2. Create Child Templates

Now, let's create a child template that uses our layout. Make a new file called home.blade.php:

@extends('layout')

@section('title', 'Home Page')

@section('content')
    <h2>Welcome to My Awesome Website!</h2>
    <p>This is the home page content.</p>
@endsection

Here's what's happening:

@extends('layout'): This tells Blade to use our layout.blade.php file as the base.
@section('title', 'Home Page'): This fills in the title we left blank earlier.
@section('content'): This is where we put the unique content for this page.

3. Displaying Data

Blade really shines when it comes to displaying data. Let's say we want to show a list of fruits. We'll update our home.blade.php:

@extends('layout')

@section('title', 'Home Page')

@section('content')
    <h2>Welcome to My Awesome Website!</h2>
    <p>This is the home page content.</p>

    <h3>Our Fruit Selection:</h3>
    @if(count($fruits) > 0)
        <ul>
        @foreach($fruits as $fruit)
            <li>{{ $fruit }}</li>
        @endforeach
        </ul>
    @else
        <p>Sorry, we're all out of fruit!</p>
    @endif
@endsection

In this example:

@if and @else: These let us make decisions in our template.
@foreach: This helps us loop through our list of fruits.
{{ $fruit }}: The double curly braces tell Blade to display the value of the variable.

4. Using Blade Components

Blade components are like LEGO blocks for your website. They're reusable pieces that you can use across different pages. Let's create a simple component for a button.

Create a new file resources/views/components/button.blade.php:

<button class="btn btn-{{ $type ?? 'primary' }}">
    {{ $slot }}
</button>

Now we can use this button in our home.blade.php:

@extends('layout')

@section('title', 'Home Page')

@section('content')
    <h2>Welcome to My Awesome Website!</h2>
    <p>This is the home page content.</p>

    @component('components.button', ['type' => 'success'])
        Click me!
    @endcomponent
@endsection

This will create a button with the text "Click me!" and a success style.

Blade Directives Cheat Sheet

Here's a handy table of some common Blade directives:

Directive	Purpose
@if	Conditional statement
@else	Alternative for @if
@elseif	Alternative condition
@foreach	Loop through array
@for	For loop
@while	While loop
@switch	Switch statement
@yield	Define a section in a layout
@section	Define content for a layout
@extends	Specify which layout to use
@include	Include another view
@auth	Check if user is authenticated
@guest	Check if user is a guest

Remember, practice makes perfect! Don't be afraid to experiment with these directives and create your own templates. Before you know it, you'll be a Blade ninja, slicing through HTML like a hot knife through butter!

In my years of teaching, I've found that the best way to learn is by doing. So, why not try creating a simple blog layout using what we've learned? Start with a master layout, create pages for home, about, and blog posts, and use Blade's powerful features to make your code clean and DRY (Don't Repeat Yourself).

Happy coding, and may the Blade be with you! ?

Credits: Image by storyset

Previous Tutorial:

Laravel - Views

Next Tutorial:

Laravel - Redirections