Hướng dẫn tạo form login trên CodeIgniter

Bất kỳ một hệ thống nào đều có ít nhất là có một module đăng nhập. Do vậy việc xây dựng mô-đun tạo form login là rất cần thiết. Trong bài lần này mình sẽ trình bày cách thức tạo một form login trên CodeIgniter

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

Bản CodeIgniter theo mô hình HMVC, chi tiết tại bài  Hướng dẫn cài đặt mô hình HMVC trên CodeIgniter

Notepad++ phiên bản mới nhất http://filehippo.com/download_notepad

Chúng ta sẽ đi xây dựng form login trên CodeIgniter theo từng bước ở dưới đây.

1. Tạo mô-đun authentication.

Chúng ta tạo một mô-đun tên là authenticaion trong thư mục modules với cấu trúc như sau.

Hướng dẫn tạo form login trên CodeIgniter

Trong thư mục controllers chúng ta sẽ tạo một file tên là authentication.php, và copy đoạn code bên dưới vào.

File này chứa các hàm xử lý bao gồm login, logout, success nếu login thành công.

<?php
class Authentication 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(array('form_validation','session'));
		
		#Tải model
		$this->load->model(array('authentication_model'));
	}
	
	public function index(){
		$this->load->view('authentication-template');
	}
	
	public function login(){
		$this->form_validation->set_rules('username', 'Username', 'trim|required|xss_clean');
		$this->form_validation->set_rules('password', 'Password', 'required');
		
		#Kiểm tra điều kiện validate
		if($this->form_validation->run() == TRUE){
			$a_UserInfo['username'] = $this->input->post('username');
			$a_UserInfo['password'] = md5($this->input->post('password'));
			$a_UserChecking = $this->authentication_model->a_fCheckUser( $a_UserInfo );
			if($a_UserChecking){
				$this->session->set_userdata('user', $a_UserChecking);
				redirect(base_url('authentication/success'));
			}else{
				$this->b_Check = false;
			}
		}
		$a_Data['b_Check']= $this->b_Check;
		$this->load->view('authentication-template', $a_Data);
		
	}

	public function logout(){
		$this->session->unset_userdata('user');	// Unset session of user
		redirect(base_url('authentication'));
	}
	
	public function success(){
		$a_UserInfo['user'] = $this->session->userdata('user');
		$this->load->view('success-template', $a_UserInfo);
	}

}

Trong thư mục models chúng ta tạo một file tên là authentication_model.php, và copy đoạn code dưới đây vào.

File này chứa hàm truy vấn vào database.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Authentication_model extends CI_Model{
	
	/* Gán tên bảng cần xử lý*/
	private $_name = 'ci_user';
	
	function __construct(){
        parent::__construct();
    } 
    
    /**
     * Get all users in DB
     * @param null
     * @return array
     */
    function a_fCheckUser( $a_UserInfo ){
    	$a_User	=	$this->db->select()
					    	->where('username', $a_UserInfo['username'])
					    	->where('password', $a_UserInfo['password'])
					    	->get($this->_name)
					    	->row_array();
    	if(count($a_User) >0){
    		return $a_User;
    	} else {
    		return false;
    	}
    }
  
}

Trong thư mục views chúng ta tạo hai files, file thứ nhất tên là authentication-template.php, với nội dung ở bên dưới.

File này dùng để hiển thị form login của hệ thống.

<!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 tạo form login trên CodeIgniter</title>
</head>
<body>
	<div id="body">
		<h2>Hướng dẫn tạo form login trên CodeIgniter</h2>
		<form action="<?php echo base_url()."authentication/login/" ?>" method="post" id="form">
			<fieldset>
				<legend>Hướng dẫn tạo form login trên CodeIgniter</legend>
				<div><span class="success"><?php if(isset($b_Check) && $b_Check == false){echo "Tài khoản không đúng. Xin vui lòng đăng nhập lại !";}?></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><input type="submit" id="save" value="Log in" /></div>
			</fieldset>
		</form>
	</div>
</body>
</html>

Và file thứ hai là success-template.php, với nội dung ở bên dưới.

File này sẽ hiển thị thông tin người dùng, nếu đăng nhập thành công và kèm theo đường link để logout khỏi hệ thống.

<!DOCTYPE html>
<html lang="en">
<head>
	<style type="text/css">
		span{color: blue; font-style: italic;}
	</style>
	<meta charset="utf-8">
	<title>Title | Hướng dẫn tạo form login trên CodeIgniter</title>
</head>
<body>
	<div id="body">
		<h2>Hướng dẫn tạo form login trên CodeIgniter | Đăng nhập thành công</h2>
		<h3>Xin chào <span><?php echo $user['username'];?></span></h3>
		<p>
			<a href="<?php echo base_url();?>authentication/logout">Logout</a>
		</p>
	</div>
</body>
</html>

2. Điều hướng lại đường dẫn của mô-đun.

Để chương trình hoạt động được thì chúng ta phải điều hướng lại cho mô-đun authentication vừa tạo.

Ta mở file routes.php trong thư mục config bằng notepad++, và copy đoạn mã sau đây vào.

// authentication
$route['authentication'] 			= "authentication/index";
$route['authentication/login'] 		= "authentication/login";
$route['authentication/logout'] 		= "authentication/logout";
$route['authentication/success'] 		= "authentication/success";

3. Chạy chương trình trên trình duyệt.

Để kiểm tra kết quả của chương trình form login trên CodeIgniter như thế nào, chúng ta mở firefox ra và gõ đường link sau vào ta sẽ được kết quả như sau.

Hướng dẫn tạo form login trên CodeIgniter

Nếu login thành công thì màn hình sẽ như sau

Hướng dẫn tạo form login trên CodeIgniter

Để cụ thể hơn, các bạn hãy download file đính kèm ở dưới để thực tập tại nhà, file này bao gồm file ci_user.sql để lưu thông tin user đăng nhập (ví dụ : jason/123456) và mô-đun authentication.

Các files đính kèm :

huong-dan-tao-form-login-tren-codeigniter.zip

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

Tags: