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

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

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

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.

时间： 2024-10-14 22:24:29

Larval Blade的相关文章

Laravel 5 系列教程三：视图变量传递和Blade

免费视频教程地址https://laravist.com/series/laravel-5-basic 上一篇我们简单地说了Router,Views和Controllers的工作流程,这一次我就按照上一篇的计划,来说说下面几个内容: 向视图中传递变量 Blade模板的用法 向视图中传递变量 我们在开发web应用当中,通常都不是为了写静态页面而生的,我们需要跟数据打交道,那么这个时候,问题就来了,在一个MVC的框架中,怎么将数据传给视图呢?比如我们要在 ArticleController 的 in

引擎设计跟踪(九.14.2 final) Inverse Kinematics: CCD 在Blade中的应用

因为工作忙, 好久没有记笔记了, 但是有时候发现还得翻以前的笔记去看, 所以还是尽量记下来备忘. 关于IK, 读了一些paper, 觉得之前翻译的那篇, welman的paper (http://graphics.ucsd.edu/courses/cse169_w04/welman.pdf  摘译:http://www.cnblogs.com/crazii/p/4662199.html) 非常有用, 入门必读. 入门了以后就可以结合工程来拓展了. 先贴一下CCD里面一个关节的分析: 当Pic的方

TODO：Laravel 使用blade标签布局页面

本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop,@push.使代码精简.提高页面下载速度.表现和内容相分离.站在开发者的角度看,web页面都可以提取相同的内容进行分离,让每个页面代码尽显主题内容,简洁明快,干扰信息少. 1. Laravel的blade标签代码格式是"命名.blade.php",这样是不是很简洁. 2. 创建统一布局风格的代码模板main.blade.php,使用HTML5

laravel-模板引擎Blade

一.概述 Blade是Laravel提供的一个既简单又强大的模板引擎 和其他流行的PHP模板引擎不一样,Blade并不限制你在视图view中使用原生的PHP代码 所有的Blade视图页面都将被编译成原生的PHP代码并缓存起来,除非你的的模板文件修改,否则不会重新编译 模板继承:section,yield,extends,parent 二.实例 1.定义布局模板 views/people/layout/layout.blade.php <!DOCTYPE html> <html> &

在blade中定义一个可以被模版使用的变量

laravel的blade中的数据一般由控制器传入,但是有没有什么办法临时在blade模版中创建并且被blade所使用吗? 答案是肯定的,不过语法稍微复杂一点 {{-- */$variableAvailableInBlade = URL::to('admin/yinbiaos'); /* --}} @if $variableAvailableInBlade ...

Laravel 5.1 Blade模板引擎

为什么要使用blade 它是干什么用的? blade模板引擎使我们写HTML页面的地方,使用它是因为它能给我们提供很多的遍历,减少代码的重复率 提高开发效率.我们写blade的路径是 resources/view 下,它的文件名后缀是blade.php. 1 继承 继承是相当爽的,它可以从主模板继承所有代码,以免大量的代码重复.这样说比较片面,具体看眼代码吧. 1.1 模板继承拓展 代码片段 首先先创建一个 admin/layout.blade.php: <!DOCTYPE html> <

laravel框架总结(二) -- blade模板引擎

## 1.基本用法 ##情形1 $name = laravel5 <div class="title"> {{$name}} {{$name}}</div> //输出结果是 larave5 larave5 ##情形2 $name = laravel5 并且使用@的情形 <div class="title"> {{$name}} @{{$name}}</div> //输出结果是 larave5{{$name}} ##情形

Laravel学习第一天（创建laravel项目、路由、视图、blade模板）

创建laravel项目 composer create-project laravel/laravel learnlv 4.1.* 查看帮助:composer create-project 使用artisan工具 生成key:php artisan key:genrate,更多命令见:http://blog.luoyunshu.com/laravel-cheatsheet 路由 route.php: <?php /* |--------------------------------------

Blade和其他构建工具有什么不同

大部分人都至少接触过不止一种构建工具,比如make,autotools.而我们开发了Blade,为什么那么多现成的工具不用,而又再造了一个轮子,相对于传统的make等工具,Blade的好处在又哪里呢?你的项目是否适合用Blade来构建, 以前的文档都是冷冰的介绍,今天本文将从作者和开发人员以及项目代码维护者的角度回答这些问题. Blade总的来说要解决这些问题: 真正环境下的C++软件的开发,往往有数十人甚至数百个开发人员,源代码有成千上万个文件,百万甚至千万行.如何高效而安全地构建这些代码?