Hướng dẫn sử dụng form trên CodeIgniter

Form trên CodeIgniter cũng giống như trên tất cả các Framework khác. Nó được hỗ trợ rất mạnh mẽ bằng các thư viện và các helper. Trong bài này mình sẽ trình bày với các cách sử dụng form trên CodeIgniter.

Các công cụ cần thiết.

- Bản CodeIgniter theo mô hình HMVC - các bạn hãy tìm hiểu bài Hướng dẫn cài đặt mô hình HMVC trên CodeIgniter
http://filehippo.com/download_notepad

Như các bạn đã biết Form là thành phần không thể thiếu của một website. Việc xử lý Form trên website là việc mà các bạn sẽ chắc chắn phải tiếp xúc khi bắt đầu bước vào việc lập trình web. Trong bài lần này mình sẽ trình bày cách sử dụng Form trên CodeIgniter, và mình sẽ sử dụng hệ thống theo mô hình HMVC. Các bạn có thể xem bài Hướng dẫn cài đặt mô hình HMVC trên CodeIgniter để tìm hiểu cách cài đặt hệ thống theo mô hình này.

Ta sẽ đi theo từng bước một để xây dựng một Form và các thức hoạt động của nó trên CodeIgniter.

Bước 1. Tạo một mô-đun tên là auth trong hệ thống theo cấu trúc HMVC.

Đầu tiên ta tạo cấu trúc thư mục như sau vào trong thư mục modules như hình bên dưới
auth là tên của mô-đun
models nằm trong auth
controllers nằm trong auth
views nằm trong auth

Hướng dẫn sử dụng form trên CodeIgniter

Bước 2. Tạo view cho mô-đun auth

Ta tạo một file tên là auth-template.php trong thư mục views Sau đó copy đoạn code dưới đây và lưu vào file này.

<!DOCTYPE html>
<html lang="en">
<head>
	<style type="text/css">
		#body{margin:10px auto; width: 800px; font-size: 90%; }
		form {width: 600px; margin: 40 auto;}
		form div{padding: 0 0 5px 0;}
		label {width: 120px; display: block; float: left; clear: left; font-weight: bold;}
		span.error p{width: auto; padding: 0 0 0 120px; font-style: italic; color: red; font-size: 90%;}
		span.success {color: green;}
		.form{ width: 150px;}
	</style>
	<meta charset="utf-8">
	<title>Title | Hướng dẫn sử dụng form trên CodeIgniter</title>
</head>
<body>
	<div id="body">
		<h2>Hướng dẫn sử dụng form trên CodeIgniter</h2>
		<form action="<?php echo base_url()."auth/form-validation/" ?>" method="post" id="form">
			<fieldset>
				<legend>Sử dụng Form trên CodeIgniter</legend>
				<div><span class="success"><?php if(isset($b_Check) && $b_Check == true){echo "Gửi Form thành công !";}?></span></div>
				<div>
					<label for="username">Username</label>
					<input class="form" type="text" name="username" value="<?php echo set_value('username'); ?>" size="50" />
					<span class="error"><?php echo form_error('username'); ?></span>
				</div>
				<div>
					<label for="password">Password</label>
					<input class="form" name="password" type="password" value="<?php echo set_value('password'); ?>" size="50" />
					<span class="error"><?php echo form_error('password'); ?></span>
				</div>
				<div>
					<label for="passconf">Password Confirm</label>
					<input class="form" name="passconf" type="password" value="<?php echo set_value('passconf'); ?>" size="50" />
					<span class="error"><?php echo form_error('passconf'); ?></span>
				</div>
				<div>
					<label for="email">Email Address</label>
					<input class="form" type="text" name="email" value="<?php echo set_value('email'); ?>" size="50" />
					<span class="error"><?php echo form_error('email'); ?></span>
				</div>
				<div><input type="submit" id="save" value="Save changes" /></div>
			</fieldset>
		</form>
	</div>
</body>
</html>

Giải thích cho đoạn code ở trên như sau:
<?php echo set_value('...'); ?> trong thuộc tính value của từng input có nghĩa là giá trị được nhập vào, sau đó click nút Save changes thì sẽ được lưu lại, mà không bị mất đi. Nếu bỏ đoạn này đi ta sẽ thấy giá trị của nó sẽ biến mất khi click vào nút Save changes
<?php echo form_error('...'); ?> nằm giữa hai thẻ span có nghĩa là nó sẽ đưa ra thông báo lỗi nếu hệ thống phát hiện thấy lỗi - được thiết lập trong controller auth.php.

Bước 3. Tạo controller cho mô-đun auth

Ta tạo một file tên là auth.php trong thư mục views Sau đó copy đoạn code dưới đây và lưu vào file này.

<?php
class Auth extends CI_Controller{
	
	private $b_Check = false;
	
	public function __construct(){
		parent::__construct();
		#Tải thư viện  và helper của Form trên CodeIgniter
		$this->load->helper(array('form', 'url'));
		$this->load->library('form_validation');
	}
	
	public function index(){
		$this->load->view('auth-template');
	}
	
	public function formValidate(){
		$this->form_validation->set_rules('username', 'Username', 'required|min_length[5]|max_length[12]');
		$this->form_validation->set_rules('password', 'Password', 'required|matches[passconf]');
		$this->form_validation->set_rules('passconf', 'Password Confirmation', 'required');
		$this->form_validation->set_rules('email', 'Email', 'required|valid_email');
		
		#Kiểm tra điều kiện validate
		if($this->form_validation->run() == TRUE){
			$this->b_Check = true;
		}
		$data['b_Check']= $this->b_Check;
		$this->load->view('auth-template', $data);
		
	}
}
?>

Giải thích cho đoạn chương trình ở trên :
__construct(), trong này có gọi đến một bộ thư viện - form_validation và 2 bộ helper - form, url của CodeIgniter. form_validation dùng để validate các giá trị nhập vào form, form, url dùng để tạo form hoặc các đường dẫn...
set_rules của thư viện form_validation dùng để thiết lập các điều kiện bắt buộc cho giá trị của form phải tuân theo.
$this->form_validation->set_rules('username', 'Username', 'required|min_length[5]|max_length[12]'); sẽ áp dụng cho input - user ở views với các điều kiện là required - bắt buộc, minlength[5] - độ dài tối thiểu là 5, maxlength[12] - độ dài tối đa là 12
if($this->form_validation->run() == TRUE) nhằm kiểm tra xem các điều kiện đã thiết lập ở trên có đúng hay không.

Bước 4. Thiết lập đường dẫn cho form trong file routes.php

Mở file routes.php trong thư mục C:\AppServ\www\ci-test\application\config và copy đoạn code sau vào.

# form validation
$route['auth'] 					= "auth/index";
$route['auth/form-validation'] 	= "auth/formValidate";

Hướng dẫn sử dụng form trên CodeIgniter

Bước 4. Chạy chương trình kiểm tra.

Để kiểm tra xem việc thiết lập Form trên CodeIgniter có thành công hay không ta mở trình duyệt lên và gõ đường dẫn sau vào localhost/ci-test/auth

Hướng dẫn sử dụng form trên CodeIgniter

Chúc các bạn thành công :)

Tags: