DESIGN OF THRIFT SHOP E-CATALOG INFORMATION SYSTEM USING PHP AND JAVASCRIPT (CASE STUDY: MEYTWINS THRIFTING)

Currently, there is a popular trend among the younger generation regarding the use of used clothes. What's interesting is the emergence of the online thrift shop, which is a type of business that is booming in the fashion sector by selling used clothes through online platforms. Generally, these business people get clothing supplies in the form of bales (sacks) imported from abroad. The Online Thrift Shop has received a positive response from many young people by offering clothing that has a unique style in a retro or vintage atmosphere from the 90s, as well as world-famous brands. However, one of the obstacles faced by the online thrift shop is the mismatch between the products received by consumers and what was initially displayed by the seller. There are situations where the goods delivered to consumers do not match the description given by the seller. This phenomenon is one of the shortcomings that need to be considered in online thrift shop operations. There are many online shops that sell goods to consumers that do not match what is offered. This makes consumers' shopping confidence and comfort less comfortable. The aim of the research is to build an information system in the form of an e-catalog that can simplify the buyer process without having to come to the store, as well as provide information related to fashion products that are suitable for consumers or customers. In this research, we used the prototype method, then for the system design tools, we used UML modeling, and for database modeling, we used ERD. Information system built using PHP and Javascript. Then, based on the test results using BlackBox Testing from several respondents, the success rate of the system built was 95%.


INTRODUCTION
The Meytwins Thrift Shop is an online shop that sells used clothing with products that guarantee the information and products offered match what is displayed in the online shop.Currently, used clothes are becoming a trend among the younger generation.What's interesting is the presence of online thrift shops, which are currently popular as a type of business that is developing in the fashion industry.This business focuses on selling used clothing through online platforms.
Generally, business people acquire clothes in the form of bales (sacks) imported from other countries.Online thrift stores have become very popular among young people by offering clothing that has a special appeal because it carries a retro or vintage style from the 90s and includes well-known global brands.A website is a collection of pages containing information stored on the internet that can be accessed or viewed via the internet network on devices that can access the internet itself, such as computers [1].The Online Thrift Shop website can make it easier for businesses or shops to promote their products and for consumers to get information about the products owned by sellers or shops [2].One of the negative aspects of the online thrift shop is a situation where the product received by the consumer is not in line with what was initially presented by the seller.Many online stores face the problem of selling goods to consumers that do not match the description offered.This phenomenon results in reduced levels of trust and comfort in the shopping experience for consumers.DOI: https://doi.org/10.54732/jeecs.v8i2.8Available online at: https://ejournal.ubhara.ac.id/jeecsTherefore, to provide services which can make it easier for consumers to shop for a product and gain consumer trust and comfort.A good concept is needed that will be used by Meytwins Thrift Shop, so there is a need for a websitebased information system for the online thrift shop using PHP and Javascript programming languages, which is expected to provide services that make it easier for consumers and increase confidence in the products they want to buy because the products displayed are guaranteed.according to what is offered on the web.

RESEARCH METHODOLOGY 2.1 Website, PHP, and JQuery
A website can be described as a set of pages designed to display a variety of information in the form of text, still or moving images, animation, sound, or a combination of all these elements.Each of these pages can be related to each other and connected through a network of pages.The link between one web page and another web page is called a Hyperlink, while the text that serves as the connecting medium is called Hypertext [3].
PHP stands for Hypertext Preprocessor, a server-side programming language that is executed on the server side.One of PHP's main roles in website development is to manipulate data in the database.This process involves storing, editing, deleting, and displaying data on web pages.With the help of PHP, the information on the website can be processed and organized efficiently, allowing dynamic interaction between the user and the content coming from the database [4].
Jquery is an add-on library for the JavaScript programming language.Conceptually, Jquery can be thought of as a bunch of pre-prepared JavaScript code that you can utilize.In general, all you need to do is insert a line or two of code in your page that calls the pre-built Jquery code.By doing this, Jquery takes over most of the complex work of writing JavaScript code, so you don't have to face the same challenges as when writing code from scratch.With this approach, Jquery takes the heavy burden of writing JavaScript code for you [5].

Javascript and CSS (Cascading Style Sheet)
Javascript is processed on the client computer.Because the processing is done on the client computer, JavaScript is more interactive than PHP.The role of JavaScript in creating websites is to provide interesting animation effects and interactivity in handling events carried out by website users [6].
Cascading Style Sheet (CSS) is a web programming language that consists of a series of commands.These commands are collected from various sources and arranged in a certain order.The main purpose of CSS is to organize the appearance and presentation of components on a web page.By using CSS, we can organize the style and layout of elements on a web page in a more structured and uniform manner.One of the key features of CSS is its ability to handle style conflicts that may arise, allowing developers to easily control how certain elements will be displayed on various devices and screen sizes [7].

XAMPP and MySQL
XAMPP is web server software used to facilitate website development.In its package, XAMPP provides a MySQL database server and supports the PHP programming language.XAMPP is presented in the form of a graphical interface that makes it easier for users to manage the web development environment.This application can be run on various operating systems, such as Windows, Linux, and Mac OS [8].
MySQL is a relational database management system (RDBMS), which acts as a system application for carrying out data management processes.Its function is to manage and organize data in a database using the SQL language.One important aspect of MySQL is that it is open source, which means that we can use it at no cost.Programming using the PHP language also has high compatibility with the MySQL database [9].

E-Catalogue
E-Catalogue is a container for storing electronic information about various goods, products, or services.As a component of e-Procurement, e-Catalogue has a central role because it contains a complete list of items, specifications, and prices that are used as a reference in comparing various similar products.Through e-Catalogue, service users can verify whether offers submitted by suppliers comply or not with established standards [10].

Prototype Method
The prototype model is a common method in software development.In the prototype method approach, interaction occurs between the development team and customers during the system creation process.There are situations where customers provide only a general definition of their requirements, including how the data should be processed [11].On the other hand, developers may pay less attention to aspects of algorithm efficiency.This approach also emphasizes the capabilities of the operating system and the interface that connects the user to the computer [12].Available online at: https://ejournal.ubhara.ac.id/jeecs

Identification of problems
The problem identification phase is used to find out the problems that exist in the research object.This identification also determines whether the problems obtained can be researched.The results of this identification will be in the form of a problem formulation, problem limitations, and research objectives.

Formulation of the problem
The results of the previous problem identification will produce a problem formulation.Problem formulation is carried out to determine the objectives of the research to be carried out.This stage is carried out directly at the Meytwinst Thrift Shop.

Data collection
To complete the research, data collection was carried out as follows: a. Observation The use of field studies (observations), or observation methods, is a data collection technique that involves researchers directly interacting with the environment being studied.The aim is to observe problems that occur directly at the location of the incident.Observations are carried out systematically on various events, behaviors, objects, and other relevant elements to support the ongoing research process.This research is like visiting a well-known place selling clothes.The location for this data collection was Meytwins Thrifting Store, which is located on Jl.Raya, South Tangerang.Available online at: https://ejournal.ubhara.ac.id/jeecs

b. Interview
The interview method was carried out with the aim of obtaining information that was considered important regarding the buying and selling transaction process at Meytwins Thrifting.In this case, the type of interview used is a free interview.In this interview, the sources involved are the owners and regular customers of Meytwins, where they provide information regarding their experiences and views regarding the transaction process on the platform.

c. Literature Review
In this phase, the data collection process is carried out by searching, reading, and collecting various documents as references, such as standards, articles, and literature related to the chosen topic.This information is related to the research object and is used as a theoretical basis for developing the Meytwins Thrifting website information system.

Prototype Method
To build the system, the development method used is the prototype method.The prototype itself has stages, namely identifying system requirements, quick design, building a prototype, user evaluation, improving the prototype, and implementing and maintaining the system.

Design Systems
Before creating a program, the system must first be designed using UML models such as use cases, activity classes, and sequence diagrams.These diagrams will explain how the system works.To design a database, you can use the ERD model.

Program Development
Once you have finished designing the system, you can start creating the program.The program that researchers use is the PHP programming language and the CodeIgniter framework and uses Boostrap for a better website display and uses MySQL as a database.

Testing
After Program Development is complete, of course the program must be tested first before being used by the client.This test was created to obtain an application that can be effective and efficient.For this stage, black box testing is used as the method.

RESULTS AND ANALYSIS 3.1 Business Process Analysis
The table below is a business process analysis using SWOT analysis, which provides an explanation of the thrift shop e-catalog.Following are the results of the SWOT analysis as presented in Table 1 and 2

Running System Analysis
The table below is a business process analysis using SWOT analysis, which provides an explanation of the thrift shop e-catalog.Following are the results of the SWOT analysis.
Business process analysis is one of the stages in system design carried out at Meytwins Thrifthing to compare the current business processes with the business processes that will be proposed.Based on the flow diagram in Figure 3, the results of the research can be displayed, which can be explained for further analysis and implementation of the results of the research that has been carried out.

Description of Transaction Procedures
Based on the results of interviews with those in charge of admin and shop owners, So it can be concluded that the current transaction procedures at the Meytwins Thrifthing Shop are as follows: 1. Consumers enter the website menu that is available to make transactions.In this process, admin accounts and consumer accounts will be distinguished.2. After entering the email and password in the login menu, if the consumer has never registered, he will be directed to register an account first and fill in personal data such as name, email, password, and user profile photo.Available online at: https://ejournal.ubhara.ac.id/jeecs

System Requirements Design 3.4.1 Use Case Diagram
Based on Figure 5 above, it is a diagram used to design a system by describing the interaction of actors with the system.There are actors, namely admins and consumers, as well as use cases for logging in, registering users, managing profile data, managing product data, managing product transactions, and managing messages.

Activity Diagram
Figure 6 explains processing transaction data, where consumers can cancel transactions and are also required to fill in complete personal data to continue with the payment process.After the payment process is complete, transaction information will be received by admin according to the consumer's order.

Activity Diagram
Figure 7 explains the sequence diagram above.User actors (application users) send requests to manage transaction data to the system.The system contacts the database to obtain existing transaction data.The database sends existing transaction data back to the system.The system sends transaction data to the user.The user actor sends a request to add a new transaction to the system.The system saves new transaction data into the database.The database sends confirmation that the new transaction data has been successfully saved to the system.The system sends confirmation to the user actor that the new transaction has been successfully saved.The user actor sends a request to edit transaction data.The system updates transaction data in the database.The database sends confirmation that the transaction data has been updated.The system sends confirmation to the user actor that the transaction data has been updated.The user actor sends a request to delete transaction data.The system deletes transaction data from the database.The database sends a confirmation that the transaction data has been deleted.The system sends confirmation to the user actor that the transaction data has been deleted.The sequence diagram above illustrates the basic steps that occur when a user manages transaction data in the system.

Class Diagram
A class diagram is a visual representation of the structure of the classes in the online shop system.In this diagram, there are several main classes that represent important entities in an online shop.First, there is the "User" class, which represents online shop customers.This class has attributes such as name, address, and contact information.In addition, the "Product" class represents products sold in the online shop, with attributes such as name, price, and description.Next, there is the "Order" class, which represents customer orders.This class has a relationship with the "User" and "Product" classes, indicating that an order can be associated with a specific customer and contain the ordered products.The "Order" class also has attributes such as order date and order status.

Entity Relationship Diagram
Figure 9 shows that the ERD consists of 8 entities, namely user, admin, product, category, message, cart, and wishlist.Each user can carry out many shopping transactions and send messages to the admin.Each product can be used in many transactions as long as the stock is sufficient.An ER diagram (entity-relationship diagram) is a visual representation of a data structure used to describe entities (objects or concepts), relationships between entities, and related attributes in a system or application.To depict the ER diagram of an online shop, we can consider the main entities such as "user," "product," and "order".Choose clothes and checkout without filling out the product order form.
The system will display the message "Please fill out this field" because there is a product column that has not been filled in.
Select clothes and the checkout process, and fill in the product order form completely.
The system will display the message "Order has been entered".√ √ √ √ √ Valid

3.
Input product data without filling in the buyer's address.
The system will display the message "Please fill out this field" because there is a product column that has not been filled in.
Input product data without filling in the transaction to be selected.
The system will display the message "Please fill out this field" because there is a product column that has not been filled in.√ √ √ √ x InValid

5.
Input product data, fill in all columns, and click order.
The system will display a message that the order has been entered.√ √ √ √ √ Valid

User Interface
The developed Meytwins Thrifthing Shop system interface is presented in Figures 10 and 11. Figure 10 presents the initial system interface when running; Figure 11 presents the product management menu.

Testing
In system testing carried out at the Meytwinst Thrifthing Shop, researchers included five officers from the administration and management sections, namely:

Figure 2
Figure 2 above explains the stages or steps in conducting research.And the process of the research stages is explained, namely:

Table 1 .
. Strategy Analysis of Internal Factors

Table 2 .
Strategy Analysis of External Factors

80 Difference = Opportunity -Threats 0.55 Figure
3. Activity Diagram of the Running System