1.Edit dan Delete
----------------------------------------------------------------------------------------------------
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit dan Delete</title>
</head>
<style>
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
font-size: 23px;
justify-content: center;
align-items: center;
text-align: center;
}
#customers td,
#customers th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
align-items: center;
}
#customers tr:nth-child(even) {
background-color: #f2f2f2;
}
#customers tr:hover {
background-color: #ddd;
}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: rgb(255, 170, 0);
color: white;
}
.div-heading {
border: 2px solid;
background: #212121;
border-radius: 10px;
}
.div-heading,
h1 {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.btn {
transition-duration: 0.4s;
border: 2px solid #008CBA;
background-color: white;
color: black;
padding: 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 10px;
}
.btn-edit {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.btn-edit:hover {
background-color: #008CBA;
color: white;
}
.btn-delete {
background-color: white;
color: black;
border: 2px solid #f44336;
}
.btn-delete:hover {
background-color: #f44336;
color: white;
}
.btn-halaman {
background-color: white;
color: black;
border: 2px solid #ffbb00;
}
.btn-halaman:hover {
background-color: #ffbb00;
color: white;
}
</style>
<body>
<div class="div-heading">
<center>
<h1>Table Data</h1>
</center>
</div>
<a class="btn btn-edit" href="index.php?page=data">Tampil Data</a>
<div style="height: 100%; width: 100%;">
<?php
if (isset($_GET['page'])) {
$page = $_GET['page'];
switch ($page) {
case 'data':
include "data.php";
break;
case 'edit':
include "edit.php";
break;
default:
echo "<h1 style='padding: 20%; color: red;'>😫 Maaf halaman yang anda tuju tidak ada</h1>";
break;
}
}
?>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------
koneksi.php
<?php
$host = "localhost";
$user = "root";
$password = "";
$dbname = "perpustakaan3";
$sambung=mysqli_connect($host,$user,$password,$dbname);
?>
----------------------------------------------------------------------------------------------------
data.php
<div style="overflow-x:auto; width: 100%;">
<!--awal table-->
<table id="customers">
<!--awal header table-->
<tr align="center">
<th>ID Siswa</th>
<th>Nama</th>
<!-- <th>NIS</th>
<th>Password</td> -->
<th>Tipe User</td>
<th>Aksi</th>
</tr>
<!--akhir header table-->
<?php
//koneksi ke database melalui koneksi.php
include "koneksi.php";
//menentukan banyak nya data yang akan ditampilkan dalam 1 halaman
$batas = 5;
$halaman = isset($_GET['halaman']) ? (int)$_GET['halaman'] : 1;
$mulai = ($halaman > 1) ? ($halaman * $batas) - $batas : 0;
//ambil data dari tabel tbl_buku
$ambildata1 = mysqli_query($sambung,"SELECT * FROM tb_user LIMIT $mulai, $batas");
$ambildata2 = mysqli_query($sambung,"SELECT * FROM tb_user");
$jumlahdata = mysqli_num_rows($ambildata2);
$jumlahhalaman = ceil($jumlahdata / $batas);
$nomor =$mulai+1;
while ($tampildata = mysqli_fetch_array($ambildata1)) {
?>
<!--awal menampilkan data dari tabel buku ke halaman web-->
<tr align="center">
<td> <?php echo $tampildata['id'] ?></td>
<td> <?php echo $tampildata['name'] ?></td>
<!-- <td> <?php echo $tampildata['email']?></td>
<td> <?php echo $tampildata['password']?></td> -->
<td> <?php echo $tampildata['user_type']?></td>
<td align="center">
<a class="btn btn-edit" href="index.php?page=edit&id=<?php echo $tampildata['id'];?>">
Edit
</a>
<!-- | -->
<a class="btn btn-delete" href="delete.php?id=<?php echo $tampildata['id'];?>" onclick="return confirm('Apa Anda yakin akan menghapus Data Akun?')">
Delete
</a>
</td>
</tr>
<!--akhir menampilkan data dari tabel buku ke halaman web-->
<?php
}
?>
</table>
<!--akhir table-->
</div>
<!--awal menentukan banyaknya halaman pagination-->
<?php
$ambildata2 = mysqli_query($sambung, "select * from tb_user");
$jumlahdata = mysqli_num_rows($ambildata2);
$jumlahhalaman = ceil($jumlahdata/$batas);
?>
<!--akhir menentukan banyaknya halaman pagination-->
<p>
<!--awal navigasi pagination-->
<div align="center">
<?php
for ($i=1; $i<=$jumlahhalaman; $i++)
{
?>
<a class="btn btn-halaman" href="index.php?page=data&halaman=<?php echo $i; ?>"><?php echo $i; ?></a>
<?php
}
?>
</div>
<!--akhir navigasi pagination-->
----------------------------------------------------------------------------------------------------
edit.php
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style inputs, select elements and textareas */
input[type=text], select, textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
font-size: 24px;
}
/* Style the label to display next to the inputs */
label {
padding: 12px 12px 12px 0;
display: inline-block;
font-size: 24px;
}
/* Style the submit button */
input[type=submit] {
background-color: white;
color: #212121;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
font-size: 24px;
}
/* Style the container */
.container {
border-radius: 5px;
background-color: #212121;
padding: 20px;
color: white;
}
/* Floating column for labels: 25% width */
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
/* Floating column for inputs: 75% width */
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
.wrapper{
display: inline-flex;
background: #fff;
height: 30px;
width: 100%;
align-items: center;
justify-content: space-evenly;
border-radius: 5px;
padding: 20px 15px;
margin-left: 100%;
box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
}
.wrapper .option{
background: #fff;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
margin: 0 10px;
border-radius: 5px;
cursor: pointer;
padding: 0 10px;
border: 2px solid lightgrey;
transition: all 0.3s ease;
}
.wrapper .option .dot{
height: 20px;
width: 20px;
background: #d9d9d9;
border-radius: 50%;
position: relative;
}
.wrapper .option .dot::before{
position: absolute;
content: "";
top: 4px;
left: 4px;
width: 12px;
height: 12px;
background: #0069d9;
border-radius: 50%;
opacity: 0;
transform: scale(1.5);
transition: all 0.3s ease;
}
input[type="radio"]{
display: none;
}
#option-1:checked:checked ~ .option-1,
#option-2:checked:checked ~ .option-2{
border-color: #0069d9;
background: #0069d9;
}
#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot{
background: #fff;
}
#option-1:checked:checked ~ .option-1 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before{
opacity: 1;
transform: scale(1);
}
.wrapper .option span{
font-size: 20px;
color: #808080;
}
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span{
color: #fff;
}
</style>
<?php
include "koneksi.php";
$idsiswa = $_GET['id'];
$ambildata = mysqli_query($sambung, "select * from tb_user where id='$idsiswa'");
while ($tampildata = mysqli_fetch_array($ambildata)) {
?>
<h1 style="color: #212121">
<center>📝 EDIT DATA 📝</center>
</h1>
<div class="container" style="margin-top: -5px;">
<form action="edit_aksi.php" method="post" name="formubah">
<div class="row">
<div class="col-25">
<label for="fname">ID Siswa</label>
</div>
<div class="col-75">
<input type="text" name="id" value="<?php echo $tampildata['id'] ?>" readonly>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Nama</label>
</div>
<div class="col-75">
<input type="text" name="name" value="<?php echo $tampildata['name'] ?>">
</div>
</div>
<div class="row">
<div class="col-25">
</div>
<div class="row" style="margin-top: 10px;">
<input class="btn btn-edit" type="submit" name="tombolubah" value="Edit" onclick="return confirm"('Apa Anda yakin akan mengubah data buku?')>
</div>
</form>
</div>
<?php
}
?>
----------------------------------------------------------------------------------------------------
edit_aksi.php
<?php
//koneksi dengan database
include 'koneksi.php';
//menangkap data yang dikirim dari form dengan methode post
$idsiswa =$_POST['id'];
$nama =$_POST['name'];
$nis =$_POST['email'];
$password =$_POST['password'];
$user =$_POST['user_type'];
//update data dari database
mysqli_query($sambung,"update tb_user set name='$nama',email='$nis', password='$password',user_type='$user' where id='$idsiswa'");
//mengalihkan ke halaman daftar buku
header("location:index.php?page=data");
?>
----------------------------------------------------------------------------------------------------
delete.php
<?php
//koneksikan dengan database
include "koneksi.php";
//ambil idsiswa yang akan dihapus sebagai referensi
$idsiswa=$_GET['id'];
//query untuk menghapus data siswa
mysqli_query($sambung,"delete from tb_user where id='$idsiswa'");
//arahkan ke halaman data siswa setelah menghapus 1 data siswa
header("location:index.php?page=data");
?>
----------------------------------------------------------------------------------------------------
Hasil :
----------------------------------------------------------------------------------------------------
2.Menggunakan Radio Button
----------------------------------------------------------------------------------------------------
edit.php
<?php
include "koneksi.php";
$idsiswa = $_GET['id'];
$ambildata = mysqli_query($sambung, "select * from tb_user where id='$idsiswa'");
while ($tampildata = mysqli_fetch_array($ambildata)) {
?>
<h1 style="color: #212121">
<center>📝 EDIT DATA 📝</center>
</h1>
<div class="container" style="margin-top: -5px;">
<form action="edit_aksi.php" method="post" name="formubah">
<div class="row">
<div class="col-25">
<label for="fname">ID Siswa</label>
</div>
<div class="col-75">
<input type="text" name="id" value="<?php echo $tampildata['id'] ?>" readonly>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Nama</label>
</div>
<div class="col-75">
<input type="text" name="name" value="<?php echo $tampildata['name'] ?>">
</div>
</div>
<div class="row">
<div class="col-75"></div>
<div class="wrapper">
<input type="radio" name="user_type" value="user" id="option-1" checked>
<input type="radio" name="user_type" value="admin" id="option-2">
<label for="option-1" class="option option-1">
<div class="dot"></div>
<span>User</span>
</label>
<label for="option-2" class="option option-2">
<div class="dot"></div>
<span>Admin</span>
</label>
</div>
<div class="row" style="margin-top: 10px;">
<input class="btn btn-edit" type="submit" name="tombolubah" value="Edit" onclick="return confirm"('Apa Anda yakin akan mengubah data buku?')>
</div>
</form>
</div>
<?php
}
?>
----------------------------------------------------------------------------------------------------
Hasil :
----------------------------------------------------------------------------------------------------
3. Menggunakan Combo Box----------------------------------------------------------------------------------------------------
edit.php
<?php
include "koneksi.php";
$idsiswa = $_GET['id'];
$ambildata = mysqli_query($sambung, "select * from tb_user where id='$idsiswa'");
while ($tampildata = mysqli_fetch_array($ambildata)) {
?>
<h1 style="color: #212121">
<center>📝 EDIT DATA 📝</center>
</h1>
<div class="container" style="margin-top: -5px;">
<form action="edit_aksi.php" method="post" name="formubah">
<div class="row">
<div class="col-25">
<label for="fname">ID Siswa</label>
</div>
<div class="col-75">
<input type="text" name="id" value="<?php echo $tampildata['id'] ?>" readonly>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Nama</label>
</div>
<div class="col-75">
<input type="text" name="name" value="<?php echo $tampildata['name'] ?>">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="tipe">Tipe User</label>
</div>
<div class="col-75">
<select name="user_type" id="tipe">
<option>Pilih Tipe User</option>
<option value="user">User</option>
<option value="admin">Admin</option>
</select>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<input class="btn btn-edit" type="submit" name="tombolubah" value="Edit" onclick="return confirm"('Apa Anda yakin akan mengubah data buku?')>
</div>
</form>
</div>
<?php
}
?>
----------------------------------------------------------------------------------------------------
Hasil :
----------------------------------------------------------------------------------------------------
4. Menggunakan Check Box----------------------------------------------------------------------------------------------------
data.php<div style="overflow-x:auto; width: 100%;">
<!--awal table-->
<table id="customers">
<!--awal header table-->
<tr align="center">
<th>ID Siswa</th>
<th>Nama</th>
<th>Hobi</td>
<th>Aksi</th>
</tr>
<!--akhir header table-->
<?php
//koneksi ke database melalui koneksi.php
include "koneksi.php";
//menentukan banyak nya data yang akan ditampilkan dalam 1 halaman
$batas = 5;
$halaman = isset($_GET['halaman']) ? (int)$_GET['halaman'] : 1;
$mulai = ($halaman > 1) ? ($halaman * $batas) - $batas : 0;
//ambil data dari tabel tbl_buku
$ambildata1 = mysqli_query($sambung,"SELECT * FROM tb_user LIMIT $mulai, $batas");
$ambildata2 = mysqli_query($sambung,"SELECT * FROM tb_user");
$jumlahdata = mysqli_num_rows($ambildata2);
$jumlahhalaman = ceil($jumlahdata / $batas);
$nomor =$mulai+1;
while ($tampildata = mysqli_fetch_array($ambildata1)) {
?>
<!--awal menampilkan data dari tabel buku ke halaman web-->
<tr align="center">
<td> <?php echo $tampildata['id'] ?></td>
<td> <?php echo $tampildata['nama'] ?></td>
<td> <?php echo $tampildata['user_type']?></td>
<td align="center">
<a class="btn btn-edit" href="index.php?page=edit&id=<?php echo $tampildata['id'];?>">
Edit
</a>
<!-- | -->
<a class="btn btn-delete" href="delete.php?id=<?php echo $tampildata['id'];?>" onclick="return confirm('Apa Anda yakin akan menghapus Data Akun?')">
Delete
</a>
</td>
</tr>
<!--akhir menampilkan data dari tabel buku ke halaman web-->
<?php
}
?>
</table>
<!--akhir table-->
</div>
<!--awal menentukan banyaknya halaman pagination-->
<?php
$ambildata2 = mysqli_query($sambung, "select * from tb_user");
$jumlahdata = mysqli_num_rows($ambildata2);
$jumlahhalaman = ceil($jumlahdata/$batas);
?>
<!--akhir menentukan banyaknya halaman pagination-->
<p>
<!--awal navigasi pagination-->
<div align="center">
<?php
for ($i=1; $i<=$jumlahhalaman; $i++)
{
?>
<a class="btn btn-halaman" href="index.php?page=data&halaman=
<?php echo $i; ?>"><?php echo $i; ?></a>
<?php
}
?>
</div>
<!--akhir navigasi pagination-->
----------------------------------------------------------------------------------------------------
SIGNAL.php
<?php
$koneksi = mysqli_connect("localhost","root", "", "edit-delete");
function hapus($data){
global $koneksi;
$id = $_GET['id'];
$sql = mysqli_query($koneksi, "DELETE FROM tb_user WHERE id = '$id'");
return mysqli_affected_rows($koneksi);
}
function edit($data){
global $koneksi;
$id = $_GET['id'];
$nama = $_POST['nama'];
$hobi = $_POST['user_type'];
$sql = "UPDATE tb_user SET nama = '$_POST[nama]',
user_type = '$_POST[user_type]' WHERE id ='$id'";
$query = mysqli_query($koneksi,$sql);
return mysqli_affected_rows($koneksi);
}
?>
----------------------------------------------------------------------------------------------------
edit.php
<?php
include "SIGNAL.php";
if(isset($_POST["submit"])) {
$id = $_POST['id'];
$hobi = implode(', ', $_POST['user_type']);
$sql = mysqli_query ($koneksi, "UPDATE tb_user SET user_type = '$hobi' WHERE id = '$id' ");
header ('location:index.php?page=data');
}
$id = $_GET['id'];
$query_tampil = mysqli_query ($koneksi, "SELECT * FROM tb_user WHERE id = '$id' ");
$edit = mysqli_fetch_array($query_tampil);
$checked = explode(', ', $edit['user_type']);
$query = mysqli_query($koneksi, "SELECT * FROM tb_user ORDER BY id DESC");
?>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style inputs, select elements and textareas */
input[type=text], select, textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
font-size: 24px;
}
/* Style the label to display next to the inputs */
label {
padding: 12px 12px 12px 0;
display: inline-block;
font-size: 24px;
}
/* Style the submit button */
input[type=submit] {
background-color: white;
color: #212121;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
font-size: 24px;
}
/* Style the container */
.container {
border-radius: 5px;
background-color: #212121;
padding: 20px;
color: white;
}
/* Floating column for labels: 25% width */
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
/* Floating column for inputs: 75% width */
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
.wrapper{
display: inline-flex;
background: #fff;
height: 30px;
width: 100%;
align-items: center;
justify-content: space-evenly;
border-radius: 5px;
padding: 20px 15px;
margin-left: 100%;
box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
}
.wrapper .option{
background: #fff;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
margin: 0 10px;
border-radius: 5px;
cursor: pointer;
padding: 0 10px;
border: 2px solid lightgrey;
transition: all 0.3s ease;
}
.wrapper .option .dot{
height: 20px;
width: 20px;
background: #d9d9d9;
border-radius: 50%;
position: relative;
}
.wrapper .option .dot::before{
position: absolute;
content: "";
top: 4px;
left: 4px;
width: 12px;
height: 12px;
background: #0069d9;
border-radius: 50%;
opacity: 0;
transform: scale(1.5);
transition: all 0.3s ease;
}
input[type="radio"]{
display: none;
}
#option-1:checked:checked ~ .option-1,
#option-2:checked:checked ~ .option-2{
border-color: #0069d9;
background: #0069d9;
}
#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot{
background: #fff;
}
#option-1:checked:checked ~ .option-1 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before{
opacity: 1;
transform: scale(1);
}
.wrapper .option span{
font-size: 20px;
color: #808080;
}
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span{
color: #fff;
}
</style>
<?php
include "koneksi.php";
$idsiswa = $_GET['id'];
$ambildata = mysqli_query($sambung, "select * from tb_user where id='$idsiswa'");
while ($tampildata = mysqli_fetch_array($ambildata)) {
?>
<h1 style="color: #212121">
<center>📝 EDIT DATA 📝</center>
</h1>
<div class="container" style="margin-top: -5px;">
<form method="post">
<div class="row">
<div class="col-25">
<label for="fname">ID Siswa</label>
</div>
<div class="col-75">
<input type="text" name="id" value="<?php echo $tampildata['id'] ?>" readonly>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Nama</label>
</div>
<div class="col-75">
<input type="text" name="nama" value="<?php echo $tampildata['nama'] ?>">
</div>
</div>
<input type="hidden" name="id" value="<?php echo $edit["id"]?>"/>
<div class="row">
<div class="col-25">
<label for="country">Hobi</label>
</div>
<div class="col-75">
<style>
.form-control {
font-family: system-ui, sans-serif;
font-size: 2rem;
font-weight: bold;
line-height: 1.1;
display: grid;
grid-template-columns: 1em auto;
gap: 0.5em;
}
</style>
<label class="form-control">
<input type="checkbox" name="user_type[]" value="Olahraga" <?php in_array ('Olahraga', $checked) ? print "checked" : ""; ?> />
Olahraga
</label>
<label class="form-control">
<input type="checkbox" name="user_type[]" value="Gamers" <?php in_array ('Gamers', $checked) ? print "checked" : ""; ?> />
Gamers
</label>
<label class="form-control">
<input type="checkbox" name="user_type[]" value="SLEBEW" <?php in_array ('SLEBEW', $checked) ? print "checked" : ""; ?> />
SLEBEW
</label>
</div>
<div class="row" style="margin-top: 10px;">
<input class="btn btn-edit" type="submit" name="submit" value="Edit" onclick="return confirm"('Apa Anda yakin akan mengubah data?')>
</div>
</form>
</div>
<?php
}
?>
----------------------------------------------------------------------------------------------------
HASIL :
----------------------------------------------------------------------------------------------------
Demikian dari saya terimakasih