Template inheritance (@extends, @section, @yield) in Laravel - Mini Project: Build & Apply

Template Inheritance with @extends, @section, and @yield in Laravel

📖 Scenario: You are building a simple website with a consistent layout. You want to create a main layout template and then create a page that uses this layout. This helps keep your site organized and easy to update.

🎯 Goal: Create a base layout template using @yield for content placeholders. Then create a child template that uses @extends to inherit the layout and fills in content using @section.

📋 What You'll Learn

Create a base layout file named layout.blade.php with a @yield('content') placeholder inside the <main> tag.

Create a child view file named home.blade.php that uses @extends('layout') to inherit the layout.

In home.blade.php, define a @section('content') that includes a heading <h1>Welcome Home</h1> and a paragraph <p>This is the home page.</p>.

End the section with @endsection.

💡 Why This Matters

🌍 Real World

Web developers use template inheritance to build websites with consistent layouts and reusable code, saving time and reducing errors.

💼 Career

Understanding Laravel's Blade template inheritance is essential for backend and full-stack developers working with Laravel to create maintainable web applications.

1

Create the base layout template

Create a file named layout.blade.php with a basic HTML5 structure. Inside the <body>, add a <main> tag containing @yield('content') to mark where child views will insert their content.

Laravel

    
    
    My Website


    
        @yield('content')
    



# Your code here

Hint

Remember, @yield('content') is a placeholder for child templates to fill in.

2

Set up the child view to extend the layout

Create a file named home.blade.php. At the top, write @extends('layout') to inherit the base layout template.

Laravel

@extends('layout')

# Your code here

Hint

Use @extends('layout') exactly to link to the base layout.

3

Add content section in the child view

In home.blade.php, add a @section('content') block. Inside it, add an <h1> with text Welcome Home and a <p> with text This is the home page.. Close the section with @endsection.

Laravel

@extends('layout')

@section('content')
    
@endsection

Hint

Make sure to open the section with @section('content') and close it with @endsection.

4

Complete the child view with content

Ensure home.blade.php fully contains @extends('layout'), the @section('content') block with the heading and paragraph, and ends with @endsection.

Laravel

@extends('layout')

@section('content')
    Welcome Home
    This is the home page.
@endsection

# Your code here

Hint

Double-check that all parts are present and correctly spelled.

Practice

1. What is the main purpose of the @extends directive in Laravel Blade templates?

easy

A. To define a section of content inside a template

B. To display content from a section in the layout

C. To specify which base layout the current view should use

D. To include a partial view inside another view

Solution

1. Step 1: Understand the role of @extends

   The @extends directive tells Laravel which base layout file the current view should build upon.

2. Step 2: Differentiate from other directives

   @section defines content blocks, @yield displays them, and including partials uses @include. Only @extends sets the base layout.

3. Final Answer:

   To specify which base layout the current view should use -> Option C

4. Quick Check:

   @extends = base layout [OK]

Hint: Remember: @extends picks the base layout file [OK]

Common Mistakes:

• Confusing @extends with @section
• Thinking @extends outputs content
• Mixing @extends with @include

2. Which of the following is the correct syntax to define a content section named 'title' in a Blade template?

easy

A. @section('title') ... @endsection

B. @yield('title') ... @endyield

C. @extends('title') ... @endextends

D. @include('title') ... @endinclude

Solution

1. Step 1: Recall syntax for defining sections

   In Blade, @section('name') starts a content block, and @endsection ends it.

2. Step 2: Identify correct usage

   @yield is for displaying sections, @extends sets layout, and @include inserts partials. Only @section defines content.

3. Final Answer:

   @section('title') ... @endsection -> Option A

4. Quick Check:

   Define section = @section('name') [OK]

Hint: Use @section('name') to start content blocks [OK]

Common Mistakes:

• Using @yield to define content
• Trying to use @extends as a section
• Confusing @include with section definition

3. Given the following Blade layout file layouts/app.blade.php:

<html>
<head>
    <title>My Site - @yield('title')</title>
</head>
<body>
    @yield('content')
</body>
</html>

And a child view:

@extends('layouts.app')
@section('title', 'Home Page')
@section('content')
<h1>Welcome!</h1>
@endsection

What will be the rendered HTML output?

medium

A. Syntax error due to incorrect section usage

B.

My Site - @section('title', 'Home Page')

@section('content')
Welcome!
@endsection

C.

My Site -

D.

My Site - Home Page

Welcome!

Solution

1. Step 1: Understand @yield and @section interaction

   The layout uses @yield('title') and @yield('content') to display content from child sections.

2. Step 2: Check child view sections

   The child view defines @section('title', 'Home Page') and a content section with an <h1> tag. These replace the yields in the layout.

3. Final Answer:

   The rendered HTML includes the title 'Home Page' and the <h1>Welcome!</h1> content -> Option D

4. Quick Check:

   @yield shows @section content [OK]

Hint: Remember: @yield outputs content from matching @section [OK]

Common Mistakes:

• Expecting raw @section tags in output
• Missing that @section('title', 'text') sets inline content
• Confusing @yield with @section definition

4. Consider this Blade child view code:

@extends('layouts.master')
@section('content')
<p>Hello World</p>

What is the problem with this code?

medium

A. Missing @endsection to close the content section

B. Incorrect use of @extends directive

C. Cannot use HTML inside @section

D. Should use @yield instead of @section

Solution

1. Step 1: Check section syntax completeness

   The @section('content') directive must be closed with @endsection to mark the end of the content block.

2. Step 2: Identify missing closing directive

   The code snippet lacks @endsection, causing a syntax error or unexpected behavior.

3. Final Answer:

   Missing @endsection to close the content section -> Option A

4. Quick Check:

   Always close @section with @endsection [OK]

Hint: Always pair @section with @endsection [OK]

Common Mistakes:

• Forgetting to close @section
• Thinking @yield defines content
• Believing HTML is not allowed inside sections

5. You have a base layout with multiple @yield placeholders: title, header, and content. You want to create a child view that fills only content and uses a default title and header from the layout. How should you write the child view?

hard

A. @extends('layouts.base')
@yield('title')
@yield('header')
@section('content')
Page content here
@endsection

B. @extends('layouts.base')
@section('content')
Page content here
@endsection

C. @extends('layouts.base')
@section('title', 'Default Title')
@section('header', 'Default Header')
@section('content')
Page content here
@endsection

D. @extends('layouts.base')
@include('title')
@include('header')
@section('content')
Page content here
@endsection

Solution

1. Step 1: Understand default content in layout

   If the base layout provides default content for title and header, you don't need to override those sections in the child view.

2. Step 2: Write child view with only needed sections

   Only define the content section in the child view to fill that placeholder, leaving others to default.

3. Final Answer:

   Child view extends layout and defines only content section -> Option B

4. Quick Check:

   Define only needed sections; others use layout defaults [OK]

Hint: Only override sections you want to change in child views [OK]

Common Mistakes:

• Overriding sections unnecessarily
• Using @yield inside child views
• Trying to include sections with @include