Todo List: Kiểm tra dữ liệu với Laravel Validation

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

Video trong bài viết

Ứng dụng Todo List đã gần thành hình với các chức năng tạo bản ghi mới, xem danh sách bản ghi và xem chi tiết từng bản ghi. Tiếp theo, trong bài học hôm nay chúng ta cùng tìm hiểu về một công việc rất quan trọng: Kiểm tra dữ liệu. Tại sao kiểm tra dữ liệu quan trọng? chúng ta cùng tìm hiểu nhé.

Tại sao cần kiểm tra dữ liệu

Người dùng không hề biết phải nhập dữ liệu như thế nào vào ứng dụng, đặc biệt khi mới lần đầu sử dụng và như vậy việc nhập liệu có thể dẫn đến lỗi ứng dụng. Hơn nữa, dữ liệu là một tài nguyên quan trọng trong ứng dụng, muốn khai thác tài nguyên này chúng ta cần có tài nguyên được sắp xếp và phân loại một cách rõ ràng. Ví dụ như một ô nhập liệu về ngày sinh, có rất nhiều các giá trị như 01/02/1983, 19830201, Feb 01 1983, Ngày 01 tháng 02 năm 1983… tuy nhiên, máy tính lại không thể hiểu tất cả các kiểu nhập liệu này, đặc biệt khi khai thác dữ liệu chúng ta rất dễ bị nhầm lẫn, vậy nên việc kiểm soát dữ liệu và bắt người dùng thực hiện các quy tắc nhập liệu ngay từ đầu là một việc rất quan trọng.

Tham khảo thêm tuyển dụng Laravel hấp dẫn cho bạn

Kiểm tra dữ liệu với Laravel Validation

Các controller trong Laravel đều được kế thừa từ class App\Http\Controllers\Controller, mà class này sử dụng trait ValidateRequests cho phép chúng ta kiểm tra dữ liệu thông qua gọi phương thức validate().

Trở lại đoạn code lưu dữ liệu xuống database trong bài trước, chúng ta cần kiểm tra dữ liệu trước khi thực hiện lưu dữ liệu, cùng xem đoạn code thực hiện như sau:

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

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

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

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

validate() có hai tham số:

• Tham số thứ nhất là đối tượng request chứa thông tin về dữ liệu được gửi lên từ người dùng.
• Tham số thứ hai là một mảng các quy tắc kiểm tra cho từng trường nhập liệu có trong request.
  • Trường name: bắt buộc nhập, tối thiểu 6 ký tự, tối đa 12 ký tự.
  • Trường description: bắt buộc nhập.

Như vậy chúng ta đã thực hiện kiểm tra dữ liệu trước khi lưu trữ xuống database. Tuy nhiên nếu chúng ta thực hiện nhập liệu sai thì không thấy ứng dụng có phản hồi gì cả, đó là do chúng ta chưa hiển thị thông báo lỗi nhập liệu ra ứng dụng.

Hiển thị thông báo lỗi kiểm tra dữ liệu

Mặc định trong Laravel, khi kiểm tra dữ liệu gặp lỗi, hệ thống tự động truyền đến trang (view) hiện tại một biến là $errors. Biến này chứa thông tin về các lỗi xảy ra khi kiểm tra dữ liệu.

Trong view hiện hành, ở đây là create.blade.php, để hiển thị các lỗi kiểm tra dữ liệu nếu có, chúng ta sử dụng một vòng lặp và hiển thị các lỗi là một thành phần của danh sách:

@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

Phần hiển thị lỗi này sẽ đặt phía trên form nhập liệu, như vậy nội dung của create.blade.php sau khi hoàn thành như sau:

@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">
                    @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="/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

Quay lại ứng dụng Todo List của chúng ta, tạo thử một todo với tên để trống xem thế nào:

Các lỗi đã hiển thị cho người dùng, như vậy người dùng luôn biết được trạng thái hiện tại của ứng dụng.

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

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

• Kiểm tra HTML5 validation message
• Todo List: Hiển thị thông báo trong ứng dụng Laravel
• Kiểm tra tính hợp lệ của dữ liệu đầu vào form Spring Web MVC bởi Hibernate Validator

Xem thêm Việc làm IT hấp dẫn trên TopDev