Proses CRUD Tanpa Refresh atau Loading Menggunakan AJAX

Proses CRUD Tanpa Refresh Loading Pada Menggunakan AJAX
Contoh Proses CRUD Tanpa Refresh

kangpepe.com | Pada kesempatan ini saya kembali membuat proses Penyimpanan data atau yang biasa disebut CRUD menggunkana AJAX tanpa melakukan proses Refresh pada brouser, Ini saya praktekan ketika melakukan penemuan saat melakukan registrasi data pada sebuah situs namun kecepatan internet saya sangat tidah stabil nah disini baru lah saya melakukan browsing untuk membuat proses CRUD tanpa loading ini.

# INTRUCTION 

Bagaiman caranya ? nah sekarang saya akan membagikanya pada blogs ini untuk rekan-rekan yang ingin mengetahuinya, namun pada Artikel ini saya hanya memberikan contoh sederhana saja, yuk kita mulai melakukan praktek langsung dalam penerapanya :

# FILE PHP

Anda siapkan 3 file.php dan copy coding dibawah ini pada masing-masing file yang saya buat,siapkan file index.php, ajax.js dan proses.php pada suatu direktori webroot anda.

1. index.php


<h4>AJAX Form</h4>
<div id="loading" style="display:none;"><img src="loading.gif" alt="loading..." /></div>
<div id="result" style="display:none;"></div>
<form id="myForm" method="post" action="proses.php">
    <table>
        <tr>
            <td width="100">NIM</td>
            <td>
                <input name="nim" size="30" type="text" />
            </td>
        </tr>
        <tr>
            <td>Nama</td>
            <td>
                <input name="nama" size="40" type="text" />
            </td>
        </tr>
        <tr>
            <td>Tempat Lahir</td>
            <td>
                <input name="tempat_lahir" size="40" type="text" />
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="Submit" />
                <input type="reset" value="Reset" />
            </td>
        </tr>
    </table>
</form>



2. ajax.js


<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $().ajaxStart(function() {
        $('#loading').show();
        $('#result').hide();
    }).ajaxStop(function() {
        $('#loading').hide();
        $('#result').fadeIn('slow');
    });

    $('#myForm').submit(function() {
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data) {
                $('#result').html(data);
            }
        })
        return false;
    });
})
</script>


3.proses.php


<?php
//validasi
if (trim($_POST['nim']) == '') {
    $error[] = '- NIM harus diisi';
}
if (trim($_POST['nama']) == '') {
    $error[] = '- Nama harus diisi';
}
if (trim($_POST['tempat_lahir']) == '') {
    $error[] = '- Tempat Lahir harus diisi';
}
//dan seterusnya

if (isset($error)) {
    echo '<b>Error</b>: <br />'.implode('<br />', $error);
} else {
    /*
    jika data mau dimasukkan ke database,
    maka perintah SQL INSERT bisa ditulis di sini
    */

    $data = '';
    foreach ($_POST as $k => $v) {
        $data .= "$k : $v<br />";
    }

    echo '<b>Form berhasil disubmit. Berikut ini data anda:</b><br />';
    echo $data;
}
die();
?> 



Untuk jquery-1.2.3.min.js dapat anda download versi terbarunya, da disini saya tidak menyediakan file downloadny untuk jquery-1.2.3.min.js, bagi anda yang bergelut dengan Bootstrapt bisa mengopikanya langsung pada directori assets/js/jquery-1.2.3.min.js
Recommend Article × +

OWNER AND CO OF PT. TRANS TECHNO Freelance Web Design and Yii2 Development in ICT STKIP PGRI WEST SUMATRA. While Studying MAGISTER UPI-YPTK Padang,CEO CMS Codepedia, Lives in Padang - Indonesia | WhatsApp : 0853-7516-4491

Related Posts

Update Sesudahnya
« Prev Post
Update Sebelumnya
Next Post »