สวัสดีครับสำหรับวันนี้เราจะมาแบ่งหน้าเว็บออกเป็นส่วนๆ เป็ฯ header,footer,sidebar กันนะครับเพื่อให้ง่ายต่อการแก้ไขใช้งานกัน โดยเริ่มจาก สร้าง folder body ที่ admin ก่อน จากนั้นก็สร้างไฟล์ header.blade.php, sidebar.blade.php, footer.blade.php, navbar.blade.php กันครับ
cerate-segment-page
จากนั้นก็ cut html ที่ไฟล์ admin_dashboard.blade.php แต่ละจุดไปไว้ที่ไฟล์แต่ละตัวกันครับ แล้วก็ทำการ @include เข้ามา
include-for-segment-page
คำสั่ง @include('admin.body.sidebar') ใน Laravel Blade เป็นคำสั่งที่ใช้ในการ รวม (include) เนื้อหาจากไฟล์ View อื่นมาแสดงในตำแหน่งที่คำสั่งนั้นถูกเรียกใช้ ซึ่งช่วยให้สามารถจัดการกับโครงสร้างและส่วนต่าง ๆ ของหน้าเว็บได้อย่างสะดวกมากขึ้น โดยไม่ต้องเขียนโค้ดซ้ำหลายครั้ง
การทำงานของ @include ใน Laravel:
- @include(‘admin.body.sidebar’) หมายถึงการรวมไฟล์ View ที่มีชื่อว่า
sidebar.blade.phpซึ่งอยู่ในโฟลเดอร์resources/views/admin/body/มาแสดงในไฟล์ที่เรียกคำสั่งนี้ - Laravel จะไปค้นหาไฟล์ที่ถูกระบุใน
@includeในโฟลเดอร์ที่ตรงกับเส้นทางที่ให้ไว้ เช่นadmin.body.sidebarหมายถึงการค้นหาไฟล์sidebar.blade.phpในโฟลเดอร์resources/views/admin/body/
ตัวอย่าง:
สมมุติว่าเรามีโครงสร้างไฟล์ดังนี้:
เนื้อหาของไฟล์ sidebar.blade.php:
เนื้อหาของไฟล์ dashboard.blade.php:
วิธีการทำงาน:
- เมื่อไฟล์
dashboard.blade.phpถูกโหลด (ผ่าน URL หรือการนำเข้า), Laravel จะทำการรวมไฟล์sidebar.blade.phpที่อยู่ในโฟลเดอร์resources/views/admin/body/เข้าไปในตำแหน่งที่ใช้คำสั่ง@include('admin.body.sidebar'). - ผลลัพธ์คือไฟล์
sidebar.blade.phpจะถูกนำเข้ามาแสดงในหน้าdashboard.blade.phpในส่วนที่คุณใส่คำสั่ง@include.
การใช้ @include พร้อมกับข้อมูล:
หากคุณต้องการส่งข้อมูลไปยังไฟล์ที่รวมเข้ามา (เช่น การส่งค่าตัวแปรไปยัง sidebar.blade.php), คุณสามารถทำได้ดังนี้:
ตัวอย่างการส่งข้อมูล:
ในไฟล์ sidebar.blade.php, คุณสามารถใช้ตัวแปร user ที่ถูกส่งมาจากไฟล์ dashboard.blade.php ได้:
สรุป:
- คำสั่ง
@include('admin.body.sidebar')ใช้เพื่อรวมไฟล์ View อื่น ๆ เข้ามาในตำแหน่งที่ต้องการในไฟล์ Blade. - คุณสามารถส่งข้อมูลไปยังไฟล์ที่รวมเข้ามาได้โดยการส่งตัวแปรในรูปแบบของอาร์เรย์, เช่น
@include('admin.body.sidebar', ['user' => $user]). - วิธีนี้ช่วยให้การจัดการและการใช้ซ้ำส่วนต่าง ๆ ของหน้าเว็บ (เช่น sidebar, header) ง่ายขึ้นและสะดวกมากขึ้น.
ความแตกต่างระหว่าง @include และ @yield:
| คุณสมบัติ | @include | @yield |
|---|---|---|
| จุดประสงค์ | ใช้เพื่อรวมไฟล์ View ย่อยเข้ามาในไฟล์หลัก. | ใช้เพื่อสร้างช่องที่สามารถแทรกเนื้อหาจากไฟล์ลูก (child view). |
| การใช้ | ใช้สำหรับรวมไฟล์ View ที่มีการกำหนดไว้. | ใช้ใน layout สำหรับสร้างพื้นที่ที่สามารถแทนที่ด้วยเนื้อหาจาก child view. |
| การส่งข้อมูล | สามารถส่งข้อมูลไปยังไฟล์ที่รวมได้ (@include('view', ['data' => $data])). |
ไม่สามารถส่งข้อมูลผ่าน @yield โดยตรง แต่ข้อมูลจะถูกส่งผ่านการใช้ @section. |
| ตัวอย่างการใช้งาน | @include('admin.body.sidebar') |
@yield('content') |
การทำงานร่วมกับ @section และ @extends |
ไม่เกี่ยวข้องกับการขยาย layout หรือ sections. | ใช้ร่วมกับ @extends และ @section เพื่อแทนที่เนื้อหาใน section. |
สรุป:
@include: ใช้เพื่อรวมไฟล์ Blade อื่น ๆ เข้ามาในตำแหน่งที่ต้องการ (เหมาะสำหรับการรวมส่วนต่าง ๆ ที่ใช้ซ้ำ เช่น sidebar, footer, header).@yield: ใช้เพื่อกำหนดพื้นที่สำหรับเนื้อหาที่จะถูกแทนที่ในไฟล์ layout (เหมาะสำหรับการสร้างโครงสร้างหน้าเว็บหลัก เช่น header, footer, และเนื้อหาหลักของแต่ละหน้า).
แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ
Follow Us / Thanat Sirikitphattana