Ticker

6/recent/ticker-posts

Header Ads Widget

Cara Membuat Pagination Pada Codeigniter 3

Assalmualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim

Pada postingan sebelumnya saya telah menulis tentang Cara Upload Gambar di Codeigniter 3 dan untuk kali ini kita kan melanjutkan postingan mengenai Cara Membuat Pagination Pada Codeigniter 3


Pagination atau yang lebih dikenal dengan istilah “Paging” adalah salah satu cara untuk menampilkan data yang sangat banyak dengan cara membagi-baginya menjadi beberapa halaman. 

Untuk lebih dapat memahami tentang pagination pada codeigniter 3 silahkan praktekan langkah-langkah dibawah ini

Langkah Pertama

Bacalah tutorial Cara install framework codeigniter 3.0.6 untuk menginstall framework codeigniter, kemudian baca tutorial Memulai dan Mengkonfigurasi Framework Codeigniter (CI) untuk konfigurasi dasar framework codeigniter, dan baca tutorial Setting Koneksi single dan Multi Dabatabase Framework Codeigniter (CI) untuk koneksi kedatabase mysql

Langkah Kedua

Download file-file (sebuah zip didalamnya ada folder assets) yang dibutuhkan pada link berikut ini dan extract pada folder root codeigniter anda. Download

Langkah Ketiga
Buatlah Database dengan nama yang anda inginkan kemudian excute query dibawah ini, untuk struktur tabel mahasiswa

-- ----------------------------
-- Table structure for mahasiswa
-- ----------------------------
DROP TABLE IF EXISTS `mahasiswa`;
CREATE TABLE `mahasiswa`  (
  `id` int NOT NULL AUTO_INCREMENT,
  `nim` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `nama` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `kelas` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `jurusan` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `avatar` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 19 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Compact;

-- ----------------------------
-- Records of mahasiswa
-- ----------------------------
INSERT INTO `mahasiswa` VALUES (13, '100', 'John doe', 'Pagi', 'Manajemen Informatika', '105-1055656_account-user-profile-avatar-avatar-user-profile-icon.png');
INSERT INTO `mahasiswa` VALUES (14, '101', 'Jane Doe', 'Karyawan', 'Manajemen Informatika', 'student-project_tba1.jpg');
INSERT INTO `mahasiswa` VALUES (15, '1003', 'Waluyo', 'Pagi', 'Manajemen Informatika', 'student-project_tba2.jpg');
INSERT INTO `mahasiswa` VALUES (16, '102', 'Andini', 'Malam', 'Sitem Informasi', 'student-project_tba3.jpg');
INSERT INTO `mahasiswa` VALUES (17, '1004', 'Budiman', 'Pagi', 'Manajemen Informatika', 'student-project_tba4.jpg');
INSERT INTO `mahasiswa` VALUES (18, '105', 'Daru', 'Malam', 'Manajemen Informatika', 'student-project_tba5.jpg');

Langkah Keempat
Buatlah Controller dengan nama Mahasiswa, Kemudian ketiklah kode dibawah ini kalau anda belum perna buat coba baca Cara membuat controller di framework codeigniter

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

class Mahasiswa extends CI_Controller {

	public function __construct()
	{
		parent::__construct();
		$this->load->model('MahasiswaModel');
	}

	public function index()
	{
		$data['jumlah_data'] = $this->MahasiswaModel->jumlah_data();
		$data['mahasiswa'] = $this->MahasiswaModel->read();
		$this->load->view('mahasiswa/read', $data);
	}
	
	public function pagination()
	{
		// Pengaturan Pagination
        $config['base_url'] 		= base_url('mahasiswa/pagination'); //base url
        $config['total_rows'] 		= $this->MahasiswaModel->jumlah_data(); //total row
        $config['per_page'] 		= 5;  // show record per halaman
        $config["uri_segment"] 		= 3;  // uri parameter
        $config["num_links"] 		= floor($config["total_rows"] / $config["per_page"]);
		$config['first_link']       = 'First';
        $config['last_link']        = 'Last';
        $config['next_link']        = 'Next';
        $config['prev_link']        = 'Prev';
        $config['full_tag_open']    = '<div class="pagging text-center"><nav><ul class="pagination justify-content-end">';
        $config['full_tag_close']   = '</ul></nav></div>';
        $config['num_tag_open']     = '<li class="page-item"><span class="page-link">';
        $config['num_tag_close']    = '</span></li>';
        $config['cur_tag_open']     = '<li class="page-item active"><span class="page-link">';
        $config['cur_tag_close']    = '<span class="sr-only">(current)</span></span></li>';
        $config['next_tag_open']    = '<li class="page-item"><span class="page-link">';
        $config['next_tagl_close']  = '<span aria-hidden="true">&raquo;</span></span></li>';
        $config['prev_tag_open']    = '<li class="page-item"><span class="page-link">';
        $config['prev_tagl_close']  = '</span>Next</li>';
        $config['first_tag_open']   = '<li class="page-item"><span class="page-link">';
        $config['first_tagl_close'] = '</span></li>';
        $config['last_tag_open']    = '<li class="page-item"><span class="page-link">';
        $config['last_tagl_close']  = '</span></li>';
 
        $this->pagination->initialize($config);
        $data['page'] = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0;
        // Ambil data dari model MahasiswaModel
        $data['mahasiswa'] = $this->MahasiswaModel->lists($config["per_page"], $data['page']);           
        $data['pagination'] = $this->pagination->create_links();
		$start = $this->pagination->cur_page * $this->pagination->per_page;
        $end = $start + $this->pagination->per_page;
		
		// Hitung Data
		$data['jumlah_data'] = $this->MahasiswaModel->jumlah_data();
		$data['page_start'] = $start;
        $data['page_end']= $end;
		
		$this->load->view('mahasiswa/pagination', $data);
	}
}

Langkah kelima
Buatlah Model dengan nama MahsiswaModel, Kemudian ketiklah kode dibawah ini kalau sobat belum perna buat coba baca Cara Membuat Model Pada Framework Codeigniter

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

class MahasiswaModel extends CI_Model {

	public function __construct()
	{
		parent::__construct();
	}

	public function jumlah_data()
	{
		return $this->db->count_all('mahasiswa');
	}

	public function read()
	{
		return $this->db->get('mahasiswa')->result();
	}
	
	function lists($limit, $start){
        return $this->db->get('mahasiswa', $limit, $start)->result();
    }

	public function save($data)
	{

		return $this->db->insert('mahasiswa', $data);
	}

	public function edit($id)
	{
		return $this->db->get_where('mahasiswa', array('id' => $id))->row();
	}

	public function update($id, $data)
	{
		return $this->db->where('id', $id)->update('mahasiswa', $data);
	}

	public function delete($id)
	{
		return $this->db->delete('mahasiswa', array('id' => $id));
	}
}

Langkah Keenam
Buatlah sebuah folder didalam view dengan nama mahasiswa, kemudian buatlah tiga file dengan nama read.php, create.php, edit.php untuk masing kodenya sobat bisa ketik dari list kode dibawah ini

pagination.php

<?php defined('BASEPATH') OR exit('No direct script access allowed');?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Pagination CodeIgniter</title>
	<link rel="stylesheet" href="<?php echo base_url('assets/css/bootstrap.min.css');?>" type="text/css">
	<link rel="stylesheet" href="<?php echo base_url('assets/css/style.css');?>" type="text/css">
	<link rel="stylesheet" href="<?php echo base_url('assets/font-awesome/css/font-awesome.css');?>" type="text/css">
	<script src="<?php echo base_url('assets/js/jquery.min.js');?>" type="text/javascript"></script>
	<script src="<?php echo base_url('assets/js/jquery-migrate.js');?>" type="text/javascript"></script>
	<script src="<?php echo base_url('assets/js/tether.min.js');?>" type="text/javascript"></script>
	<script src="<?php echo base_url('assets/js/bootstrap.min.js');?>" type="text/javascript"></script>
	<style>
		.img-avatar{
			height:100px;
			width:100px;
			object-fit:cover;
		}
		.data-pagination ul{
			margin: 2px 0;
			white-space: nowrap;
			justify-content: flex-end;
		}
		#wrapper{
			margin-bottom: 5%;
		}
		.table td, .table th{
			vertical-align:middle;
		}
	</style>
</head>
<body>

	<div id="wrapper">
		<div class="container">
			<h3>Pagination Codeigniter </h3>
			<p>By: Aguzrybudy, 2021 Januari 2021 (Senin) <a href="<?php echo base_url('mahasiswa/create/');?>" class="btn btn-primary pull-right"><i class="fa fa-plus" aria-hidden="true"></i> Mahasiswa</a></p>

			<table class="table table-striped table-layout">
			  <thead>
			    <tr>
			      <th>#</th>
			      <th>NPM</th>
			      <th>Nama</th>
			      <th>Kelas</th>
			      <th>Jurusan</th>
				  <th>Avatar</th>
			      <th>Pilihan</th>
			    </tr>
			  </thead>
			  <tbody>

			  	<?php if($jumlah_data > 0):?>
			  		<?php $no=0; foreach ($mahasiswa as $m): $no++ ?>
				    <tr class="data">
				      <th><?php echo $no;?></th>
				      <td><?php echo $m->nim;?></td>
				      <td><?php echo $m->nama;?></td>
				      <td><?php echo $m->kelas;?></td>
				      <td><?php echo $m->jurusan;?></td>
					  <td><img class="img-circle img-avatar" src="<?php echo base_url("assets/images/$m->avatar");?>" alt="<?php echo $m->avatar;?>"/></td>
				      <td>
				      	<a  href="<?php echo base_url('mahasiswa/edit/'.$m->id);?>"><i class="fa fa-edit" aria-hidden="true"></i></a>
				      	<a  href="<?php echo base_url('mahasiswa/delete/'.$m->id);?>"><i class="fa fa-trash" aria-hidden="true"></i></a>
				      </td>
				    </tr>
					<?php endforeach;?>

				<?php else:?>

				    <tr class="kosong">
				    	<td colspan="7">Tidak ada data di dalam field</td>
				    </tr>

				<?php endif;?>


			  </tbody>
			</table>
			
			<div class="row data-pagination">
				<div class="col-sm-12 col-md-5">
					<div class="pagination-info" id="pagination-info">Showing <?php echo $page_start;?> to <?php echo $page_end;?> of <?php echo $jumlah_data;?> entries</div>
				</div>
				<div class="col-sm-12 col-md-7 text-right">
					<?php echo $pagination; ?>
				</div>
			</div>

		</div>
	</div>

</body>
</html>

Langkah Ketujuh
Jika semuanya benar coba eksekusi atau jalankan program anda melalui web browser kesayangan anda, dan lihat hasilnya jika benar andaakan melihat seperti gambar dibawah ini

Sampai disini dulu tutorial dari saya tentang codeigniter 3 dan nantikan tutorial selanjutnya, Semoga tutorial ini bermanfaat bagi anda, atas segala kekuranganya mohon dimaafkan dan jika ingin bertanya silahkan tinggalkan komentar dibawah postingan ini, untuk download source dan demo dari code diatas bisa klik link dibawah ini.


Post a Comment

0 Comments

Rekomendasi Untuk Anda × +