Thursday, December 5, 2024

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

Share

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

Read more

Local News

Simple, privacy focused and free ad network for websites in need of new visitors. What are the vip benefits ?. Produkcja kontraktowa suplementów diety w firmie ioc.