Larval Blade

转自：

http://www.tutorials.kode-blog.com/laravel-blade-template

                                         Kode Blog Tutorials.                                     

duction

In the previous tutorial, we created routes that returned simple text in the web browser. This tutorial blades on the previous tutorial. We will create views that will be returned in the browser in this tutorial. We will use blade template

Blade is a powerful easy to use template that comes with Laravel. Blade templates can be mixed with plain PHP code and it will still work. We are using the HTML5 template E-Shopper from ShapeBootstrap

By the time that you are done with this tutorial, you should have the following beautiful online store

Use composer here

Topics to be covered

We will cover the following topics

  • Template inheritance
  • Master layout
  • Extending the master layout
  • Displaying variables
  • Blade conditional statements
  • Blade Loops
  • Executing PHP functions in blade

Template inheritance

In a nutshell, template inheritance allows us to define a master layout with elements that are common to all web pages. The individual pages extend the master layout. This saves us time of repeating the same elements in the individual pages

Master layout

All blade templates must be saved with the .blade extension. In this section, we are going to create a master template that all pages will extend. The following is the syntax for defining a master layout. 

  1. create a new directory layout in /resources/views/
  2. create a new file master.blade.php in /resources/views/layouts/master.blade.php
  3. add the following code to master.blade.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
    <head>
        <title>@yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

HERE,

  • @yield('title') is used to display the value of the title
  • @section('sidebar') is used to define a section named sidebar
  • @show is used to display the contents of a section
  • @yield('content') is used to display the contents of content

Extending the master layout

We will now create a page that extends the master layout.

  1. create a new page page.blade.php in /resources/views/page.blade.php
  2. add the following code
1
2
3
4
5
6
7
8
9
10
11
12
13

@extends('layouts.master')

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

@section('sidebar')
    @parent

    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
    <p>This is my body content.</p>
@endsection

HERE,

  • @extends('layouts.master') extends the master layout
  • @section('title', 'Page Title') sets the value of the title section.
  • @section('sidebar') defines a sidebar section in the child page of master layout
  • @parent displays the contents of the sidebar section that is defined in the master layout
  • <p>This is appended to the master sidebar.</p> adds paragraph content to the sidebar section
  • @endsection ends the sidebar section
  • @section('content') defines the content section
  • @section('content') adds paragraph content to the content section
  • @endsection ends the content section

We will now add a route that tests our blade template

  1. open /app/Http/routes.php
  2. add the following route

Route::get('blade', function () { return view('page'); });

Save the changes

Load the following URL in your web browser

1

http://localhost/larashop/public/blade

You will get the following results

This is the master sidebar. This is appended to the master sidebar. This is my body content.

Displaying variables in a blade template

In this section, we will define a name variable and pass it to our blade template view

  1. open /app/Http/routes.php
  2. modify the blade route to the following
1
2
3

Route::get('blade', function () {
    return view('page',array('name' => 'The Raven'));
});

Save the change

We will now update pages.blade.php is display the variable

  1. Open /resources/views/page.blade.php
  2. Update the contents to the following
1
2
3
4
5
6
7
8
9
10
11
12
13
14

@extends('layouts.master')

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

@section('sidebar')
    @parent

    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
<h2>{{$name}}</h2>   
<p>This is my body content.</p>
@endsection

HERE,

• {{$name}} double opening curly braces and double closing curly braces are used to display the value of $name variable.

Save the changes

Load the following URL in your web browser

http://localhost/larashop/public/blade

You will get the following results

Use composer here

Note: the value of $name has been displayed "The Raven"

Blade conditional statements

Blade also supports conditional statements. Conditional statements are used to determine what to display in the browser. In this section, we will pass a variable that will determine what to display in the browser. 

  1. Open /app/Http/routes.php
  2. modify the blade route as follows
1
2
3

Route::get('blade', function () {
    return view('page',array('name' => 'The Raven','day' => 'Friday'));
});

HERE,

  • We added another variable day with a value of Friday.

Save the changes

  1. Open /resources/views/page.blade.php
  2. Modify the code to the following
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

@extends('layouts.master')

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

@section('sidebar')
    @parent

    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
<h2>{{$name}}</h2>    
<p>This is my body content.</p>
<h2>If Statement</h2>
@if ($day == 'Friday')
    <p>Time to party</p>
@else
    <p>Time to make money</p>
@endif
@endsection

HERE,

  • @if ($day == 'Friday') starts the if statement and evaluates the condition $day == 'Friday'
  • <p>Time to party</p> is executed if the value of $day is Friday
  • @else is the else part of the if statement
  • @endif ends the if statement

Load the following URL in your browser

http://localhost/larashop/public/blade

You will get the following content at the end of the page Time to party

Blade Loops

Blade template supports all of the loops that PHP supports. In this section, we will look at how we can use the foreach loop in blade to loop through an array of items 1. Open /app/Http/routes.php 2. Modify the code for the blade route to the following

1
2
3
4

Route::get('blade', function () {
    $drinks = array('Vodka','Gin','Brandy');
    return view('page',array('name' => 'The Raven','day' => 'Friday','drinks' => $drinks));
});

HERE,

  • $drinks = array('Vodka','Gin','Brandy'); defines an array variable that we are passing to the blade template

Save the changes

  1. Open /resources/views/page.blade.php
  2. Modify the contents to the following
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

@extends('layouts.master')

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

@section('sidebar')
    @parent

    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
<h2>{{$name}}</h2>    
<p>This is my body content.</p>
<h2>If Statement</h2>
@if ($day == 'Friday')
    <p>Time to party</p>
@else
    <p>Time to make money</p>
@endif

<h2>Foreach Loop</h2>
@foreach ($drinks as $drink)
{{$drink}} <br>
@endforeach
@endsection

Load the following URL in your browser

http://localhost/larashop/public/blade

You will get the following content at the end of the page

1
2
3

Vodka 
Gin 
Brandy

Executing PHP functions in blade

In this section, we will call the PHP date function using blade.

  1. Open /resources/views/page.blade.php
  2. Modify the contents to the following
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

@extends('layouts.master')

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

@section('sidebar')
    @parent

    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
<h2>{{$name}}</h2>    
<p>This is my body content.</p>
<h2>If Statement</h2>
@if ($day == 'Friday')
    <p>Time to party</p>
@else
    <p>Time to make money</p>
@endif

<h2>Foreach Loop</h2>
@foreach ($drinks as $drink)
{{$drink}} <br>
@endforeach

<h2>Execute PHP Function</h2>
<p>The date is {{date(' D M, Y')}}</p>
@endsection

HERE,

  • {{date(' D M, Y')}} double opening and closing curly braces are used to execute the PHP date function.

Load the following URL in your browser

1

http://localhost/larashop/public/blade

You will get the following content at the end of the page

Use composer here

Larashop tutorial project views

In this section, we will use the knowledge gained above to convert our HTML5 template from ShapeBootstrap into Laravel blade templates. We will;

  1. Create a master layout that all the pages will extend. The master layout will contain all the elements that are common to all the pages
  2. Create the individual pages that will match the defined URLs in the previous tutorial
  3. Update the code for Front.php controller to load the views
  4. Add css, images and js assets to the public directory

The HTML template has a lot of line of code. For the sake of brevity, we will only give the general structure in this tutorial. Use the download link above to download the converted Laravel Blade templates.

Step 1: Master layout

Create a new file layout.blade.php in /resources/views/layouts/layout.blade.php Add the following code

1
2
3
4
5
6
7

<!--Header HTML code from E-Shopper Template-->
{{asset('css/name.css')}}
{{url('products')}}

@yield('content')

<!--Footer HTML code from E-Shopper Template-->

HERE,

  • <!--Header HTML code from E-Shopper Template--> this part represents the header section of the template that we downloaded. Open /resources/views/layouts/layout.blade.php in the tutorial files that you downloaded for actual code.
  • {{asset('css/name.css')}} calls the asset helper function and pass in css/name.css as the parameter. The asset function will return the path of the public folder and append css/name.css at the end. For our example, the asset function will return http://localhost/larashop/public/css/name.css
  • {{url('products')}} calls the url helper function and pass in products as the parameter. The url function will create a URL that is relative to the public directory. For our example, the url function will return http://localhost/larashop/public/products
  • @yield('content') is a place holder for the content in the view that we will load from the Front controller
  • <!--Footer HTML code from E-Shopper Template--> this part represents the 
  • Replace the contents of /resources/layouts/layout.blade.php with the contents of the respective file that you downloaded.

Step 2: Child pages

We will now create child pages that will extend the /resources/views/layout.blade.php master layout. All child classes will have the following general layout

1
2
3
4
5
6
7
8
9

@extends('layouts.layout')

@section('content')

<!--HTML code from E-Shopper Template-->
@include('shared.sidebar')
<!--HTML code from E-Shopper Template-->

@endsection

HERE,

  • @extends('layouts.layout') inherits the master layout from layout.blade.php
  • @section('content') defines a section named content that will be loaded in the content section of the master layout
  • <!--HTML code from E-Shopper Template--> HTML code from E-Shopper template
  • @include('shared.sidebar') @include is used to load a sub view from within a view. The sidebar contents content that is common to most pages. It displays product categories, brands etc. 
  • <!--HTML code from E-Shopper Template--> the rest of the HTML code from E-Shopper template
  • @endsection ends the content section

Create the following pages in /resources/views/ directory

  1. blog.blade.php
  2. blog_post.blade.php
  3. cart.blade.php
  4. checkout.blade.php
  5. contact_us.blade.php
  6. home.blade.php
  7. login.blade.php
  8. product_details.blade.php
  9. products.blade.php

Replace the contents of the above files with the contents of the respective files that you downloaded from the link on top

Step 3: Update the Front controller page

We will now update the code in /app/Http/Controllers/Front.php. The function will now load views as opposed to return simple text

  1. Open /app/Http/Controllers/Front.php
  2. Replace the code with the following
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;

class Front extends Controller {

    public function index() {
        return view('home', array('page' => 'home'));
    }

    public function products() {
        return view('products', array('page' => 'products'));
    }

    public function product_details($id) {
        return view('product_details', array('page' => 'products'));
    }

    public function product_categories($name) {
        return view('products', array('page' => 'products'));
    }

    public function product_brands($name, $category = null) {
        return view('products', array('page' => 'products'));
    }

    public function blog() {
        return view('blog', array('page' => 'blog'));
    }

    public function blog_post($id) {
        return view('blog_post', array('page' => 'blog'));
    }

    public function contact_us() {
        return view('contact_us', array('page' => 'contact_us'));
    }

    public function login() {
        return view('login', array('page' => 'home'));
    }

    public function logout() {
        return view('login', array('page' => 'home'));
    }

    public function cart() {
        return view('cart', array('page' => 'home'));
    }

    public function checkout() {
        return view('checkout', array('page' => 'home'));
    }

    public function search($query) {
        return view('products', array('page' => 'products'));
    }

}

Step 4: Copy the assets to the public directory

We will now copy the css, fonts, images and JavaScript files from the E-Shopper template files that we downloaded into the public directory.

  1. Open the Eshopper directory
  2. Copy the following directories
    1. css
    2. fonts
    3. images
    4. js
  3. Paste them into the public directory of larashop

Testing our Laravel blade templates

Open the web browser and load the following URL

1

http://localhost/larashop/public/

You should be able to view the home page Try navigation through the URLs. They should all load without any problems. If you encounter a problem, use the comments section below to ask for solutions and our team will help you out. Other readers may also help you.

Summary

Blade is a powerful easy to use template that simplifies the process of writing views in Laravel. Blade templates can be mixed with plain PHP code and the code will function as expected.

What’s next?

We have a beautiful functional design but it has no life. Continue reading the tutorial series and together we shall breathe life into the online store. If you have found this tutorial useful, use social links below to share it and let us know what you think via the comments section.

posted @ 2016-01-08 01:57  332334273  阅读(298)  评论(0)  编辑  收藏  举报