Search

Newsletter

Get our latest updates. Sign up with your email.

Popular Posts

Create a Task Manager Using PHP, MySQL, and Bootstrap 5

4 views
Create a Task Manager Using PHP MySQL and Bootstrap 5

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.

Prompt
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.

website and include it in your project directory. You can also use the CDN for a quick start:

Prompt
<!-- 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>

Prompt
<?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.

Prompt
<!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>

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:

Prompt
<?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); } } ?>

Prompt
<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>

Prompt
<?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"; } } ?>

Prompt
<?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

Suggest a Correction

Found an error or have a suggestion? Let us know and we'll review it.

Share this article

Comments (0)

Please sign in to leave a comment.

No comments yet. Be the first to comment!

Latest News