Membuat aplikasi To-Do List menggunakan PHP adalah proyek yang bagus untuk belajar atau meningkatkan keterampilan pemrograman web Anda. Berikut adalah panduan langkah demi langkah untuk membuat aplikasi ini dari awal hingga akhir.
1. Persiapan Lingkungan
- Server lokal: Install XAMPP, WAMP, atau LAMP (Linux). PHP dan MySQL adalah keharusan.
- Editor kode: Gunakan Visual Studio Code, Sublime Text, atau editor lain yang nyaman.
- Struktur folder:
/todo-list
├── /css
├── /js
├── index.php
├── add.php
├── edit.php
├── delete.php
└── db.php2. Buat Basis Data
Buat database di MySQL dengan nama todo_list dan tabel bernama tasks:
CREATE DATABASE todo_list;
USE todo_list;
CREATE TABLE tasks (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(255) NOT NULL,
description TEXT,
status ENUM('pending', 'completed') DEFAULT 'pending',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);3. File Konfigurasi Database (db.php)
<?php
$host = 'localhost';
$user = 'root';
$password = '';
$dbname = 'todo_list';
try {
$conn = new PDO("mysql:host=$host;dbname=$dbname", $user, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
die("Connection failed: " . $e->getMessage());
}
?>4. Halaman Utama (index.php)
<?php
require 'db.php';
// Ambil semua tugas
$stmt = $conn->prepare("SELECT * FROM tasks ORDER BY created_at DESC");
$stmt->execute();
$tasks = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>To-Do List</h1>
<a href="add.php">Tambah Tugas</a>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>Judul</th>
<th>Deskripsi</th>
<th>Status</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php foreach ($tasks as $task): ?>
<tr>
<td><?= $task['id'] ?></td>
<td><?= htmlspecialchars($task['title']) ?></td>
<td><?= htmlspecialchars($task['description']) ?></td>
<td><?= $task['status'] ?></td>
<td>
<a href="edit.php?id=<?= $task['id'] ?>">Edit</a>
<a href="delete.php?id=<?= $task['id'] ?>" onclick="return confirm('Hapus tugas ini?')">Hapus</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</body>
</html>5. Tambah Tugas (add.php)
<?php
require 'db.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$title = $_POST['title'];
$description = $_POST['description'];
$stmt = $conn->prepare("INSERT INTO tasks (title, description) VALUES (:title, :description)");
$stmt->execute(['title' => $title, 'description' => $description]);
header("Location: index.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tambah Tugas</title>
</head>
<body>
<h1>Tambah Tugas</h1>
<form method="POST">
<label for="title">Judul:</label>
<input type="text" name="title" id="title" required>
<br>
<label for="description">Deskripsi:</label>
<textarea name="description" id="description"></textarea>
<br>
<button type="submit">Tambah</button>
</form>
</body>
</html>6. Edit Tugas (edit.php)
<?php
require 'db.php';
$id = $_GET['id'];
$stmt = $conn->prepare("SELECT * FROM tasks WHERE id = :id");
$stmt->execute(['id' => $id]);
$task = $stmt->fetch(PDO::FETCH_ASSOC);
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$title = $_POST['title'];
$description = $_POST['description'];
$status = $_POST['status'];
$stmt = $conn->prepare("UPDATE tasks SET title = :title, description = :description, status = :status WHERE id = :id");
$stmt->execute(['title' => $title, 'description' => $description, 'status' => $status, 'id' => $id]);
header("Location: index.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Edit Tugas</title>
</head>
<body>
<h1>Edit Tugas</h1>
<form method="POST">
<label for="title">Judul:</label>
<input type="text" name="title" id="title" value="<?= htmlspecialchars($task['title']) ?>" required>
<br>
<label for="description">Deskripsi:</label>
<textarea name="description" id="description"><?= htmlspecialchars($task['description']) ?></textarea>
<br>
<label for="status">Status:</label>
<select name="status" id="status">
<option value="pending" <?= $task['status'] === 'pending' ? 'selected' : '' ?>>Pending</option>
<option value="completed" <?= $task['status'] === 'completed' ? 'selected' : '' ?>>Completed</option>
</select>
<br>
<button type="submit">Simpan</button>
</form>
</body>
</html>7. Hapus Tugas (delete.php)
<?php
require 'db.php';
$id = $_GET['id'];
$stmt = $conn->prepare("DELETE FROM tasks WHERE id = :id");
$stmt->execute(['id' => $id]);
header("Location: index.php");
exit;
?>8. Tambahkan Gaya dengan CSS
Buat file css/styles.css untuk mempercantik tampilan aplikasi Anda.
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
}
h1 {
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table, th, td {
border: 1px solid #ccc;
}
th, td {
padding: 10px;
text-align: left;
}
a {
text-decoration: none;
color: blue;
}
a:hover {
text-decoration: underline;
}9. Uji Aplikasi
- Buka
http://localhost/todo-listdi browser Anda. - Tambahkan, edit, atau hapus tugas untuk memastikan semua fitur berjalan dengan baik.
Dengan langkah-langkah ini, Anda berhasil membuat aplikasi To-Do List sederhana menggunakan PHP dan MySQL!
Leave a Reply