CRUD sederhana dengan AJAX


27/09/2016 02:21:11 1931

CRUD merupakan singkatan dari (C)reate, (R)ead, (U)pdate dan (D)elete. Opeasi ini merupakan operasi dasar pada pemrograman yang melibatkan database.

Untuk membuat CRUD dengan ajax ada beberapa hal yang kita perlukan seperti:

  1. JQuery: jquery-2.2.0.min.js
  2. Bootstrap untuk desain tampilan

Persiapan

Untuk persiapan buatlah database, misalkan ajax dan sebuah table dengan struktur seperti dibawah ini:

create table produk(
    id int(11) primary key auto_increment,
        name varchar(100),
        price int(10),
        brand varchar(100)
)

Kemudian isikan misalkan 5 record kedalam table tersebut sebagai data awal.

File CRUD

Untuk CRUD terdapat beberapa file yang diperlukan untuk proses-prosesnya seperti table berikut ini:

File Fungsi
data-produk.php Menampilkan data
form-new.php Menampilkan form input data
form-update.php Menampilkan form update data
hapus.php Memproses penghapusan record
simpan.php Menyimpan data yang dikirim
update.php Mengupdate data yang telah diubah

data-produk.php

Buat file php untuk menampilkan data produk:

<?php
$con    = new mysqli("localhost","root", "", "ajax");
$result = $con->query("select * from produk");
?>

<h3>Data Produk</h3>
<hr>
<table class="table table-bordered table-stripped">
    <thead>
        <th>#</th>
        <th>Nama</th>
        <th>Merek</th>
        <th>Harga</th>
        <th>Option</th>
    </thead>
    <?php
    $i      = 1;
    while($record = $result->fetch_array()){
    ?>

    <tr>
        <td>$i</td>
        <td><?=$record['name']?></td>
        <td><?=$record['price']?></td>
        <td><?=$record['brand']?></td>
        <td>
            <button id="editButton" value="<?=$record['id']?>" class="btn btn-warning">Edit</button>
            <button id="deleteButton" value="<?=$record['id']?>" class="btn btn-danger">Hapus</button>
        </td>
    </tr>
    <?php
        $i++;
    }
    ?>   
</table>

form-new.php

File ini digunakan untuk mengkoleksi inputan dari pengguna.

<h3>Form Produk</h3>
<hr>
<form action="simpan.php" method="POST">
    <div class="form-group">
        <label for="">Nama</label>
        <div><input type="text" class="form-control" id="name" name="name"></div>
    </div>

    <div class="form-group">
        <label for="">Merek</label>
        <div><input type="text" class="form-control" id="name" name="brand"></div>
    </div>

    <div class="form-group">
        <label for="">Harga</label>
        <div><input type="text" class="form-control" id="name" name="price"></div>
    </div>

    <div class="form-group">
        <a class="btn btn-primary" id="simpanButton" href="#">Simpan</a>
    </div>
</form>

form-update.php

<?php
$id     = $_GET['id'];
$con    = new mysqli("localhost", "root", "", "ajax");
$result = $con->query("SELECT * FROM produk WHERE id="+$id);
extract($result->fetch_assoc());

?>

<h3>Form Update Produk</h3>
<hr>
<form action="update.php?id=<?=$id?>" method="POST">
    <div class="form-group">
        <label for="">Nama</label>
        <div><input type="text" class="form-control" id="name" name="name" value="<?=$name?>"></div>
    </div>

    <div class="form-group">
        <label for="">Merek</label>
        <div><input type="text" class="form-control" id="name" name="brand" value="<?=$brand?>"></div>
    </div>

    <div class="form-group">
        <label for="">Harga</label>
        <div><input type="text" class="form-control" id="name" name="price" value="<?=$price?>"></div>
    </div>

    <div class="form-group">
        <a class="btn btn-primary" id="simpanUpdate" href="#">Update</a>
    </div>
</form>

hapus.php

File ini digunakan untuk proses menghapus record dari table produk.

<?php
$id     = $_GET['id'];
$con    = new mysqli("localhost","root", "", "ajax");
$sql    = "DELETE FROM produk WHERE id=$id";
$result = $con->query($sql);
echo "Data berhasil dihapus";

proses-simpan.php

File ini digunakan untuk proses menyimpan inputan yang dikirimkan via Ajax.

<?php

$name  = $_POST['name'];
$brand = $_POST['brand'];
$price = $_POST['price'];

$con = new mysqli("localhost","root", "", "ajax");
$sql = "INSERT INTO produk(name, brand, price) values('$name','$brand','$price')";
$result = $con->query($sql);

if(!$result)
    echo "Error $sql";
else
    echo "Produk Berhasil disimpan";

update.php

File ini digunakan untuk proses mengupdate record yang dikirimkan via Ajax.

<?php
$id    = $_GET['id'];
$name  = $_POST['name'];
$brand = $_POST['brand'];
$price = $_POST['price'];

$con = new mysqli("localhost","root", "", "ajax");
$sql = "UPDATE produk SET name='$name', brand='$brand', price='$price' WHERE id=$id";
$result = $con->query($sql);
if(!$result)
    echo "Error $sql";
else
    echo "Produk Berhasil diupdate";

AJAX

File PHP Method function JS
`data-produk.php` `GET` `loadData()`
`form-new.php` `GET` `addForm()`
`form-update.php` `GET` `updateForm(id)`
`hapus.php` `GET` `hapus(id)`
`simpan.php` `POST` `simpan()`
`update.php` `POST` `update()`
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tutorial AJAX CRUD</title>
    <script type="text/javascript" src="jquery-2.2.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <script type="text/javascript">
    $(window).load(function(){
        loadData();

        $("#loadDataButton").click(function(){
            loadData();
        });

        $("#addButton").click(function(){
            addForm();
        });

        $("#data-view").on("click", "#simpanButton", function(){
            simpan();
        });

        $("#data-view").on("click", "#updateButton", function(){
            update();
        });

        $("#data-view").on("click", "#editButton", function(){
            updateForm($(this).attr("value"));
        });

        $("#data-view").on("click", "#deleteButton", function(){
            hapus($(this).attr("value"));
        });
    });

    function loadData(){
        $.ajax({
            url: 'produk/data-produk.php',
            method: "GET",
        }).done(function(data){
            $("#data-view").html(data);
        });
    }

    function addForm(){
        $.ajax({
            url: 'produk/form-new.php',
            method: "GET",
        }).done(function(data){
            $("#data-view").html(data);
        });
    }

    function updateForm(id){
        $.ajax({
            url: 'produk/form-update.php?id='+id,
            method: "GET",
            data: {id: id}
        }).done(function(data){
            $("#data-view").html(data);
        });
    }

    function hapus(id){
        $.ajax({
            url: 'produk/hapus.php',
            method: "GET",
            data: { id: id },
        }).done(function(data){
            $("#data-view").html(data);
        });
    }

    function simpan() {
        $.ajax({
            url: "simpan.php",
            method: "POST",
            data: {
                name: $("#name").val(),
                price: $("#price").val(),
                brand: $("#brand").val()
            },
        }).done(function(data){
            $("#data-view").html(data);
        });
    }

    function update() {
        $.ajax({
            url: $("form").attr("action"),
            method: "POST",
            data: {
                name: $("#name").val(),
                price: $("#price").val(),
                brand: $("#brand").val()
            },
        }).done(function(data){
            $("#data-view").html(data);
        });
    }

    </script>
</head>
<body>
    <div class="container">
        <div>
            <button id="loadDataButton" class="btn btn-default">Load Data</a>
            <button id="addButton" class="btn btn-primary">Add Data</a>
        </div>

        <div id="data-view"></div>
    </div>
</body>
</html>