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

ใน 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

1. เป็นขั้นตอนของการสร้าง 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>

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

2. ในขั้นตอนนี้เราสามารถใช้งาน 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

   about.blade.php

   @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

3. สร้าง 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');
       }
   }

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

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

5. จะเห็นผลลัพท์เวลาคลิกเมนู ก็จะเปลี่ยนไปตาม blade view

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

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

Hello, {{ $name }}.

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

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

ถ้าหากเราต้องการวนข้อมูล สามารถใช้ @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

Comment Code

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

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

สรุป

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

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