Assalammu'alaikum Wr, Wb.
pada kali ini saya akan memposting tutorial bagaimana cara membuat CRUD dengan Ajax dan juga Login. baik langsung saja, menuju langkah pertama yang harus dilakukan.
1. buka xampp dan juga Sublime Text. Untuk text Editornya terserah masing-masing.
2. pertama kita buat project baru, untuk nama Projectnya terserah atau bebas. setelah bikin project, kemudian bikin new file untuk login terlebih dahulu dan save file tersebut beri ekstensi.php, kemudian ketikkan script berikut.
<?php
session_start();
if (isset($_SESSION["Gagal"])) {
if ($_SESSION["Gagal"] >= 3) {
echo '<h3>Sudah Di Blokir</h3>';
exit();
}
}
?>
<!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">
<script>
/*
function hallo(){
var email = document.getElementById("inEmail").value;
alert("SELAMAT DATANG : "+email);
}
*/
</script>
</head>
<body>
<form id="frm01" name="frm01" method="post" action="index.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</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">Sign In !!!!</button>
<div>
<?php
if (isset($_SESSION["Gagal"])) {
$pesan = $_SESSION["Gagal"];
echo "<script>alert('Anda Sudah Gagal Sebanyak: '+$pesan)</script>";
}
?>
</div>
</form>
</body>
</html>
3. kemudian akses pada http://localhost/proweb0706bc/index1.php, untuk teman-taman sesuaikan dengan nama projeknya. dan hasilnya akan menjadi seperti berikut.
4. kemudian bikin file baru lagi untuk proses loginnya. Klik new file lalu berinama login.php. kemudian pastekan script dibawah ini.
<?php
session_start();
$user = $_POST["inEmail"];
$pass = $_POST["inPass"];
//=======================
$dbuser = "admin@gmail.com";
$dbpass = "admin23";
//=======================
if ($user == $dbuser && $pass == $dbpass){
echo "<script>alert('Login Berhasil')</script>";
if (isset($_SESSION["masuk"])) {
$_SESSION["masuk"]+ 1;
header("location:login.php");
}
} else {
if (isset($_SESSION["Gagal"])) {
$_SESSION["Gagal"] ++;
} else {
$_SESSION["Gagal"] = 1;
}
header("location:admin.php");
}
5. selanjutnya buat database terlebih dahulu, untuk menampung data yang akan dibuat. pertama akses ke localhost/phpmyadmin => New Database.
6. buat tabel users dengan isi id_user, username, fullname, password, email, telepon, baned, logintime, akses.
7. selanjutnya buat file untuk akses data basenya caranya Klik New Folder => config =>dbconfig.php dan pastekan script berikut di file dbconfig.php.
<?php
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '');
define('DB_NAME', 'proweb');
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;
exit();
}
}
}
?>
script diatas adalah untuk koneksi database.
8. masih dalam folder config buat file baru untuk dao.php, dan masukkan script seperti di bawah 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);
}
}
}
9. jika sudah selanjutnya pada projeknya dibikin file baru untuk menampilkan datanya. cara Klik New File pada folder projeknya, kemudian beri nama index.php, dan masukkan script seperti berikut.
<!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">
<!--link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"-->
<script>
function showModalKu() {
var idData = 'Test Data';
var dataString = 'id=' + idData;
//$(document).ready(function () {
//});
$.ajax({
type: "POST",
url: "cobaisiajax.php",
data: dataString,
cache: false,
success: function (data) {
//console.log(data);
//$('#dariajax').text(data);
$('#ModalKu').modal('show');
},
error: function(err) {
console.log(err);
}
});
}
</script>
<style>
/*
.modal-dialog {
width: 360px;
height:600px !important;
}
*/
.modal-content {
/* 80% of window height */
height: 60%;
background-color:#BBD6EC;
}
.modal-header {
background-color: #337AB7;
padding:16px 16px;
color:#FFF;
border-bottom:2px dashed #337AB7;
}
</style>
</head>
<body>
<?php
ini_set('display_errors', 'On');
error_reporting(E_ALL);
include_once 'config/dao.php';
$dao = new Dao();
$result = $dao->read();
//$list = mysqli_fetch_array($result);
//print_r($list);
?>
<div class="container mb-auto">
<div class="row">
<div class="col">
<button type="button" class="btn btn-success" onclick="showModalKu();">
<i class="fa fa-plus"></i> Add
</button>
</div>
<div class="input-group-prepend col">
<input class="form-control-sm py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<div class="input-group-text bg-transparent"><i class="fa fa-search"></i></div>
</span>
</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>
<?php
$i = 1;
foreach ($result as $value) {
?>
<tr>
<td><?php echo "$i"; ?></td>
<td><?php echo $value['id']; ?></td>
<td><?php echo $value['username']; ?></td>
<td><?php echo $value['fullname']; ?></td>
<td><?php echo $value['email']; ?></td>
<td><?php echo $value['telp']; ?></td>
<td><?php echo $value['baned']; ?></td>
<td><?php echo $value['logintime']; ?></td>
<td><?php echo $value['akses']; ?></td>
<td nowrap>
<button type="button" class="btn btn-primary btn-sm">
<i class="fa fa-list"></i> Detail
</button>
<button type="button" class="btn btn-success btn-sm">
<i class="fa fa-edit"></i> Edit
</button>
<button type="button" class="btn btn-danger btn-sm">
<i class="fa fa-trash"></i> Del
</button>
</td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
</div>
<!-- MODAL 01 -->
<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>
<div class="row">
<div class="col">
<div class="form-group">
<!--label for="recipient-name" class="form-control-label">Recipient:</label-->
<input type="text" class="form-control" id="recipient-name" placeholder="user name">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="form-control" id="recipient-name" placeholder="password">
</div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="recipient-name" placeholder="full name">
</div>
<div class="row">
<div class="col-7">
<div class="form-group">
<input type="email" class="form-control" id="recipient-name" placeholder="email">
</div>
</div>
<div class="col-5">
<div class="form-group">
<input type="number" class="form-control" id="recipient-name" 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="customRadio" 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="customRadio" 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" 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" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck2">Operator</label>
</div>
</div>
</div>
</div>
</form>
<!--p>disini isi dari modalnya</p-->
<!--p id="dariajax"></p-->
</div>
<div class="modal-footer">
<button 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 MODAL 01 -->
</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>
</body>
</html>
10. hasilnya akan menjadi seperti pada gambar dibawah ini.
11. selanjutnya kita bikin fle baru untuk proses Input dan Edit dan Hapusnya, pada folder projek Klik New File beri nama execute.php, kemudian masukkan script di bawah ini.
<?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['telepon'];
$baned = $_POST['baned'];
$akses = $_POST['akses'];
$aks = 0;
for ($index = 0; $index < count($akses); $index++) {
$aks = $aks + $_POST['akses'][$index];
}
//end for
$query = "INSERT INTO users (username,password,fullname,email,telepon,baned,akses) "
. "VALUE ('$username',PASSWORD('$password'),"
. "'$fullname','$email','$telp','$baned',$aks)";
}elseif ($proc == "usredt" && $usrid > 0) {
$query = "SELECT id,username,fullname,email,telepon,baned,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['telepon'];
$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['baned'] . "</td>
<td>" . $value['logintime'] . "</td>
<td>" . $value['akses'] . "</td>
<td nowrap>
<button type=\"button\" class=\"btn btn-primary btn-sm\">
<i class=\"fa fa-list\"></i> Detail
</button>
<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> Del
</button>
</td>
</tr>";
$i++;
}
$msg[1] = $userlist;
}
/* ================================================== */
echo json_encode($msg);
12. berikut adalah script untuk tampilan modal untuk insert data dan edit data.
<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>
<div class="row">
<div class="col">
<div class="form-group">
<!--label for="recipient-name" class="form-control-label">Recipient:</label-->
<input type="text" class="form-control" id="recipient-name" placeholder="user name">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="form-control" id="recipient-name" placeholder="password">
</div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="recipient-name" placeholder="full name">
</div>
<div class="row">
<div class="col-7">
<div class="form-group">
<input type="email" class="form-control" id="recipient-name" placeholder="email">
</div>
</div>
<div class="col-5">
<div class="form-group">
<input type="number" class="form-control" id="recipient-name" 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="customRadio" 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="customRadio" 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" 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" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck2">Operator</label>
</div>
</div>
</div>
</div>
</form>
<!--p>disini isi dari modalnya</p-->
<!--p id="dariajax"></p-->
</div>
<div class="modal-footer">
<button 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>
13. Berikut ini adalah script untuk membuat tampilan modal untuk hapus data.
<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>
14. kemudian ini scrpt untuk fungs insert data nya.
function insertUser() {
$.ajax({
type: "POST",
url: "execute.php",
data: $("#form-user").serialize(),
cache: false,
dataType: "json",
success: function (data) {
//console.log(data);
if(data[0]==0){
alert(data[1]);
}else{
$("#userlist").html(data[1]);
}
},
error: function (err) {
console.log(err);
}
});
}
15. selanjutnya adalah fungsi untuk hapus datanya.
function deleteUser() {
$.ajax({
type: "POST",
url: "execute.php",
data: $("#form-userdel").serialize(),
cache: false,
dataType: "json",
success: function (data) {
//console.log(data);
if(data[0]==0){
alert(data[1]);
}else{
$("#userlist").html(data[1]);
}
},
error: function (err) {
console.log(err);
}
});
}
16. ini adalah tampilan insert data.
17. ini adalah tampilan untuk hapus datanya.
18. jika sudah di hapus maka data arif kn akan hilang dari tabel. seperti pada gambar dibawah ini.
Komentar
Posting Komentar