close

Hướng dẫn xây dựng layout với Laravel - Tạo giao diện linh hoạt và dễ bảo tr

Trong Laravel, layout đóng vai trò quan trọng trong việc xây dựng giao diện người dùng cho ứng dụng web. Layout là cấu trúc tổng quát của trang web, bao gồm các phần chung như header, footer và sidebar. Trong bài viết này, chúng ta sẽ tìm hiểu cách dựng layout trong Laravel để tạo ra giao diện linh hoạt và dễ bảo trì.

Trước tiên, hãy tạo một layout cơ bản cho trang web của chúng ta. Đầu tiên, tạo một file có tên "app.blade.php" trong thư mục "resources/views/layouts". File này sẽ là layout chính cho toàn bộ trang web. Dưới đây là một ví dụ về nội dung của file "app.blade.php":

<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <header>
        <h1>Header</h1>
    </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>

    <main>
        @yield('content')
    </main>

    <footer>
        <p>Footer</p>
    </footer>

    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

Trong layout này, chúng ta sử dụng các chỉ thị @yield để định nghĩa các vùng được động định nghĩa trong layout. Ví dụ, @yield('title') cho phép các view con ghi đè và đặt tiêu đề của trang. Tương tự, @yield('content') cho phép view con chèn nội dung chính của trang.

Sau khi đã tạo layout, chúng ta có thể tạo các view con sử dụng layout này. Ví dụ, để tạo một trang "about" có giao diện tương tự, ta tạo một file có tên "about.blade.php" trong thư mục "resources/views". File này sẽ kế thừa layout "app.blade.php" và định nghĩa nội dung riêng cho trang "about":

@extends('layouts.app')

@section('title', 'Giới thiệu')

@section('content')
    <h2>Trang giới thiệu</h2>
    <p>Đây là trang giới thiệu về chúng tôi.</p>
@endsection

Trong ví dụ trên, chúng ta sử dụng chỉ thị @extends để kế thừa layout "app.blade.php". Tiếp theo, chúng ta sử dụng chỉ thị @section để định nghĩa nội dung riêng cho phần "title" và "content" của trang.

Cuối cùng, chúng ta cần chỉ định các route để liên kết các URL với các view tương ứng. Ví dụ, trong file "routes/web.php", ta có thể thêm các route sau:

Route::get('/', function () {
    return view('welcome');
});

Route::get('/about', function () {
    return view('about');
});

Trong ví dụ này, URL "/" sẽ được liên kết với view "welcome.blade.php", còn URL "/about" sẽ được liên kết với view "about.blade.php".

Tóm lại, dựng layout trong Laravel cho phép bạn tạo giao diện chung cho toàn bộ ứng dụng web và quản lý các phần như header, footer và sidebar. Bằng cách sử dụng layout và các view con, bạn có thể xây dựng giao diện linh hoạt và dễ bảo trì trong Laravel.