Aplikasi daftar tugas sederhana yang mengambil tugas yang dikirimkan oleh pengguna dalam formulir dan menyimpannya di database MySQL. Tugas juga diambil dari database dan ditampilkan di halaman web dengan tombol hapus di samping setiap tugas. Saat tombol hapus diklik, tugas dihapus dari database.
Itulah yang akan kita buat dalam tutorial ini.
Seperti biasa, mari kita buat database kita. Buat database bernama harus dan di dalamnya, buat tabel bernama tugas. Tabel tugas hanya memiliki dua bidang yaitu:
- id - int(10)
- tugas - varchar(255)
Sekarang buat dua file:
Buka di editor teks dan rekatkan kode berikut di dalam file index.php:
<!DOCTYPE html>
<html>
<head>
<title>ToDo List Application PHP and MySQL</title>
</head>
<body>
<div class="heading">
<h2 style="font-style: 'Hervetica';">ToDo List Application PHP and MySQL database</h2>
</div>
<form method="post" action="index.php" class="input_form">
<input type="text" name="task" class="task_input">
<button type="submit" name="submit" id="add_btn" class="add_btn">Add Task</button>
</form>
</body>
</html>
Jika Anda melihat halaman Anda sekarang di browser, tampilannya seperti ini:
Mari tambahkan gaya. Langsung di bawah tag
, tambahkan baris ini untuk memuat file stylesheet:</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
Buka file style.css yang telah kita buat sebelumnya dan paste kode styling ini di dalamnya:</P> <pre><code>.heading{
width: 50%;
margin: 30px auto;
text-align: center;
color: #6B8E23;
background: #FFF8DC;
border: 2px solid #6B8E23;
border-radius: 20px;
}
form {
width: 50%;
margin: 30px auto;
border-radius: 5px;
padding: 10px;
background: #FFF8DC;
border: 1px solid #6B8E23;
}
form p {
color: red;
margin: 0px;
}
.task_input {
width: 75%;
height: 15px;
padding: 10px;
border: 2px solid #6B8E23;
}
.add_btn {
height: 39px;
background: #FFF8DC;
color: #6B8E23;
border: 2px solid #6B8E23;
border-radius: 5px;
padding: 5px 20px;
}
table {
width: 50%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
border-bottom: 1px solid #cbcbcb;
}
th {
font-size: 19px;
color: #6B8E23;
}
th, td{
border: none;
height: 30px;
padding: 2px;
}
tr:hover {
background: #E9E9E9;
}
.task {
text-align: left;
}
.delete{
text-align: center;
}
.delete a{
color: white;
background: #a52a2a;
padding: 1px 6px;
border-radius: 3px;
text-decoration: none;
}
</code></pre> <p>
</P> <p>
</P> <p>
</P> <p>
Jika kita me-refresh browser kita sekarang, kita mendapatkan ini:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483918.png" /></P> <p>
Sekarang kita menulis kode untuk menyimpan tugas yang dikirimkan ke database. </P> <p>
Di bagian paling atas file index.php, sebelum baris pertama, tambahkan kode ini:</P> <pre><code><?php
// initialize errors variable
$errors = "";
// connect to database
$db = mysqli_connect("localhost", "root", "", "todo");
// insert a quote if submit button is clicked
if (isset($_POST['submit'])) {
if (empty($_POST['task'])) {
$errors = "You must fill in the task";
}else{
$task = $_POST['task'];
$sql = "INSERT INTO tasks (task) VALUES ('$task')";
mysqli_query($db, $sql);
header('location: index.php');
}
}
// ...</code></pre> <p>
Apa yang dilakukan adalah, jika pengguna mengklik tombol kirim, tugas disimpan dalam database. Namun jika tidak ada tugas yang diisi dalam formulir, nilai variabel $errors disetel ke <em>'Anda harus mengisi tugas'. </em> Tapi itu tidak ditampilkan. Mari kita tampilkan.</P> <p>
Mari kita tempel kode ini di dalam formulir. Langsung di bawah tag <form>. Seperti ini:</P> <pre><code><?php if (isset($errors)) { ?>
<p><?php echo $errors; ?></p>
<?php } ?></code></pre> <p>
Jika kami mencoba mengirimkan formulir dengan nilai kosong, kami mendapatkan ini:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483917.png" /></P> <p>
Sejauh ini aplikasi kami menyimpan tugas dalam database tetapi tidak menampilkannya.</P> <p>
Yang perlu kita lakukan adalah mengambilnya dari database dan kemudian menampilkannya. </P> <p>
Buka file index.php dan paste kode ini segera setelah tag penutup </form> form:</P> <pre><code>//...
// </form>
<table>
<thead>
<tr>
<th>N</th>
<th>Tasks</th>
<th style="width: 60px;">Action</th>
</tr>
</thead>
<tbody>
<?php
// select all tasks if page is visited or refreshed
$tasks = mysqli_query($db, "SELECT * FROM tasks");
$i = 1; while ($row = mysqli_fetch_array($tasks)) { ?>
<tr>
<td> <?php echo $i; ?> </td>
<td class="task"> <?php echo $row['task']; ?> </td>
<td class="delete">
<a href="index.php?del_task=<?php echo $row['id'] ?>">x</a>
</td>
</tr>
<?php $i++; } ?>
</tbody>
</table></code></pre> <p>
Jika kita memasukkan tugas dalam formulir dan menekan tombol kirim, kita mendapatkan ini:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483938.png" /></P> <p>
Bagus! </P> <p>
Mari kita buat tombol hapus kita berfungsi. Di bagian atas halaman, setelah blok if yang menyimpan tugas di database, tambahkan kode ini:</P> <pre><code>
// delete task
if (isset($_GET['del_task'])) {
$id = $_GET['del_task'];
mysqli_query($db, "DELETE FROM tasks WHERE id=".$id);
header('location: index.php');
}
?></code></pre> <p>
Itu saja. Jika kita mengklik tombol 'x' kecil sekarang terhadap tugas, tugas itu akan dihapus dalam database.</P> <h3>Kesimpulan</h3> <p>
Semoga ini membantu Anda. Salah satu fitur yang saya sarankan Anda tambahkan di aplikasi ini hanya untuk melatih keterampilan Anda lebih lanjut adalah dengan menambahkan fitur edit di mana postingan dapat diperbarui bahkan setelah dibuat. Petunjuk:Ikuti tutorial saya di CRUD: Membuat, mengedit, memperbarui, dan menghapus postingan dengan database MySQL</P> <p>
Terima kasih :D</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/1011019458.html' >Manajemen akun pengguna, peran, izin, otentikasi PHP dan MySQL </a>
</div>
<div class="page down idflexalign">
<a class='LinkNextArticle' href='http://id.sqldat.com/xvs/wul/1011019460.html' >Cara membuat blog di PHP dan database MySQL - Backend </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/1011003443.html">
<p class="idtextover" title="Lewati parameter ke baris perintah skrip MySQL ">Lewati parameter ke baris perintah skrip MySQL </p>
</a>
</li>
<li class="idflexstart">
<i></i>
<a href="https://id.sqldat.com/xvs/wul/1011000186.html">
<p class="idtextover" title="Perintah SQL untuk Mendaftar &Menampilkan Semua Database di MySQL &MariaDB ">Perintah SQL untuk Mendaftar &Menampilkan Semua Database di MySQL &MariaDB </p>
</a>
</li>
<li class="idflexstart">
<i></i>
<a href="https://id.sqldat.com/xvs/wul/1011000388.html">
<p class="idtextover" title="Membuat dan Menggunakan Prosedur Tersimpan MySQL - Tutorial ">Membuat dan Menggunakan Prosedur Tersimpan MySQL - Tutorial </p>
</a>
</li>
<li class="idflexstart">
<i></i>
<a href="https://id.sqldat.com/xvs/wul/1011003369.html">
<p class="idtextover" title="Python 3.4.0 dengan database MySQL ">Python 3.4.0 dengan database MySQL </p>
</a>
</li>
<li class="idflexstart">
<i></i>
<a href="https://id.sqldat.com/xvs/wul/1011002881.html">
<p class="idtextover" title="Permintaan lambat saat menggunakan ORDER BY ">Permintaan lambat saat menggunakan ORDER BY </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/2022051210401029_S.png' width='300' height='220' border='0'>
</div>
<a href="https://id.sqldat.com/xvs/mke/1011016111.html">
<p class="row idrow-3">
Pengantar Penskalaan Otomatis Amazon Web Services (AWS) </p>
</a>
</section>
</li>
</ul>
<ul class="sidflexbetween">
<li>
<section class="idflexalign">
<div class="idibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051016021991_S.png' width='300' height='220' border='0'>
</div>
<a href="https://id.sqldat.com/xvs/gee/1011000818.html">
<p class="row idrow-3">
Bagaimana mengatasi ORA-29283 :operasi file tidak valid </p>
</a>
</section>
</li>
</ul>
<ul class="sidflexbetween">
<li>
<section class="idflexalign">
<div class="idibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051214463278_S.jpg' width='300' height='220' border='0'>
</div>
<a href="https://id.sqldat.com/xvs/bzl/1011016964.html">
<p class="row idrow-3">
Cara Meminimalkan RPO untuk Database PostgreSQL Anda Menggunakan Point in Time Recovery </p>
</a>
</section>
</li>
</ul>
<ul class="sidflexbetween">
<li>
<section class="idflexalign">
<div class="idibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051214552663_S.png' width='300' height='220' border='0'>
</div>
<a href="https://id.sqldat.com/xvs/bzl/1011017082.html">
<p class="row idrow-3">
Amazon RDS untuk Alternatif PostgreSQL - ClusterControl untuk PostgreSQL </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>