To Do List CRUD PHP MySQL

Dipublikasikan oleh Muhammad Zen pada

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.

tbl_todolist
tbl_todolist
-- 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.

Struktur Folder

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">&copy;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.

halaman home

6. Tampilan Halaman To Do List

Halaman ini melakukan operasi Read. Artinya membaca data dari dalam database. Kemudian data tersebut ditampilkan kedalam aplikasi.

halaman todolist

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.

halaman tambah todolist

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.

halaman edit todolist

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.

halaman hapus todolis

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

Tinggalkan Balasan

Avatar placeholder

Alamat email Anda tidak akan dipublikasikan.