Scribd
Upload
10 views17 pages

Lec7 - Views and Blade Templates

The document provides an overview of Views and Blade Templates in Laravel, explaining their role in rendering HTML content and maintaining a separation of concerns. It covers creating views, passing data, and utilizing Blade's templating features, including directives for control structures and layout inheritance. The benefits of layout inheritance, such as code reusability and simplified maintenance, are also highlighted.

Uploaded by

gtas8626
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views17 pages

Lec7 - Views and Blade Templates

The document provides an overview of Views and Blade Templates in Laravel, explaining their role in rendering HTML content and maintaining a separation of concerns. It covers creating views, passing data, and utilizing Blade's templating features, including directives for control structures and layout inheritance. The benefits of layout inheritance, such as code reusability and simplified maintenance, are also highlighted.

Uploaded by

gtas8626
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Laravel

Views and Blade Templates


MAGED SHEGHDARA
What are Views
➢Views serve as the presentation layer in Laravel applications, responsible for rendering
HTML content and presenting data to users.

➢They enable developers to maintain a separation of concerns, keeping the


presentation logic separate from the application's business logic.

2
Creating Views
➢Views are typically stored in the resources/views directory and can be created
manually or generated using Laravel's Artisan command-line tool.

➢// Command to create a view named "welcome.blade.php"

➢php artisan make:view welcome

➢Once you have created a view, you may return it from one of your application's routes or
controllers using the global view helper
Route::get('/', function () {
return view('welcome');
});

3
Passing Data to Views
➢Controllers pass data to views using an associative array or the compact function.

return view('welcome', ['name' => 'Ahmed']);


Or
return view('welcome')
->with('name', 'Ahmed');

4
Blade Templates
➢Blade is the simple, yet powerful templating engine that is included with Laravel.

➢Blade template files use the .blade.php file extension and are typically stored in the
resources/views directory.

➢Blade views are compiled into plain PHP code

5
Displaying Data
➢You may display data that is passed to your Blade views by wrapping the variable in
curly braces.

Hello, {{ $name }}.

6
Blade Directives

➢In addition to displaying data, Blade also provides convenient shortcuts for
common PHP control structures, such as conditional statements and loops.

7
Blade Directives
If Statements
➢You may construct if statements using the @if, @elseif, @else, and @endif directives.
@if (count($records) === 1)
I have one record!
@elseif (count($records) > 1)
I have multiple records!
@else
I don't have any records!
@endif

8
Blade Directives
Switch statements
@switch($i)
@case(1)
First case...
@break
@case(2)
Second case...
@break
@default
Default case...
@endswitch

9
Blade Directives
Loops @while (true)
<p>I'm looping forever.</p>
@for ($i = 0; $i < 10; $i++)
@endwhile
The current value is {{ $i }}
@endfor

@foreach ($users as $user)


<p>This is user {{ $user->id }}</p>
@endforeach

10
Including Sub-views
➢Blade's @include directive allows you to include a Blade view from within another
view.
<div>
@include('shared.errors')

<form>
<!-- Form Contents -->
</form>
</div>

11
Building Layouts using Inheritance
➢ Most web applications maintain the same general layout across various pages.
➢ It would be incredibly cumbersome and hard to maintain our application if we had to
repeat the entire layout HTML in every view we create.
➢ Blade layout inheritance is a powerful feature that allows developers to create consistent
and structured layouts for their web applications.
➢ With layout inheritance, you can define a master layout file that contains the overall
structure of your web pages, including headers, footers, navigation menus, and content
sections.
➢ Child views can then extend this master layout and fill in specific content sections with
their own content.
➢ This approach promotes code reusability, maintainability, and consistency across your
application's views.

12
Defining a Layout
➢To create a master layout in Blade, you typically create a file, such as layout.blade.php,
in the resources/views directory.

➢This layout file contains the HTML structure that is common to all pages of your
application, including the header, footer, and navigation menu.

➢You can use Blade directives such as @yield to define placeholders for dynamic
content that will be filled in by child views.

13
Master Layout (layout.blade.php)
<html> <main>
<head> @yield('content')
<title>@yield('title')</title> </main>
</head> <footer>
<body>
<!-- Footer content -->
<header>
</footer>
<!-- Header content -->
</body>
</header>
</html>
<nav>
<!-- Navigation menu -->
</nav>

14
Extending the Master Layout
➢Child views extend the master layout by using the @extends directive at the top of the
file, followed by the name of the layout file to extend.

➢Within the child view, you can use the @section directive to define content sections
that will replace the corresponding placeholders in the master layout.

➢Child views can then include their own content within these sections, allowing for
customization while maintaining the overall layout structure defined in the master
layout.

15
Child View (home.blade.php)
@extends('layout')

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

@section('content')

<h1>Welcome to the Home Page</h1>

<p>This is the content of the home page.</p>

@endsection

16
Benefits of Layout Inheritance
➢Layout inheritance offers several benefits for Laravel developers:
1) Promotes code reusability: Master layouts can be reused across multiple views,
reducing duplication of code.

2) Simplifies maintenance: Changes to the layout can be made in a single location,


affecting all child views that extend the layout.

3) Enhances consistency: By defining a consistent layout structure, layout inheritance


helps maintain visual consistency across the application.

17

You might also like