Overview

This project implements a fully functional Kanban board system using PHP, MySQL, and JavaScript. The Kanban board allows users to create, manage, and organize tasks across multiple boards. Each board can be customized with unique styling, and tasks can be dynamically moved between boards. The system also supports role-based access control and real-time updates.


Key Features

  • Dynamic Kanban Boards: Users can create multiple boards, each with customizable properties such as background color, border color, and font settings.
  • Task Management: Tasks can be added, edited, and moved between boards. Each task has a title, description, and position within the board.
  • Real-Time Updates: Changes to tasks and boards are reflected in real-time, ensuring seamless collaboration.
  • Custom Styling: Boards and tasks can be styled dynamically using properties like BoardBackgroundColor, TaskFieldBackgroundColor, TitleTextColor, and more.
  • Responsive Design: The Kanban board is fully responsive and adapts to different screen sizes, including mobile devices.
  • API Integration: The system interacts with a backend API to fetch board and task data, as well as to update task positions when tasks are moved.

Page Structure

The Kanban board page is built using HTML, CSS, and JavaScript. Below is a breakdown of the key components:

  • HTML Structure:
    • The main container for the Kanban board is a <div> with the ID myKanban.
    • Each board and task is dynamically generated using JavaScript based on data fetched from the API.
  • CSS Styling:
    • The page uses custom CSS to style the Kanban boards, tasks, and buttons.
    • Responsive design is implemented using media queries to ensure the board works well on all screen sizes.
  • JavaScript Functionality:
    • The jKanban library is used to create and manage the Kanban boards.
    • JavaScript functions handle tasks such as opening modals for adding/editing tasks, fetching data from the API, and updating task positions when tasks are moved.

JavaScript Functions

The following JavaScript functions are used to manage the Kanban board:

  • openAddTaskModal(boardId):
    • Opens a modal for adding a new task to the specified board.
    • Reloads the page after the modal is closed to reflect changes.
  • openEditTaskModal(taskId):
    • Opens a modal for editing an existing task.
    • Reloads the page after the modal is closed to reflect changes.
  • loadKanban():
    • Fetches board and task data from the API and initializes the Kanban board using the jKanban library.
    • Applies custom styling to each board and task based on the data returned by the API.
  • Drag-and-Drop Functionality:
    • When a task is moved, the drop function sends a request to the API to update the task's position and board.
    • The updated positions are sent to the backend in real-time.

API Integration

The Kanban board interacts with a backend API to fetch and update data. Below are the key API endpoints used:

  • GET /api/kanban:
    • Fetches all boards and their associated tasks.
    • Returns a JSON array of boards, each containing properties like Board_ID, Board_Name, and tasks.
  • POST /api/kanban/update-task-order:
    • Updates the order of tasks when they are moved between boards.
    • Accepts a JSON payload containing the board_id and an array of task positions.

Customization Options

The Kanban board can be customized using the following properties:

  • Board Styling:
    • BoardBackgroundColor: Sets the background color of the board.
    • BoardBorderColor: Sets the border color of the board.
    • BoardBorderWidth: Sets the width of the board's border.
    • BoardBorderRadius: Sets the border radius of the board.
  • Title Styling:
    • TitleBackgroundColor: Sets the background color of the board's title bar.
    • TitleTextColor: Sets the text color of the board's title.
    • TitleTextFont: Sets the font family of the board's title.
    • TitleTextFontSize: Sets the font size of the board's title.
  • Task Styling:
    • TaskFieldBackgroundColor: Sets the background color of task items.
    • TaskTextColor: Sets the text color of task items.
    • TaskTextFont: Sets the font family of task items.
    • TaskTextFontSize: Sets the font size of task items.

Usage Instructions

  1. Adding a Board: Use the tbl_kanban_board table to add a new board. Specify the board's name and styling properties.
  2. Adding Tasks: Use the tbl_kanban_tasks table to add tasks to a board. Specify the task's title, description, and position.
  3. Customizing Boards: Update the styling properties in the tbl_kanban_board table to customize the appearance of boards and tasks.
  4. Moving Tasks: Drag and drop tasks between boards to update their positions. The system will automatically send updates to the backend.

Benefits

  • Dynamic and Flexible: The Kanban board can be customized to fit the needs of different projects and teams.
  • Real-Time Collaboration: Changes to tasks and boards are reflected in real-time, enabling seamless collaboration.
  • Scalable: New boards and tasks can be added without modifying the underlying code.
  • User-Friendly: The intuitive drag-and-drop interface makes it easy for users to manage tasks.

Login

  • User: admin
  • Password: master
  • How to Check: Log in to the system and navigate to the Kanban board. Try creating, editing, and moving tasks to see the system in action.