การตรวจสอบแบบฟอร์ม CodeIgniter พร้อมตัวอย่างการส่งแบบฟอร์ม
แบบฟอร์มใน CodeIgniter
แบบฟอร์มเป็นช่องทางให้ผู้ใช้โต้ตอบกับแอปพลิเคชันและส่งข้อมูล สามารถใช้แบบฟอร์มนี้สำหรับติดต่อเราเพื่อให้ผู้เยี่ยมชมเว็บไซต์กรอกและส่งข้อมูลให้เราได้ โดยปกติแล้วข้อมูลที่ได้รับจะถูกเก็บไว้ในฐานข้อมูลหรือส่งทางอีเมล
โครงสร้างแบบฟอร์ม HTML
โค้ดต่อไปนี้จะแสดงโครงสร้างของแบบฟอร์ม HTML ทั่วไป
<form id="frmUsers" name="frmUsers" method="POST" action="create_user.php"> <input type="text" id="user_id" name="user_id"> <input type="password" id="password" name="password"> <input type="submit" value="Submit"> </form>
ที่นี่
- - เป็นแท็กเปิดและปิดของแบบฟอร์ม แอตทริบิวต์ id และ name ระบุชื่อและ id ของแบบฟอร์ม คุณลักษณะ method ระบุ HTTP Verb ที่จะใช้ โดยปกติจะระบุด้วยกริยา POST
- ระบุองค์ประกอบของแบบฟอร์ม แอ็ตทริบิวต์ชื่อคือชื่อตัวแปรที่ส่งไปยังเซิร์ฟเวอร์ส่วนหลังเพื่อประมวลผล
ตัวช่วยแบบฟอร์ม CodeIgniter
HTML เป็นเลิศที่เข้าใจและเขียนได้ง่ายแต่ CodeIgniter ทำให้ทุกอย่างง่ายขึ้น CodeIgniter มีฟังก์ชันในตัวเพื่อสร้างแบบฟอร์ม HTML
มาพิจารณาโค้ดส่งแบบฟอร์ม CodeIgniter ต่อไปนี้ซึ่งใช้ตัวช่วยแบบฟอร์มเพื่อสร้างแบบฟอร์ม
<?php echo form_open('create_user.php', ['id' => 'frmUsers']); echo form_label('User Id', 'user_id'); echo form_input(['name' => 'user_id']); echo form_label('Password', 'password'); echo form_input(['type' => 'password', 'name' => 'password']); echo form_submit('btnSubmit', 'Create User'); echo form_close(); ?>
ที่นี่
- echo form_open('create_user.php', ['id' => 'frmUsers']); สร้างแท็กเปิดของแบบฟอร์ม ตั้งค่าการดำเนินการเป็น POST Verb และตั้งค่า URL การดำเนินการเป็น create_user.php
- echo form_label('รหัสผู้ใช้', 'user_id'); สร้างป้ายกำกับที่อ่าน User Id สำหรับช่องป้อนข้อมูลด้วยชื่อ user_id
- echo form_input(['ชื่อ' => 'user_id']); สร้างช่องป้อนข้อมูลประเภทข้อความด้วยชื่อ user_id
- echo form_submit('btnSubmit', 'สร้างผู้ใช้'); สร้างปุ่มส่งที่มีป้ายกำกับว่าสร้างผู้ใช้
- เสียงสะท้อน form_close(); ปิดแบบฟอร์ม
ดังที่คุณเห็นจากโค้ด CodeIgniter ด้านบน ตัวช่วยแบบฟอร์มทำให้เราสร้างแบบฟอร์มโดยใช้ PHP ล้วนๆ ได้อย่างง่ายดาย โดยการส่งแอตทริบิวต์ไปยังวิธีการช่วยเหลือแบบฟอร์ม เราสามารถปรับแต่ง HTML ที่สร้างขึ้นสำหรับแบบฟอร์มได้
โค้ดด้านบนจะสร้างโค้ดฟอร์ม HTML ดังต่อไปนี้
<form action="http://localhost:3000/index.php/create_user.php" id="frmUsers" method="post" accept-charset="utf-8"> <label for="user_id">User Id</label> <input type="text" name="user_id" value=""/> <label for="password">Password</label> <input type="password" name="password" value=""/> <input type="submit" name="btnSubmit" value="Create User"/> </form>
ข้อดีที่ใหญ่ที่สุดของการใช้ตัวช่วยแบบฟอร์มก็คือ การสร้างโค้ดที่ถูกต้องตามความหมายซึ่งเป็นไปตามมาตรฐาน HTML ที่ตั้งไว้
คุณสามารถดูเอกสาร CodeIgniter อย่างเป็นทางการเพื่อดูรายละเอียดเพิ่มเติม
https://codeigniter.com/user_guide/helpers/form_helper.html
ตัวอย่างแบบฟอร์ม CodeIgniter
หลังจากครอบคลุมพื้นฐานของ CodeIgniter แล้ว เรากลับมาที่โปรเจ็กต์การฝึกสอนของเราซึ่งเราได้ดำเนินการมาตลอดระยะเวลานี้ ซีรี่ส์การสอน CodeIgniterโดยสรุป โปรเจ็กต์บทช่วยสอนนี้จะสร้างแอปจัดการรายชื่อติดต่อที่จะเก็บรายละเอียดไว้ในฐานข้อมูล
สร้างที่ติดต่อ
ในบทช่วยสอนก่อนหน้านี้ เราได้สร้างเส้นทางสำหรับแอปพลิเคชันและมุมมองแบบธรรมดาของเรา เปิดแอปพลิเคชัน/views/contacts/create.php
แก้ไขโค้ดสำหรับ create.php ดังนี้
<div class="column"> <h2 class="title">Create Contact</h2> <form action="<?= base_url('contacts/store') ?>" method="POST"> <div class="field"> <label class="label">Contact Name</label> <div class="control"> <input id="name" name="name" class="input" type="text" placeholder="Type the contact name"> </div> </div> <div class="field"> <label class="label">Contact Number</label> <div class="control"> <input id="name" name="name" class="input" type="text" placeholder="Type the contact number"> </div> </div> <div class="field"> <label class="label">Email Address</label> <div class="control"> <input id="email" name="email" class="input" type="email" placeholder="Type the email address"> </div> </div> <div class="field is-grouped"> <div class="control"> <button class="button is-link">Save Contact</button> </div> </div> </form> </div>
หมายเหตุ โค้ดด้านบนใช้ HTML ธรรมดาเพื่อสร้างแบบฟอร์ม
ตอนนี้เรามาดูกันว่าแบบฟอร์มของเรามีลักษณะอย่างไรในเว็บเบราว์เซอร์
โหลด URL ต่อไปนี้ลงในเว็บเบราว์เซอร์ของเรา
http://localhost:3000/contacts/create
หากคุณกำลังสร้างโครงการบทช่วยสอน คุณควรจะสามารถเห็นสิ่งต่อไปนี้ได้
การตรวจสอบแบบฟอร์มใน CodeIgniter
การตรวจสอบมีบทบาทสำคัญมากในการประมวลผลข้อมูลจากแบบฟอร์ม สมมติว่าผู้ใช้กำลังลงทะเบียนบนเว็บไซต์ เราต้องการให้แน่ใจว่าผู้ใช้กรอกรายละเอียดที่จำเป็นและที่อยู่อีเมล เราต้องตรวจสอบให้แน่ใจว่าที่อยู่อีเมลที่ป้อนนั้นถูกต้อง หากเราใช้ค่าวันที่ เราต้องการให้แน่ใจว่าช่วงวันที่นั้นถูกต้อง เราจะไม่จำเป็นต้องยอมรับวันที่ที่มี 32 วันในหนึ่งเดือนเป็นต้น
การตรวจสอบความถูกต้องช่วยแก้ปัญหาข้างต้น การตรวจสอบความถูกต้องของ CodeIgniter จะดำเนินการในสอง (2) ด้าน เมื่อทำงานกับเว็บแอปพลิเคชัน
การตรวจสอบฝั่งไคลเอ็นต์เสร็จสิ้นในส่วนของเว็บเบราว์เซอร์ ซึ่งมักจะเกี่ยวข้องกับการใช้ HTML และ Javaสคริปต์ การตรวจสอบฝั่งไคลเอ็นต์ช่วยเพิ่มประสิทธิภาพเนื่องจากทุกอย่างดำเนินการที่ฝั่งไคลเอ็นต์ ดังนั้นจึงไม่จำเป็นต้องส่งข้อมูลไปยังเซิร์ฟเวอร์ ข้อเสียของการตรวจสอบฝั่งไคลเอ็นต์คือผู้ใช้ควบคุมได้ หากคุณพึ่งพา Javaสคริปต์สำหรับตรวจสอบและผู้ใช้ปิดการใช้งาน Javaสคริปต์ในเบราว์เซอร์ การตรวจสอบของคุณจะล้มเหลว
การตรวจสอบฝั่งเซิร์ฟเวอร์เสร็จสิ้นบนฝั่งเซิร์ฟเวอร์ ข้อเสียของการตรวจสอบนี้คือผู้ใช้ต้องส่งข้อมูลไปยังเซิร์ฟเวอร์เพื่อประมวลผลและรอการตอบกลับ การดำเนินการนี้ใช้ทรัพยากรเครือข่ายและอาจลดประสิทธิภาพลง ข้อได้เปรียบที่สำคัญของการตรวจสอบฝั่งเซิร์ฟเวอร์คือ คุณสามารถควบคุมได้มากขึ้น และคุณมั่นใจได้ว่ากฎการตรวจสอบของคุณจะทำงานแม้ว่าผู้ใช้จะปิดการทำงานก็ตาม Javaสคริปต์ในเบราว์เซอร์
กลยุทธ์ที่ดีกว่าคือการใช้ฝั่งไคลเอ็นต์เป็นกลยุทธ์การตรวจสอบหลัก และใช้ฝั่งเซิร์ฟเวอร์เป็นกลไกทางเลือก
การเพิ่มกฎการตรวจสอบแบบฟอร์ม
CodeIgniter มีไลบรารีการตรวจสอบในตัว ไลบรารีจะถูกโหลดโดยใช้บรรทัดต่อไปนี้
$this->load->library('form_validation');
สามารถใช้ไลบรารีการตรวจสอบแบบฟอร์ม CodeIgniter เพื่อดำเนินการบางอย่างต่อไปนี้
- ตรวจสอบช่องที่ต้องกรอก วิธีนี้จะตรวจสอบค่าที่ส่งและส่งกลับข้อผิดพลาดหากฟิลด์ที่ถูกแท็กตามต้องการไม่มีค่า
- การตรวจสอบประเภทข้อมูล – บางฟิลด์อาจต้องใช้ค่าตัวเลขเท่านั้น หากตรวจพบค่าที่ไม่ใช่ตัวเลข ไลบรารีจะส่งกลับข้อผิดพลาด การดำเนินการส่งแบบฟอร์มก็ถูกยกเลิกเช่นกัน
- การตรวจสอบความยาว – ข้อมูลบางประเภทต้องการให้ฟิลด์มีจำนวนอักขระขั้นต่ำหรือสูงสุดที่แน่นอน ไลบรารีการตรวจสอบมีประโยชน์ในกรณีเช่นนี้
- การล้างข้อมูล – ไลบรารีการตรวจสอบยังมีความสามารถในการลบโค้ดที่เป็นอันตรายออกจากข้อมูลที่ส่งมาด้วยเหตุผลด้านความปลอดภัย ตัวอย่างเช่น หากค่าที่ส่งมีการใช้งานอยู่ Javaหากมีสคริปต์หรือโค้ด SQL Injection ในนั้น ไลบรารีการตรวจสอบจะลบโค้ดที่เป็นอันตรายออกและทำให้ไม่สามารถใช้งานได้
- ตรวจสอบความถูกต้องของฟิลด์ฐานข้อมูลที่ไม่ซ้ำกัน – สมมติว่าคุณมีแบบฟอร์มที่ผู้ใช้ลงทะเบียนโดยใช้ที่อยู่อีเมล คุณต้องการให้แน่ใจว่าที่อยู่อีเมลนั้นไม่ซ้ำกัน ไลบรารีช่วยให้คุณตรวจสอบข้อมูลที่ส่งมาเทียบกับตารางและฟิลด์ฐานข้อมูลได้อย่างง่ายดาย ซึ่งจะช่วยให้คุณทราบว่ามีการใช้ค่าไปแล้ว
กฎการตรวจสอบจะถูกกำหนดโดยใช้รูปแบบต่อไปนี้
$this->form_validation->set_rules('field','human readable field','rule',['custom message']);
ที่นี่
- 'field' ระบุชื่อฟิลด์แบบฟอร์มที่จะตรวจสอบโดยไลบรารี
- 'ฟิลด์ที่มนุษย์สามารถอ่านได้' กำหนดรูปแบบที่มนุษย์สามารถอ่านได้ของฟิลด์ภายใต้การตรวจสอบ ซึ่งจะแสดงกลับมาให้ผู้ใช้เห็นเมื่อเกิดข้อผิดพลาด
- 'rule' ระบุกฎการตรวจสอบที่จะใช้ เช่น จำเป็น ตัวเลข ตรวจสอบว่าความยาวขั้นต่ำคือ… เป็นต้น
- ['ข้อความที่กำหนดเอง'] เป็นทางเลือกและสามารถใช้ตั้งค่าข้อความตรวจสอบที่กำหนดเองซึ่งควรแสดงเมื่อกฎการตรวจสอบล้มเหลว
ต่อไปนี้เป็นตัวอย่างการส่งแบบฟอร์มใน CodeIgniter สำหรับการตรวจสอบชื่อผู้ติดต่อ
$this->form_validation->set_rules('contact_number', 'Contact Number', 'required');
ที่นี่
- รหัสด้านบนจะตรวจสอบว่าได้ป้อนช่อง contact_number แล้วหรือไม่ หากไม่ได้ตั้งค่าไว้ ก็จะส่งกลับข้อผิดพลาดที่ระบุว่าจำเป็นต้องระบุฟิลด์หมายเลขติดต่อ
ในการเรียกใช้การตรวจสอบเทียบกับกฎที่ตั้งไว้ เราใช้ฟังก์ชันต่อไปนี้ของไลบรารีการตรวจสอบ
$this->form_validation->run()
หากโค้ดด้านบนส่งคืนค่าเท็จ แสดงว่ากฎที่ตั้งไว้อย่างน้อยหนึ่งกฎล้มเหลว หากคืนค่าเป็น "จริง" แสดงว่ากฎการตรวจสอบได้ผ่านพ้นไปแล้ว และคุณสามารถดำเนินการต่อไปได้
มาดูตัวอย่างกฎการตรวจสอบเพิ่มเติมกัน สมมติว่าคุณต้องการตรวจสอบข้อมูลบางฟิลด์ เช่น ชื่อผู้ติดต่อ หมายเลข และที่อยู่อีเมล คุณสามารถใช้โค้ดต่อไปนี้เพื่อดำเนินการดังกล่าวได้
$rules = array( array( 'field' => 'contact_name', 'label' => 'Contact Name', 'rules' => 'required' ), array( 'field' => 'contact_number', 'label' => 'Contact Number', 'rules' => 'required', 'errors' => array( 'required' => 'You must provide a %s.', ), ), array( 'field' => 'email_address', 'label' => 'Email Address', 'rules' => 'required' ) ); $this->form_validation->set_rules($rules);
ที่นี่
- ในตัวอย่างการตรวจสอบอีเมลข้างต้นใน CodeIgniter เราได้จัดเตรียมอาร์เรย์ของฟิลด์พร้อมกฎสำหรับฟังก์ชัน set_rules ของไลบรารี วิธีนี้ทำให้การตรวจสอบฟิลด์บางฟิลด์ง่ายขึ้น
การตรวจสอบที่ไม่ซ้ำ
หากเราต้องการตรวจสอบหมายเลขติดต่อเพื่อให้แน่ใจว่าเราจะไม่บันทึกหมายเลขเดียวกันสองครั้ง เราสามารถใช้กฎต่อไปนี้เพื่อดำเนินการดังกล่าว
$this->form_validation->set_rules('contact_number', 'Contact Number','required|is_unique[contacts.contact_number]');
ที่นี่
- - ใช้ในการรวมกฎหลายข้อเข้าด้วยกัน
- is_unique[contacts.contact_number] ตรวจสอบว่าค่าสำหรับ contact_number ไม่ซ้ำกันกับค่าฟิลด์ contact_number ในรายชื่อผู้ติดต่อในตารางฐานข้อมูลหรือไม่
การแสดงข้อความแสดงข้อผิดพลาดในการตรวจสอบแบบฟอร์ม
หากเกิดข้อผิดพลาดระหว่างการประมวลผลแบบฟอร์ม คุณสามารถใช้โค้ดต่อไปนี้เพื่อแสดงข้อผิดพลาดการตรวจสอบที่เกิดขึ้น
<?php echo validation_errors(); ?>
ที่นี่
- ฟังก์ชันด้านบนจะส่งคืนข้อผิดพลาดทั้งหมดที่เกิดขึ้น
การเติมข้อมูลแบบฟอร์มที่ส่ง: แบบฟอร์มเหนียว
แบบฟอร์มบางแบบมีหลายฟิลด์ และหากเกิดข้อผิดพลาดขึ้น คุณจะต้องตรวจสอบให้แน่ใจว่าข้อมูลที่เพิ่มเข้าไปนั้นได้รับการเก็บรักษาไว้อย่างถูกต้อง ไลบรารีการตรวจสอบมีกลไกสำหรับการดำเนินการดังกล่าว โดยเราทำได้โดยใช้โค้ดต่อไปนี้
<?php echo set_value('field_name'); ?>
ที่นี่
- รหัสข้างต้นจะแสดงอินพุตที่ผู้ใช้ป้อน
สำหรับคู่มืออ้างอิงฉบับสมบูรณ์เกี่ยวกับวิธีการที่มีอยู่ในไลบรารีการตรวจสอบ คุณสามารถดูเอกสาร API ได้จากคู่มือผู้ใช้อย่างเป็นทางการสำหรับ CodeIgniter
https://codeigniter.com/userguide3/libraries/form_validation.html
ตัวอย่างการตรวจสอบแบบฟอร์ม CodeIgniter
ตลอดชุดบทช่วยสอนเหล่านี้ เราได้เพิ่มโค้ดเพิ่มเติมให้กับโปรเจ็กต์บทช่วยสอนของเราซึ่งเป็นแอปพลิเคชันการจัดการผู้ติดต่อ ในส่วนนี้ เราจะโหลดไลบรารีการตรวจสอบความถูกต้องและดูว่าเราจะนำไปใช้งานจริงโดยใช้แอปพลิเคชันตัวอย่างในโลกแห่งความเป็นจริงได้อย่างไร
แก้ไขรหัสเส้นทางดังต่อไปนี้เพื่อรวมวิธีการจัดเก็บ
$route['default_controller'] = 'welcome'; $route['contacts'] = 'contacts'; $route['create'] = 'contacts/create'; $route['store'] = 'contacts/store'; $route['edit/:id'] = 'contacts/edit'; $route['update/:id'] = 'contacts/update'; $route['delete/:id'] = 'contacts/delete'; $routes['users'] = 'welcome/users';
ตอนนี้มาโหลดไลบรารีการตรวจสอบแบบฟอร์มในตัวควบคุมผู้ติดต่อและตั้งกฎการตรวจสอบบางอย่าง
แก้ไขโค้ดตามที่แสดงในแบบฟอร์มด้านล่างในการตรวจสอบความถูกต้องในตัวอย่าง CodeIgniter:
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Contacts extends CI_Controller { public function __construct() { parent::__construct(); $this->load->helper('url', 'form'); $this->load->library('form_validation'); } public function index() { $this->load->view('header'); $this->load->view('contacts/index'); $this->load->view('footer'); } public function create() { $this->load->view('header'); $this->load->view('contacts/create'); $this->load->view('footer'); } public function store() { $rules = array( array( 'field' => 'contact_name', 'label' => 'Contact Name', 'rules' => 'required' ), array( 'field' => 'contact_number', 'label' => 'Contact Number', 'rules' => 'required', 'errors' => array( 'required' => 'You must provide a %s.', ), ), array( 'field' => 'email_address', 'label' => 'Email Address', 'rules' => 'required' ) ); $this->form_validation->set_rules($rules); if ($this->form_validation->run() == FALSE) { $this->load->view('header'); $this->load->view('contacts/create'); $this->load->view('footer'); } else { redirect(base_url('contacts')); } } public function edit($id) { $this->load->view('header'); $this->load->view('contacts/edit'); $this->load->view('footer'); } public function update($id) { $this->load->view('header'); $this->load->view('contacts/update'); $this->load->view('footer'); } public function delete($id) { $this->load->view('header'); $this->load->view('contacts/delete'); $this->load->view('footer'); } }
ที่นี่
- $rules = array(…) ชุดกำหนดกฎการตรวจสอบ
- $this->form_validation->set_rules($กฎ); กำหนดกฎการตรวจสอบ
- หาก ($this->form_validation->run() == FALSE) {…} เรียกใช้กฎการตรวจสอบความถูกต้อง และหากล้มเหลว ฟอร์มจะแสดงข้อผิดพลาดในการตรวจสอบความถูกต้องอีกครั้ง หากการตรวจสอบความถูกต้องผ่าน เราจะเปลี่ยนเส้นทางไปยังหน้ารายชื่อผู้ติดต่อ ในสถานการณ์ปกติ เราจะเขียนข้อมูลลงในฐานข้อมูล เราจะดำเนินการดังกล่าวในบทช่วยสอนถัดไปเมื่อเราดู ฐานข้อมูล.
แก้ไขมุมมองการสร้างในโค้ด application/contacts/create.php ดังแสดงในตัวอย่างการตรวจสอบความถูกต้องของแบบฟอร์มด้านล่าง CodeIgniter:
<div class="column"> <h2 class="title">Create Contact</h2> <div class="notification is-danger"> <?php echo validation_errors(); ?> </div> <form action="<?= base_url('contacts/store') ?>" method="POST"> <div class="field"> <label class="label">Contact Name</label> <div class="control"> <input id="contact_name" name="contact_name" class="input" type="text" value="<?php echo set_value('contact_name'); ?>" placeholder="Type the contact name"> </div> </div> <div class="field"> <label class="label">Contact Number</label> <div class="control"> <input id="contact_number" name="contact_number" class="input" type="text" value="<?php echo set_value('contact_number'); ?>" placeholder="Type the contact number"> </div> </div> <div class="field"> <label class="label">Email Address</label> <div class="control"> <input id="email_address" name="email_address" class="input" type="email" value="<?php echo set_value('email_address'); ?>" placeholder="Type the email address"> </div> </div> <div class="field is-grouped"> <div class="control"> <button class="button is-link">Save Contact</button> </div> </div> </form> </div>
ที่นี่
- เราแสดงข้อผิดพลาดที่เกิดขึ้นหากมีในระหว่างกระบวนการตรวจสอบ
- ตั้งค่าที่ตั้งค่าไว้ก่อนหน้านี้ถ้ามี
คุณต้องโหลด URL ต่อไปนี้ลงในเว็บเบราว์เซอร์ของคุณ จากนั้นคลิกสร้างผู้ติดต่อโดยไม่ต้องป้อนค่าใดๆ
สรุป
- แบบฟอร์มช่วยให้ผู้ใช้โต้ตอบกับแอปพลิเคชันและส่งข้อมูลได้
- HTML นั้นยอดเยี่ยม เข้าใจและเขียนได้ง่าย แต่ CodeIgniter ทำให้สิ่งต่าง ๆ ง่ายขึ้นไปอีก CodeIgniter มีฟังก์ชันในตัวเพื่อสร้างแบบฟอร์ม HTML
- การตรวจสอบความถูกต้องมีบทบาทสำคัญมากเมื่อประมวลผลข้อมูลจากแบบฟอร์ม
- ในบทช่วยสอนนี้ เราได้เห็นกลยุทธ์การตรวจสอบหลักๆ รวมถึงข้อดีและข้อเสียแล้ว นอกจากนี้เรายังได้เรียนรู้วิธีการตั้งค่ากฎการตรวจสอบและข้อความแสดงข้อผิดพลาดโดยใช้ไลบรารีการตรวจสอบความถูกต้องในตัวของ CodeIgniter เราได้จบบทเรียนโดยนำความรู้ที่ได้รับไปประยุกต์ใช้ในทางปฏิบัติ