Membuat, mengedit, memperbarui, dan menghapus konten di situs web adalah hal yang membuat situs menjadi dinamis. Itulah yang akan kita lakukan dalam posting ini.
Seorang pengguna yang mengunjungi situs kami akan dapat membuat postingan yang akan disimpan di database mysql, mengambil postingan dari database dan menampilkannya di halaman web. Setiap kiriman akan ditampilkan dengan tombol edit dan hapus untuk mengizinkan pengguna memperbarui kiriman serta menghapusnya.
Pertama, buat database bernama crud. Di database mentah, buat tabel bernama info. Tabel info harus memiliki kolom berikut:
-
id - int(11)
- nama - varchar(100)
- alamat - varchar(100)
Menyalak! Hanya dua bidang. Saya mencoba untuk menjaga hal-hal sederhana di sini. jadi, mari kita lanjutkan ke langkah berikutnya.
Buat file bernama index.php dan paste di dalamnya kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>CRUD: CReate, Update, Delete PHP MySQL</title>
</head>
<body>
<form method="post" action="server.php" >
<div class="input-group">
<label>Name</label>
<input type="text" name="name" value="">
</div>
<div class="input-group">
<label>Address</label>
<input type="text" name="address" value="">
</div>
<div class="input-group">
<button class="btn" type="submit" name="save" >Save</button>
</div>
</form>
</body>
</html>
Jika Anda menyimpan dan membuka situs di browser Anda, Anda mendapatkan sesuatu seperti ini:
Tidak terlihat seperti bentuk terbaik di dunia kan? Mari kita perbaiki itu. Tambahkan baris ini tepat di bawah tag
<link rel="stylesheet" type="text/css" href="style.css">
Itulah tautan untuk memuat gaya dari file stylesheet. Mari buat file styles.css dan tambahkan kode gaya ini di dalamnya.
body {
font-size: 19px;
}
table{
width: 50%;
margin: 30px auto;
border-collapse: collapse;
text-align: left;
}
tr {
border-bottom: 1px solid #cbcbcb;
}
th, td{
border: none;
height: 30px;
padding: 2px;
}
tr:hover {
background: #F5F5F5;
}
form {
width: 45%;
margin: 50px auto;
text-align: left;
padding: 20px;
border: 1px solid #bbbbbb;
border-radius: 5px;
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btn {
padding: 10px;
font-size: 15px;
color: white;
background: #5F9EA0;
border: none;
border-radius: 5px;
}
.edit_btn {
text-decoration: none;
padding: 2px 5px;
background: #2E8B57;
color: white;
border-radius: 3px;
}
.del_btn {
text-decoration: none;
padding: 2px 5px;
color: white;
border-radius: 3px;
background: #800000;
}
.msg {
margin: 30px auto;
padding: 10px;
border-radius: 5px;
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
width: 50%;
text-align: center;
}
Sekarang mari kita periksa kembali formulir kita di browser:
Itu lebih baik!
Saya biasanya suka memisahkan kode HTML saya dari kode PHP saya sebanyak mungkin. Saya menganggap itu praktik yang baik. Pada catatan itu, mari buat file lain bernama php_code.php di mana kita mengimplementasikan semua fungsi php seperti menghubungkan ke database, query database dan sejenisnya.
Jadi buka php_code.php dan paste kode berikut di dalamnya:
<?php
session_start();
$db = mysqli_connect('localhost', 'root', '', 'crud');
// initialize variables
$name = "";
$address = "";
$id = 0;
$update = false;
if (isset($_POST['save'])) {
$name = $_POST['name'];
$address = $_POST['address'];
mysqli_query($db, "INSERT INTO info (name, address) VALUES ('$name', '$address')");
$_SESSION['message'] = "Address saved";
header('location: index.php');
}
// ...
Sekarang sertakan file ini di bagian atas (baris pertama) file index.php Anda. Seperti ini:
<?php include('server.php'); ?>
Pada titik ini, semua yang dilakukan kode ini adalah menyambungkan ke database, menginisialisasi beberapa variabel, dan menyimpan data yang dikirim dari formulir ke database di info yang kita buat sebelumnya. Itu hanya bagian CReate dari CRUD. Mari kita lanjutkan dengan yang lain.
Sekarang kunjungi lagi file index.php Anda dan tambahkan kode ini tepat di bawah tag
// ...
<body>
<?php if (isset($_SESSION['message'])): ?>
<div class="msg">
<?php
echo $_SESSION['message'];
unset($_SESSION['message']);
?>
</div>
<?php endif ?>
Kode ini menampilkan pesan konfirmasi untuk memberi tahu pengguna bahwa catatan baru telah dibuat dalam database.
Untuk mengambil catatan database dan menampilkannya di halaman, tambahkan kode ini tepat di atas formulir input:
<?php $results = mysqli_query($db, "SELECT * FROM info"); ?>
<table>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th colspan="2">Action</th>
</tr>
</thead>
<?php while ($row = mysqli_fetch_array($results)) { ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['address']; ?></td>
<td>
<a href="index.php?edit=<?php echo $row['id']; ?>" class="edit_btn" >Edit</a>
</td>
<td>
<a href="server.php?del=<?php echo $row['id']; ?>" class="del_btn">Delete</a>
</td>
</tr>
<?php } ?>
</table>
<form>
// ...
Mari buat rekor baru dan lihat apakah ini berhasil:
..dan voila!! Ini bekerja dengan sempurna!
Sekarang kita beralih ke pengeditan. Di bagian atas file index.php Anda (segera setelah pernyataan include) tambahkan kode berikut:
<?php
if (isset($_GET['edit'])) {
$id = $_GET['edit'];
$update = true;
$record = mysqli_query($db, "SELECT * FROM info WHERE id=$id");
if (count($record) == 1 ) {
$n = mysqli_fetch_array($record);
$name = $n['name'];
$address = $n['address'];
}
}
?>
Saat mengedit catatan database, kita perlu memasukkan nilai-nilai lama ke dalam formulir sehingga dapat dimodifikasi. Untuk melakukannya, mari ubah field input kita pada formulir dan atur nilai yang diambil dari database ($name, $address) sebagai nilai ke nilai atribut bidang formulir.
Juga tambahkan bidang tersembunyi untuk menampung id catatan yang akan kami perbarui sehingga dapat dikenali dalam database secara unik oleh id-nya. Ini menjelaskannya dengan lebih baik:
// newly added field
<input type="hidden" name="id" value="<?php echo $id; ?>">
// modified form fields
<input type="text" name="name" value="<?php echo $name; ?>">
<input type="text" name="address" value="<?php echo $address; ?>">
Ingat semua itu ada di input