first commit

2020-01-02 23:00:12 +07:00
commit 2c52ef6943
15 changed files with 9809 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,13 @@
+panduan untuk mencoba kode ini
+
+1. buat database pada phpmyadmin, untuk nama database bebas
+2. kemudian pilih database yang sudah dibuat lalu tekan tab import
+3. tekan tombol browse dan arahkan ke berkas mahasiswa.sql kemudian tekan go
+4. unduh berkas paging-searching-php-jquery-bootstrap.zip
+5. ekstrak berkas paging-searching-php-jquery-bootstrap.zip dan salin isinya ke dalam folder yang sudah anda buat di direktori webserver anda (www/htdocs)
+6. sesuaikan nama database dan password database pada berkas koneksi.php
+7. akses dari web browser anda (http://localhost/nama_folder)
+
+semoga bermanfaat :)
+
+untuk artikel yang lain bisa mengunjungi alamat http://arifnd.wordpress.com
--- a/aplikasi.js
+++ b/aplikasi.js
@ -0,0 +1,109 @@
+(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);
--- a/css/bootstrap.css
+++ b/css/bootstrap.css
--- a/css/bootstrap.min.css
+++ b/css/bootstrap.min.css
--- a/img/glyphicons-halflings-white.png
+++ b/img/glyphicons-halflings-white.png
--- a/img/glyphicons-halflings.png
+++ b/img/glyphicons-halflings.png
--- a/index.php
+++ b/index.php
@ -0,0 +1,72 @@
+<?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=""></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>
--- a/jquery-1.8.3.min.js
+++ b/jquery-1.8.3.min.js
--- a/js/bootstrap.js
+++ b/js/bootstrap.js
--- a/js/bootstrap.min.js
+++ b/js/bootstrap.min.js
--- a/koneksi.php
+++ b/koneksi.php
@ -0,0 +1,16 @@
+<?php
+define('DB_NAMA', 'db_crudpaging'); // sesuaikan dengan nama database anda
+define('DB_USER', 'project'); // sesuaikan dengan nama pengguna database anda
+define('DB_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));
+}
+?>
--- a/mahasiswa.data.php
+++ b/mahasiswa.data.php
@ -0,0 +1,95 @@
+<?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 = 10; // 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");
+		}
+		
+		// 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 for($i = 1; $i <= $jml_halaman; $i++) { ?>
+    <li class="halaman" id="<?php echo $i ?>"><a href="#"><?php echo $i ?></a></li>
+    <?php } ?>
+  </ul>
+</div>
+<?php } ?>
+
+<?php 
+// tutup koneksi ke database mysql
+koneksi_tutup(); 
+?>
--- a/mahasiswa.form.php
+++ b/mahasiswa.form.php
@ -0,0 +1,96 @@
+<?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();
+?>
--- a/mahasiswa.input.php
+++ b/mahasiswa.input.php
@ -0,0 +1,41 @@
+<?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();
+
+?>
--- a/mahasiswa.sql
+++ b/mahasiswa.sql
@ -0,0 +1,41 @@
+-- phpMyAdmin SQL Dump
+-- version 3.5.2
+-- http://www.phpmyadmin.net
+--
+-- Host: localhost
+-- Generation Time: Mar 26, 2013 at 12:23 PM
+-- Server version: 5.5.25a
+-- PHP Version: 5.4.4
+
+SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
+SET time_zone = "+00:00";
+
+
+/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
+/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
+/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
+/*!40101 SET NAMES utf8 */;
+
+--
+-- Database: `arifnd_tut`
+--
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `mahasiswa`
+--
+
+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 ;
+
+/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
+/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
+/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;