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

สอน Laravel

ใน 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 ด้านล่าง

    จากตัวอย่าง 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

    about.blade.php

    contact.blade.php
  3. สร้าง Controller ชื่อว่า PageController แล้วใส่ code ดังนี้
  4. กำหนด Route ที่ routes/web.php
  5. จะเห็นผลลัพท์เวลาคลิกเมนู ก็จะเปลี่ยนไปตาม blade view

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

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

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

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

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

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

Comment Code

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

สรุป

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

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

You May Also Like

About the Author: benext

โปรแกรมเมอร์ ติดต่อ : itoffside@hotmail.com

5 Comments

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

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

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

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

    แต่บทนี้ ลองทำตามตัวอย่างมันจะแจ้ง 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’) ถึงจะใช้งานได้ค่ะ

Leave a Reply

Your email address will not be published. Required fields are marked *

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