Kode CRUD sederhana menggunakan PHP, Jquery, dan Twitter Bootstrap

Pada tutorial kemarin kita sudah mencoba membuat fungsi koneksi ke database MySQL. Sekarang kita akan belajar melakukan proses CRUD ke database MySQL, bagi teman-teman yang biasa menggunakan bahasa pemrograman PHP pasti tidak asing dengan proses CRUD (Create Update Delete). Namun, untuk kali ini kita akan melakukan proses CRUD menggunakan PHP dan Jquery sehingga proses post akan dilakukan di balik layar (pengguna tidak akan pindah halaman saat proses CRUD berlangsung). Sedangkan untuk tampilan, agar terlihat lebih cantik dan dinamis kita akan menggunakan Twitter Bootstrap sebagai framework-nya.

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 tombol ubah/tambah di tekan
		$('.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 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, data mahasiswa 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>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;
		$query = mysql_query("SELECT * FROM mahasiswa");

		// 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
// tutup koneksi ke database mysql
koneksi_tutup();
?>

mahasiswa.form.php
berkas ini menampilkan form 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.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.
crud-prev-1crud-prev-2crud-prev-3crud-prev-4

Anda juga bisa menggunduh kode yang sudah jadi di sini

130 thoughts on “Kode CRUD sederhana menggunakan PHP, Jquery, dan Twitter Bootstrap

  1. masbro, gimana saat confirm penghapusan data, muncul modal form juga dong, tapi fieldset di disable, trus di footernya jadi “Hapus” dan “Batal”…tengkyu pencerahannya

    Balas
  2. Mas caranya membuat auto number pda kd_mhs??
    Contohnya pda d input data kode mahasiswanya adalah MHS001, MHS002 dan sterusnya

    Balas
  3. maaf mas mau tanya kalo urlnya mahasiswa.input.php,mahasiswa.data.php nya di buat didalam folder. deklarasi variable main nya gimanaya ?makasih sebelumnya,masih nubie..

    Balas
  4. Mas..Kenapa Waktu Saya Klik Button Tambahkan Data Kok Fields yang ada dalam form gak mau muncul ya mas,,,mohon solusi nya,,,

    Balas
  5. Makasih mas, sangat membantu sekali.
    tapi saya mau tanya, kalau penggunaan alamat/url seperti ini (localhost/latihan/lat.php?halaman=mahasiswa) gimana ya, sudah coba otak-atik ga bisa jua (maklum masih belajar), gambar link edit dan hapus tidak tampil. Tapi kalau langsung akses (localhost/latihan) ga ada masalah. maaf baru belajar.

    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