PHP Object Oriented Programming

Building a Secure and Efficient Task Manager with PHP OOP and jQuery

php task manager

ওয়েব ডেভেলপমেন্টের ডাইনামিক ল্যান্ডস্কেপে, এমন অ্যাপ্লিকেশন তৈরি করা যা শুধুমাত্র ইউজার-ফ্রেন্ডলি নয়, একই সাথে এটি সুরক্ষিত এবং এফিসিয়েন্ট হওয়া বাঞ্চনীয় । Task Manager সিস্টেমগুলি সাধারণ, ব্যক্তি এবং টিমের জন্য অপরিহার্য টুলস হিসাবে ব্যবহৃত । এই পোস্টে , আমরা ক্লায়েন্ট-সাইড ইন্টারঅ্যাকটিভিটি বাড়ানোর জন্য সার্ভার-সাইড লজিক এবং jQuery-এর জন্য PHP ব্যবহার করে একটি শক্তিশালী Task Manager তৈরি করার চেষ্টা করব।

আমাদের লক্ষ্য হচ্ছে : নিরবচ্ছিন্ন ইউজার এক্সপেরিয়েন্সের জন্য অ্যাপ্লিকেশনটিকে অপ্টিমাইজ করা এবং কঠোর নিরাপত্তা ব্যবস্থা বাস্তবায়ন করা, ডেটা অখণ্ডতা নিশ্চিত করা এবং সাধারণ দুর্বলতা থেকে রক্ষা করা। আমরা ডিজাইন, ফাঙ্কশনালিটি, এবং তাদের মধ্যে সূক্ষ্ম ভারসাম্যের জটিলতাগুলি সমাধান করব।

এই টিউটোরিয়ালে, আমরা ওয়েব ডেভেলপমেন্টের best practice গুলি অনুসরণ করব, সার্ভার-সাইড কাজগুলি পরিচালনা করতে PHP ব্যবহার করব, ডায়নামিক এবং রেস্পন্সিভ ইউজার ইন্টারফেসের জন্য jQuery এবং জিনিসগুলিকে স্মুথ রাখতে অ্যাসিঙ্ক্রোনাস ম্যাজিকের টাচ করব। উপরন্তু, আমরা SQL injection এর বিরুদ্ধে সুরক্ষা এবং Content Security Policies বাস্তবায়ন সহ নিরাপত্তা সংক্রান্ত উদ্বেগগুলির সমাধান করব৷

আপনি একজন অভিজ্ঞ ডেভেলপার হোন যা আপনার দক্ষতা পরিমার্জন করতে চাইছেন বা শুরু থেকে শিখতে আগ্রহী একজন নবাগত হলেও , এই টিউটোরিয়ালে কিভাবে একটি Task Manager তৈরি করতে হয় এবং পারফরম্যান্স এবং নিরাপত্তা উভয় দিক বিবেচনা রাখতে হয় , তা দেখতে পাবেন।

Create tasks table

CREATE TABLE tasks (
    id INT PRIMARY KEY AUTO_INCREMENT,
    title VARCHAR(255) NOT NULL,
    description TEXT NOT NULL,
    date DATE NOT NULL,
    time TIME NOT NULL
);

Create Frontend HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="style-src 'self' https://stackpath.bootstrapcdn.com https://cdnjs.cloudflare.com 'unsafe-inline';">
    <title>Task Manager</title>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- Include Font Awesome icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- External CSS File -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-6">
                <h2>Add Task</h2>
                <form id="addTaskForm">
                    <div class="form-group">
                        <label for="title">Title:</label>
                        <input type="text" class="form-control" id="title" name="title" required>
                    </div>
                    <div class="form-group">
                        <label for="description">Description:</label>
                        <input type="text" class="form-control" id="description" name="description" required>
                    </div>
                    <div class="form-group">
                        <label for="date">Date:</label>
                        <input type="date" class="form-control" id="date" name="date" required>
                    </div>
                    <div class="form-group">
                        <label for="time">Time:</label>
                        <input type="time" class="form-control" id="time" name="time" required>
                    </div>
                    <button type="submit" class="btn btn-primary">Add Task</button>
                </form>
            </div>
     
            <div class="col-md-6">
                <h2>Task List</h2>
                <ul class="list-group list-group-flush" id="taskList"></ul>
            </div>
        </div>
    </div>
     
    <!-- Add a search container -->
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12">
                <h2>Search Tasks</h2>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="searchDate">Date:</label>
                            <input type="date" class="form-control" id="searchDate">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="searchTime">Time:</label>
                            <input type="time" class="form-control" id="searchTime">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="searchTitle">Title:</label>
                            <input type="text" class="form-control" id="searchTitle">
                        </div>
                    </div>
                </div>
                <button class="btn btn-primary" id="searchButton">Search</button>
            </div>
        </div>
     
        <div class="row">
            <div class="col-md-12">
                <h2>Search Task List</h2>
                <ul class="list-group list-group-flush" id="SearchTaskList"></ul>
            </div>
        </div>
    </div>
     
     
    <!-- Modal for Task Details View -->
    <div class="modal fade modal-dialog-slide-down" id="taskDetailsModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Task Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="taskDetails"></div>
                </div>
            </div>
        </div>
    </div>
     
    <!-- Modal for editing task -->
    <div class="modal fade" id="editTaskModal" tabindex="-1" role="dialog" aria-labelledby="editTaskModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Task</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="editTaskForm">
                        <div class="form-group">
                            <label for="editTitle">Title:</label>
                            <input type="text" class="form-control" id="editTitle" name="editTitle" required>
                        </div>
                        <div class="form-group">
                            <label for="editDescription">Description:</label>
                            <input type="text" class="form-control" id="editDescription" name="editDescription" required>
                        </div>
                        <div class="form-group">
                            <label for="editDate">Date:</label>
                            <input type="date" class="form-control" id="editDate" name="editDate" required>
                        </div>
                        <div class="form-group">
                            <label for="editTime">Time:</label>
                            <input type="time" class="form-control" id="editTime" name="editTime" required>
                        </div>
                        <input type="hidden" id="editTaskId" name="editTaskId">
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
 
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js" defer></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" defer></script>
<!-- External JavaScript File -->
<script src="scripts.js" defer></script>
</body>
</html>

Create TaskManager.php Class File

<?php
 
class TaskManager
{
    private $pdo;
 
    public function __construct(PDO $db)
    {
        $this->pdo = $db;
    }
 
    public function getAll($offset, $limit)
    {
        $statement = $this->pdo->prepare('SELECT * FROM tasks WHERE date >= :currentDate ORDER BY date, time LIMIT :offset, :limit');
        $statement->bindValue(':offset', $offset, PDO::PARAM_INT);
        $statement->bindValue(':limit', $limit, PDO::PARAM_INT);
        $statement->bindValue(':currentDate', date('Y-m-d'), PDO::PARAM_STR);
        $statement->execute();
 
        return $statement->fetchAll(PDO::FETCH_ASSOC);
    }
 
    public function search($searchDate, $searchTime, $searchTitle)
    {
        $query = 'SELECT * FROM tasks WHERE 1';
        $params = [];
 
        if (!empty($searchDate)) {
            $query .= ' AND date = :searchDate';
            $params[':searchDate'] = $searchDate;
        }
 
        if (!empty($searchTime)) {
            $query .= ' AND time = :searchTime';
            $params[':searchTime'] = $searchTime;
        }
 
        if (!empty($searchTitle)) {
            $query .= ' AND title LIKE :searchTitle';
            $params[':searchTitle'] = '%' . $searchTitle . '%';
        }
 
        $statement = $this->pdo->prepare($query);
        $statement->execute($params);
 
        return $statement->fetchAll(PDO::FETCH_ASSOC);
    }
 
    public function addTask($title, $description, $date, $time)
    {
        $insertStatement = $this->pdo->prepare('INSERT INTO tasks (title, description, date, time) VALUES (:title, :description, :date, :time)');
        $insertStatement->execute([':title' => $title, ':description' => $description, ':date' => $date, ':time' => $time]);
 
        return ['success' => true, 'message' => 'Task added successfully.'];
    }
 
    public function editTask($id, $title, $description, $date, $time)
    {
        $stmt = $this->pdo->prepare('UPDATE tasks SET title = :title, description = :description, date = :date, time = :time WHERE id = :id');
        $stmt->bindParam(':id', $id, PDO::PARAM_INT);
        $stmt->bindParam(':title', $title, PDO::PARAM_STR);
        $stmt->bindParam(':description', $description, PDO::PARAM_STR);
        $stmt->bindParam(':date', $date, PDO::PARAM_STR);
        $stmt->bindParam(':time', $time, PDO::PARAM_STR);
        $stmt->execute();
 
        return ['success' => true, 'message' => 'Task updated successfully.'];
    }
 
    public function deleteTask($id)
    {
        $deleteStatement = $this->pdo->prepare('DELETE FROM tasks WHERE id = :id');
        $deleteStatement->execute([':id' => $id]);
 
        return ['success' => true, 'message' => 'Task deleted successfully.'];
    }
}

Create processTasks.php File

<?php
 
require_once 'TaskManager.php';
 
// Replace with your actual database credentials
$db_host = 'localhost';
$db_name = 'test';
$db_user = 'root';
$db_password = '';
 
// Create a PDO instance
try {
    $pdo = new PDO("mysql:host=$db_host;dbname=$db_name", $db_user, $db_password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo json_encode(['success' => false, 'message' => 'Database connection error: ' . $e->getMessage()]);
    exit;
}
 
// Create an instance of the TaskManager class
$taskManager = new TaskManager($pdo);
 
// Handle AJAX requests
if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['action'])) {
    switch ($_GET['action']) {
        case 'getTasks':
            $offset = isset($_GET['offset']) ? (int)$_GET['offset'] : 0;
            $limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 10;
 
            $tasks = $taskManager->getAll($offset, $limit);
            echo json_encode(['success' => true, 'data' => $tasks]);
            break;
        case 'getSearchTasks':
            $offset = isset($_GET['offset']) ? (int)$_GET['offset'] : 0;
            $limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 10;
            $searchDate = $_GET['searchDate'] ?? '';
            $searchTime = $_GET['searchTime'] ?? '';
            $searchTitle = $_GET['searchTitle'] ?? '';
 
            $tasks = $taskManager->search($searchDate, $searchTime, $searchTitle);
 
            echo json_encode(['success' => true, 'data' => $tasks]);
            break;
        default:
            echo json_encode(['success' => false, 'message' => 'Invalid action.']);
    }
} elseif ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    switch ($_POST['action']) {
        case 'addTask':
            $title = $_POST['title'];
            $description = $_POST['description'];
            $date = $_POST['date'];
            $time = $_POST['time'];
            $result = $taskManager->addTask($title, $description, $date, $time);
            echo json_encode($result);
            break;
        case 'editTask':
            $id = $_POST['id'];
            $title = $_POST['title'];
            $description = $_POST['description'];
            $date = $_POST['date'];
            $time = $_POST['time'];
            $result = $taskManager->editTask($id, $title, $description, $date, $time);
            echo json_encode($result);
            break;
        case 'deleteTask':
            $id = $_POST['id'];
            $result = $taskManager->deleteTask($id);
            echo json_encode($result);
            break;
        default:
            echo json_encode(['success' => false, 'message' => 'Invalid action.']);
    }
} else {
    echo json_encode(['success' => false, 'message' => 'Invalid request method or action not specified.']);
}

Create scripts.js File

$(document).ready(function() {
    const backendEndpoint = 'processTask.php'; // Replace with the actual backend endpoint
 
    // Load the list of tasks on page load
    loadTaskList();
 
    // Submit the form to add a new task
    $('#addTaskForm').submit(function(e) {
        e.preventDefault();
 
        const title = $('#title').val();
        const description = $('#description').val();
        const time = $('#time').val();
        const date = $('#date').val();
 
        // Make an AJAX request to add a new task
        $.ajax({
            url: backendEndpoint,
            method: 'POST',
            dataType: 'json',
            data: {
                action: 'addTask',
                title,
                description,
                time,
                date
            },
            success: function(response) {
                console.log(response);
                if (response.success) {
                    alert('Task added successfully.');
                    loadTaskList(); // Refresh the task list
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('AJAX Error: ' + textStatus, errorThrown);
            }
        });
    });
 
    // Function to load the list of tasks
    function loadTaskList(offset, limit) {
        // Make an AJAX request to get the list of tasks
        $.ajax({
            url: backendEndpoint,
            method: 'GET',
            dataType: 'json',
            data: { action: 'getTasks', offset, limit },
            success: function(response) {
                if (response.success) {
                    // Display the list of tasks
                    const tasks = response.data;
                    const taskListHtml = generateTaskListHtml(tasks);
 
                    // Set the HTML content of #taskList
                    $('#taskList').html(taskListHtml);
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('AJAX Error: ' + textStatus, errorThrown);
            }
        });
    }
 
    // Initial load
    let offset = 0;
    const limit = 10;
    loadTaskList(offset, limit);
 
    // Load more on scroll
    $('#taskList').scroll(function() {
        if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
            offset += limit;
            loadTaskList(offset, limit);
        }
    });
 
    // Event delegation for edit in main task list
    $('#taskList').on('click', '.edit-icon', function() {
        const taskDetails = extractTaskDetails($(this));
        openEditTaskModal(taskDetails);
    });
 
    // Event delegation for delete in main task list
    $('#taskList').on('click', '.delete-icon', function() {
        const taskId = $(this).data('id');
        handleDeleteTask(taskId, loadTaskList);
    });
 
    // Event listener for the view-icon in the main task list
    $('#taskList').on('click', '.view-icon', function() {
        const taskDetails = extractTaskDetails($(this));
        openTaskDetailsModal(taskDetails);
    });
 
    // Function to generate HTML for the task list
    function generateTaskListHtml(tasks) {
        const currentDate = new Date().toISOString().split('T')[0]; // Get current date in 'YYYY-MM-DD' format
        let taskListHtml = '';
 
        tasks.forEach(function(task) {
            const isToday = task.date === currentDate;
            const highlightClass = isToday ? 'bg-warning text-dark' : '';
 
            taskListHtml += `<li class="list-group-item ${highlightClass}">
                                ${task.title}-${task.date} (${task.time})
                                <i class="text-info fas fa-pencil-alt edit-icon" data-id="${task.id}"
                                   data-title="${task.title}" data-description="${task.description}"
                                   data-date="${task.date}" data-time="${task.time}"></i>
                                <i class="text-danger fas fa-times delete-icon" data-id="${task.id}"></i>
                                <i class="text-success fas fa-eye view-icon" data-id="${task.id}"
                                   data-title="${task.title}" data-description="${task.description}"
                                   data-date="${task.date}" data-time="${task.time}"></i>
                              </li>`;
        });
 
        return taskListHtml;
    }
 
    // Function to extract task details from an element
    function extractTaskDetails(element) {
        return {
            id: element.data('id'),
            title: element.data('title'),
            description: element.data('description'),
            date: element.data('date'),
            time: element.data('time')
        };
    }
 
    // Function to open the edit task modal
    function openEditTaskModal(taskDetails) {
        // Populate the modal with current task details
        $('#editTitle').val(taskDetails.title);
        $('#editDescription').val(taskDetails.description);
        $('#editDate').val(taskDetails.date);
        $('#editTime').val(taskDetails.time);
        $('#editTaskId').val(taskDetails.id);
 
        // Show the modal
        $('#editTaskModal').modal('show');
    }
 
    // Function to open the task details modal
    function openTaskDetailsModal(taskDetails) {
        const modalContent = `<strong>Title:</strong> ${taskDetails.title}<br>
                              <strong>Description:</strong> ${taskDetails.description}<br>
                              <strong>Date:</strong> ${taskDetails.date}<br>
                              <strong>Time:</strong> ${taskDetails.time}`;
 
        // Set the modal content
        $('#taskDetails').html(modalContent);
 
        // Show the modal
        $('#taskDetailsModal').modal('show');
    }
 
    // jQuery click event for the Search button
    $('#searchButton').click(function() {
        const dateSearch = $('#searchDate').val();
        const timeSearch = $('#searchTime').val();
        const titleSearch = $('#searchTitle').val();
 
        // Perform AJAX request with search parameters
        loadSearchTaskList(0, 10, dateSearch, timeSearch, titleSearch);
    });
 
    // Event delegation for edit in Search list
    $('#SearchTaskList').on('click', '.edit-icon', function() {
        const taskDetails = extractTaskDetails($(this));
        openEditTaskModal(taskDetails);
    });
 
    // Event listener for the editTaskForm submission
    $('#editTaskForm').submit(function(event) {
        event.preventDefault();
 
        const taskId = $('#editTaskId').val();
        const newTitle = $('#editTitle').val();
        const newDescription = $('#editDescription').val();
        const newDate = $('#editDate').val(); // Assuming the date is already in 'YYYY-MM-DD' format
        const newTime = $('#editTime').val(); // Assuming the time is already in 'HH:mm' format
 
        // Make an AJAX request to edit the task
        $.ajax({
            url: backendEndpoint,
            method: 'POST',
            dataType: 'json',
            data: {
                action: 'editTask',
                id: taskId,
                title: newTitle,
                description: newDescription,
                date: newDate,
                time: newTime
            },
            success: function(response) {
                if (response.success) {
                    alert('Task edited successfully.');
                    $('#editTaskModal').modal('hide'); // Hide the modal
                    loadTaskList(); // Refresh the task list
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('AJAX Error: ' + textStatus, errorThrown);
            }
        });
    });
 
    // Event delegation for delete in Search list
    $('#SearchTaskList').on('click', '.delete-icon', function() {
        const taskId = $(this).data('id');
        handleDeleteTask(taskId, loadSearchTaskList);
    });
 
    // Event delegation for view in Search list
    $('#SearchTaskList').on('click', '.view-icon', function() {
        const taskDetails = extractTaskDetails($(this));
        openTaskDetailsModal(taskDetails);
    });
 
    // Function to handle the delete task action
    function handleDeleteTask(taskId, callback) {
        if (confirm('Are you sure you want to delete this task?')) {
            // Make an AJAX request to delete the task
            $.ajax({
                url: backendEndpoint,
                method: 'POST',
                dataType: 'json',
                data: {
                    action: 'deleteTask',
                    id: taskId
                },
                success: function(response) {
                    if (response.success) {
                        alert('Task deleted successfully.');
                        callback(0, 10, $('#searchDate').val(), $('#searchTime').val(), $('#searchTitle').val()); // Refresh the task list
                    } else {
                        alert('Error: ' + response.message);
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error('AJAX Error: ' + textStatus, errorThrown);
                }
            });
        }
    }
 
    // Function to load the list of tasks with search parameters
    function loadSearchTaskList(offset, limit, dateSearch, timeSearch, titleSearch) {
        // Make an AJAX request to get the list of tasks
        $.ajax({
            url: backendEndpoint,
            method: 'GET',
            dataType: 'json',
            data: {
                action: 'getSearchTasks',
                offset,
                limit,
                searchDate: dateSearch,
                searchTime: timeSearch,
                searchTitle: titleSearch
            },
            success: function(response) {
                if (response.success) {
                    // Display the list of tasks
                    const tasks = response.data;
                    const SearchTaskList = generateTaskListHtml(tasks);
 
                    // Set opacity to 0 initially
                    $('#SearchTaskList').css('opacity', 0);
 
                    $('#SearchTaskList').html(SearchTaskList);
                    // Apply a smooth fade-in effect
                    $('#SearchTaskList').animate({ opacity: 1 }, 1000);
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('AJAX Error: ' + textStatus, errorThrown);
            }
        });
    }
});

styles.css File

/* Add this style to your CSS file or within a style tag in your HTML */
#taskList, #SearchTaskList {
    max-height: 325px; /* Set the desired maximum height for the task list */
    overflow-y: scroll; /* Add a vertical scrollbar when content overflows */
    border: 1px solid #ccc; 
}

Masud Alam

আমি মাসুদ আলম, বাংলাদেশের ৩৬ তম Zend Certified Engineer । ২০০৯ সালে কম্পিউটার সাইন্স থেকে বেচেলর ডিগ্রী অর্জন করি। দীর্ঘ ১৫ বছর আমি Winux Soft, SSL Wireless, IBCS-PRIMAX, Max Group, Canadian International Development Agency (CIDA), Care Bangladesh, World Vision, Hellen Keller, Amarbebsha Ltd সহ বিভিন্ন দেশি বিদেশী কোম্পানিতে ডেটা সাইন্স, মেশিন লার্নিং, বিগ ডেটা, ওয়েব ডেভেলপমেন্ট এবং সফটওয়্যার ডেভেলপমেন্ট এর উপর বিভিন্ন লিডিং পজিশন এ চাকরি এবং প্রজেক্ট লিড করি। এছাড়াও বাংলাদেশের ১৮৫ জন জেন্ড সার্টিফাইড ইঞ্জিনিয়ার এর মধ্যে ১২০ এরও অধিক ছাত্র আমার হাতে জেন্ড সার্টিফাইড ইঞ্জিনিয়ার হয়েছেন। বর্তমানে w3programmers ট্রেনিং ইনস্টিটিউট এ PHP এর উপর Professional এবং Advance Zend Certified PHP -8.2 Engineering, Laravel Mastering Course with ReactJS, Python Beginning To Advance with Blockchain, Machine Learning and Data Science, Professional WordPress Plugin Development Beginning to Advance কোর্স করাই। আর অবসর সময়ে w3programmers.com এ ওয়েব টেকনোলজি নিয়ে লেখালেখি করি।