Sistem Admin Menggunakan AJAX
Pada kesempatan kali ini saya akan membagikan tutorial mengenai sistem admin dengan menggunakan AJAX. Bagi yang baru belajar pemrograman web pasti akan bertanya-tanya. Apa itu AJAX? Apakah susah untuk menggunakannya? Jawabannya sangat sederhana yaitu, AJAX atau dalam istilah bahasanya adalah Asynchronous Javascript and XML yang dapat digunakan untuk melakukan proses CRUD (Creat, Read, Update, Delete) tanpa adanya refresh pada halaman web. Dengan demikian, penggunaan data untuk merefresh halaman setiap proses CRUD akan berkurang dan menghemat penggunaan data tersebut. Jika ditanya apakah mudah atau sulit, semuanya tergantung anda apakah dapat memahami dengan baik. Tidak perlu waktu lama, langsung saja menuju pada peralatan dan bahan yang diperlukan yaitu.
1. Text Editor. Disarankan menggunakan Sublime atau Notepad++.
2. XAMPP atau WAMPP.
3. Bootstrap 4.
4. Font Awesome.
5. JQuery.
6. Database.
Untuk langkah pertama yang harus dilakukan adalah membuat sebuah database untuk menyimpan data. Pada tutorial ini saya menggunakan XAMPP sebagai server dan untuk membuat database. Silahkan jalankan XAMPP anda dan START dua SERVICE yaitu Apache serta MySQL seperti pada gambar berikut ini.
Kemudian silahkan untuk membuka browser anda. Saya sarankan menggunakan Google Chrome untuk hasil yang lebih baik. Ketikkan alamat berikut di address bar http://localhost/phpmyadmin maka akan tampil seperti pada gambar berikut.
Setelah itu klik pada bagian Database yang terletak pada bagian atas. Lalu masukkan nama database sesuai keinginan anda. Untuk database saya beri nama proweb13032018 seperti gambar dibawah ini.
Kemudian klik CREATE untuk membuat database tersebut. Kemudian buatlah sebuah tabel dengan nama users dan jumlah kolom sebanyak sembilan seperti gambar berikut.
Berikutnya adalah klik tombol GO pada bagian sebelah kanan. Lalu isikan pada kolom dengan nama dan tipe data berikut.
1. id_user, tipe data int dengan panjang 11, dan Auto_Increment.
2. username, tipe data varchar dengan panjang 20.
3. fullname, tipe data varchar dengan panjang 50.
4. password, tipe data varchar dengan panjang 50.
5. email, tipe data varchar dengan panjang 20.
6. telepon, tipe data varchar dengan panjang 13.
7. banned, tipe data enum dengan nilai 'Y';'N'.
8. logintime, tipe data datetime.
9. akses, tipe data int dengan panjang 1.
Untuk lebih jelasnya silahkan lihat pada gambar berikut ini.
Jika sudah benar silahkan klik pada tombol SAVE untuk menyimpannya. Selanjutnya adalah membuat sebuah folder yang akan digunakan sebagai tempat melakukan pemrograman. Buatlah folder di dalam directory XAMPP anda. Contohnya D:\XAMPP\htcocs\NAMA_PROJECT. Jika sudah silahkan download file berikut dan taruh di dalam folder yang telah anda buat. Download disini. Lalu extract file download tersebut ke dalam folder anda. Selanjutnya buatlah folder lagi di dalam folder anda tadi. Berilah nama config. Lalu buat dua buah file berkekstensi php di dalam folder tersebut.
Untuk file pertama bernama dao.php yang berisi syntax berikut ini.
<?php include_once 'dbconfig.php'; class Dao { var $link; public function __construct() { $this->link = new Dbconfig(); } public function read() { $query = "SELECT * FROM users ORDER BY id_user ASC"; return mysqli_query($this->link->conn, $query); } public function execute($query) { $result = mysqli_query($this->link->conn, $query); if ($result) { return $result; }else { return mysqli_error($this->link->conn); } } } ?>
Kemudian untuk file kedua bernama dbconfig.php berisi syntax seperti berikut ini.
<?php define('DB_HOST','localhost'); define('DB_USER','root'); define('DB_PASS',''); define('DB_NAME','proweb13032018'); class Dbconfig { var $conn; function __construct() { $this->conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME); if ($this->conn->connect_error) { echo $this->conn->connect_error; } } } ?>
Silahkan ganti pada bagian proweb13032018 dengan nama database anda jika berbeda. Untuk langkah selanjutnya yaitu buat lima file ekstensi php di luar folder config dengan nama antara lain admin.php, execute.php, index.php, login.php dan logout.php.
Pada bagian admin.php silahkan ketikkan syntax berikut ke dalamnya.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="icon" href="assets/images/favicon.ico"> <link rel="stylesheet" href="assets/css/bootstrap.css"> <link rel="stylesheet" href="assets/css/floating-labels.css"> <link rel="stylesheet" href="assets/awesome/css/fontawesome-all.min.css"> <script> function showModalKu() { $('#idusr').val(0); $('#username').val(''); $('#fullname').val(''); $('#email').val(''); $('#telp').val(''); $('#ModalKu').modal('show'); } function showModalDel(id,nm) { $('#usriddel').val(id); $('#nmusr').text(nm); $('#ModalDel').modal('show'); } function showModalEdt(dt) { $.ajax({ type: "POST", url: "execute.php", data: "proc=usredt&usrid="+dt, cache: false, dataType: "json", success: function (data) { $('#idusr').val(data.id_user); $('#username').val(data.username); $('#fullname').val(data.fullname); $('#email').val(data.email); $('#telp').val(data.telepon); $('#ModalKu').modal('show'); }, error: function (err) { console.log(err); } }); } </script> <style> .modal-header { background-color: #337AB7; padding:16px 16px; color:#FFF; border-bottom:2px dashed #337AB7; } .modal-header-danger { color:#fff; padding:9px 15px; border-bottom:1px solid #eee; background-color: #d9534f; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } </style> </head> <body> <?php session_start(); ini_set('display_errors', 'On'); error_reporting(E_ALL); require_once 'logout.php'; include_once 'config/dao.php'; $dao = new Dao(); $result = $dao->read(); ?> <div class="container-fluid mb-auto py-0"> <div class="row justify-content-between"> <div class="ml-3 mb-3"> <button type="button" class="btn btn-success" onclick="showModalKu();"> <i class="fa fa-plus"></i> Add </button> </div> <div class="mr-3 mb-3"> <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#ModalLogout"> <i class="fa fa-sign-out"></i> Keluar (<?php echo $_SESSION["user"]; ?>) </button> </div> </div> <div class="table-responsive"> <table class="table table-hover"> <thead class="thead-light"> <tr> <th>No</th> <th>ID</th> <th>User Name</th> <th>Full Name</th> <th>Email</th> <th>Telephone</th> <th>Baned</th> <th>Login Time</th> <th>Akses</th> <th>Aksi</th> </tr> </thead> <tbody id="userlist"> <?php $i = 1; foreach ($result as $value) { ?> <tr> <td><?php echo $i; ?></td> <td><?php echo $value['id_user']; ?></td> <td><?php echo $value['username']; ?></td> <td><?php echo $value['fullname']; ?></td> <td><?php echo $value['email']; ?></td> <td><?php echo $value['telepon']; ?></td> <td><?php echo $value['banned']; ?></td> <td><?php echo $value['logintime']; ?></td> <td><?php echo $value['akses']; ?></td> <td nowrap> <button type="button" onclick="showModalEdt(<?php echo $value['id_user']; ?>);" class="btn btn-success btn-sm"> <i class="fa fa-edit"></i> Edit </button> <button type="button" onclick="showModalDel(<?php echo $value['id_user']; ?>,'<?php echo $value['fullname']; ?>');" class="btn btn-danger btn-sm"> <i class="fa fa-trash"></i> Delete </button> </td> </tr> <?php $i++; } ?> </tbody> </table> </div> <!-- USER FORM MODAL --> <div class="modal fade" id="ModalKu" tabindex="-1" role="dialog" aria-labelledby="DialogModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel01"> User Form </h5> <button class="close" type="button" data-dismiss="modal" aria-label="close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form id="form-user"> <div class="row"> <div class="col"> <div class="form-group"> <input type="hidden" name="usrid" id="idusr"> <input type="hidden" name="proc" value="usrin"> <input type="text" name="username" class="form-control" id="username" placeholder="user name"> </div> </div> <div class="col"> <div class="form-group"> <input type="text" name="password" class="form-control" id="recipient-name" placeholder="password"> </div> </div> </div> <div class="form-group"> <input type="text" name="fullname" class="form-control" id="fullname" placeholder="full name"> </div> <div class="row"> <div class="col-7"> <div class="form-group"> <input type="email" name="email" class="form-control" id="email" placeholder="email"> </div> </div> <div class="col-5"> <div class="form-group"> <input type="number" name="telp" class="form-control" id="telp" placeholder="telephone"> </div> </div> </div> <div class="row"> <div class="col"> <div class="form-group"> <label for="rdbaned" class="form-control-label">Banned:</label> <div class="custom-control custom-radio" id="rdbaned"> <input type="radio" id="customRadio1" name="baned" value="Y" class="custom-control-input"> <label class="custom-control-label" for="customRadio1">Yes</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="customRadio2" name="baned" value="N" class="custom-control-input"> <label class="custom-control-label" for="customRadio2">No</label> </div> </div> </div> <div class="col"> <div class="form-group"> <label for="cbaccess" class="form-control-label">Access:</label> <div class="custom-control custom-checkbox" id="cbaccess"> <input type="checkbox" name="akses[]" value="1" class="custom-control-input" id="customCheck1"> <label class="custom-control-label" for="customCheck1">Administrator</label> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" name="akses[]" value="2" class="custom-control-input" id="customCheck2"> <label class="custom-control-label" for="customCheck2">Operator</label> </div> </div> </div> </div> </form> </div> <div class="modal-footer"> <button onclick="insertUser();" class="btn btn-success" type="button" data-dismiss="modal"> Save </button> <button class="btn btn-primary" type="button" data-dismiss="modal"> Clear </button> <button class="btn btn-danger" type="button" data-dismiss="modal"> Cancel </button> </div> </div> </div> </div> <!-- END OF USER FORM MODAL --> <!-- Modal Delete --> <div class="modal fade" id="ModalDel" tabindex="-1" role="dialog" aria-labelledby="DialogModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header modal-header-danger"> <h5 class="modal-title" id="ModalLabel01"> User Delete </h5> <button class="close" type="button" data-dismiss="modal" aria-label="close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p style="color: red; font-size: larger;text-align: center">Yakin menghapus data berikut..?</p> <h3 id="nmusr" style="text-align: center; color: #d9534f"></h3> <form id="form-userdel"> <div class="row"> <div class="col"> <div class="form-group"> <input type="hidden" name="usrid" id="usriddel"> <input type="hidden" name="proc" value="usrdel"> </div> </div> </div> </form> </div> <div class="modal-footer"> <button onclick="deleteUser();" class="btn btn-danger" type="button" data-dismiss="modal"> Delete </button> <button class="btn btn-info" type="button" data-dismiss="modal"> Cancel </button> </div> </div> </div> </div> <!-- End Of Modal Delete --> </div> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/popper.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script> function insertUser() { $.ajax({ type: "POST", url: "execute.php", data: $("#form-user").serialize(), cache: false, dataType: "json", success: function (data) { if(data[0]==0){ alert(data[1]); }else{ $("#userlist").html(data[1]); } }, error: function (err) { console.log(err); } }); } function deleteUser() { $.ajax({ type: "POST", url: "execute.php", data: $("#form-userdel").serialize(), cache: false, dataType: "json", success: function (data) { if(data[0]==0){ alert(data[1]); }else{ $("#userlist").html(data[1]); } }, error: function (err) { console.log(err); } }); } </script> </body> </html>
Kemudian selanjutnya untuk file execute.php syntaxnya adalah sebagai berikut.
<?php ini_set('display_errors', 'On'); error_reporting(E_ALL); include_once 'config/dao.php'; $dao = new Dao(); $proc = $_POST['proc']; $usrid = $_POST['usrid']; if ($proc == "usrdel") { $query = "DELETE FROM users WHERE id_user=$usrid"; }elseif ($proc == "usrin" && $usrid == 0) { $username = $_POST['username']; $password = $_POST['password']; $fullname = $_POST['fullname']; $email = $_POST['email']; $telp = $_POST['telp']; $baned = $_POST['baned']; $akses = $_POST['akses']; $aks = 0; for ($index = 0; $index < count($akses); $index++) { $aks = $aks + $_POST['akses'][$index]; } $query = "INSERT INTO users (username,password,fullname,email,telepon,banned,akses) " . "VALUE ('$username',PASSWORD('$password')," . "'$fullname','$email','$telp','$baned',$aks)"; }elseif ($proc == "usredt" && $usrid > 0) { $query = "SELECT id_user,username,fullname,email,telepon,banned,akses FROM users WHERE id_user=".$usrid; $result = $dao->execute($query); $list = mysqli_fetch_array($result); echo json_encode($list); exit(); }elseif ($proc == "usrin" && $usrid > 0) { $username = $_POST['username']; $fullname = $_POST['fullname']; $email = $_POST['email']; $telp = $_POST['telp']; $query = "UPDATE users SET username='$username',fullname='$fullname',email='$email',telepon='$telp' WHERE id_user=".$usrid; } $in = $dao->execute($query); if (!$in) { $msg[0] = "0"; $msg[1] = $in; } else { $result = $dao->read(); $i = 1; $userlist = ""; $msg[0] = "1"; foreach ($result as $value) { $userlist .= "<tr> <td>" . $i . "</td> <td>" . $value['id_user'] . "</td> <td>" . $value['username'] . "</td> <td>" . $value['fullname'] . "</td> <td>" . $value['email'] . "</td> <td>" . $value['telepon'] . "</td> <td>" . $value['banned'] . "</td> <td>" . $value['logintime'] . "</td> <td>" . $value['akses'] . "</td> <td nowrap> <button type=\"button\" onclick=\"showModalEdt(".$value['id_user'].");\" class=\"btn btn-success btn-sm\"> <i class=\"fa fa-edit\"></i> Edit </button> <button type=\"button\" onclick=\"showModalDel(".$value['id_user'].",'".$value['fullname']."');\" class=\"btn btn-danger btn-sm\"> <i class=\"fa fa-trash\"></i> Delete </button> </td> </tr>"; $i++; } $msg[1] = $userlist; } echo json_encode($msg); ?>
Berikutnya adalah file bernama login.php dan berikut ini adalah syntaxnya.
<?php $email = $_POST["inEmail"]; $pass = $_POST["inPass"]; $dbemail = "admin@gmail.com"; $dbpass = "admin23"; if ($email == $dbemail && $pass == $dbpass){ echo '<script type="text/javascript">alert("Berhasil Login.");</script>'; echo '<script type="text/javascript">window.location.href = "admin.php";</script>'; session_start(); $_SESSION["user"] = $dbuser; } else { echo '<script type="text/javascript">alert("Gagal Login.");</script>'; echo '<script type="text/javascript">window.location.href = "index.php";</script>'; } ?>
Lalu berikut ini merupakan syntax untuk file logout.php.
<?php if(isset($_POST['logout']) == true){ session_destroy(); exit(header("Location: index.php")); } ?> <!-- MODAL LOGOUT --> <div class="modal fade" id="ModalLogout" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header" id="lgthead"> <h5 class="modal-title"><i class="fa fa-sign-out"></i> LOG OUT</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form method="post"> <div class="alert alert-warning" role="alert"> <span>Apakah Ingin Keluar?</span> </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary" name="logout" value="true">Ya</button> </div> </form> </div> </div> </div> </div>
Kemudian yang terakhir adalah untuk file index.php berikut syntaxnya.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>SIM COBA</title> <link rel="icon" href="assets/images/favicon.ico"> <link rel="stylesheet" href="assets/css/bootstrap.css"> <link rel="stylesheet" href="assets/css/floating-labels.css"> <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css"> <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css"> </head> <body> <form id="frm01" name="frm01" method="post" action="login.php" class="form-signin"> <div class="text-center mb-4"> <img class="mb-4" width="72" height="72" src="assets/images/favicon.ico"> <h1>Sign In As Admin</h1> </div> <div class="form-label-group"> <input class="form-control" name="inEmail" type="email" id="inEmail" placeholder="Email Address"> <label for="inEmail">Email Address</label> </div> <div class="form-label-group"> <input class="form-control" name="inPass" type="password" id="inPass" placeholder="Password"> <label for="inPass">Password</label> </div> <div class="checkbox mb-3"> <label> <input type="checkbox"> Remember Me? </label> </div> <button class="btn btn-lg btn-info btn-block" type="submit">Signin</button> </form> </body> </html>
Sekarang silahkan cek ke browser anda dan ketikkan di address bar seperti ini http://localhost/NAMA_FOLDER_ANDA/index.php. Jika tidak ada error maka akan terlihat seperti pada gambar dibawah ini.
Kemudian silahkan untuk mencoba masuk dengan email dan password seperti pada file login.php pada variabel $dbemail dan $dbpass. Anda juga dapat menggantinya dengan email dan password sesuai keinginan. Jika berhasil masuk maka akan dialihkan ke halaman admin.php seperti berikut.
Mungkin hanya demikian yang dapat saya sampaikan pada postingan kali ini. Nantikan terus update tutorial lainnya. Bagi yang ingin mendownload file lengkap tutorial ini silahkan download disini. Terima kasih.
Komentar
Posting Komentar