If you're just getting started with PHP, one of the most exciting projects you can undertake is building a database-driven web app. It’s a great way to understand how the backend works, interact with a database and bring dynamic content to your users.
In this tutorial, we’ll build a simple To-Do List App using PHP and MySQL. By the end, you’ll have a working application where users can add, view, and delete tasks.
Prerequisites
Before we dive in, make sure you have:
- PHP (version 7.4 or above)
- MySQL (or MariaDB)
- A local server like XAMPP or Laragon
- A code editor like VS Code
Step 1: Set Up Your Environment
- Install your local server (e.g., XAMPP).
- Start the Apache and MySQL services.
- Navigate to your web root directory (
htdocsfor XAMPP) and create a new folder calledtodo_app.
Step 2: Create the Database
- Open phpMyAdmin.
- Create a new database called
todo_app. - Run the following SQL query to create a
taskstable:
sql
CREATE TABLE tasks (
id INT AUTO_INCREMENT PRIMARY KEY,
task VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Step 3: Build the HTML Frontend
Create an index.php file in the todo_app folder and add the following HTML:
<!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 App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<form action="add_task.php" method="POST">
<input type="text" name="task" placeholder="Enter a new task" required>
<button type="submit">Add Task</button>
</form>
<ul>
<?php
// Fetch tasks from the database
$conn = new mysqli("localhost", "root", "", "todo_app");
$result = $conn->query("SELECT * FROM tasks ORDER BY created_at DESC");
while ($row = $result->fetch_assoc()) {
echo "<li>" . $row['task'] .
" <a href='delete_task.php?id=" . $row['id'] . "'>Delete</a></li>";
}
$conn->close();
?>
</ul>
</div>
</body>
</html>
Step 4: Handle Adding Tasks
Create a new file called add_task.php and add the following code:
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$task = $_POST['task'];
// Connect to the database
$conn = new mysqli("localhost", "root", "", "todo_app");
// Insert the task into the database
$stmt = $conn->prepare("INSERT INTO tasks (task) VALUES (?)");
$stmt->bind_param("s", $task);
$stmt->execute();
$stmt->close();
$conn->close();
// Redirect back to the main page
header("Location: index.php");
exit();
}
?>
Step 5: Handle Deleting Tasks
Create a new file called delete_task.php:
<?php
if (isset($_GET['id'])) {
$id = $_GET['id'];
// Connect to the database
$conn = new mysqli("localhost", "root", "", "todo_app");
// Delete the task from the database
$stmt = $conn->prepare("DELETE FROM tasks WHERE id = ?");
$stmt->bind_param("i", $id);
$stmt->execute();
$stmt->close();
$conn->close();
// Redirect back to the main page
header("Location: index.php");
exit();
}
?>
Step 6: Add Some CSS (Optional)
Create a styles.css file in the same folder to style your app:
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
margin: 0;
padding: 0;
}
.container {
width: 50%;
margin: 50px auto;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h1 {
text-align: center;
}
form {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
form input {
flex: 1;
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
form button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
form button:hover {
background-color: #218838;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ddd;
}
ul li a {
color: #dc3545;
text-decoration: none;
}
Step 7: Run Your Application
- Open your browser and go to http://localhost/todo_app/index.php.
- Add some tasks, view them, and delete them. 🎉
Congratulations! You’ve just built your first database-driven web app with PHP and MySQL. This simple project lays the foundation for creating more complex applications. Experiment with adding features like task prioritization or user authentication.
If you enjoyed this tutorial, drop a comment or share it with your fellow developers. Happy coding! 🚀
Top comments (1)
A well written article!
I would use PDO instead of mysqli to connect to the database. This allows you to switch databases and it has a more developer friendly way of working.
For the connection data, I would place it in another file and include it where needed. When the database switches, or you move the code from local host to a server, this makes it easier to do those changes.
I would structure the index.php file by getting the tasks on top, and storing them in an variable. And then the html.
This splits the backend code from the frontend code.
In the add_task.php and delete_task.php files I would add validation for the post and get input.
The minimum validation is checking if the input is not empty.
By checking the input it prevents sql queries that are useless.
The code in the post is not wrong, but I think if you teach beginners only learning the code is half the task. Learning best practices are as important as learning the code.