Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 15: การใช้งาน Blade Template

Blade เป็น Template Engine ของ Laravel ที่ช่วยในการสร้างหน้าเว็บ โดยสามารถใช้คำสั่งของ Blade เพื่อแสดงข้อมูล ทำเงื่อนไข และวนลูปได้อย่างง่ายดาย Blade ถูกออกแบบมาเพื่อทำให้การจัดการ View เป็นไปได้อย่างสะดวกและมีประสิทธิภาพ

การใช้งาน Blade Template เบื้องต้น

Laravel จะแปลงไฟล์ Blade เป็น HTML โดยอัตโนมัติเมื่อแสดงผลหน้าเว็บ ซึ่งไฟล์ Blade จะมีนามสกุล .blade.php และจะถูกเก็บไว้ในโฟลเดอร์ resources/views/

การแสดงข้อมูลด้วย Blade

สามารถใช้ {{ ... }} ในการแสดงผลข้อมูล เช่น:

<!-- resources/views/welcome.blade.php -->
<h1>Hello, {{ $name }}!</h1>

หากใน Controller มีการส่งข้อมูล $name ไปยัง View นี้ จะมีการแสดงผลออกมาเป็นข้อความตามค่าของตัวแปร $name

การใช้เงื่อนไขใน Blade

Blade รองรับการใช้เงื่อนไข เช่น if, else, elseif, switch โดยมีรูปแบบที่เข้าใจง่าย:

@if($age >= 18)
    <p>คุณสามารถเข้าถึงเนื้อหานี้ได้</p>
@else
    <p>ขออภัย คุณต้องมีอายุ 18 ปีขึ้นไป</p>
@endif

การใช้ลูปใน Blade

Blade ยังรองรับการใช้ลูป เช่น for, foreach, while:

@foreach($products as $product)
    <p>{{ $product->name }} - ราคา: {{ $product->price }} บาท</p>
@endforeach


การใช้ Layout และ Section

Blade รองรับการสร้าง Layout เพื่อใช้เป็นแม่แบบในการจัดโครงสร้างหน้าหลัก และกำหนด section เพื่อเพิ่มคอนเทนต์เฉพาะในแต่ละหน้า

  1. สร้าง Layout แม่แบบ (main.blade.php):
<!-- resources/views/layouts/main.blade.php -->
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <header>
        <h1>My Application</h1>
    </header>
    <div class="content">
        @yield('content')
    </div>
</body>
</html>

2. สร้าง View ที่ใช้ Layout นี้ (home.blade.php):

<!-- resources/views/home.blade.php -->
@extends('layouts.main')

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

@section('content')
    <p>ยินดีต้อนรับสู่หน้าแรกของเรา</p>
@endsection

การส่งข้อมูลจาก Controller ไปยัง Blade

ใน Controller สามารถส่งข้อมูลไปยัง Blade Template ได้โดยใช้ฟังก์ชัน view() เช่น:

public function index()
{
    $name = 'John Doe';
    $products = [
        (object)['name' => 'Product A', 'price' => 100],
        (object)['name' => 'Product B', 'price' => 200],
    ];
    return view('home', compact('name', 'products'));
}

การนำไปใช้งาน

Blade Template ช่วยให้การจัดการและสร้างหน้าเว็บเป็นไปอย่างมีประสิทธิภาพ ด้วยการใช้คำสั่งเฉพาะของ Blade เราสามารถจัดการกับข้อมูลและเนื้อหาต่างๆ ได้ง่ายขึ้น รวมถึงสามารถสร้าง Layout เพื่อใช้เป็นแม่แบบให้กับหลายๆ หน้าภายในแอปพลิเคชัน ทำให้การจัดการ View เป็นไปอย่างมีระบบ