Kanban Board

This is a project for the course "Webentwicklung" at the University of Trier. The goal of this project is to develop a Kanban Board as a web application. A Kanban Board is a project management tool that helps visualize work, limit work-in-progress, and maximize efficiency.

Table of Contents

• Description
• Important Note
• Installation
• Usage
• Screenshots
  • Main Task View
  • Task Element
  • Task CRUD Modal
  • Spalten Table View
  • Login View
  • User roles
• Project Structure
• Contributing
• License
• Contact

Description

This project is a web application developed using the CodeIgniter Framework. It includes a CRUD (Create, Read, Update, Delete) system for managing various types of data, such as Boards, Spalten, Tasks, Personen, and Taskarten. The application uses modals for creating, editing, deleting, and copying data. It also includes forms for each data type and a toast notification system for CRUD operations.

Important Note

Since this project was developed for a german course, all the terms visible to the user will be in german. As such this README will use those terms as well. The code itself is mostly written in english and so are the commits. The following is a brief translation of the most important terms:

• Spalten: Columns
• Personen: People
• Taskarten: Task Types
• Neu: New
• Profil: Profile
• Meine Aufgaben: My Tasks
• Bearbeiten: edit
• Löschen: delete

Installation

1. Clone the repository to your local machine.
2. Initialize the database using the databaseStructure.sql file.
3. Change the env file name to .env.
4. Set up your database and update the .env file with your database credentials.
5. Update the app.baseURL variable in the .env file with the address you will use to access the application in your web browser.
6. Use whatever deployment method you prefer to deploy the application. See the CodeIgniter documentation for more information.

Optional: SCSS Compilation

1. Install node.js. You can download it from the Official Website.
2. Run npm install to install JavaScript dependencies.
3. Use npm run scss to activate a file watcher that compiles any changes in main.scss to main.css.

Usage

After the correct deployment, you can access the application in your web browser at the address you specified in the .env file.

The application provides a user-friendly interface for managing Tasks inside a Kanban-styled interface. Here's a brief overview of how to use each feature:

• Tasks: Tasks are the main entities in this application. You can create a new task by clicking on the "Neu" button in a Spalte. Each task has a name, notes, assignee, and Spalte. You can update these details by clicking on the Task name in the Board view or using the CRUD functions in the dropdown menu located in the top right corner of each Task. The CRUD actions are done inside modals. Tasks can also be dragged and dropped between Spalten to change their status.

• Boards: Each Board represents a project or a set of tasks. You can edit or delete a Board by clicking on the corresponding buttons in the Boards view.

• Spalten: Each Board can have multiple Spalten. A Spalte represents a stage or a status of Tasks. CRUD operations for Spalten can be performed by clicking on the corresponding buttons in the Board details view.

• Personen: Personen are the users or team members in your project. They are assignable to Tasks and can be used to filter Tasks. Personen also have a role, which can be "Administrator" or "Benutzer". Admins can create, update, and delete all data in the application, while Benutzers can only create, update, and delete the non-admin tables.

• Taskarten: Taskarten are the categories or types of Tasks in your project. Admins can add a new task type by clicking on the "Neu" button in the Taskarten view.

• Task View: The main view of the application is the Task view. Here you can see all the Tasks in your project. You can filter the Tasks using the search box at the top right, which you put into write focus by pressing any key on your keyboard. You can also seach for people by clicking on their icon when they are assigned to a task. This allows you to see all tasks assigned to that person on the currently viewed board.

Screenshots

Main Task View

Task Element

From left to right, top to bottom the content of the task element is as follows: Icon of the Taskart, name of the task, button to open the CRUD dropdown seen in the image, creation date, reminder date, notes and assignee.

Task CRUD Modal

Spalten Table View

Login View

User roles

Gast is a user that is not logged in.

Benutzer is a user that is logged in.

Admin is a user that is logged in and has admin rights.

Project Structure

Note

Since our project is based on the CodeIgniter framework, please refer to the CodeIgniter application structure documentation for more information about the general project structure.

root: Project root directory
 ├── .env: Environment variables
 ├── databaseStructure.sql: SQL script for setting up the database
 ├── package.json: Defines npm package dependencies for the project
 ├── app: Main application directory
 │        ├── Cells: CodeIgniter Cells for view fragments
 │        ├── Config: Configuration files
 │        │          ├── Routes.php: Defines the routes and their filters
 │        │          ├── Filters.php: Configures the scope of the filters
 │        │          └── Validation.php: Defines the validation rules used in the Models
 │        ├── Controllers: Connect a route call with the views
 │        ├── Filters: Filters for pre and post processing of HTTP requests
 │        ├── Models: Models for the database tables
 │        └── Views: Views are the output or what the user sees
 │                   ├── components: Reusable components for views
 │                   ├── layouts: Layouts for the application
 │                   ├── pages: Individual pages
 │                   └── templates: Templates used in the layouts
 ├── public: Publicly accessible files
 │        └── resources: Resources like CSS, JavaScript, and images
 │                   ├── css: CSS files for styling
 │                   ├── scss: SCSS files for styling
 │                   ├── js: JavaScript files for interactivity
 │                   └── images: Images used (e.g. logo)
 ├── system: CodeIgniter system directory
 └── writable: CodeIgniter write directory

Contributing

Contributions are welcome. Please fork the repository and create a pull request with your changes. For major changes, please open an issue first to discuss what you would like to change. If you find a bug, please report it using the issue tracker.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contact

You can contact any of the contributors to this project through their respective E-Mail addresses:

@JDeffner: s4jodeff@uni-trier.de

@talina2: s4tadara@uni-trier.de

@s4kecast: s4kecast@uni-trier.de