Pagination dan Searcing menggunakan PHP, Jquery, dan Twitter Bootstrap

Tutorial ini adalah pengembangan dari artikel sebelumnya. Jika kemarin kita belajar melakukan proses CRUD ke database MySQL menggunakan PHP dan Jquery. Maka, artikel ini menambahkan fungsi pencarian (searching) dan pembagian data yang ditampilkan tiap halaman(pagination). Bagi yang masih bingung langsung saja kita mulai tutorial ini sambil dipahami tahap demi tahap.

Langkah 1 : Mempersiapkan direktori kerja

Sebelumnya kita harus membuat sebuah direktori (misal: crud) di dalam direktori webserver yang kita miliki (www/htdocs)
crud-1

Langkah 2: Mengunduh Twitter Bootstrap

Untuk Twitter Bootstrap kita bisa mengunduhnya di sini. Selanjutnya kita ekstrak berkas bootstrap.zip kedalam direktori yang sebelumnya sudah kita buat.
crud-2

Langkah 3: Mengunduh jquery

unduh file Jquery pada alamat ini, kemudian simpan ke dalam folder yang sudah kita buat sebelumnya. Untuk jquery disarankan menggunakan versi 1.8.3 dan sebelumnya, karena pada versi 1.9.0 ke atas ada beberapa fungsi php yang dihapus.
crud-3

Langkah 4: Membuat database di MySql

Buat database pada MySQL atau phpMyAdmin dengan nama bebas, kemudian buat tabel dengan field seperti di bawah ini.

CREATE TABLE IF NOT EXISTS `mahasiswa` (
  `kd_mhs` int(11) NOT NULL AUTO_INCREMENT,
  `nim` varchar(14) NOT NULL,
  `nama` varchar(50) NOT NULL,
  `alamat` varchar(160) NOT NULL,
  `kelas` varchar(2) NOT NULL,
  `status` tinyint(1) NOT NULL,
  PRIMARY KEY (`kd_mhs`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

Langkah 5: Membuat berkas-berkas yang dibutuhkan

aplikasi.js
ini adalah berkas untuk menyimpan kode javascript yang dibutuhkan

(function($) {
	// fungsi dijalankan setelah seluruh dokumen ditampilkan
	$(document).ready(function(e) {

		// deklarasikan variabel
		var kd_mhs = 0;
		var main = "mahasiswa.data.php";

		// tampilkan data mahasiswa dari berkas mahasiswa.data.php
		// ke dalam <div id="data-mahasiswa"></div>
		$("#data-mahasiswa").load(main);

		// ketika inputbox pencarian diisi
		$('input:text[name=pencarian]').on('input',function(e){
			var v_cari = $('input:text[name=pencarian]').val();

			if(v_cari!="") {
				$.post(main, {cari: v_cari} ,function(data) {
					// tampilkan data mahasiswa yang sudah di perbaharui
					// ke dalam <div id="data-mahasiswa"></div>
					$("#data-mahasiswa").html(data).show();
				});
			} else {
				// tampilkan data mahasiswa dari berkas mahasiswa.data.php
				// ke dalam <div id="data-mahasiswa"></div>
				$("#data-mahasiswa").load(main);
			}
		});

		// ketika tombol ubah/tambah ditekan
		$('.ubah, .tambah').live("click", function(){

			var url = "mahasiswa.form.php";
			// ambil nilai id dari tombol ubah
			kd_mhs = this.id;

			if(kd_mhs != 0) {
				// ubah judul modal dialog
				$("#myModalLabel").html("Ubah Data Mahasiswa");
			} else {
				// saran dari mas hangs
				$("#myModalLabel").html("Tambah Data Mahasiswa");
			}

			$.post(url, {id: kd_mhs} ,function(data) {
				// tampilkan mahasiswa.form.php ke dalam <div class="modal-body"></div>
				$(".modal-body").html(data).show();
			});
		});

		// ketika tombol hapus ditekan
		$('.hapus').live("click", function(){
			var url = "mahasiswa.input.php";
			// ambil nilai id dari tombol hapus
			kd_mhs = this.id;

			// tampilkan dialog konfirmasi
			var answer = confirm("Apakah anda ingin mengghapus data ini?");

			// ketika ditekan tombol ok
			if (answer) {
				// mengirimkan perintah penghapusan ke berkas transaksi.input.php
				$.post(url, {hapus: kd_mhs} ,function() {
					// tampilkan data mahasiswa yang sudah di perbaharui
					// ke dalam <div id="data-mahasiswa"></div>
					$("#data-mahasiswa").load(main);
				});
			}
		});

		// ketika tombol halaman ditekan
		$('.halaman').live("click", function(event){
			// mengambil nilai dari inputbox
			kd_hal = this.id;

			$.post(main, {halaman: kd_hal} ,function(data) {
				// tampilkan data mahasiswa yang sudah di perbaharui
				// ke dalam <div id="data-mahasiswa"></div>
				$("#data-mahasiswa").html(data).show();
			});
		});

		// ketika tombol simpan ditekan
		$("#simpan-mahasiswa").bind("click", function(event) {
			var url = "mahasiswa.input.php";

			// mengambil nilai dari inputbox, textbox dan select
			var v_nim = $('input:text[name=nim]').val();
			var v_nama = $('input:text[name=nama]').val();
			var v_alamat = $('textarea[name=alamat]').val();
			var v_kelas = $('select[name=kelas]').val();
			var v_status = $('select[name=status]').val();

			// mengirimkan data ke berkas transaksi.input.php untuk di proses
			$.post(url, {nim: v_nim, nama: v_nama, alamat: v_alamat, kelas: v_kelas, status: v_status, id: kd_mhs} ,function() {
				// tampilkan data mahasiswa yang sudah di perbaharui
				// ke dalam <div id="data-mahasiswa"></div>
				$("#data-mahasiswa").load(main);

				// sembunyikan modal dialog
				$('#dialog-mahasiswa').modal('hide');

				// kembalikan judul modal dialog
				$("#myModalLabel").html("Tambah Data Mahasiswa");
			});
		});
	});
}) (jQuery);

koneksi.php
ini adalah berkas untuk menyimpan koneksi ke database

<?php
define('DB_NAMA', 'nama_Database'); // sesuaikan dengan nama database anda
define('DB_USER', 'root'); // sesuaikan dengan nama pengguna database anda
define('DB_PASSWORD', 'password'); // sesuaikan dengan kata sandi database anda
define('DB_HOST', 'localhost'); // ganti jika letak database mysql di komputer lain

// fungsi untuk melakukan koneksi ke database mysql
function koneksi_buka() {
	mysql_select_db(DB_NAMA,mysql_connect(DB_HOST,DB_USER,DB_PASSWORD));
}

// fungsi untuk menutup koneksi ke database mysql
function koneksi_tutup() {
	mysql_close(mysql_connect(DB_HOST,DB_USER,DB_PASSWORD));
}
?>

index.php
ini adalah halaman utama yang akan menampilkan tombol tambah, kotak pencarian, data mahasiswa , paging dan modal dialog

<?php
// memanggil berkas koneksi.php
require 'koneksi.php';

?>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jquery - php crud</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">

	<link rel="shortcut icon" href="favicon.png"/>
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>

<body>

<div class="navbar navbar-static-top">
	<div class="navbar-inner">
		<div class="container">
			<a class="brand" href="http://umsida.ac.id">Univ. Muhammadiyah Sidoarjo</a>
		</div>
	</div>
</div>

<div class="container">
	<div class="row">

		<h3>
			<!-- textbox untuk pencarian -->
			<div class="input-prepend pull-right">
				<span class="add-on"><i class="icon-search"></i></span>
				<input class="span2" id="prependedInput" type="text" name="pencarian" placeholder="Pencarian..">

			</div>
			Data Mahasiswa
			<a href="#dialog-mahasiswa" id="0" class="btn tambah" data-toggle="modal">
				<i class="icon-plus"></i> Tambah Data
			</a>
		</h3>

		<!-- tempat untuk menampilkan data mahasiswa -->
		<div id="data-mahasiswa"></div>
	</div>
</div>

<!-- awal untuk modal dialog -->
<div id="dialog-mahasiswa" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		<h3 id="myModalLabel">Tambah Data Mahasiswa</h3>
	</div>
	<!-- tempat untuk menampilkan form mahasiswa -->
	<div class="modal-body"></div>
	<div class="modal-footer">
		<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Batal</button>
		<button id="simpan-mahasiswa" class="btn btn-success">Simpan</button>
	</div>
</div>
<!-- akhir kode modal dialog -->

<!-- memanggil berkas javascript yang dibutuhkan -->
<script src="jquery-1.8.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="aplikasi.js"></script>

</body>
</html>

mahasiswa.data.php berkas ini menampilkan data mahasiswa ke dalam tabel

<?php
// panggil berkas koneksi.php
require 'koneksi.php';
 
// buat koneksi ke database mysql
koneksi_buka();
 
?>
 
<table class="table table-condensed table-bordered table-hover" cellpadding="0" cellspacing="0">
<thead>
    <tr>
        <th style="width:20px">#</th>
        <th style="width:120px">NIM</th>
        <th style="width:200px">Nama</th>
        <th>Alamat</th>
        <th style="width:120px">Kelas</th>
        <th style="width:120px">Status</th>
        <th style="width:40px"></th>
    </tr>
</thead>
<tbody>
    <?php 
        $i = 1;
        $jml_per_halaman = 5; // jumlah data yg ditampilkan perhalaman
        $jml_data = mysql_num_rows(mysql_query("SELECT * FROM mahasiswa"));
        $jml_halaman = ceil($jml_data / $jml_per_halaman);
        // query pada saat mode pencarian
        if(isset($_POST['cari'])) {
            $kunci = $_POST['cari'];
            echo "<strong>Hasil pencarian untuk kata kunci $kunci</strong>";
            $query = mysql_query("
                SELECT * FROM mahasiswa 
                WHERE nim LIKE '%$kunci%'
                OR nama LIKE '%$kunci%'
                OR alamat LIKE '%$kunci%'
                OR kelas LIKE '%$kunci%'
                OR status LIKE '%$kunci%'
            ");
        // query jika nomor halaman sudah ditentukan
        } elseif(isset($_POST['halaman'])) {
            $halaman = $_POST['halaman'];
            $i = ($halaman - 1) * $jml_per_halaman  + 1;
            $query = mysql_query("SELECT * FROM mahasiswa LIMIT ".(($halaman - 1) * $jml_per_halaman).", $jml_per_halaman");
        // query ketika tidak ada parameter halaman maupun pencarian
        } else {
            $query = mysql_query("SELECT * FROM mahasiswa LIMIT 0, $jml_per_halaman");
            $halaman = 1; //tambahan
        }
         
        // tampilkan data mahasiswa selama masih ada
        while($data = mysql_fetch_array($query)) {
            if($data['status']==1) {
                $status = "Aktif";
            } else {
                $status = "Tidak Aktif";
            }
    ?>
    <tr>
        <td><?php echo $i ?></td>
        <td><?php echo $data['nim'] ?></td>
        <td><?php echo $data['nama'] ?></td>
        <td><?php echo $data['alamat'] ?></td>
        <td><?php echo $data['kelas'] ?></td>
        <td><?php echo $status ?></td>
        <td>
            <a href="#dialog-mahasiswa" id="<?php echo $data['kd_mhs'] ?>" class="ubah" data-toggle="modal">
                <i class="icon-pencil"></i>
            </a>
            <a href="#" id="<?php echo $data['kd_mhs'] ?>" class="hapus">
                <i class="icon-trash"></i>
            </a>
        </td>
    </tr>
    <?php
        $i++;
        }
    ?>
</tbody>
</table>
 
<?php if(!isset($_POST['cari'])) { ?>
<!-- untuk menampilkan menu halaman -->
<div class="pagination pagination-right">
  <ul>
    <?php

    // tambahan
    // panjang pagig yang akan ditampilkan
    $no_hal_tampil = 5; // lebih besar dari 3

    if ($jml_halaman <= $no_hal_tampil) {
        $no_hal_awal = 1;
        $no_hal_akhir = $jml_halaman;
    } else {
        $val = $no_hal_tampil - 2; //3
        $mod = $halaman % $val; //
        $kelipatan = ceil($halaman/$val);
        $kelipatan2 = floor($halaman/$val);

        if($halaman < $no_hal_tampil) {
            $no_hal_awal = 1;
            $no_hal_akhir = $no_hal_tampil;
        } elseif ($mod == 2) {
            $no_hal_awal = $halaman - 1;
            $no_hal_akhir = $kelipatan * $val + 2;
        } else {
            $no_hal_awal = ($kelipatan2 - 1) * $val + 1;
            $no_hal_akhir = $kelipatan2 * $val + 2;
        }

        if($jml_halaman <= $no_hal_akhir) {
            $no_hal_akhir = $jml_halaman;
        }
    }

    for($i = $no_hal_awal; $i <= $no_hal_akhir; $i++) {
        // tambahan
        // menambahkan class active pada tag li
        $aktif = $i == $halaman ? ' active' : '';
    ?>
    <li class="halaman<?php echo $aktif ?>" id="<?php echo $i ?>"><a href="#"><?php echo $i ?></a></li>
    <?php } ?>
  </ul>
</div>
<?php } ?>
 
<?php 
// tutup koneksi ke database mysql
koneksi_tutup(); 
?>

mahasiswa.form.php berkas ini untuk menampilkan form edit data mahasiswa

<?php
// panggil file koneksi.php
require 'koneksi.php';

// buat koneksi ke database mysql
koneksi_buka();

// tangkap variabel kd_mhs
$kd_mhs = $_POST['id'];

// query untuk menampilkan mahasiswa berdasarkan kd_mhs
$data = mysql_fetch_array(mysql_query("
SELECT * FROM mahasiswa WHERE kd_mhs=".$kd_mhs
));

// jika kd_mhs > 0 / form ubah data
if($kd_mhs> 0) {
	$nim = $data['nim'];
	$nama = $data['nama'];
	$alamat = $data['alamat'];
	$kelas = $data['kelas'];
	$kd_status = $data['status'];

	if($data['status']==1) {
		$status = "Aktif";
	} else {
		$status = "Tidak Aktif";
	}

//form tambah data
} else {
	$nim ="";
	$nama ="";
	$alamat ="";
	$kelas ="";
	$status = "";
}

?>
<form class="form-horizontal" id="form-mahasiswa">
	<div class="control-group">
		<label class="control-label" for="nim">NIM</label>
		<div class="controls">
			<input type="text" id="nim" class="input-medium" name="nim" value="<?php echo $nim ?>">
		</div>
	</div>
	<div class="control-group">
		<label class="control-label" for="nama">Nama</label>
		<div class="controls">
			<input type="text" id="nama" class="input-xlarge" name="nama" value="<?php echo $nama ?>">
		</div>
	</div>
	<div class="control-group">
		<label class="control-label" for="alamat">Alamat</label>
		<div class="controls">
			<textarea id="alamat" name="alamat"><?php echo $alamat ?></textarea>
		</div>
	</div>
	<div class="control-group">
		<label class="control-label" for="kelas">Kelas</label>
		<div class="controls">
			<select class="input-small" name="kelas">
				<?php
				// tampilkan untuk form ubah mahasiswa
				if($kd_mhs > 0) { ?>
					<option value="<?php echo $kelas ?>"><?php echo $kelas ?></option>
				<?php } ?>
				<option value="PA">PA</option>
				<option value="PB">PB</option>
				<option value="SA">SA</option>
				<option value="SB">SB</option>
				<option value="SC">SC</option>
				<option value="SD">SD</option>
			</select>
		</div>
	</div>
	<div class="control-group">
		<label class="control-label" for="status">Status</label>
		<div class="controls">
			<select class="input-medium" name="status">
				<?php
				// tampilkan untuk form ubah mahasiswa
				if($kd_mhs > 0) { ?>
					<option value="<?php echo $kd_status ?>"><?php echo $status ?></option>
				<?php } ?>
				<option value="1">Aktif</option>
				<option value="0">Tidak Aktif</option>
			</select>
		</div>
	</div>
</form>

<?php
// tutup koneksi ke database mysql
koneksi_tutup();
?>

mahasiswa.input.php
berkas ini untuk melakukan proses CRUD ke database MySQL

<?php
require 'koneksi.php';

// buat koneksi ke database mysql
koneksi_buka();

// proses menghapus data mahasiswa
if(isset($_POST['hapus'])) {
	mysql_query("DELETE FROM mahasiswa WHERE kd_mhs=".$_POST['hapus']);
} else {
	// deklarasikan variabel
	$kd_mhs	= $_POST['id'];
	$nim	= $_POST['nim'];
	$nama	= $_POST['nama'];
	$alamat	= $_POST['alamat'];
	$kelas	= $_POST['kelas'];
	$status = $_POST['status'];

	// validasi agar tidak ada data yang kosong
	if($nim!="" && $nama!="" && $alamat!="") {
		// proses tambah data mahasiswa
		if($kd_mhs == 0) {
			mysql_query("INSERT INTO mahasiswa VALUES('','$nim','$nama','$alamat','$kelas','$status')");
		// proses ubah data mahasiswa
		} else {
			mysql_query("UPDATE mahasiswa SET
			nim = '$nim',
			nama = '$nama',
			alamat = '$alamat',
			kelas = '$kelas',
			status = '$status'
			WHERE kd_mhs = $kd_mhs
			");
		}
	}
}

// tutup koneksi ke database mysql
koneksi_tutup();

?>

Langkah 6: Coba pada pewamban web

setelah semua kode selesai dibuat maka buka alamat http://localhost/crud di browser favorit anda, jika anda berhasil maka akan tampak seperti gambar di bawah ini.

paging-and-searcing

Anda juga bisa menggunduh kode yang sudah jadi di sini

148 thoughts on “Pagination dan Searcing menggunakan PHP, Jquery, dan Twitter Bootstrap

  1. $(‘input:text[name=pencarian]’).on(‘input’,function(e){
    var v_cari = $(‘input:text[name=pencarian]’).val();

    if(v_cari!=””) {
    $.post(main, {cari: v_cari} ,function(data) {
    // tampilkan data mahasiswa yang sudah di perbaharui
    // ke dalam
    $(“#data-mahasiswa”).html(data).show();
    });
    } else {
    // tampilkan data mahasiswa dari berkas mahasiswa.data.php
    // ke dalam
    $(“#data-mahasiswa”).load(main);
    }
    });
    —————————————————————————————————-
    ditambah dimananya mas

    Balas
    • if(isset($_POST[‘cari’])) {
      $kunci = $_POST[‘cari’];
      echo “Hasil pencarian untuk kata kunci $kunci“;
      $query = mysql_query(”
      SELECT * FROM mahasiswa
      WHERE nim LIKE ‘%$kunci%’
      OR nama LIKE ‘%$kunci%’
      OR alamat LIKE ‘%$kunci%’
      OR kelas LIKE ‘%$kunci%’
      OR status LIKE ‘%$kunci%’
      OR tanggal BETWEEN ‘20014-12-01’ AND ‘2014-12-08’
      “);

      di file mahasiswa.data.php

      ‘tanggal’ itu nama kolom database nilai ‘2014-12-01’ silahkan ambil dari variabel post

      Balas
  2. Mas mau tanya ni….
    1. Bagaimana utk upload foto mahasiswanya, saya sudah coba tp sejauh ini foto tidak terupload dan isi pada kolom foto terisi fakepath.
    2. Bagaimana bila disort, agar data yg baru di entry bisa tampil (muncul) di baris no 1. saya sudah coba juga utk sisipi di query paging ORDER BY id DESC tidak bisa. Namun akan tersort bila diklik paging nya misalnya klik halaman 1 maka akan tersort DESC.
    mohon bantuannya…Terima kasih dah membantu artikel nya.

    Balas
    • 1. saya juga belum berhasil menambahkan fitur upload gambar pada scrip ini
      2. tambahkan ORDER BY id DESC pada file mahasiswa.data.php di bagian
      } elseif(isset($_POST[‘halaman’])) {
      $halaman = $_POST[‘halaman’];
      $i = ($halaman – 1) * $jml_per_halaman + 1;
      $query = mysql_query(“SELECT * FROM mahasiswa ORDER BY id DESC LIMIT “.(($halaman – 1) * $jml_per_halaman).”, $jml_per_halaman”);
      // query ketika tidak ada parameter halaman maupun pencarian
      } else {
      $query = mysql_query(“SELECT * FROM mahasiswa ORDER BY id DESC LIMIT 0, $jml_per_halaman”);
      $halaman = 1; //tambahan
      }

      Balas
  3. mas bisa tolong upgrade codenya ke bootstrap 3 dan jquery v1.11 gak? soalnya saya mau coba di bootstrap 3 dan banyak yg gak jalan😦

    Balas
  4. Gan, Validasi inputnya blm ada ya? klo ada inputan nim dan nama msh kosong muncul alert(pemberitahuan) harus diisi, dan validasi untuk NIM yg tidak boleh dobel, mohon pencerahannya..

    Balas
  5. Ping-balik: Referensi Aplikasi Web: PHP CRUD Paging Search jQuery Bootstrap – Masino Sinaga

  6. mas sudah bisa belum upload gambar nya mas?
    saya coba tapi sepertinya dari file aplikasi.js nya tidak bisa ambil nama file nya utk disimpan ke database…
    mohon info nya mas
    thanks

    Balas
    • cara kerjanya hanya mengambil nilai value dri input kemudian dikirim menggunakan method $.post di javascript, sudah coba upload gambar tapi belum menemukan solusi

      Balas
  7. Mas saya gagal di bagian ini saya pakek xammp v 3.2.1
    Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\web\paging-searching-php-jquery-bootstrap\mahasiswa.data.php on line 26

    Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\web\paging-searching-php-jquery-bootstrap\mahasiswa.data.php on line 52

    Balas
  8. Mantap gan,
    Validasi inputnya blm ada ya? klo ada inputan nim dan nama msh kosong muncul alert(pemberitahuan) harus diisi, dan validasi untuk NIM yg tidak boleh dobel, mohon pencerahannya..

    Balas

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s