To Do List App (CRUD Part 1)

#To Do List App

To do list aplikasi adalah aplikasi untuk mencatat apa yang ingin kita kerjakan. Apa yang ingin kita kerjakan tersebut memiliki jangka waktu dan harus selesai sebelum jangka waktu tersebut sampai.

Aplikasi to do list merupakan salah satu contoh aplikasi sitem informasi sederhana. Dalam membangun sistem informasi kemampuan untuk memanipulasi data harus dipahami. Manipulasi data tersebut adalah create, read, update, dan delete. berikut ini contoh aplikasi menampilkan data dari data base (read).

Gambar di atas memperlihatkan data hasil pembacaan dari data base. untuk itu perlu kita siapkan basis data untuk aplikasi di atas. Untuk mempersingkat tulisan ini, kami membagikan kode SQL dari aplikasi to do list di atas.

#Database

Database yang digunakan pada aplikasi ini bernama db_todo_list. anda cukup membuat database baru dengan nama tesebut. Kemudian mengimport kode SQL berikut.

//db_todo_list

-- phpMyAdmin SQL Dump

-- version 5.2.0

-- https://www.phpmyadmin.net/

-- Host: 127.0.0.1

-- Waktu pembuatan: 31 Jul 2022 pada 04.46

-- Versi server: 10.4.24-MariaDB

-- Versi PHP: 8.1.6

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_list`

-- --------------------------------------------------------

-- Struktur dari tabel `tbl_todo`

CREATE TABLE `tbl_todo` (

`id` int(11) NOT NULL,

`tugas` varchar(100) NOT NULL,

`jangka_waktu` date NOT NULL,

`keterangan` varchar(20) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Dumping data untuk tabel `tbl_todo`

INSERT INTO `tbl_todo` (`id`, `tugas`, `jangka_waktu`, `keterangan`) VALUES

(1, 'Laravel 9', '2022-08-31', 'Selesai');

-- Indexes for dumped tables

-- Indeks untuk tabel `tbl_todo`

ALTER TABLE `tbl_todo`

ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT untuk tabel yang dibuang

-- AUTO_INCREMENT untuk tabel `tbl_todo`

ALTER TABLE `tbl_todo`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

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 */;

#Struktur Folder

Untuk membuat aplikasi to do list , anda perlu mengikuti struktur folder berikut . buatlah folder di dalam htdocs bernama aplikasi. Di dalam folder aplikasi buat folder todo. Selanjutnya buat folder home dan todo di dalamnya. Di dalam folder home buat file home.php. Sedangkan di dalam folder todo buat file brnama todo .php. Sedangkan di dalam folder todo bagian luar buat file index.php dan config.php.

Setelah anda menyusun folder, isi file sesuai dengan source code di bawah ini.

#index.php

File ini merupakan file utama aplikasi to do list. Pada file ini akan menampilkan halaman utama yang terdiri dari dua halaman. yaitu halaman home dan todo.

//index.php

<!doctype html>

.teks-putih{

color: white !important;

}

</style>

<head>

<title>Aplikasi Todo List</title>

</head>

<body>

</button>

</li>

</li>

</ul>

<button class="btn btn-outline-succes teks-putihs" type="submit">Search</button>

</form>

</div>

</nav>

<?php

if ($_GET['halaman']=='home') {

include "home/home.php";

}

else if ($_GET['halaman']=='todo') {

include "todo/todo.php";

}

</div>

</body>

</html>

#config.php

File ini berfungsi mengkonfigurasi hubungan dengan database.

//config.php

<?php

$mysqli=mysqli_connect('localhost','root','','db_todo_list');

mysqli_select_db($mysqli,'db_todo_list') or die("database tidak ditemukan");

#todo.php

File ini akan diinclude ke dalam index.php jika menu yang dipilih adalah todo. Pada file ini diincludekan file konfig.php ke dalamnya. Kemudian perintah SQL dikirimkan melalui konfigurasi tersebut. Hasil dari SQl tersebut berupa data yang ditampung kedalam $hasil. Data tersebut berupa tabel yang harus dipecah menjadi array dengan perintah php yaitu mysqli_fetch_array. terakhir ditampikan menggunakan perulangan.

//todo.php

<?php

include "config.php";

$hasil= mysqli_query($mysqli,"select * from tbl_todo;");

<h2>Tabel Todo List</h2>

<tr>

<td>No</td><td>Tugas</td><td>Jangka Waktu</td><td>Keterangan</td><td>Aksi</td>

</tr>

<?php

$no=1;

while ($row= mysqli_fetch_array($hasil)) {

echo "<tr>

<td>$no</td><td>$row[tugas]</td><td>$row[jangka_waktu]</td><td>$row[keterangan]</td>

<td>

<a class='btn btn-danger fa fa-trash' href='edit_data_mahasiswa.php?nim=<?=$row['id']?>'

onclick='return confirm("are you sure?")'> Hapus</a>

</td>

<?php

echo

"</tr>";

$no++;

}

</table>

#home.php

File ini akan diincludekan ke dalam index.php jika pengguna memlih menu home.

//home.php

<p>Selamat Datang di Aplikasi Todo List. Catat Keinginan anda untuk dikerjakan dan buktikan hasilnya.</p>

#PENUTUP

Terima kasih sudah membaca artikel kami, lebih dan kuran kami mohon maaf. Sampai sini kita sudah mempelajari bagian dari CRUD yaitu menampilkan data dari database (read). Nantikan artikel kami berikutnya. jangan lupa dukung kami dengan subscribe, like and coment ya.

Search This Blog

Belajar Web Medan