Dalam setiap kesempatan membahas mengenai aplikasi berbasis web (
web application), baik di dalam sesi mengajar matakuliah Pemrograman Web di
Universitas Budi Luhur maupun sesi training terkait web, saya selalu menekankan bahwa hanya ada
4 (empat) proses dasar
dalam aplikasi berbasis web. Aplikasi web yang sederhana hingga
kompleks selalu berkaitan dengannya. Keempat proses tersebut adalah
proses
entri (input), ubah (edit), hapus (delete) dan
tampil (show). Istilah lain dari keempat proses tersebut adalah
CRUD (
Create, Read, Update and Delete).
Jadi kuasailah keempatnya maka selebihnya hanya variasi dari keempat
proses tersebut. Sebagai contoh dalam proses update status di situs
jejaring sosial
facebook
merupakan proses Entri atau Insert ke database, saat memperbaiki foto
profil adalah proses edit (update) dan saat kita menghapus salah satu
teman aalah proses delete.
Mengingat pentingnya proses tersebut, saya memberikan contoh khusus di bab terakhir dari buku
Pemrograman Web dengan PHP & MySQL
berupa proses dasar entri, edit, delete dan tampil dengan PHP dan
MySQL. Sebelum melanjutkan tutorial ini, tidak ada salahnya jika Anda
mencoba contoh tersebut, terutama bagi Anda yang belum pernah mencoba
program serupa. Saya juga pernah mempublikasikan artikel
entri, edit, delete dan tampil PHP yang memanfaatkan Macromedia Dreamweaver.
Lalu apa yang akan dipelajari di dalam tutorial ini?
Apa yang disampaikan dalam tutorial ini kurang lebih sama dengan
tutorial saya sebelumnya, yaitu proses entri, edit, delete dan tampil
data dengan PHP dan MySQL. Namun kali ini, saya ingin menambahkan konsep
Ajax (Asyncronous Javascript and XML) dengan menggunakan library
JQuery. Dengan konsep Ajax, maka proses entri, edit, delete dan tampil dapat dilakukan dengan lebih menarik.
Tujuan atau Rancangan Akhir Program
Untuk memberikan gambaran yang lebih jelas mengenai hasil akhir
contoh program yang dibahas dalam tutorial ini, berikut beberapa hal
penting:
- Untuk memudahkan pemahaman, program hanya menangani 1 (satu) tabel MySQL yaitu tabel “mahasiswa” yang terdiri dari field NIM, NAMA dan ALAMAT.
- Program hanya terdiri dari 1 (satu) file utama (tidak termasuk library yang digunakan)
- Program menggunakan library Ajax JQuery.
- Untuk penanganan form, digunakan plugin JQuery Form.
- Untuk validasi form, digunakan plugin JQuery Validation.
- Untuk menampilkan data dalam bentuk tabel, digunakan plugin JQuery Flexigrid
- Proses EDIT dan DELETE dilakukan dengan memilih dan klik pada data yang akan diedit/didelete.
Langsung aja kita mulai step by step untuk membuatnya.
1. Siapkan Database dan Tabel
Langkah pertama tentu persiapkan database dan tabel yang diperlukan.
Seperti sudah disebutkan di rancangan akhir program di atas bahwa kita
akan menyederhanakan struktur data yang akan dibuat. Dalam hal ini, kita
akan membuat database dengan nama “demo” dan tabel dengan nama “
mahasiswa”. Berikut ini struktur dari tabel mahasiswa yang akan dibuat:
| FIELD |
TYPE |
LENGTH |
DESCRIPTION |
| nim |
VARCHAR |
10 |
NIM Mahasiswa |
| nama |
VARCHAR |
30 |
NAMA Mahasiswa |
| alamat |
TEXT |
– |
Alamat Mahasiswa |
Dan berikut ini perintah SQL untuk membuat database dan tabel di atas. Perintah dapat ditulis dan dijalankan di
MySQLclient kesukaan Anda.
CREATE DATABASE demo;
CREATE TABLE mahasiswa (
nim VARCHAR(10) NOT NULL,
nama VARCHAR(30) NOT NULL,
alamat TEXT,
PRIMARY KEY(nim)
);
2. Buat Halaman beserta Form Inputan
Bagi Anda yang sudah belajar perintah-perintah HTML (Hypertext Mark
up Language) tentunya tidak akan kesulitan dalam membuat form inputan
untuk tabel mahasiswa di atas. Bentuk dan tampilan dari form inputan
dapat disesuaikan sesuai keinginan Anda, namun yang penting untuk
diperhatikan bahwa pastikan setiap inputan harus memiliki atribut name
dan id agar dapat diakses dengan mudah melalui JQuery nantinya. Berikut
ini source code HTML awal yang menampilkan form inputan data mahasiswa.
Simpan program berikut ini sebagai file “index.php”.
-
-
<title>Entri, Edit, Delete, Tampil Data dengan PHP dan Ajax
</title>
-
.labelfrm {
display:block;
font-size:small;
margin-top:5px;
}
.error {
font-size:small;
color:red;
}
-
-
-
-
<form action="" method="post" id="frm">
-
<input type="text" name="nim" id="nim" maxlength="10" class="required" size="15"/>
-
<input type="text" name="nama" id="nama" size="30" class="required"/>
<label for="alamat" class="labelfrm">ALAMAT:
</label>
<textarea name="alamat" id="alamat" cols="40" rows="4" class="required"></textarea>
<label for="submit" class="labelfrm"> </label>
<input type="submit" name="Input" value="Input" id="input"/>
<input type="submit" name="Edit" value="Edit" id="edit"/>
<input type="submit" name="Delete" value="Delete" id="delete"/>
<input type="reset" name="Clear" value="Clear" id="clear"/>
-
-
-
Pada program di atas terlihat bahwa terdapat satu buah form dengan id
frm, yang memiliki 3 (tiga) buah inputan text dan textarea serta 4
(empat) buah tombol yaitu Input, Edit, Delete dan Clear. Masing-masing
inputan diberi nama dan ID. Untuk inputan NIM, NAMA dan ALAMAT juga
ditambahkan atribut class dengan value “required” yang berarti inputan
harus diisi (menggunakan plugin JQuery Validate).
Berikut ini tampilan dari program sederhana di atas.
Gambar 1: Tampilan Form Inputan Data Mahasiswa
3. Koneksikan ke Database MySQL
Karena program dirancang untuk berhubungan dengan database MySQL,
maka terlebih dahulu harus dikoneksikan antara PHP dengan MySQL. Untuk
melakukan koneksi ke MySQL, dalam tutorial ini dicontohkan dengan cara
yang paling mudah. Kita akan menggunakan fungsi
mysql_connect() dan
mysql_select_db() dari PHP. Pastikan Anda mengetahui informasi letak
hostname, username, password untuk masuk ke server MySQL dan juga nama database yang akan digunakan sudah disiapkan.
Berikut ini potongan program untuk melakukan koneksi. Letakkan di awal file
index.phpyang telah dibuat di langkah sebelumnya atau dapat juga dibuat di file khusus dan di-include-kan.
<?php
/* koneksi ke db */
-
-
/* akhir koneksi db */
?>
4. Program Input ke MySQL
Setelah program PHP terkoneksi dengan MySQL, selanjutnya dibuat
program untuk proses input (insert) ke database. Secara umum, untuk
membuat program input ke database, kita ambil dulu data yang dientri
oleh user sesuai dengan method dari form. Untuk me-refresh kembali
mengenai penanganan form di PHP, Anda dapat mempelajari Bab 4 dari buku
Pemrograman Web dengan PHP & MySQLyang
dapat didownload di website saya. Setelah data dari form diambil, susun
string perintah query untuk INSERT ke database. Bagaimana bentuk
perintah INSERT dan contoh penggunaannya juga dapat dipelajari di buku
saya tersebut, terutama di Bab 12 dan 13. Kurang lebih berikut ini,
potongan program untuk input / entri ke MySQL. Anda dapat meletakkannya
setelah baris perintah koneksi database.
/* penanganan form */
if (isset($_POST['Input'])) {
-
-
-
//input ke db
$query = sprintf("INSERT INTO mahasiswa VALUES('%s', '%s', '%s')",
-
-
-
);
-
if ($sql) {
echo "Data berhasil disimpan";
} else {
echo "Data gagal disimpan ";
-
}
}
Berikut ini sedikit penjelasan dari potongan program diatas:
- Baris 2: memastikan tombol “Input” ditekan oleh user menggunakan
fungsi isset() yang akan bernilai TRUE jika suatu variabel telah
terbentuk (jika user menekan suatu tombol maka variabel akan terbentuk)
- Baris 3-5: proses pengambilan data dari form. Fungsi strip_tags()
digunakan untuk memastikan bahwa inputan tidak mengandung tag-tag HTML
atau javascript yang mungkin “berbahaya”.
- Baris 8-12: pembentukan perintah untuk INSERT ke database. Fungsi
mysql_escape_string() digunakan untuk menambahkan escape (backslashes, \
) jika terdapat karakter khusus seperti tanda kutip dan dollar. Hal
tersebut dilakukan sebagai salah satu cara mencegah praktek SQL
Injection.
- Baris 13: eksekusi perintah MySQL untuk mengentri data ke database menggunakan fungsi mysql_query().
- Baris 14-19: notifikasi apakah proses berhasil atau gagal.
Pada tahap ini, sebaiknya Anda coba program dengan menginput suatu
data melalui form. Pastikan tidak ada error dan data sudah masuk ke
database (untuk melihat data, langsung gunakan tools MySQL yang Anda
punya).
5. Sertakan Library JQuery dan Plugin JQuery Form
Hingga langkah ke-4 di atas, kita masih belum menggunakan konsep
Ajax (Asynchronous Javascript and XML).
Apa itu Ajax? Secara singkat, ajax merupakan konsep pengembangan web
yang memungkinkan antara client dan server dapat berkomunikasi secara
asynchronous, suatu proses bisa saja berjalan di belakang halaman.
Contoh penerapannya saya rasa dengan mudah kita temui di banyak web,
seperti pada situs Facebook, saat kita meng-update status, hanya bagian
status aja yang berubah sedangkan keseluruhan halaman tidak berubah (
refresh).
Lebih lengkap mengenai Ajax, dapat Anda cari artikelnya di Google. Pada
tutorial ini, digunakan library utama JQuery yang dapat didownload di
situs
http://code.jquery.com. Sedangkan untuk penanganan form dengan teknologi Ajax, digunakan plugin JQuery Form yang dapat didownload di situs
http://malsup.com/jquery/form/.
Dengan plugin ini, kita dapat mengubah proses penanganan form secara
klasik seperti pada langkah ke-4 di atas, menjadi proses penanganan form
dengan “gaya” Ajax. Saya memilih plugin ini dengan alasan kemudahan
dalam penerapannya.
Untuk menyertakan library
JQuery dan
JQuery Form ke dalam halaman yang sudah kita buat sebelumnya, tambahkan dua baris perintah berikut ini di antara tag
<head>(diasumsikan bahwa kedua plugin tersimpan di folder /libs).
<script type="text/javascript" src="libs/jquery.min.js"></script>
<script type="text/javascript" src="libs/jquery.form.js"></script>
Dan setelah library disertakan, kita dapat memanggil plugin JQuery
Form untuk mengaktifkan proses Ajax di dalam form. Pemanggilannya sangat
mudah, cukup atur opsi / pilihan dan aktifkan berdasarkan selector dari
form yang akan dipanggil.
Berikut ini program lengkap yang sudah ditambahkan pemanggilan plugin JQuery Form.
<?php
/* koneksi ke db */
-
-
/* akhir koneksi db */
/* penanganan form */
if (isset($_POST['Input'])) {
-
-
-
//input ke db
$query= sprintf("INSERT INTO mahasiswa VALUES('%s', '%s', '%s')",
-
-
-
);
-
$pesan = "";
if ($sql) {
$pesan = "Data berhasil disimpan";
} else {
$pesan = "Data gagal disimpan ";
-
}
$response = array('pesan'=>$pesan, 'data'=>$_POST);
-
-
}
?>
<html>
<head>
<title>Entri, Edit, Delete, Tampil Data dengan PHP dan Ajax</title>
<style type="text/css">
.labelfrm {
display:block;
font-size:small;
margin-top:5px;
}
.error {
font-size:small;
color:red;
}
</style>
<script type="text/javascript" src="libs/jquery.min.js"></script>
<script type="text/javascript" src="libs/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//aktifkan ajax di form
var options = {
success : showResponse,
resetForm : true,
clearForm : true,
dataType : 'json'
};
$('#frm').ajaxForm(options);
});
function showResponse(responseText, statusText) {
var data = responseText['data'];
var pesan = responseText['pesan'];
alert(pesan);
}
</script>
</head>
<body>
<h1>Data Mahasiswa</h1>
<form action="" method="post" id="frm">
<label for="nim" class="labelfrm">NIM: </label>
<input type="text" name="nim" id="nim" maxlength="10" class="required" size="15"/>
<label for="nama" class="labelfrm">NAMA: </label>
<input type="text" name="nama" id="nama" size="30" class="required"/>
<label for="alamat" class="labelfrm">ALAMAT: </label>
<textarea name="alamat" id="alamat" cols="40" rows="4" class="required"></textarea>
<label for="submit" class="labelfrm"> </label>
<input type="submit" name="Input" value="Input" id="input"/>
<input type="submit" name="Edit" value="Edit" id="edit"/>
<input type="submit" name="Delete" value="Delete" id="delete"/>
<input type="reset" name="Clear" value="Clear" id="clear"/>
</form>
</body>
</html>
Setelah library JQuery dan plugin JQuery Form disertakan (baris 42
dan 43), pada baris 45-55 diterapkan plugin JQuery Form pada form
inputan (id form = #frm) dengan beberapa pengaturan (opsi). Opsi pada
baris 48 berarti pada saat form inputan berhasil disubmit maka akan
otomatis memanggil fungsi showResponse() yang didefinisikan pada baris
56-60. Opsi baris 49 dan 50 membuat form kembali ke posisi awal (reset)
setelah proses submit terjadi, sedangkan opsi pada baris 51 merupakan
pengaturan data yang dikirimkan secara asynchronous dalam bentuk JSON
(Javascript Object Notation).
Gambar 2: Proses Entri setelah ditambahkan plugin JQuery Form
Pada saat form disubmit (ditekan tombol Input), data inputan tetap
akan dikirim dan diproses oleh PHP melalui action yang telah ditentukan
(baris 8-30). Namun pengiriman data tidak akan me-refresh halaman karena
dilakukan di belakang halaman (asynchronous). Setelah proses
penyimpanan data ke database berhasil dilakukan selanjutnya PHP akan
mengirimkan “pesan” dalam bentuk JSON ke javascript. Perhatikan baris
27-29, yang mengubah variabel array berisi pesan menjadi format JSON
menggunakan fungsi json_encode() dari PHP, serta mengirimkannya ke
fungsi javascript showResponse() di baris 56-60. Hasil dari program di
atas, setelah ditambahkan plugin JQuery Form tampak pada Gambar 2.
6. Validasi dengan plugin JQuery Validation
Seperti sudah pernah dijelaskan dan dicontohkan di tutorial saya berjudul
Membuat Validasi Form dengan JQuery Validation,
selanjutnya ditambahkan validasi form inputan dengan aturan semua field
inputan yang harus diisi (required) dan khusus untuk inputan
NIM hanya boleh diisi 10 digit angka (tidak boleh diisi huruf).
Berikut ini source code program setelah ditambahkan plugin JQuery Validation.
<?php
/* koneksi ke db */
-
-
/* akhir koneksi db */
/* penanganan form */
if (isset($_POST['Input'])) {
-
-
-
//input ke db
$query= sprintf("INSERT INTO mahasiswa VALUES('%s', '%s', '%s')",
-
-
-
);
-
$pesan = "";
if ($sql) {
$pesan = "Data berhasil disimpan";
} else {
$pesan = "Data gagal disimpan ";
-
}
$response = array('pesan'=>$pesan, 'data'=>$_POST);
-
-
}
?>
<html>
<head>
<title>Entri, Edit, Delete, Tampil Data dengan PHP dan Ajax</title>
<style type="text/css">
.labelfrm {
display:block;
font-size:small;
margin-top:5px;
}
.error {
font-size:small;
color:red;
}
</style>
<script type="text/javascript" src="libs/jquery.min.js"></script>
<script type="text/javascript" src="libs/jquery.form.js"></script>
<script type="text/javascript" src="libs/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//aktifkan ajax di form
var options = {
success : showResponse,
beforeSubmit: function(){
return $("#frm").valid();
},
resetForm : true,
clearForm : true,
dataType : 'json'
};
$('#frm').ajaxForm(options);
//validasi form dgn jquery validate
$('#frm').validate({
rules: {
nim : {
digits: true,
minlength:10,
maxlength:10
}
},
messages: {
nim: {
required: "Kolom nim harus diisi",
minlength: "Kolom nim harus terdiri dari 10 digit",
maxlength: "Kolom nim harus terdiri dari 10 digit",
digits: "NIM harus berupa angka"
},
nama: {
required: "Nama harus diisi dengan benar"
}
}
});
});
function showResponse(responseText, statusText) {
var data = responseText['data'];
var pesan = responseText['pesan'];
alert(pesan);
}
</script>
</head>
<body>
<h1>Data Mahasiswa</h1>
<form action="" method="post" id="frm">
<label for="nim" class="labelfrm">NIM: </label>
<input type="text" name="nim" id="nim" maxlength="10" class="required" size="15"/>
<label for="nama" class="labelfrm">NAMA: </label>
<input type="text" name="nama" id="nama" size="30" class="required"/>
<label for="alamat" class="labelfrm">ALAMAT: </label>
<textarea name="alamat" id="alamat" cols="40" rows="4" class="required"></textarea>
<label for="submit" class="labelfrm"> </label>
<input type="submit" name="Input" value="Input" id="input"/>
<input type="submit" name="Edit" value="Edit" id="edit"/>
<input type="submit" name="Delete" value="Delete" id="delete"/>
<input type="reset" name="Clear" value="Clear" id="clear"/>
</form>
</body>
</html>
Untuk menerapkan validasi di form inputan, pertama-tama sertakan plugin
JQuery Validate seperti terlihat pada baris 44 program di atas. Selanjutnya terapkan
rule
yang sudah ditetapkan pada form sesuai dengan contoh pada baris 59
hingga 79. Dan untuk mengintegrasikan plugin JQuery Validation dengan
JQuery Form yang sudah diterapkan sebelumnya, tambahkan opsi
beforeSubmit seperti pada baris 50-52 program di atas.
6. Tampilkan Data dalam Bentuk Tabel dengan Flexigrid
Untuk menampilkan data pada dasarnya banyak pilihan bentuk, baik
dalam bentuk list maupun tabel. Kali ini kita akan memanfaatkan plugin
JQuery untuk menampilkan data dalam bentuk tabel, yaitu
Flexigrid.
Kelebihan utama dari plugin ini adalah kemudahan dan fleksibilitas
dalam penerapannya. Kita tidak perlu membuat tabel dengan perintah HTML,
cukup dengan menambahkan tag
<table> dengan id
tertentu, selebihnya plugin Flexigrid yang akan mengatur isinya.
Kolom-kolom tabel dapat diatur dengan fleksibel sesuai kebutuhan, semua
dilakukan melalui perintah Javascript. Sementara itu, data yang akan
ditampilkan dalam tabel dapat berasal dari berbagai bentuk data, antara
lain
Array Javascript, XML, JSON maupun plain-text. Dari sisi
source data tentunya dapat berasal dari halaman yang sama maupun halaman
lain. Kelebihan lainnya adalah kolom dapat digeser, diurutkan dan
diatur ukurannya
on-the-fly, langsung di browser. Selain itu juga sudah tersedia halaman (
paging) dan pencarian data (
searching) berdasarkan kolom tertentu.
Untuk menampilkan data dengan Flexigrid cukup dengan
4 (empat) langkah sederhana,
yaitu (1) sertakan library (Javascript & CSS) yang diperlukan, (2)
siapkan obyek tabel dengan tag HTML <table>, (3) atur kolom yang
akan ditampilkan dan (4) siapkan potongan program untuk menangani data.
Pada langkah pertama, kita sertakan library yang diperlukan seperti
terlihat pada potongan program di bawah ini. Terdapat satu file CSS yang
akan mengatur tampilan tabel flexigrid (baris 1) dan terdapat library
utama flexigrid (baris 3). Selain itu, pada versi terakhir flexigrid
harus disertakan plugin
JQuery Cookie buatan Klaus Hartl (baris 2).
<link rel="stylesheet" type="text/css" href="libs/flexigrid/css/flexigrid.css">
<script type="text/javascript" src="libs/jquery.cookie.js"></script>
<script type="text/javascript" src="libs/flexigrid/js/flexigrid.js"></script>
Langkah kedua, siapkan obyek tabel beserta atribut id-nya pada tempat
dimana kita akan menampilkan data. Gunakan perintah sederhana sebagai
berikut:
Langkah ketiga adalah mengatur kolom-kolom yang akan ditampilkan beserta beberapa opsi atau properties dari tabel
flexigrid. Langsung saja kita lihat contoh potongan program di bawah ini.
//flexigrid handling
$('#flex1').flexigrid
(
{
url: 'index.php?action=getdata',
dataType: 'json',
colModel : [
{display: 'NIM', name : 'nim', width : 100, sortable : true, align: 'left'},
{display: 'Nama', name : 'nama', width : 200, sortable : true, align: 'left'},
{display: 'Alamat', name : 'alamat', width : 400, sortable : true, align: 'left'}
],
searchitems : [
{display: 'NIM', name : 'nim'},
{display: 'Nama', name : 'nama', isdefault: true}
],
sortname: 'nama', //default urut kolom nama
sortorder: 'asc', //default urut ascending
usepager: true, //tambahkan paging
title: 'Data Mahasiswa', //judul flexigrid
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700, //lebar tabel
height: 400 //tinggi tabel
}
);
Sedikit penjelasan mengenai potongan program di atas.
- Baris 2: Pemanggilan library flexigrid diawali dengan memanggil fungsi flexigrid() dan diterapkan pada tabel dengan id #flex1 sesuai dengan tabel yang sudah dibuat di langkah sebelumnya.
- Baris 5-6: Opsi url dapat diisi dengan alamat
source data yang akan ditampilkan di tabel. Alamat source data dapat
berasal dari halaman yang sama seperti pada contoh di atas, dapat juga
dari halaman berbeda. Format datanya harus sesuai dengan opsi yang
dipilih pada baris 6 yaitu dataType (dalam hal ini menggunakan JSON).
- Baris 8-12: Pengaturan kolom-kolom yang akan
ditampilkan di tabel. Urutan dari kolom harus sesuai dengan urutan data
source-nya, jika tidak isi data bisa saja tidak sesuai. Pada setiap
kolom terdapat beberapa pengaturan seperti judul kolom (display), nama
kolom (name) sebagai identitas kolom, lebar kolom (width), dapat
diurutkan atau tidak (sortable) dan perataan kolom (align). Pada contoh
di atas, terdapat 3 kolom yaitu nim, nama dan alamat.
- Baris 13-16: Menambahkan fitur pencarian dimana pencarian dapat dilakukan berdasarkan kolom nim dan nama.
- Baris 18-27: Beberapa pengaturan lainnya yang dapat
dilakukan seperti pengaturan pengurutan, pengaturan halaman (paging)
serta lebar dan tinggi tabel.
Langkah keempat atau yang terakhir untuk menampilkan data ke
flexigrid adalah menyiapkan potongan program PHP untuk menangani data.
Jika data berasal dari database maka tugas bagian ini adalah melakukan
pengambilan data (SELECT) untuk selanjutnya diformat sesuai dengan
standar flexigrid dan dikirimkan ke library flexigrid untuk ditampilkan.
Dalam contoh ini, data diformat dalam bentuk JSON.
Berikut ini potongan program PHP untuk menangani data flexigrid.
if (isset($_GET['action']) && $_GET['action'] == 'getdata') {
$page = (isset($_POST['page']))?
$_POST['page']: 1;
$rp = (isset($_POST['rp']))?
$_POST['rp'] : 10;
$sortname = (isset($_POST['sortname']))?
$_POST['sortname'] : 'nama';
$sortorder = (isset($_POST['sortorder']))?
$_POST['sortorder'] : 'asc';
$sort = "ORDER BY $sortname $sortorder";
$start = (($page-1) * $rp);
$limit = "LIMIT $start, $rp";
$query = (isset($_POST['query']))?
$_POST['query'] : '';
$qtype = (isset($_POST['qtype']))?
$_POST['qtype'] : '';
$where = "";
if ($query) $where .= "WHERE $qtype LIKE '%$query%' ";
$query = "SELECT nim, nama, alamat ";
$query_from =" FROM mahasiswa ";
$query .= $query_from . " $where $sort $limit";
$query_total = "SELECT COUNT(*)". $query_from." ".$where;
-
-
-
$data = $_POST;
$data['total'] = $total[0];
-
-
-
$rows['id'] = $row[0];
$datax['cell'] = $row;
-
}
$data['rows'] = $datax_r;
-
-
}
Gambar 3 berikut ini tampilan halaman setelah ditambahkan tabel flexigrid.
Gambar 3. Tampilan Flexigrid
7. Tampilkan Data di Form saat Baris Fexigrid Dipilih
Data sudah ditampilkan di dalam grid, selanjutnya akan dilakukan
proses Edit dan Delete. Untuk keperluan proses tersebut, setiap baris
data di dalam flexigrid dipilih akan ditampilkan di form yang sudah
dibuat. Jadi untuk sebelum melakukan proses EDIT dan DELETE, perlu
memilih data yang akan diproses dengan mengklik pada baris data di
flexigrid.
Untuk menambahkan action saat baris flexigrid diklik, cukup menambahkan atribut
‘process’ pada pendefinisian
colModel. Perhatikan contoh sebagai berikut dimana
doaction merupakan fungsi javascript yang akan dipanggil saat suatu baris diklik / dipilih.
colModel : [
{display: 'NIM', name : 'nim', width : 100, sortable : true, align: 'left', process: doaction},
{display: 'Nama', name : 'nama', width : 200, sortable : true, align: 'left', process: doaction},
{display: 'Alamat', name : 'alamat', width : 400, sortable : true, align: 'left', process: doaction}
],
Dan berikut ini contoh fungsi
doaction yang akan menangani proses saat baris data di flexigrid dipilih.
function doaction( celDiv, id ) {
$( celDiv ).click( function() {
var nim = $(this).parent().parent().children('td').eq(0).text();
$.getJSON ('index.php',{action:'get_mhs',nim:nim}, function (json) {
$('#nim').val(json.nim);
$('#nama').val(json.nama);
$('#alamat').val(json.alamat);
});
$('#nim').attr('readonly','readonly');
$('#input').attr('disabled','disabled');
$('#edit, #delete').removeAttr('disabled');
});
}
Perhatikan fungsi
doaction di atas. Pertama fungsi
akan melakukan pengecekan apakah terdapat suatu cell (kolom baris) data
diklik (lihat baris 2). Jika terdapat cell yang diklik, maka ambil nilai
dari cell pada kolom pertama baris tersebut, yaitu cell yang berisi NIM
sebagai primary key-nya (lihat baris 3). Tentunya baris 3 harus
disesuaikan dengan struktur data yang ada, jika lebih dari satu primary
key, ya tinggal tambahkan variabel lainnya. Lanjut, setelah NIM dari
baris didapatkan, kita perlu mendapatkan data lengkap dari database
sehingga nim tersebut dikirimkan ke halaman
index.php secara asynchronous (baris 4). Dengan perintah baris 4, seolah-olah kita mengakses browser dengan alamat
http://namaserver/index.php?action=get_mhs&nim=nim, namun dilakukan oleh Javascript sehingga tidak kelihatan secara kasat mata. Sementara itu, karena memanfaatkan fungsi
$.getJSON,
sehingga balikan data harus dalam format JSON. Pada baris 5-7, data
balikan yang berupa JSON ditampilkan di form melalui fungsi
$.val() dari JQuery. Untuk melengkapi proses, pada baris 9-12 diatur agar form inputan NIM tidak dapat diedit (
readonly), aktifkan tombol EDIT dan DELETE, serta disable tombol INPUT.
Berikut ini potongan program PHP untuk mengambil data berdasarkan NIM
yang dipilih. Data dikembalikan dalam format JSON (Javascript Object
Notation) seperti terlihat pada baris 6.
if (isset($_GET['action']) && $_GET['action'] == 'get_mhs') {
$nim = $_GET['nim'];
$query = "SELECT * FROM mahasiswa WHERE nim='$nim'";
-
-
-
-
}
8. Proses Edit dan Delete
Setelah data dipilih dan ditampilkan di dalam form inputan, dapat
dengan mudah dilakukan proses EDIT dan DELETE. Seperti halnya proses
INPUT, pada dasarnya proses EDIT dan DELETE akan mengambil data dari
form dan menjalankan perintah query UPDATE atau DELETE ke tabel. Karena
form sudah diaktifkan sebagai form Ajax (lihat kembali langkah 5) dan
juga sudah otomatis dilakukan validasi (lihat langkah 6), maka kita
tinggal mendefinisikan potongan program PHP untuk EDIT dan DELETE. Lihat
potongan program di bawah ini.
if (isset($_POST['Edit'])) {
-
-
-
//update db
$query = sprintf("UPDATE mahasiswa SET nama='%s', alamat='%s' WHERE nim='%s'",
-
-
-
);
-
$pesan = "";
if ($sql) {
$pesan = "Data berhasil disimpan";
} else {
$pesan = "Data gagal disimpan ";
-
}
$response = array('pesan'=>$pesan, 'data'=>$_POST);
-
-
} else if (isset($_POST['Delete'])) {
-
//delete data
$query = sprintf("DELETE FROM mahasiswa WHERE nim='%s'",
-
);
-
$pesan = "";
if ($sql) {
$pesan = "Data berhasil dihapus";
} else {
$pesan = "Data gagal dihapus ";
-
}
$response = array('pesan'=>$pesan, 'data'=>$_POST);
-
-
}
9. Program Lengkap Ada di sini!
Bagian demi bagian sudah dibahas, semoga cukup jelas dan dapat
dipahami. Di bawah ini program lengkap dan hasil akhir dari tutorial
kita. Anda dapat mencobanya di komputer Anda, tentunya dengan
menyertakan library yang diperlukan. Di bawah ini juga tersedia tautan
untuk mencoba contoh program ini secara langsung (live demo) dan juga
tautan untuk mendownload program lengkap beserta library yang
diperlukan.
<?php
/* koneksi ke db */
-
-
/* akhir koneksi db */
/* penanganan form */
if (isset($_POST['Input'])) {
-
-
-
//input ke db
$query = sprintf("INSERT INTO mahasiswa VALUES('%s', '%s', '%s')",
-
-
-
);
-
$pesan = "";
if ($sql) {
$pesan = "Data berhasil disimpan";
} else {
$pesan = "Data gagal disimpan ";
-
}
$response = array('pesan'=>$pesan, 'data'=>$_POST);
-
-
} else if (isset($_POST['Edit'])) {
-
-
-
//update data
$query = sprintf("UPDATE mahasiswa SET nama='%s', alamat='%s' WHERE nim='%s'",
-
-
-
);
-
$pesan = "";
if ($sql) {
$pesan = "Data berhasil disimpan";
} else {
$pesan = "Data gagal disimpan ";
-
}
$response = array('pesan'=>$pesan, 'data'=>$_POST);
-
-
} else if (isset($_POST['Delete'])) {
-
//delete data
$query = sprintf("DELETE FROM mahasiswa WHERE nim='%s'",
-
);
-
$pesan = "";
if ($sql) {
$pesan = "Data berhasil dihapus";
} else {
$pesan = "Data gagal dihapus ";
-
}
$response = array('pesan'=>$pesan, 'data'=>$_POST);
-
-
} else if (isset($_GET['action']) && $_GET['action'] == 'getdata') {
$page = (isset($_POST['page']))?
$_POST['page']: 1;
$rp = (isset($_POST['rp']))?
$_POST['rp'] : 10;
$sortname = (isset($_POST['sortname']))?
$_POST['sortname'] : 'nama';
$sortorder = (isset($_POST['sortorder']))?
$_POST['sortorder'] : 'asc';
$sort = "ORDER BY $sortname $sortorder";
$start = (($page-1) * $rp);
$limit = "LIMIT $start, $rp";
$query = (isset($_POST['query']))?
$_POST['query'] : '';
$qtype = (isset($_POST['qtype']))?
$_POST['qtype'] : '';
$where = "";
if ($query) $where .= "WHERE $qtype LIKE '%$query%' ";
$query = "SELECT nim, nama, alamat ";
$query_from =" FROM mahasiswa ";
$query .= $query_from . " $where $sort $limit";
$query_total = "SELECT COUNT(*)". $query_from." ".$where;
-
-
-
$data = $_POST;
$data['total'] = $total[0];
-
-
-
$rows['id'] = $row[0];
$datax['cell'] = $row;
-
}
$data['rows'] = $datax_r;
-
-
} else if (isset($_GET['action']) && $_GET['action'] == 'get_mhs') {
$nim = $_GET['nim'];
$query = "SELECT * FROM mahasiswa WHERE nim='$nim'";
-
-
-
-
}
?>
<html>
<head>
<title>Entri, Edit, Delete, Tampil Data dengan PHP dan Ajax</title>
<style type="text/css">
.labelfrm {
display:block;
font-size:small;
margin-top:5px;
}
.error {
font-size:small;
color:red;
}
</style>
<script type="text/javascript" src="libs/jquery.min.js"></script>
<script type="text/javascript" src="libs/jquery.form.js"></script>
<script type="text/javascript" src="libs/jquery.validate.min.js"></script>
<link rel="stylesheet" type="text/css" href="libs/flexigrid/css/flexigrid.css">
<script type="text/javascript" src="libs/jquery.cookie.js"></script>
<script type="text/javascript" src="libs/flexigrid/js/flexigrid.js"></script>
<script type="text/javascript">
$(document).ready(function() {
resetForm();
//aktifkan ajax di form
var options = {
success : showResponse,
beforeSubmit: function(){
return $("#frm").valid();
},
resetForm : true,
clearForm : true,
dataType : 'json'
};
$('#frm').ajaxForm(options);
//validasi form dgn jquery validate
$('#frm').validate({
rules: {
nim : {
digits: true,
minlength:10,
maxlength:10
}
},
messages: {
nim: {
required: "Kolom nim harus diisi",
minlength: "Kolom nim harus terdiri dari 10 digit",
maxlength: "Kolom nim harus terdiri dari 10 digit",
digits: "NIM harus berupa angka"
},
nama: {
required: "Nama harus diisi dengan benar"
}
}
});
//flexigrid handling
$('#flex1').flexigrid
(
{
url: 'index.php?action=getdata',
dataType: 'json',
colModel : [
{display: 'NIM', name : 'nim', width : 100, sortable : true, align: 'left', process: doaction},
{display: 'Nama', name : 'nama', width : 200, sortable : true, align: 'left', process: doaction},
{display: 'Alamat', name : 'alamat', width : 400, sortable : true, align: 'left', process: doaction}
],
searchitems : [
{display: 'NIM', name : 'nim'},
{display: 'Nama', name : 'nama', isdefault: true}
],
sortname: 'nama',
sortorder: 'asc',
usepager: true,
title: 'Data Mahasiswa',
useRp: true,
rp: 15,
width: 700,
height: 400
}
);
});
function doaction( celDiv, id ) {
$( celDiv ).click( function() {
var nim = $(this).parent().parent().children('td').eq(0).text();
$.getJSON ('index.php',{action:'get_mhs',nim:nim}, function (json) {
$('#nim').val(json.nim);
$('#nama').val(json.nama);
$('#alamat').val(json.alamat);
});
$('#nim').attr('readonly','readonly');
$('#input').attr('disabled','disabled');
$('#edit, #delete').removeAttr('disabled');
});
}
function showResponse(responseText, statusText) {
var data = responseText['data'];
var pesan = responseText['pesan'];
alert(pesan);
resetForm();
$('#flex1').flexReload();
}
function resetForm() {
$('#input').removeAttr('disabled');
$('#edit, #delete').attr('disabled','disabled');
$('#nim').removeAttr('readonly');
}
</script>
</head>
<body>
<h1>Data Mahasiswa</h1>
<form action="" method="post" id="frm" onReset="resetForm()">
<label for="nim" class="labelfrm">NIM: </label>
<input type="text" name="nim" id="nim" maxlength="10" class="required" size="15"/>
<label for="nama" class="labelfrm">NAMA: </label>
<input type="text" name="nama" id="nama" size="30" class="required"/>
<label for="alamat" class="labelfrm">ALAMAT: </label>
<textarea name="alamat" id="alamat" cols="40" rows="4" class="required"></textarea>
<label for="submit" class="labelfrm"> </label>
<input type="submit" name="Input" value="Input" id="input"/>
<input type="submit" name="Edit" value="Edit" id="edit"/>
<input type="submit" name="Delete" value="Delete" id="delete"/>
<input type="reset" name="Clear" value="Clear" id="clear"/>
</form>
<table id="flex1" style="display:none"></table>
</body>
</html>
Demo dan Download
Kesimpulan
Berdasarkan penjelasan di atas, dapat disimpulkan bahwa penerapan konsep
Ajax di dalam program PHP dapat dilakukan dengan mudah dengan memanfaatkan library
JQuery. Penggunaan
JQuery
juga dapat menghasilkan tampilan yang baik serta membuat pengguna lebih
mudah dan nyaman dalam menggunakan aplikasi kita. Sebagai contoh dalam
tutorial ini, untuk melakukan proses
Entri, Edit, Delete dan Tampil Data hanya disajikan satu halaman serta semua proses tidak memerlukan refresh keseluruhan halaman. Proses terjadi secara
asynchronous di “belakang” halaman. Dengan demikian, penerapan konsep Ajax akan membuat aplikasi lebih kaya dan menarik (
Rich Internet Application).
Semoga tutorial ini bermanfaat untuk kita semua dan mari kobarkan terus semangat berbagi!
Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery (396.7 KiB, 43,210 hits)