Berikut adalah versi soal yang lebih sulit dengan fokus pada memperbanyak relasi many-to-many atau many-

to-many through, dan mengubah tema menjadi sebuah aplikasi manajemen proyek bernama "ProjectHub":

Soal yang Lebih Sulit

LKS NASIONAL 2024

SERVER SIDE MODULE

CONTENTS
This module has the following files:
1. MODULE_SERVER_SIDE.docx
2. MODULE_SERVER_SIDE.pdf
3. MODULE_SERVER_SIDE_MEDIA.zip

INTRODUCTION
In this module, you are asked to create a project management website called “ProjectHub” where users can
create and manage projects, assign tasks to team members, and collaborate through comments. The detailed
description and tools that you can use will be described below.

DESCRIPTION OF PROJECT AND TASKS

This module is divided into 2 phases. In the first phase, you will create a REST API, then in the second phase,
you will create a frontend application with the following provided frameworks:
- Laravel (v10.x)
- React (v18.x with react-router and axios)
- Vue (v3.x with vue-router and axios)

Phase 1 - REST API

For all endpoints, the request header as default sets Content-type: application/json, but some endpoints have
specified Content-type header so you have to adjust it.

1. Authentication
You can use Sanctum for the token management and it must be valid when placed in the Authorization request
header as a Bearer token.
a. Register
- Endpoint: /api/v1/auth/register
- Method: POST
- Description: For users to register an account
Request Body:
{
"full_name": "John Doe",
"username": "john.doe",
"email": "[email protected]",
"password": "password123",
"organization": "required, only for unique, alphanumeric"
}

Response Success:
- HTTP Status Code: 201
{
"message": "Register success",
"token": "7|xuPEGo7jtV8IhoE2Mp3am1rwtIpYUTewXBTcH78Af922f116",
"user": {
"full_name": "John Doe",
"username": "john.doe",
"email": "[email protected]",
"organization": "TechCorp",
"id": 101
}
}

Response Invalid Field:

- HTTP Status Code: 422
{
"message": "Invalid field",
"errors": {
"full_name": [
"The full name field is required."
],
"username": [
"The username has already been taken."
],
"email": [
"The email field is required."
],
"password": [
"The password field must be at least 6 characters."
]
}
}

b. Login
- Endpoint: /api/v1/auth/login
- Method: POST
- Description: For users to log into the system
Request Body:
{
"email": "[email protected]",
 "password": "password123"
}

Response Success:
- HTTP Status Code: 200
{
"message": "Login success",
"token": "2|Qnt2aqHIi0EVwCz3rSH0yiFIKMqey38SdkUZntRvf0e507ff",
"user": {
"id": 1,
"full_name": "John Doe",
"username": "john.doe",
"email": "[email protected]",
"organization": "TechCorp",
"created_at": "2023-10-14T15:04:33.000000Z"
}
}

Response Failed:
- HTTP Status Code: 401
{
"message": "Wrong email or password"
}

c. Logout
- Endpoint: /api/v1/auth/logout
- Method: POST
- Description: For users to logout
Request Headers:
Authorization: Bearer <token>

Response Success:
- HTTP Status Code: 200
{
"message": "Logout success"
}

Response Invalid Token:

- HTTP Status Code: 401
{
"message": "Unauthenticated."
}

2. Projects
a. Create new project
- Endpoint: /api/v1/projects
 - Method: POST
- Description: For users to create a new project
Request Headers:
Authorization: Bearer <token>
Content-type: application/json

Request Body:
{
"title": "Project Title",
"description": "Detailed project description",
"team_members": [2, 3, 4] // IDs of team members to be added to the project
}

Response Success:
- HTTP Status Code: 201
{
"message": "Create project success",
"project": {
"id": 1,
"title": "Project Title",
"description": "Detailed project description",
"created_at": "2023-10-14T15:04:33.000000Z",
"team_members": [
{
"id": 2,
"full_name": "Alice Smith",
"username": "alice.smith"
},
{
"id": 3,
"full_name": "Bob Johnson",
"username": "bob.johnson"
}
]
}
}

Response Invalid Field:

- HTTP Status Code: 422
{
"message": "Invalid field",
"errors": {
"title": [
"The title field is required."
],
"team_members": [
"The team_members field must be an array."
]
}
}

b. Delete project
 - Endpoint: /api/v1/projects/:id
- Method: DELETE
- Description: For users to delete a project
Request Headers:
Authorization: Bearer <token>

Response Success:
- HTTP Status Code: 204
Response Project Not Found:
- HTTP Status Code: 404
{
"message": "Project not found"
}

Response Unauthorized:
- HTTP Status Code: 403
{
"message": "Forbidden access"
}

Response Invalid Token:

- HTTP Status Code: 401
{
"message": "Unauthenticated."
}

3. Tasks
a. Create new task
- Endpoint: /api/v1/tasks
- Method: POST
- Description: For users to create a new task within a project
Request Headers:
Authorization: Bearer <token>
Content-type: application/json

Request Body:
{
"project_id": 1,
"title": "Task Title",
"description": "Task description",
"assignees": [2, 3] // IDs of users assigned to the task
}
Response Success:
- HTTP Status Code: 201
{
"message": "Create task success",
"task": {
"id": 1,
"title": "Task Title",
"description": "Task description",
"created_at": "2023-10-14T15:04:33.000000Z",
"assignees": [
{
"id": 2,
"full_name": "Alice Smith",
"username": "alice.smith"
},
{
"id": 3,
"full_name": "Bob Johnson",
"username": "bob.johnson"
}
]
}
}

Response Invalid Field:

- HTTP Status Code: 422
{
"message": "Invalid field",
"errors": {
"title": [
"The title field is required."
],
"project_id": [
"The project_id field is required."
]
}
}

b. Delete task
- Endpoint: /api/v1/tasks/:id
- Method: DELETE
- Description: For users to delete a task
Request Headers:
Authorization: Bearer <token>

Response Success:
- HTTP Status Code: 204
Response Task Not Found:
 - HTTP Status Code: 404
{
"message": "Task not found"
}

Response Unauthorized:
- HTTP Status Code: 403
{
"message": "Forbidden access"
}

Response Invalid Token:

- HTTP Status Code: 401
{
"message": "Unauthenticated."
}

4. Comments
a. Add comment to task
- Endpoint: /api/v1/tasks/:id/comments
- Method: POST
- Description: For users to add a comment to a task
Request Headers:
Authorization: Bearer <token>
Content-type: application/json

Request Body:
{
"content": "This is a comment."
}

Response Success:
- HTTP Status Code: 201
{
"message": "Add comment success",
"comment": {
"id": 1,
"task_id": 1,
"user_id": 1,
"content": "This is a comment.",
"created_at": "2023-10-14T15:04:33.000000Z"
}
}

Response Invalid Field:

- HTTP Status Code: 422
{
"message": "Invalid field",
"errors": {
"content": [
"The content field is required."
]
}
}

Phase 2 - Frontend Application

1. Authentication Pages
Create pages for user registration, login, and logout. Use React or Vue to build these pages.

2. Project Management
Create pages where users can create, view, update, and delete projects. Each project should display the list of
team members and tasks.

3. Task Management
Create pages where users can create, view, update, and delete tasks within a project. Each task should display
the list of assignees and comments.

4. Comments
Create functionality to add, view, and delete comments on tasks.

Additional Requirements
1. Relations: Ensure proper relationships between users, projects, tasks, and comments using many-to-
many and many-to-many through relationships where appropriate.
2. Security: Implement appropriate security measures to ensure data protection and access control.
3. Documentation: Provide clear documentation for the API endpoints and the frontend application.

Rubric
Your submission will be evaluated based on the following criteria:
1. Functionality: Completeness and correctness of the implemented features (40%).
2. Code Quality: Cleanliness, readability, and maintainability of the code (20%).
3. Security: Implementation of security best practices (20%).
4. Documentation: Quality and clarity of the provided documentation (10%).
5. User Interface: Usability and aesthetics of the frontend application (10%).
Good luck, and may the best developer win!