Todo List: Cập nhật dữ liệu ứng dụng trong Laravel

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

Video trong bài viết

Trong quá trình nhập liệu, rất có thể người dùng nhập sai do vậy việc chỉnh sửa, cập nhật lại bản ghi là cần thiết. Trong bài hôm nay chúng ta cùng tìm hiểu cách cập nhật các thông tin về công việc trong ứng dụng Todo List.

Hiển thị form cập nhật dữ liệu

Trong bài trước chúng ta có Quy trình 3 bước để tạo ra một chức năng, chúng ta sẽ áp dụng quy trình này cho chức năng cập nhật dữ liệu.

Đường dẫn chỉnh sửa dữ liệu cho từng todo cụ thể sẽ có dạng /todos/x/edit với x chính là ID của todo, ví dụ /todos/3/edit để chỉnh sửa dữ liệu cho todo có id = 3. Chức năng chỉnh sửa dữ liệu cũng giống chức năng tạo mới bản ghi, nó sẽ chia thành 2 phần việc:

Phần 1: Hiển thị form nhập liệu có dữ liệu có sẵn của todo
Phần 2: Cập nhật dữ liệu vào database

Chúng ta sẽ áp dụng quy trình 3 bước cho từng phần.

Xem thêm nhiều chương trình tuyển dụng Laravel hấp dẫn trên TopDev

Bước 1: Đăng ký đường dẫn

Mở routes/web.php và đăng ký đường dẫn mới:

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

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

Trong TodosController chúng ta tạo ra một phương thức edit():

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

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

Ở phương thức edit() chúng ta không có một nghiệp vụ nào mà chỉ đơn giản là trả về một view tên là todos.edit. Chúng ta tạo view resources/views/todos/edit.blade.php:

@extends('layouts.app')

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

    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card card-default">
                <div class="card-header">Edit todo</div>
                <div class="card-body">
                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul class="list-group">
                                @foreach($errors->all() as $error)
                                    <li class="list-group-item">
                                        {{ $error }}
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <form action="/todos/{{ $todo->id }}/update-todos" method="POST">
                        @csrf
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Name" name="name" value="{{ $todo->name }}">
                        </div>
                        <div class="form-group">
                            <textarea name="description" placeholder="Description" cols="5" rows="5" class="form-control">{{ $todo->description }}</textarea>
                        </div>
                        <div class="form-group text-center">
                            <button type="submit" class="btn btn-success">Update Todo</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

Xem qua chúng ta thấy view edit này giống với view create, tuy nhiên có một số điểm khác như sau:

Dữ liệu form được gửi đến đường dẫn /todos/{{ $todo->id }}/update-todos với phương thức POST.
Các dữ liệu được mặc định lấy từ database và đưa vào các ô nhập liệu.

Vào thử một đường dẫn để xem form sửa đổi dữ liệu thế nào, ví dụ http://localhost:8000/todos/1/edit

Màn hình chỉnh sửa dữ liệu

Lưu dữ liệu thay đổi vào database

Chúng ta đã hoàn thành 1/2 công việc, phần còn lại chúng ta sẽ bắt dữ liệu gửi lên từ form, thực hiện kiểm tra dữ liệu và lưu chúng vào database. Công việc này cũng hoàn thành bởi quy trình 3 bước:

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

Trong form thay đổi thông tin công việc, dữ liệu được gửi đến đường dẫn /todos/{{ $todo->id }}/update-todos với phương thức gửi là POST, ví dụ như /todos/1/update-todos, /todos/2/update-todos… Chúng ta đăng ký URL này vào routes/web.php:

Route::post('/todos/{todo}/update-todos', 'TodosController@update');

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

Tạo phương thức update() trong TodosController:

public function update($todoId)
{
    $this->validate(request(), [
        'name' => 'required|min:6|max:12',
        'description' => 'required'
    ]);

    $data = request()->all();

    $todo = Todo::find($todoId);
    $todo->name = $data['name'];
    $todo->description = $data['description'];

    $todo->save();
    return redirect('/todos');
}

Đoạn code kiểm tra dữ liệu nhập vào form đã được chúng ta tìm hiểu trong bài trước, tiếp đến với ID của Todo có được, chúng ta tìm Todo này và cập nhật dữ liệu mới vào đối tượng tìm được.

Hành động kết thúc

Ở đây chỉ đơn giản là chuyển hướng ứng dụng về trang danh sách todos với redirect().

Kết thúc

Bài học đã kết thúc, chúng ta có một bài khá đơn giản vì nó tương đối giống với bài tạo bản ghi dữ liệu. Một lần nữa, bạn sẽ thấy Quy trình 3 bước có tác dụng xuyên suốt trong Khóa học Laravel cơ bản này. Còn một việc mà chúng ta quên mất là thêm một nút Edit vào Todo cụ thể giúp chuyển hướng đến form chỉnh sửa dữ liệu cho Todo. Mở resources/views/todos/show.blade.php và thêm vào nút Edit:

<a href="/todos/{{ $todo->id }}/edit" class="btn btn-info my-2">Edit</a>

Ngay dưới phần mô tả về công việc.

Source code: Bài 13 – Cập nhật dữ liệu

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

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

Xem thêm tuyển dụng công việc IT hấp dẫn trên TopDev