Selamat Datang

Tutorial Membuat Search Pagination Session di Codeigniter

Tutorial kali ini kita akan mempelajari cara pembuatan sistem pencarian pada tabel data yang memiliki pagination dengan bantuan session di Codeigniter, tentu kalian akan bertanya untuk apa session dalam pagination akan lebih mudah dipahami setelah kalian membandingkan pagination biasa dengan pagination session, cukup pembahasannya sekarang kita akan mulai.

codeigniter search pagination session

Ilustrasi Foto via cnblogs.com

Pertama buat database dengan nama latihan, tabel dan masukan beberapa data, berikut sqlnya :

--
-- Database: `latihan`
--

-- --------------------------------------------------------

--
-- Struktur dari tabel `pagination`
--

CREATE TABLE IF NOT EXISTS `pagination` (
`nim` bigint(20) NOT NULL,
  `nama` varchar(50) NOT NULL,
  `jurusan` varchar(30) NOT NULL,
  `alamat` text NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=111999030 DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `pagination`
--

INSERT INTO `pagination` (`nim`, `nama`, `jurusan`, `alamat`) VALUES
(111999014, 'Rahmayanti', 'PGSD', 'Kp. Mekarsari RT.15/03 No.33'),
(111999021, 'Muhammad Yusuf Hamdani', 'Teknik Informatika', 'Jln. Cipaku Haji RT.02/07 No.15'),
(111999023, 'Putri Andini', 'Sistem Informasi', 'Kp. Mekarsari RT/RW 22/55 No.34'),
(111999025, 'Anggra Triawan Skom', 'Teknik Infirmatika S2', 'Kp. Buntar RT.02 / RW.09 Kel. Ciawi Kec.Bogor Selatan'),
(111999027, 'Alisya Rahmadani', 'PGBK', 'Perumahan Pakuan Hill, Monte carlo, Ciawi Bogor Selatan'),
(111999029, 'Muhammad Afnan', 'Hukum', 'Perumahan Pakuan Hill, Monte carlo, Ciawi Bogor Selatan');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `pagination`
--
ALTER TABLE `pagination`
 ADD PRIMARY KEY (`nim`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `pagination`
--
ALTER TABLE `pagination`
MODIFY `nim` bigint(20) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=111999030;
SQL Database

Stuktur database pada phpmyadmin akan terlihat seperti dibawah ini

ps1

Tabel yang sudah diisi akan tampak seperti dibawah ini

ps2

Dalam tutorial kali ini kita membutuhkan file .htaccess (file ini tidak memiliki nama, hanya memiliki ekstensi .htaccess) untuk menghapus index.php pada url, silahkan buat file baru kemudian simpan file tersebut pada dalam folder pagination_session_ci / project.

RewriteEngine on
RewriteCond $1 !^(index\.php|resources|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]
.htaccess

Untuk mempermudah sahabat bisa download .htaccess

Buka file autoload.php, yang berlokasi di application/config/autoload.php, kemudian cari dan ubah bagian helper dan libraries seperti ini:

$autoload['libraries'] = array('database', 'session', 'pagination');
$autoload['helper'] = array('url', 'file', 'form');
application/config/autoload.php

Buka file config.php, yang berlokasi di application/config/config.php, kemudian cari dan ubah seperti ini :

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

$config['encryption_key'] = 'TWD';
application/config/config.php

Buka file database.php, yang berlokasi di application/config/database.php, kemudian cari dan ubah seperti ini :

$active_group = 'default';
$active_record = TRUE;

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'latihan';
$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';
$db['default']['swap_pre'] = '';
$db['default']['autoinit'] = TRUE;
$db['default']['stricton'] = FALSE;
application/config/database.php

Kemudian buka file welcome.php, controllers/welcome.php dan edit seperti dibawah ini :

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Welcome extends CI_Controller {

	/**
	 * Index Page for this controller.
	 *
	 * Maps to the following URL
	 * 		http://example.com/index.php/welcome
	 *	- or -  
	 * 		http://example.com/index.php/welcome/index
	 *	- or -
	 * Since this controller is set as the default controller in 
	 * config/routes.php, it's displayed at http://example.com/
	 *
	 * So any other public methods not prefixed with an underscore will
	 * map to /index.php/welcome/<method_name>
	 * @see http://codeigniter.com/user_guide/general/urls.html
	 */
	public function index()
	{

		if (isset($_POST['q'])) {
			$data['ringkasan'] = $this->input->post('cari');
			// se session userdata untuk pencarian, untuk paging pencarian
			$this->session->set_userdata('sess_ringkasan', $data['ringkasan']);
		}
		else {
			$data['ringkasan'] = $this->session->userdata('sess_ringkasan');
		}


		// load model
		$this->load->model('modul');

		$this->db->like('nama', $data['ringkasan']);
        $this->db->from('pagination');

		// pagination limit
		$pagination['base_url'] = base_url().'welcome/index/page/';
		$pagination['total_rows'] = $this->db->count_all_results();
		$pagination['full_tag_open'] = "<p><div class=\"pagination\" style='letter-spacing:2px;'>";
		$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'] = "3";
		$pagination['uri_segment'] = 4;
		$pagination['num_links'] = 5;

		$this->pagination->initialize($pagination);

		$data['ListBerita'] = $this->modul->ambildata($pagination['per_page'],$this->uri->segment(4,0),$data['ringkasan']);

		$this->load->vars($data);
		$this->load->view('index');
	}
}

/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */
?>
application/controllers/welcome.php

Buat file baru modul.php didalam folder models, kemudian masukan script dibawah ini :

<?php

class Modul extends CI_Model {

	// Model users
	function ambildata($perPage, $uri, $ringkasan) {
		$this->db->select('*');
		$this->db->from('pagination');
		if (!empty($ringkasan)) {
			$this->db->like('nama', $ringkasan);
		}
		$this->db->order_by('nim','asc');
		$getData = $this->db->get('', $perPage, $uri);

		if ($getData->num_rows() > 0)
			return $getData->result_array();
		else
			return null;
	}

}

?>
application/models/modul.php

Untuk menampilkan data buat file baru index.php didalam folder views, kemudian masukan script dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>Search Pagination Session dengan Codeigniter | AZZURA Media</title>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/default.css'); ?>">
</head>
<body>

	<div class="wrap">
		<h1>Search Pagination Session dengan Codeigniter</h1>

		<form action="<?php echo site_url('welcome/index/'); ?>" method="post">
		<p>
			<input type="search" name="cari" placeholder="Search Keyword..."> <input type="submit" name="q" value="Search">
		</p>
		<table border="1" width="780px">
			<thead>
				<tr>
					<th>NIM</th>
					<th>Nama</th>
					<th>Jurusan</th>
					<th>Alamat</th>
				</tr>
			</thead>
			<tbody>
				<?php
				if (count($ListBerita) > 0) {
					foreach($ListBerita as $row)
					{
						echo "<div class=\"letter\">";
						?>

						<tr>
							<td valign="top"><?php echo $row['nim']; ?></td>
							<td valign="top"><?php echo $row['nama']; ?></td>
							<td valign="top"><?php echo $row['jurusan']; ?></td>
							<td valign="top"><?php echo $row['alamat']; ?></td>
						</tr>

				<?php
						echo "</div>";
					}
					echo "<tr><td colspan='6'><div style='background:000; float:right;'>".$this->pagination->create_links()."</div></td></tr>";
				} else {
					echo "<tbody><tr><td colspan='8' style='padding:10px; background:#F00; border:none; color:#FFF;'>Hasil pencarian tidak ditemukan.</td></tr></tbody>";
				}
				?>
			</tbody>
		</table>
		</form>
		<center><p>&copy; 2015 - Tutorial Web Design</p></center>
	</div>

</body>
</html>
application/views/index.php

Terakhir kita perlu css untuk mengatur desain agar terlihat lebih menarik, buat folder assets/css/ berinama file tersebuh default.css :

body {
	font-family: verdana,arial,sans-serif;
	margin: 0px;
	padding: 0px;
}

* {
	font-size: 13px;
}

.wrap {
	position: relative;
	top: 20px;
	width: 780px;
	margin: auto;
}


h1 {
	text-align: center;
	font-size: 24px;
}

input.nama {
	font-size:28px; 
	width:380px;
}

input, textarea {
    border: 1px solid #CCC;
    padding: 5px;
}
assets/css/default.css

Berikut stuktur file dan folder Search pagination session dengan codeigniter :

ps3

 

Jika semua sudah tersetuktur seperti gambar diatas dan kalian sudah menyelesaikan semua tutorial dengan baik, sekarang kita coba menjalankan aplikasi buka browser dan lihat hasilnya akan seperti ini :

ps4 ps5 ps6

 

Download Search Panination Session Dengan Codeigniter

Sekian tutorial saya kali ini semoga bisa menambah pengetahuan sahabat ^_^





Penulis :

Nama lengkap saya Muhamad Yusup Hamdani kelahiran dibogor, saya CEO & Founder Elephant, membangun aplikasi android dan website. email daniguavara562@gmail.com View all posts by Muhamad Yusup Hamdani

Comments

21 thoughts on “Tutorial Membuat Search Pagination Session di Codeigniter

  1. Afdal Vhaleandra says:

    Permisi gan mau tanya nih seputar dreamweaver 8 . .

    Saya download script open source yg udah jadi, dan saya mau edit di dreamweaver 8 . .
    Bisa gk ya diimput ke dreamwever supaya tampilannya seperti tampilan website udah jadi ?
    Kemarin saya coba input tapi malah scriptnya doang yg kelihatan . .

    • Di dreamweaver kan ada 3 mode, editor, tampilan hasil, dan kedua-duanya. Jadi pilih yang tampilan hasil untuk melihat tampilan dari script nya.

      Perlu di ingat kalau tampilan view dreamweaver hanya menampilkan hasil HTML, PHP tidak bisa.

  2. Joe says:

    Ass. Gan mau tanya kalo querynya berelasi dua tabel gimana gan?
    misalnya ane punya query spt ini :
    dari tabel pagination berelasi ke tabel jurusan dengan fk id_jurusan

    select a.*,b.nama_jurusan from pagination a, jurusan b
    where a.id_jurusan=b.id_jurusan

    mohon pencerahannya, maaf gan ane masih newbie.

    • ohh itu pakai INNER JOIN aja gan..

      SELECT a.id_jurusan, b.nama_jurusan FROM tabel_pertama a INNER JOIN tabel_kedua b ON a.id_jurusan = b.id

      disesuaikan aja gan, kalau mau tambah 3 tabel lagi tambah INNER JOIN dan jangan lupa ON nya juga ^_^

  3. faizal says:

    thanks mas, atas sharenya, sangat berguna ..

  4. Ayu says:

    Amazing :’)

  5. mega says:

    terima kasih tutornya sangat membantu sekali,
    aku kasih like 10 :D

  6. newbie says:

    gan gmna caranya pas di reload ulang browsernya, isi table nya berubah jd default lg isi tabelnya ? contoh : ketika saya mencoba search namanya putri, ketika di klik submit lalu keluar tuh yang namanya putri, nah pas saya reload browsernya bisa engga isi tablenya menjadi default lg ,,, terima kasih … :)

  7. quan says:

    thanks you so much :)

  8. Erza says:

    setelah proses pencarian data dan paging telah selesai saya ingin menambahkan Edit dan Delete, akan tetapi mengapa selalu gagal padahal uri segmen ketika saya tes terbaca.? dan saya merasa gak ada yg salah dengan script saya,? apakah karena session.?

    Mohon penjelasanya, salam

  9. juliany hasanah says:

    gan mau tanya, ini gimana cara tampilinnya. saya udah panggil pakai localhost/pagination_session_ci/index.html itu ngga busa

  10. Cristananda Ratnady says:

    gan ini saya coba kok nggak bisa ya search nya, pas di klick search nggak terjadi apa apa cuma reload aja webnya.

  11. Cristananda Ratnady says:

    nggak jadi gan sudah bisa, cuma salah di bagian penulisan post aja. Terimakasih Tutorialnya sangat membantu.

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development