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
di bagian kepala file index.php Anda:</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
Itulah tautan untuk memuat gaya dari file stylesheet. Mari buat file styles.css dan tambahkan kode gaya ini di dalamnya.</P> <pre><code>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;
}</code></pre> <p>
Sekarang mari kita periksa kembali formulir kita di browser:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463381.png" /></P> <p>
Itu lebih baik! </P> <p>
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.</P> <p>
Jadi buka php_code.php dan paste kode berikut di dalamnya:</P> <pre><code><?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');
}
// ...</code></pre> <p>
Sekarang sertakan file ini di bagian atas (baris pertama) file index.php Anda. Seperti ini:</P> <pre><code><?php include('server.php'); ?></code></pre> <p>
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.</P> <p>
Sekarang kunjungi lagi file index.php Anda dan tambahkan kode ini tepat di bawah tag <body>:</P> <pre><code>// ...
<body>
<?php if (isset($_SESSION['message'])): ?>
<div class="msg">
<?php
echo $_SESSION['message'];
unset($_SESSION['message']);
?>
</div>
<?php endif ?></code></pre> <p>
Kode ini menampilkan pesan konfirmasi untuk memberi tahu pengguna bahwa catatan baru telah dibuat dalam database. </P> <p>
Untuk mengambil catatan database dan menampilkannya di halaman, tambahkan kode ini tepat di atas formulir input:</P> <pre><code><?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>
// ...</code></pre> <p>
Mari buat rekor baru dan lihat apakah ini berhasil:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463338.png" /></P> <p>
..dan voila!! Ini bekerja dengan sempurna!</P> <p>
Sekarang kita beralih ke pengeditan. Di bagian atas file index.php Anda (segera setelah pernyataan include) tambahkan kode berikut:</P> <pre><code><?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'];
}
}
?></code></pre> <p>
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 <strong>nilai</strong> atribut bidang formulir.</P> <p>
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:</P> <pre><code>// 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; ?>"></code></pre> <p>
Ingat semua itu ada di input <form>.</P> <p>
Sekarang jika kita mengklik tombol edit pada catatan tertentu dari database, nilainya akan diisi dalam formulir dan kita akan dapat mengeditnya. Karena kita mengedit pada form yang sama seperti saat kita membuat, kita harus memberikan kondisi yang menentukan tombol yang sesuai untuk ditampilkan. Misalnya, saat mengedit, kami menampilkan tombol pembaruan pada formulir dan saat membuat, kami menampilkan tombol simpan. Kami melakukannya menggunakan <strong>pembaruan </strong> variabel yang boolean. Jika pembaruan benar, tombol perbarui ditampilkan dan jika salah, tombol simpan ditampilkan.</P> <p>
Ganti tombol simpan pada form seperti ini:</P> <p>
Ganti ..</P> <pre><code><button class="btn" type="submit" name="save" >Save</button></code></pre> <p>
dengan...</P> <pre><code><?php if ($update == true): ?>
<button class="btn" type="submit" name="update" style="background: #556B2F;" >update</button>
<?php else: ?>
<button class="btn" type="submit" name="save" >Save</button>
<?php endif ?></code></pre> <p>
Sekarang jika kita menjalankan ini di browser dan mengklik tombol edit, kita mendapatkan ini:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463388.png" /></P> <p>
Sekarang Anda dapat melihatnya adalah tombol pembaruan yang ditampilkan. Mari tambahkan kode yang akan dieksekusi saat tombol ini diklik.</P> <p>
Buka file php_code.php dan tambahkan kode ini pada tombol:</P> <pre><code>// ...
if (isset($_POST['update'])) {
$id = $_POST['id'];
$name = $_POST['name'];
$address = $_POST['address'];
mysqli_query($db, "UPDATE info SET name='$name', address='$address' WHERE id=$id");
$_SESSION['message'] = "Address updated!";
header('location: index.php');
}</code></pre> <p>
Sekarang ubah nilai dalam formulir dan klik tombol perbarui. </P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463390.png" /></P> <p>
Hebat!</P> <p>
Satu hal terakhir:menghapus catatan. Cukup tambahkan kode ini di akhir file php_code.php Anda dan Anda siap melakukannya:</P> <pre><code>if (isset($_GET['del'])) {
$id = $_GET['del'];
mysqli_query($db, "DELETE FROM info WHERE id=$id");
$_SESSION['message'] = "Address deleted!";
header('location: index.php');
}</code></pre> <p>
Jika Anda mengklik tombol hapus, itu akan menghapus catatan dari database dan menampilkan pesan seperti tindakan lainnya.</P> <p>
</P> <h3> </h3> <h2>Kesimpulan</h2> <p>
Ini membawa kita ke akhir tutorial ini. Saya harap itu membantu dan sepadan dengan waktu Anda. Saya sangat tersanjung dengan kesabaran Anda dalam mengikuti ini sampai akhir. Jika Anda menyukai tutorial ini, bagikan dengan teman Anda dengan mengklik salah satu ikon media sosial di bawah ini. Jangan lupa untuk memeriksa tutorial saya yang lain di situs ini. </P> <p>
Terima kasih</P> <br>
</section>
</article>
<p class="tughw45">
<i class="tywgtu13"></i>
</p>
<section id="turn-page" class="idflexcent">
<div class="page up idflexalign">
<i class="prev"></i>
<a class='LinkPrevArticle' href='http://id.sqldat.com/xvs/wul/1011019451.html' >Lengkapi sistem pendaftaran pengguna menggunakan PHP dan database MySQL </a>
</div>
<div class="page down idflexalign">
<a class='LinkNextArticle' href='http://id.sqldat.com/xvs/wul/1011019453.html' >Cara mengunggah dan mengunduh file PHP dan MySQL </a>
<i class="next"></i>
</div>
</section>
<span class="tyuowsp58">
<em class="eiwmvehm12"></em>
</span>
<div class="ad5">
<script language='javascript' src='http://www.sqldat.com/css/ad/8.js'></script>
</div>
</section>
</section>
<section class="bottom idcontawo sidflexbetween">
<section class="idtype_list right">
<ol>
<li><a class='childclass' href='http://id.sqldat.com/xvs/mke/' target="_self">Database</a></li> <li><a class='childclass' href='http://id.sqldat.com/xvs/wul/' target="_self">Mysql</a></li> <li><a class='childclass' href='http://id.sqldat.com/xvs/gee/' target="_self">Oracle</a></li> <li><a class='childclass' href='http://id.sqldat.com/xvs/qor/' target="_self">Sqlserver</a></li> <li><a class='childclass' href='http://id.sqldat.com/xvs/bzl/' target="_self">PostgreSQL</a></li> <li><a class='childclass' href='http://id.sqldat.com/xvs/fds/' target="_self">Access</a></li> <li><a class='childclass' href='http://id.sqldat.com/xvs/dae/' target="_self">SQLite</a></li> <li><a class='childclass' href='http://id.sqldat.com/xvs/zxb/' target="_self">MariaDB</a></li>
</ol>
</section>
<section class="left">
<ol class="idarticle_list">
<li class="idflexstart">
<i></i>
<a href="https://id.sqldat.com/xvs/wul/1011003182.html">
<p class="idtextover" title="PDO:Server MySQL telah hilang ">PDO:Server MySQL telah hilang </p>
</a>
</li>
<li class="idflexstart">
<i></i>
<a href="https://id.sqldat.com/xvs/wul/1011003429.html">
<p class="idtextover" title="MySQL - Bagaimana cara SUM kali? ">MySQL - Bagaimana cara SUM kali? </p>
</a>
</li>
<li class="idflexstart">
<i></i>
<a href="https://id.sqldat.com/xvs/wul/1011003450.html">
<p class="idtextover" title="Menetapkan nilai kolom sebagai nama kolom dalam hasil kueri SQL ">Menetapkan nilai kolom sebagai nama kolom dalam hasil kueri SQL </p>
</a>
</li>
<li class="idflexstart">
<i></i>
<a href="https://id.sqldat.com/xvs/wul/1011003669.html">
<p class="idtextover" title="Pemicu MySQL saya tidak berfungsi, sintaks sederhana, tidak rumit ">Pemicu MySQL saya tidak berfungsi, sintaks sederhana, tidak rumit </p>
</a>
</li>
<li class="idflexstart">
<i></i>
<a href="https://id.sqldat.com/xvs/wul/1011000129.html">
<p class="idtextover" title="Cara Memesan berdasarkan Nama Bulan di MySQL ">Cara Memesan berdasarkan Nama Bulan di MySQL </p>
</a>
</li>
</ol>
</section>
</section>
<section class="idlist1 article1_list idbottom2 sidflexbetween idcontawo">
<ul class="sidflexbetween">
<li>
<section class="idflexalign">
<div class="idibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051415100858_S.png' width='300' height='220' border='0'>
</div>
<a href="https://id.sqldat.com/xvs/mke/1011020321.html">
<p class="row idrow-3">
Waspadalah terhadap data yang menyesatkan dari SET STATISTICS IO </p>
</a>
</section>
</li>
</ul>
<ul class="sidflexbetween">
<li>
<section class="idflexalign">
<div class="idibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051011371064.png' width='300' height='220' border='0'>
</div>
<a href="https://id.sqldat.com/xvs/bzl/1011000356.html">
<p class="row idrow-3">
Cara membuat dan menghapus database dan tabel di PostgreSQL </p>
</a>
</section>
</li>
</ul>
<ul class="sidflexbetween">
<li>
<section class="idflexalign">
<div class="idibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051214493980_S.png' width='300' height='220' border='0'>
</div>
<a href="https://id.sqldat.com/xvs/bzl/1011017017.html">
<p class="row idrow-3">
Failover &Failback untuk PostgreSQL di Microsoft Azure </p>
</a>
</section>
</li>
</ul>
<ul class="sidflexbetween">
<li>
<section class="idflexalign">
<div class="idibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051017551930_S.jpg' width='300' height='220' border='0'>
</div>
<a href="https://id.sqldat.com/xvs/mke/1011001309.html">
<p class="row idrow-3">
Menyimpan File dalam Database SQL Menggunakan FILESTREAM – Bagian 2 </p>
</a>
</section>
</li>
</ul>
</section>
<footer>
<section class="idcontawo sidflexbetween idfooter_info idflexalign">
<a href="https://id.sqldat.com" class="idbottom_logo">
<img src="http://www.sqldat.com/css/img/logo.svg" alt="">
</a>
<span class="idflexstart">
© HAK CIPTA
<a href="https://id.sqldat.com">http://id.sqldat.com</a>
SELURUH HAK CIPTA
</span>
</section>
</footer>
<script language='javascript' src='http://www.sqldat.com/css/ad/c.js'></script>
</body>
</html>