Pada kesempatan kali ini, saya akan menunjukkan contoh web sederhana untuk CRUD (Create, Read, Update, Delete) yang diintegrasikan dengan Database MySQL menggunakan driver MySQLi yang sudah tertanam saat kalian menginstalasi php ataupun Xampp/Lampp/Mampp. Web yang akan kita buat memanfaatkan framework CSS "Bootstrap", Javascript "JQuery", dan "Datatable".
Langsung saja kita buat terlebih dahulu databasenya di phpmyadmin dengan menjalankan Apache Web Server dan MySQL database pada Xamm/Lampp/Mampp kalian yang sudah terinstall.
Buat database dengan nama sesuai keinginan kalian, lalu buatlah satu table bernama "users".
Kemudian atur kolom table "users" seperti diatas. kolom "id" menjadi Primary Key dengan Auto-Increment, kolom "username" dan "email" menjadi Unique Key.
Kemudian, akses ke direktori/folder (Windows) drivedisk:\path_ke_folder_xampp\xampp\htdocs (Linux) /opt/lampp/htdocs. Buat folder dengan nama sesuai keinginan kalian yang nantinya nama itu akan dipanggil saat kalian mengakses url untuk web ini (Contoh : localhost/nama_folder/index.php ). Lalu buat file connection.php yang nanti akan berisikan variable yang menghubungkan antara web dengan database. Isikan sebagai berikut:
<?php
$connection = new mysqli('localhost', 'root', '', 'webprog2_tugas1');
?>
Lalu kita buat file index.php sebagai penerima data dari database dan menyediakan tombol tambah user, edit, dan hapus. File ini akan menyediakan table yang memanfaatkan fitur dari "Datatable" sehingga kalian tidak perlu repot untuk membuat pagination untuk table-nya. Isikan file yang sudah dibuat seperti kode di bawah ini.
<!-- Retrieve Data Script -->
<?php
require_once 'connection.php';
$users = mysqli_query($connection, "SELECT * FROM users ORDER BY id");
?>
<!-- End of Retrieve Data Script -->
<!-- File Header -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<title>List User</title>
</head>
<body>
<!-- End of File Header -->
<!-- File Body -->
<div class="container">
<div class="row">
<div class="col-2 mt-4">
<a href="formuser.php" class="btn btn-primary">Tambah User</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 mt-3">
<table id="list_users" class="display" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Nama</th>
<th>Username</th>
<th>Password</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach($users as $usr => $data): ?>
<tr>
<td><?=$usr+1;?></td>
<td><?=$data['nama'];?></td>
<td><?=$data['username'];?></td>
<td><?=$data['password'];?></td>
<td><?=$data['email'];?></td>
<td>
<a href="<?="formuser.php?id=".$data['id'];?>"
class="btn btn-primary">Edit</a>
<a href="<?="delete.php?id=".$data['id'];?>"
onclick="return confirm('Yakin ingin menghapus user ini?');"
class="btn btn-danger">Hapus</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<!-- End of File Body -->
<!-- Script Dependencies Section -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">
</script>
<!-- End of Script Dependencies Section -->
<!-- Main Script Section -->
<script type="text/javascript">
$(document).ready(function() {
$('#list_users').DataTable({
columnDefs:[{
targets: [0], orderData: [0, 1]
}]
});
});
</script>
<!-- End of Main Script Section -->
</body>
</html>
Kemudian kita buat form untuk menambah data user atau mengubah data user. Form yang akan dibuat harus dapat memvalidasi input sehingga data yang masuk dalam database valid. Buat file formuser.php yang berisikan sebagai berikut.
<?php require_once 'connection.php'; ?>
<!-- File Header -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<title>List User</title>
</head>
<body>
<!-- End of File Header -->
<div class="container">
<div class="row">
<div class="col-10 mt-3">
<h2>FORM USER</h2>
<!-- Retireve User Logic -->
<!-- Logic to get user data -->
<?php
if (isset($_GET['id'])) {
$id = $_GET['id'];
$sql = $connection->query("SELECT * FROM users WHERE id={$_GET['id']}");
$datanya = $sql->fetch_assoc();
}
?>
<!-- End of Retrieve User Logic -->
<!-- PHP Form Script for Insert or Update -->
<?php
if (isset($_POST['save'])) {
$name = $_POST['nama'];
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
$query = "INSERT INTO users (nama, username, password, email)
VALUES('$name', '$username', '$password', '$email')";
// Update Logic
// will replace query string to this below
if (isset($_GET['id'])) {
$query = "UPDATE users SET nama='$name', username='$username',
password='$password', email='$email' WHERE id={$_GET['id']}";
}
// End of Update Logic
if ($connection->query($query) === TRUE) {
echo "<div class=\"alert alert-success\" role=\"alert\">Berhasil Disimpan! Kembali ke Daftar User dalam beberapa detik</div>";
echo "<script>var time = setTimeout(function()
{window.location = 'index.php'}, 3000);</script>";
} else {
echo "<div class=\"alert alert-danger\" role=\"alert\">Gagal Disimpan! Kembali ke Daftar User dalam beberapa detik</div>";
echo "<script>var time = setTimeout(function()
{window.location = 'index.php'}, 3000);</script>";
echo mysqli_errno($connection).' '.mysqli_error($connection);
}
}
?>
<!-- User Form -->
<form action="" method="post">
<div class="form-group">
<label for="nama">Nama</label>
<!-- <input type="hidden" name="id" id="id" value="<?=$id;?>"> -->
<input type="text" class="form-control" id="nama" name="nama" maxlength="40"
pattern="[a-zA-Z]+([\s][a-zA-Z]+)*" placeholder="Masukkan Nama Lengkap"
value="<?php if (isset($_GET['id'])) {
echo $datanya['nama'];
} ?>" required>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" name="username" maxlength="100"
id="username" placeholder="Masukkan Username" value="<?php if (isset($_GET['id'])) {
echo $datanya['username'];
} ?>" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" name="password"
id="password" value="<?php if (isset($_GET['id'])) {echo trim($datanya['password']);} ?>"
required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" name="email" maxlength="100"
id="email" placeholder="Masukkan Email" value="<?php if (isset($_GET['id'])) {
echo $datanya['email'];
} ?>" id="email">
<small id="email_validation_error"></small>
</div>
<input type="submit" id="saveButton"
name="save" value="Save" class="btn btn-success"></input>
<a href="index.php" class="ml-3 btn btn-primary">Kembali</a>
</form>
<!-- End of User Form -->
</div>
</div>
</div>
<!-- Script Dependencies Section -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</script>
<!-- End of Script Dependencies Section -->
<!-- Validation Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
// var alpha = /[ A-Za-z]/;
// var alphanumeric = /[ A-Za-z0-9]/;
// Name Validation
$("#nama").keypress(
function (e) {
var charTyped = String.fromCharCode(e.which);
var letterRegex = /[^0-9]/;
if (charTyped.match(letterRegex)) {
return true;
}
else {
return false;
}
});
// End of Name Validation
// Email Validation
$('#email').keyup(function() {
var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
if(!pattern.test($(this).val())) {
$('#email_validation_error').removeClass();
$('#saveButton').prop("disabled", true);
$('#email_validation_error').addClass('text-danger');
$('#email_validation_error').text('Email is not valid');
}else {
$('#email_validation_error').removeClass();
$('#saveButton').removeAttr("disabled");
$('#email_validation_error').addClass('text-success');
$('#email_validation_error').text('Email is valid');
}
});
// End of Email Validation
</script>
<!-- End of Validation Script -->
</body>
</html>
Setelah itu, kita buat file untuk menghapus data user dalam database. File ini hanya menangani penghapusan data yang kemudian akan mengarahkan ke halaman index.php lagi. Buat file delete.php dan isikan sebagai berikut.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<title>Hapus User</title>
</head>
<body>
<center>
<?php
require_once 'connection.php';
if (isset($_GET['id'])) {
$sql = "DELETE FROM users WHERE id={$_GET['id']}";
$connection->query($sql);
echo "<div class=\"alert alert-success\" role=\"alert\">Berhasil Dihapus! Kembali ke Daftar User dalam beberapa detik</div>";
echo "<script>var time = setTimeout(function()
{window.location = 'index.php'}, 3000);</script>";
} else {
echo "<script>var time = setTimeout(function()
{window.location = 'index.php'}, 1);</script>";
}
?>
</center>
</body>
</html>
Nah. Sekarang semua file yang dibutuhkan sudah siap untuk digunakan. Buka browser kesukaan kalian dan akses localhost/nama_folder_yang_sudah_dibuat/index.php. Jajaaaannnnggg.... Web sederhana kita sudah bisa digunakan.
Bila kalian menemukan error, pastikan untuk secara teliti membaca kode yang sudah disediakan, atau kalian bisa langsung copas saja. Kalian juga bisa mengecek komentar yang sudah tertera diantara baris-baris kode.
Berikut link source code untuk webnya
No comments:
Post a Comment