Laravel – EP10 การใช้งาน Blade Template - itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี

ใน Laravel เวอร์ชั่น 5 เป็นต้นมาได้มีการนำเอา Blade Template มาใช้งานในส่วนของ view ซึ่ง Blade Template คือ Template Engine ที่เราสามารถเขียนโค๊ด php ผสมกับ html ได้อย่างเรียบง่าย แต่ผลลัพท์ที่ได้ทรงพลัง ซึ่งเราสามารถนำไปใช้กับ Frontend อย่าง vuejs, angularjs ได้อีกด้วย การใช้งานนั้นเราไม่จำเป็นต้องติดตั้งอะไรแล้วเพราะว่า blade template ถูกติดตั้งมาตั้งแต่ตอนที่เราติดตั้ง laravel แล้ว เพียงแค่เราทำการสร้างไฟล์ example.blade.php เราก็สามารถใช้ blade template ได้เลย

ขั้นตอนการสร้าง Blade Template Layout

เป็นขั้นตอนของการสร้าง Master Template เพื่อที่เราจะใช้ Master นี้ในทุกๆหน้า ดังนั้นเราต้องมี Layout template สำหรับเป็น Template หลักก่อน ให้ทำตามขั้นตอน
1.) สร้างโฟล์เดอร์ layout ไว้ที่ resources/views (เราจะเอา blade template ไว้ใน โฟล์เดอร์นี้ด้วย)
2.) หลังจากสร้างโฟล์เดอร์ layout แล้วให้ สร้างไฟล์ master.blade.php ไว้ในโฟล์เดอร์ layout ลองดู Code ด้านล่าง

<html>
<head>
<title>DemoLaravel - @yield('title')</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container my-5">
<div class="row">
<div class="col-md-4">
<ul class="list-group">
<li class="list-group-item"><a href="{{ url('home') }}">หน้าแรก</a></li>
<li class="list-group-item"><a href="{{ url('about') }}">เกี่ยวกับเรา</a></li>
<li class="list-group-item"><a href="{{ url('contact') }}">ติดต่อเรา</a></li>
</ul>
</div>
<div class="col-md-8">                
<div class="card">
<div class="card-body">
@yield('content')
</div>
</div>
</div>
</div>
</div>
</body>
</html>

<html>

<head>

<title>DemoLaravel - @yield('title')</title>

</head>

<body>

<li class="list-group-item"><a href="{{ url('about') }}">เกี่ยวกับเรา</a></li>

</ul>

</div>

@yield('content')

</div>

</body>

</html>

จากตัวอย่าง code ให้เราสังเกตุว่าถ้าเรามี header, menu left, content ตรงกลาง แล้วเราอยากให้ header, menu left คงเดิมแต่ content ตรงกลางมีการเปลี่ยนแปลงตลอดเมื่อเปลียนเมนู เราจะใช้คำสั่ง @yield(‘content’) และถ้าเราต้องการเปลี่ยน tag Title ทุกๆหน้าเวลาเปลียนเมนูเราก็ใช้คำสั่ง @yield(‘title’)

ในขั้นตอนนี้เราสามารถใช้งาน layout Master template ที่สร้างจากขั้นตอนแรกได้แล้ว โดยเราเรียกว่าการ extends ซึ่งสิ่งที่เราได้กำหนดจาก layout Master คือมี title, content ที่เราจะเจาะ แล้วใส่เนื้อหาเข้าไป
ให้เราไปสร้างไฟล์ home.blade.php, about.blade.php, contact.blade.php ไว้ใน resources/views จากนั้นให้ใส่ code ตัวอย่าง ทั้ง 3 ไฟล์ตามลำดับ
home.blade.php

@extends('master.app') @section('title', 'Home Page') @section('content') <p>This is Home content.</p> @endsection

1
2
3
4
5
6
7

@extends('master.app')

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

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

about.blade.php

@extends('master.app') @section('title', 'About Page') @section('content') <p>This is Abount content.</p> @endsection

1
2
3
4
5
6
7

@extends('master.app')

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

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

contact.blade.php

@extends('master.app') @section('title', 'Contact Page') @section('content') <p>This is Contact content.</p> @endsection

1
2
3
4
5
6
7

@extends('master.app')

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

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

สร้าง Controller ชื่อว่า PageController แล้วใส่ code ดังนี้

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PageController extends Controller
{
public function home()
{
return view('home');
}
public function about()
{
return view('about');
}
public function contact()
{
return view('contact');
}
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PageController extends Controller

{

public function home()

{

return view('home');

}

public function about()

{

return view('about');

}

public function contact()

{

return view('contact');

}

กำหนด Route ที่ routes/web.php

<?php Route::get('/', 'PageController@home'); Route::get('home', 'PageController@home'); Route::get('about', 'PageController@about'); Route::get('contact', 'PageController@contact');

1
2
3
4
5

<?php
Route::get('/', 'PageController@home');
Route::get('home', 'PageController@home');
Route::get('about', 'PageController@about');
Route::get('contact', 'PageController@contact');
จะเห็นผลลัพท์เวลาคลิกเมนู ก็จะเปลี่ยนไปตาม blade view

การนำตัวแปรมาแสดงผล

ในบางทีเราอาจมีการส่งข้อมูลตัวแปรจาก Controller มาแสดงผลที่ View ซึ่งถ้าเป็น Framework อื่นใช้งานแบบนี้ <?php echo $result[‘document’]; ?> เป็นต้น แต่ใน Blade Template Engine เราไม่จำเป็นต้องสร้าง Syntax ให้ยุ่งยากและวุ่นวายเราสามารถใช้ {{ }} ในการนำตัวแปลมาแสดงผลได้เลย เช่น

Hello, {{ $name }}.

1	Hello, {{ $name }}.

หรือกรณีถ้าเราต้องการใช้ Function PHP เราก็สามารถเรียกใช้งานได้ทันที เช่น

Hello current time, {{ date('d/m/Y H:i') }}.

1	Hello current time, {{ date('d/m/Y H:i') }}.

การควบคุมเงื่อนไขหรือวนลูป(IF, FOREACH)

ในบางทีเราอาจมีการตรวจสอบการแสดงผล ต้องใช้เงื่อนไขบางอย่าง ก็สามารถทำได้เพียงคำสั่ง @if ลองดูตัวอย่างการใช้งาน

if (count($records) === 1)
I have one record!
@elseif (count($records) > 1)
I have multiple records!
@else
I don't have any records!
@endif

if (count($records) === 1)

I have one record!

@elseif (count($records) > 1)

I have multiple records!

@else

I don't have any records!

@endif

ถ้าหากเราต้องการวนข้อมูล สามารถใช้ @for, @foreach ได้ตามตัวอย่าง code ด้านล่าง

@for ($i = 0; $i < 10; $i++)
The current value is {{ $i }}
@endfor
@foreach ($users as $user)
<p>This is user {{ $user->id }}</p>
@endforeach

@for ($i = 0; $i < 10; $i++)

The current value is {{ $i }}

@endfor

@foreach ($users as $user)

@endforeach

Comment Code

สามารถ Comment code ใน Blade template ได้โดยใช้

{{-- This comment will not be present in the rendered HTML --}}

1	{{-- This comment will not be present in the rendered HTML --}}

สรุป

Blade Template เป็น Template Engine ของ Laravel เราสามารถใช้งานได้เลยไม่จำเป็นต้องติดตั้งเพิ่ม ใช้ง่าย เข้าใจง่าย และทำให้การเขียนโปรแกรม Clean code ขึ้น ผู้เขียนจึงแนะนำให้ใช้ Blade Template เลย ซึ่งบทความทางผู้เขียน เขียนขึ้นมาน่าจะเป็นแนวทางให้ใครหลายคนสามารถนำไปประยุกต์ปฏิบัต ได้ไม่มากก็น้อย

สำหรับบทความ Blade Template ก็มีเพียงเท่านี้หากมีข้อคำถามใดๆ เพิ่มเติม พิมพ์ comment แจ้งมาได้เลยครับ

This site uses Akismet to reduce spam. Learn how your comment data is processed.

5 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

SS2SEK

4 years ago

Facade\Ignition\Exceptions\ViewException
View [master.app] not found. (View: /Users/xxxx/Desktop/WorkSpace/work/webapp/api-store/resources/views/home/index.blade.php)

ต้องแก้ยังไงครับ?

Onmobile

Author

Reply to SS2SEK

ไม่มีไฟล์ blade ที่เรียกใช้ครับ

Best

บทความอ่านแล้วเข้าใจง่ายดีครับ รอ Ep. ต่อไปครับ

Reply to Best

ขอบคุณครับ

Kizx

เนื้อหาอ่านง่ายดีค่ะ ทำตามง่ายดีค่ะ

แต่บทนี้ ลองทำตามตัวอย่างมันจะแจ้ง error ว่า Facade\Ignition\Exceptions\ViewException View [master.app] not found.
เพราะเราสร้าง master.blade.php ไว้ใต้ folder layout ดังนั้นจึงไม่รู้จัก master.app

เลยลองแก้บรรทัดแรกของไฟล์ home.blade.php, about.blade.php, contact.blade.php ให้เป็น @extends(‘layout.master’) ถึงจะใช้งานได้ค่ะ

itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี

ข้อมูลข่าวสารและเรื่องราวบนโลกของไอทีที่ ล้ำหน้า พร้อมสาระการเขียนโปรแกรมคอมพิวเตอร์

Laravel – EP10 การใช้งาน Blade Template

ขั้นตอนการสร้าง Blade Template Layout

การนำตัวแปรมาแสดงผล

การควบคุมเงื่อนไขหรือวนลูป(IF, FOREACH)

Comment Code

สรุป

About the Author: Onmobile

ขั้นตอนการสร้าง Blade Template Layout

การนำตัวแปรมาแสดงผล

การควบคุมเงื่อนไขหรือวนลูป(IF, FOREACH)

Comment Code

สรุป

You May Also Like

PHP Workshop Register+Login ระบบสมัครสมาชิก+Login [Full Course] สอนละเอียด ฟรี!

PHP Workshop Shoppingcart จัดการสินค้า, ตะกร้าสินค้า, สั่งซื้อสินค้า [Full Course] สอนละเอียด ฟรี!

About the Author: Onmobile