Dev to webs {Coding…}

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

การสร้าง Layout ด้วย Blade

การสร้าง Layout ด้วย Blade ช่วยให้การจัดการโครงสร้างหน้าเว็บใน Laravel เป็นไปได้ง่ายและมีความเป็นระเบียบมากขึ้น Layout สามารถใช้เป็นแม่แบบสำหรับหน้าเว็บหลายๆ หน้า โดยมีส่วนที่เป็นโครงสร้างหลัก เช่น Header, Footer, Sidebar และส่วนที่เป็นเนื้อหาหลัก (Content) ซึ่งสามารถกำหนดให้แตกต่างกันไปในแต่ละหน้า

การสร้าง Layout แม่แบบใน Blade

  1. สร้างไฟล์ Layout แม่แบบในโฟลเดอร์ resources/views/layouts
  2. ตั้งชื่อไฟล์เป็น main.blade.php (หรือตามต้องการ)

ตัวอย่างไฟล์ main.blade.php:

<!-- resources/views/layouts/main.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
</head>
<body>
    <header>
        <h1>My Laravel App</h1>
        @include('partials.nav')
    </header>

    <main>
        @yield('content')
    </main>

    <footer>
        <p>&copy; 2023 My Laravel App</p>
    </footer>
</body>
</html>

ในตัวอย่างนี้เราใช้คำสั่ง @yield('title') และ @yield('content') ซึ่งจะถูกแทนที่ด้วยเนื้อหาในแต่ละหน้า

การสร้าง View ที่ใช้ Layout นี้

จากนั้นเราจะสร้าง View ที่ใช้ Layout นี้โดยการใช้คำสั่ง @extends เพื่อระบุ Layout ที่ต้องการใช้ และกำหนด @section เพื่อระบุเนื้อหาที่ต้องการในแต่ละส่วน

ตัวอย่างไฟล์ home.blade.php:

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

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

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

ในตัวอย่างนี้ เรากำหนดชื่อหน้าเป็น “Home Page” และเนื้อหาหลักของหน้าผ่านคำสั่ง @section('content') ข้อมูลนี้จะไปแทนที่ตำแหน่ง @yield('content') ใน Layout แม่แบบ main.blade.php

การใช้ @include สำหรับส่วนที่ใช้ร่วมกัน

Blade มีคำสั่ง @include ที่ช่วยให้เราสามารถแทรก View ย่อยๆ เช่น ส่วนของเมนู (Navigation), Header หรือ Footer ได้

ตัวอย่างไฟล์ partials/nav.blade.php:

<!-- resources/views/partials/nav.blade.php -->
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

จากนั้นเราสามารถใช้ @include เพื่อแทรกเมนูนี้เข้าไปใน Layout หลัก main.blade.php โดยใส่ไว้ในตำแหน่งที่ต้องการ เช่น ในส่วน Header

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

การสร้าง Layout ด้วย Blade ช่วยให้การจัดการหน้าเว็บใน Laravel มีความสะดวกมากขึ้น โดยสามารถกำหนดโครงสร้างหลักเพียงครั้งเดียวแล้วใช้เป็นแม่แบบได้หลายหน้า ลดความซ้ำซ้อน และเพิ่มความเป็นระบบในการจัดการเนื้อหาที่แตกต่างกันในแต่ละหน้า