Membangun Aplikasi ToDo List dengan PHP dan HTML
Aplikasi ToDo List adalah proyek sederhana yang membantu pengguna untuk mencatat, mengelola, dan menyelesaikan tugas-tugas mereka. Dalam artikel ini, kita akan membahas cara membangun aplikasi ToDo List menggunakan PHP dan HTML.
1. Persiapan Proyek
1.1. Struktur Direktori
Pastikan proyek Anda memiliki struktur direktori yang terorganisir:
todo-app/
|-- index.php
|-- tasks.php
|-- styles.css
|-- config.php
|-- db.php1.2. Database
Buatlah database untuk menyimpan informasi tugas-tugas. Berikut adalah contoh struktur tabel:
CREATE TABLE tasks (
id INT PRIMARY KEY AUTO_INCREMENT,
description TEXT,
completed BOOLEAN DEFAULT 0
);2. HTML untuk Antarmuka Pengguna
Buatlah file index.php sebagai halaman utama yang menampilkan tugas-tugas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDo List App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>ToDo List</h1>
<form action="tasks.php" method="POST">
<input type="text" name="task" placeholder="Tambahkan tugas baru" required>
<button type="submit">Tambahkan</button>
</form>
<ul>
<?php include 'tasks.php'; ?>
</ul>
</div>
</body>
</html>3. PHP untuk Menangani Tugas
Buatlah file tasks.php untuk menangani penambahan dan penghapusan tugas.
<?php
include 'config.php';
// Menampilkan tugas-tugas dari database
$result = $conn->query("SELECT * FROM tasks ORDER BY id DESC");
// Menangani penambahan tugas baru
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$task = $_POST['task'];
$conn->query("INSERT INTO tasks (description) VALUES ('$task')");
header('Location: index.php');
exit;
}
?>
<?php while ($row = $result->fetch_assoc()): ?>
<li>
<form action="tasks.php" method="POST">
<input type="hidden" name="id" value="<?= $row['id'] ?>">
<span class="<?= $row['completed'] ? 'completed' : '' ?>"><?= $row['description'] ?></span>
<button type="submit" name="delete">Hapus</button>
<button type="submit" name="complete"><?= $row['completed'] ? 'Batal Selesai' : 'Selesai' ?></button>
</form>
</li>
<?php endwhile; ?>
<?php
// Menangani penghapusan dan penyelesaian tugas
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$id = $_POST['id'];
if (isset($_POST['delete'])) {
$conn->query("DELETE FROM tasks WHERE id = $id");
} elseif (isset($_POST['complete'])) {
$conn->query("UPDATE tasks SET completed = NOT completed WHERE id = $id");
}
header('Location: index.php');
exit;
}
?>4. CSS untuk Desain
Buatlah file styles.css untuk memberikan desain yang menarik pada aplikasi.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 50px auto;
text-align: center;
}
h1 {
color: #333;
}
form {
margin-bottom: 20px;
}
ul {
list-style: none;
padding: 0;
}
li {
background-color: #fff;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}
.completed {
text-decoration: line-through;
color: #888;
}
button {
background-color: #4caf50;
color: #fff;
border: none;
padding: 8px;
cursor: pointer;
margin-left: 5px;
}5. Menjalankan Aplikasi
Pastikan Anda menjalankan aplikasi ini di server web. Buka browser dan akses http://localhost/path/to/index.php untuk melihat aplikasi ToDo List Anda.
Kesimpulan
Dengan mengikuti langkah-langkah di atas, Anda dapat membuat aplikasi ToDo List sederhana menggunakan PHP dan HTML. Aplikasi ini memungkinkan pengguna untuk menambahkan, menyelesaikan, dan menghapus tugas-tugas mereka. Sesuaikan desain dan tata letak sesuai dengan kebutuhan proyek atau preferensi desain Anda.
