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

Trong các bộ helper trên CodeIgniter thì bộ Smiley helper là thú vị nhất. CodeIgniter hỗ trợ helper này để hỗ trợ tạo ra các biểu tượng cảm xúc (emotional icon) ngộ nghĩnh giống như trong yahoo hoặc skype. Trong bài này chúng ta sẽ tìm hiểu cách cài đặt và sử dụng bộ Smiley helper này.

Bộ Smiley helper này có một trình kết xuất (hay gọi là trình hiển thị), nó lấy các ký tự kiểu text như là :-) và trả về dạng hình như là ảnh Hướng dẫn sử dụng Smileys helper trên CodeIgniter

Nó cũng cho phép ta hiển thị một tập các biểu tượng cảm xúc và khi được click vào chúng sẽ được chèn vào một trường form nhập liệu.

Ví dụ nếu ta có một blog mà muốn cho người dùng comment vào thì ta có thể đưa ra danh sách các biểu tượng cười vào cạnh mục comment form đó. Khi người dùng click vào thì nó sẽ tự động điền vào form.

Chúng ta sẽ tạo một ví dụ về các tạo một tập các biểu tượng cảm xúc, cho phép người dùng click vào đó để nó tự điền vào trên form comment. Các bước thực hiện như sau

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

1. Tạo module Smileys.

Trong thư mục modules ta tạo một mô-đun tên là smileys

Trong thư mục này chúng ta sẽ lần lượt tạo 2 thư mục là controllersviews theo cấu trúc như sau.

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

2. Tạo thư mục ảnh.

Trong thư mục gốc của hệ thống chúng ta sẽ tạo một thư mục tên là public.

Sau đó chúng ta sẽ copy bộ hình ảnh đã download ở trên về và giải nén vào thư mục smileys theo cấu trúc ở hình dưới.

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

3. Xây dựng controller và view.

Trong thư mục controllers vừa tạo ở trên chúng ta tạo một file là smileys.php. Rồi copy đoạn code dưới đây vào.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Smileys extends CI_Controller{
	
	public function __construct(){
		parent::__construct();
		$this->load->helper('smiley');
	}
	
	public function index()
	{
		$sz_SmileyPath = base_url()."public/smileys/";
		$this->load->library('table');
		
		$image_array = get_clickable_smileys($sz_SmileyPath, 'comments');
		
		$col_array = $this->table->make_columns($image_array, 8);
		
		$data['smiley_table'] = $this->table->generate($col_array);
		
		$this->load->view('smileys-template', $data);
	}
}

Trong thư mục views chúng ta tạo một file là smileys-template.php. Rồi copy đoạn code bên dưới vào.

<html>
<head>
<title>Hướng dẫn sử dụng Smileys helper trên CodeIgniter</title>

<?php echo smiley_js(); ?>

</head>
<body>
<h3>Hướng dẫn sử dụng Smileys helper trên CodeIgniter</h3>
<form name="blog">
<textarea name="comments" id="comments" cols="40" rows="4"></textarea>
</form>

<p>Click to insert a smiley!</p>

<?php echo $smiley_table; ?>

</body>
</html>

4. Điều hướng cho chương trình.

Ta mở file routes.php trong thư mục configs bằng notepad++ ra.

Sau đó copy đoạn mã sau vào.

//Điều hướng cho chương trình smileys
$route['smileys'] = "smileys/index";

5. Thử nghiệm chương trình

Chúng ta mở trình duyệt Firefox ra và gõ đường link sau vào http://localhost/ci-test/smileys

Và kết quả sẽ như hình bên dưới.

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

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