Todo list: Làm quen với View, Route trong Laravel

Video trong bài viết

Trong bài trước chúng ta đã cùng nhau thiết lập môi trường phát triển cho Laravel, thực hiện chạy ứng dụng và kết thúc bằng ví dụ Hello World. Bạn có thắc mắc tại sao khi thay đổi welcome.blade.php chúng ta có sự thay đổi ở trang chủ ứng dụng, làm cách nào biết cần phải thay đổi file này? Những khái niệm View, Route trong Laravel sẽ giải thích nó, sau bài này chúng ta cũng biết cách tạo ra một đường dẫn và xử lý nó trong ứng dụng.

Giới thiệu Laravel MVC

MVC (Model - View - Controller) là một pattern design có thể nói là được áp dụng nhiều nhất hiện nay cho các framework. Laravel cũng không ngoại lệ, nó áp dụng MVC triệt để.

Tham khảo: MVC pattern design cần có trong mọi framework

Về cơ bản mô hình MVC có 3 thành phần với các chức năng rõ ràng:

• Model: kết nối cơ sở dữ liệu, xử lý dữ liệu và chuẩn bị dữ liệu để chuyển đến các thành phần khác.
• View: hiển thị nội dung cho người dùng
• Controller: quản lý dữ liệu người dùng nhập vào và cập nhật sang Model, Controller chỉ được sử dụng khi có tương tác của người dùng, còn không nó không có giá trị. Controller chỉ đơn giản là thu thập thông tin và sau đó chuyển dữ liệu sang Model, nó không chứa bất kỳ logic nghiệp vụ nào. Controller kết nối với duy nhất một View và một Model tạo thành hệ thống dự liệu chạy theo một chiều (one way data flow system).

Với mô hình MVC, các thành phần trên chỉ có tính tương đối, mỗi framework khi áp dụng mô hình MVC đều thực hiện theo những cách riêng, mỗi phần trong MVC có thể là bao hàm của rất nhiều các thành phần khác. Việc phân tách như vậy giúp cho hệ thống trở lên rõ ràng, dễ viết code và cũng dễ bảo trì sau này. Với Laravel cũng vậy, mỗi thành phần trong MVC có thể được chia nhỏ thành các khái nhiệm nhưng vẫn đảm bảo các tương tác giữa các thành phần M-V-C.

Cấu trúc thư mục trong dự án Laravel

Chúng ta cùng bắt đầu với cấu trúc thư mục của dự án todo-app, mở ứng dụng Visual Studio Code và thêm thư mục project đã tạo ra:

Với câu lệnh cài đặt Laravel trong bài trước, chúng ta có một thư mục gốc trùng với tên dự án, ở đây là thư mục todo-app. Trong này có một số các thư mục khác mà chúng ta sẽ được biết ý nghĩa của chúng dưới đây:

• app: Chứa code của ứng dụng, các class PHP chủ yếu tập trung ở đây. Với mô hình MVC, trong đây chứa các Model và Controller.
• bootstrap: đây chính là điểm bắt đầu của framework, trong thư mục này cũng chứa các file cache giúp hệ thống tối ưu và tăng tốc xử lý.
• config: chứa các thiết lập hệ thống
• database: chứa các file liên quan đến database như tạo database, tạo dữ liệu mẫu...
• public: chứa index.php là điểm tiếp nhận mọi request từ người dùng, ngoài ra nó còn chứa các tài nguyên cho website như các file css, javascript và ảnh.
• resources: nơi chứa các tài nguyên là các file code cho css, javascript và đặc biệt là các view trong Laravel (chú ý khái niệm view này chỉ là một phần rất nhỏ trong View của mô hình MVC).
• routes: chứa các định nghĩa đường dẫn cho ứng dụng với tất cả các dịch vụ web, api...
• storages: lưu trữ các file cho ứng dụng kể cả log, cache...
• tests: chứa các kịch bản kiểm thử ứng dụng.
• vendor: chứa các gói phần mềm được cài đặt thêm thông qua Composer đến từ bên thứ ba.

Bạn hãy tạm quên đi những thông tin phức tạp ở trên, trong bài học hôm nay chúng ta sẽ chỉ quan tâm đến hai nơi trong hệ thống thư mục:

• routes/web.php: Nơi định nghĩa các đường dẫn cho ứng dụng.
• resources/views: Nơi chứa các view là các file Blade (bản chất là các file HTML được biến thể để một bộ máy sinh ra các template có thể đọc được). Các file này có hậu tố *.blade.php.

Tại sao khi vào trang chủ của ứng dụng (http://localhost:8000) chúng ta thấy màn hình Laravel?

Laravel Route

Mọi yêu cầu đến từ người dùng sẽ được tiếp nhận trong file web.php nằm trong thư mục routes. (Với các phiên bản trước 5.4, file này có tên là routes.php nằm luôn trong thư mục app).

Mở ra chúng ta sẽ thấy nội dung như sau

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

Chúng ta cùng bàn luận chút về đoạn code trên. Ở đây Route là một class PHP và một static function get() được gọi và truyền vào 2 tham số:

• Tham số thứ nhất: '/' chính là đường dẫn đến trang chủ của ứng dụng.
• Tham số thứ hai là một function để xử lý cho đường dẫn ở tham số thứ nhất.

Như vậy, khi người dùng thực hiện đường dẫn http://localhost:8000/ (tức là thực hiện đường dẫn / trong ứng dụng vì bản thân ứng dụng đã có đường dẫn là http://localhost:8000 do chạy bằng artisan serve nên có cổng là 8000) trên trình duyệt thì routes/web.php được gọi đến và so sánh có sự trùng khớp và thực thi tham số thứ hai là function, function này trả về view welcome.blade.php (mặc định nằm trong resource/views).

Laravel View

Laravel View là một file template có thể chứa code HTML, CSS, Javascript và thậm chí là PHP với phần mở rộng là *.blade.php. Các file này sẽ được xử lý bởi một template engine (bộ máy xử lý template) có tên là Laravel Blade.

Nếu bạn đã làm quen với PHP nhiều thì bạn sẽ biết có một template engine cũng rất nổi tiếng đó là Twig, Laravel Blade cũng tương tự vậy nhưng mỗi template engine này có những điểm khác biệt. Laravel Blade cho phép thực hiện cả các function của PHP trong khi Twig thì không do mỗi cơ chế có cách tiếp cận vấn đề khác nhau.

Bạn vẫn chưa hiểu về Laravel Blade? đừng lo lắng, nó rất đơn giản, chúng ta cùng đến với một ví dụ sau:

<h1>Danh sách công việc</h1>
<ol>
    <?php 
        foreach($todos as $todo) {
            echo '<li>' . $todo->name . '</li>';
        }
    ?>
</ol>

Đây là một đoạn code in ra danh sách các công việc, nếu không có template engine trông nó khá rối rắm với các code PHP và HTML lồng vào nhau, với Laravel Blade chúng ta có thể viết lại như sau:

<h1>Danh sách công việc</h1>
<ol>
    @foreach($todos as $todo)
        <li>{{ $todo->name }}</li>
    @endforeach
</ol>

Trông đơn giản hơn phải không, bạn cũng đừng để tâm quá đến Laravel Blade nó không quá phức tạp, bạn hãy coi nó như là một ngôn ngữ mới giúp cho chúng ta viết code ngắn gọn, rõ ràng hơn, vậy thôi.

Ví dụ đầu tiên về Laravel View và Route

Trong bài trước, chúng ta đã có ví dụ về Hello World, đây là trang chủ của ứng dụng. Với ví dụ đầu tiên về View và Route chúng ta sẽ tạo một đường dẫn mới cho ứng dụng, đó là trang about để giới thiệu về ứng dụng với đường dẫn truy cập là /about.

Như đã nói ở phần Laravel Route, mọi yêu cầu đến từ người dùng sẽ qua file routes/web.php, do vậy khi cần tạo ra một đường dẫn (một trang mới) trong ứng dụng chúng ta phải định nghĩa nó trong web.php đầu tiên. Mở file routes/web.php và thêm vào đoạn code sau:

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

Diễn giải một chút, khi người dùng vào đường dẫn http://localhost:8000/about, file routes/web.php sẽ được gọi đến và kiểm tra thấy trùng khớp với đường dẫn vừa định nghĩa ở tham số thứ nhất 'about' và nó sẽ thực thi tham số thứ hai là một function. Function này trả về một view để hiển thị nội dung about cho người dùng.

Nếu chạy thử đường dẫn http://localhost:8000/about bạn sẽ gặp lỗi "View [about] not found", do view about chưa được tạo ra. Tiếp đến, chúng ta tạo file about.blade.php nằm trong thư mục resource/views với nội dung:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>About page</title>
    </head>
    <body>
        <h1>The About page</h1>
    </body>
</html>

Vào lại http://localhost:8000/about bạn đã thấy The About page.

Lời kết

Trên đây là ví dụ rất cơ bản nhưng qua đó chúng ta đã nắm được khái niệm về Laravel Route, Laravel View và Laravel Blade. Bài tập cho các bạn là tạo ra một trang Liên hệ với đường dẫn là /contact. Khi truy cập vào sẽ hiển thị dòng chữ "The contact page".

Code: Bài 2 - Laravel Route, View

Các bước thực hiện:

• Tải về và giải nén.
• Thực hiện lệnh composer update để tải các package đi kèm.
• Nếu không dùng apache, nginx thì sử dụng php artisan serve. Vào đường dẫn http://localhost:8000/about để xem ứng dụng.

---

CÁC BÀI VIẾT KHÁC