Tạo bởi Trần Văn Điêp|
Học Laravel

[Video] Hướng dẫn tìm hiểu layout trong Laravel - qua ví dụ tạo website tin tức - Lập Trình Laravel

[Video] Hướng dẫn tìm hiểu layout trong Laravel - qua ví dụ tạo website tin tức - Lập Trình Laravel


Nội dung học
	- Layout/Template trong laravel

================================
Tạo 1 route => layout.php
	-> Lưu toàn bộ cấu hình của bài học hôm này.

Tạo 1 website gồm các page
	- Trang chủ
		- URL (Route) => '/' & '/home'
		- Route -> goi toi -> Layout/HomeController -> showHomePage
		- View => template/home.blade.php
	- tin tức
		- URL (Route) => 'tin-tuc'
		- Route -> goi toi -> Layout/HomeController -> showNews
		- View => template/news.blade.php
	- Chi tiet tin tuc
		- URL (Route) => '/bai-viet/{href_param}.html'
		- Route -> goi toi -> Layout/HomeController -> showDetails
		- View => template/details.blade.php
	- Contact
		- URL (Route) => 'lien-he'
		- Route -> goi toi -> Layout/HomeController -> showContact
		- View => template/contact.blade.php
================================

Mở bài

Trong quá trình phát triển web với Laravel, một trong những bước quan trọng để xây dựng giao diện chuyên nghiệp, thống nhất và dễ bảo trì chính là layout (template). Layout giúp bạn định nghĩa cấu trúc giao diện tổng thể của website, như header, footer, sidebar, hay các phần nội dung chính, rồi tái sử dụng cho nhiều trang khác nhau. Điều này không chỉ giúp tiết kiệm thời gian mà còn đảm bảo mọi trang trên website có phong cách thiết kế nhất quán.

Khi làm dự án thực tế, việc hiểu và vận dụng layout trong Laravel là kỹ năng bắt buộc. Bài viết này sẽ hướng dẫn bạn “Tìm hiểu layout trong Laravel qua ví dụ tạo website tin tức”, gồm các trang cơ bản như Trang chủ, Tin tức, Chi tiết bài viết, và Liên hệ. Thông qua ví dụ thực tế, bạn sẽ học được cách định nghĩa route, gọi controller, tạo view với Blade template và tổ chức cấu trúc thư mục logic. Đây chính là nền tảng vững chắc cho mọi dự án web Laravel — từ website giới thiệu, blog cá nhân đến hệ thống tin tức quy mô lớn.

Tổng quan về Layout trong Laravel

Layout là gì?

Layout trong Laravel là phần khung giao diện chung được áp dụng cho nhiều trang. Nó chứa các phần cố định như header, footer, menu, và script, giúp các trang chỉ cần thay đổi phần nội dung riêng biệt. Laravel sử dụng Blade template engine, cho phép bạn kế thừa, mở rộng, và tái sử dụng layout một cách dễ dàng.

Cấu trúc cơ bản của layout thường nằm trong thư mục resources/views/layouts. Ví dụ:

resources/views/layouts/
│── app.blade.php
│── header.blade.php
│── footer.blade.php

Trong file app.blade.php, bạn có thể khai báo:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@yield('title')</title>
  <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
  @include('layouts.header')
  <main>
    @yield('content')
  </main>
  @include('layouts.footer')
</body>
</html>

Tại các trang con (child views), bạn chỉ cần kế thừa layout:

@extends('layouts.app')

@section('title', 'Trang chủ')

@section('content')
  <h1>Chào mừng đến với website tin tức Laravel!</h1>
@endsection

Cách làm này giúp mọi trang chia sẻ cùng một giao diện, dễ quản lý và cập nhật.

Cấu hình Route cho layout website

Khi xây dựng website tin tức, bước đầu tiên là định nghĩa các route trong file routes/web.php. Route là cầu nối giữa URL và Controller.

Tạo file routes/layout.php để lưu cấu hình layout của bài học hôm nay.
Trong web.php, bạn chỉ cần gọi file này:

require __DIR__.'/layout.php';

Trong layout.php, ta định nghĩa các route:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Layout\HomeController;

Route::get('/', [HomeController::class, 'showHomePage']);
Route::get('/home', [HomeController::class, 'showHomePage']);
Route::get('/tin-tuc', [HomeController::class, 'showNews']);
Route::get('/bai-viet/{href_param}.html', [HomeController::class, 'showDetails']);
Route::get('/lien-he', [HomeController::class, 'showContact']);

Mỗi route tương ứng với một trang của website:

  1. Trang chủ – / và /home

  2. Trang tin tức – /tin-tuc

  3. Chi tiết bài viết – /bai-viet/{href_param}.html

  4. Trang liên hệ – /lien-he

Cách tách file route như trên giúp mã nguồn gọn gàng, dễ quản lý khi dự án mở rộng.

Xây dựng Controller cho layout website

Controller chịu trách nhiệm điều hướng logic giữa route và view. Trong ví dụ này, ta tạo HomeController nằm trong thư mục app/Http/Controllers/Layout/.

<?php

namespace App\Http\Controllers\Layout;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function showHomePage() {
        return view('template.home');
    }

    public function showNews() {
        $newsList = [
            ['title' => 'Laravel 11 chính thức ra mắt', 'href' => 'laravel-11-chinh-thuc-ra-mat'],
            ['title' => 'Tips tối ưu hiệu năng Blade', 'href' => 'tips-toi-uu-blade'],
        ];
        return view('template.news', compact('newsList'));
    }

    public function showDetails($href_param) {
        $newsDetail = [
            'title' => ucfirst(str_replace('-', ' ', $href_param)),
            'content' => 'Đây là nội dung chi tiết của bài viết về ' . $href_param,
        ];
        return view('template.details', compact('newsDetail'));
    }

    public function showContact() {
        return view('template.contact');
    }
}

Với cấu trúc này, mỗi trang sẽ được xử lý riêng biệt, dễ bảo trì và mở rộng.

Tạo layout chính (app.blade.php)

Đây là file nền tảng được kế thừa bởi tất cả các view con. Đặt file tại:
resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@yield('title')</title>
  <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
  <header>
    <h1>Website Tin Tức Laravel</h1>
    <nav>
      <a href="{{ url('/') }}">Trang chủ</a> |
      <a href="{{ url('tin-tuc') }}">Tin tức</a> |
      <a href="{{ url('lien-he') }}">Liên hệ</a>
    </nav>
  </header>

  <section class="content">
    @yield('content')
  </section>

  <footer>
    <p>© 2025 - Học Laravel qua ví dụ thực tế</p>
  </footer>
</body>
</html>

Với layout này, mọi trang con chỉ cần tập trung vào phần nội dung riêng, không phải viết lại header/footer.

Tạo các view cụ thể cho website tin tức

Trang chủ: resources/views/template/home.blade.php

@extends('layouts.app')

@section('title', 'Trang chủ - Laravel Tin Tức')

@section('content')
  <h2>Chào mừng đến với website tin tức Laravel</h2>
  <p>Học cách xây dựng layout và template trong Laravel qua ví dụ thực tế.</p>
@endsection

Trang tin tức: resources/views/template/news.blade.php

@extends('layouts.app')

@section('title', 'Tin tức - Laravel Layout')

@section('content')
  <h2>Danh sách tin tức mới nhất</h2>
  <ul>
    @foreach($newsList as $news)
      <li>
        <a href="{{ url('bai-viet/'.$news['href'].'.html') }}">
          {{ $news['title'] }}
        </a>
      </li>
    @endforeach
  </ul>
@endsection

Trang chi tiết bài viết: resources/views/template/details.blade.php

@extends('layouts.app')

@section('title', $newsDetail['title'].' - Laravel News')

@section('content')
  <article>
    <h2>{{ $newsDetail['title'] }}</h2>
    <p>{{ $newsDetail['content'] }}</p>
  </article>
@endsection

Trang liên hệ: resources/views/template/contact.blade.php

@extends('layouts.app')

@section('title', 'Liên hệ - Website Laravel')

@section('content')
  <h2>Liên hệ với chúng tôi</h2>
  <form method="POST" action="#">
    @csrf
    <label>Họ tên:</label><br>
    <input type="text" name="name"><br>
    <label>Email:</label><br>
    <input type="email" name="email"><br>
    <label>Nội dung:</label><br>
    <textarea name="message"></textarea><br>
    <button type="submit">Gửi</button>
  </form>
@endsection

Với 4 trang cơ bản này, bạn đã có một website tin tức mini chạy trên Laravel, sử dụng layout thống nhất và route rõ ràng.

Lời khuyên khi thiết kế layout Laravel

  1. Tái sử dụng layout thông minh: Tạo các phần riêng biệt như header.blade.php, footer.blade.php, sidebar.blade.php để dễ bảo trì.

  2. Sử dụng section và yield hợp lý: Tránh trùng lặp nội dung, dễ mở rộng khi có thêm các trang mới.

  3. Kết hợp Blade Components: Giúp chia nhỏ giao diện thành các thành phần tái sử dụng.

  4. Tối ưu SEO:

    • Đặt title và meta description riêng cho từng trang.

    • Dùng URL thân thiện (/bai-viet/ten-bai-viet.html).

    • Tối ưu tốc độ tải bằng cách nén CSS/JS.

  5. Áp dụng partials và stacks: @include, @push, @stack giúp thêm CSS/JS riêng cho từng trang mà vẫn giữ layout sạch.

Lợi ích khi hiểu rõ layout trong Laravel

  • Tăng tốc phát triển: Chỉ cần viết layout một lần, tái sử dụng cho nhiều view.

  • Dễ bảo trì: Thay đổi header/footer ở một nơi, toàn bộ trang được cập nhật.

  • Thống nhất thiết kế: Giao diện toàn website luôn đồng bộ.

  • Chuẩn SEO: Cấu trúc HTML chuẩn, dễ crawl bởi công cụ tìm kiếm.

  • Hỗ trợ mở rộng: Dễ thêm module mới (blog, shop, gallery...) mà không cần viết lại layout.

Kết luận

Qua bài viết “Hướng dẫn tìm hiểu layout trong Laravel - qua ví dụ tạo website tin tức”, bạn đã hiểu cách vận dụng layout và Blade template để xây dựng giao diện web chuyên nghiệp, rõ ràng và dễ mở rộng. Từ việc định nghĩa route trong layout.php, gọi controller, cho đến tạo view với cấu trúc thống nhất — tất cả giúp bạn làm chủ quy trình phát triển website với Laravel.

Nếu bạn đang bắt đầu học Laravel, hãy thực hành ngay với ví dụ này. Khi nắm vững cách tạo layout, bạn có thể nhanh chóng mở rộng dự án thành website tin tức hoàn chỉnh, thêm chức năng đăng bài, bình luận hay tìm kiếm. Laravel không chỉ là framework mạnh mẽ mà còn là công cụ giúp bạn viết code có tổ chức, tái sử dụng và chuẩn SEO.

👉 Hãy thử ngay hôm nay! Tạo website đầu tiên của bạn với layout Laravel, và cảm nhận sức mạnh thực sự của framework PHP hàng đầu thế giới này.

Source Code:

https://github.com/tranvandiep/T1907A-Laravel

Phản hồi từ học viên

5

Tổng 0 đánh giá

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó