Perancangan Aplikasi Pembuatan Generator

8/18/2019 Perancangan Aplikasi Pembuatan Generator

1/35


2/35

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 e-

commerce. 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/35

ini n

tem

kein

. Metodo

Rua

Gen

gene

Ada

- Pe

- Im

- Ev

2.1 Per

antinya dap

late sehing

inan dan k

logi

g Lingkup

rator deng

rator ruang

un pembah

ancangan

lementasi

luasi

ncangan

Gamba

t menyedia

a web yan

butuhan pe

ari peneliti

n fokus dib

dunia maya

asan

r 3.38 Ske

kan berbaga

akan dibe

gguna.

an mencaku

idang e-co

atau online.

a sistem e-

i desain did

tuk nantin

p analisa w

merce, da

ommerce g

lamnya, te

a dapat dik

b generator

Mengimpl

nerator

masuk pem

ndisikan d

, Merancan

mentasika

3

lihan

ngan

Web

Web


4/35

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 e-

commerce 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/35

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.


6/35

6

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 .

Gambar 4.5 Pemilihan template dasar


7/35

7

• 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 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.6 Edit layout


8/35

8

• 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 .

Gambar 4.7 Color picker


9/35

• Title

Color”,

merubah

“Subtitle

enu editor

an “Subtitl

tampilan fo

Font Color

title terbagi

e Font Col

nt title. “Fo

untuk mer

ambar 4.8

menjadi 3

or”. Sub-m

t color” un

bah warna

Font picke

ub-menu ya

nu “Font”

tuk meruba

subtitle font

itu “Font”,

digunakan

warna fon

pada title.

9

Font

ntuk

title.


10/35

• Default

merubah

merubah

ont

enu editor

tampilan fo

font dan “F

default fo

nt dari cont

nt Color”

Gambar 4.

t memung

nt web. Te

ntuk merub

Font Colo

inkan me

dapat 2 pili

ah warna fo

r

ber untuk

an “Font”

t .

10

dapat

ntuk


11/35

•

•

Cou

Ver

“da

sebe

pem

Main Me

B

Footer T

B

Font yan

ier New,

ana.

Terdapat

“next”. T

lumnya. T

lihan templ

nu

erfungsi me

xt

erfungsi un

g disediaka

eorgia, Pl

3 buah lin

mbol prev

mbol next

te dan mel

rubah tampi

uk meruba

oleh siste

tino Linot

yang ada

digunakan

digunakan

ngkah ke p

Gambar

lan warna l

warna teks

adalah: A

pe, Taho

i halaman

jika membe

jika memb

oses selanj

4.10 Main

tar belakan

pada footer .

ial, Comic

a, Times

ni, yatu to

r ingin ke

er telah s

tnya.

enu Color

main men

.

ans MS, C

ew Roman

bol “exit ”

bali ke hal

lesai mela

11

.

libri,

, dan

“ prev

aman

ukan


12/35

12

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.

Gambar 4.11 Pesan Penutup


13/35

13

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 .

Gambar 4.12 Download


14/35

14

2.3 Evaluasi

Fitur

Zyweb.com

(trial version) Webjadi.com

e-commerce

generator

Pilih template Ada Ada Ada

Edit warna 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

Tabel diatas merupakan hasil perbandingan web sejenis, antara

Zyweb.com, Webjadi.com dan e-commerce generator. Pada umumnya e-

commerce 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.

Tabel 4.1 Perbandingan web sejenis 2


15/35

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/35

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: O’Reilly 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/35

17

Sheidernman, Ben. (2005). Designing the User Interface: Strategies for Effective

Human-

Computer 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.


18/35

1

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 e-

commerce 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


19/35

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


20/35


21/35

.1. Desig

he schem

ommerce

ommerce t

ommerce

ynamicall

enerator, t

ommerce.

obtained a

e above is

enerator wi

echnical ge

ill be stor

in the e-c

en view the

All were s

ew e-comm

Gamba

the basic

l focus on t

erator) wil

d in the s

mmerce ge

e-commerc

bsequently

erce.

r 3.38 Ske

form of e

he view. Its

l be forme

stem, so t

nerator. O

e are then c

entered int

a sistem e-

commerce

performanc

first, then

e only vie

ce the vie

mbined wi

o a phase t

ommerce g

establishm

e is a unit o

the control

e-comme

is designe

h the contr

hat will ge

nerator

nt generat

f e-commer

ler model a

ce to be f

in e-com

ller model

erate the r

4

r. e-

e (e-

nd e-

rmed

erce

nd e-

esults


22/35

5

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.


23/35

6

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 e-

commerce 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:

Gambar 4.5 Pemilihan template dasar


24/35

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.

.


25/35

8

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.6 Edit layout


26/35

9

• 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.

Gambar 4.7 Color picker


27/35

• Title

ditor title

olor". Sub

he font col

enu is divi

-menu "Fon

r of title. "

ded into 3 s

t" is used to

ubtitle Font

ub-menu of

change the

Color" to c

ambar 4.8

"Font", "F

display fon

ange the s

Font picke

nt Color", a

title. "Font

btitle font c

nd "Subtitle

color" to c

olor in the t

10

Font

ange

tle.


28/35

• Default Fo

Default me

ontent. Th

he font col

nt

u font edito

re are 2 op

r.

r allows the

tions "Font

member to

to change

Gambar 4.

be able to c

the font an

Font Colo

ange the di

the "Font

r

splay font o

Color" to c

11

f web

ange


29/35

• Main Men

unction

• Footer Te

Serves to c

omic Sans

oman, and

.There are

button is us

sed if the

rocess.

u

o change

t

ange the co

MS, Calibr

Verdana

pieces of

ed if the m

member ha

the bac

lor of text i

i, Courier

the link on

mber want

s complete

ground c

the footer.

ew, Georgi

this page,

s to return

the select

Gambar

olor of

Provided b

, Platino Li

yatu the "e

o the previ

on of tem

4.10 Main

he displa

y the syste

notype, Tah

xit" "prev"

ous page. T

lates and s

enu Color

main

fonts are:

oma, Times

and "next".

he next but

ep into the

12

enu.

rial,

New

Prev

on is

next


30/35

13

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.

Gambar 4.11 Pesan Penutup


31/35

14

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.

Gambar 4.12 Download


32/35

15

1.1 Evaluation

FiturZyweb.com

(trial version)

Webjadi.come-commerce

generator

Pilih template Ada Ada Ada

Edit warna

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

The table above is the result of comparison of similar web, between Zyweb.com, and e-

commerce 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 e-

commerce system generator. Therefore, e-commerce generator has an advantage in

terms of generated code.

Tabel 4.1 Perbandingan web sejenis 2


33/35

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 e-

commerceonline.

d. As a learning tool in making e-commerce.


34/35

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: O’Reilly 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.


35/35

18

Sheidernman, Ben. (2005). Designing the User Interface: Strategies for Effective

Human-

Computer 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.

Perancangan Aplikasi Pembuatan Generator

Documents

Transcript of Perancangan Aplikasi Pembuatan Generator