Aplikasi CRUD Sederhana Menggunakan Ajax Jquery & Modal Bootstrap

Aplikasi CRUD Sederhana Menggunakan Ajax Jquery & Modal Bootstrap | Pada pembahasan kali ini, kita akan coba membuat Aplikasi CRUD Sederhana Menggunakan Ajax Jquery & Modal Bootstrap, Dalam aplikasi ini Form tambah dan form edit nya akan kita letakkan pada modal bootstrap.

kenapa harus menggunakan modal..?

Salah satu kelebihan Aplikasi CRUD Sederhana Menggunakan Ajax Jquery & Modal Bootstrap yang paling saya sukai adalah, ketika koneksi internet terbatas alias lemot tidak perlu meload halaman baru untuk menampilkan form tambah atau form edit.

Kelebihan lain nya kita akan menggunakan Ajax Jquery untuk memproses pengiriman data di sisi server, baik itu untuk menambah data, mengedit data atau menghapus data..

Baiklah mari kita siap kan bahan2 nya...

Download dulu file css dan jquerynya yang sudah saya siapkan Disini

Setelah itu buat database nya dengan struktur seperti berikut ini..

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

CREATE TABLE IF NOT EXISTS `mahasiswa` (

  `id_mahasiswa` int(50) NOT NULL AUTO_INCREMENT,

  `nama` text COLLATE latin1_general_ci NOT NULL,

  `jenis_kelamin` text COLLATE latin1_general_ci NOT NULL,

  `alamat` text COLLATE latin1_general_ci NOT NULL,

  `telepon` text COLLATE latin1_general_ci NOT NULL,

  PRIMARY KEY (`id_mahasiswa`)

) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=100001 ;

Siapkan juga file koneksi.php berikut scriptnya

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

<?php

$koneksi = mysqli_connect

            (

                "localhost",

                "root",

                "",

                "crud"

            );

if (mysqli_connect_errno())

    {

        echo "Koneksi Gagal"

        .mysqli_connect_error();

    }

?>

Selanjutnya kita buat halaman utama yang akan menampilkan data dari database. buat file index.php dan masukkan script di bawah ini..

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

<!DOCTYPE html>

<html>

<head>

    <title>CRUD Modal Bootstrap</title>

    <link rel="stylesheet" type="text/css" href="style/bootstrap.css">

</head>

<body>

<div class="container" style="margin-top:8%">

    <div class="row">

        <div class="col-md-8 col-md-offset-2">

            <p>

                <center>

                    <h2>Crud Modal Jquery Sederhana</h2>

                    Oleh : <a href="https://www.facebook.com.pendeta.mokong" target="_blank">Rully Studio</a>

                </center>

            </p>

            <br>

            <p>

                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-tambah">Add New</button>

            </p>

                <div id="data-mahasiswa">

                </div>

        </div>

    </div>

    <p>

    <center>Copyright @ 2018 by : <a href="https://www.facebook.com.pendeta.mokong" target="_blank">Rully Studio</a> All rights reserved.</center>

    </p>

</div>

    <script type="text/javascript" src="style/jquery.js"></script>

    <script type="text/javascript" src="style/bootstrap.js"></script>  

    <script type="text/javascript" src="script.js"></script>   

</body>

</html>

    <div id="modal-tambah" class="modal fade" role="dialog">

        <div class="modal-dialog modal-lg">

            <div class="modal-content">

                <form role="form" id="form-tambah" method="post"action="input.php">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal">&times;</button>

                    <h4 class="modal-title">Menambahkan Mahasiswa</h4>

                </div>

                    <div class="modal-body">

                        <div class="form-group">

                            <label>Nama</label>

                            <input class="form-control" id="nama"name="nama">

                            <p style="color:red" id="error_nama"></p>

                        </div>

                        <div class="form-group">

                            <label>Jenis Kelamin</label>

                            <div class="radio">

                                <label>

                                    <input type="radio"name="jenis_kelamin" value="Laki-laki" checked>Laki-laki

                                </label>

                            </div>

                            <div class="radio">

                                <label>

                                    <input type="radio"name="jenis_kelamin" value="Perempuan">Perempuan

                                </label>

                            </div>

                            <p style="color:red" id="error_jenis_kelamin"></p>

                        </div>

                        <div class="form-group">

                            <label>Telepon</label>

                            <input class="form-control" id="telepon"name="telepon">

                            <p style="color:red" id="error_telepon"></p>

                        </div>

                        <div class="form-group">

                            <label>Alamat</label>

                            <textarea id="alamat" name="alamat"class="form-control" rows="3"></textarea>

                            <p style="color:red" id="error_alamat"></p>

                        </div>                         

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-info" data-dismiss="modal">Batal</button>

                        <button type="submit" class="btn btn-primary">Simpan</button>

                    </div>

                </form>    

            </div>

        </div>

    </div>

    <div id="modal-edit" class="modal fade" role="dialog">

        <div class="modal-dialog modal-lg">

            <div class="modal-content">

                <form role="form" id="form-edit" method="post"action="input.php">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal">&times;</button>

                    <h4 class="modal-title">Menambahkan Mahasiswa</h4>

                </div>

                    <div class="modal-body">

                        <div id="data-edit">

                        </div>             

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-info" data-dismiss="modal">Batal</button>

                        <button type="submit" class="btn btn-primary">Simpan</button>

                    </div>

                </form>    

            </div>

        </div>

    </div>

Jangan lupa buat juga file data.php dan masukkan script di bawah ini..

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

    <table class="table table-bordered">

        <tr>

            <th>

                No

            </th>

            <th>

                Nama

            </th>

            <th>

                Jenis Kelamin

            </th>

            <th>

                Telepon

            </th>

            <th>

                Alamat

            </th>

            <th>

                Opsi

            </th>

        </tr>

            <?php

                include"koneksi.php";

                $no = 1;

                $data = mysqli_query ($koneksi, " select

                                                        id_mahasiswa,

                                                        nama,

                                                        jenis_kelamin,

                                                        telepon,

                                                        alamat

                                                  from

                                                  mahasiswa

                                                  order by id_mahasiswa DESC");

                while ($row = mysqli_fetch_array ($data))

                {

            ?>

        <tr>

            <td>

                <?php echo $no++; ?>

            </td>

            <td>

                <?php echo $row['nama']; ?>

            </td>

            <td>

                <?php echo $row['jenis_kelamin']; ?>

            </td>

            <td>

                <?php echo $row['telepon']; ?>

            </td>

            <td>

                <?php echo $row['alamat']; ?>

            </td>

            <td>

                <a href="#" id="edit" data-id="<?php echo$row['id_mahasiswa']; ?>">Edit</a> |

                <a href="#" id="hapus" data-id="<?php echo$row['id_mahasiswa']; ?>">Hapus</a>

            </td>

        </tr>

        <?php

            }

        ?>

    </table>

Lalu jalankan di browser, kurang lebih hasilnya seperti ini..

Tampil Data

Coba klik tombol Add New warna biru, akan muncul modal dialog yang menampilkan form tambah data mahasiswa seperti ini..

Modal Form Tambah

Nah, kita akan buat action untuk memproses pengiriman data, buat file input.php lalu masukkan script di bawah ini..

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

<?php

include"koneksi.php";

$nama = $_POST['nama'];

$jenis_kelamin = $_POST['jenis_kelamin'];

$alamat = $_POST['alamat'];

$telepon = $_POST['telepon'];

if ($nama == '') {

    $data['error']['nama'] = 'Nama tidak boleh kosong';

}

if ($jenis_kelamin == '') {

    $data['error']['jenis_kelamin'] = 'Piih Jenis Kelammin';

}

if ($telepon == '') {

    $data['error']['telepon'] = 'Telepon Tidak Boleh Kosong';

}

if ($alamat == '') {

    $data['error']['alamat'] = 'Alamat tidak boleh kosong';

}

if (empty($data['error'])) {

        $query = "insert INTO mahasiswa SET

                                        nama = '$nama',

                                        jenis_kelamin = '$jenis_kelamin',

                                        alamat = '$alamat',

                                        telepon = '$telepon'

                                        ";

        mysqli_query($koneksi, $query)

        or die ("Gagal Perintah SQL".mysql_error());

    $data['hasil'] = 'sukses';

} else {

    $data['hasil'] = 'gagal';

}

echo json_encode($data);

?>

Agar aplikasi bisa berjalan tanpa meload halaman saat input, edit atau hapus data, kita perlu menambahkan file script.js, yang sudah di load melalui halaman index.php tadi. script ini yang menangani pemrosesan input, edit, atau hapus data tanpa load halaman. nah, kita buat file dengan nama script.js lalu masukkan script di bawah ini..

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

$(document).ready(function(){

    var data = "data.php";

    $('#data-mahasiswa').load(data);

    $("#form-tambah").submit(function(e) {

        e.preventDefault();

        $("#error_nama").html('');

        $("#error_jenis_kelamin").html('');

        $("#error_telepon").html('');

        $("#error_alamat").html('');

        var dataform = $("#form-tambah").serialize();

        $.ajax({

            url: "input.php",

            type: "post",

            data: dataform,

            success: function(result) {

                var hasil = JSON.parse(result);

                if (hasil.hasil !== "sukses") {

                    $("#error_nama").html(hasil.error.nama);

                    $("#error_jenis_kelamin").html(hasil.error.jenis_kelamin);

                    $("#error_telepon").html(hasil.error.telepon);

                    $("#error_alamat").html(hasil.error.alamat);

                } else {

                    $('#modal-tambah').modal('hide');

                    $("#nama").val('');

                    $("#jenis_kelamin").val('');

                    $("#telepon").val('');

                    $("#alamat").val('');

                    $('#data-mahasiswa').load(data);

                }

            }

        });

    });

    $(document).on('click','#edit',function(e){

        e.preventDefault();

        $("#modal-edit").modal('show');

        $.post('edit.php',

            {id:$(this).attr('data-id')},

            function(html){

                $("#data-edit").html(html);

            }  

        );

    });

    $("#form-edit").submit(function(e) {

        e.preventDefault();

        $("#error_nama").html('');

        $("#error_jenis_kelamin").html('');

        $("#error_telepon").html('');

        $("#error_alamat").html('');

        var dataform = $("#form-edit").serialize();

        $.ajax({

            url: "update.php",

            type: "post",

            data: dataform,

            success: function(result) {

                var hasil = JSON.parse(result);

                if (hasil.hasil !== "sukses") {

                    $("#error_edit_nama").html(hasil.error.edit_nama);

                    $("#error_edit_jenis_kelamin").html(hasil.error.edit_jenis_kelamin);

                    $("#error_edit_telepon").html(hasil.error.edit_telepon);

                    $("#error_edit_alamat").html(hasil.error.edit_alamat);

                } else {

                    $('#modal-edit').modal('hide');

                    $("#nama").val('');

                    $("#jenis_kelamin").val('');

                    $("#telepon").val('');

                    $("#alamat").val('');

                    $('#data-mahasiswa').load(data);

                }

            }

        });

    });

    $(document).on('click','#hapus',function(e){

        e.preventDefault();

        $.post('hapus.php',

            {id:$(this).attr('data-id')},

            function(html){

                $('#data-mahasiswa').load(data);           

            }  

        );

    });

});

Dan sekarang biarkan formnya kosong lalu klik tombol Simpan atau Enter.. Hasilnya akan seperti di bawah ini..

Fitur Validasi Form Dengan ajax jquery

Yup.. Aplikasi ini sudah di lengkapi dengan validasi menggunakan Ajax Jquery..

Setelah berhasil buat input data berserta validasinya, selanjutnya kita buat fitur edit data menggunakan modal bootstrap..

Buat file edit.php lalu masukkan script di bawah ini..

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

<?php

    include"koneksi.php";

    $no = 1;

    $data = mysqli_query ($koneksi, " select

                                            id_mahasiswa,

                                            nama,

                                            jenis_kelamin,

                                            telepon,

                                            alamat

                                      from

                                      mahasiswa

                                      where id_mahasiswa = $_POST[id]");

    $row = mysqli_fetch_array ($data);

?>

<form role="form" id="form-edit" method="post" action="update.php">

    <div class="form-group">

        <label>Nama</label>

        <input type="hidden" name="id_mahasiswa" value="<?php echo$row['id_mahasiswa'] ; ?>">

        <input class="form-control" name="nama" value="<?php echo$row['nama'] ; ?>">

        <p style="color:red" id="error_edit_nama"></p>

    </div>

    <div class="form-group">

        <label>Jenis Kelamin</label>

        <div class="radio">

            <label>

                <input type="radio" name="jenis_kelamin" value="Laki-laki"  <?php if($row['jenis_kelamin']=='Laki-laki'){ ; ?> checked <?php } ?>>Laki-laki

            </label>

        </div>

        <div class="radio">

            <label>

                <input type="radio" name="jenis_kelamin" value="Perempuan"  <?php if($row['jenis_kelamin']=='Perempuan'){ ; ?> checked <?php } ?>>Perempuan

            </label>

        </div>

    </div>

    <div class="form-group">

        <label>Telepon</label>

        <input class="form-control" name="telepon"  value="<?php echo$row['telepon'] ; ?>">

        <p style="color:red" id="error_edit_telepon"></p>

    </div>

    <div class="form-group">

        <label>Alamat</label>

        <textarea name="alamat" class="form-control" rows="3"><?php echo$row['alamat'] ; ?></textarea>

        <p style="color:red" id="error_edit_alamat"></p>

    </div>

</form>

Lalu coba jalankan dengan klik link edit pada kolom opsi, akan modal dialog akan menampikan form edit beserta detail data berupa value di dalam form..

Modal Form edit

Untuk memproses edit kita buat action edit berupa file update.php, buatlah filenya lalu masukkan script di bawah ini..

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

<?php

include"koneksi.php";

$id = $_POST['id_mahasiswa'];

$nama = $_POST['nama'];

$jenis_kelamin = $_POST['jenis_kelamin'];

$alamat = $_POST['alamat'];

$telepon = $_POST['telepon'];

        if ($nama == '') {

            $data['error']['edit_nama'] = 'Nama  harap diisi';

        }

        if ($jenis_kelamin == '') {

            $data['error']['edit_jenis_kelamin'] = 'Pilih Jenis Kelamin';

        }

        if ($telepon == '') {

            $data['error']['edit_telepon'] = 'Telepon Harap Di isi';

        }

        if ($alamat == '') {

            $data['error']['edit_alamat'] = 'Alamat harap diisi';

        }

        if (empty($data['error'])) {

            $query = "UPDATE mahasiswa SET

                                            nama = '$nama',

                                            jenis_kelamin = '$jenis_kelamin',

                                            alamat = '$alamat',

                                            telepon = '$telepon'

                                            WHERE id_mahasiswa = '$id'

                                            ";

            mysqli_query($koneksi, $query)

            or die ("Gagal Perintah SQL".mysql_error());

            $data['hasil'] = 'sukses';

        } else {

            $data['hasil'] = 'gagal';

        }

        echo json_encode($data);

?>

sama seperti form tambah form edit ini juga di lengkapi dengan fitur validasi form menggunakan Ajax

dan yang terakhir adalah fitur hapus data tanpa perlua meload halaman, buat file hapus.php lalu masukkan script di bawah ini..

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

<?php

include"koneksi.php";

$query = "DELETE FROM mahasiswa

                            WHERE id_mahasiswa ='$_POST[id]'

                                ";

mysqli_query($koneksi, $query)

or die ("Gagal Perintah SQL".mysql_error());

?>

Coba jalankan script hapusnya, dengan cara klik link hapus pada kolom opsi..

Nah.. selesai pembuatan Aplikasi CRUD Sederhana Menggunakan Ajax Jquery & Modal Bootstrap nya, hasil nya bisa di coba langsung melalui link Demo di bawah, dan Source Code Lengkapnya Juga sudah saya sertakan melalui Link Download di bawah ini..

Demo | Download

Semoga bermanfaat yah..

Cari Blog Ini

Sofyan Yusuf © 2019

Aplikasi CRUD Sederhana Menggunakan Ajax Jquery & Modal Bootstrap

Demo | Download

Komentar

Posting Komentar

Postingan populer dari blog ini

Login, Session, dan Logout

Cara Membuat File Setup / Installer Aplikasi Sendiri dengan Inno Setup Compiler