สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

01-406-093-203

การพัฒนาเว็บแอปพลิเคชันด้วยเฟรมเวิร์ค

โดย นายศุภมิตร จันทร์โทวงศ์

สาขาวิชาระบบสารสนเทศ คณะบริหารธุรกิจ

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 1 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

เช็คชื่อเข้าชั้นเรียน

ให้นักศึกษาสแกน QR Code นี้เพื่อเข้าสู่ระบบเช็คชื่อเข้าเรียน
ระบบจะทำการบันทึกประวัติการเข้าเรียนในวิชานี้อัตโนมัติ

สแกนเพื่อเช็คชื่อเข้าชั้นเรียน (สัปดาห์ที่ 4)

ระบบเช็คชื่อปิดการลงทะเบียนชั่วคราว

ผู้สอนยังไม่ได้เปิดระบบเช็คชื่อสำหรับบทเรียนสัปดาห์นี้ หรือหมดเวลากรอกข้อมูลแล้ว

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 2 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

กิจกรรมท้าทายสายตา: Bootstrap Reflex!

ทบทวนความรู้เรื่องการตั้งชื่อคลาสและสีประจำโทนของ Bootstrap 5
กฎของเกมส์: คลิกปุ่มสีด้านล่างให้ตรงกับคลาสสไตล์ที่แสดงตรงกลางหน้าจอ
ท้าทายสติและความเร็วในเวลาจำกัดเพียง 20 วินาที!
มาร่วมแข่งขันทำคะแนนสะสมสูงสุดและคว้าฉายา Bootstrap Grandmaster ไปครอง

Bootstrap Color Reflex!

ฝึกสติและความคุ้นเคยกับคลาสสีมาตรฐานของ Bootstrap! กดปุ่มสีให้ตรงกับชื่อคลาสคีย์เวิร์ดที่แสดงด้านบนให้ถูกต้องและรวดเร็วที่สุดในเวลา 30 วินาที

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 3 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

กิจกรรมประลองนิ้ว: Click Speed Test (CPS)

เกมเสริมพัฒนาการแบบเบาสมองเพื่อทดสอบความไวการประสานงานของนิ้วมือ
กฎการท้าทาย: คลิกปุ่มเป้าหมายให้ได้จำนวนครั้งมากที่สุดภายในเวลา 15 วินาที
เฉลี่ยความเร็วเป็น CPS (Clicks Per Second) พร้อมระบบสถิติสูงสุด
ผู้ที่มีคะแนนความเร็วสูงสุดจะได้รับฉายา เทพเจ้านิ้วแสงสะท้านฟ้า!

CPS: เกมท้าทายพลังนิ้วแสง!

ทดสอบว่าคุณสามารถคลิกปุ่มได้กี่ครั้งภายในเวลา 15 วินาที! แข่งกับเพื่อนๆ ในห้องเรียนเพื่อพิสูจน์ความเร็วและชิงฉายานักคลิกระดับเทพพระเจ้า!

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 4 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

แบบทดสอบก่อนเรียน (Pre-test)

1. ไฟล์วิวของ Blade Template Engine จะต้องลงท้ายด้วยนามสกุลใด?

A. .php

B. .blade

C. .blade.php

D. .html

2. คำสั่งใดใช้ในการพิมพ์ตัวแปรออกหน้าจอ และป้องกันช่องโหว่ XSS (Cross-Site Scripting) อัตโนมัติใน Blade?

A. echo $variable;

B. {{ $variable }}

C. {!! $variable !!}

D. <?php print $variable; ?>

3. หากต้องการพ่นค่าออกหน้าจอโดย 'ไม่กรอง' รหัส HTML (อนุญาตให้รันโค้ด HTML) ต้องใช้รูปแบบใด?

A. {{ $variable }}

B. [[ $variable ]]

C. {!! $variable !!}

D. {{{ $variable }}}

4. Directive ใดใน Blade ที่ใช้ในการระบุพื้นที่หลักสำหรับรับข้อมูลจากสไลด์วิวที่มาสืบทอด (Template inheritance)?

A. @yield('content')

B. @extends('content')

C. @section('content')

D. @include('content')

5. คำสั่งใดที่วิวย่อยต้องเขียนที่บรรทัดบนสุด เพื่อขอสืบทอดโครงสร้างเลย์เอาต์หลักจากไฟล์แม่?

A. @parent

B. @extends('layout_name')

C. @yield('layout_name')

D. @include('layout_name')

6. หากต้องการส่งชิ้นส่วนวิวชิ้นเล็ก ๆ (เช่น ส่วนหัวหรือส่วนท้าย) เข้ามาร่วมในวิวปัจจุบัน ต้องเขียนด้วยคำสั่งใด?

A. @extends

B. @yield

C. @include('subview_name')

D. @section

7. คำสั่งใดใช้ในการตรวจสอบตัวแปรว่ามีค่าในระบบและดักจับลูปแสดงผลข้อมูล array ในรูปแบบย่อกรณีไม่มีข้อมูล?

A. @foreach / @endforeach

B. @forelse / @empty / @endforelse

C. @if / @endif

D. @while / @endwhile

8. ในการวนลูป @foreach เราสามารถตรวจสอบสถานะการทำงานของลูป (เช่น ตัวแรก, ตัวสุดท้าย, ลำดับดัชนี) ผ่านตัวแปรพิเศษใด?

A. $index

B. $loop

C. $key

D. $counter

9. Directive ใดใช้ในการป้องกันข้อผิดพลาดกรณีดึงตัวแปรมาวนลูปแสดงผลสัญลักษณ์ปีกกาของเฟรมเวิร์ก JS เช่น Vue/Angular ในไฟล์ Blade?

A. @js

B. @verbatim / @endverbatim

C. @ignore

D. @client

10. เมื่อ Blade ดำเนินการประมวลผลเสร็จสิ้น โค้ด HTML และ PHP ที่แคชจะถูกจัดเก็บไว้ในพื้นที่ส่วนใดของ Laravel ก่อนแสดงผล?

A. storage/framework/views/

B. public/cache/

C. resources/compiled/

D. bootstrap/cache/

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 5 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

เว็บไซต์หลักอย่างเป็นทางการของ Bootstrap

เข้าใช้งานผ่าน getbootstrap.com เพื่อศึกษาเอกสารคู่มือการพัฒนา
เป็นแหล่งรวบรวมตัวอย่าง คลาสสำหรับตกแต่ง และส่วนประกอบ (Components) ต่างๆ
ช่วยอ้างอิงรูปแบบคำสั่ง คลาสสี คลาสโครงสร้าง และนำ CDN ไปใช้งานได้ง่ายสะดวกและรวดเร็ว

Bootstrap Official Website

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 6 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

ตกแต่งเว็บด้วย Bootstrap

การนำเฟรมเวิร์ก CSS ยอดนิยมอย่าง Bootstrap 5 เข้ามาช่วยจัดแต่งหน้ากากเว็บให้สวยงาม
รองรับการแสดงผลแบบยืดหยุ่นในทุกขนาดจอ (Responsive Design)
นำเข้าได้ง่ายผ่านระบบ CDN โดยวางลิงก์ในแท็ก <head> ของหน้าหลัก
ช่วยลดเวลาการเขียนไฟล์ CSS ดิบด้วยคลาสสำเร็จรูป เช่น container, row, card, btn

code-example.html

<head>
  <!-- Bootstrap 5 CSS CDN -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 7 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

ตัวอย่างการครอบเนื้อหาด้วย Container

ครอบเนื้อหาภายในแท็ก <body> ทั้งหมดด้วยแท็ก <div class="container">
ช่วยเว้นขอบกระดาษทั้งสองข้างให้สมมาตร และจัดกึ่งกลางหน้าจออย่างสมบูรณ์แบบ
ทำให้การแสดงผลตัวอักษรและปุ่มลิงก์เป็นระเบียบ เรียบร้อย สวยงามขึ้นทันที

code-example.html

<body>
    <div class="container">
        <h2>ยินดีต้อนรับสู่เว็บไซต์ของเรา</h2>
        <p>Lorem ipsum dolor sit amet...</p>
        <a href="/blog">บทความทั้งหมด</a>
        <a href="/about">เกี่ยวกับเรา</a>
        <a href="/">หน้าแรก</a>
    </div>
</body>

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 8 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

การค้นหาข้อมูลและการเว้นระยะห่าง (Padding)

ค้นหาคลาสส่วนประกอบ เช่น แถบนำทาง (Nav) ได้ง่ายๆ ผ่านช่องค้นหาในเว็บคู่มือหลัก Bootstrap
ศึกษาตัวช่วยจัดระเบียบ Spacing เช่น คลาส py-4 เพื่อเว้นระยะ Padding ด้านบนและด้านล่าง (Y-axis)
ปรับแต่งกล่อง Container เพิ่มเติมด้วย <div class="container py-4"> ช่วยให้เนื้อหาไม่ติดขอบบนสุด

Searching for Nav components in Bootstrap Documentation

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 9 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

การคัดลอกส่วนประกอบ Navbar มาใช้งาน

เข้าหาเมนู Navbar ในระบบคู่มือของ Bootstrap เพื่อดูโครงสร้างแถบนำทางเว็บแบบมาตรฐาน
คัดลอกโค้ดตัวอย่างได้สะดวกรวดเร็วโดยกดปุ่ม Copy to clipboard บนมุมขวาของโค้ดบล็อก
นำชุดโค้ด HTML ของ Navbar ไปวางในหน้าเว็บเพื่อเป็นโครงสร้างหลักในการสร้างเมนูนำทาง

Copying Navbar example from Bootstrap Documentation

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 10 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

ธีมและสีสันของแถบเมนูนำทาง (Navbar Themes)

ปรับแต่งสีพื้นหลังของแถบเมนูนำทางได้หลากหลายผ่านคลาสสไตล์ เช่น bg-dark, bg-primary หรือ bg-body-tertiary
กำหนดโทนสีของตัวอักษรและส่วนประกอบภายในให้เข้ากันโดยระบุแอตทริบิวต์ data-bs-theme="dark" หรือ light
ช่วยให้นักพัฒนาปรับธีมสีสว่างหรือธีมมืดให้เข้ากับดีไซน์ของเว็บไซต์ได้สะดวกและมีความยืดหยุ่นสูง

Bootstrap Navbar Color Schemes & Themes

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 11 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

ตัวอย่างการติดตั้ง Navbar ในหน้า View

วางบล็อกแท็ก <nav> ของ Navbar ไว้ที่ตำแหน่งบนสุดของบอดี้หน้าเว็บ (<body>)
เชื่อมโยงหน้าด้วยไวยากรณ์ Blade: ป้อน {{ route('about') }} หรือ {{ route('blog') }} ในแอตทริบิวต์ href
เปลี่ยนโทนสีแถบนำทางเป็นสีมืด (Dark mode) โดยการใส่แอตทริบิวต์ data-bs-theme="dark" เข้าไปในแท็กหลัก

code-example.html

<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">Supamit Jantowong</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-link" aria-current="page" href="/">หน้าแรก</a>
                <a class="nav-link" href="{{ route('about') }}">เกี่ยวกับเรา</a>
                <a class="nav-link" href="{{ route('blog') }}">บทความทั้งหมด</a>
                <a class="nav-link disabled" aria-disabled="true">Disabled</a>
            </div>
        </div>
    </div>
</nav>

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 12 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

การสร้าง Layout

คือ การกำหนดโครงสร้างหลักในหน้าเว็บเพจ ที่ทุกๆ หน้าจะใช้งานร่วมกันเพื่อลดความซ้ำซ้อนของโค้ด เช่น แท็บเมนู (Navbar), Footer เป็นต้น
ช่วยประหยัดเวลาการแก้ไขเมื่อโครงสร้างหลักมีการเปลี่ยนแปลง โดยทำการแก้ไขเพียงแค่จุดเดียวก็มีผลกับทุกๆ หน้าที่ดึงไปใช้
ช่วยจัดระเบียบโครงสร้างของโครงการพัฒนาเว็บแอปพลิเคชันให้เป็นมาตรฐานและสะดวกต่อการดูแลรักษาระบบระยะยาว

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 13 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

แผนภาพการทำงานของ Master Layout

Master Layout & Template Inheritance Diagram

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 14 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

ตัวอย่างการเรนเดอร์ร่วมกับ Layout หลัก

Render Result of Inherited Layout

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 15 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

ตัวอย่างไฟล์โครงร่างหลัก (layout.blade.php)

สร้างโครงสร้าง HTML หลักที่ทุกหน้าจะใช้ร่วมกัน รวมถึงส่วนหัว <head> และการเรียกใช้ CDN ของ Bootstrap
ใช้ @yield('title') เพื่อกำหนดพื้นที่สำหรับการเจาะชื่อเรื่องหัวข้อเว็บเพจของหน้าย่อยแบบไดนามิก
ใช้ <div class="container py-4"> ครอบแท็ก @yield('content') เพื่อจัดเนื้อหาตรงกลางและกำหนดระยะห่าง

code-example.html

<!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>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
        <!-- โค้ดของแถบเมนูนำทาง -->
    </nav>
    <div class="container py-4">
        @yield('content')
    </div>
</body>
</html>

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 16 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

ตัวอย่างการสืบทอด Layout (welcome.blade.php)

ใช้คำสั่ง @extends('layout') เพื่อสืบทอดโครงสร้างทั้งหมดมาจากไฟล์ layout.blade.php แม่หลัก
ใช้คำสั่ง @section('title', '...') เพื่อส่งชื่อหัวเรื่องหน้าเว็บเฉพาะของตนเองไปใส่ใน @yield('title')
ใช้คำสั่ง @section('content') คู่กับ @endsection เพื่อส่งเนื้อหาเฉพาะตัวไปแสดงแทนที่ @yield('content') แม่

code-example.php

@extends('layout')

@section('title', 'หน้าแรกของเว็บไซต์')

@section('content')
    <h2>ยินดีต้อนรับสู่เว็บไซต์ของเรา</h2>
    <p>Lorem ipsum dolor sit amet...</p>
@endsection

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 17 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

การตั้งชื่อเส้นทางและการเชื่อมโยง (Named Routes)

กำหนดเส้นทาง (Routes) สำหรับเมนูต่างๆ ในไฟล์ routes/web.php เพื่อรับส่งคำขอของผู้ใช้
ใช้คำสั่ง ->name('ชื่อเส้นทาง') เช่น ->name('about') เพื่อระบุชื่อทางลัดอ้างอิงให้แต่ละเส้นทางอย่างเป็นระบบ
ช่วยให้ในหน้า Blade สามารถเรียกลิงก์ URL ได้อย่างสะดวกด้วยคำสั่งอรรถประโยชน์อย่าง {{ route('ชื่อเส้นทาง') }}

code-example.php

// routes/web.php
Route::get('/', function () {
    return view("welcome");
});

Route::get('/about', function () {
    $name = "Supamit Jantowong";
    $data = "7 กรกฎาคม 2026";
    return view("about", compact('name', 'data'));
})->name('about'); // ตั้งชื่อเส้นทาง

Route::get('/blog', function () {
    return view("blog");
})->name('blog'); // ตั้งชื่อเส้นทาง

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 18 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

ตัวอย่างการแสดงผลตัวแปรใน View (about.blade.php)

สืบทอดโครงสร้างจากเทมเพลตหน้าหลัก layout.blade.php และกำหนดชื่อเรื่องของหน้าเว็บผ่าน @section('title', 'เกี่ยวกับเรา')
รับและแสดงค่าของตัวแปรข้อมูล $name (ผู้พัฒนาระบบ) และ $data (วันที่สร้างระบบ) ที่ส่งข้ามมาจากตัวควบคุมหรือ Route
ใช้เครื่องหมายวงเล็บปีกกาคู่ {{ $ตัวแปร }} (Blade Interpolation) ในการพิมพ์แสดงค่าข้อมูลออกทางหน้าจอของเว็บเบราว์เซอร์

code-example.php

@extends('layout')

@section('title', 'เกี่ยวกับเรา')

@section('content')
    <h2>เกี่ยวกับเรา</h2>
    <hr>
    <p>ผู้พัฒนาระบบ : {{ $name }}</p>
    <p>วันที่สร้างระบบ : {{ $data }}</p>
    <p>Lorem ipsum dolor sit amet...</p>
@endsection

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 19 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

การส่งข้อมูลอาร์เรย์ไปยังหน้า View (Route สำหรับบล็อก)

สร้างตัวแปรชุดข้อมูลแบบอาร์เรย์ซ้อนอาร์เรย์ ($blogs) เพื่อจำลองรายการบทความทั้งหมดในระบบ
กำหนดฟิลด์ย่อยในแต่ละอาร์เรย์ย่อย เช่น title (หัวข้อ), content (เนื้อหา), และ status (สถานะการแสดงผล)
ส่งผ่านข้อมูลทั้งหมดไปยังหน้าจอแสดงผลด้วยฟังก์ชัน compact('blogs') พร้อมเชื่อมโยงหน้าด้วยชื่อเส้นทาง blog

code-example.php

Route::get('/blog', function () {
    $blogs = [
        [
            'title' => "บทความที่ 1",
            'content' => "เนื้อหาบทความที่ 1",
            'status' => true
        ],
        [
            'title' => "บทความที่ 2",
            'content' => "เนื้อหาบทความที่ 2",
            'status' => true
        ],
        [
            'title' => "บทความที่ 3",
            'content' => "เนื้อหาบทความที่ 3",
            'status' => true
        ],
    ];
    return view("blog", compact('blogs'));
})->name('blog');

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 20 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

การตรวจสอบโครงสร้างข้อมูลอาร์เรย์ (blog.blade.php)

สืบทอดโครงสร้างหลักมาจากหน้าหลัก layout.blade.php และกำหนดชื่อเรื่องของหน้าเว็บผ่าน @section('title', 'บทความทั้งหมด')
รับตัวแปรชุดข้อมูลอาร์เรย์ $blogs ที่ผ่านข้อมูลส่งตรงมาจากกำหนดเส้นทาง (Route) สำหรับบทความบล็อก
ใช้คำสั่ง {{ print_r($blogs) }} ในการพิมพ์ดัมพ์โครงสร้างอาร์เรย์ทั้งหมดออกมาตรวจสอบค่าบนหน้าเบราว์เซอร์ชั่วคราว

code-example.php

@extends('layout')

@section('title', 'บทความทั้งหมด')

@section('content')
    <h2>บทความทั้งหมด</h2>
    <hr>
    {{ print_r($blogs) }}
@endsection

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 21 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

การวนลูปแสดงผลรายการข้อมูล (Loops in Blade)

ใช้คำสั่ง @foreach ($blogs as $item) ร่วมกับ @endforeach เพื่อวนซ้ำในการดึงแต่ละบทความในอาร์เรย์มาแสดงผล
อ้างอิงฟิลด์ย่อยแต่ละรายการด้วยคีย์ของอาร์เรย์ เช่น {{ $item['title'] }} และ {{ $item['content'] }} ด้วยปีกกาคู่
ทำให้หน้าการแสดงผลสามารถจัดฟอร์แมตข้อมูลในแต่ละหัวข้อบทความได้อย่างเป็นระบบและเป็นระเบียบเรียบร้อย

code-example.php

@extends('layout')

@section('title', 'บทความทั้งหมด')

@section('content')
    <h2>บทความทั้งหมด</h2>
    <hr>
    @foreach ($blogs as $item)
        <h2>{{ $item['title'] }}</h2>
        <p>{{ $item['content'] }}</p>
    @endforeach
@endsection

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 22 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

การเขียนเงื่อนไขควบคุมการแสดงผล (Conditional Statements)

ใช้คำสั่งตรวจสอบเงื่อนไข @if ($item['status']) เพื่อตรวจสอบสถานะการเผยแพร่ของแต่ละบทความแบบค่าความจริง
ใช้คำสั่ง @else ในกรณีที่ค่าความจริงเป็นเท็จ และสิ้นสุดชุดคำสั่งเงื่อนไขด้วย @endif เสมอ
สามารถเขียนโค้ดและคลาสตกแต่งต่างกันได้ เช่น text-success สำหรับคำว่า 'เผยแพร่' และ text-danger สำหรับ 'ไม่เผยแพร่'

code-example.php

@extends('layout')

@section('title', 'บทความทั้งหมด')

@section('content')
    <h2>บทความทั้งหมด</h2>
    <hr>
    @foreach ($blogs as $item)
        <h2>{{ $item['title'] }}</h2>
        <p>{{ $item['content'] }}</p>
        @if ($item['status'])
            <p class="text-success">สถานะ: เผยแพร่</p>
        @else
            <p class="text-danger">สถานะ: ไม่เผยแพร่</p>
        @endif
        <hr>
    @endforeach
@endsection

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 23 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

แบบทดสอบหลังเรียน (Post-test)

1. ไฟล์วิวของ Blade Template Engine จะต้องลงท้ายด้วยนามสกุลใด?

A. .php

B. .blade

C. .blade.php

D. .html

A. echo $variable;

B. {{ $variable }}

C. {!! $variable !!}

D. <?php print $variable; ?>

A. {{ $variable }}

B. [[ $variable ]]

C. {!! $variable !!}

D. {{{ $variable }}}

A. @yield('content')

B. @extends('content')

C. @section('content')

D. @include('content')

A. @parent

B. @extends('layout_name')

C. @yield('layout_name')

D. @include('layout_name')

A. @extends

B. @yield

C. @include('subview_name')

D. @section

A. @foreach / @endforeach

B. @forelse / @empty / @endforelse

C. @if / @endif

D. @while / @endwhile

A. $index

B. $loop

C. $key

D. $counter

A. @js

B. @verbatim / @endverbatim

C. @ignore

D. @client

A. storage/framework/views/

B. public/cache/

C. resources/compiled/

D. bootstrap/cache/

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 24 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

คำถามท้ายบทเรียน

คำสั่งใดใช้ประกาศในเลย์เอาต์แม่เพื่อจองพื้นที่สำหรับแสดงผลเนื้อหาจากเลย์เอาต์ลูก?

A. @extends

B. @yield

C. @section

D. @include

คำอธิบาย: คำสั่ง @yield ใช้ในหน้าแม่เพื่อเจาะช่องเตรียมรับข้อมูล ส่วนหน้าลูกจะใช้ @section ในการส่งเนื้อหาไปแทรกที่จุดนั้น

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 25 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

Workshop 4: พัฒนา Master Layout ร่วมกับแถบเมนูนำทาง (Navbar) และการเชื่อมต่อผ่าน Named Routes

1สร้างไฟล์เลย์เอาต์หลัก layout.blade.php และออกแบบ Navbar ธีมมืดด้วย Bootstrap 5 ให้สวยงาม
2ใช้คำสั่ง @yield('title') และ @yield('content') เจาะช่องเตรียมแสดงชื่อเรื่องและเนื้อหาของหน้าย่อยแบบไดนามิก
3ตั้งชื่อเส้นทาง (Named Routes) ใน routes/web.php เช่น ->name('about') และ ->name('blog') เพื่อระบุเส้นทางให้ระบบ
4สร้างไฟล์หน้าย่อย welcome.blade.php และ about.blade.php เพื่อสืบทอดด้วย @extends('layout') และส่งข้อมูลไปเรนเดอร์ในสเปซแม่

command_prompt.sh

// routes/web.php
Route::get('/about', function () {
    $name = "Supamit Jantowong";
    $data = "7 กรกฎาคม 2026";
    return view("about", compact('name', 'data'));
})->name('about');

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 26 / 27

สัปดาห์ที่ 4 • การออกแบบหน้าตาเว็บไซต์และ Layout01-406-093-203 Laravel Course

ใบงานที่ 4: พัฒนาระบบบล็อกบทความด้วย Template Inheritance และการแสดงผลข้อมูลแบบอาร์เรย์และเงื่อนไข

ให้นักศึกษาสร้างระบบแสดงบทความ โดยดึง Layout ร่วมจาก layout.blade.php และส่งชุดข้อมูลแบบอาร์เรย์ของบทความจาก Route ไปประมวลผลวนลูปด้วย @foreach และตรวจสอบเงื่อนไขสถานะการเผยแพร่ด้วย @if ในหน้า blog.blade.php โดยใช้คลาสตกแต่งของ Bootstrap ในการแบ่งสีป้ายสถานะ

เกณฑ์การตรวจประเมินผล:

การสืบทอดและจัดสัดส่วน Layout ด้วย Blade อย่างถูกต้อง30%
การตั้งค่า Named Routes และการส่งข้อมูลแบบ Array จาก Route ไปยัง View30%
การใช้ @foreach และ @if ควบคุมการแสดงผลสถานะบทความ30%
การใช้คลาสสีและกรอบของ Bootstrap ในการตกแต่งหน้าเพจให้สวยงาม10%

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 27 / 27