Design And Development Of Web Based E-Commerce

Application For Logo Sales “Tokologo” Using Codeigniter

Framework
Teguh Cahyono, ST.,M.Kom1, Nur Chasanah, S.Kom., M.Kom2, Teguh Khairmyanto
Department of Informatics, Faculty of Engineering, Jenderal Soedirman University
e-mail: teguhcahyono@gmail.com1, nurchasanah@gmail.com, teguhkdi@gmail.com

Abstract
The logo is the face of a company. Companies even willing to spend a lot of money for the
purposes of designing and making a logo to be able to get the perfect logo. This application was
built to facilitate and connect a company or business entity that needs a perfect logo with the logo
designers. This application helps and makes it easier for companies and business entities to find the
perfect logo for them and make purchases of the logo. The purchasing process is done by auction
technique. Companies or business entities that need a logo determine how much they budget for the
logo they want, then the designers who are interested in these costs can design the logo in accordance
with the demand and then sell it at a predetermined price. The right price and quality of design can then be
considered for the selection of logos to be purchased by companies who want the logo. The designer whose
logo is chosen will be paid by the company or entity according to the price set by the designer..

Keywords: e-commerce, logo, codeigniter

1. Introduction
Today, in the middle of increasingly fierce
business competition, logo is one of the keys to a
company's success, because through the right logo,
a company can get the attention of the public so that
people want to know more about the company. To
get a logo, the company or business entity must
first find the logo designer and then pay the logo
designer to create a logo for them.
The problem that then arises is the
difficulty of finding a designer to create a logo
design. In addition, the problem that also arises is
the complexity of the cost reimbursement process
that must be resolved by the company or business
entity for the designer. This happens because there
is no standard price for the logo. Regarding
determining the price is based on an agreement
between the company or business entity looking for
a logo with a logo designer. In the process of
determining the price will require a lot of
consideration because in the process there will be
bargaining before reaching an agreement.
Sometimes from price agreements that result from
disadvantaged parties. The logo designer is the
party who often loses the agreement on the price of
the logo, because the agreed price is usually not
comparable with the number of revisions to the
logo that has been made. Because, logo seekers
certainly want the best logo that can be obtained at
a minimal price.
Based on these problems, this research
makes an e-commerce application that can
facilitate sales transactions and purchase of logos,
so companies or business entities that are looking
for logos can easily obtain a logo without the need
to have trouble finding a designer first. This e-
commerce application uses auction techniques in
the sales and purchase process. The logo seeker can
determine the budgeted costs to pay for a logo, then
designers who are interested in the logo search
offer can offer a logo design that has been created
based on the needs of the logo seeker and then
determine the price themselves. Then the logo
searcher only needs to purchase the logo he wants.
If the logo searcher wants to make a revision of the
logo he has bought, the logo searcher is given the
opportunity to revise the logo 2 (two) times.
Making this application is expected to solve the
problems that have arisen in the process of
obtaining a logo for a company.
2. Literature Review
2.1. Definition of Design And Developement
2.1.1. Design
According to Ladjamuddin (2005)
design is an activity that has the aim to
design a new system that can solve the
problems faced by companies obtained from
the selection of the best alternative system.
2.1.2. Developement
According to Pressman (2002) develope
or developing a system is an activity that
 `
creates a new system or that replaces an
existing system
Therefore, it can be concluded that
design and developement is an activity of
designing and develop a new system that can
solve the problems that have been analyzed
previously.
2.2. Application
According Supriyanto (2005) is a
program that has the activity of processing
commands needed to carry out user requests with
specific objectives.
The application is the result of the
implementation of the design of a system that is
translated into a particular programming language.
The application was built to be able to facilitate
certain jobs.
2.3. E-Commerce
According to Jony Wong (2010) e-
commerce or electronic commerce is the buying,
selling and marketing of goods and services
through electronic systems such as radio, television
and computer networks or the internet.
E-Commerce can be defined as any form
of trade in goods and services carried out using
electronic system media
2.4. Logo
Surianto (2009) defines that logos come
from Greek, which is logos which means word,
thought, speech of reason.
The logo serves as a means to show self-identity
and also a sign of ownership. Logos are also used
to communicate information such as value and
quality.
2.5. Web Application Framework
According to Budi Raharjo (2018), Web
Application Framework is a collection of code in
the form of a library and tools that are integrated
in such a way as a framework (framework) in order
to facilitate and accelerate the process of
developing web applications.
2.6. Database
According to Indrajani (2015), a database
is a data set that is logically interconnected and
designed to obtain the data needed by an
organization. The database functions as a storage
of data in an information system. The database is
managed using DBMS software.
2.7. Unified Modeling Language (UML)
According to Munawar (2005) Unified
Modeling Language (UML) is one of the most
reliable tools in the world of object-oriented system
development
2.8. Web Based Application
According to Simarmata (2010), web-
based applications are software systems that are
based on World Wide Web Consortium (W3C)
technology and standards.
3. Research Method
This research uses the waterfall method.
This method is a systematic method and consists of
five stages. The following are the stages of the
waterfall method.
1. Requirements Definition
This stage aims to formulate and define user
needs for making applications, so that
application development can be carried
out on target and produce applications that
effectively solve existing problems. This
stage, begins with an analysis of the needs
in application development. The needs
analysis consists of the following
activities.
a. Study Of Literature
Study Of Literature is an activity carried
out to obtain information needed in the
design and construction of applications by
studying the literature relating to the
application to be designed and built. The
literature used in this study is attached to
the bibliography.
b. Observation
In designing the Tokologo application,
observation and analysis of similar
applications can be carried out to assist in
the development and determination of
features that will be designed for the
Tokologo application. The draft
observation plan that will be carried out in
this study can be seen on the appendix
page.
c. Inverview
Interviews were conducted with a logo
finder and a logo designer to obtain user
needs for the application to be built. The
draft interview to be used in this study can
be seen on the attachment page
2. System and Software Design
The stages allocate the requirements or
system specifications that have been obtained
by building the entire system architecture.
Software design involves identifying and
describing the abstractions of fundamental
software systems and their relationships.
At this stage the system design is based on
the results of defining the needs that have
been obtained at the previous stage. The
system design uses use Case diagram,
Sequence Diagram, and entity relationship
diagram
 `

3. System Implementation 4.2.1. Use case and sequence diagram

At this stage, software design is realized
as a series of programs or program units.
Programming is done using the PHP
programming language, HTML, CSS, and
Codeigniter framework.

4. System Testing
Each program unit or program is
integrated and tested as a complete system to
ensure that software requirements are met.

5. Maintenance
This is the longest cycle phase. The
application is installed and used practically.
Maintenance involves correcting errors that
are not found in the early stages of the life
cycle, increasing the implementation of
system units and improving system services
when new requirements are discovered.
In addition, backups of application data
are also performed to anticipate future data
damage or loss. Data backup is done using
online storage, and also uses an internal hard
drive. Picture 1. Tokologo’s use case diagram

Based on the use case in Figure 8, the system has

4. Results twenty cases, from three different users. The
4.1. Requirements Definition following is an explanation and description of the
Based on the results of the needs analysis case in tokologo use case.
obtained from literature studies, observations of
similar applications, and interviews with users, it is 1. Case Cari Logo
formulated that the application to be built can carry Is a case related to the process of starting
out the following processes : a logo search by a logo searcher. The following is
a scenario of the case search logo.
1. Perform a logo search based on needs and 1.1. Cari Logo Scenario
funds provided by the logo finder, make Actor : Pencari Logo
revisions to the logo, and make a purchase Description : Actors carry out the
of the logo process of starting a logo
search
2. Perform logo sales, upload logos and Initial Conditions : Aktor sedang login aplikasi
upload the final logo file.
Table 1. Cari Logo’s Scenario
4.2. System and Software Design
At this stage the application design is done
by referring to the results of the needs analysis that
has been done. The design of the application is
done using use Case diagrams, sequence diagrams,
and entity relationship diagrams
 `

Actor’s Action System Response

1. 2. Showing form Actor’s Action System Response
Click the cari logo determine budget 1. Click the view 2. Showing the
menu detail button on the description page of
3. 4. Save the logo search the logo search
Fill out the form request needs
and press the save 3. Click the 4. Showing the
request button submit logo tab submit logo form
5. Showing the 5. Fill in the 5.
needs description submit logo form, Save the logo and
page check the statement showing the search
6. 7. to understand and room
Fill the form Save a description comply with
description needs of needs applicable
and click the save regulations, then
description button click the submit
button

Picutre 2. Cari Logo Scenario Sequence Diagram

Picutre 3. Jual Logo Scenario Sequence Diagram
2. Jual Logo Case
Case is related to the process of offering 4.2.2. Entity Relationship Diagram
the sale of a logo by a designer to a logo seeker. To describe the data contained in the
The following scenario is in Case selling logo. application being built, as well as the relationship
2.1. Jual Logo Scenario between these data, then entity relationship
Actor : Desainer diagrams are used. The following entity
Description : Actors make sales offers relationship diagram application is built, which can
for logo seekers who are be seen in the picture below.
looking for logos.
Initial Conditions : Aktor sedang login
aplikasi, dan sedang
berada pada halaman
jual logo.

Table 2. Jual Logo’s Scenario

Picutre 4. Entity Relationship Diagram

4.2.3. Interfaces
1. Page Jual Logo Interface Design
This page is the page that appears when
the logo designer clicks on the c menu. This page
is an interface created by referring to the Case Sell
Logo. The following is the interface design of the
sell logo page which can be seen in the image
below
 `

public function jual_logo()

{
$datauser['pengguna']=$this
->db-
>get_where('pengguna',['Ema
il' => $this->session-
>userdata('Email')])-
>row_array();

$cekdesainer=$this-
Picture 5. Page Jual Logo Interface Design >db-
>get_where('desainer',['IDP
engguna'=>$datauser['penggu
2. Page Tentukan Anggaran Interface Design
na']['IDPengguna']])-
This page is the page that appears when >row_array();
the logo searcher clicks on the search logo menu. if
This page is an interface created by referring to the Picture 8. Jual Logo Code Snippet
($cekdesainer!==NULL) {
Case Search Logo. The following is an interface 4.3.2. Tentukan Anggaran Implementation
design page set budget which can be seen in the This page $pencarianlogo['penc
is a page that implements a
picture below arianlogo']=
budget-determined interface$this-
design. This page
>PencarianLogoBerlangsung_M
appears when the logo finder accesses the search
odel-
logo menu.>PengelolaanPencarian()-
The following is an image of the
implementation of determining the budget.
>result();
$this->load-
>view('Desainer/Header_Desa
iner', $datauser);
$this-
>load-
>view('Desainer/Desainer_Ju
alLogo',$pencarianlogo);

Picture 6. Page Tentukan Anggaran Interface

Design

4.3. System Implementation

4.3.1. Jual Logo Implementation
It is a page that implements the logo sale
interface design. The following picture is the
implementation of jual logo.
Picture 9. Tentukan Anggaran Implementation
The process on this page occurs in the PencariLogo
controller, which is the search_logo function. This
function displays a view that contains a budget
form and a logo search package option. After the
logo searcher fills in the form and selects the
package, and presses the save request button, it will
perform the save_appointment function. The
following is tentukan anggaran implementation
code snippet

public function cari_logo()

Picture 7. Jual Logo Implementation {

$datauser['pengguna']=$this
The process that occurs is to display all data from
->db-
the logo search in progress and display it. The >get_where('pengguna',['Ema
following is the jual logo code snippet il' => $this->session-
>userdata('Email')])-
>row_array();

$cekdataakun['dataakun']=$t
his->db-
Picture 10. Tentukan Anggaran Code Snippet
>get_where('pencarilogo',['
IDPengguna' =>
$datauser['pengguna']['IDPe
ngguna']])->row_array();
if (
$cekdataakun['dataakun']!==
NULL){

$cekpermohonan['pencarianlo
 `

4.4. System Testing Incorrect Incorrect Accepted

Testing is done by referring to existing data logo size or
cases. there are twenty cases from three different inputting format
users. The following are the results of application Menam Pressing Display the Accepted
testing which can be seen in the table below. pilkan the logo logo page
logo menu sold sold
Table 3. Testing Result terjual
Menam Pressing Displaying Accepted
Goods Testing Detail Output Conclus pilkan the logo logo page
Testing ion logo menu offered
Login Data is Display Accept ditawar offered
correctly Home ed kan
inputted
Incorrect Login Failed Accept 4.5. Maintenance
data inputted ed At this stage, maintenance of applications
Logout Press the Display the Accept that have been built. Maintenance includes
logout Login Page ed checking application features every 3 (three)
button months. If any damage is found to the application
Daftar Data is Display the Accept features after checking, it will immediately repair
correctly Login Page ed the application.
inputted
Incorrect Registration Accept 5. Conclusion
data inputted failed ed 5.1. Conclusion
Edit Data is Data Saved Accept Based on the discussion above, several
Profil correctly ed conclusions are drawn:
inputted 1. Design and Development of e-commerce
Application "Tokologo" logo sales are
Incorrect Data Failed Accept
carried out by using the concept of object-
data inputted to Save ed
Ganti
based programming that is using a
Data is Display Accept
Foto codeigniter framework
correctly Home ed
2. The "Tokologo" logo sales e-commerce
inputted
application facilitates the logo finder to
Incorrect Incorrect file Accept
describe the logo seeker's needs and desires
data inputted size or ed
when conducting a logo search, so that the
format
logo offered later by the logo designer will be
Menam Menu Shows the Accept
pilkan
in accordance with the wishes and needs of
pressing the menu of ed the logo seeker.
Cara way it works how it
Kerja 3. The "Tokologo" logo e-commerce sales
works application facilitates the logo finder to
Menam Menu Display the Accept
pilkan
describe the logo seeker's needs and desires
pressing admin ed when conducting a logo search, so that the
Kontak admin contact
Admin logo is offered later by the logo designer will
contacts menu be in accordance with the wishes and needs
Hapus Press the Selected Accept of the logo seeker.
Permoh delete key application ed
onan 4. The e-commerce application "Tokologo"
deleted logo sales has been running well as seen from
Akhiri Press the The selected Accept the results of the application testing on page
Pencari delete key search is no ed
an
6 which shows all the features are running
longer according to their functions.
displayed
Konfir Press the Confirmatio Accept
masi payment n Successful ed
Pembay confirmation
aran button
Hapus Press the Selected Accept
Desaine delete key designer ed
r deleted
Jual Data is Displays the Accept
Logo correctly search room ed
inputted page
 `

5.2. Suggestion
Suggestions that need to be considered for future
application development include:
1. Integrate applications with a third party
payment system, so that the payment process
can be more efficient.
2. The payment process for logo search
packages and logo purchases will be better if
it is made in one payment process, so that the
payment process carried out by the logo
searcher can be more efficient
3. If there is a logo uploaded by a logo designer
on a logo search for a logo searcher, it will be
better if a notification is given on the logo
search homepage.

References
Indrajani. 2015. Database Design (Case Study All
in One). Jakarta. PT. Elex Media
Komputindo.
Ladjamudin. 2005. Analisis dan Desain Sistem
Informasi. Yogyakarta. Graha Ilmu.
Munawar. 2005. Pemodelan Visual dengan UML.
Yogyakarta. Graha Ilmu.
Pressman, Roger S. 2002. Software Engineering.
New York. McGraw Hill.
Raharjo, Budi. 2018. Belajar Otodidak Framework
Codeigniter. Bandung. Informatika.
Simarmata, Janner. 2010. Rekayasa Perangkat
Lunak. Yogyakarta. Penerbit Andi
Surianto, Rustan. 2009. Mendesain Logo. Jakarta.
Gramedia Pustaka Utama.
Supriyanto. 2005. Perancangan Aplikasi.
Surabaya. Widyastana.
Wong, Jony. 2010. Internet Marketing for
Beginners. Jakarta. PT Elex Media
Komputindo.