Todo List: Hoàn thiện ứng dụng Todo List

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

Video trong bài viết

Sau 16 bài học, hôm nay cũng là bài cuối cùng, chúng ta sẽ hoàn thiện những tính năng cuối cùng của ứng dụng Todo List cơ bản. Các công việc đã có thể được tạo ra, cập nhật và xóa khỏi ứng dụng. Tuy nhiên chúng ta chưa có tính năng đánh dấu những công việc nào đã hoàn thành.

Xử lý trạng thái công việc trong Todo List

Trong thiết kế ở bài số 5, bảng todos có trường completed có kiểu dữ liệu Boolean dùng để đánh dấu từng công việc xem đã hoàn thành hay chưa.

Bước 1: Thêm nút Complete vào từng Todo

Trong trang danh sách các công việc /todos, ở mỗi công việc đã có một nút View để xem chi tiết công việc, chúng ta thêm vào một nút Complete để sử dụng chuyển trạng thái khi công việc đã hoàn thành.

Mở view resouces/views/todos/index.blade.php và thêm vào nút Complete:

@extends('layouts.app')

@section('title')
Todos List
@endsection

@section('content')
  <h1 class="text-center my-5">TODOS PAGE</h1>
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card card-default">
        <div class="card-header">
          Todos
        </div>

        <div class="card-body">
          <ul class="list-group">
            @foreach($todos as $todo)
              <li class="list-group-item">
                {{ $todo->name }}

                @if(!$todo->completed)
                  <a href="/todos/{{ $todo->id }}/complete" style="color: white;" class="btn btn-warning btn-sm float-right">Complete</a>
                @endif
                <a href="/todos/{{ $todo->id }}" class="btn btn-primary btn-sm float-right mr-2">View</a>
              </li>
            @endforeach
          </ul>
        </div>
      </div>
    </div>
  </div>
@endsection

Cùng thảo luận chút về đoạn code hiển thị nút Complete:

@if(!$todo->completed)
  <a href="/todos/{{ $todo->id }}/complete" style="color: white;" class="btn btn-warning btn-sm float-right">Complete</a>
@endif

Kiểm tra xem một công việc nếu chưa hoàn thành sẽ hiển thị một nút Complete cho công việc đó, khi nhấp vào nó sẽ thực hiện đường dẫn /todos/{todo}/complete. Quay lại với quy trình 3 bước, bạn nhớ chứ.

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

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

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

Đường dẫn này sẽ được thực thi bởi phương thức complete() trong TodosController.

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

Phương thức complete() hiện chưa tồn tại, mở controller ra và thêm phương thức này vào (app/Http/Controllers/TodosController.php):

public function complete(Todo $todo)
{
  $todo->completed = true;
  $todo->save();

  session()->flash('success', 'Todo completed successfully.');

  return redirect('/todos');
}

Nhắc lại một chút, trong phương thức complete() chúng ta có sử dụng Route Model Binding để truyền Model vào Route tự động và chúng ta cũng sử dụng Laravel Session để lưu thông tin hiển thị thông báo về trạng thái khi chuyển trạng thái của Todo.

Bước 4: Hoàn thành công việc

Sau khi đã chuyển trạng thái, chúng ta chỉ thực hiện chuyển hướng người dùng về trang danh sách /todos, như vậy là kết thúc một chu kỳ yêu cầu từ phía người dùng.

public function complete(Todo $todo)
{
  ...
  return redirect('/todos');
}

Hoàn thiện ứng dụng Todo List

Source code: Bài 17 – Hoàn thiện ứng dụng Todo List

Tóm lược khóa học Laravel cơ bản

Khóa học Laravel cơ bản cùng với dự án nhỏ ứng dụng quản lý công việc Todo List đã hoàn thành. Đây là một ứng dụng nhỏ nhưng qua đó chúng ta đã nắm bắt được các khái niệm cơ bản trong Laravel:

  • Cài đặt và thiết lập môi trường phát triển Laravel.
  • Làm quen với mô hình MVC thực tế và mô hình MVC được áp dụng trong Laravel thông qua các khái niệm về Route, View, Controller, Model.
  • Làm việc với database với khá nhiều các khái niệm mới như Migration, Factory, Seeder.
  • Nắm bắt được cách thức xây dựng ứng dụng với các file bố cục (layout) và Laravel Blade.
  • Thực hiện một chuỗi các hành động CRUD (Create, Read, Update và Delete) với một đối tượng.

Với những kiến thức nền tảng này, bạn có thể tìm hiểu các vấn đề khác trong Laravel và cũng có thể bắt tay xây dựng những ứng dụng web đơn giản khác.

  Todo App Flutter – Real Code
  Todo List: Hiển thị thông báo trong ứng dụng Laravel

Xem thêm tuyển dụng PHP Laravel lương cao trên TopDev

Mở rộng ứng dụng Todo List

Khóa học đã kết thúc, tuy nhiên để ứng dụng Todo List có thể sử dụng được trong thực tế chúng ta cần thêm một vài tính năng cho nó.

  1. Tính năng người dùng:
    • Chúng ta muốn rằng ứng dụng Todo List này có thể được sử dụng bởi nhiều người dùng khác nhau, do đó cần thêm tính năng về người dùng vào ứng dụng. Mỗi công việc có thể ở dạng public hoặc private để người khác có thể xem hoặc không xem được.
    • Công việc có thể chung cho từng nhóm người dùng.
  2. Mở rộng cho từng Todo:
    • Thêm phần đính kèm, một công việc có thể đính kèm các tài liệu dạng văn bản, file nén, hình ảnh, video…
    • Thay vì trạng thái chưa hoàn thành và hoàn thành, chúng ta thêm vào đánh giá phần trăm hoàn thành.
    • Phân loại công việc theo mức độ như thông thường, khẩn cấp…
    • Xóa Todo: chúng ta sử dụng soft delete thay vì xóa hẳn bản ghi khỏi database.
    • Thời gian hoàn thành dự kiến
  3. Thông báo
    • Thông báo đến người dùng các công việc quá hạn.
    • Cho phép đặt lịch hiển thị các nhắc nhở công việc chung của nhóm người dùng…

Với các tính năng mở rộng trên, ứng dụng Todo list đã có thể đưa lên Internet và sử dụng cho nhiều người khác nhau. Bạn hãy bắt tay vào xây dựng và cùng thảo luận những khó khăn trong phần bình luận nhé. Phần mở rộng ứng dụng Todo List này sẽ tiếp tục trong phần Bonus của Khóa học, các bài viết sẽ sớm public khi hoàn thành.

Chúc các bạn có những bài học hiệu quả, nhớ ủng hộ website thông qua nhấp quảng cáo và subcribe kênh youtube Allaravel nhé!

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 công nghệ hấp dẫn trên TopDev