Thêm mới task trong Laravel

Lượt xem: 3070

Thêm mới task trong Laravel

1.Xác thực (Validation)

Bây giờ chúng ta có một form trên view, chúng ta cần thêm code vào route POST  /task để xác thực đầu vào của form và tạo mới một task. Đầu tiên hãy xác nhận đầu vào (input)
Trong form này, chúng ta sẽ tạo trường name được yêu cầu cần thiết (required) và nói rằng nó phải chứa ít hơn 225 ký tự.
Nếu xác thực thất bại, chúng ta sẽ chuyển hướng người dùng quay lại / URL, cũng như flash các đầu vào cũ và lỗi vào phiên (session)

Route::post('/task', function (Request $request) {
    $validator = Validator::make($request->all(), [
        'name' => 'required|max:255',
    ]);

    if ($validator->fails()) {
        return redirect('/')
            ->withInput()
            ->withErrors($validator);
    }

    // Create The Task...
});


Biến $errorss

Chúng ta hãy nghỉ ngơi một chút để nói về phần ->withErrors ($validator) của ví dụ này. ->withErrors($validator) sẽ gọi flash errors từ yêu cầu xác thực thêm vào session vậy nên chúng có thể try cập thông qua biến $errors trong view của bạn.

Hãy nhớ rằng chúng ta sử dụng @include(‘common.errors’) chỉ định trong view để kết xuất lỗi xác thực của form. Common.errors sẽ cho phép chúng ta dễ dàng hiển thị các lỗi xác thực ở cùng định dạng trên tất cả các trang của chúng ta.

Hãy xác định nội dung của view ngay bây giờ:


// resources/views/common/errors.blade.php

@if (count($errors) > 0)
   <!-- Form Error List -->
   <div class="alert alert-danger">
       <strong>Whoops! Something went wrong!</strong>

       <br><br>

        <ul>
            @foreach ($errors->all() as $error)
               <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif


Chú ý: Biến $errors có sẵn trong mọi view của Laravel. Nó chỉ đơn giản là một phiên bản trống của ViewErrorBag nếu không có lỗi xác thực.

2. Tạo Task

Bây giờ xác thực đầu vào được xử lý, hãy thực sự tạo một task mới bằng cách điền tiếp vào route. Khi task mới được tạo, chung ta sẽ chuyến hướng tới URL /. Để tạo task chúng ta có thể sử dụng phương thức save sau khi tạo và đặt thuộc tính trên một Eloquent model mới.


Route::post('/task', function (Request $request) {
    $validator = Validator::make($request->all(), [
        'name' => 'required|max:255',
    ]);

    if ($validator->fails()) {
        return redirect('/')
            ->withInput()
            ->withErrors($validator);
    }

    $task = new Task;
    $task->name = $request->name;
    $task->save();

    return redirect('/');
});


Tuyệt quá! Bây giờ chúng ta có thể tạo thành công tasks. Tiếp theo, hãy tiếp tục thêm view bằng các xây dựng một danh sách hiển thị tất cả các task đang có.

 

3. Hiển thị Task đang có

Trước tiên, chúng ta cần sử lại route / để chuyển tất cả các tasks hiện có vào view. Hàm  view chấp nhận đối số thứ 2 là một mảng dữ liệu sẽ được cung cấp cho view, trong đó mỗi từ khỏa trong mảng sẽ trở thành một biến trong view.


Route::get('/', function () {
    $tasks = Task::orderBy('created_at', 'asc')->get();

    return view('tasks', [
        'tasks' => $tasks
    ]);
});



Khi dữ liệu đã được truyền qua, chúng ta có thể duyệt qua tasks để hiển thị trong view tasks.blade.php dưới dạng bảng. Cấu trúc @foreach Blade cho phép chúng ta viết các vòng lặp biên dịch thành mã PHP đơn giản nhanh chóng:


@extends('layouts.app')
@section('content')
  <!-- Create Task Form... -->

   <!-- Current Tasks -->
    @if (count($tasks) > 0)
      <div class="panel panel-default">
            <div class="panel-heading">
                Current Tasks
           </div>

            <div class="panel-body">
                <table class="table table-striped task-table">

                   <!-- Table Headings -->
                    <thead>
                       <th>Task</th>
                        <th> </th>
                    </thead>

                   <!-- Table Body -->
                    <tbody>
                        @foreach ($tasks as $task)
                           <tr>
                                <!-- Task Name -->
                               <td class="table-text">
                                    <div>{{ $task->name }}</div>
                                </td>

                                <td>
                                    <!-- TODO: Delete Button -->
                               </td>
                            </tr>
                        @endforeach
                   </tbody>
                </table>
            </div>
       </div>
    @endif
@endsection

Ứng dụng task của chúng ta gần như hoàn thành. Nhưng chúng ta không có cách nào để xóa các tác vụ hiện có khi hoàn thành. Hãy thêm điều đó tiếp theo!