This content originally appeared on DEV Community and was authored by Sachin Sharma
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! 🚀
This content originally appeared on DEV Community and was authored by Sachin Sharma
Sachin Sharma | Sciencx (2025-01-05T13:27:50+00:00) PHP for Beginners: Building Your First Database-Driven Web App. Retrieved from https://www.scien.cx/2025/01/05/php-for-beginners-building-your-first-database-driven-web-app/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.