MEMBUAT APLIKASI CRUD SEDERHANA AJAX JQUERY PHP MYSQL

By | 08/08/2020

Pejuangtoga.id – Membuat aplikasi CRUD sederhana menggunakan Ajax JQuery, PHP dan MySQL. Sebelum kita membuat aplikasi crud terlebih dulu kita harus mengetahui apa itu Ajax. AJAX adalah singkatan dari Asynchronous JavaScript and XML. AJAX adalah teknik baru untuk menciptakan aplikasi web yang lebih baik, lebih cepat, dan lebih interaktif dengan bantuan XML, HTML, CSS, dan Java Script. Dengan AJAX, saat Anda menekan submit pada form, JavaScript akan membuat permintaan ke server, menampilkan hasilnya, dan memperbarui layar pada saat itu juga. dengan kata lain, pengguna tidak akan pernah tahu bahwa ada data dikirim ke server.

Pada tutorial ini, kita akan membahas dan mengetahui mengetahui bagaimana cara kerja dari AJAX dan bagaimana mengkombinasikannya dengan PHP dan MySQL untuk membuat halaman website yang lebih interaktif tanpa perlu merefresh halaman. Pada tutorial kali ini kita akan menggunakan virtual Host. Untuk kalian yang belum tau apa itu virtual host dan bagaimana cara membuat virtual host silahkan liat tutorialnya disini.

Langkah pertama yang harus kita lakukukan untuk membuat aplikasi CRUD ini adalah membuat database dengan nama database : db_belajar, kemudian buat table : tb_user dengan script seperti di bawah ini:

CREATE TABLE IF NOT EXISTS `tb_user` (
  `user_id` int(5) NOT NULL AUTO_INCREMENT,
  `user_name` varchar(50) NOT NULL,
  `user_email` varchar(50) NOT NULL,
  `user_address` varchar(50) NOT NULL,
  PRIMARY KEY (`user_id`)
) ENGINE=INNODB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

Kemudian buat halaman index.php sebagai halaman utama dari aplikasi yang akan dibuat :

 

<!DOCTYPE html>
<html>
    <head>
        <title>Tutorial CRUD Dengan AJAX JQuery PHP MySQL</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fjquery%2F3.1.0%2Fjquery.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.7%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Ftwbs-pagination%2F1.3.1%2Fjquery.twbsPagination.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fajax.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 margin-tb">
                    <h2>Tutorial CRUD Dengan AJAX JQuery PHP MySQL</h2>
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#create-user">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Buat User Baru
                    </button>
                    <wp-br /><wp-br />
                </div>
            </div>
 
            <div class="panel panel-primary">
                <div class="panel-heading">Daftar User</div>
                <div class="panel-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Email</th>
                                <th>Alamat</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    <ul id="pagination" class="pagination-sm"></ul>
                </div>
            </div>
 
            <!-- Modal untuk tambah user -->
            <div class="modal fade" id="create-user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="myModalLabel">Tambah User</h4>
                        </div>
 
                        <div class="modal-body">
                            <form data-toggle="validator" action="api/create.php" method="POST">
                                <div class="form-group">
                                    <label class="control-label" for="user_name">Nama</label>
                                    <input type="text" name="user_name" class="form-control" required />
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="user_email">Email</label>
                                    <input type="email" name="user_email" class="form-control" required />
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="user_address">Alamat</label>
                                    <input type="text" name="user_address" class="form-control" required />
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn crud-submit btn-success">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
 
            <!-- Modal untuk edit user -->
            <div class="modal fade" id="edit-user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="myModalLabel">Edit User</h4>
                        </div>
                        <div class="modal-body">
                            <form data-toggle="validator" action="api/update.php" method="put">
                                <input type="hidden" name="user_id" class="user_id">
                                <div class="form-group">
                                    <label class="control-label" for="user_name">Nama</label>
                                    <input type="text" name="user_name" class="form-control" required />
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="user_email">Email</label>
                                    <input type="email" name="user_email" class="form-control" required />
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="user_address">Alamat</label>
                                    <input type="text" name="user_address" class="form-control" required />
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-success crud-edit">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Setelah membuat Index.php kalian Buat folder baru untuk menyimpan file-file PHP sebagai API dari aplikasi, misalnya nama folder adalah api. File pertama yang dibuat tentunya untuk menghubungkan dengan database db_belajar yang telah dibuat sebelumnya.

Buat dengan nama config.php

define("DB_USER", "root");
define("DB_PASSWORD", "");
define("DB_DATABASE", "db_belajar");
define("DB_HOST", "localhost");
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);

Setelah membuat database dan config.php kita langsung buat read.php, halaman ini digunakan untuk membaca atau menampilkan data dari database.

 

header("Content-type:application/json");
require 'db_config.php';
$num_rec = 10;
if (isset($_GET['page'])) {
    $page = $_GET['page'];
} else {
    $page = 1;
};
$start_from = ($page - 1) * $num_rec;
$sqlTotal = "SELECT * FROM tb_user";
$sql = "SELECT * FROM tb_user Order By user_id desc LIMIT $start_from, $num_rec";
$result = $mysqli->query($sql);
while ($row = $result->fetch_assoc()) {
    $json[] = $row;
}
$data['data'] = $json;
$result = mysqli_query($mysqli, $sqlTotal);
$data['total'] = mysqli_num_rows($result);
echo json_encode($data, JSON_PRETTY_PRINT);

Setelah membuat halam read.php  kita buat halaman sreate.php untu dapat menambahkan data kedalam server database.

header("Content-type:application/json");
require 'db_config.php';
$sql = "INSERT INTO tb_user (user_name,user_email,user_address) VALUES ('" . $_POST['user_name'] . "','" . $_POST['user_email'] . "','" . $_POST['user_address'] . "')";
$result = $mysqli->query($sql);
$sql = "SELECT * FROM tb_user Order by user_id desc LIMIT 1";
$result = $mysqli->query($sql);
$data = $result->fetch_assoc();
echo json_encode($data, JSON_PRETTY_PRINT);

Setelah Halaman Read dan Create sudah dibuat, kita langsung membuat halaman update.php yang berfungsi untuk menambahkan data dan memperbaharui kedalam database.

header("Content-type:application/json");
require 'db_config.php';
$sql = "UPDATE tb_user SET user_name = '" . $_POST['user_name'] . "',user_email = '" . $_POST['user_email'] . "',user_address = '" . $_POST['user_address'] . "' WHERE user_id = '" . $_POST['user_id'] . "'";
$result = $mysqli->query($sql);
$sql = "SELECT * FROM tb_user WHERE user_id = '" . $_POST['user_id'] . "'";
$result = $mysqli->query($sql);
$data = $result->fetch_assoc();
echo json_encode($data, JSON_PRETTY_PRINT);

Selanjutnya halam CRUD yang terakhir adalah membuat perintah delete.php yang berfungsi untuk menghapus mengilangkan data ornag.

header("Content-type:application/json");
require 'db_config.php';
$sql = "DELETE FROM tb_user WHERE user_id = '" . $_POST['user_id'] . "'";
$result = $mysqli->query($sql);
echo json_encode([$_POST['user_id']], JSON_PRETTY_PRINT);

Setelah kita selesai membuat sebuat halaman CRUD, langkah selanjutnya adalah buat file javascript dengan nama : ajax.js untuk menghubungkan halaman utama dengan API, kode sumbernya seperti kode di bawah ini :

 

$( document ).ready(function() {
 
var url = "http://www.belajar.local/AJAX-CRUD/";
var page = 1;
var current_page = 1;
var total_page = 0;
var is_ajax_fire = 0;
 
manageData();
 
/* tampilkan data */
function manageData() {
    $.ajax({
        dataType: 'json',
        url: url+'api/read.php',
        data: {page:page}
    }).done(function(data){
    	total_page = Math.ceil(data.total/10);
    	current_page = page;
 
    	$('#pagination').twbsPagination({
	        totalPages: total_page,
	        visiblePages: current_page,
	        onPageClick: function (event, pageL) {
	        	page = pageL;
                if(is_ajax_fire != 0){
	        	  getPageData();
                }
	        }
	    });
 
    	manageRow(data.data);
        is_ajax_fire = 1;
 
    });
 
}
 
/* tampilkan  data */
function getPageData() {
	$.ajax({
    	dataType: 'json',
    	url: url+'api/read.php',
    	data: {page:page}
	}).done(function(data){
		manageRow(data.data);
	});
}
 
 
/* tambahkan data baru pada table */
function manageRow(data) {
	var	rows = '';
	$.each( data, function( key, value ) {
	  	rows = rows + '<tr>';
	  	rows = rows + '<td>'+value.user_name+'</td>';
	  	rows = rows + '<td>'+value.user_email+'</td>';
                rows = rows + '<td>'+value.user_address+'</td>';
	  	rows = rows + '<td data-id="'+value.user_id+'">';
        rows = rows + '<button data-toggle="modal" data-target="#edit-user" class="btn btn-primary btn-sm edit-user"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit</button> ';
        rows = rows + '<button class="btn btn-danger btn-sm remove-user"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Hapus</button>';
        rows = rows + '</td>';
	  	rows = rows + '</tr>';
	});
 
	$("tbody").html(rows);
}
 
/* tambah user */
$(".crud-submit").click(function(e){
    e.preventDefault();
    var form_action = $("#create-user").find("form").attr("action");
    var user_name = $("#create-user").find("input[name='user_name']").val();
    var user_email = $("#create-user").find("input[name='user_email']").val();
    var user_address = $("#create-user").find("input[name='user_address']").val();
 
    if(user_name != '' && user_email != '' && user_address != ''){
        $.ajax({
            dataType: 'json',
            type:'POST',
            url: url + form_action,
            data:{user_name:user_name, user_email:user_email, user_address:user_address}
        }).done(function(data){
            $("#create-user").find("input[name='user_name']").val('');
            $("#create-user").find("input[name='user_email']").val('');
            $("#create-user").find("input[name='user_address']").val('');
            getPageData();
            $(".modal").modal('hide');
            alert('Data berhasil ditambah')
        });
    }else{
        alert('Ada data yang kosong')
    }
 
 
});
 
/* hapus user */
$("body").on("click",".remove-user",function(){
    var user_id = $(this).parent("td").data('id');
    var c_obj = $(this).parents("tr");
 
    $.ajax({
        dataType: 'json',
        type:'POST',
        url: url + 'api/delete.php',
        data:{user_id:user_id}
    }).done(function(data){
        c_obj.remove();
        getPageData();
        alert('Data berhasil dihapus')
    });
 
});
 
 
/* Edit user */
$("body").on("click",".edit-user",function(){
 
    var user_id = $(this).parent("td").data('id');
    var user_name = $(this).parent("td").prev("td").prev("td").prev("td").text();
    var user_email = $(this).parent("td").prev("td").prev("td").text();
    var user_address = $(this).parent("td").prev("td").text();
    $("#edit-user").find("input[name='user_name']").val(user_name);
    $("#edit-user").find("input[name='user_email']").val(user_email);
    $("#edit-user").find("input[name='user_address']").val(user_address);
    $("#edit-user").find("input[name='user_id']").val(user_id);
 
});
 
 
/* Update user */
$(".crud-edit").click(function(e){
 
    e.preventDefault();
    var form_action = $("#edit-user").find("form").attr("action");
    var user_name = $("#edit-user").find("input[name='user_name']").val();
    var user_email = $("#edit-user").find("input[name='user_email']").val();
    var user_address = $("#edit-user").find("input[name='user_address']").val();
    var user_id = $("#edit-user").find("input[name='user_id']").val();
 
    if(user_name != '' && user_email != '' && user_address != ''){
        $.ajax({
            dataType: 'json',
            type:'POST',
            url: url + form_action,
            data:{user_name:user_name, user_email:user_email, user_address:user_address,user_id:user_id}
        }).done(function(data){
            getPageData();
            $(".modal").modal('hide');
            alert('Data berhasil diedit')
        });
    }else{
        alert('Ada data yang kosong')
    }
 
});
});

Setelah semuanya selesai dibuat maka aplikasi bisa dijalankan. Pastikan kalian mengikuti tutorial ini dengan baik agar kalian dapat mengerti cara membuat crud sederhana dengan Ajax.

Cukup mudah bukan caranya? demikian tutorial ini semoga bermanfaat dan membantu kalian para pembaca pejuangtoga.id. Apabila dari kalian ada yang belum paham silahkan tanyakan pada kolom komentar atau hubungi melalui kontak yang tersedia.

==Terima Kasih <== 

Leave a Reply

Your email address will not be published. Required fields are marked *