Xác thực biểu mẫu CodeIgniter với ví dụ gửi biểu mẫu
Fiona Nâu
Biểu mẫu trong CodeIgniter
Biểu mẫu cung cấp cho người dùng cách tương tác với ứng dụng và gửi dữ liệu. Biểu mẫu có thể được sử dụng cho biểu mẫu liên hệ với chúng tôi mà khách truy cập trang web có thể điền vào và gửi thông tin cho chúng tôi. Thông tin nhận được thường được lưu trữ trong cơ sở dữ liệu hoặc gửi qua email.
Cấu trúc biểu mẫu HTML
Đoạn mã sau đây cho thấy cấu trúc của một biểu mẫu HTML thông thường.
<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>
ĐÂY,
- … là thẻ mở và thẻ đóng của biểu mẫu. Thuộc tính id và name chỉ định tên và id của biểu mẫu. Thuộc tính phương thức chỉ định Động từ HTTP sẽ được sử dụng. Điều này thường được chỉ định bởi động từ POST
- Chỉ định các phần tử của biểu mẫu. Thuộc tính name là tên biến được gửi đến máy chủ phụ trợ để xử lý.
Trình trợ giúp biểu mẫu CodeIgniter
HTML thật tuyệt vời vì nó dễ hiểu và dễ viết, nhưng CodeIgniter khiến mọi việc trở nên đơn giản hơn. CodeIgniter có các hàm tích hợp để tạo biểu mẫu HTML.
Hãy xem xét mã gửi biểu mẫu CodeIgniter sau đây sử dụng trình trợ giúp biểu mẫu để tạo biểu mẫu
<?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();
?>
ĐÂY,
- echo form_open('create_user.php', ['id' => 'frmUsers']); tạo thẻ mở của biểu mẫu, đặt hành động thành POST Verb và đặt URL hành động thành create_user.php
- echo form_label('Id người dùng', 'user_id'); tạo nhãn đọc Id người dùng cho trường nhập có tên user_id.
- echo form_input(['name' => 'user_id']); tạo trường nhập kiểu văn bản với tên user_id
- echo form_submit('btnSubmit', 'Tạo người dùng'); tạo nút gửi có nhãn Tạo người dùng
- echo form_close(); đóng biểu mẫu
Như bạn có thể thấy từ mã CodeIgniter ở trên, trình trợ giúp biểu mẫu giúp chúng ta dễ dàng tạo biểu mẫu bằng PHP thuần túy. Bằng cách chuyển các thuộc tính cho các phương thức của trình trợ giúp biểu mẫu, chúng ta có thể tùy chỉnh HTML được tạo cho biểu mẫu.
Đoạn mã trên tạo ra mã biểu mẫu HTML sau
<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>
Ưu điểm lớn nhất của việc sử dụng trình trợ giúp biểu mẫu là nó tạo ra mã chính xác về mặt ngữ nghĩa tuân thủ các tiêu chuẩn HTML đã đặt ra.
Bạn có thể tham khảo tài liệu chính thức của CodeIgniter để biết thêm chi tiết
https://codeigniter.com/user_guide/helpers/form_helper.html
Ví dụ về biểu mẫu CodeIgniter
Sau khi trình bày những điều cơ bản về CodeIgniter, hãy quay lại dự án hướng dẫn mà chúng tôi đã thực hiện trong suốt thời gian này Chuỗi hướng dẫn CodeIgniterTóm lại, dự án hướng dẫn này sẽ xây dựng một ứng dụng quản lý danh bạ để lưu trữ thông tin chi tiết trong cơ sở dữ liệu.
Tạo ra liên lạc
trong hướng dẫn trước, chúng ta đã tạo các tuyến đường cho các ứng dụng của mình và các chế độ xem đơn giản. Mở ứng dụng/lượt xem/danh bạ/create.php
Sửa đổi mã cho create.php như sau
<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>
Lưu ý: đoạn mã trên sử dụng HTML đơn giản để tạo biểu mẫu.
Bây giờ hãy xem biểu mẫu của chúng tôi trông như thế nào trong trình duyệt web
Tải URL sau vào trình duyệt web của chúng tôi.
http://localhost:3000/contacts/create
Nếu bạn đã tạo dự án hướng dẫn, thì bạn sẽ có thể thấy những điều sau
Xác thực biểu mẫu trong CodeIgniter
Xác thực đóng vai trò rất quan trọng khi xử lý dữ liệu từ biểu mẫu. Giả sử người dùng đang đăng ký trên một trang web; chúng ta muốn đảm bảo rằng họ điền thông tin chi tiết bắt buộc và địa chỉ email của họ. Chúng ta cần đảm bảo rằng địa chỉ email đã nhập là hợp lệ. Nếu chúng ta đang làm việc với các giá trị ngày, thì chúng ta muốn đảm bảo rằng các phạm vi ngày là hợp lệ. Chúng ta sẽ không phải chấp nhận một ngày có 32 ngày trong một tháng, v.v.
Xác nhận giải quyết các vấn đề trên. Xác thực CodeIgniter được thực hiện trên hai (2) mặt khi làm việc với các ứng dụng web.
Xác thực phía máy khách được thực hiện trên một phần của trình duyệt web. Điều này thường liên quan đến việc sử dụng HTML và JavaScript. Xác thực phía máy khách cải thiện hiệu suất vì mọi thứ đều được thực hiện ở phía máy khách. Vì vậy, không cần phải gửi dữ liệu đến máy chủ. Nhược điểm của xác thực phía máy khách là người dùng có quyền kiểm soát nó. Nếu bạn dựa vào JavaScript để xác thực và người dùng vô hiệu hóa JavaScript trong trình duyệt thì quá trình xác thực của bạn sẽ không thành công.
Xác thực phía máy chủ được thực hiện ở phía máy chủ. Nhược điểm của việc xác thực này là người dùng phải gửi dữ liệu đến máy chủ để xử lý và chờ phản hồi. Điều này sử dụng hết tài nguyên mạng và có thể làm giảm hiệu suất. Ưu điểm chính của xác thực phía máy chủ là bạn có quyền kiểm soát tốt hơn và bạn được đảm bảo rằng các quy tắc xác thực của mình vẫn hoạt động ngay cả khi người dùng tắt JavaScript trong trình duyệt.
Chiến lược tốt hơn là sử dụng phía máy khách làm chiến lược xác thực chính và phía máy chủ làm cơ chế dự phòng.
Thêm quy tắc xác thực biểu mẫu
CodeIgniter có một thư viện xác thực tích hợp. Thư viện được tải bằng cách sử dụng dòng sau
$this->load->library('form_validation');
Thư viện xác thực biểu mẫu CodeIgniter có thể được sử dụng để thực hiện một số hành động sau
- Kiểm tra các trường bắt buộc. Thao tác này sẽ kiểm tra các giá trị đã gửi và trả về lỗi nếu trường được gắn thẻ theo yêu cầu không có giá trị
- Xác thực loại dữ liệu – một số trường có thể chỉ yêu cầu giá trị số. Nếu phát hiện một giá trị không phải là số thì thư viện sẽ trả về lỗi. Việc thực hiện việc gửi biểu mẫu cũng bị hủy bỏ.
- Xác thực độ dài – một số loại dữ liệu yêu cầu các trường phải có số lượng ký tự tối thiểu hoặc tối đa nhất định. Thư viện xác nhận có ích trong những trường hợp như vậy.
- Vệ sinh dữ liệu – thư viện xác thực cũng có khả năng loại bỏ mã độc khỏi dữ liệu đã gửi vì lý do bảo mật. Ví dụ: nếu các giá trị được gửi có hiệu lực JavaMã lệnh hoặc mã SQL Injection trong đó, thư viện xác thực sẽ loại bỏ mã độc hại và khiến mã đó trở nên vô dụng.
- Xác thực các trường cơ sở dữ liệu duy nhất – giả sử bạn có một biểu mẫu nơi người dùng đăng ký bằng địa chỉ email. Bạn sẽ muốn đảm bảo rằng địa chỉ email là duy nhất. Thư viện giúp bạn dễ dàng kiểm tra dữ liệu đã gửi so với bảng và trường cơ sở dữ liệu. Điều này cho phép bạn biết rằng giá trị đã được sử dụng.
Các quy tắc xác thực được thiết lập bằng định dạng sau
$this->form_validation->set_rules('field','human readable field','rule',['custom message']);
ĐÂY,
- 'trường' đã chỉ định tên trường biểu mẫu sẽ được thư viện xác thực
- 'trường con người có thể đọc được' chỉ định định dạng con người có thể đọc được của trường đang được xác thực. Điều này được hiển thị lại cho người dùng khi xảy ra lỗi.
- 'quy tắc' chỉ định quy tắc xác thực sẽ được áp dụng, chẳng hạn như bắt buộc, số, kiểm tra xem độ dài tối thiểu có phải là… v.v.
- ['thông báo tùy chỉnh'] là tùy chọn và có thể được sử dụng để đặt thông báo xác thực tùy chỉnh sẽ hiển thị khi quy tắc xác thực không thành công.
Sau đây là một mẫu gửi trong CodeIgniter để xác thực tên liên hệ
$this->form_validation->set_rules('contact_number', 'Contact Number', 'required');
ĐÂY,
- Đoạn mã trên kiểm tra xem trường contact_number đã được nhập chưa. Nếu nó không được đặt thì sẽ trả về lỗi cho biết trường Số liên hệ là bắt buộc.
Để chạy xác thực theo các quy tắc đã đặt, chúng tôi sử dụng hàm sau của thư viện xác thực
$this->form_validation->run()
Nếu đoạn mã trên trả về sai thì một hoặc nhiều quy tắc đã đặt không thành công. Nếu nó trả về true thì tất cả các quy tắc xác thực đã được thông qua và bạn có thể tiếp tục thực hiện hành động tiếp theo.
Hãy xem thêm các ví dụ về quy tắc xác thực. Giả sử bạn muốn xác thực một số trường như tên liên hệ, số điện thoại và địa chỉ email, bạn có thể sử dụng mã sau để thực hiện việc đó.
$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);
ĐÂY,
- Trong ví dụ xác thực email ở trên trong CodeIgniter, chúng tôi cung cấp một mảng các trường có quy tắc cho hàm set_rules của thư viện. Điều này giúp bạn dễ dàng hơn khi xác thực một số trường.
Xác thực duy nhất
Nếu chúng ta muốn xác thực số liên lạc để đảm bảo không lưu cùng một số hai lần, chúng ta có thể sử dụng quy tắc sau để thực hiện điều đó.
$this->form_validation->set_rules('contact_number', 'Contact Number','required|is_unique[contacts.contact_number]');
ĐÂY,
- | được sử dụng để kết hợp nhiều quy tắc lại với nhau
- is_unique[contacts.contact_number] kiểm tra xem giá trị của contact_number có phải là duy nhất so với các giá trị trường contact_number trong bảng cơ sở dữ liệu contact hay không.
Hiển thị thông báo lỗi xác thực biểu mẫu
Nếu xảy ra lỗi trong quá trình xử lý biểu mẫu, bạn có thể sử dụng mã sau để hiển thị các lỗi xác thực đã xảy ra
<?php echo validation_errors(); ?>
ĐÂY,
- Hàm trên trả về tất cả các lỗi xảy ra.
Điền dữ liệu biểu mẫu đã gửi: Biểu mẫu cố định
Một số biểu mẫu có nhiều trường và nếu xảy ra lỗi, bạn muốn đảm bảo dữ liệu đã thêm chính xác được bảo toàn. Thư viện xác thực có các cơ chế để thực hiện điều đó. Chúng tôi thực hiện điều đó bằng cách sử dụng mã sau.
<?php echo set_value('field_name'); ?>
ĐÂY,
- Đoạn mã trên hiển thị thông tin đầu vào mà người dùng đã nhập.
Để có hướng dẫn tham khảo đầy đủ về các phương pháp có sẵn trong thư viện xác thực, bạn có thể tham khảo tài liệu API từ hướng dẫn sử dụng chính thức của CodeIgniter
https://codeigniter.com/userguide3/libraries/form_validation.html
Ví dụ xác thực biểu mẫu CodeIgniter
Trong suốt loạt bài hướng dẫn này, chúng tôi đã bổ sung thêm mã cho dự án hướng dẫn của mình, một ứng dụng quản lý danh bạ. Trong phần này, chúng ta sẽ tải thư viện xác thực và xem cách chúng ta có thể đưa nó vào sử dụng thực tế bằng cách sử dụng một ứng dụng mẫu trong thế giới thực.
Sửa đổi mã tuyến đường như sau để bao gồm phương thức lưu trữ
$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';
Bây giờ hãy tải thư viện xác thực biểu mẫu trong bộ điều khiển Danh bạ và đặt một số quy tắc xác thực.
Sửa đổi mã như được hiển thị trong phần xác thực biểu mẫu bên dưới trong ví dụ 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');
}
}
ĐÂY,
- bộ $rules = array(…) xác định các quy tắc xác thực
- $this->form_validation->set_rules($rules); thiết lập các quy tắc xác nhận
- if ($this->form_validation->run() == FALSE) {…} chạy các quy tắc xác thực và nếu chúng không thành công thì biểu mẫu sẽ được hiển thị lại với các lỗi xác thực. Nếu quá trình xác thực thành công, chúng tôi chỉ chuyển hướng đến trang danh sách liên hệ. Trong trường hợp bình thường, chúng tôi sẽ ghi dữ liệu vào cơ sở dữ liệu. Chúng ta sẽ làm điều đó trong các hướng dẫn tiếp theo khi chúng ta xem xét cơ sở dữ liệu.
Sửa đổi chế độ xem tạo trong mã application/contacts/create.php như được hiển thị trong ví dụ CodeIgniter xác thực biểu mẫu bên dưới:
<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>
ĐÂY,
- chúng tôi hiển thị các lỗi xảy ra nếu có trong quá trình xác thực
- đặt giá trị đã được đặt trước đó nếu có
Bạn cần tải URL sau vào trình duyệt web của bạn. Sau đó nhấp vào Tạo liên hệ mà không nhập bất kỳ giá trị nào
Tổng kết
- Biểu mẫu cung cấp cách để người dùng tương tác với ứng dụng và gửi dữ liệu.
- HTML rất dễ hiểu và dễ viết, nhưng CodeIgniter khiến mọi thứ trở nên đơn giản hơn. CodeIgniter có các hàm tích hợp để tạo biểu mẫu HTML.
- Xác thực đóng một vai trò rất quan trọng khi xử lý dữ liệu từ các biểu mẫu.
- Trong hướng dẫn này, chúng ta đã thấy các chiến lược xác thực chính cũng như những ưu và nhược điểm của chúng. Chúng tôi cũng đã học cách đặt quy tắc xác thực và hiển thị thông báo lỗi bằng thư viện xác thực tích hợp của CodeIgniter. Chúng ta đã kết thúc bài học bằng việc vận dụng những kiến thức đã thu được vào ứng dụng thực tế.
