Ra mắt hai series mới cực hot Trí tuệ nhân tạo A đến ZPython công cụ không thể thiếu khi nghiên cứu Data science, Machine learning.

Todo List: Thiết lập ứng dụng

Video trong bài viết

Chúng ta đã tìm hiểu được 2/3 mô hình MVC, trong bài học này khoan tìm hiểu tiếp những vấn đề tiếp theo mà chúng ta sẽ tổng hợp lại kiến thức và cùng thực hiện tạo ra một bộ khung cho ứng dung Todo List.

Xóa các file ví dụ

Từ đầu đến giờ chúng ta đã tạo ra khá nhiều các file để có thể minh họa những kiến thức về Laravel Route, Laravel View, Laravel Controller. Để bắt đầu thực hiện ứng dụng Todo List chúng ta cần đưa dự án này về thời điểm ban đầu chưa có gì. Thực hiện thôi:

  • Xóa các file
    • resources/views/about.blade.php
    • app/Http/Controllers/AboutController.php
    • Xóa phần định nghĩa /about trong routes/web.php

Thiết lập ứng dụng

Phát triển ứng dụng phần quan trọng nhất là tạo ra một bộ khung, sau đó chúng ta sẽ thực hiện đắp dần các tính năng vào đó. Sau khi xóa các phần ví dụ ở trên chúng ta đã có một dự án Laravel mới toanh như vừa cài đặt.

Các công việc thiết lập cho ứng dụng theo các bước như sau:

Bước 1: Tạo TodosController

Ứng dụng của chúng ta dùng để quản lý các công việc cần làm, để ngắn gọn từ giờ chúng ta sẽ gọi là các Todo. Đây là đối tượng chính trong ứng dụng.

TodosController là nơi tập trung các code xử lý các công việc liên quan đến Todo, có thể là lấy dữ liệu Todo từ database, xử lý trạng thái một Todo khi Todo này đã hoàn thành...

Để tạo TodosController.php chúng ta có thể tạo bằng tay vào thư mục app/Http/Controllers. Tuy nhiên, khuyến khích các bạn sử dụng công cụ artisan vì nó tạo ra một Controller với các code cần thiết, đặc biệt khi bạn sử dụng Resource Controller.

php artisan make:controller TodosController

File TodosController.php đã được tạo ra trong app/Http/Controllers. Chú ý, bạn có thể xóa đi và thực hiện lại. Câu lệnh này có tùy chọn là --resouce, hoặc có thể là viết gọn hơn là -r. Bạn có thể xóa TodosController.php đi và thực hiện:

php artisan make:controller TodosController --resource

Mở file TodosController.php bạn sẽ thấy khác so với khi tạo file này mà không có tham số --resource. Với tham số này, trong TodosController đã có sẵn các phương thức index(), create(), store(), show(), edit(), update(), destroy(). Đây là các hành động cơ bản với một đối tượng, thật hữu ích phải không?

Bước 2: Tạo thư mục todos trong resources/views

Tại sao phải tạo thư mục này, vì là chúng ta sẽ đưa tất cả các view liên quan đến Todo vào trong thư mục resources/views/todos. Vậy tại sao không để luôn ở trong thư mục resources/views. Trong dự án Todo List, chỉ có duy nhất một đối tượng là Todo nên bạn thấy việc này hơi thừa. Thử tưởng tượng nếu chúng ta có thêm một đối tượng, ví dụ như User chẳng hạn, khi đó nếu để tất cả các file blade ở trong resources/views sẽ rất khó quản lý. Với việc tạo thư mục kiểu này chúng ta sẽ quản lý theo hình cây như sau:

-resources
    - views
        -todos
            -index.blade.php
            -create.blade.php
            ...
        -users
            -index.blade.php
            -create.blade.php

Rất rõ ràng và dễ quản lý phải không?

Bước 3: Tạo liên kết từ trang chủ đến danh sách đối tượng

Trong trang chủ ứng dụng chúng ta cần tạo ra các liên kết để người dùng có thể nhấp vào và đi đến danh sách các đối tượng này. Trong ứng dụng của chúng ta chỉ có mỗi Todo nên trang chủ chỉ cần một liên kết đến danh sách Todo. Thường liên kết đến danh sách có dạng /todos, /users...

Trong welcome.blade.php chúng ta thực hiện link đến đường dẫn /todos như sau:

<body>
    <div class="flex-center position-ref full-height">
        <div class="content">
            <div class="title m-b-md">
                <a href="/todos">Todos</a>
            </div>
        </div>
    </div>
</body>

Bước 4: Tạo trang todos

Trong routes/web.php chúng ta định nghĩa cho đường dẫn /todos:

Route::get('/todos', 'TodosController@index');

Mở TodosController.php trong thư mục app/Http/Controllers và tạo phương thức index():

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TodosController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('todos.index');
    }

Chú ý, do view index.blade.php của Todo được tạo trong thư mục todos, do đó khi tham chiếu đến chúng ta sẽ dùng dấu chấm. 'todos.index' tức là file index.blade.php nằm trong thư mục todos và nằm trong thư mục mặc định của hệ thống Laravel là resources/views.

Tiếp đó, tạo file index.blade.php trong thư mục resources/views/todos:

<!DOCTYPE html>
<html>
<head>
    <title>Todos</title>
</head>
<body>
    <h1>TODOS PAGE</h1>
</body>
</html>

Bộ khung cho một đối tượng Todo đã xong, những gì ở trên rất cơ bản nhưng tôi diễn giải khá kỹ để chúng ta có hiểu rõ cần làm gì khi có một tính năng, một đối tượng mới trong ứng dụng.

Chạy ứng dụng http://localhost:8000

Trang chủ Todo

Khi click vào Todos, ứng dụng sẽ chuyển hướng đến trang danh sách todos:

Trang danh sách Todos

Khá đơn giản, nhưng đây là những bước khởi đầu. Trang danh sách Todos chưa có gì ngoài dòng tiêu đề "TODOS PAGE" và nhiệm vụ của chúng ta trong những bài học tiếp theo là kết nối database và hiển thị danh sách các công việc cần làm (Todo) trên trang này.

Code: Bài 4 - Thiết lập ứng dụng Todo List


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

FirebirD

Đam mê Toán học, Lập trình. Sở thích chia sẻ kiến thức, Phim hài, Bóng đá, Cà phê sáng với bạn bè.

Todo list: Khái niệm Laravel Controller

Slack là gì? Tại sao slack phổ biến?

0 Bình luận trong "Todo List: Thiết lập ứng dụng"

Thêm bình luận