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. Dalam kata lain, pengguna tidak akan pernah tahu bahwa ada data dikirim ke server.
Dalam tutorial ini, kita akan mengetahui bagaimana cara kerja dari AJAX dan bagaimana mengkombinasikannya dengan PHP dan MySQL untuk membuat halaman website yang lebih interaktif tanpa perlu merefresh halaman. Seperti pada tutorial-tutorial sebelumnya, kita akan menggunakan virtual host seperti di sini.
Pertama-tama kita akan membuat database dengan nama database : db_belajar, kemudian buat table : tb_user dengan script seperti di bawah ini
1 2 3 4 5 6 7 |
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<!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"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.3.1/jquery.twbsPagination.min.js"></script> <script src="js/ajax.js"></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> <br /><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> |
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.
config_db.php
1 2 3 4 5 |
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); |
Buat file read.php untuk menampikan data dari database
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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); |
Buat file create.php untuk memproses penambahan data
1 2 3 4 5 6 7 8 |
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); |
Buat file update.php untuk meng-update data
1 2 3 4 5 6 7 8 |
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); |
Buat file delete.php untuk menhapus data
1 2 3 4 5 |
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); |
Kemudian buat file javascript dengan nama : ajax.js untuk menghubungkan halaman utama dengan API, kode sumbernya seperti di bawah ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 |
$( 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') } }); }); |
Silakan dicoba 🙂
Untuk tutorial PHP lainnya, silakan klik di sini.
makasih bro , ini sangat membantu saya, lanjutkan:)
My blog
akhirnya ketemu jg crudnya, makasih ya
Makasih mas buat ilmunya, sangat membantu ^_^
Thanks gan, butuh banget soalnya
terimakasih gan, sangat membantu buat belajar..
kak itu yg di file ajax.js
var url = “http://www.belajar.local/AJAX-CRUD/”;
inj maksud nya apa? alamat project kita? klo aku kan nyimpen nya di folder htdoc/belajar
nah url nya gimana? kenapa ada ww.belajar.local nya kak?
mohon kasih pencerahan
pakai virtual host, silakan klik di sini
var url = “http://www.belajar.local/AJAX-CRUD/
kak ini maksudnya alamat url apa?
mohon kasih pencerahan
pakai virtual host, silakan klik di sini
terimakasih artikel nya sangat membantu, tapi alangkah baiknya tolong di jelaskan lebih detail lagi.
terima kasih, nanti saya coba perbaiki
mantaff mass…coba penjelasannya bisa di jelasinnya lebih detail
siap mas, mungkin komentar di source codenya mesti ditambah
ga ada file download nya ya bang ?
hehe …
kan tinggal copas aja yang di atas hehehehe
beda edt sama yang update user apa bang?
maksudnya di queary database atau nama fungsinya?
Notice: Undefined variable: mysqli in D:\xampp2\htdocs\tutorial\api\create.php on line 5
Fatal error: Call to a member function query() on a non-object in D:\xampp2\htdocs\tutorial\api\create.php on line 5
kalo seperti ini munculnya gimana penyelesaiannya??
di file config_db.php apakah sudah di deklarasikan ini : $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
pastikan memakai mysqli juga
Kak, kalau aku muncul ini pas create data kak
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);
Aku pakai db xampp phpMyAdmin…
Mohon bantuannya kak…
di script create.php, apakah sudah ditambahkan kode
ditambahkan kode apa ya?
Apakah kode ini :
Sepertinya tidak ditambahkan kode < ? php ?>
kakk aku insert nya kok gak bisa ya? tp edit sama delete bisaa
apa pesan error yang muncul?
saya mendapatkan error seperti ini .
Koneksi berhasil
Warning: mysqli::query(): Couldn’t fetch mysqli in C:\xampp\htdocs\popjavas\api\create.php on line 5
Warning: mysqli::query(): Couldn’t fetch mysqli in C:\xampp\htdocs\popjavas\api\create.php on line 7
Fatal error: Call to a member function fetch_assoc() on null in C:\xampp\htdocs\popjavas\api\create.php on line 8
apa pemanggilan fungsi fetch masih salah atau gimana gan ?
ada beberapa kemungkinan sih sepertinya, misal koneksi ke database-nya sudah ditutup atau variabel untuk menyimpan querynya kosong
Data nya gk muncul di index itu kenapa ya bang ?
ada pesan error yang muncul di console?
paginationnya masih belum bisa bro
apa pesan errornya?
tampilannya kok gak bisa ya menyambung jvascrip
maksudnya menyambung javascript?
kak kalo nambah menu search gimana ya?
tambahin fungsi buat filter data dari json yg diterima