Contoh Input, Ubah, Hapus dan Tampil Data Dengan PHP dan Ajax jQuery

23 February 2015

Proses input, ubah, hapus dan tampil data, kalo istilah kerennya CRUD (Create, Read, Update, Delete) adalah proses dasar dalam pemrograman, khususnya yang berkaitan dengan database. Untuk pemrograman berbasis web, proses CRUD ini bisa dilakukan dengan menggunakan Ajax. Apa itu ajax? Tentunya bukan klub sepakbola Ajax Amsterdam :). Ajax (Asyncronous Javascript and XML) dalam pemrograman web artinya suatu teknik untuk membuat pertukaran data antara client dan server berlangsung di belakang layar, jadi halaman web tidak perlu dimuat ulang seluruhnya tiap kali ada request ke server sehingga waktu load relatif lebih cepat.
Nah, kali ini kita akan coba mengimplementasikan ajax pada operasi dasar input, ubah, hapus dan tampil data pada PHP dengan bantuan jQuery v1.11.1. Pertama-tama, sepertia biasa, buat dulu tabel dan masukkan beberapa sampel data. Sebagai contoh, kita ambil data mahasiswa.

CREATE TABLE `mahasiswa` (
 `id` INT(4) UNSIGNED NOT NULL AUTO_INCREMENT,
 `nim` VARCHAR(10) NOT NULL,
 `nama` VARCHAR(50) NOT NULL,
 `jk` ENUM('L','P') NOT NULL,
 `alamat` VARCHAR(150) NULL DEFAULT NULL,
 PRIMARY KEY (`id`)
);

INSERT INTO `mahasiswa` (`nim`, `nama`, `jk`, `alamat`) VALUES 
('51201214', 'AZIS GAGU', 'L', 'GORONTALO'),
('51240012', 'SUTISNA', 'L', 'MAKASSAR'),
('51240032', 'EDI SUPONO', 'L', 'MANADO'),
('51240041', 'NUNUNG', 'P', 'SEMARANG');

Selanjutnya, kita buat halaman utama, beri nama index.html. Tabel data dan form input dua-duanya kita letakkan di halaman ini. Jangan lupa tambahkan library jquery dan script yang akan kita buat nantinya di bagian bawah halaman.

<!DOCTYPE HTML>
<html>
<head>
 <title>Ajax CRUD | blog.didinsino.com</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <div id="wrapper">
    
        <!-- untuk menampillkan pesan dari server -->
        <div id="result" style="display:none"></div>
        
        <table id="tabel-data">
            <thead>
                <tr>
                    <th width="30px">NO</th><th>NIM</th><th>NAMA</th>
                    <th width="30px">L/P</th><th>ALAMAT</th><th width="80px"></th>
                </tr>
            </thead>
            <!-- area untuk menampilkan data. data akan di-load via ajax -->
            <tbody id="data-area"></tbody>
        </table>
        
        <div id="form-area">
            <h3>Input Data Mahasiswa</h3>
            <form id="form-input" method="post" action="action.php?a=input">
            <p>
                <label for="nim">NIM</label>
                <input type="text" name="nim" id="nim" size="10" maxlength="10" autofocus>
            </p><p>
                <label for="nama">Nama</label>
                <input type="text" name="nama" id="nama" size="40" maxlength="50">
            </p><p>
                <label for="jk">Jenis Kelamin</label>
                <select name="jk" id="jk">
                    <option></option>
                    <option value="L">Laki-Laki</option>
                    <option value="P">Perempuan</option>
                </select>
            </p><p>
                <label for="nim">Alamat</label>
                <input type="text" name="alamat" id="alamat"/>
            </p><p>
                <label>&nbsp;</label>
                <button type="submit" name="simpan">Tambahkan Data</button>
                <button type="reset">Batal</button>
                <span id="loader" style="display:none"><img src="loader.gif"> Mengirim...</span>
            </p>
            </form>
        </div>
        
    </div>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>  
    <script type="text/javascript" src="myscript.js"></script> 
</body>
</html>

Jika kita perhatikan bagian tabel diatas, tidak terdapat baris data yang ditampilkan. Hanya ada <tbody id="data-area"></tbody>. Nah, disini data yang ditampilkan akan di-load via ajax dengan bantuan jquery.

$.get('action.php?a=data', function(res){
    $('#data-area').html(res.html);
}, 'json');

Kemudian pada bagian form, disini kita akan menggunakan form ini untuk menginput sekaligus untuk mengubah data. Untuk beralih dari mode input ke ubah, kita juga akan menggunakan jquery.
Berikut script lengkapnya yang juga disertai penjelasan singkat. Beri nama myscript.js

$(function(){
    
    var formArea = $('#form-area'),
        dataArea = $('#data-area'),
        resultArea = $('#result'),
        loaderArea = $('#loader');
    
    // Load Data
    $.get('action.php?a=data', function(res){
        dataArea.html(res.html);
    }, 'json');
    
    $('#tabel-data').on('click', '.ubah', function(e){ // Klik tombol "ubah"
        e.preventDefault();
        var tr = $(this).closest('tr');
        var id = tr.attr('data-id');
        formArea.find('form').attr('action', 'action.php?a=ubah&id=' + id);
        formArea.find('h3').text('Edit Data Mahasiswa');
        // addClass('aktif') -> menandai baris yg sementara di ubah 
        tr.addClass('aktif').find('td[data-name]').each(function(){
            var fieldId = '#' + $(this).attr('data-name');
            var val = $(this).text();
            formArea.find(fieldId).val(val);
        });       
        formArea.find(':submit').text('Update Data'); 
    }).on('click', '.hapus', function(e){ // Klik tombol hapus
        e.preventDefault();
        var tr = $(this).closest('tr');
        var url = $(this).attr('href');
        if ( confirm('Yakin akan menghapus data ini?') ) {            
            $.get(url, function(res){
                // Tampilkan pesan selama 3 detik
                resultArea.removeClass().addClass(res.result).text(res.msg).slideDown(100).delay(3000).slideUp(100);
                if (res.result == 'ok') {
                    // tambahkan animasi blink pada baris yang akan dihapus
                    blink_baris_tabel(tr, '#F4ADAD');
                    tr.fadeOut(200, function(){
                       $(this).remove(); 
                       urutkan_nomor();
                    });
                    // reset form, mungkin sementara menginput/ubah. Kita panggil event onclick tombol reset
                    formArea.find(':reset').trigger('click');  
                }    
            }, 'json');
        }
    });
    
    $('#form-input').on('click', ':reset', function(e){ // Klik tombol reset
        dataArea.find('tr').removeClass('aktif');
        formArea.find('form').attr('action', 'action.php?a=input');
        formArea.find('h3').text('Input Data Mahasiswa');
        formArea.find(':submit').text('Tambahkan Data');
        formArea.find('input:first').focus();
    }).on('submit', function(e){ // Klik tombol submit
        e.preventDefault();
        var form = $(this);
        var post_data = $(this).serialize();
        var form_action = $(this).attr('action');
        // Disable semua inputan di form saat proses pengiriman
        form.find('input, select').prop('disabled', true);
        // Tampilkan animasi loading
        loaderArea.show();
        $.post(form_action, post_data, function(res){
            // enable kembali semua inputan saat respon dari server diterima
            form.find('input, select').prop('disabled', false);
            // sembunyikan kembali animasi loading
            loaderArea.hide();
            // Tampilkan pesan dari server selama 3 detik
            resultArea.removeClass().addClass(res.result).text(res.msg).slideDown(100).delay(3000).slideUp(100);
            if (res.result == 'ok') {
                var tr;
                if (res.action == 'input') { // Jika aksi = input
                    dataArea.prepend(res.html);  // Tambahkan data pada baris pertama
                    tr = dataArea.find('tr:first');
                } else { // Jika aksi = ubah
                    // Ubah baris data yang telah di-update
                    dataArea.find('tr[data-id=' + res.id + ']').after(res.html).remove();
                    tr = dataArea.find('tr[data-id=' + res.id + ']');
                }
                // urutkan kembali kolom nomor
                urutkan_nomor();
                // tambahkan animasi blink pada baris yang baru ditambahkan/diubah
                blink_baris_tabel(tr, '#FFCC99');
                // reset form
                form.find(':reset').trigger('click');   
            }             
        }, 'json');
    });
    
    function urutkan_nomor() {
        dataArea.find('tr').each(function(idx, tr){
            var no = idx + 1;
            $(this).find('td.nomor').text(no)
        });
    }
    
    function blink_baris_tabel(tr, blinkColor) {
        var warnaAsli = tr.css('background-color');
        tr.css('background-color', blinkColor);
        tr.animate({
            opacity: 0.4
            }, 'slow', function(){
                $(this).css({
                 'background-color': warnaAsli,
                 'opacity': 1
            });
        });
    }
    
});

Perhatikan pada bagian onClick tombol ubah. Disini kita buat agar data-data pada baris yang dipilih masuk kedalam field-field yang ada di form. Bagaimana caranya memasukkannya tanpa harus menuliskan nama fieldnya satu per satu? Nah, untuk mensiasatinya, kita tambahkan atribut "data-name" pada masing-masing tag "<td>" dengan nilai yang sama dengan atribut "id" pada input form di halaman utama (index.html). Dengan begitu, kita tinggal melakukan looping pada elemen <td> dan memasukan nilai ke input yang id-nya cocok, seperti ditunjukkan oleh baris ke-20 script diatas.

tr.find('td[data-name]').each(function(){
    var fieldId = '#' + $(this).attr('data-name');
    var val = $(this).text();
    formArea.find(fieldId).val(val);
});

Mengapa menggunakan atribut "data-name"? Atribut "data-*" adalah custom data attributes, yang baru ditambahkan pada html5. Gunanya ya seperti pada kasus kali ini, meyimpan data tanpa menampilkannya ke user.
Sekarang dari sisi servernya, kita buat file action.php

<?php
$action = isset( $_GET['a'] ) ? $_GET['a'] : 'data';

// Nilai default data yang dikembalikan ke client
$res = array(
    'result' => 'error', 
    'action' => $action,
    'id'     => 0,
    'msg'    => 'Terjadi kesalahan!', 
    'html'   => '');
    
mysql_connect('localhost', 'root', '');  // Sesuaikan dengan mysql anda
mysql_select_db('tesdb'); // Sesuai nama database anda

function parse_template( $data = array() ) {
    $row_template = '
    <tr data-id="%id%">
        <td class="nomor" align="center">%no%</td>
        <td data-name="nim">%nim%</td>
        <td data-name="nama">%nama%</td>
        <td data-name="jk" align="center">%jk%</td>
        <td data-name="alamat">%alamat%</td>
        <td align="center">
            <a href="#" class="ubah">Ubah</a>
            <a href="action.php?a=hapus&id=%id%" class="hapus">Hapus</a>
        </td>
    </tr>';
    return preg_replace_callback('/%([a-zA-Z0-9\_]+)%/', function($matches) use ($data) {
        return isset($data[$matches[1]]) ? $data[$matches[1]] : '';
    }, $row_template);
}

switch($action):
    case 'data':
        $query = mysql_query("SELECT * FROM mahasiswa ORDER BY id DESC");
        if ( mysql_num_rows($query) > 0 ) {
            $no = 1;
            while( $row = mysql_fetch_array($query) ) {
                $row['no'] = $no;
                $res['html'].= parse_template($row);
                $no++;
            }
            $res['result'] = 'ok';
        } else {
            $res['html'] = '<tr><td align="center" colspan="6">Data masih kosong!</td></tr>';
        }
    break;
    case 'input': case 'ubah':        
        $nim    = strip_tags($_POST['nim']);
        $nama   = strip_tags($_POST['nama']);
        $jk     = strip_tags($_POST['jk']);
        $alamat = strip_tags($_POST['alamat']);
        $error  = '';
        // Validasi input kosong
        if ( empty($nim) || empty($nama) || empty($jk) || empty($alamat) ) {
            $res['msg'] = 'Semua field harus diisi!';
        } else {
            $sql = "INSERT INTO mahasiswa (nim, nama, jk, alamat) VALUES ('$nim', '$nama', '$jk', '$alamat')";
            $res['msg'] = '1 Data berhasil ditambahkan..';
            if ($action == 'ubah') {
                $id  = $_GET['id'];                               
                $sql = "UPDATE mahasiswa SET nim='$nim', nama='$nama', jk='$jk', alamat='$alamat' WHERE id=$id";
                $res['id']  = $id;
                $res['msg'] = '1 Data berhasil di-update..';  
            }
            if ( mysql_query($sql) ) {
                if ($action == 'input') 
                    $res['id'] = mysql_insert_id();
                $data = array('id'=>$res['id'], 'no'=>1) + compact('nim', 'nama', 'jk', 'alamat');
                $res['html']   = parse_template($data);                
                $res['result'] = 'ok'; 
            }
        }
    break;
    case 'hapus':
        $id = $_GET['id']; 
        if ( mysql_query("DELETE FROM mahasiswa WHERE id=$id") ) {
            $res['msg']    = '1 Data berhasil dihapus..';
            $res['id']     = $id;
            $res['result'] = 'ok';
        }
    break;
endswitch;
// tampilkan hasil dalam format JSON
echo json_encode($res);

Terakhir, untuk mempercantik tampilannya, tambahkan CSS dibawah ini :

body { font:13px arial; }
#wrapper { width:550px; padding:10px;}
#result { padding:7px 10px; font-weight:bold; margin-bottom:15px; }
#result.ok { background-color:#96F5AB; color:#1C671C; }
#result.error { background-color:#F5BEBE; color:#AA3030 }
table { border:solid 1px #333; border-collapse: collapse;width:100%; }
table th,table td { border:solid 1px #333; }
table th { background-color:#f7f7f7; padding:5px; }
table td { padding:3px 5px; }
table td a { display:inline-block; padding:2px 5px; text-decoration:none; color:#fff; font-size:10px; }
table tr.aktif { background-color:#F6FF9E !important; }
table td a:hover { opacity:0.5; }
table td a.ubah { background-color:green; }
table td a.hapus { background-color:red; }
form p { margin:0; padding:3px 0; }
form label { float:left; width:100px; }
#loader  { margin-left:10px; font-style:italic; font-size:smaller; color:gray; }

Oke, cukup sampai disini dulu tutorial kali ini, dan source code-nya bisa di download di link ini

SiPengembara Gila

Popular Posts

Contoh Input, Ubah, Hapus dan Tampil Data Dengan PHP dan Ajax jQuery

0 comments