Managing tasks efficiently is crucial for productivity, and having a simple to-do list can help keep things organized. In this article, we will discuss the concept of creating a lightweight to-do list application using PHP and SQLite, a self-contained, serverless database engine.
Why Use SQLite?
SQLite is a powerful yet lightweight database management system. Unlike MySQL or PostgreSQL, SQLite does not require a separate server to operate. Instead, it stores all data in a single file, making it an excellent choice for small-scale applications, testing, and embedded systems.
Advantages of SQLite:
- Simplicity: No need to install and configure a separate database server.
- Lightweight: Stores data in a single file, making it highly portable.
- Self-contained: Suitable for applications that do not require a client-server architecture.
- Fast and Reliable: Performs efficiently for smaller applications.
Follow this video for complete guidance :
To Do List with PHP and SQLite – Source Code
<?php
$db = new SQLite3('todo.db');
$query = "CREATE TABLE IF NOT EXISTS tasks (
id INTEGER PRIMARY KEY AUTOINCREMENT,
task TEXT NOT NULL,
completed INTEGER DEFAULT 0
)";
$db->query($query);
// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_POST['add_task'])) {
$task = $_POST['task'];
$stmt = $db->prepare('INSERT INTO tasks (task) VALUES (:task)');
$stmt->bindValue(':task', $task, SQLITE3_TEXT);
$stmt->execute();
} elseif (isset($_POST['delete_task'])) {
$id = $_POST['id'];
$stmt = $db->prepare('DELETE FROM tasks WHERE id = :id');
$stmt->bindValue(':id', $id, SQLITE3_INTEGER);
$stmt->execute();
} elseif (isset($_POST['toggle_task'])) {
$id = $_POST['id'];
$stmt = $db->prepare('UPDATE tasks SET completed = 1 - completed WHERE id = :id');
$stmt->bindValue(':id', $id, SQLITE3_INTEGER);
$stmt->execute();
} elseif (isset($_POST['clear_all'])) {
$db->query('DELETE FROM tasks');
}
header('Location: index.php');
}
// Fetch all tasks
$result = $db->query('SELECT * FROM tasks ORDER BY id DESC');
$tasks = [];
while ($row = $result->fetchArray(SQLITE3_ASSOC)) {
$tasks[] = $row;
}
?>
<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
body {
background: linear-gradient(135deg, #667eea, #764ba2);
font-family: 'Poppins', sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #333;
}
.container {
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
max-width: 600px;
width: 100%;
}
h1 {
font-size: 2.5rem;
font-weight: 700;
color: #333;
text-align: center;
margin-bottom: 20px;
}
.form-control {
border-radius: 10px;
border: 2px solid #ddd;
padding: 10px 15px;
font-size: 1rem;
}
.form-control:focus {
border-color: #667eea;
box-shadow: none;
}
.btn-primary {
background: #667eea;
border: none;
border-radius: 10px;
padding: 10px 20px;
font-size: 1rem;
transition: background 0.3s ease;
}
.btn-primary:hover {
background: #764ba2;
}
.task-list {
margin-top: 20px;
height: 400px;
overflow: auto ;
}
.task-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border: 2px solid #ddd;
border-radius: 10px;
margin-bottom: 10px;
background: #fff;
transition: all 0.3s ease;
}
.task-item:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.task-text {
margin: 0;
flex-grow: 1;
margin-left: 10px;
font-size: 1.1rem;
}
.task-text.completed {
text-decoration: line-through;
color: #888;
}
.task-actions {
display: flex;
gap: 10px;
}
.btn-action {
background: none;
border: none;
cursor: pointer;
padding: 5px;
transition: color 0.3s ease;
}
.btn-action:hover {
color: #667eea;
}
.btn-clear {
width: 100%;
margin-top: 20px;
background: #ff4d4d;
border: none;
border-radius: 10px;
padding: 10px 20px;
font-size: 1rem;
color: #fff;
transition: background 0.3s ease;
}
.btn-clear:hover {
background: #ff1a1a;
}
.badge {
font-size: 12px;
padding: 5px 10px;
}
.empty-state {
text-align: center;
color: #888;
font-size: 1.2rem;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<form method="POST" action="" class="d-flex mb-4">
<input type="text" name="task" class="form-control me-2" placeholder="Add a new task" required>
<button type="submit" name="add_task" class="btn btn-primary">Add</button>
</form>
<div class="task-list">
<?php if (empty($tasks)){ ?>
<div class="empty-state">No tasks found. Add a new task!</div>
<?php }else{ ?>
<?php foreach ($tasks as $task){ ?>
<div class="task-item">
<form method="POST" action="" class="d-flex align-items-center" style="flex-grow: 1;">
<input type="hidden" name="id" value="<?php echo $task['id']; ?>">
<button type="submit" name="toggle_task" class="btn-action">
<i class="fas <?php echo $task['completed'] ? 'fa-check-circle text-success' : 'fa-circle'; ?>"></i>
</button>
<p class="task-text <?php echo $task['completed'] ? 'completed' : ''; ?>">
<?php echo htmlspecialchars($task['task']); ?>
</p>
</form>
<div class="task-actions">
<form method="POST" action="">
<input type="hidden" name="id" value="<?php echo $task['id']; ?>">
<button type="submit" name="delete_task" class="btn-action text-danger">
<i class="fas fa-trash"></i>
</button>
</form>
</div>
</div>
<?php } ?>
<form method="POST" action="">
<button type="submit" name="clear_all" class="btn btn-clear">Clear All Tasks</button>
</form>
<?php } ?>
</div>
</div>
</body>
</html>
Developing the To-Do List Application
Our to-do list application allows users to:
- Add new tasks.
- Mark tasks as completed.
- Delete tasks.
- Clear all tasks.
The application is powered by PHP and SQLite, ensuring a smooth and efficient user experience.
Key Features of the Application
- Database Management with SQLite
- The application initializes an SQLite database (
todo.db). - A
taskstable is created with columns for task ID, task description, and completion status.
- The application initializes an SQLite database (
- Handling User Actions
- Users can add tasks using a form.
- Clicking on a task toggles its completion status.
- Tasks can be deleted individually or cleared entirely.
- Interactive UI with Bootstrap
- The front-end is styled with Bootstrap for a clean and modern look.
- Icons and visual elements enhance usability.
How SQLite Enhances This Application
- Data Persistence: Unlike session-based storage, SQLite keeps tasks saved even after refreshing or closing the browser.
- Minimal Configuration: No need for complex database setup—just an SQLite file.
- Scalability: While SQLite is not ideal for high-concurrency applications, it works perfectly for lightweight applications like this to-do list.
Using PHP and SQLite together makes building a functional and efficient to-do list application simple. This setup is ideal for small projects, testing, and learning database concepts without requiring extensive server configurations.
If you’re looking for a lightweight, serverless solution for managing structured data, SQLite is an excellent choice. It provides reliability and ease of use, making it perfect for small-scale web applications. Whether you’re a beginner or an experienced developer, experimenting with SQLite can help enhance your understanding of database-driven web applications.
