Tạo slideshow trên CodeIgniter project

Slideshow là thành phần không thể thiếu của một website quảng bá. Một slideshow bắt mắt sẽ giúp website trở nên chuyên nghiệp hơn. Trong bài lần này mình sẽ trình bày cách cài đặt và tạo một slideshow trên CodeIgniter project

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

Các bước thực hiện chương trình.

1. Download bộ Slider.

Các bạn truy cập vào link ở trên để download bộ Slideshow về. Sau khi download và giải nén ra các bạn sẽ thấy một file tên là slider.

Các bạn copy bộ slider này vào trong thư mục public. Cấu trúc như hình dưới

Tạo slideshow trên CodeIgniter project

2. Tạo module gallery.

Trên mô hình HMVC các bạn tạo một module tên là gallery trong thư mục modules theo cấu trúc như hình bên dưới.

Tạo slideshow trên CodeIgniter project

Trong thư mục controllers chúng ta sẽ tạo một file tên là gallery.php, và copy đoạn mã sau đây vào.

<?php

class Gallery extends CI_Controller
{
	public function __construct()
	{
		parent::__construct();
	}
	
	public function index()
	{
		$a_ListFiles = array();
		# Đường dẫn tuyệt đối tới thư mục ảnh
		$sz_ImagesDir = APPPATH.'../public/slider/images/main/';
		
		# Quyét thứ mục ảnh để lấy ảnh ra
		# Kiểm tra có đúng la thư mục có tồn tại hay không  
		if (is_dir($sz_ImagesDir)) {
		    if ($dh = opendir($sz_ImagesDir)) {
		    	# Khi thư mục còn file
		        while (($file = readdir($dh)) !== false) {
		        	# Loại bỏ thư mục ẩn .svn ./ ../ etc
		        	if(substr($file, 0, 1) != '.')
		        	{
		        		# Kiểm tra kiểu là file
		        		if(filetype($sz_ImagesDir . $file) == 'file')
		        		{
		        			$a_ListFiles[] = $file;	
		        		}
		        	}
		        }
		        closedir($dh);
		    }
		}
		$a_Data['a_Data'] = $a_ListFiles;
		$this->load->view('gallery-template', $a_Data);
	}
}

Trong thư mục views các bạn tạo một file tên là gallery-template.php, với nội dung là

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
    <title>Thủ thuật Việt Nam | Tạo slideshow trên CodeIgniter project</title>
    <link rel="stylesheet" href="<?php echo base_url();?>public/slider/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="<?php echo base_url();?>public/slider/style.css" type="text/css" media="screen" />
</head>
<body>
    <div id="wrapper">
    
        <a href="http://thuthuatvietnam.com" id="dev7link" title="Tạo slideshow trên CodeIgniter project">Tạo slideshow trên CodeIgniter project</a>

        <div id="slider-wrapper">
            <div id="slider" class="nivoSlider">
            	<?php if(isset($a_Data) && is_array($a_Data) && count($a_Data) > 0) {
            		foreach ($a_Data as $sz_Image) {?>
                	<a href="http://thuthuatvietnam.com"><img src="<?php echo base_url();?>public/slider/images/main/<?php echo $sz_Image;?>" alt="Tạo slideshow trên CodeIgniter project" title="Tạo slideshow trên CodeIgniter project" target="_blank" /></a>
                <?php }} else {?>
                	<a href="http://thuthuatvietnam.com"><img src="<?php echo base_url();?>public/slider/images/default.png?>" alt="Tạo slideshow trên CodeIgniter project" title="Tạo slideshow trên CodeIgniter project" target="_blank" /></a>
                <?php }?>
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
        </div>
    </div>
    <script type="text/javascript" src="<?php echo base_url();?>public/slider/scripts/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url();?>public/slider/scripts/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
</body>
</html>

3. Thiết lập route của hệ thống.

Tiếp theo chúng ta tiến hành điểu hướng cho module gallery này.

Các bạn mở file routes.php trong thư mục config. Sau đó thêm đoạn mã sau đây vào.

// slider
$route['gallery'] 	=  "gallery/index";

3. Kiểm tra slideshow vừa tạo.

Các bạn truy cập vào link sau để kiểm tra kết quả trên trình duyệt.

http://localhost/ci-test/gallery/

Và sản phẩm sẽ như hình bên dưới

Tạo slideshow trên CodeIgniter project

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