LinkInPurry

Prepared to fulfill Milestone 1 Assignment - IF3110 Web-Based Application Development

Table Of Content

• Website description
• Requirements
• How To Run
• Snapshots
• Bonuses
• Task Division

Website Description

LinkInPurry is a website intended to connect jobseekers and companies. The design was made by imitating LinkedIn. There are three parties that can use the website: jobseekers, companies, and guests. Guests (not logged in) can only see three pages: login, register, and home. Jobseekers can access the following pages: login, register, home (jobseeker), detaillowonganjs (jobseeker), lamaranjs (jobseeker), and riwayat. Companies can access the following pages: login, register, home (company), profilcom, editprofil, addjob, detaillamarancom (company), detaillowongancom (company), and editjob. The website was built purely using HTML, CSS, JavaScript, and PHP.

The following is a table containing all functionalities of this website.

F_ID	Functionality
F01	Website allows authenticated users to log in
F02	Website allows unauthenticated users to register or see jobseeker's home page
F03	Website allows jobseekers to see available jobs
F04	Website allows jobseekers to search jobs by name, filter by job type and location type, and sort jobs by their release date and time
F05	Website allows jobseekers to apply for an open job
F06	Website allows jobseekers to see their job applications history
F07	Website allows companies to see and edit their profile
F08	Website allows companies to post a job
F09	Website allows companies to edit/delete/close posted job(s)
F10	Website allows companies to accept/reject job applicants with the reason of their decision
F11	Website allows companies to export job applicants' data to a CSV file

Requirements

Docker Desktop

How To Run The Website

Open 1 terminal tab

1. Run docker with the following command

docker compose up --build -d

2. Seed schema database with the following command

docker exec -it if3110-tubes-2024-k03-02-db-1 mysql -u purry -p
# password: platypus

use linkinpurry-db

source /docker-entrypoint-initdb.d/schema.sql

3. Access the website in any browser with the following URL

localhost:8080

4. (after done using the website) Close docker connection with the following command

docker compose down

Snapshots

Login page

Register Job Seeker page

Register Company page

Home Job Seeker page

Home Company page

Tambah Lowongan Company page

Detail Lowongan Company page

Detail Lamaran Company page

Edit Lowongan Company page

Profil Company page

Detail Lowongan Job Seeker page

Lamaran Job Seeker page

Riwayat page

Bonuses

- All responsive web design

All pages are designed for two dimensions: 1280×768 and 400×800.

- LinkedIn UI/UX

All pages are purposely made to look and feel like LinkedIn.

- Data Export

Companies can export posted jobs applicants' data into a CSV file.

- Google Lighthouse

Login page

Register page

Home Job Seeker page

Home Company page

Tambah Lowongan Company page

Detail Lowongan Company page

Detail Lamaran Company page

Edit Lowongan Company page

Profil Company page

Detail Lowongan Job Seeker page

Lamaran Job Seeker page

Riwayat page

Initially, accessibility score for each pages are around 75 to 85.

Steps taken to increase accesibility score:

1. Use alt text for images: Make sure every images have the 'alt' attribute that describes the content of the image. This helps user with screen reader to understand the content of the image. Example:

<img src="path/to/image.jpg" alt="Image description">

2. Efficient use of color contrasts: Make sure texts and backgrounds have high contrasts. Use tools like WebAIM Constrast Checker to check the contrast ratio.

.text {
    color: #333; /* Darker text color for better contrast */
    background-color: #fff; /* White background color */
}

3. Use headings in the correct order:

<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Sub-Subtitle</h3>

4. Add label in form elements: Make sure every form elements have labels to help users understand the purpose of every input.

<label for="name">Name:</label>
<input type="text" id="name" name="name">

5. User aria-label for interactive elements: Add aria-label attribute on hidden-texted interactive elements like buttons and links to give accessible names.

<a href="/home" aria-label="Home">
    Home
</a>

6. Use HTML elements semantically: For better understanding of pages' structure, use semantic HTML elements like header, nav, main, and footer.

Task division

Server-side

Feature	NIM
Login	13522125
Register	13522125
Home (Job Seeker)	13522125
Home (Company)	13522125
Tambah Lowongan (Company)	13522135
Detail Lowongan (Company)	13522135
Detail Lamaran (Company)	13522135
Edit Lowongan (Company)	13522135
Data Export Lamaran (Company)	13522135
Profil (Company)	13522144
Detail Lowongan (Job Seeker)	13522144
Lamaran (Job Seeker)	13522144
Riwayat (Job Seeker)	13522144

Client-side

Feature	NIM
Login	13522125
Register	13522125
Home (Job Seeker)	13522125
Home (Company)	13522125
Tambah Lowongan (Company)	13522135
Detail Lowongan (Company)	13522135
Detail Lamaran (Company)	13522135
Edit Lowongan (Company)	13522135
Data Export Lamaran (Company)	13522135
Profil (Company)	13522144
Detail Lowongan (Job Seeker)	13522144
Lamaran (Job Seeker)	13522144
Riwayat (Job Seeker)	13522144