Lavarel
Xem tất cả
Blade @each: 'Máy Dập Khuôn' Tối Ưu Hóa View Laravel
Chào các lập trình viên tương lai và những chiến binh code lão luyện! Anh Creyt đây, hôm nay chúng ta sẽ mổ xẻ một công cụ cực kỳ hữu ích trong Blade của Laravel mà nhiều bạn hay bỏ qua, hoặc dùng chưa đúng "điệu": @each. Nghe cái tên thì có vẻ đơn giản, nhưng tin anh đi, nó là một "máy dập khuôn" xịn sò giúp view của bạn chạy mượt mà và code "thơm" hơn rất nhiều đấy! @each là gì và để làm gì? Thực tế mà nói, trong lập trình web, chúng ta thường xuyên phải hiển thị danh sách các đối tượng giống nhau: một danh sách bài viết, một "dòng thời gian" các status, một "giỏ hàng" các sản phẩm, hay một "bảng xếp hạng" các người dùng. Mỗi đối tượng này thường có một cấu trúc hiển thị y hệt nhau, chỉ khác mỗi cái dữ liệu bên trong. Trong khi nhiều bạn có thói quen dùng @foreach kết hợp với @include để lặp và nhúng từng phần tử, ví dụ: @foreach ($posts as $post) @include('partials.post_card', ['post' => $post]) @endforeach Thì @each chính là giải pháp được sinh ra để "chuẩn hóa" và tối ưu hóa cái quy trình lặp và nhúng "đơn điệu" này. Hãy hình dung thế này: bạn có một dây chuyền sản xuất bánh quy. Thay vì mỗi lần làm một cái bánh, bạn lại phải tự tay trộn bột, cán, cắt, nướng, rồi lại lặp lại cho cái tiếp theo (giống @foreach + @include), thì @each giống như một cái máy dập khuôn tự động siêu tốc. Bạn chỉ cần "đổ" nguyên liệu (dữ liệu collection) vào, nó tự động "dập" ra hàng loạt cái bánh (partial view) giống hệt nhau, cực kỳ hiệu quả và nhanh chóng, không tốn công sức "điều khiển" từng cái một. Nói tóm lại, @each dùng để render một collection các partial view. Nó tự động lặp qua một mảng hoặc collection và render một view con (partial) cho mỗi phần tử trong đó. Điều này giúp code của bạn gọn gàng hơn, dễ đọc hơn và quan trọng nhất là hiệu quả hơn về mặt hiệu năng so với việc dùng @foreach và @include thủ công. Code Ví Dụ Minh Hoạ Rõ Ràng Để minh họa, chúng ta sẽ xây dựng một danh sách các bài viết (posts) trên một trang blog. 1. Controller: Đầu tiên, chúng ta cần một Controller để lấy dữ liệu và truyền sang view. Giả sử bạn có một PostController: <?php namespace App\Http\Controllers; use Illuminate\Http\Request; class PostController extends Controller { public function index() { $posts = [ // Đây là dữ liệu mẫu, trong thực tế sẽ lấy từ Database (object)['id' => 1, 'title' => 'Học Laravel không khó', 'author' => 'Creyt', 'published_at' => '2023-10-26'], (object)['id' => 2, 'title' => 'Mẹo tối ưu hóa Blade View', 'author' => 'Creyt', 'published_at' => '2023-10-25'], (object)['id' => 3, 'title' => 'Sức mạnh của Eloquent Relations', 'author' => 'Creyt', 'published_at' => '2023-10-24'] ]; return view('posts.index', compact('posts')); } } 2. Partial View (resources/views/partials/post_card.blade.php): Đây là "khuôn mẫu" cho mỗi bài viết. Lưu ý rằng @each sẽ tự động truyền từng phần tử của collection vào partial view với tên biến mặc định là tên của partial (ví dụ: post_card -> $post_card). Tuy nhiên, bạn có thể chỉ định tên biến rõ ràng hơn. {{-- resources/views/partials/post_card.blade.php --}} <div class="post-card"> <h3><a href="/posts/{{ $post->id }}">{{ $post->title }}</a></h3> <p>Tác giả: **{{ $post->author }}**</p> <p><small>Ngày đăng: {{ $post->published_at }}</small></p> <hr> </div> 3. Main View (resources/views/posts/index.blade.php): Đây là nơi chúng ta sử dụng @each. {{-- resources/views/posts/index.blade.php --}} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Danh Sách Bài Viết Của Creyt</title> <style> body { font-family: sans-serif; margin: 20px; } .post-card { border: 1px solid #eee; padding: 15px; margin-bottom: 10px; border-radius: 5px; } h3 { margin-top: 0; } </style> </head> <body> <h1>Các Bài Viết Mới Nhất</h1> {{-- Dùng @each để render danh sách bài viết --}} @each('partials.post_card', $posts, 'post', 'partials.no_posts') </body> </html> Ở đây, cú pháp của @each như sau: Tham số 1: 'partials.post_card' - Đường dẫn đến partial view sẽ được render cho mỗi phần tử. Tham số 2: $posts - Collection hoặc mảng dữ liệu mà bạn muốn lặp qua. Tham số 3: 'post' - Tên biến mà mỗi phần tử của collection sẽ được gán trong partial view. Trong post_card.blade.php, chúng ta sẽ truy cập dữ liệu qua $post (thay vì $post_card mặc định). Tham số 4 (Tùy chọn): 'partials.no_posts' - Đây là một view sẽ được render nếu collection $posts rỗng. Cực kỳ tiện lợi để hiển thị thông báo "Không có bài viết nào" mà không cần thêm logic @if phức tạp. 4. Empty View (Tùy chọn) (resources/views/partials/no_posts.blade.php): {{-- resources/views/partials/no_posts.blade.php --}} <div class="alert alert-info"> Xin lỗi, hiện tại chưa có bài viết nào được đăng cả. Hãy quay lại sau nhé! </div> Mẹo (Best Practices) để ghi nhớ hoặc dùng thực tế Hiệu năng vượt trội: @each được tối ưu hóa ở cấp độ thấp trong Laravel. Nó biên dịch thành một vòng lặp PHP thuần túy, tránh được overhead của việc khởi tạo một view mới cho mỗi lần @include trong @foreach. Điều này đặc biệt quan trọng khi bạn xử lý các collection lớn, giúp ứng dụng của bạn "nhẹ" hơn và "bay" hơn. Đọc code như đọc thơ: Code của bạn sẽ gọn gàng và dễ đọc hơn rất nhiều. Thay vì một khối @foreach loằng ngoằng, bạn chỉ cần một dòng @each duy nhất, "khai báo" rõ ràng ý định của mình. Tái sử dụng là vàng: @each khuyến khích việc tạo ra các partial view nhỏ, tái sử dụng được. Một post_card.blade.php có thể được dùng ở trang chủ, trang danh mục, hay thậm chí trong kết quả tìm kiếm. Đừng quên tham số thứ 4: Cái view rỗng (empty view) là một "người bạn" đắc lực. Thay vì viết: @if ($posts->count() > 0) @foreach ($posts as $post) @include('partials.post_card', ['post' => $post]) @endforeach @else @include('partials.no_posts') @endif Bạn chỉ cần một dòng @each duy nhất. "Sạch sẽ" phải không? Truyền thêm dữ liệu: Nếu bạn cần truyền thêm dữ liệu chung cho tất cả các partial (ví dụ: một biến isAdmin để hiển thị nút sửa/xóa), bạn có thể truyền nó thông qua biến cục bộ trong view cha, hoặc dùng View::share(). Khi nào không nên dùng @each?: @each "tỏa sáng" khi mỗi phần tử trong collection được hiển thị theo cùng một cách. Nếu bạn có logic phức tạp, điều kiện hiển thị khác nhau cho từng phần tử (ví dụ: bài viết đầu tiên có layout khác, bài viết thứ 5 có quảng cáo...), thì @foreach kết hợp với @include hoặc @if bên trong @foreach vẫn là lựa chọn linh hoạt hơn. @each là "máy dập khuôn", không phải "máy sáng tạo" tùy biến cao. Ví dụ thực tế các ứng dụng/website đã ứng dụng Hầu hết mọi ứng dụng web hiện đại đều có những phần tử lặp lại và @each (hoặc các cơ chế tương tự trong các framework khác) là xương sống để render chúng hiệu quả: Facebook/Twitter Feed: Mỗi bài đăng, tweet trên dòng thời gian của bạn là một "partial view". Tưởng tượng phải @foreach + @include hàng trăm cái item trên feed thì sẽ "lag" đến mức nào! Trang sản phẩm của Shopee/Lazada: Danh sách các sản phẩm trên trang chủ, trang danh mục, hoặc kết quả tìm kiếm. Mỗi "thẻ" sản phẩm (ảnh, tên, giá, nút thêm giỏ hàng) là một partial được render từ collection sản phẩm. Danh sách bình luận trên YouTube/VnExpress: Mỗi bình luận là một partial, với avatar, tên người dùng, nội dung, thời gian. @each giúp hiển thị hàng ngàn bình luận mà vẫn giữ được hiệu suất. Danh sách email trong Gmail/Outlook: Mỗi dòng trong hộp thư đến (người gửi, chủ đề, thời gian) là một partial view được render từ collection email. Nhớ nhé các bạn, @each không chỉ là một cú pháp tiện lợi, nó là một công cụ mạnh mẽ giúp bạn viết code "sạch", "nhanh" và "chuyên nghiệp" hơn trong Laravel. Hãy "nhét" nó vào bộ "đồ nghề" của mình và dùng nó đúng lúc, đúng chỗ nhé! Anh Creyt tin là các bạn sẽ "bay" cao hơn với kỹ năng này. Thuộc Series: Lavarel Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!
Blade @include: Nghệ Thuật Tái Sử Dụng Giao Diện Laravel Đỉnh Cao
Chào các chiến hữu code! Creyt đây, và hôm nay chúng ta sẽ mổ xẻ một công cụ cực kỳ hữu ích trong Blade của Laravel mà tôi hay ví von là 'bộ lắp ráp Lego' cho giao diện của bạn: @include. @include: Thợ Xây Lego Của Bạn Là Gì Và Để Làm Gì? Trong thế giới lập trình, có một nguyên tắc vàng mà tôi luôn khắc cốt ghi tâm: DRY - Don't Repeat Yourself (Đừng lặp lại chính mình). Hãy tưởng tượng bạn đang xây dựng một trang web Laravel hoành tráng. Mỗi trang đều cần một thanh điều hướng (navbar), một chân trang (footer), và có thể là một thanh bên (sidebar). Nếu bạn cứ copy-paste đoạn HTML cho navbar vào từng file view một, thì bạn đang tự đào hố chôn mình đấy! @include trong Blade chính là vị cứu tinh. Nó cho phép bạn chia nhỏ các phần giao diện lặp lại thành các file view nhỏ hơn, độc lập, sau đó 'nhúng' chúng vào bất cứ đâu bạn cần. Nó giống như việc bạn có sẵn các module Lego đã được lắp ráp hoàn chỉnh (cánh cửa, cửa sổ, mái nhà) thay vì phải tự lắp từng viên gạch mỗi khi muốn có một cái cửa. Tiết kiệm thời gian, dễ bảo trì, và quan trọng nhất là code của bạn trông 'sạch sẽ' và chuyên nghiệp hơn rất nhiều. Nói tóm lại, @include giúp bạn: Tái sử dụng code: Viết một lần, dùng nhiều nơi. Dễ bảo trì: Sửa một chỗ, áp dụng cho tất cả. Tổ chức code: Chia nhỏ view thành các thành phần logic, dễ quản lý hơn. Code Ví Dụ Minh Họa: Từ Lý Thuyết Đến Thực Hành Để dễ hình dung, chúng ta sẽ làm một ví dụ đơn giản với một header và một alert message. 1. Tạo các Partial View (Module Lego của bạn) resources/views/partials/header.blade.php (Thanh điều hướng chung) <header style="background-color: #333; color: white; padding: 15px; text-align: center;"> <h1>Trang Web Của Creyt</h1> <nav> <a href="/" style="color: white; margin: 0 10px; text-decoration: none;">Trang Chủ</a> <a href="/about" style="color: white; margin: 0 10px; text-decoration: none;">Giới Thiệu</a> <a href="/contact" style="color: white; margin: 0 10px; text-decoration: none;">Liên Hệ</a> </nav> </header> resources/views/components/alert.blade.php (Thông báo, có thể truyền dữ liệu) @if (isset($message)) <div style="padding: 10px; border: 1px solid {{ $type === 'success' ? 'green' : 'red' }}; background-color: {{ $type === 'success' ? '#e6ffe6' : '#ffe6e6' }}; margin: 10px 0;"> <strong>{{ ucfirst($type) }}!</strong> {{ $message }} </div> @endif 2. Sử dụng @include trong View Chính resources/views/welcome.blade.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chào Mừng Đến Với Trang Của Creyt</title> </head> <body> @include('partials.header') {{-- Nhúng Header --}} <main style="padding: 20px;"> <h2>Nội Dung Chính Của Trang Chủ</h2> <p>Đây là nơi bạn đặt nội dung độc đáo cho trang chủ của mình. Mọi thứ thật gọn gàng nhờ Blade @include!</p> {{-- Nhúng Alert và truyền dữ liệu --}} @include('components.alert', ['type' => 'success', 'message' => 'Bạn đã đăng nhập thành công!']) {{-- Hoặc một alert lỗi --}} {{-- @include('components.alert', ['type' => 'error', 'message' => 'Có lỗi xảy ra, vui lòng thử lại.']) --}} {{-- Ví dụ về include có điều kiện --}} @php $showAd = true; // Giả sử biến này đến từ controller hoặc logic nào đó @endphp @includeWhen($showAd, 'components.advertisement', ['adText' => 'Quảng cáo hot nhất hôm nay!']) </main> <footer style="background-color: #f2f2f2; padding: 10px; text-align: center; margin-top: 30px;"> &copy; 2023 Trang Web Của Creyt. All rights reserved. </footer> </body> </html> resources/views/components/advertisement.blade.php (Chỉ hiển thị khi có điều kiện) <div style="border: 2px dashed orange; padding: 15px; text-align: center; margin-top: 20px;"> <p style="font-weight: bold; color: orange;">{{ $adText ?? 'Mua ngay!' }}</p> <small>Chỉ có trên trang của Creyt!</small> </div> Giải thích: @include('partials.header'): Đơn giản là kéo nội dung của header.blade.php vào đây. @include('components.alert', ['type' => 'success', 'message' => '...']): Vẫn kéo nội dung vào, nhưng lần này chúng ta truyền thêm một mảng dữ liệu. Các biến type và message sẽ có sẵn để sử dụng bên trong alert.blade.php. @includeWhen($showAd, 'components.advertisement', ['adText' => '...']): Đây là một biến thể hay ho. advertisement.blade.php chỉ được nhúng vào khi điều kiện $showAd là true. Nếu $showAd là false, nó sẽ bị bỏ qua hoàn toàn. Tương tự, bạn có @includeUnless (nhúng trừ khi điều kiện đúng) và @includeFirst (nhúng file đầu tiên tìm thấy trong danh sách). Mẹo Vặt (Best Practices) Từ Lão Làng Creyt Đừng biến Partial thành Quái Vật Đa Nhiệm: Mỗi partial view chỉ nên có MỘT trách nhiệm duy nhất. Header lo chuyện header, footer lo chuyện footer, alert lo chuyện alert. Đừng cố gắng nhồi nhét quá nhiều logic vào một file nhỏ. Giống như bạn không dùng một viên Lego hình người để làm bánh xe vậy. Đặt Tên Có Ý Nghĩa: partials.header, components.alert, layouts.sidebar. Cách đặt tên rõ ràng giúp bạn (và đồng đội) dễ dàng tìm kiếm và hiểu mục đích của từng file. Truyền Dữ Liệu Cẩn Thận: Chỉ truyền những dữ liệu mà partial đó thực sự cần. Đừng truyền cả một object User khổng lồ vào một partial chỉ để hiển thị tên người dùng. Hãy truyền user->name thôi. Giảm tải cho view và tránh những lỗi không đáng có. Sử Dụng @each Cho Danh Sách: Khi bạn cần lặp qua một collection và hiển thị từng item bằng một partial view, hãy dùng @each thay vì @foreach kết hợp @include. Nó hiệu quả hơn và cú pháp gọn gàng hơn nhiều. {{-- Ví dụ: users là một collection các đối tượng User --}} @each('components.user-card', $users, 'user', 'components.empty-state') Ở đây, components.user-card là partial cho mỗi user, $users là collection, 'user' là tên biến sẽ được sử dụng trong user-card.blade.php (ví dụ: $user->name), và components.empty-state là partial sẽ được hiển thị nếu $users rỗng. Không Lạm Dụng @include Quá Sâu: Việc nhúng lồng nhau quá nhiều lớp có thể khiến việc debug trở nên phức tạp. Cố gắng giữ cấu trúc view của bạn càng phẳng càng tốt. Ứng Dụng Thực Tế: Nơi @include Tỏa Sáng Bạn có thể thấy @include (hoặc các nguyên tắc tương tự) ở khắp mọi nơi trên các website và ứng dụng lớn: Thanh điều hướng (Navbar) & Chân trang (Footer): Hầu hết mọi trang web đều có, và chúng giống nhau trên mọi trang. Hoàn hảo cho @include. Thanh bên (Sidebar): Menu điều hướng, thông tin quảng cáo, danh sách bài viết gần đây – những thứ lặp lại trên nhiều trang. Các thành phần UI nhỏ (UI Components): Nút bấm, thẻ sản phẩm (product card), ô input tùy chỉnh, thông báo (alerts), loading spinners. Bạn viết một lần, dùng mọi nơi. Form: Các trường input (text, email, password) thường có cấu trúc HTML tương tự, chỉ khác nhãn và tên. @include giúp bạn tạo ra các form nhất quán và dễ quản lý. Danh sách bài viết/sản phẩm: Mỗi item trong danh sách có thể được render bởi một partial, giúp code gọn gàng khi hiển thị hàng loạt. Lời Kết @include không chỉ là một cú pháp đơn giản, nó là một triết lý thiết kế giao diện: chia để trị, tái sử dụng để hiệu quả. Nắm vững nó, bạn sẽ biến những dự án Laravel phức tạp thành những bộ Lego dễ lắp ráp, dễ nâng cấp. Hãy thực hành thật nhiều để biến nó thành bản năng nhé! Creyt out! Thuộc Series: Lavarel Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!
Blade @yield: Kiến Trúc Sư Bố Cục Linh Hoạt Của Laravel
Chào các em, hôm nay chúng ta sẽ cùng anh Creyt 'mổ xẻ' một trong những phù thủy giúp Laravel trở thành framework 'quốc dân': @yield trong Blade Template Engine. Nếu ví một website như một ngôi nhà, thì @yield chính là những 'ô trống' được kiến trúc sư tài ba của chúng ta (người thiết kế layout) cố tình để lại, chờ gia chủ (các trang con) đến 'điền vào' những nội thất độc đáo của riêng mình. 1. @yield là gì và để làm gì? Đơn giản mà nói, @yield là một chỉ thị trong Blade Template của Laravel, cho phép bạn định nghĩa một 'vị trí' hoặc 'khu vực' trong một layout chính (master layout) mà nội dung từ các view con (child views) sẽ được 'đổ' vào đó. Nó giống như một cái 'placeholder' vậy. Mục đích cốt lõi: Tái sử dụng bố cục: Thay vì phải lặp lại header, footer, sidebar cho mỗi trang, bạn chỉ cần định nghĩa chúng một lần trong layout chính. Các trang con chỉ cần tập trung vào phần nội dung 'đặc trưng' của mình. Giảm thiểu trùng lặp code (DRY - Don't Repeat Yourself): Đây là nguyên tắc vàng trong lập trình. @yield giúp bạn tuân thủ nguyên tắc này một cách tuyệt vời, làm cho code gọn gàng, dễ bảo trì và mở rộng hơn. Quản lý giao diện tập trung: Khi bạn muốn thay đổi cấu trúc chung của website (ví dụ, đổi màu header, thêm một menu mới), bạn chỉ cần sửa ở một file layout duy nhất, thay vì phải đi chỉnh sửa hàng chục, hàng trăm file trang con. 2. Code Ví Dụ Minh Hoạ Rõ Ràng Để các em dễ hình dung, chúng ta hãy xây dựng một cấu trúc website cơ bản với @yield. Bước 1: Tạo một layout chính (master layout) - resources/views/layouts/app.blade.php Đây là bộ khung chung của ngôi nhà chúng ta. Anh sẽ để lại các 'ô trống' với @yield. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@yield('title', 'Trang Chủ Mặc Định Của Creyt')</title> <link rel="stylesheet" href="/css/app.css"> @yield('styles') {{-- Chỗ này để nhúng CSS riêng cho từng trang --}} </head> <body> <header> <nav> <a href="/">Trang Chủ</a> <a href="/about">Về Chúng Tôi</a> <a href="/contact">Liên Hệ</a> </nav> </header> <main> <div class="container"> @yield('content') {{-- Đây là ô trống lớn nhất, nơi chứa nội dung chính --}} </div> </main> <footer> <p>&copy; 2023 Blog của Creyt. @yield('footer_note')</p> </footer> <script src="/js/app.js"></script> @yield('scripts') {{-- Chỗ này để nhúng JS riêng cho từng trang --}} </body> </html> Giải thích: @yield('title', 'Trang Chủ Mặc Định Của Creyt'): Định nghĩa một khu vực cho tiêu đề trang. Nếu trang con không cung cấp tiêu đề, nó sẽ dùng 'Trang Chủ Mặc Định Của Creyt'. Đây là một tính năng cực kỳ tiện lợi! @yield('styles'), @yield('content'), @yield('scripts'), @yield('footer_note'): Các 'ô trống' khác nhau cho các mục đích khác nhau. Bước 2: Tạo một view con (child view) - resources/views/pages/home.blade.php Đây là gia chủ, sẽ đến 'điền' nội dung vào các 'ô trống' mà layout cha đã định nghĩa. @extends('layouts.app') {{-- Kế thừa layout app.blade.php --}} @section('title', 'Trang Chủ Đặc Biệt Của Blog Creyt') {{-- Điền vào ô 'title' --}} @section('styles') <style> .container { background-color: #f0f8ff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } </style> @endsection @section('content') {{-- Điền vào ô 'content' --}} <h1>Chào mừng đến với Blog của Giảng viên Creyt!</h1> <p>Đây là trang chủ của chúng ta. Tại đây, bạn sẽ tìm thấy những bài viết thú vị về lập trình và cuộc sống.</p> <button onclick="alert('Bạn đã nhấn nút tìm hiểu thêm!')">Tìm hiểu thêm</button> @endsection @section('scripts') <script> console.log('Script riêng cho trang chủ đã chạy!'); </script> @endsection @section('footer_note') <small>Phiên bản Beta 1.0.1</small> @endsection Giải thích: @extends('layouts.app'): Đây là 'lệnh' nói rằng view này sẽ sử dụng layouts/app.blade.php làm layout nền. @section('tên_vùng') ... @endsection: Chỉ thị này dùng để định nghĩa nội dung sẽ được 'đổ' vào @yield('tên_vùng') tương ứng trong layout cha. Khi bạn truy cập trang này qua một route được định nghĩa trong Laravel (ví dụ Route::get('/', function () { return view('pages.home'); });), Laravel sẽ ghép nối home.blade.php vào app.blade.php và render ra một trang HTML hoàn chỉnh, với các phần header, footer từ app.blade.php và title, styles, content, scripts, footer_note từ home.blade.php. 3. Mẹo hay (Best Practices) để ghi nhớ và dùng thực tế Tên @yield phải rõ ràng như 'ban ngày': Đặt tên @yield thật ý nghĩa, dễ hiểu, ví dụ: title, content, sidebar, scripts, styles, head_meta. Tránh dùng các tên chung chung như part1, sectionA. Nó như việc đặt tên cho các phòng trong nhà vậy, phải rõ ràng để biết phòng nào làm gì. Sử dụng giá trị mặc định thông minh: Luôn cân nhắc dùng @yield('tên_vùng', 'Giá trị mặc định') cho những khu vực không bắt buộc hoặc cần một nội dung dự phòng. Điều này giúp trang web của bạn không bị 'trống trơn' nếu một view con quên cung cấp nội dung. Tổ chức thư mục layouts: Đặt tất cả các file layout chính trong thư mục resources/views/layouts (hoặc resources/views/partials cho các phần nhỏ hơn có thể tái sử dụng) để dễ quản lý. Giống như việc bạn có một tủ hồ sơ riêng cho các bản thiết kế nhà vậy. @push và @stack cho các script/style bổ sung: Đôi khi bạn cần thêm nhiều script hoặc style từ nhiều component khác nhau vào cùng một @yield. Thay vì @yield, hãy cân nhắc dùng @stack('scripts') trong layout cha và @push('scripts') ... @endpush trong các view con. Nó linh hoạt hơn nhiều so với @yield khi bạn có nhiều đoạn code cần được 'chồng chất' lên nhau. Đừng lạm dụng: Một layout quá nhiều @yield có thể trở nên phức tạp và khó đọc. Hãy cân nhắc xem liệu có thể nhóm các phần nhỏ lại hoặc tạo ra các layout con kế thừa từ layout cha không. Giống như việc một ngôi nhà không nên có quá nhiều cửa sổ ở cùng một bức tường, nó sẽ mất đi sự hài hòa. 4. Ứng dụng thực tế các website/ứng dụng đã dùng Thực ra, hầu hết mọi website và ứng dụng web xây dựng bằng Laravel đều sử dụng @yield (hoặc các chỉ thị tương tự như @section kết hợp với @extends) một cách triệt để. Đây là xương sống của việc xây dựng giao diện động và dễ bảo trì: Các hệ thống CMS (Content Management System) như OctoberCMS, Statamic (dựa trên Laravel): Các CMS này dùng Blade và @yield để cho phép người dùng tạo ra các theme và template cực kỳ linh hoạt. Bạn có thể thay đổi nội dung trang, thứ tự các widget mà vẫn giữ nguyên bố cục chung của theme. Các trang thương mại điện tử (e-commerce) lớn: Ví dụ như các nền tảng được xây dựng trên Laravel (như Aimeos, Bagisto). Trang sản phẩm, trang giỏ hàng, trang thanh toán... tất cả đều có chung header, footer, thanh điều hướng, chỉ phần nội dung chính giữa (product details, cart items, payment form) là được 'yield' và thay đổi. Các ứng dụng SaaS (Software as a Service) như Laravel Forge, Envoyer, Nova: Các dashboard quản lý, trang cài đặt tài khoản, trang báo cáo... đều dùng chung một layout quản trị cơ bản và chỉ 'đổ' vào các phần nội dung đặc thù cho từng chức năng thông qua @yield. Blog cá nhân hoặc trang tin tức: Như blog của Creyt chúng ta vừa ví dụ. Các bài viết khác nhau, các danh mục khác nhau, nhưng header, footer, sidebar (chứa quảng cáo, bài viết gần đây) luôn giữ nguyên. Chỉ có phần nội dung bài viết chính là thay đổi. Nhìn chung, @yield không chỉ là một công cụ, mà nó là một triết lý về thiết kế giao diện: tái sử dụng, linh hoạt và dễ bảo trì. Nắm vững nó, các em sẽ là những kiến trúc sư giao diện tài ba trong thế giới Laravel! Thuộc Series: Lavarel Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!
Blade Section: Bí kíp kiến tạo layout Laravel "chuẩn không cần chỉnh"
Chào các em, lại là Creyt đây! Hôm nay chúng ta sẽ mổ xẻ một khái niệm mà nếu không có nó, đời lập trình của các em sẽ như một mớ bòng bong không lối thoát: Blade Section trong Laravel. 1. Blade Section là gì và để làm gì? Tưởng tượng em đang xây một tòa nhà chọc trời. Mỗi tầng đều có cửa sổ, cửa ra vào, hành lang y chang nhau. Nếu mỗi lần xây một tầng, em lại phải vẽ lại từng cái cửa, từng cái hành lang, thì đến bao giờ mới xong? Và nếu sau này muốn đổi kiểu cửa, em phải đi sửa từng tầng một à? Ác mộng! Blade Section chính là "khuôn đúc" cho các phần lặp lại của tòa nhà. Nó cho phép em định nghĩa những "lỗ hổng" hay "khu vực trống" trong layout chính (master template) của mình. Sau đó, các view con (child views) chỉ việc "đổ bê tông" nội dung đặc thù của chúng vào đúng những "lỗ hổng" đó. Kết quả? Một kiến trúc gọn gàng, dễ bảo trì và tái sử dụng code đến mức tối đa. Nói cách khác, @yield là cái khung cửa sổ trống rỗng trong layout chung, chờ em lắp kính vào. Còn @section là cái kính cửa sổ mà em muốn lắp vào khung đó từ view con. Và @extends là lời tuyên bố: "Tôi là tầng con này, tôi muốn dùng cái blueprint (layout) của ông master kia!" 2. Code Ví Dụ Minh Hoạ Rõ Ràng Để dễ hình dung, chúng ta sẽ xây dựng một layout cơ bản cho trang web. Đầu tiên, tạo file layout chính (resources/views/layouts/app.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', 'Trang Chủ Của Creyt')</title> <link rel="stylesheet" href="/css/app.css"> @yield('styles') </head> <body> <header> <nav> <ul> <li><a href="/">Trang Chủ</a></li> <li><a href="/about">Giới Thiệu</a></li> <li><a href="/contact">Liên Hệ</a></li> </ul> </nav> </header> <main> @yield('content') </main> <footer> <p>&copy; {{ date('Y') }} Trang Của Creyt. All rights reserved.</p> </footer> <script src="/js/app.js"></script> @yield('scripts') </body> </html> Trong layout này: @yield('title', '...'): Định nghĩa một section title có giá trị mặc định. @yield('styles'): Một section để chèn CSS riêng cho từng trang. @yield('content'): Đây là section chính, nơi chứa nội dung độc đáo của mỗi trang. @yield('scripts'): Một section để chèn JavaScript riêng. Bây giờ, tạo một view con (resources/views/home.blade.php) để sử dụng layout này: @extends('layouts.app') @section('title', 'Chào Mừng Đến Với Lớp Học Của Creyt') @section('styles') <style> .welcome-message { color: #336699; font-size: 1.2em; } </style> @endsection @section('content') <h1 class="welcome-message">Xin chào các lập trình viên tương lai!</h1> <p>Đây là trang chủ của chúng ta, nơi kiến thức được chia sẻ một cách "chuẩn không cần chỉnh".</p> <p>Hãy cùng nhau khám phá thế giới Laravel đầy màu sắc nhé!</p> @endsection @section('scripts') <script> console.log('Trang chủ đã được tải xong!'); // Thêm các script riêng của trang chủ tại đây </script> @endsection Để hiển thị trang này, em chỉ cần định nghĩa route trong routes/web.php: use Illuminate\Support\Facades\Route; Route::get('/', function () { return view('home'); }); Khi truy cập /, Laravel sẽ render home.blade.php, tự động nhúng nó vào layouts.app và điền các section @section vào đúng vị trí @yield tương ứng. 3. Mẹo (Best Practices) để ghi nhớ và dùng thực tế Đặt tên rõ ràng, có ý nghĩa: Tên section phải nói lên được công năng của nó, đừng đặt abc hay xyz. Đặt content, scripts, styles, head_meta là chuẩn bài. Giống như việc em đặt tên biến vậy, phải tường minh! Đừng lạm dụng: Không phải cái gì cũng nhét vào section. Những phần tĩnh, cố định và ít thay đổi thì cứ để nguyên trong layout cha. Section sinh ra để giải quyết vấn đề linh hoạt, không phải để làm rườm rà những thứ đã rõ ràng. Sử dụng @parent để mở rộng: Khi em muốn thêm nội dung vào một section đã có sẵn trong layout cha mà không ghi đè hoàn toàn, @parent là cứu tinh. Kiểu như "tôi muốn thêm một cái rèm vào cửa sổ, nhưng vẫn giữ nguyên cái kính cũ vậy". Ví dụ: Nếu layout cha có một section với nội dung mặc định (sử dụng @section ... @show): <!-- Trong layouts/app.blade.php --> <head> <!-- ... các thẻ khác ... --> @section('head_scripts') <script src="/js/base.js"></script> @show </head> Và view con muốn thêm script mà vẫn giữ base.js: <!-- Trong home.blade.php --> @section('head_scripts') @parent {{-- Giữ lại nội dung từ layout cha --}} <script src="/js/page-specific.js"></script> @endsection Khi nào dùng Blade Components, khi nào dùng Sections?: Đây là câu hỏi kinh điển! Blade Components như là một căn phòng đúc sẵn có đầy đủ nội thất và logic riêng, em chỉ việc đặt vào. Sections thì là cái khung trống, em tự trang trí nội dung. Khi cần tái sử dụng một khối UI phức tạp, có logic riêng (ví dụ: một thẻ sản phẩm, một modal dialog), hãy dùng Component. Khi chỉ cần chèn nội dung vào một vị trí cụ thể trong layout (như phần content chính của trang), dùng Section. 4. Ví Dụ Thực Tế Các Ứng Dụng/Website Đã Ứng Dụng Thực tế, hầu hết các ứng dụng web được xây dựng bằng Laravel đều sử dụng Blade Sections để quản lý layout của mình. Em có thể thấy nó ở khắp mọi nơi: Bảng điều khiển quản trị (Admin Dashboards): Các hệ thống như Laravel Nova, Filament hay các CMS tự xây dựng đều dùng layout chung cho toàn bộ dashboard. Các trang quản lý người dùng, bài viết, sản phẩm... đều là các view con điền nội dung vào section content và có thể thêm script/style riêng qua section scripts/styles. Trang web Thương mại điện tử (E-commerce): Trang chủ, trang danh mục sản phẩm, trang chi tiết sản phẩm, trang giỏ hàng... tất cả đều chia sẻ header, footer, sidebar chung. Chỉ có phần nội dung chính giữa là thay đổi, được quản lý qua Blade Sections. Blog/Tin tức: Các trang hiển thị bài viết, danh mục, trang tác giả đều có cấu trúc layout giống nhau, chỉ khác phần nội dung chính và có thể có các meta tag, script đặc thù cho từng bài viết. Blade Sections không chỉ là một tính năng, nó là một tư duy kiến trúc giúp code của em sạch sẽ, dễ mở rộng và dễ bảo trì hơn rất nhiều. Hãy nắm vững nó, và em sẽ thấy Laravel "dễ thở" hơn bao giờ hết! Chúc các em học tốt! Thuộc Series: Lavarel Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!
