Todo List: Tạo bản ghi trong database thông qua Laravel Model

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

Có vẻ chúng ta thực hiện hơi ngược quy trình viết code cho ứng dung Todo List, nếu chúng ta thực hiện việc tạo từng bản ghi Todo trước thì không cần đến tạo dữ liệu mẫu cho hiển thị danh sách Todo và chi tiết từng Todo. Bố cục chương trình Khóa học Laravel cơ bản qua ứng dụng Todo List muốn nhắm đến các khái niệm cơ bản về Laravel, do đó theo bố cục này bạn sẽ được học nhiều hơn. Thứ hai, viết code như chúng ta làm từ đầu đến giờ giống với các bước mà người dùng sẽ sử dụng ứng dụng hơn.

Hiển thị form tạo bản ghi mới trong database

Các bước thực hiện rất đơn giản, nhưng trước khi thực hiện code, bạn hãy cùng tôi đúc kết ra quy trình tạo một chức năng mới trong ứng dụng Todo List. Đa số trong chúng ta đều muốn nhanh chóng đi đến đích, nhưng đó không phải là cách nhanh nhất. Đôi khi dừng lại, đúc kết kinh nghiệm để lần sau khi gặp lại có thể tăng tốc độ gấp đôi, gấp ba mới là cách hiệu quả.

Các bước tạo ra một chức năng mới trong Todo List

1. URL: Nghĩ ra định dạng đường dẫn đến trang mới (chức năng mới), đăng ký với Laravel Route (routes/web.php).
2. Xử lý nghiệp vụ: Trong bước đăng ký ở trên, để xử lý đường dẫn này sẽ là một phương thức nào đó trong TodosController. Tạo phương thức này và viết code xử lý nghiệp vụ như tương tác với database, thực hiện một hành động…
3. Hành động kết thúc: Hành động kết thúc có thể là trả về một view, chuyển hướng đến một trang… Nếu View không tồn tại, chúng ta cần tạo ra view này.

Chúng ta đã áp dụng quy trình 3 bước này với việc tạo ra trang danh sách công việc (view index) và cả với trang thông tin chi tiết công việc (view show). Hôm nay, chúng ta sẽ áp dụng để xây dựng trang tạo ra công việc mới trong database, dự định đường dẫn sẽ là http://localhost:8000/new-todos.

Bước 1: Đăng ký URL vào Route

Mở file routes/web.php thêm vào định nghĩa cho URL mới.

Route::get('new-todos', 'TodosController@create');

Bước 2: Xử lý nghiệp vụ trong Controller

Thực hiện tạo ra phương thức create() trong TodosController (nằm trong thư mục app/Http/Controllers).

public function create()
{

}

Ở tình huống này chúng ta chưa cần xử lý gì nên để trống.

Bước 3: Xây dựng View

Phương thức create() sẽ trả về một View hiển thị form nhập liệu cho công việc cần làm (Todo).

public function create()
{
    return view('todos.create');
}

View ‘todos.create’ chưa có nên thực hiện tạo ra resources/views/todos/create.blade.php:

@extends('layouts.app')

@section('content')
    <h1 class="text-center my-5">Create Todos</h1>

    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card card-default">
                <div class="card-header">Create new todo</div>
                <div class="card-body">
                    <form action="/store-todos" method="POST">
                        @csrf
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Name" name="name">
                        </div>
                        <div class="form-group">
                            <textarea name="description" placeholder="Description" cols="5" rows="5" class="form-control"></textarea>
                        </div>
                        <div class="form-group text-center">
                            <button type="submit" class="btn btn-success">Create Todo</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

Đầu tiên, thực hiện “kế thừa” bố cục chung ứng dụng bằng câu lệnh @extends(‘layouts.app’). Tiếp theo chúng ta có một form để nhập liệu Todo. Form này có phương thức gửi dữ liệu là POST và gửi về đường dẫn /store-todos (đầy đủ là http://localhost:8000/store-todos). Trong form này có một câu lệnh @csrf, nó để phục vụ cho việc gì, nếu không có nó được không?

CSRF viết tắt của Cross-Site Request Forgery là một dạng tấn công tiềm ẩn nhiều nguy hại. Hacker có thể lợi dụng kiểu tấn công này để thực hiện các hành động trong Form nhập liệu với một người dùng đã xác thực, do vậy để ngăn chặn người ta sử dụng một token (một chuỗi mã) giữa máy chủ và trình duyệt để đảm bảo chỉ có form nhập liệu nào chứa token này mới là do máy chủ web sinh ra và an toàn.

Laravel giúp phòng chống tấn công CSRF dễ dàng, nó tự động sinh ra một token cho mỗi session người dùng và được quản lý bởi ứng dụng. Token này giúp kiểm tra xem người dùng được xác thực và có thể tạo ra các yêu cầu đến ứng dụng. Khi viết code form nhập liệu chúng ta chỉ cần sử dụng câu lệnh Blade @csrf là nó tự động sinh ra trường token cho chúng ta.

Thử thực hiện đường dẫn http://localhost:8000/new-todos trên trình duyệt chúng ta có một form nhập liệu Todo mới.

Xử lý dữ liệu từ form nhập liệu

Phần trên đây, chúng ta đã hoàn thành được 1/2 công việc của tạo bản ghi mới, phần còn lại chúng ta cần xử lý dữ liệu gửi từ form và lưu vào CSDL. Vậy tại sao có Quy trình 3 bước tạo một chức năng ở trên, nó sử dụng để tạo ra một chức năng vậy tại sao chưa hoàn thành. Câu trả lời là quy trình này áp dụng cho một chu trình khép kín từ user -> server -> user.

Thật vậy, user thực hiện đường dẫn /news-todos -> server xử lý -> trả về trang (view) tạo todo cho user. Như vậy với 1/2 công việc còn lại chúng ta sẽ lại áp dụng tiếp Quy trình 3 bước.

Bước 1: Đăng ký URL

Form nhập liệu ở phần trên gửi dữ liệu đến đường dẫn /store-todos với phương thức gửi là POST. Việc gửi dữ liệu này cũng bắt nguồn từ user. Chúng ta đăng ký URL này vào routes/web.php:

Route::post('/store-todos', 'TodosController@store');

Do phương thức yêu cầu là POST nên chúng ta sử dụng static function post() trên class Route. Cú pháp bên trong vẫn giống như chúng ta đăng ký URL trước đây.

Bước 2: Xử lý nghiệp vụ trong Controller

Trong TodosController chúng ta sẽ tạo ra phương thức store() với nội dung:

/**
 * Store a newly created resource in storage.
 *
 * @param  IlluminateHttpRequest  $request
 * @return IlluminateHttpResponse
 */
public function store()
{
    $data = request()->all();

    $todo = new Todo();
    $todo->name = $data['name'];
    $todo->description = $data['description'];
    $todo->completed = false;

    $todo->save();

    return redirect('/todos');
}

Trong phương thức store ở trên, đầu tiên thực hiện lấy tất cả dữ liệu được gửi đến từ form thông qua Laravel Request với phương thức all(). Tiếp đó, tạo một Model Todo và thiết lập dữ liệu có được từ form nhập liệu, lưu trữ xuống database. Cuối cùng là chuyển hướng người dùng về trang danh sách todos.

Bước 3: Hành động kết thúc

Ở đây sau khi lưu dữ liệu xong chúng ta chuyển hướng người dùng về trang danh sách todos cũng giống như trả về view index, tuy nhiên nếu trả về view chúng ta phải thực hiện thêm việc lấy danh sách view mà công việc này đã làm trong trang danh sách todos do đó chúng ta chuyển hướng về trang này.

Kết luận

Qua bài học hôm nay, chúng ta đã đúc kết được cách tạo một chức năng mới trong ứng dụng thông qua một Quy trình 3 bước. Các bạn hãy thực hiện lại các đoạn code trong bài học để nắm vững và hiểu rõ hơn các khái niệm, hẹn gặp lại trong bài học tiếp theo.

Source code: Bài 11 – Tạo bản ghi trong database

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

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

• Todo List: Hiển thị thông báo trong ứng dụng Laravel
• Không phải Source Code, Database mới là quan trọng nhất trong hệ thống?
• Laravel 8: dễ dàng đổi giá trị auto increment mặc định database

Xem thêm Việc làm Laravel hấp dẫn trên Station D