PERANCANGAN APLIKASI

PEMBUATAN GENERATOR PADA

BIDANG E-COMMERCE

Dika Farza Anugrah

Information Technology, Jakarta, Indonesia, 11480

Ady Saputra
Information Technology, Jakarta, Indonesia, 11480

And

Jimmy Richard Timotius Dumalang

Information Technology, Jakarta, Indonesia, 11480

ABSTRAK
Karya ini adalah membuat rancangan sistem aplikasi online berbasis website yang
ditujukan untuk mendukung proses pembuatan e-commerce. Perancangan aplikasi
pembuatan website ini mendukung untuk memenuhi keinginan para pengguna yang
membutuhkan aplikasi website e-commerce. Metode penelitian yang digunakan dalam
penyusunan skripsi ini adalah metode analisis, yang meliputi studi kepustakaan dan studi
lapangan dengan melakukan kuesioner untuk memperoleh user requirement dan
observasi dengan membandingkan website sejenis beserta survey untuk mengetahui
apakah aplikasi yang kami rancang sudah dapat bermanfaat dalam memecahkan
permasalahan pada aplikasi sejenis yang sudah ada. Metode perancangan yang
digunakan terdiri atas perancangan sistem dan perancangan layar. Hasil Penelitian yang
dicapai dari penelitian ini adalah sebuah aplikasi online berbasiskan web yang
dibutuhkan pengguna dalam merancang e-commerce. Simpulan yang dapat ditarik

2
adalah aplikasi online berbasiskan web yang menyediakan fitur mudah untuk merancang
suatu website pada bidang e-commerce. Aplikasi web yang dirancang dapat memenuhi
kebutuhan para pengguna yang menginginkan e-commerce dengan proses yang sangat
singkat.
Kata kunci :
Perancangan, Aplikasi web, Web generator, E-commerce

1. Pendahuluan

Di zaman globalisasi saat ini, perkembangan teknologi informasi sangat

berperan penting dalam kehidupan manusia. Seiring dengan perkembangan
teknologi informasi yang semakin maju, maka dibutuhkanlah suatu sistem yang
dapat memudahkan proses transaksi penjualan. Metode manual seperti transaksi
secara langsung antara pembeli dan penjual pada zaman sekarang bisa dikatakan
kurang efektif, terutama untuk pembelian yang dilakukan oleh konsumen di luar
kota.
Dalam dunia bisnis, satu hal yang ditekankan ialah konsumen merupakan
raja karena konsumen adalah salah satu faktor yang sangat penting untuk
menentukan keberhasilan suatu bisnis. Untuk itu, produsen harus melakukan dan
memberikan yang terbaik kepada konsumen agar kepuasan konsumen dapat
terpenuhi.
Banyak cara yang dapat ditempuh oleh produsen dalam memperkenalkan
produknya, salah satunya ialah dengan menggunakan internet. Internet media
yang paling baik untuk melakukan promosi dalam penawaran produk dan
pertukaran informasi. Dengan perkembangan internet, berkembang pula ecommerce. Yaitu pelayanan elektronik perdagangan uang meliputi pembelian
penjualan penyebaran pemasaran barang dan jasa melalui sistem elektronik.
Mengingat pentingnya peranan e-commerce dalam perkembangan
teknologi informasi khususnya dalam bidang jual beli, maka dibutuhkan web
yang mendukung terciptanya keselarasan antara produsen dan konsumen dalam
dunia maya. Untuk itulah penulis menciptakan web e-commerce generator. Web

3
ini nantinya dapaat menyediakkan berbagaai desain didaalamnya, terrmasuk pemiilihan
temp
plate sehinggga web yangg akan dibenntuk nantinyya dapat dikoondisikan deengan
keing
ginan dan keebutuhan penngguna.

2 Metodollogi
2.

Ruan
ng Lingkup dari
d penelitian mencakuup analisa weeb generator, Merancangg Web
Geneerator dengaan fokus dibbidang e-com
mmerce, dann Mengimpleementasikann Web
geneerator ruang dunia maya atau online.
Adap
pun pembahasan
- Perrancangan
- Imp
plementasi
- Evaaluasi

2.1 Pera
ancangan

Gambaar 3.38 Skem

ma sistem e-ccommerce geenerator

4
Skema diatas merupakan bentuk dasar pembentukan e-commerce
generator. e-commerce generator akan terfokus pada bagian view. Kinerjanya
adalah satu unit e-commerce (e-commerce generator technical) akan dibentuk
terlebih dahulu, lalu model dan controller e-commerce tersebut akan disimpan
dalam sistem, sehingga hanya view e-commerce yang akan dibentuk secara
dinamis didalam e-commerce generator. Setelah view dirancang dalam ecommerce generator, maka view e-commerce tersebut kemudian digabungkan
bersama model dan controller e-commerce. Semua itu selanjutnya masuk ke
dalam tahap generate sehingga akan didapatkan hasil e-commerce yang baru.

2.2 Implementasi
a. Server
Untuk dapat mengimplementasikan sistem ini kedalam server,
dibutuhkan persyaratan dan langkah sebagai berikut:
-

Web hosting
Web hosting adalah wadah yang diperlukan sebuah server untuk

menyimpan halaman-halaman web beserta database web tersebut agar

dapat terimplementasi secara online. Cara mendapatkan web hosting
yang disarankan adalah dengan menggunakan web hosting yang
berbayar. Hal ini dimaksudkan untuk mencegah adanya gangguan
technical error seperti server down yang biasa terjadi pada web
hosting gratis.
-

Upload
Langkah selanjutnya adalah proses mengupload setiap halaman

5
dari web yang diimplementasikan sistem ini kedalam web hosting
agar web ini nantinya dapat tampil secara online dan dapat diakses ke
seluruh dunia.
b. Client
-

Membuka browser pendukung

Client membutuhkan browser pendukung seperti Mozilla

Firefox, Chrome, ataupun Internet Explorer yang telah terakses

dengan internet sebelumnya.
-

Menuliskan alamat web

Client kemudian menuliskan alamat web yang dituju pada

browser tersebut. Alamat web ini mengacu kepada alamat identitas

web yang telah dipilih client sebelumnya pada saat melakukan
hosting. Setelah menuliskan alamat web, halaman index akan muncul
dan web ini siap digunakan.

Gambar 4.5 Pemilihan template dasar

Gambar diatas merupakan halaman pemilihan template yang disediakan
oleh e-commerce generator untuk user yang telah melakukan login. Member
dapat dengan mudah memilih langsung template yang dibutuhkan dalam
merancang e-commerce. Dalam hal ini web e-commerce generator menyediakan
2 buah pilihan template e-commerce. Ketika member mengklik salah satu dari
template yang disediakan, sistem akan menampilkan preview gambar yang
diperbesar. Di halaman ini terdapat beberapa kolom yang dapat diinput member
berupa:

Website Information
Pada kolom ini member dapat memasukkan nama website pada
kolom website name. Kolom subtitle tersedia untuk member sebagai
tambahan keterangan untuk mendeskripsikan nama website. Member
dapat mengisi footer web page pada kolom footer text.

Logo
Kolom logo dapat diinput member untuk memberikan logo berupa
gambar bertipe file JPG, PNG, BMP dengan mengklik tombol browse.
Terdapat 3 buah link yang ada di halaman ini, yatu tombol exit prev

dan next. Tombol prev digunakan jika member ingin kembali ke halaman
sebelumnya. Tombol next digunakan jika member telah selesai melakukan
pemilihan template dan melangkah ke proses selanjutnya.

Gambar 4.6 Edit layout

Gambar 4.6 merupakan langkah kedua untuk mengubah tampilan
template yang telah dipilih sebelumnya. Pada halaman ini tersedia 4 menu editor
yang dapat digunakan yaitu, Background, Title, Default Font, dan Main Menu.

Gambar 4.7 Color picker

Background
Menu editor background tersedia bagi member yang ingin
merubah tampilan warna background. Terdapat pilihan Website
Background dan Content Background. Website background digunakan
untuk memilih warna background dasar. Untuk pemilihan warna content,
member dapat mengubahnya melalui content background dan akan
muncul dialog yang menampilkan color picker.

G
Gambar
4.8 Font pickerr

Title
M
Menu
editor title
t
terbagi menjadi 3 sub-menu
s
yaaitu Font, Font

Color, dan
d Subtitlle Font Coloor. Sub-meenu Font digunakan untuk
u
merubah tampilan font title. Fonnt color unntuk merubahh warna fontt title.
s
font pada title.
Subtitle Font Color untuk meruubah warna subtitle

10

Gambar 4.99 Font Colorr

Default Font
F
M
Menu
editor default fonnt memungkkinkan mem
mber untuk dapat
merubah tampilan font dari conteent web. Terrdapat 2 pilihhan Font untuk
u
f
dan Foont Color untuk
u
merubaah warna fonnt.
merubah font

11

Gambar 4.10 Main Menu

M
Color

Main Meenu
B
Berfungsi
meerubah tampiilan warna laatar belakangg main menuu.

Footer Teext
B
Berfungsi
unttuk merubahh warna teks pada footer..
Font yanng disediakann oleh sistem
m adalah: Arrial, Comic Sans
S
MS, Caalibri,

Courrier New, Georgia,

G
Plaatino Linotyype, Tahom
ma, Times New
N
Roman,, dan
Verd
dana.
d halaman ini,
i yatu tom
mbol exit prev
Terdapat 3 buah linkk yang ada di
dan
n next. Toombol prev digunakan jika
j
member ingin kem
mbali ke hallaman
sebellumnya. Toombol next digunakan jika membber telah seelesai melakkukan
pemiilihan templaate dan melaangkah ke prroses selanjuutnya.

12

Gambar 4.11 Pesan Penutup

Gambar 4.11 merupakan langkah terakhir berupa pesan penutup Click
Ok to download your website. Halaman ini menampilkan button OK untuk
memproses pengunduhan website kedalam bentuk zip.

13

Gambar 4.12 Download

Gambar 4.12 adalah proses pengunduhan e-commerce. Member dapat
membuka file terlebih dahulu sebelum melakukan penyimpanan file dengan
memilih open with atau menyimpan file pada tempat penyimpanan yang sudah
ditentukan oleh browser.

14
2.3 Evaluasi
Tabel 4.1 Perbandingan web sejenis 2
Fitur
Pilih template

Zyweb.com
(trial version)
Ada

Webjadi.com
Ada

e-commerce
generator
Ada

Edit warna template

Ada

Ada

Edit warna header

Ada

Ada

Ada
Ada

Edit warna footer

Ada

Ada

Ada

Edit warna konten

Ada

Ada

Ada

Edit Huruf

Ada

Ada

Ada

Upload gambar

Ada

Ada

Ada

Shoping chart

Tidak

Ada

Ada

Generate code

Tidak

Tidak

Ada

Tabel diatas merupakan hasil perbandingan web sejenis, antara

Zyweb.com, Webjadi.com dan e-commerce generator. Pada umumnya ecommerce generator sudah memiliki fitur-fitur yang ada pada 2 web yang sejenis
tersebut. Namun difitur generate code hanya ada pada sistem e-commerce
generator. Oleh karena itu e-commerce generator memiliki keunggulan dalam hal
generate code.

15
3. Simpulan
Simpulan yang dapat diperoleh dari analisis, perancangan, implementasi
dan evaluasi e-commerce generator adalah sebagai berikut :
a.

E-commerce generator memberikan kemudahan bagi para pengguna dalam

membuat website pada bidang e-commerce.

b.

E-commerce generator menyajikan sistem pembuatan e-commerce yang mudah

dimengerti oleh pengguna.

c.

Dengan adanya e-commerce generator, maka terbuka kesempatan yang sangat

luas bagi pengguna untuk membuat e-commerce secara online.

d.

Sebagai sarana belajar dalam pembuatan e-commerce.

16
DAFTAR PUSTAKA

Basuki, Awan Pribadi. (2010). Membangun Web Berbasis PHP Dengan Framework
Codeigniter. (Edisi pertama). Yogyakarta: Penerbit Lokomedia.
Bentley, L. D., & Whitten, J. L. (2010). Systems Analysis & Design for the Global
Enterprise (7th Edition). New York: McGraw-Hill Companies, Inc.
Bullock, Linda. (2003). The World Wide Web. (1st Edition). Vaughn: Raintree Steck.
Connolly, Thomas and Begg, Carolyn. (2005). Database system : a Practical approach
to Design, Implementation and Management. (4nd Edition). England: Pearson
Education Limited.
Cyr, Dianne., Bonanni, Carole., Bowes, John., dan Ilsever, Joe.(2005). Beyonf Trust:
Web Site Design Preferences Across Cultures1. Journal of Global Information
Management, 13, 25-54.
Gourley, David., dan Totty, Brian. (2002). HTTP: The Definitive Guide. (1st Edition).
Cambridge: OReilly Media.
Kalakota, Ravi., dan Whinston, Andrew. B. (1997). Electronic Commerce : A Manager's
Guide. USA: Addison-Wesley.
Offutt, Jeff. dan Wu, Ye.(2009).Modelling Presentation Layers of Web Applications for
Testing. Software System Model, 9, 257-280.
O'Brien, James. A. (2005). Introduction to Information Systems. (12th Edition). New
York: McGraw Hill.
Pressman, R. S. (2005). Software engineering: a practitioner's approach. (6th Edition).
New York: McGraw-Hill.

17
Sheidernman, Ben. (2005). Designing the User Interface: Strategies for Effective
HumanComputer Interactive. (4th Edition). Massachusetts: Addison-Wesley.
Surhone, Lambert M., Timpledon, Miriam T., dan Marseken, Susan F., (2009).
WebBrowser: Application

Software, World Wide Web, Uniform Resource

Identifier, Web Page, Hyperlink. (1st Edition). Mauritius: Betascript Publishers.

Young, Margaret Levine. (2002). Internet: The Complete Refrence. (2nd Edition). New
York: McGraw-Hill.

WEB APPLICATION GENERATOR

DESIGN FOR E-COMMERCE
Dika Farza Anugrah
Information Technology, Jakarta, Indonesia, 11480

Ady Saputra
Information Technology, Jakarta, Indonesia, 11480

And

Jimmy Richard Timotius Dumalang

Information Technology, Jakarta, Indonesia, 11480

Abstract
This work is to design a website-based online application system that is intended to
support the process of making e-commerce. The design of this website creation
application support to meet the wishes of the users who require the application of ecommerce website. The research method used in the preparation of this paper is a
method of analysis, which includes the study of literature and field studies by
conducting a questionnaire to gain user requirements and compare the observations with
similar websites and their survey to find out if our application has been designed to be
useful in solving similar problems with the application that already exist. Design method
used consists of system design and screen design. The research results achieved from
this study is a web-based online application that takes the user in designing e-commerce.
Conclusions can be drawn is a web-based online application that provides features easy

2
to design a website on e-commerce field. Web applications designed to meet the needs
of users who want e-commerce with a very short process.

Keywords: Designing, web application, web generator, E-commerce

1.Preliminary

In an age of globalization, developments in information technology very important role

in human life. Along with the development of information technology is more advanced,
then dibutuhkanlah a system that can facilitate the sales transaction process. Manual
methods such as direct transactions between buyers and sellers today could be said to be
less effective, especially for purchases made by consumers outside the city.
In the business world, one thing that is emphasized is that the consumer is king for
consumers is one very important factor for determining success of a business. To that
end, the manufacturer must conduct and provide the best to the consumer so that
consumer satisfaction can be met. Many ways that can be taken by manufacturers to
introduce their products, one of them is by using the internet. The best Internet media to
promote the exchange of information and product offerings. With the development of
Internet, e-commerce is also growing. Namely electronic commerce services include the
purchase money selling the spread of marketing goods and services through electronic
systems. Given the important role of e-commerce in the development of information
technology especially in the field of buying and selling, it is necessary to support the
web is the creation of harmony between producers and consumers in cyberspace. For
this reason the authors create e-commerce web generator. This web will be able to

3
provide various designs therein, including the selection of web templates so that will be
formed later can be conditioned by the desires and needs of users.
2.Methodology
Scope of study includes analysis of web generators, Web Design Generator with a focus
in the field of e-commerce, and Implementing Web generator or an online virtual world
space. As for the discussion
-

Design

Implementation

Evaluation

2 Design
2.1.
n

Gambaar 3.38 Skem

ma sistem e-ccommerce geenerator
T
The
schemee above is the basic form of e--commerce establishmeent generatoor. ec
commerce
generator
g
willl focus on the
t view. Its performancce is a unit of
o e-commercce (ec
commerce
technical
t
gennerator) willl be formedd first, then the controller model and
a ec
commerce
will
w be storeed in the syystem, so thhe only view
w e-commerrce to be foormed
d
dynamically
y in the e-coommerce geenerator. Onnce the view
w is designedd in e-comm
merce
g
generator,
th
hen view thee e-commercce are then coombined witth the controoller model and
a ec
commerce.
All were suubsequently entered intoo a phase that
t
will gennerate the reesults
o
obtained
a new
n e-commerce.

2.2. Implementation

A server To be able to implement this system into the server, it takes the requirements
and steps as follows:
- Web Hosting
Web hosting is a container that required a server to store web pages with web database
so they can be implemented online. How to get web hosting that is recommended is to
use a paid web hosting. It is intended to prevent any technical problems such as server
down error which is common in free web hosting.
- Upload
The next step is the process of uploading each page of the web that this system is
implemented into the web hosting for this website will be featured online and accessible
to the whole world.

b. client
- Opens the browser support
Client support requires a browser such as Mozilla Firefox, Chrome, or Internet Explorer
that have been accessible to the internet before.
- Write down the web address
Client then writes the destination web address in the browser. This web address refers to
the identity of the web addresses that have been previously selected client at the time of
hosting. After writing the web address, the page will appear and web index is ready for
use.

Gambar 4.5 Pemilihan template dasar

Pictured above is a selection of page templates provided by the e-commerce generator
for the user who has logged. Members can easily select the required template directly in
designing e-commerce. In this case e-commerce web generator provides two pieces of ecommerce template option. When a member clicks on one of the templates provided, the
system will display the preview image is enlarged. On this page there are several
columns that can be inputted member:

7
Website Information
In this column member can enter the name of the website in the "website name". The
"subtitle" is available to members as additional information to describe the name of the
website. Members can fill out a web page in the column footer footer text.
Logo
Logo can be inputted column member to provide a logo is an image file of type JPG,
PNG, BMP by clicking the browse button There are 3 pieces of the link on this page,
yatu the "exit" "prev" and "next". Prev button is used if the member wants to return to
the previous page. The next button is used if the member has completed the selection of
templates and step into the next process.
.

Gambar 4.6 Edit layout

Figure 4.6 is the second step to change the appearance of pre-selected
template. On this page are 4 menu editor that can be used, namely, Background,
Title, Default Font, and the Main Menu.

Gambar 4.7 Color picker

Background
Menu background editor is available for members who want to change the display
background color. There is a choice "Website Background" and "Content Background".
Website background is used to select the background color basis. For color selection
content, members can change it through the background and the content will appear that
displays the color picker dialog.

10

G
Gambar
4.8 Font pickerr
Title
E
Editor
title menu
m
is diviided into 3 sub-menu
s
off "Font", "Foont Color", and
a "Subtitlee Font
C
Color".
Sub-menu "Font" is used too change the display fontt title. "Fontt color" to chhange
t font colo
the
or of title. "S
Subtitle Fontt Color" to chhange the suubtitle font color in the tiitle.

11

Gambar 4.99 Font Colorr

Default Fo
ont
D
Default
men
nu font editor allows the member to be able to chhange the display font of web
c
content.
Theere are 2 opptions "Font"" to change the font andd the "Font Color" to chhange
t font colo
the
or.

12

Gambar 4.10 Main Menu

M
Color
Main Menu
u
F
Function

to
t

change

the

backkground

color

of

t
the

displayy

main

m
menu.

Footer Tex
xt
Serves to ch
hange the coolor of text inn the footer. Provided by the system
m fonts are: Arial,
A
C
Comic
Sans MS, Calibrri, Courier New,
N
Georgiaa, Platino Liinotype, Tahhoma, Timess New
R
Roman,
and
d Verdana
.There are 3 pieces of the link onn this page, yatu the "exxit" "prev" and "next". Prev
b
button
is ussed if the meember wants to return to
t the previoous page. The next buttton is
u
used
if the member haas completedd the selectiion of tempplates and sttep into thee next
p
process.

13

Gambar 4.11 Pesan Penutup

Figure 4.11 is the final step of closing the message "Click Ok to
download your website". This page displays the OK button to process the
download zip into its website.

14

Gambar 4.12 Download

Figure 4.12 is the process of downloading e-commerce. Members can open the file first
before doing the storage file by selecting open with or save the file on the storage area
specified by the browser.

15

1.1 Evaluation
Tabel 4.1 Perbandingan web sejenis 2
Zyweb.com
Fitur

e-commerce
Webjadi.com

(trial version)
Pilih template

generator

Ada

Ada

Ada

template

Ada

Ada

Ada

Edit warna header

Ada

Ada

Ada

Edit warna footer

Ada

Ada

Ada

Edit warna konten

Ada

Ada

Ada

Edit Huruf

Ada

Ada

Ada

Upload gambar

Ada

Ada

Ada

Shoping chart

Tidak

Ada

Ada

Generate code

Tidak

Tidak

Ada

Edit

warna

The table above is the result of comparison of similar web, between Zyweb.com, and ecommerce Webjadi.com generator. In general, e-commerce generator already has
features that exist on the web 2 is similar. However difitur generate code only in ecommerce system generator. Therefore, e-commerce generator has an advantage in
terms of generated code.

16

3. Conclusion
The conclusions that can be obtained from the analysis, design, implementation
and evaluation of e-commerce generator are as follows:
a. E-commerce generator makes it easy for the users in creating websites in the field of
e-commerce.
b. E-commerce presents a generator of making e-commerce system that is easily
understood by users.
c. E-commerce with the generator, then it opens a vast opportunity for users to create ecommerceonline.
d. As a learning tool in making e-commerce.

17

Bibliography

Basuki, Awan Pribadi. (2010). Membangun Web Berbasis PHP Dengan Framework
Codeigniter. (Edisi pertama). Yogyakarta: Penerbit Lokomedia.
Bentley, L. D., & Whitten, J. L. (2010). Systems Analysis & Design for the Global
Enterprise (7th Edition). New York: McGraw-Hill Companies, Inc.
Bullock, Linda. (2003). The World Wide Web. (1st Edition). Vaughn: Raintree Steck.
Connolly, Thomas and Begg, Carolyn. (2005). Database system : a Practical approach
to Design, Implementation and Management. (4nd Edition). England: Pearson
Education Limited.
Cyr, Dianne., Bonanni, Carole., Bowes, John., dan Ilsever, Joe.(2005). Beyonf Trust:
Web Site Design Preferences Across Cultures1. Journal of Global Information
Management, 13, 25-54.
Gourley, David., dan Totty, Brian. (2002). HTTP: The Definitive Guide. (1st Edition).
Cambridge: OReilly Media.
Kalakota, Ravi., dan Whinston, Andrew. B. (1997). Electronic Commerce : A Manager's
Guide. USA: Addison-Wesley.
Offutt, Jeff. dan Wu, Ye.(2009).Modelling Presentation Layers of Web Applications for
Testing. Software System Model, 9, 257-280.
O'Brien, James. A. (2005). Introduction to Information Systems. (12th Edition). New
York: McGraw Hill.
Pressman, R. S. (2005). Software engineering: a practitioner's approach. (6th Edition).
New York: McGraw-Hill.

18
Sheidernman, Ben. (2005). Designing the User Interface: Strategies for Effective
HumanComputer Interactive. (4th Edition). Massachusetts: Addison-Wesley.
Surhone, Lambert M., Timpledon, Miriam T., dan Marseken, Susan F., (2009).
WebBrowser: Application

Software, World Wide Web, Uniform Resource

Identifier, Web Page, Hyperlink. (1st Edition). Mauritius: Betascript Publishers.

Young, Margaret Levine. (2002). Internet: The Complete Refrence. (2nd Edition). New
York: McGraw-Hill.