Todo List: Xây dựng trang nội dung chi tiết

Bài viết được sự cho phép của tác giả Kien Dang Chung

Video trong bài viết

Khái niệm Laravel Route đã được giới thiệu đến các bạn xuyên suốt qua những bài đầu tiên của Khóa học Laravel cơ bản, tuy nhiên mới dừng lại ở mức cơ bản nhất khi đây là những đường dẫn cố định cho một loại nội dung. Ví dụ như ở bài số 2, chúng ta có trang about với đường dẫn /about và bài số 7, chúng ta có trang danh sách todos với đường dẫn /todos. Tuy nhiên, trong ứng dụng không phải lúc nào đường dẫn này cũng là cố định cho một loại nội dung.

Dynamic route là gì?

Đường dẫn động (dynamic route) là đường dẫn thay đổi cho cùng một loại nội dung. Ví dụ như trong trang All Laravel bạn đang xem, chúng ta thấy đường dẫn mỗi bài viết sẽ gồm hai phần:

Phần cố định: /blog/
Phần động: /tieu-de-bai-viet/

Do vậy, các đường dẫn của bài viết chi tiết là các đường dẫn động. Như vậy làm cách nào để khai báo các đường dẫn này trong Laravel, chẳng lẽ chúng ta có 100 bài viết thì phải khai báo 100 đường dẫn tương ứng trong routes/web.php?

Route::get('/blog/bai-viet-1', function(){
    return view('bai-viet-1');
});
Route::get('/blog/bai-viet-2', function(){
    return view('bai-viet-2');
})
...
Route::get('/blog/bai-viet-n', function(){
    return view('bai-viet-n');
})

Thiết lập Dynamic route trong Laravel

Trong Laravel Route, cho phép chúng ta đưa vào các tham số giúp cho đường dẫn có nội dung thay đổi theo nội dung của trang. Trong ví dụ tiếp theo chúng ta sẽ đi vào trang chi tiết của công việc cần làm, thiết lập routes/web.php như sau:

Route::get('todos/{todo}', 'TodosController@show');

Trong đường dẫn trên chúng ta có hai phần:

Phần cố định: ‘todos’
Phần động: {todo}

Trong Laravel, phần động của đường dẫn được khai báo theo cấu trúc {ten_tham_so}. Như vậy, khi chúng ta vào đường dẫn nào có cấu trúc kiểu như /todos/phat-trien-todo, khi xử lý qua routes/web.php nó sẽ truyền giá trị ‘phat-trien-todo’ vào tham số {todo}.

API Authentication trong Laravel-Vue SPA sử dụng Jwt-auth

Todo App Flutter – Real Code

Xem thêm tuyển dụng Laravel hấp dẫn trên TopDev

Mặc định, Laravel sẽ truyền tham số động của Route vào trong phương thức của Controller đã được khai báo trong Route. Để kiểm chứng, chúng ta tạo ra phương thức show() trong TodosController với nội dung sau:

public function show($todoId)
{
    return $todoId;
}

Bây giờ bạn thử thực hiện một đường dẫn, ví dụ như http://localhost:8000/todos/hoc-laravel-co-ban-o-allaravel

Kết quả là phần động trong đường dẫn đã truyền đến Controller và được hiển thị ra. Chúng ta cùng xem lại đường đi của nó như sau:

URL http://localhost:8000/todos/hoc-laravel-co-ban-o-allaravel được thực hiện trên trình duyệt.
Laravel kiểm tra trong routes/web.php xem có đường dẫn nào phù hợp thì ở đây thấy /todos/{todo} trùng khớp. Giá trị hoc-laravel-co-ban-o-allaravel được xem là giá trị tham số của Route.
Giá trị tham số {todo} được truyền vào ‘TodosController@show’.
Trong phương thức show() của TodosController có tham số vào là $todoId, lấy giá trị này và trả về cho người dùng.

Trong ứng dụng Todo List, chúng ta sẽ thực hiện hiển thị các thông tin todo chi tiết với đường dẫn /todos/1, /todos/2… ở đây chúng ta sử dụng phần động là id của todo vì các todo có tên có thể giống nhau. Ví dụ: công việc ‘Học Laravel cơ bản ở Allaravel” có thể lặp đi lặp lại nên chúng ta chỉ sử dụng id vì nó là duy nhất.

Toàn bộ các công đoạn chúng ta đã thực hiện xong, giờ chỉ cần xử lý trong phần phương thức show() của appHttpControllersTodosController.php:

public function show($todoId)
{
    return view('todos.show')->with('todo', Todo::find($todoId));
}

Sau khi nhận được ID của todo từ đường dẫn, nó được truyền vào phương thức show() và chúng ta sẽ sử dụng nó để tìm Todo cụ thể trong database. Sau đó, Todo tìm được sẽ được truyền tiếp vào view ‘todos.show’. Tuy nhiên, đến giờ chúng ta chưa tạo view này nên nếu truy cập vào http://localhost:8000/todos/1 chẳng hạn bạn sẽ thấy lỗi “View todos.show not found” mặc dù Todo có ID = 1 kiểm tra có trong database.

Tạo thêm view resources/views/todos/show.blade.php:

<!DOCTYPE html>
<html>
<head>
    <title>Todos</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <h1 class="text-center my-5">{{ $todo->name }}</h1>
        <div class="row justify-content-center">
        <div class="col-md-6">
        <div class="card card-default">
            <div class="card-header">
                Details
            </div>

            <div class="card-body">
                {{ $todo->description }}
            </div>
        </div>
    </div>
</body>
</html>

Trong view này chúng ta thấy có những đoạn sử dụng biến $t o d o t r o n g c ấ u t r ú c c ủ a L a r a v e l B l a d e đ ể i n r a g i á t r ị b i ể u t h ứ c t r o n g n g o ặ c v à$ todo là biến được truyền vào view ở đoạn code return trong phương thức show().

Kết quả khi vào thử một Todo nào đó, ví dụ Todo có ID=1 chẳng hạn ta được kết quả.

Code: Bài 9 – Đường dẫn động trong Laravel

Bài viết gốc được đăng tải tại allaravel.com

Có thể bạn quan tâm:

Xem thêm các việc làm ngành IT hấp dẫn trên TopDev