Laravel การตรวจสอบข้อมูลก่อนบันทึกด้วย Validation

สวัสดีครับ วันนี้ผมมาแนะนำการใช้งาน Validation ของ Laravel ซึ่งใช้งานได้ง่ายมากๆ โดยประโยชน์ของ Laravel validation นั้นเอาไว้สำหรับตรวจสอบข้อมูลว่าถูกต้องตามที่เราต้องการหรือไม่ ก่อนที่จะบันทึกลงฐานข้อมูล(Database) ทำให้เราสามารถจัดเก็บข้อมูลถูกต้องตามความต้องการเช่น เราต้องการเก็บเบอร์โทรศัพท์ลงฐานข้อมูล ถ้าเราไม่ได้ใช้ Laravel validation ข้อมูลที่ผู้ใช้งานระบบจะกรอกมาจะเป็น 081-1448181 หรือ 02-2330-343 หรือ 099-234-2421 ซึ่งจริงๆแล้วเราไม่ได้ต้องการ ขีดหรือ (-) เลย เราแค่ต้องการให้ผู้ใช้งานกรอกแค่ตัวเลข เช่น 0811448181 เท่านั้น ดังนั้นเราจึงจำเป็นต้องใช้ Laravel validation นั้นเอง

Laravel Validation เป็น แพคเก็จที่ติดมาตอนติดตั้ง Laravel เลยเราไม่ต้องไปติดตั้งเพิ่ม ในการเรียนรู้การใช้งาน Laravel Validation นั้นเรียนรู้ง่าย ไม่ซับซ้อน ใช้งานไม่ยาก เพียงเรากำหนดเงื่อนไข ที่ต้องการ เวลา ผู้ใช้กรอกข้อมูลแล้ว submit form มา จังหวะนี้ ที่ Validation ทำการตรวจสอบ ถ้าหากว่าข้อมูลที่ตรวจสอบไม่ถูกต้อง ก็จะส่ง ข้อความมาหาผู้ใช้ แสดงผลที่หน้าฟอร์มทันที

เริ่มต้นใช้งาน โดยเริ่มจากทำ ตัวอย่างง่ายๆ ระบบ เพิ่มหนังสือ ครับ

#กำหนด Routes (เส้นทาง)

เริ่มแรก ให้เรา กำหนด routes ที่ routes/web.php

use App\Http\Controllers\BookController;
Route::get('/book/create', [BookController::class, 'create']);
Route::post('/book', [BookController::class, 'store']);
Route::get('/book/success', [BookController::class, 'saveSuccess']);

use App\Http\Controllers\BookController;

Route::get('/book/create', [BookController::class, 'create']);

Route::post('/book', [BookController::class, 'store']);

Route::get('/book/success', [BookController::class, 'saveSuccess']);

#สร้าง Validation

ให้เราทำการสร้าง validation สำหรับตรวจสอบข้อมูลโดนใช้คำสั่งใน command
php artisan make:request BookSave
หรือจะสร้างไฟล์ใน App/http/requests/BookSave.php ก็ได้

นำโค๊ดด้านล่างไปวางไว้ในไฟล์ BookSave.php

<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class BookSave extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
return [
'firstname' => 'required',
'lastname' => 'required',
'username' => 'required',
'email' => 'required|email',
'tel' => 'required|numeric|digits_between:8,15',
];
}
public function messages()
{
return [
'firstname.required' => 'โปรดระบุชื่อจริง',
'lastname.required' => 'โปรดระบุนามสกุล',
'username.required' => 'โปรดระบุชื่อผู้ใช้',
'email.required' => 'โปรดระบุอีเมล์',
'email.email' => 'รูปแบบอีเมล์ไม่ถูกต้อง',
'tel.required' => 'โปรดระบุเบอร์โทร',
'tel.numeric' => 'ระบุเฉพาะตัวเลขเท่านั้น',
'tel.digits_between' => 'เบอร์โทรต้องมี 8 - 15 ตัว',
];
}
}

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class BookSave extends FormRequest

{

/**

* Determine if the user is authorized to make this request.

* @return bool

public function authorize()

{

return true;

}

/**

* Get the validation rules that apply to the request.

* @return array

public function rules()

{

return [

'firstname' => 'required',

'lastname' => 'required',

'username' => 'required',

'email' => 'required|email',

'tel' => 'required|numeric|digits_between:8,15',

];

}

public function messages()

{

return [

'firstname.required' => 'โปรดระบุชื่อจริง',

'lastname.required' => 'โปรดระบุนามสกุล',

'username.required' => 'โปรดระบุชื่อผู้ใช้',

'email.required' => 'โปรดระบุอีเมล์',

'email.email' => 'รูปแบบอีเมล์ไม่ถูกต้อง',

'tel.required' => 'โปรดระบุเบอร์โทร',

'tel.numeric' => 'ระบุเฉพาะตัวเลขเท่านั้น',

'tel.digits_between' => 'เบอร์โทรต้องมี 8 - 15 ตัว',

];

}

อธิบายโค๊ด
บรรทัดที่ 14-17 กรณีที่ไม่ต้องการตรวจสอบสิทธิ์การเข้าถึงเช่นผู้ใช้คนนี้สามารถ บันทึกข้อมูล หรือแก้ไขข้อมูลได้ ให้เราคืนค่าเป็น true ตามตัวอย่างได้เลย
บรรทัดที่ 24-33 เป็นการกำหนดการตรวจสอบข้อมูลที่ส่งมาจากฟอร์ม
บรรทัดที่ 27 ตรวจสอบว่าชื่อจริง โดยอ้างอิงจาก หน้าฟอร์ม name=”firstname” ห้ามว่าง
บรรทัดที่ 28 ตรวจสอบนามสกุล ห้ามว่าง อ้างอิงหลักการเดียวกับบรรทัดบน เช่นกันคือ lastname
บรรทัดที่ 29 ตรวจสอบ username ห้ามว่าง
บรรทัดที่ 30 ตรวจสอบ email ห้ามว่างและ รูปแบบต้องเป็นอีเมล์ เช่น sample@mail.com หรือ test@hotmail.com
บรรทัดที่ 31 ตรวจสอบ เบอร์โทร ห้ามว่าง, ต้องเป็นตัวเลขเท่านั้น และมีจำนวนตัวอักษรตั้งแต่ 8 ตัวถึง 15 ตัว

บรรทัดที่ 35-47 เป็นการกำหนดข้อความแสดงผลถ้าตรวจสอบแล้วไม่ผ่าน ตรงนี้ถ้าเราไม่มีฟังก์ชั่น messages() นี้ ระบบจะไปเอาข้อความ Default จากไฟล์ resources/lang/en/validation.php หรือ resources/lang/xx/validation.php ตาม local ที่เราตั้งค่าครับ (ปล. เราสามารถ แก้ไขไฟล์แสดงข้อความ error ได้เหมือนกัน)

เราสามารถดู rule เพิ่มเติมนอกจากตัวอย่าง ได้ซึ่งมีให้ใช้งานในหลากหลายงานเยอะมาก
https://laravel.com/docs/9.x/validation#available-validation-rules

#สร้าง Controller

ให้เราทำการสร้าง controller ชื่อ BookController จะสร้างโดยใช้คำสั่งใน command
php artisan make:controller BookController
หรือจะสร้างไฟล์ใน App/http/controllers/BookController.php ก็ได้เช่นกัน
แล้วให้นำโค๊ดด้านล่างไปวางไว้

<?php
namespace App\Http\Controllers;
use App\Http\Requests\BookSave;
class BookController extends Controller
{
public function create()
{
return view('book.create');
}
public function store(BookSave $request)
{
return redirect('/book/success');
}
public function saveSuccess()
{
return view('book.save_success');
}
}

<?php

namespace App\Http\Controllers;

use App\Http\Requests\BookSave;

class BookController extends Controller

{

public function create()

{

return view('book.create');

}

public function store(BookSave $request)

{

return redirect('/book/success');

}

public function saveSuccess()

{

return view('book.save_success');

}

อธิบายโค๊ด
บรรทัด 5 เรียกใช้ BookSave Validate โดยใช้คำสั่ง use App\Http\Requests\BookSave
บรรทัดที่ 9-12 ฟังก์ชั่น create() แสดงผลหน้าฟอร์ม
บรรทัดที่ 14-17 ฟังก์ชั่น store() บันทึกข้อมูลฟอร์ม เมื่อฟอร์ม Submit มา จะผ่าน BookSave ก่อนเข้า Controller Method
บรรทัดที่ 19-22 ฟังก์ชั่น saveSuccess() แสดงหน้าจอเมื่อบันทึกข้อมูลสำเร็จ

#สร้าง View

– หน้าจอฟอร์ม create.blade.php
ให้เราสร้างไฟล์ view ที่ resources/views/book/create.blade.php (ถ้าไม่มีโฟล์เดอร์ book ให้สร้างขึ้นมาเลยครับ) แล้วนำโค๊ดด้านล่างไปวางไว้

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Shop Book</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body class="bg-light">
<div class="container" style="width: 960px;">
<main>
<div class="py-5 text-center">
<img src="https://laravel.com/img/logotype.min.svg">
<h2>Checkout form</h2>
<p class="lead">ระบบสั่งซื้อสินค้าออนไลน์ ง่ายดายเพียงปลายนิ้ว</p>
</div>
<div class="row g-5">
<div class="col-md-5 col-lg-4 order-md-last">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-primary">Your cart</span>
<span class="badge bg-primary rounded-pill">3</span>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">ขนมปังใส้มายองเนส</h6>
<small class="text-muted">สุดยอดขนมปังแสนอร่อย อิ่มแน่นอน</small>
</div>
<span class="text-muted">฿12</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">นมเปรี้ยว ตราสุขใจ</h6>
<small class="text-muted">นมเปรี้ยวขนาด 100ML อร่อยเต็มๆ</small>
</div>
<span class="text-muted">฿10</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">ยาสีฟัน มายดรีม</h6>
<small class="text-muted">ยาสีฟัน ฟันขาวสดชื่น</small>
</div>
<span class="text-muted">฿20</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-light">
<div class="text-success">
<h6 class="my-0">Promo code</h6>
<small>ส่วนลดพิเศษ</small>
</div>
<span class="text-success">−฿5</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>Total (USD)</span>
<strong>฿37</strong>
</li>
</ul>
<form class="card p-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Promo code">
<button type="submit" class="btn btn-secondary">Redeem</button>
</div>
</form>
</div>
<div class="col-md-7 col-lg-8">
<h4 class="mb-3">Billing address</h4>
<form method="post" action="{{ url('/book') }}">
@csrf
<div class="row g-3">
<div class="col-sm-6">
<label class="form-label">ชื่อ</label>
<input type="text" name="firstname" class="form-control @error('firstname') is-invalid @enderror" value="{{ old('firstname') }}">
<div class="invalid-feedback">
{{ $errors->first('firstname') }}
</div>
</div>
<div class="col-sm-6">
<label class="form-label">นามสกุล</label>
<input type="text" name="lastname" class="form-control @error('lastname') is-invalid @enderror" value="{{ old('lastname') }}">
<div class="invalid-feedback">
{{ $errors->first('lastname') }}
</div>
</div>
<div class="col-12">
<label for="username" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text">@</span>
<input type="text" name="username" class="form-control @error('username') is-invalid @enderror" value="{{ old('username') }}">
<div class="invalid-feedback">
{{ $errors->first('username') }}
</div>
</div>
</div>
<div class="col-6">
<label for="email" class="form-label">Email</label>
<input type="text" name="email" class="form-control @error('email') is-invalid @enderror" placeholder="you@example.com" value="{{ old('email') }}">
<div class="invalid-feedback">
{{ $errors->first('email') }}
</div>
</div>
<div class="col-6">
<label for="zip" class="form-label">เบอร์โทร</label>
<input type="text" name="tel" class="form-control @error('tel') is-invalid @enderror" value="{{ old('tel') }}">
<div class="invalid-feedback">
{{ $errors->first('tel') }}
</div>
</div>
<div class="col-12">
<label for="address" class="form-label">ที่อยู่</label>
<input type="text" name="address" class="form-control" placeholder="1234 หมู่ 9 ต.บางรัก อ.บางประกง กรุงเทพฯ 11220" value="{{ old('address') }}">
<div class="invalid-feedback">
Please enter your shipping address.
</div>
</div>
</div>
<hr class="my-4">
<button class="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button>
</form>
</div>
</div>
</main>
<footer class="my-5 pt-5 text-muted text-center text-small">
<p class="mb-1">&copy; 2017–2022 Company Name</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Privacy</a></li>
<li class="list-inline-item"><a href="#">Terms</a></li>
<li class="list-inline-item"><a href="#">Support</a></li>
</ul>
</footer>
</div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

<!DOCTYPE html>

<head>

integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

</head>

<main>

<h2>Checkout form</h2>

<p class="lead">ระบบสั่งซื้อสินค้าออนไลน์ ง่ายดายเพียงปลายนิ้ว</p>

</div>

</h4>

<div>

<h6 class="my-0">ขนมปังใส้มายองเนส</h6>

<small class="text-muted">สุดยอดขนมปังแสนอร่อย อิ่มแน่นอน</small>

</div>

</li>

<div>

<h6 class="my-0">นมเปรี้ยว ตราสุขใจ</h6>

<small class="text-muted">นมเปรี้ยวขนาด 100ML อร่อยเต็มๆ</small>

</div>

</li>

<div>

<h6 class="my-0">ยาสีฟัน มายดรีม</h6>

<small class="text-muted">ยาสีฟัน ฟันขาวสดชื่น</small>

</div>

</li>

<h6 class="my-0">Promo code</h6>

<small>ส่วนลดพิเศษ</small>

</div>

</li>

<span>Total (USD)</span>

</li>

</ul>

<button type="submit" class="btn btn-secondary">Redeem</button>

</div>

</form>

</div>

<h4 class="mb-3">Billing address</h4>

@csrf

</div>

<label class="form-label">นามสกุล</label>

</div>

<label for="username" class="form-label">Username</label>

</div>

<label for="email" class="form-label">Email</label>

</div>

</div>

Please enter your shipping address.

</div>

<button class="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button>

</form>

</div>

</main>

<li class="list-inline-item"><a href="#">Privacy</a></li>

<li class="list-inline-item"><a href="#">Terms</a></li>

<li class="list-inline-item"><a href="#">Support</a></li>

</ul>

</footer>

</div>

</body>

</html>

อธิบายโค๊ด
บรรทัดที่ 72-130 เป็นฟอร์ม ที่มีช่องกรอกข้อมูล
จะอธิบายที่ช่อง firstname ที่บรรทัด 76 โดยสิ่งที่อ้างอิงกันคือ name=”firstname” จะถูกไปอ้างอิงในไฟล์ BookSave.php ตอนทำ rule นั้นเอง และ เราได้กำหนด class is-invalid ให้กับช่องนี้กรณีมี error ตรวจสอบไม่ผ่าน ให้มี is-invalid (class ที่แสดงกรอบสีแดงพร้อม ไอคอนตกใจ) และ แสดงข้อความหลักจากกด submit ไปแล้วเพื่อไม่ให้ค่าหายไปโดยใช้ old ซึ่งเป็น session แบบ flash ที่ใช้เพียงครั้งเดียว

ส่วนช่องอื่นๆ ก็ใช้หลักการเดียว เพียงแต่เปลี่ยนชื่อฟิล์ด แค่นั้นครับ

– หน้าจอแสดงผลลัพท์ save_success.blade.php
ให้เราสร้างไฟล์ view ที่ resources/views/book/save_success.blade.php แล้วนำโค๊ดด้านล่างไปวางไว้

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Shop Book</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body class="bg-light">
<div class="container" style="width: 960px;">
<div class="text-center">
<h1 class="mt-5">บันทึกข้อมูลสำเร็จ</h1>
<a href="{{ url('/book/create') }}" class="btn btn-primary" role="button">กลับไปหน้าฟอร์ม</a>
</div>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

</head>

<h1 class="mt-5">บันทึกข้อมูลสำเร็จ</h1>

<a href="{{ url('/book/create') }}" class="btn btn-primary" role="button">กลับไปหน้าฟอร์ม</a>

</div>

</body>

</html>

อธิบายโค๊ด
โค๊ดส่วนนี้การทำงานคือแสดงผลลัพท์หน้าจออย่างเดียว ให้ผู้ใช้เห็นว่า บันทึกข้อมูลผ่านการตรวจสอบแล้ว

มาดูผลลัพท์กันครับ

สำหรับการใช้งาน Laravel validation ก็ประมาณนี้ ซึ่งจริงๆมี rule ที่เยอะแยะมากและช่วยเราทำให้เราลดเวลาในการเขียนเองเยอะไปมาก เดี่ยวไว้คราวหน้าจะมาแนะนำทริปใหม่ๆ เพิ่มเติม สำหรับบทความนี้ก็มีเพียงเท่านี้ ขอบคุณครับ

หากต้องการดาวน์โหลด source code Laravel Validation ของตัวอย่างนี้ทั้งหมดสามารถ inbox มาขอได้ที่เพจ
https://www.facebook.com/itoffside
กติกาคือ เพียงแค่กดไลท์เพจ แล้วแคปเจอร์กดไลท์ แล้วส่ง inbox มาหาเราทางเราจะส่งลิงค์ดาวน์โหลดไปให้

itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี

ข้อมูลข่าวสารและเรื่องราวบนโลกของไอทีที่ ล้ำหน้า พร้อมสาระการเขียนโปรแกรมคอมพิวเตอร์

เริ่มต้นใช้งาน โดยเริ่มจากทำ ตัวอย่างง่ายๆ ระบบ เพิ่มหนังสือ ครับ

#กำหนด Routes (เส้นทาง)

#สร้าง Validation

#สร้าง Controller

#สร้าง View

About the Author: Onmobile

เริ่มต้นใช้งาน โดยเริ่มจากทำ ตัวอย่างง่ายๆ ระบบ เพิ่มหนังสือ ครับ

#กำหนด Routes (เส้นทาง)

#สร้าง Validation

#สร้าง Controller

#สร้าง View

You May Also Like

PHP Workshop Register+Login ระบบสมัครสมาชิก+Login [Full Course] สอนละเอียด ฟรี!

PHP Workshop Shoppingcart จัดการสินค้า, ตะกร้าสินค้า, สั่งซื้อสินค้า [Full Course] สอนละเอียด ฟรี!

About the Author: Onmobile