Laravel Blade templating can seem overwhelming at first, but let me break it down in a simple, progressive way that makes sense.
1. Layouts – The Foundation
Think of layouts as your house’s blueprint:
<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<header>
<!-- Navigation here -->
</header>
<main>
@yield('content') <!-- This is where page content goes -->
</main>
<footer>
<!-- Footer here -->
</footer>
</body>
</html>
2. Views – The Rooms
Views use the layout and fill in the content:
<!-- resources/views/home.blade.php -->
@extends('layouts.app') <!-- Use the app layout -->
@section('content') <!-- Fill the 'content' slot -->
<h1>Welcome Home!</h1>
<p>This is the home page content.</p>
@endsection
Modern Approach: Components (Easier Way!)
3. Components – Reusable Furniture
Instead of layouts, modern Laravel uses components (much cleaner!):
Create a layout component:
<!-- resources/views/components/layout.blade.php -->
<!DOCTYPE html>
<html>
<head>
<title>{{ $title ?? 'My App' }}</title>
</head>
<body>
<header>Navigation</header>
<main>
{{ $slot }} <!-- This is where content goes -->
</main>
<footer>Footer</footer>
</body>
</html>
Use the layout component:
<!-- resources/views/home.blade.php -->
<x-layout title="Home Page">
<h1>Welcome Home!</h1>
<p>This is much cleaner!</p>
</x-layout>
Understanding Slots 🎯
Slots are like placeholders where you can insert content:
Default Slot
<!-- Component -->
<div class="card">
{{ $slot }} <!-- Default slot -->
</div>
<!-- Usage -->
<x-card>
<p>This goes in the default slot</p>
</x-card>
Named Slots
<!-- Component -->
<div class="modal">
<header>{{ $header }}</header>
<main>{{ $slot }}</main>
<footer>{{ $footer }}</footer>
</div>
<!-- Usage -->
<x-modal>
<x-slot:header>
<h2>Modal Title</h2>
</x-slot:header>
<p>Modal content goes here</p>
<x-slot:footer>
<button>Close</button>
</x-slot:footer>
</x-modal>
Step-by-Step Learning Path 📚
Level 1: Start Simple
<!-- Just a basic view -->
<h1>Hello World</h1>
Level 2: Add Layout
<!-- Use @extends and @section -->
@extends('layouts.app')
@section('content')
<h1>Hello World</h1>
@endsection
Level 3: Use Components
<!-- Modern component approach -->
<x-layout>
<h1>Hello World</h1>
</x-layout>
Level 4: Custom Components
<!-- Create reusable pieces -->
<x-card title="My Card">
<p>Card content</p>
</x-card>
Quick Reference Card 🎴
| What | Old Way | New Way (Components) |
|---|---|---|
| Layout | @extends('layout') | <x-layout> |
| Content Area | @yield('content') | {{ $slot }} |
| Include Partial | @include('partial') | <x-partial /> |
| Pass Data | @section('title', 'Home') | <x-layout title="Home"> |
Pro Tips 💡
- Start with components – they’re easier to understand
- Think visually – draw your page structure first
- Use meaningful names –
<x-user-card>not<x-component1> - Practice with small pieces – make a button component first
Think of Your Website Like Building with LEGOs
1. The Base Plate (Layout) 🟢
This is your big green LEGO base – everything sits on top of it.
<!-- resources/views/components/house.blade.php -->
<!DOCTYPE html>
<html>
<head>
<title>🏠 My LEGO House</title>
</head>
<body>
<!-- This is like the base of your LEGO house -->
<div class="house">
<div class="roof">🏠 My Website</div>
<!-- This is where we put different rooms -->
{{ $slot }}
<div class="foundation">© 2024 My House</div>
</div>
</body>
</html>
2. LEGO Blocks (Components) 🧱
Each component is like a special LEGO block you can reuse!
A Simple Toy Block:
<!-- resources/views/components/toy.blade.php -->
<div class="toy-block" style="background: {{ $color }}; padding: 10px; margin: 5px;">
🧸 {{ $name }}
<div>{{ $slot }}</div>
</div>
Using the Toy Block:
<!-- resources/views/playroom.blade.php -->
<x-house>
<h1>🎮 My Playroom</h1>
<x-toy name="Teddy Bear" color="brown">
This is my favorite teddy bear!
</x-toy>
<x-toy name="Race Car" color="red">
Vroom vroom! This car is super fast!
</x-toy>
<x-toy name="Doll" color="pink">
She has pretty hair and a blue dress.
</x-toy>
</x-house>
Real Shopping Cart Example 🛒
Let’s build a shopping cart like putting toys in a basket!
1. The Shopping Basket (Main Layout)
<!-- resources/views/components/shopping-basket.blade.php -->
<div class="basket" style="border: 2px solid brown; padding: 20px;">
<h2>🛒 {{ $title }}</h2>
<div class="items">
{{ $slot }}
</div>
<div class="total">
💰 Total: ${{ $total }}
</div>
</div>
2. Individual Toys (Cart Items)
<!-- resources/views/components/cart-item.blade.php -->
<div class="cart-item" style="border: 1px solid gray; padding: 10px; margin: 5px;">
<div class="item-photo">{{ $photo }}</div>
<div class="item-details">
<h4>{{ $name }}</h4>
<p>{{ $description }}</p>
<strong>${{ $price }}</strong>
<div class="quantity">
Quantity: {{ $quantity }}
</div>
{{ $slot }} <!-- For extra stuff like buttons -->
</div>
</div>
3. Putting It All Together
<!-- resources/views/cart.blade.php -->
<x-house>
<x-shopping-basket title="My Toy Cart" total="45">
<x-cart-item
photo="🧸"
name="Teddy Bear"
description="Soft and cuddly brown bear"
price="15"
quantity="1">
<button>🗑️ Remove</button>
<button>❤️ Save for Later</button>
</x-cart-item>
<x-cart-item
photo="🚗"
name="Red Race Car"
description="Super fast toy car with real sounds"
price="20"
quantity="1">
<button>🗑️ Remove</button>
<button>❤️ Save for Later</button>
</x-cart-item>
<x-cart-item
photo="🎮"
name="Video Game"
description="Fun adventure game for kids"
price="10"
quantity="1">
<button>🗑️ Remove</button>
<button>❤️ Save for Later</button>
</x-cart-item>
</x-shopping-basket>
</x-house>
Named Slots – Like Special Compartments 📦
Think of named slots like different compartments in a toy box:
<!-- resources/views/components/toy-box.blade.php -->
<div class="toy-box">
<div class="lid">
{{ $lid ?? '📦 Toy Box' }}
</div>
<div class="big-toys">
<h4>🧸 Big Toys:</h4>
{{ $bigToys }}
</div>
<div class="small-toys">
<h4>🎲 Small Toys:</h4>
{{ $smallToys }}
</div>
<div class="broken-toys">
<h4>🔧 Broken Toys:</h4>
{{ $brokenToys }}
</div>
</div>
Using the Toy Box:
<x-toy-box>
<x-slot:lid>
🌟 Emma's Special Toy Box
</x-slot:lid>
<x-slot:bigToys>
🧸 Giant Teddy Bear<br>
🚂 Train Set<br>
🏰 Castle Playset
</x-slot:bigToys>
<x-slot:smallToys>
🎲 Dice<br>
🃏 Playing Cards<br>
🎨 Crayons
</x-slot:smallToys>
<x-slot:brokenToys>
🚗 Car with missing wheel<br>
🎮 Game controller (needs batteries)
</x-slot:brokenToys>
</x-toy-box>
Step-by-Step Like Learning to Walk 👶
Step 1: Make One Simple Block
<!-- Make a simple button -->
<button style="background: blue; color: white;">
{{ $text }}
</button>
<!-- Use it -->
<x-button text="Click Me!" />
Step 2: Add More Parts
<!-- Add an icon to the button -->
<button style="background: {{ $color }}; color: white;">
{{ $icon }} {{ $text }}
</button>
<!-- Use it -->
<x-button icon="🛒" text="Add to Cart" color="green" />
Step 3: Make It Interactive
<!-- Add slots for more customization -->
<button style="background: {{ $color }}; color: white;">
{{ $icon }} {{ $text }}
{{ $slot }}
</button>
<!-- Use it -->
<x-button icon="🛒" text="Add to Cart" color="green">
<span class="badge">New!</span>
</x-button>
Easy Rules to Remember 📝
- Components = LEGO blocks you can reuse
- Slots = Empty spaces where you put stuff
- Props = Settings you can change (like color, size)
- Layout = The big base everything sits on
Think of it like:
- 🏠 Layout = Your house
- 🧱 Components = Rooms, furniture, decorations
- 🎯 Slots = Empty spaces to put things
- ⚙️ Props = Settings (blue walls, big windows, etc.)