DESIGN AND BUILD WEB-BASED FREELANCE APPLICATIONS

: In today's modern era, many people have switched to looking for freelance work. One of the interesting things is freelance work because there is no work attachment to employee status, so that the person can have several jobs at one time. But until now, to find freelance work is not easy because usually many job search applications provide services only for permanent workers. For companies that are looking for freelance labor is also not easy, because freelance job search provider services are also not much. The purpose of designing this Lancer application is to make it easier for people who want to find freelance jobs. This website is designed using UML (Unified MarkUp Language). The method used in building this website uses SDLC (Software Development Life Cycle) which includes the stages of analysis, design, creation, and testing. This website is created using Laravel and MySQL frameworks.


INTRODUCTION
In today's modern era, many people have switched to looking for freelance work.Because of the many advantages obtained in freelance work, including flexible working time, workers can adjust work time with other activity times whose most important work is completed.Freelancers or freelancers or also called freelancers can work anywhere and are free to choose jobs that suit their expertise.And usually, freelance work does not take a long time, when the project is completed, the sign is that the freelancer's work is also completed.In addition, freelance workers can also work in several companies at one time, this of course can add portfolio value and improve the skills of the freelancer.The benefits of freelance workers are not only obtained by freelance workers but companies or Recruiters or also called petekrut, also get benefits.Among the benefits obtained by the company is financial gain.Usually, companies / recruiters hire freelancers based on projects within a limited period of time.Companies simply pay freelancers based on projects and do not have to pay various benefits fees like full-time employees receive.In addition, because freelancers always work in several places, this makes freelancers more experience so that freelancers are more skilled and always updated in terms of knowledge.But until now, freelance job information is not easy to get both for freelance job seekers and companies that want to recruit freelance workers.Many applications today are for full-time workers.The design of making the web-based Lancer application is intended for freelance workers to make it easier to find jobs that match their fields and expertise and is also intended for companies that are looking for freelancers to make it easier for companies to get freelance workers according to the criteria needed.This website can store freelancer and company data because this website has a database.

RESEARCH METHODOLOGY
This research, using the System Development Life Cycle (SDLC) method, and several stages are: 1. Planning stage, at this stage planning is carried out regarding the creation of freelance websites including the needs of personal data of freelancers and companies on the website and determining the features to be created.2. In the analysis stage, the author analyzes problems in services and collects information related to existing services and the author plans to make applications to provide solutions to current service problems 3. Design Stages, In the design stage, the author makes applications using the UML or Unified Modelling Language method.For the creation of design views using the laravel framework.
Abstract: In today's modern era, many people have switched to looking for freelance work.One of the interesting things is freelance work because there is no work attachment to employee status, so that the person can have several jobs at one time.But until now, to find freelance work is not easy because usually many job search applications provide services only for permanent workers.For companies that are looking for freelance labor is also not easy, because freelance job search provider services are also not much.The purpose of designing this Lancer application is to make it easier for people who want to find freelance jobs.This website is designed using UML (Unified MarkUp Language).The method used in building this website uses SDLC (Software Development Life Cycle) which includes the stages of analysis, design, creation, and testing.
Database creation using MySQL.4. In the implementation stage, the author uses live server software to display web pages and localhost phpmyadmin to display databases.5.In this stage, the author conducts trials consisting of trials on web browsers and blackbox testing

RESULT AND DISCUSSION Lancer Website Design Stage
The process flow of this website will be explained using the uml diagram, through the freelancer use case diagram, recruiter use case diagram and activity diagram.In the use case diagram.freelancers can view the start page, view the Service page, view the listing page.On the Login page, freelancers can see recruiters who have entered companies that are looking for freelance workers, and freelancers can choose companies that match freelancers' expertise.For Use case diagrams, recruiters can enter job vacancies according to the needs of the Company.The figure below is a relationship between existing tables.

Display Design
In designing a lancer website page there are 2 website pages on this website, namely the page for freelancers and the page for recruiters

Home Display Design
The design of the home page consists of several menus such as the Lancer web application logo text, Home, Find Services, Login, and Register.Then there are also text highlights about the Lancer web accompanied by images.Then there are several services displayed in the home section.

Find Services Display Design
The design of the Find Services page is divided into several menus such as the same navigation section as before and a menu section that displays all existing services.

About View Design
The design of the About page display is a section that displays an overview of the lancer website.

Login Display Design
The login display design for users has elements similar to the register page.The login page only requires two inputs, namely for email and password.Then there is the Login button.

Recruiter Dashboard Display Design
The dashboard display design for recruiters consists of dashboard menus, requests and edit profiles, for content there is a title for the Recruiter Dashboard, then there is text for the number of requests on progress and text for requests completed, after that there is a table of latest requests.

Request Display Design
The design of the request page for recruiters consists of the title My Request, then there is a +Find Services button, and there is a table of my Requests.

Freelancer Dashboard Display Design
The dashboard display design for freelancers consists of dashboard menus, services, client orders and edit profiles, for content there is a title for the Freelancer Dashboard, then there is text for the number of services on progress, the number of services completed and text for total clients, after that there is a table of Recent Clients.

Design Services View
The design of the service page for freelancers consists of the title My Services, then there is a +Add Service button, and there is a My Services table .

Add Service Display Design
The design of the Add Service page display for freelancer users has the title Add Your Service, then there are several inputs such as title, description, service performance, service estimate, price, thumbnail, note, and tagline.And end with the Create Service button.

Client Orders Display Design
The design of the Client Order page for freelancers consists of the title Client Orders, then there is a client orders table.Kautsar D. S., et al

Display Design Edit Profile
The design of the Edit Profile page display for users consists of the title Edit My Profile, then there is a Choose File button to change the profile photo, after that there are several inputs such as Full name, Occupation, Email Address, Contact Number, Biography, and Experience.

About Page Output Display
On this About page, there is information about the Lancer website that users can know.Below is a look at the page.

Login Output Display
Login Display is where users can fill in their email and password to then enter the dashboard page.Below is a look at the page.

Display Output Register
The Register view is where the user creates an account and will be verified, then the user can enter the dashboard.Below is a look at the page.

Output Display of Recruiter Dashboard Page
The Recruiter Dashboard page will be displayed to users after successfully logging in.On this page, recruiters can see the number of requests on progress, requests completed, and latest requests.

Requests Page Output Display
The Request page is a page where recruiters can see a list of freelancers who have been hired.Below is a look at the page.

Client Orders Page Output Display
The client orders page is a page where a freelancer can see a list of clients who have requested the creation of services offered.Below is a look at the page.

Output Display of Edit Profile Page
The Edit Profile page will be encountered by users when they want to update or edit their profile information.Below is a look at the page.Kautsar D. S., et al The application runs successfully and is well connected to the database.(Successed)

CONCLUSION
The lancer website has been successfully created and implemented using the laravel framework and mysql.This website provides information on job vacancies for freelance workers, making it easier for freelancers and recruiters or companies who will look for work and find workers.On this website there is also a portfolio update for freelancers who have added to their experience.From the test results that have been carried out using three browsers, it can be concluded that all features can run well as expected.

Figure 1 .
Figure 1.Use Case Diagram Freelancer Figure 2. Use Case Diagram Reicruter In this Activity diagram, freelancers can perform several activities such as logging into the application to manage the services provided, managing orders from recruiters, and sending requests to other freelancers.

Figure 3 .
Figure 3. Freelancer Activity Diagram Looking for Work

Figure 4 .
Figure 4. Class Diagram Freelancer This lancer website has 10 tables, namely usertable, user detail table, user experience table, service table, user advantage table, tagline table, service advantage table, service thumbnail table, order status table.The figure below is a relationship between existing tables.

Figure 6 .
Figure 6.Home Display Design

Figure 7 .
Figure 7. Find Services Display Design

Figure 8 .Figure 9 .
Figure 8.About View Design4.Register Display DesignThe register display design for users consists of a Sign up title and several inputs that need to be filled in, including Full Name, Email, Password, and Confirm Password.Then there is a Sign Up button.

Figure 14 .
Figure 14.Design Services View

Figure 15 .
Figure 15.Add Service Display Design

Figure 16 .
Figure 16.Client Orders Display Design

Figure
Figure 17.Display Design Edit Profile

Figure 18 .
Figure 18.Home Page Output Display 2. Find Services Page Output Display On the Find Services page, users can see a list of existing services from various freelancers.Below is what the page looks like

Figure 20 .
Figure 20.About Page Output Display

Figure 23 .
Figure 23.Output Display of Recruiter Dashboard Page

Figure 24 .
Figure 24.TDisplay Output Page Requests8.Output Display of Freelancer Dashboard PageThe Freelancer Dashboard page will be found by the user after successfully logging in and then clicking the freelancer dashboard button.On this page, freeelancer can see the number of services on progress, services completed, clients total, and latest clients .Here's what the page looks like.

Figure 25 .Figure 26 .
Figure 25.Output Display of Freelancer Dashboard Page9.Services Page Output ViewThe service page is a place where a freelancer can see a list of services they have created before.Below is a look at the page.

Figure 27 .
Figure 27.Add Service Page Output Display

Figure 28 .
Figure 28.Client Orders Page Output Display

Figure 29 .
Figure 29.Edit Profile Output DisplayTrialFreelance application trials are carried out to test and verify all application functions, as well as ensure whether the application runs properly or not.The test method used is black box testing.Tabel 1. Browser Trial No. Browser Type Version Result 1. Google Chrome 115.0.5790.171