Use `Laravel` `template` and `blade`

Introduction

This article is a learning record of Laravel, mainly about how to use Laravel blade. Here are some points:

  1. Create and reuse template
  2. Use yield and section
  3. Pass data to view
  4. What {{ }} does for us?

Create template

  • Create a template named layout as follows:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    // Set range of title with yield, and set 'Laracasts' as its default value. If value of title is not specified, default value will be applied
    <title>@yield('title', 'Laracasts')</title>
    </head>
    <body>
    <ul>
    <li><a href="/">Welcome</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">contact</a></li>
    </ul>
    // Set range of section named content with yield
    @yield('content')
    </body>
    </html>

Use section

  • we could directly use the template we created above
    // We directly apply the 'template' named 'layout'
    @extends('layout')
    // Use section, insert value we want into the area we've set in template. We insert value into 'title' section
    @section('title', 'Welcome Page')
    // Use section to insert value into section named 'content'
    @section('content')
    <h1>Welcome here</h1>
    // Use endsection to specify the range of section named 'content'
    @endsection

  • Repeat the operation above, we apply this templete to multiple pages

Pass value to view

  • To pass value to view, actually there is a couple of ways. I will list 4 of them below:

1.

Route::get('/', function () {
$task = [
'Go to the school',
'Go to the market',
'Go to work'
];

return view('welcome', compact('task')
);

});

2.

Route::get('/', function () {
$task = [
'Go to the school',
'Go to the market',
'Go to work'
];

return view('welcome', ['tasks' => $task]
);
  1. Route::get('/', function () {

    return view('welcome', ['tasks' => [
    'Go to the school',
    'Go to the market',
    'Go to work'
    ]]);

    });
Route::get('/', function () {

return view('welcome')->withTasks([
'Go to the school',
'Go to the market',
'Go to work'
]);

});

4 of them above, Ray would like to use the first one.

Catch the value in view

  • Catch the value in view and render

    @extends('layout')
    @section('title', 'Welcome Page')
    @section('content')
    <h1>Welcome here</h1>
    <ul>
    @foreach ($tasks as $task)
    <li>
    {{ $task }}
    </li>
    @endforeach
    </ul>
    @endsection
  • In blade file of Laravel, we would fetch variables within {{ }}

  • As follows:

What blade {{ }} does for us?

  • Besides for fetching passed data, {{ }} also execute function of PHP called htmlspecialchars to prevent XSS attack
  • Let’s make an experiment with blade
    Route::get('/', function () {

    $test = '<script>alert("test")</script>';
    return view('welcome')->withTasks([
    'Go to the school',
    'Go to the market',
    'Go to work'
    ])->withTest($test);

    });
@extends('layout')
@section('title', 'Welcome Page')
@section('content')
<h1>{{ $test }}</h1>
<ul>
@foreach ($tasks as $task)
<li>
{{ $task }}
</li>
@endforeach
</ul>
@endsection

As what shows above, the browser render the variable with script tag as follows:

  • Let’s have another experiment. We could deactivate htmlspecialchars by using {!! !!}, but be careful with this feature.
    @extends('layout')
    @section('title', 'Welcome Page')
    @section('content')
    <h1>{!! $test !!}</h1>
    <ul>
    @foreach ($tasks as $task)
    <li>
    {{ $task }}
    </li>
    @endforeach
    </ul>
    @endsection

The rendered result is as follows:

It shows that the script was executed without escaping

Conclusion

There are still a lot of usage about blade, I might update this article in the future.

Deploy Laravel project on Server Implement Laravel Queue with AWS SQS

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×