Codeigniter : Searching Pagination

Assalamualaykum.. ^^
Tulisan ini ditujukan bagi para pemula seperti saya agar tidak melupakan ilmu yang telah saya dapatkan

Postingan di-update disini beserta demo dan download contohnya

Apa itu Codeigniter?
CodeIgniter adalah sebuah PHP Framework dimana dengan framework ini akan memudahkan kita dalam membangun aplikasi web berbasis PHP.
Penjelasan selanjutnya ada disini.

Apa itu Framework?
Framework, sesuai dengan terjemahannya, adalah kerangka kerja.
Jadi, di dalam framework ada beberapa kode program yang kalau kita gunakan, akan memberikan kerangka atau struktur ke aplikasi yang dihasilkan.
Intro Framework

Pagination di CI (Codeigniter) tidak terlalu rumit untuk diterapkan, karena sudah disediakan librarynya. Nah, pada postingan ini saya akan menjabarkan contoh sederhana dari pencarian Listing Data dengan Pagination pada CI (Codeigniter). Pada kasus ini saya menggunakan contoh pencarian pada ringkasan berita. Dengan list berita per-halaman sebanyak 5 item.

1. Pastikan bahwa Anda telah mendownload Codeigniter, extract pada folder htdocs atau www, dalam contoh ini saya me-rename foldernya menjadi berita.
2. Buat database mysql dengan nama : berita dan satu buah tabel dengan nama tbl_berita.

   CREATE TABLE `tbl_berita` (
     `id_berita` int(11) NOT NULL AUTO_INCREMENT,
     `tgl_berita` date DEFAULT NULL,
     `judul_berita` varchar(255) DEFAULT NULL,
     `ringkasan` text,
     PRIMARY KEY (`id_berita`)
   ) ENGINE=MyISAM AUTO_INCREMENT=16 DEFAULT CHARSET=latin1;
   

3. Isikan dengan beberapa item, misalkan 15 berita. Beberapa ringkasan berita saya isikan dengan Dummy Text `Lorem ipsum dolor sit amet..` sebanyak 8 record, sekaligus untuk mengetahui hasilnya berupa pencarian berita, tetapi tetap bisa dibuat per-halaman.
4. Lakukan konfigurasi pada file-file berikut ini [system/application/config]:
   • config.php (base url) :

   $config['base_url']	= "http://localhost/berita/";
   

   • database.php (mengatur koneksi ke database berita secara default) :

   $db['default']['hostname'] = "localhost";
   $db['default']['username'] = "root";
   $db['default']['password'] = "";
   $db['default']['database'] = "berita";
   $db['default']['dbdriver'] = "mysql";
   $db['default']['dbprefix'] = "";
   $db['default']['pconnect'] = TRUE;
   $db['default']['db_debug'] = TRUE;
   $db['default']['cache_on'] = FALSE;
   $db['default']['cachedir'] = "";
   $db['default']['char_set'] = "utf8";
   $db['default']['dbcollat'] = "utf8_general_ci";
   

   • routes.php (menentukan berita sebagai default controllernya) – edit pada baris-baris berikut ini:

   $route['default_controller'] = "berita";
   

   • autoload.php (untuk pemanggilan langsung (autoload) beberapa komponen yang diperlukan seperti library, helper dan model) :

   $autoload['libraries'] = array('database','session','pagination');
   
   $autoload['helper'] = array('url');
   
   $autoload['model'] = array('pencarianmodel');
   

5. CSS-nya dulu gan, untuk style paginationnya banyak juga pilihannya disini:

   /* Pencarian Berita */
   body {
   	font-family:Arial, Helvetica, sans-serif;
   	font-size:11px;
   }
   
   .letter {
   	font-size:12px;
   	margin: 0px;
   	padding-top: 4px;
   	padding-bottom: 4px;
   	border-bottom: 1px solid #d1dde8;
   }
   
   .inputbox{
   	border: 1px solid #CCC;
   }
   .button{
   	color:#FFF;
   	background:#33C;
   	border: 2px solid #30C;
   	padding:2px 3px;
   	font-size: smaller;
   	font-weight: bold;
   }
   
   div.pagination {
   	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-Serif;
   	font-size: 13px;
   	text-align:center;
   	padding:4px 6px 4px 0;
   	background-color:#fff;
   	color:#313031;
   }
   
   div.pagination a {
   	color:#0030ce;
   	text-decoration:none;
   	padding:5px 6px 4px 5px;
   	margin:0 3px 0 3px;
   	border:1px solid #b7d8ee;
   }
   
   div.pagination a:hover, div.pagination a:active {
   	color:#0066a7;
   	border:1px solid #b7d8ee;
   	background-color:#d2eaf6;
   }
   div.pagination span.current {
   	padding:5px 6px 4px 5px;
   	margin:0 3px 0 3px;
   	border:1px solid #b7d8ee;
   	font-weight:bold;
   	color:#444444;
   	background-color:#d2eaf6;
   }
   div.pagination span.disabled {
   	display:none;
   }
   

6. Sekarang buat dulu modelnya, simpan dengan nama pencarianmodel.php [system/application/models]

   <?php
    class PencarianModel extends Model
    {
     function PencarianModel()
     {
      parent::Model();
     }
   
     /* Menampilkan Hasil Pencarian */
     function SearchResult($perPage,$uri,$ringkasan)
     {
      $this->db->select('*');
      $this->db->from('tbl_berita');
      if(!empty($ringkasan)) {
       $this->db->like('ringkasan',$ringkasan);
      }
      $this->db->order_by('id_berita','asc');
      $getData = $this->db->get('', $perPage, $uri);
   
      if($getData->num_rows() > 0)
       return $getData->result_array();
      else
       return null;
     }
    }
   ?>
   

7. Kemudian buat file controller-nya (controller berita), simpan dengan nama berita.php [system/application/controllers]

   <?php
   	class Berita extends Controller
   	{
   		function Berita()
   		{
   			parent::Controller();
   		}
   
   		function index()
   		{
   			if(isset($_POST['submit']))
   			{
   				$data['ringkasan'] = $this->input->post('ringkasan');
   
   				//set session user data untuk pencarian, untuk paging pencarian
   				$this->session->set_userdata('sess_ringkasan', $data['ringkasan']);
   			} else {
   				$data['ringkasan'] = $this->session->userdata('sess_ringkasan');
   			}
   
   			$this->db->like('ringkasan', $data['ringkasan']);
   			$this->db->from('tbl_berita');
   
   			//Pagination init
   			$pagination['base_url'] 	= base_url().'index.php/berita/index/page/';
   			$pagination['total_rows'] 	= $this->db->count_all_results();
   			$pagination['full_tag_open'] = "<p><div class=\"pagination\">";
   			$pagination['full_tag_close'] = "</div></p>";
   			$pagination['cur_tag_open'] = "<span class=\"current\">";
   			$pagination['cur_tag_close'] = "</span>";
   			$pagination['num_tag_open'] = "<span class=\"disabled\">";
   			$pagination['num_tag_close'] = "</span>";
   			$pagination['per_page'] 	= "5";
   			$pagination['uri_segment'] = 4;
   			$pagination['num_links'] 	= 4;
   
   			$this->pagination->initialize($pagination);
   
   			$data['ListBerita'] = $this->pencarianmodel->SearchResult($pagination['per_page'],$this->uri->segment(4,0),$data['ringkasan']);
   
   			$this->load->vars($data);
   			$this->load->view('pencarian');
   		}
   	}
   
   	/* End of file berita.php */
   	/* Location: ./system/application/controllers/berita.php */
   ?>
   

8. Sekarang tinggal buat file view-nya, simpan dengan nama pencarian.php [system/application/views]

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>Contoh : Pencarian Berita</title>
   <link href="<?=base_url();?>style.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
   <form id="form_pencarian" name="form_pencarian" method="post" action="<?=base_url();?>index.php/berita/">
     <input name="ringkasan" type="text" id="ringkasan" size="30" maxlength="255" class="inputbox" value="<?=$ringkasan;?>"/>&nbsp;&nbsp;
     <input name="submit" type="submit" id="submit" value="Cari" class="button"/>
   </form>
   <hr />
   <?php
   	//List Berita Hasil Pencarian
   	if(count($ListBerita) > 0) {
   		foreach($ListBerita as $row)
   		{
   			echo "<div class=\"letter\">";
   			echo "<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\">
   				<tbody>";
   			echo "<tr>
   						<td width=32 align=\"center\" valign=\"middle\">&nbsp;</td>
   						<td width=500>
   						<span>". $row['tgl_berita'] ."</span><br/>
   						<a href=\"#\">".$row['judul_berita']."</a>
   						<div> ".$row['ringkasan']."</div>
   						</td>
   				</tr>";
   			echo "</tbody></table>";
   			echo "</div>";
   		}
   		echo $this->pagination->create_links();
   	} else {
   		echo "<div><strong>Hasil pencarian tidak ditemukan.</strong></div>";
   	}
   ?>
   </body>
   </html>
   

9. Nah, sekarang coba di test dulu di browsernya.. panggil dengan http://localhost/berita/. Coba ketikkan `lorem ipsum` pada input teks pencariannya, dan akan didapatkan 8 record hasil pencarian sebagai berikut (klik pada gambar untuk memperbesar) :
   

   Hasil pencarian halaman 1

   

   Hasil pencarian halaman 2

Penjelasan :

1. Pencarian model :

   /* Menampilkan Hasil Pencarian */
     function SearchResult($perPage,$uri,$ringkasan)
     {
      $this->db->select('*');
      $this->db->from('tbl_berita');
      if(!empty($ringkasan)) {
       $this->db->like('ringkasan',$ringkasan);
      }
      $this->db->order_by('id_berita','asc');
      $getData = $this->db->get('', $perPage, $uri);
   
      if($getData->num_rows() > 0)
       return $getData->result_array();
      else
       return null;
     }
   

   Function diatas dengan parameter berupa :
   - $perPage (jumlah item per-halaman)

   - $uri (mengambil nilai dari uri segment pada address bar, dan sebagai limit tampilan record)

   - $ringkasan (variabel pencarian)

2. Controller :

   function index()
   		{
   			if(isset($_POST['submit']))
   			{
   				$data['ringkasan'] = $this->input->post('ringkasan');
   
   				//set session user data untuk pencarian, untuk paging pencarian
   				$this->session->set_userdata('sess_ringkasan', $data['ringkasan']);
   			} else {
   				$data['ringkasan'] = $this->session->userdata('sess_ringkasan');
   			}
   
   			$this->db->like('ringkasan', $data['ringkasan']);
   			$this->db->from('tbl_berita');
   
   			//Pagination init
   			$pagination['base_url'] 	= base_url().'index.php/berita/index/page/';
   			$pagination['total_rows'] 	= $this->db->count_all_results();
   			$pagination['full_tag_open'] = "<p><div class=\"pagination\">";
   			$pagination['full_tag_close'] = "</div></p>";
   			$pagination['cur_tag_open'] = "<span class=\"current\">";
   			$pagination['cur_tag_close'] = "</span>";
   			$pagination['num_tag_open'] = "<span class=\"disabled\">";
   			$pagination['num_tag_close'] = "</span>";
   			$pagination['per_page'] 	= "5";
   			$pagination['uri_segment'] = 4;
   			$pagination['num_links'] 	= 4;
   
   			$this->pagination->initialize($pagination);
   
   			$data['ListBerita'] = $this->pencarianmodel->SearchResult($pagination['per_page'],$this->uri->segment(4,0),$data['ringkasan']);
   
   			$this->load->vars($data);
   			$this->load->view('pencarian');
   		}
   

   Session user data untuk menyimpan nilai input yang dikirimkan, yang sebelumnya dikenal sebagai variabel post. Jadi, ketika page selanjutnya dibuka, nilai inilah yang akan dikenali, bukan lagi variabel post dari inputan pencarian .
   Kemudian ada pemanggilan fungsi dari model pencarian (pencarianmodel), beserta parameternya.

3. View :

   //List Berita Hasil Pencarian
   	if(count($ListBerita) > 0) {
   		foreach($ListBerita as $row)
   		{
   			echo "<div class=\"letter\">";
   			echo "<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\">
   				<tbody>";
   			echo "<tr>
   						<td width=32 align=\"center\" valign=\"middle\">&nbsp;</td>
   						<td width=500>
   						<span>". $row['tgl_berita'] ."</span><br/>
   						<a href=\"#\">".$row['judul_berita']."</a>
   						<div> ".$row['ringkasan']."</div>
   						</td>
   				</tr>";
   			echo "</tbody></table>";
   			echo "</div>";
   		}
   		echo $this->pagination->create_links();
   	} else {
   		echo "<div><strong>Hasil pencarian tidak ditemukan.</strong></div>";
   	}
   

   Pemanggilan kepada $ListBerita yang tadi dioper ke controller, dan membuat link paginationnya..

Semoga bermanfaat.. ^^
Oh iya jangan lupa saran dan kritiknya..
Terima kasih..

About these ads