To Do List CRUD PHP MySQL
1. Pendahuluan
Create, Read, Update dan Delete adalah 4 operasi dasar untuk manipulasi database. CRUD wajib dipelajari jika ingin membuat aplikasi yang dinamis. Dengan CRUD tersebut bahasa pemrograman seperti PHP berinteraksi dengan database seperti MySQL. Sebagaimana kita ketahui data merupakan komponen yang penting bagi aplikasi. Data yang permanen hanya bisa disimpan dalam database. Bahasa pemrograman hanya bisa menyimpan data sementara dalam variabel. Pada kesempatan ini kita akan belajar membuat CRUD pada aplikasi To Do List CRUD PHP MySQL.
2. Desain Menu
Aplikasi to do list ini didesain memiliki 2 buah menu. yaitu menu home dan to do list. Menu home hanya menampilkan informasi singkat dan penting. Sedangkan menu to do list adalah menu untuk mencatat rencana tugas atau pekerjaan yang akan dilakukan. Pada menu to do list ini sebenarnya CRUD diterapkan.
3. Desain Database
Database yang dibuat bernama db_todo. Di dalam database tersebut terdapat sebuah tabel bernama tbl_todolist. Berikut ini tamplian tabel tersebut.
-- phpMyAdmin SQL Dump -- version 5.1.1 -- https://www.phpmyadmin.net/ -- -- Host: 127.0.0.1 -- Generation Time: Oct 22, 2021 at 09:08 AM -- Server version: 10.4.20-MariaDB -- PHP Version: 8.0.9 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `db_todo` -- -- -------------------------------------------------------- -- -- Table structure for table `tbl_todolist` -- CREATE TABLE `tbl_todolist` ( `id` int(11) NOT NULL, `tugas` varchar(100) NOT NULL, `tanggal_mulai` date NOT NULL, `tanggal_selesai` date NOT NULL, `status` varchar(15) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- -- Dumping data for table `tbl_todolist` -- INSERT INTO `tbl_todolist` (`id`, `tugas`, `tanggal_mulai`, `tanggal_selesai`, `status`) VALUES (6, 'Belajar HTML', '2021-10-22', '2021-11-22', 'Belum selesai'), (8, 'Belajar PHP', '2021-11-23', '2021-12-23', 'Belum selesai'); -- -- Indexes for dumped tables -- -- -- Indexes for table `tbl_todolist` -- ALTER TABLE `tbl_todolist` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tbl_todolist` -- ALTER TABLE `tbl_todolist` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
catatan : buat database db_todo, pergi ke menu SQL kemudian paste-kan dan klik Go.
4. Struktur Folder
Struktur folder adalah susunan folder dan sub folder maupun file di dalam sebuah project. Berikut ini struktur forlder aplikasi to do list yang akan dibuat.
4.1. File koneksi.php
<?php
$koneksi=mysqli_connect('localhost','root','','db_todo');
mysqli_select_db($koneksi,'db_todo') or die("database tidak ditemukan");
?>4.2. File index.php
<!-- index.php-->
<html>
<head>
<title>Web Pertamaku</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
<body class="h-100">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="https://belajarwebmedan.com">To-Do</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.php?halaman=home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?halaman=todolist">To Do List</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid h-100">
<div class="row d-flex justify-content-center">
<?php
if (!empty($_GET['halaman'])) {
if ($_GET['halaman']=='home') {
echo "<h3>Selamat datang, di To Do List App</h3>";
echo "<p>Gunakan aplikasi ini untuk menjadwalkan rencana jangka pendek, maupun jangka panjang anda. Kemudian lihat perubahan yang terjadi!</p>";
}
else if ($_GET['halaman']=='todolist') {
include "todolist/todolist.php";
}
else if ($_GET['halaman']=='tambah_todolist') {
include "todolist/tambah_todolist.php";
}
else if ($_GET['halaman']=='edit_todolist') {
include "todolist/edit_todolist.php";
}
else{
echo "Halaman Tidak Ditemukan";
}
}else{
echo "<h3>Selamat datang, di To Do List App</h3>";
echo "<p>Gunakan aplikasi ini untuk menjadwalkan rencana jangka pendek, maupun jangka panjang anda. Kemudian lihat perubahan yang terjadi!</p>";
}
?>
</div>
</div>
<div class="container-fluid">
<div class="row d-flex justify-content-center bg-dark text-light">
<div class="col-md-12">
<p class="text-center">©Belajar Web Medan 2021</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>4.3. File todolist.php
<div class="col-md-10">
<?php
if (isset($_GET['pesan']) and $_GET['pesan']=='hapus_berhasil') {
# code...
?>
<div class="alert alert-success alert-dismissible fade show mt-2" role="alert">
<strong>Pesan!</strong> Hapus Berhasil.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<?php
}
elseif (isset($_GET['pesan']) and $_GET['pesan']=='hapus_gagal'){
?>
<div class="alert alert-danger alert-dismissible fade show mt-2" role="alert">
<strong>Pesan!</strong> Hapus Gagal!. Tidak ada perubahan!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<?php
}
?>
<h5> To Do List</h5>
<a href="?halaman=tambah_todolist">
<button type="button" class="btn btn-primary">Tambah</button>
</a>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Tugas</th>
<th scope="col">Mulai</th>
<th scope="col">Selesai</th>
<th scope="col">Status</th>
<th scope="col">Aksi</th>
</tr>
</thead>
<tbody>
<?php
include "koneksi.php";
//hapus (delete)
if (isset($_GET['id'])) {
$id=$_GET['id'];
$sql= "DELETE FROM tbl_todolist WHERE id='$id'";
mysqli_query($koneksi,$sql);
if(mysqli_affected_rows($koneksi)>0){
header("location:?halaman=todolist&pesan=hapus_berhasil");
}else{
header("location:?halaman=todolist&pesan=hapus_gagal");
}
}
//baca (read)
$sql="SELECT * from tbl_todolist";
$tabel=mysqli_query($koneksi,$sql);
$no=0;
while ($baris=mysqli_fetch_array($tabel)) {
?>
<tr>
<th scope="row"><?php echo ++$no;?></th>
<td><?php echo $baris['tugas']; ?></td>
<td><?php echo $baris['tanggal_mulai']; ?></td>
<td><?php echo $baris['tanggal_selesai']; ?></td>
<td><?php echo $baris['status']; ?></td>
<td>
<a href="?halaman=edit_todolist&id=<?php echo $baris['id']?>">
<button class="btn btn-warning"><i class="fa fa-edit"></i></button>
</a>
<a onclick="return confirm('are you sure?');" href="?halaman=todolist&id=<?php echo $baris['id']?>">
<button class="btn btn-danger"><i class="fa fa-trash"></i></button>
</a>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>4.4. File tambah_todolist.php
<?php
if (isset($_POST["tambah"])) {
include "koneksi.php";
$tugas=$_POST['tugas'];
$tanggal_mulai=$_POST['tanggal_mulai'];
$tanggal_selesai=$_POST['tanggal_selesai'];
$status=$_POST['status'];
$sql="INSERT INTO tbl_todolist (tugas,tanggal_mulai,tanggal_selesai,status)
VALUES ('$tugas','$tanggal_mulai','$tanggal_selesai','$status')";
mysqli_query($koneksi,$sql);
if(mysqli_affected_rows($koneksi)>0){
header("location:?halaman=tambah_todolist&pesan=tambah_berhasil");
}else{
header("location:?halaman=tambah_todolist&pesan=tambah_gagal");
}
}
?>
<div class="col-md-5 card mt-2">
<?php
if (isset($_GET['pesan']) and $_GET['pesan']=='tambah_berhasil') {
# code...
?>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Pesan!</strong> Tambah Berhasil.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<?php
}
elseif (isset($_GET['pesan']) and $_GET['pesan']=='tambah_gagal'){
?>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<strong>Pesan!</strong> Tambah Gagal.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<?php
}
?>
<h5 align="center" class="mt-2"> Tambah To Do List</h5>
<form method="POST">
<div class="mb-3">
<label for="tugas" class="form-label">Tugas</label>
<input type="text" class="form-control" id="tugas" name="tugas">
</div>
<div class="mb-3">
<label for="tanggal_mulai" class="form-label">Mulai</label>
<input type="date" class="form-control" id="tanggal_mulai" name="tanggal_mulai">
</div>
<div class="mb-3">
<label for="tanggal_selesai" class="form-label">Selesai</label>
<input type="date" class="form-control" id="tanggal_selesai" name="tanggal_selesai">
</div>
<div class="mb-3">
<label for="status" class="form-label">Status</label>
<select class="form-select" id="status" name="status">
<option>Belum selesai</option>
<option>Selesai</option>
</select>
</div>
<button type="submit" class="btn btn-primary" name="tambah">Simpan</button>
<a href="?halaman=todolist">
<button type="button" class="btn btn-success">Kembali</button>
</a>
</form>
</div>4.5. File edit_todolist.php
<?php
include "koneksi.php";
if (isset($_POST["ubah"])) {
$tugas=$_POST['tugas'];
$tanggal_mulai=$_POST['tanggal_mulai'];
$tanggal_selesai=$_POST['tanggal_selesai'];
$status=$_POST['status'];
$id_todolist=$_POST['id_todolist'];
echo $sql="UPDATE tbl_todolist SET
tugas='$tugas',
tanggal_mulai='$tanggal_mulai',
tanggal_selesai='$tanggal_selesai',
status='$status'
WHERE id='$id_todolist'";
mysqli_query($koneksi,$sql);
if(mysqli_affected_rows($koneksi)>0){
header("location:?halaman=edit_todolist&pesan=edit_berhasil&id=$id_todolist");
}else{
header("location:?halaman=edit_todolist&pesan=edit_gagal&id=$id_todolist");
}
}
$id=$_GET['id'];
$sql="SELECT * FROM tbl_todolist WHERE id='$id'";
$hasil=mysqli_query($koneksi,$sql);
$baris=mysqli_fetch_array($hasil);
?>
<div class="col-md-5 card mt-2">
<?php
if (isset($_GET['pesan']) and $_GET['pesan']=='edit_berhasil') {
# code...
?>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Pesan!</strong> Edit Berhasil.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<?php
}
elseif (isset($_GET['pesan']) and $_GET['pesan']=='edit_gagal'){
?>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<strong>Pesan!</strong> Edit Gagal!. Tidak ada perubahan!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<?php
}
?>
<h5 align="center" class="mt-2"> Edit To Do List</h5>
<form method="POST">
<div class="mb-3">
<label for="tugas" class="form-label">Tugas</label>
<input type="hidden" name="id_todolist" value="<?php echo $baris['id'] ?>">
<input type="text" class="form-control" id="tugas" name="tugas" value="<?php echo $baris['tugas'] ?>">
</div>
<div class="mb-3">
<label for="tanggal_mulai" class="form-label">Mulai</label>
<input type="date" class="form-control" id="tanggal_mulai" name="tanggal_mulai" value="<?php echo $baris['tanggal_mulai'] ?>">
</div>
<div class="mb-3">
<label for="tanggal_selesai" class="form-label">Selesai</label>
<input type="date" class="form-control" id="tanggal_selesai" name="tanggal_selesai" value="<?php echo $baris['tanggal_selesai'] ?>">
</div>
<div class="mb-3">
<label for="status" class="form-label">Status</label>
<select class="form-select" id="status" name="status">
<option <?php echo $baris['status']=='Belum selesai'? "selected":""; ?>>Belum selesai</option>
<option <?php echo $baris['status']=='Selesai'? "selected":""; ?>>Selesai</option>
</select>
</div>
<button type="submit" class="btn btn-primary" name="ubah">Simpan</button>
<a href="?halaman=todolist">
<button type="button" class="btn btn-success">Kembali</button>
</a>
</form>
</div>5. Tampilan Halaman Home
Pada halaman ini tidak dilakukan operasi CRUD. Halaman ini hanya menampilkan informasi statis. Artinya tulisan hanya bisa diubah melalui koding.
6. Tampilan Halaman To Do List
Halaman ini melakukan operasi Read. Artinya membaca data dari dalam database. Kemudian data tersebut ditampilkan kedalam aplikasi.
7. Tampilan Halaman Tambah To Do List
Halaman ini melakukan operasi Create. Artinya membuat atau menambah data baru ke dalam database. Kemudian menampilkan respon berhasil atau gagal.
8. Tampilan Halaman Edit To Do List
Halaman ini melakukan operasi Update. Artinya mengubah data/record/baris yang ada pada database. Kemudian menampilkan respon berhasil atau gagal.
9. Tampilan Halaman HapusTo Do List
Halaman ini melakukan operasi Delete. Artinya menghapus data/record/baris terpilih dari database database. Kemudian menampilkan respon berhasil atau gagal.
10. Kesimpulan
Dari hasil percobaan pembuatan aplikasi to do list di atas dapat ditarik beberapa kesimpulan.
- Manipulasi data melalui operasi CRUD berhasil dilakukan aplikasi.
- Komunikasi php dan mysql terjadi melalui perintah SQL.
- Fungsi mysqli membantu proses komunikasi php dengan mysql.
10.1. Kekurangan
Beberapa kekurangan aplikasi di atas yang kami ketahui adalah sebagai berikut:
- Belum ada validasi input, baik input dari formulir maupun variabel GET yang dapat menjadi celah keamanan.
11. Video
Untuk penjelasan kode di atas, silahkan tonton video berikut:
0 Komentar