Kiểm tra ràng buộc dữ liệu (Validation) phía Server

Nền tảng Kiến thức - Hành trang tới Tương lai

Chương 9-Bài 19. Kiểm tra ràng buộc dữ liệu (Validation) phía Server

Tác giả: Dương Nguyễn Phú Cường #2207

Ngày đăng: Hồi xưa đó

Lượt xem: 194

Xem định dạng IN

Để kiểm tra ràng buộc dữ liệu một cách chặt chẽ, chúng ta sẽ kiểm tra ràng buộc trên phía Server. Các ràng buộc phía Server sử dụng Laravel, có thể xem trên trang chủ: https://laravel.com/docs/5.8/validation

Cách 1: sử dụng class `Validator` trực tiếp trong Controller

Step 1: bổ sung kiểm tra ràng buộc dữ liệu cho chức năng "Thêm mới"

Theo quy trình CRUD chuẩn của Laravel, sau khi người dùng nhập dữ liệu, khi bấm Lưu sẽ chuyển dữ liệu đến action store để xử lý lưu trữ. Chúng ta sẽ bắt ràng buộc dữ liệu trong action này.
Hiệu chỉnh file: app\Http\Controllers\ChuDeController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\ChuDe;
use Session;
use Validator;

class ChuDeController extends Controller
{
    ...

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        // var_dump();die;
        // print_r();die;
        // dd($request); //Dump and die

        // Kiểm tra ràng buộc dữ liệu (validation)
        $validator = Validator::make($request->all(), [
            'cd_ten' => 'required|min:3|max:50|unique:cusc_chude',
        ]);

        // Nếu kiểm tra ràng buộc dữ liệu thất bại -> tức là dữ liệu không hợp lệ
        // Chuyển hướng về view "Thêm mới" với,
        // - Thông báo lỗi vi phạm các quy luật.
        // - Dữ liệu cũ (người dùng đã nhập).
        if ($validator->fails()) {
            return redirect(route('backend.chude.create'))
                        ->withErrors($validator)
                        ->withInput();
        }

        $cd = new ChuDe();
        $cd->cd_ten = $request->input('cd_ten');
        $cd->cd_trangThai = 2;
        $cd->save();

        Session::flash('alert-warning', 'Thêm mới thành công ^^~!!!');
        return redirect()->route('backend.chude.index');
    }

    ...
}

Step 2: bổ sung chỗ hiển thị thông báo các lỗi vi phạm trên chức năng "Thêm mới"

Tạo mới file resources\views\backend\layout\partials\error-message.blade.php

<!-- DIV hiển thị thông báo lỗi start -->
@if ($errors->any())
<div class="alert alert-danger">
    <ul>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif
<!-- DIV hiển thị thông báo lỗi end -->

Nhúng vùng hiển thị lỗi vào trong view layout master. Hiệu chỉnh file resources\views\backend\layout\master.blade.php

<!doctype html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    ...
    <!-- Main content -->
    <div class="container-fluid">
        <div class="row">
            <!-- Sidebar -->
            @include('backend.layout.partials.sidebar')
            <!-- End sidebar -->

            <!-- Content -->
            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">@yield('feature-title')</h1>
                    <small>@yield('feature-description')</small>
                </div>
                @include('backend.layout.partials.error-message')
                @include('backend.layout.partials.flash-message')
                @yield('content')
            </main>
            <!-- End content -->
        </div>
    </div>
    <!-- End main content -->
    ...
  </body>
</html>

Hiển thị lại dữ liệu cũ (người dùng đã nhập) khi hiển thị form "Thêm mới", tránh tình trạng khó chịu của người dùng (phải nhập lại từ đầu các thông tin). Hiệu chỉnh file resources\views\backend\chude\create.blade.php

...

@section('content')
<form id="frmChuDe" name="frmChuDe" method="post" action="{{ route('backend.chude.store') }}">
    {{ csrf_field() }}
    <div class="form-group">
        <label for="cd_ten">Tên chủ đề</label>
        <input type="text" class="form-control" id="cd_ten" name="cd_ten" aria-describedby="cd_tenHelp" placeholder="Nhập tên chủ đề" value="{{ old('cd_ten') }}">
        <small id="cd_tenHelp" class="form-text text-muted">Nhập tên chủ đề. Giới hạn trong 50 ký tự.</small>
    </div>
    <button class="btn btn-primary">Lưu</button>
</form>
@endsection

...

Cách 2: tạo `Custom Request` để kiểm tra ràng buộc dữ liệu

Step 1: tạo `Custom Request` cho việc Thêm mới Chủ đề

Chạy câu lệnh:

php artisan make:request ChuDeCreateRequest

File sẽ được Laravel tạo ra trong `app\Http\Requests\ChuDeCreateRequest.php`

Step 2: bổ sung các quy luật (rules) cho `ChuDeCreateRequest`

Hiệu chỉnh file:

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class ChuDeCreateRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true; // Tạm thời không phân quyền
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'cd_ten' => 'required|min:3|max:50|unique:cusc_chude', //tên table cusc_chude
        ];
    }

    public function messages() 
    {
        return [
            'cd_ten.required' => 'Tên chủ đề bắt buộc nhập',
            'cd_ten.min' => 'Tên chủ đề ít nhất phải 3 ký tự trở lên',
            'cd_ten.max' => 'Tên chủ đề tối đa chỉ 50 ký tự',
            'cd_ten.unique' => 'Tên chủ đề này đã tồn tại. Vui lòng nhập tên chủ đề khác'
        ];
    }
}

Step 3: yêu cầu action `store` sử dụng `ChuDeCreateRequest` để kiểm tra ràng buộc dữ liệu

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\ChuDe;
use Session;
use Validator;
use App\Http\Requests\ChuDeCreateRequest;

class ChuDeController extends Controller
{
    ...
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(ChuDeCreateRequest $request)
    {
        // var_dump();die;
        // print_r();die;
        // dd($request); //Dump and die

        // // Kiểm tra ràng buộc dữ liệu (validation)
        // $validator = Validator::make($request->all(), [
        //     'cd_ten' => 'required|min:3|max:50|unique:cusc_chude', //tên table
        // ]);

        // // Nếu kiểm tra ràng buộc dữ liệu thất bại -> tức là dữ liệu không hợp lệ
        // // Chuyển hướng về view "Thêm mới" với,
        // // - Thông báo lỗi vi phạm các quy luật.
        // // - Dữ liệu cũ (người dùng đã nhập).
        // if ($validator->fails()) {
        //     return redirect(route('backend.chude.create'))
        //                 ->withErrors($validator)
        //                 ->withInput();
        // }

        $cd = new ChuDe();
        $cd->cd_ten = $request->input('cd_ten');
        $cd->cd_trangThai = 2;
        $cd->save();

        Session::flash('alert-warning', 'Thêm mới thành công ^^~!!!');
        return redirect()->route('backend.chude.index');
    }
    ...
}

Về trang chủ Về Khóa học

Bài học trước Bài học tiếp theo

Chương trình học

Các bài học

Chương trình học

Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...

Chương trình học

Bài học trước Bài học tiếp theo

Về trang chủ Về Khóa học

Vuexy

Files

Members

NỀN TẢNG

Chương 9-Bài 19. Kiểm tra ràng buộc dữ liệu (Validation) phía Server

Cách 1: sử dụng class `Validator` trực tiếp trong Controller

Step 1: bổ sung kiểm tra ràng buộc dữ liệu cho chức năng "Thêm mới"

Step 2: bổ sung chỗ hiển thị thông báo các lỗi vi phạm trên chức năng "Thêm mới"

Cách 2: tạo `Custom Request` để kiểm tra ràng buộc dữ liệu

Step 1: tạo `Custom Request` cho việc Thêm mới Chủ đề

Step 2: bổ sung các quy luật (rules) cho `ChuDeCreateRequest`

Step 3: yêu cầu action `store` sử dụng `ChuDeCreateRequest` để kiểm tra ràng buộc dữ liệu

Mục lục

Chương trình học

Chương trình học

Chương trình học

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Vuexy

Files

Members

Kiểm tra ràng buộc dữ liệu (Validation) phía Server

Chương 9-Bài 19. Kiểm tra ràng buộc dữ liệu (Validation) phía Server

Cách 1: sử dụng class Validator trực tiếp trong Controller

Step 1: bổ sung kiểm tra ràng buộc dữ liệu cho chức năng "Thêm mới"

Step 2: bổ sung chỗ hiển thị thông báo các lỗi vi phạm trên chức năng "Thêm mới"

Cách 2: tạo Custom Request để kiểm tra ràng buộc dữ liệu

Step 1: tạo Custom Request cho việc Thêm mới Chủ đề

Step 2: bổ sung các quy luật (rules) cho ChuDeCreateRequest

Step 3: yêu cầu action store sử dụng ChuDeCreateRequest để kiểm tra ràng buộc dữ liệu

Mục lục

Chương trình học

Chương trình học

Chương trình học

Menu Tiện ích

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Cách 1: sử dụng class `Validator` trực tiếp trong Controller

Cách 2: tạo `Custom Request` để kiểm tra ràng buộc dữ liệu

Step 1: tạo `Custom Request` cho việc Thêm mới Chủ đề

Step 2: bổ sung các quy luật (rules) cho `ChuDeCreateRequest`

Step 3: yêu cầu action `store` sử dụng `ChuDeCreateRequest` để kiểm tra ràng buộc dữ liệu