This tutorial will guide you through the process of creating a task manager using PHP, MySQL, and Bootstrap 5. We’ll leverage PHP for server-side scripting, MySQL for database management, and Bootstrap 5 to design a modern, responsive user interface.
Before starting, ensure you have a local server environment like XAMPP, WAMP, or MAMP installed. Also, you’ll need a code editor such as Sublime Text, Atom, or Visual Studio Code.
How to Create a Task Manager in PHP & Bootstrap 5
Step 1: Setting Up the Database
First, let’s set up the MySQL database. Log in to your MySQL server using PHPMyAdmin (localhost/phpmyadmin) or any similar tool.
Create a new database, task_manager_db, and inside it, create a table tasks with the following structure:
CREATE TABLE tasks(
id INT AUTO_INCREMENT PRIMARY KEY,
task_name VARCHAR(255) NOT NULL,
status ENUM('Pending', 'In Progress', 'Completed') DEFAULT 'Pending',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
This table will store each task’s details, its status, and when it was created.
Step 2: Bootstrap 5 Set Up
Download the latest version of Bootstrap 5 from their official website and include it in your project directory. You can also use the CDN for a quick start:
<!-- CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/css/bootstrap.min.css" rel="stylesheet">
<!-- JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/js/bootstrap.bundle.min.js"></script>
Step 3: Connecting PHP to MySQL
Now, let’s create a connection between PHP and MySQL. In your project directory, create a file called db_connect.php:
<?php
$server = 'localhost';
$username = 'root';
$password = '';
$database = 'task_manager_db';
$conn = mysqli_connect($server, $username, $password, $database);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>
This file will serve as our database connection file.
Step 4: Creating the Task Manager Interface
Using Bootstrap 5, let’s create a simple interface for our task manager in a index.php file. This page will allow us to add, view, update, and delete tasks:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Manager</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Task Manager</h1>
<!-- Form to add new task -->
<form action="add_task.php" method="post">
<div class="mb-3">
<label for="task_name" class="form-label">Task Name</label>
<input type="text" class="form-control" id="task_name" name="task_name" required>
</div>
<button type="submit" class="btn btn-primary">Add Task</button>
</form>
<br>
<!-- Table to display tasks -->
<table class="table">
<thead>
<tr>
<th scope="col">Task Name</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
include 'db_connect.php';
$sql = "SELECT * FROM tasks";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// Output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo "<tr><td>" . $row["task_name"]. "</td><td>" . $row["status"]. "</td><td><a href='update_task.php?id=". $row["id"]. "' class='btn btn-success'>Update</a> <a href='delete_task.php?id=". $row["id"]. "' class='btn btn-danger'>Delete</a></td></tr>";
}
} else {
echo "No tasks found";
}
?>
</tbody>
</table>
</div>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Step 5: Implementing Task Operations
Now, we’ll handle task operations like adding, viewing, updating, and deleting tasks using PHP and SQL commands.
Adding Tasks
Create a form in index.php for adding tasks. After the form is submitted, the data should be sent to add_task.php.
Then, in add_task.php:
<?php
include 'db_connect.php';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$task_name = mysqli_real_escape_string($conn, $_POST["task_name"]);
$status = "Pending";
$sql = "INSERT INTO tasks (task_name, status) VALUES ('$task_name', '$status')";
if (mysqli_query($conn, $sql)) {
header('Location: index.php');
} else {
echo "Error: " . mysqli_error($conn);
}
}
?>
Viewing Tasks
Fetch tasks from the tasks table and display them in a Bootstrap table in index.php.
Here’s the PHP code for viewing tasks:
In index.php:
<div class="container">
<!-- Table to display tasks -->
<table class="table">
<thead>
<tr>
<th scope="col">Task Name</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
include 'db_connect.php';
$sql = "SELECT * FROM tasks";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo "<tr><td>" . $row["task_name"]. "</td><td>" . $row["status"]. "</td><td><a href='update_task.php?id=". $row["id"]. "' class='btn btn-success'>Update</a> <a href='delete_task.php?id=". $row["id"]. "' class='btn btn-danger'>Delete</a></td></tr>";
}
} else {
echo "No tasks found";
}
?>
</tbody>
</table>
</div>
Updating Tasks
For each task in the table, create an ‘Update’ button. When clicked, the button sends the user to update_task.php, where they can update the task.
In update_task.php:
<?php
include 'db_connect.php';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$id = mysqli_real_escape_string($conn, $_POST["id"]);
$task_name = mysqli_real_escape_string($conn, $_POST["task_name"]);
$status = mysqli_real_escape_string($conn, $_POST["status"]);
$sql = "UPDATE tasks SET task_name='$task_name', status='$status' WHERE id=$id";
if (mysqli_query($conn, $sql)) {
header('Location: index.php');
} else {
echo "Error: " . mysqli_error($conn);
}
} else {
$id = mysqli_real_escape_string($conn, $_GET["id"]);
$sql = "SELECT * FROM tasks WHERE id=$id";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) == 1) {
$row = mysqli_fetch_assoc($result);
// Create form to update task
} else {
echo "No task found";
}
}
?>
Deleting Tasks
Next to each task, create a ‘Delete’ button. When clicked, the task ID is sent to delete_task.php, which handles deleting the task from the database.
In delete_task.php:
<?php
include 'db_connect.php';
if ($_SERVER["REQUEST_METHOD"] == "GET") {
$id = mysqli_real_escape_string($conn, $_GET["id"]);
$sql = "DELETE FROM tasks WHERE id=$id";
if (mysqli_query($conn, $sql)) {
header('Location: index.php');
} else {
echo "Error: " . mysqli_error($conn);
}
}
?>
For a complete PHP CRUD tutorial, please refer to that link.
Remember to sanitize and validate user inputs to protect your app from SQL injections and other potential vulnerabilities. This can be done using PHP’s built-in functions like mysqli_real_escape_string and filter_input.
Conclusion on Creating a PHP/Bootstrap 5 Task Manager
Once your PHP scripts for CRUD operations are done, your task manager application should be fully functional. It’s now ready for you to add, view, update, and delete tasks at will.
Related Articles
