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

Wednesday, March 2nd, 2016 - Tutorial Php

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 <code>mahasiswa</code> (
 <code>id</code> INT(4) UNSIGNED NOT NULL AUTO_INCREMENT,
 <code>nim</code> VARCHAR(10) NOT NULL,
 <code>nama</code> VARCHAR(50) NOT NULL,
 <code>jk</code> ENUM('L','P') NOT NULL,
 <code>alamat</code> VARCHAR(150) NULL DEFAULT NULL,
 PRIMARY KEY (<code>id</code>)
);

INSERT INTO <code>mahasiswa</code> (<code>nim</code>, <code>nama</code>, <code>jk</code>, <code>alamat</code>) 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">


                <label for="nim">NIM</label>
                <input type="text" name="nim" id="nim" size="10" maxlength="10" autofocus>
            

                <label for="nama">Nama</label>
                <input type="text" name="nama" id="nama" size="40" maxlength="50">
            

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

                <label for="nim">Alamat</label>
                <input type="text" name="alamat" id="alamat"/>
            

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

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

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.

Contoh Input, Ubah, Hapus dan Tampil Data Dengan PHP dan Ajax jQuery | Ahmad Code | 4.5

Program Sistem Informasi Perpustakaan Berbasis Web

Program ini mengggunakan bahasa pemrograman PHP dengan sedikit sentuhan CSS dan JS, menggunakan framework Bootstrap, dalam proses pengerjaanya ane banyak...
Tutorial Php Untuk Membuat Fitur Autocomplete Pada Multiple Fields

Tertarik untuk membuat fitur Autocomplete pada Multiple Fields dengan PHP? Pada artikel ini, kamu akan menemukan tutorial yang mudah dipahami...
Membuat Form Dan Script Edit Data Dengan Php Mysql

Kamu sudah mempunyai keinginan untuk membuat Form dan Script Edit Data Dengan Php Mysql? Ini adalah artikel yang tepat bagimu....
Cara Membuat Fitur Dynamic Pricing Dengan Php Dan Mysql

Cara membuat fitur Dynamic Pricing dengan PHP dan MySQL memang bisa dibilang cukup sulit, namun dengan membaca artikel ini kamu...
Tutorial Php Untuk Memvalidasi Form

Anda sedang mencari solusi untuk memvalidasi form dengan PHP? Jika ya, maka artikel ini pasti akan menjadi solusi yang Anda...