เทมเพลตและมุมมอง Blade
แสดงผล HTML แบบไดนามิกด้วยคำสั่ง โครงร่าง และส่วนประกอบของ Blade
เทมเพลตและมุมมอง Blade เป็นบทเรียน PHP Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน PHP Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส PHP Academy มีบทเรียนทั้งหมด 4 บทเรียน
Blade คืออะไร
Blade คือเครื่องมือสร้างแม่แบบของ Laravel ไฟล์จะลงท้ายด้วย .blade.php และรองรับคำสั่ง วนซ้ำ และการสืบทอดเค้าโครง Blade จะถูกคอมไพล์เป็น PHP ปกติและจัดเก็บไว้ในแคช
การแสดงตัวแปร
ใช้วงเล็บปีกกาคู่เพื่อแสดงตัวแปร ค่าจะถูกหลีกอักขระโดยอัตโนมัติเพื่อป้องกัน XSS
{{-- resources/views/greeting.blade.php --}}
<h1>Hello, {{ $name }}</h1>
<p>You have {{ $messageCount }} messages.</p>การแสดงผลโดยไม่หลีกอักขระ
ใช้ {!! !!} สำหรับการแสดงผล HTML ดิบ (โดยไม่หลีกอักขระ) ควรใช้กับเนื้อหาที่เชื่อถือได้เท่านั้น
{!! $htmlContent !!}เงื่อนไข
Blade มีคำสั่ง @if, @elseif, @else และ @endif
@if($user->isAdmin())
<a href="/admin">Admin Panel</a>
@elseif($user->isEditor())
<a href="/editor">Editor</a>
@else
<a href="/dashboard">Dashboard</a>
@endif@isset และ @empty
คำย่อที่สะดวกสำหรับตรวจสอบค่า null หรือค่าว่างที่ใช้บ่อย
@isset($username)
<p>Welcome, {{ $username }}</p>
@endisset
@empty($items)
<p>No items found.</p>
@endemptyการวนซ้ำ
Blade รองรับ @foreach, @for, @while และ @forelse (พร้อมทางเลือกสำรอง @empty)
@forelse($posts as $post)
<article>
<h2>{{ $post->title }}</h2>
</article>
@empty
<p>No posts yet.</p>
@endforelseตัวแปร $loop
ภายใน @foreach ตัวแปร $loop จะให้ข้อมูลเมตา ได้แก่ $loop->index, $loop->first, $loop->last และ $loop->count
เค้าโครงด้วย @extends และ @section
กำหนดเค้าโครงหลัก แล้วสืบทอดเค้าโครงนั้นในมุมมองย่อย
{{-- layouts/app.blade.php --}}
<html>
<body>
@yield("content")
</body>
</html>
{{-- pages/home.blade.php --}}
@extends("layouts.app")
@section("content")
<h1>Home Page</h1>
@endsection@include
แทรกส่วนประกอบของมุมมองย่อย
@include("partials.nav")
@include("partials.alert", ["type" => "success", "msg" => "Saved!"])คอมโพเนนต์ Blade
คอมโพเนนต์ที่นำกลับมาใช้ใหม่ได้อยู่ใน resources/views/components/ และเรียกใช้ด้วยไวยากรณ์ <x-component-name>
{{-- components/alert.blade.php --}}
<div class="alert alert-{{ $type }}">
{{ $slot }}
</div>
{{-- Usage: --}}
<x-alert type="success">Profile updated!</x-alert>การส่งข้อมูลไปยังมุมมอง
จากคอนโทรลเลอร์ ให้ส่งข้อมูลโดยใช้ view() พร้อมอาร์เรย์หรือใช้ compact()
<?php
return view("users.index", [
"users" => User::all(),
"title" => "All Users",
]);
// Or:
return view("users.index", compact("users", "title"));สรุป
Blade จะคอมไพล์เป็น PHP ใช้ {{ }} สำหรับการแสดงผลที่มีการหลีกอักขระ ใช้ @extends/@section สำหรับเค้าโครง ใช้ @foreach/@forelse สำหรับการวนซ้ำ และใช้ <x-component> สำหรับส่วนติดต่อผู้ใช้ที่นำกลับมาใช้ใหม่ได้
ตรวจสอบความเข้าใจ
ไวยากรณ์ Blade ใดหลีกอักขระของผลลัพธ์อย่างปลอดภัยเพื่อป้องกัน XSS
คำถามที่พบบ่อย
บทเรียน “เทมเพลตและมุมมอง Blade” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เทมเพลตและมุมมอง Blade” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส PHP Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส PHP Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เทมเพลตและมุมมอง Blade”
แสดงผล HTML แบบไดนามิกด้วยคำสั่ง โครงร่าง และส่วนประกอบของ Blade คุณปฏิบัติ PHP Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน PHP Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน PHP Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “เทมเพลตและมุมมอง Blade” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน PHP Academy นี้ได้ไหม
ได้ บทเรียน PHP Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- โครงสร้างโครงการ Laravel
- การกำหนดเส้นทางใน Laravel
- คอนโทรลเลอร์และการดำเนินการ
- เทมเพลตและมุมมอง Blade