Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery

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.

Untuk memberikan gambaran yang lebih jelas, silahkan lihat demo program terlebih dahulu.

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:

FIELDTYPELENGTHDESCRIPTION
nimVARCHAR10NIM Mahasiswa
namaVARCHAR30NAMA Mahasiswa
alamatTEXTAlamat 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”.

    <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> 
    	</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>

      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

      Leave a Reply

      Your email address will not be published. Required fields are marked *