bab 3 analisis dan perancangan 3.1 analisis webthesis.binus.ac.id/doc/bab3/2012-1-00266-if bab...

37

BAB 3

ANALISIS DAN PERANCANGAN

3.1 Analisis web

E-Commerce generator merupakan suatu web yang memilki sistem untuk

merancang tampilan e-commerce. Dengan fitur-fitur yang sederhana seperti

pemilihan template serta merubah template tersebut menjadi seperti yang pengguna

inginkan, diharapkan pengguna dapat merancang tampilan e-commerce yang mereka

butuhkan.

Analisis sistem terhadap software yang telah ada, merupakan tindakan dalam

memenuhi analisis kebutuhan perancangan sistem e-commerce generator, bukan

hanya dalam analisis sistem yang telah ada saja, namun untuk mendukung rancangan

e-commerce generator ini, digunakan juga analisis user yaitu dengan menyebarkan

kuesioner terhadap suatu komunitas wirausaha.

3.1.1 Analisis web sejenis

Pada tahap ini analisis yang dilakukan adalah web yang memiliki

tujuan sama seperti web generator seperti perancangan desain serta

perancangan suatu web. Zyweb.com dan webjadi.com merupakan 2 web yang

menjadi landasan acuan dalam memaparkan analisis sistem, berikut adalah

web sejenis yang dianalisis:

38

1. Zyweb.com

Gambar 3.1 Tampilan Zyweb.com

Zyweb.com merupakan web yang bertujuan untuk membuat web.

User dapat melakukan pembuatan web secara online jika user sudah

melakukan pendaftaran, namun hanya berupa trial version selama tiga

puluh hari. Dalam pembentukan web, langkah pertama yang harus

dilakukan adalah memilih template, lalu user dapat mengisi konten web

sesuai keinginan, mengganti warna, mengedit huruf dan juga mengunggah

gambar, namun apabila dianalisis lagi web yang dihasilkan bukanlah web

yang ditujukan untuk pembuatan e-commerce, dengan kata lain web ini

hanya bersifat statis. Untuk membuat e-commerce, user harus membayar

kepada pihak pengembang zyweb.com apabila ingin membentuk e-

commerce.

39

2. Webjadi.com

Gambar 3.2 Tampilan Webjadi.com

Webjadi.com adalah web yang menawarkan fasilitas bagi pengguna

untuk melakukan perancangan web sendiri. Web tersebut memiliki 3 fase

dalam perancangannya yaitu: perancangan template web, perancangan web

page, dan perancangan content.

Perancangan template web, merupakan perancangan awal dalam

webjadi.com. Dilihat dari gambar diatas, web tersebut menyediakan

beberapa template web yang nantinya dapat dipilih oleh user sebagai

template web yang akan dirancang dalam perancangan web yang sedang

berjalan. Di sudut kiri terlihat tampilan preview dari template. Estetika

halaman webjadi.com pada tahap perancangan template dinilai sangat baik

dan menarik. Disini terlihat bahwa webjadi.com berusaha untuk

40

mengutamakan prinsip user friendly yang dapat memudahkan

penggunaannya untuk setiap kalangan.

Halaman perancangan pages berfungsi sebagai pengaturan tata

letak halaman web yang akan dirancang oleh user, fungsi tersebut

digunakan dalam perancangan pada bagian selanjutnya setelah user melalui

tahap pemilihan template. Pada tahap ini user dapat mengatur halaman-

halaman yang diperlukan.

Tahap terakhir dalam perancangan web di webjadi.com adalah

tahap perancangan konten. Dalam tahap ini user dapat mengatur konten

yang diinginkan. User juga dapat memasukkan bermacam-macam konten

guna memenuhi kebutuhan web yang ingin dirancangnya. Namun user

interface yang terlihat dinilai memiliki tingkat kompleksitas yang tinggi

sehingga metode ”keep it simple” tidak berlaku disini. Pengguna yang baru

menggunakan webjadi.com akan merasa kesulitan pada tahap ini sehingga

tingkat kenyamanan user berkurang.

Fitur Zyweb.com (trial version) Webjadi.com

Pilih template Ada Ada Edit warna template Ada Ada Edit warna header Ada Ada Edit warna footer Ada Ada Edit warna konten Ada Ada Edit Huruf Ada Ada Upload gambar Ada Ada Shoping chart Tidak Ada Generate code Tidak Tidak

Tabel 3.1 Perbandingan web sejenis

41

3.1.2 Analisis web sejenis pada hasil web generator (e-commerce)

1. Bursabaju.com

Gambar diatas merupakan tampilan halaman untuk e-commerce yang memiliki

nama bursabaju.com. Tampilan halaman bursabaju.com dari segi pemakaian warna dan

penempatan posisi konten dinilai cukup baik. Halaman home website bursabaju.com

menampilkan gambar-gambar yang mewakili katalog produk yang dijual dalam website

bursabaju.com. Ketika pengguna mengklik gambar tersebut maka akan pindah ke

halaman kategori yang diinginkan. Website bursabaju.com memiliki fasilitas shoping

chart, lalu member yang sudah terdaftar dapat melihat fitur view, address, edit order dan

favourite order. Transaksi di website bursabaju.com memiliki sistem pembayaran

dengan cara transfer melalui bank yang dituju, kemudian member menunggu konfirmasi

dari admin bursabaju.com.

Gambar 3.3 Tampilan bursabaju.com

42

1. Halomini.com

Gambar diatas merupakan tampilan halaman untuk e-commerce yang bernama

halomini.com. Di halaman home website halomini menampilkan pilihan kategori

produk terbaru. Proses pembayaran dilakukan melalui bank dan dikonfirmasi melalui

email atau sms dari admin halomini. jadi konfirmasi yang dilakukan member dapat

melalui 2 via tersebut (email atau sms).

Gambar 3.4 Tampilan halomini.com

43

Fitur Bursabaju.com Halomini.com

Shopping chart Ada Ada

Cart member Ada Ada Order member Ada Ada Transaction bank Ada Ada Order Confirmation admin Ada Ada Payment confirmation member di website Tidak Tidak

3.1.3 Kuesioner

Kuesioner akan menjadi media yang akan dipakai untuk menganalisis

user requirement. Kuesioner terdiri dari 8 butir pertanyaan yang telah

ditanggapi oleh 30 responden pengguna e-commerce.

1. Berapa kali anda melakukan jual beli melalui internet?

a. Satu kali

b. Kurang dari lima kali

c. Lebih dari lima kali

d. Belum pernah

Tabel 3.3 Jawaban pertanyaan nomor 1

Responden Persentase

1 kali 6 20%

Kurang dari 5 kali 8 27%

Lebih dari 5 kali 12 40%

Tabel 3.2 Perbandingan e-commerce sejenis

44

Belum pernah 4 13%

Total 30 100%

Gambar 3.5 Pie chart jawaban pertanyaan nomor 1

Jadi dapat disimpulkan bahwa koresponden telah melakukan jual beli

melalui internet lebih dari 5 kali.

2. Dapatkah anda membuat suatu web jual beli? Jika iya, berapa web yang

dapat diimplementasikan dengan baik?

a. Iya, 1 web

b. Iya, kurang dari 5 web

c. Tidak dapat membuat web jual beli

d. Tidak tertarik untuk membuat web jual beli

1 kali20%

kurang dari 5 kali27%

lebih dari 5 kali40%

belum pernah13%

1

45



1 web 5 17%

Kurang dari 5 web 4 13%

Lebih dari 5 web 2 7%

Tidak dapat membuat web jual beli 19 63%%

Total 30 100%


Jadi dapat disimpulkan bahwa koresponden tidak dapat membuat web e-

commerce dengan baik.

iya, satu web17%

iya, kurang dari 5 web

13%

lebih dari 5 web7%

tidak dapat membuat

web jual beli63%

2

46

3. Menurut anda apakah peluang bisnis yang ditawarkan melalui media

internet, dewasa ini dapat mendatangkan banyak keuntungan dan manfaat

yang dapat dirasakan baik dari sisi produsen maupun dari sisi konsumen?

a. Sangat dirasakan

b. Cukup dirasakan

c. Kurang dirasakan

d. Tidak dirasakan



Sangat dirasakan 14 47%

Cukup dirasakan 9 30%

Kurang dirasakan 4 13%

Tidak dirasakan 3 10%

Total 30 100%


Jadi dapat disimpulkan bahwa koresponden sangat merasakan manfaat

adanya e-commerce.

sangat dirasakan

47%

cukup dirasakan

30%

kurang dirasakan

13%

tidak dirasakan

10%

3

47

4. Seberapa terampilkah anda dalam membuat suatu web aplikasi?

a. Sangat terampil

b. Cukup terampil

c. Kurang terampil

d. Tidak terampil



Sangat terampil 2 5%

Cukup terampil 3 20%

Kurang terampil 16 50%

Tidak terampil 9 25%

Total 30 100%


Jadi dapat disimpulkan bahwa koresponden kurang terampil dalam hal

membuat web aplikasi.

sangat terampil

7%cukup terampil10%

kurang terampil53%

tidak terampil30%

4

48

5. Tertarikkah anda untuk membuat suatu web aplikasi jual beli untuk

penjualan barang sendiri jika anda mempunyai dagangan/usaha sendiri?

a. Sangat tertarik

b. Cukup tertarik

c. Kurang tertarik

d. Tidak tertarik



Sangat tertarik 10 34%

Cukup tertarik 15 50%

Kurang tertarik 4 13%

Tidak tertarik 1 3%

Total 30 100%


Jadi dapat disimpulkan bahwa koresponden cukup tertarik untuk

membuat suatu e-commerce.

sangat tertarik34%

cukup tertarik50%

kurang tertarik13%

tidak tertarik3%

5

49

6. Apakah anda memiliki kesulitan dalam merancang web pada bagian

desain?

a. Sangat menyulitkan

b. Cukup menyulitkan

c. Kurang menyulitkan

d. Tidak menyulitkan



Sangat menyulitkan 6 20%

Cukup menyulitkan 15 50%

Kurang menyulitkan 5 17%

Tidak menyulitkan 4 13%

Total 30 100%


Jadi dapat disimpulkan bahwa koresponden merasa kesulitan pada proses

desain web.

sangat menyulitkan

20%

cukup menyulitkan

50%

kurang menyulitkan

17%

tidak menyulitkan

13%

6

50

7. Apakah anda memiliki kesulitan dalam merancang web pada tahap

melakukan validasi kode?

a. Sangat menyulitkan

b. Cukup menyulitkan

c. Kurang menyulitkan

d. Tidak menyulitkan



Sangat menyulitkan 15 50%

Cukup menyulitkan 10 33%

Kurang menyulitkan 2 7%

Tidak menyulitkan 3 10%

Total 30 100%


Jadi dapat disimpulkan bahwa koresponden merasa sangat kesulitan pada

tahap melakukan validasi kode dalam merancang web.

sangat menyulitkan

50%

cukup menyulitkan

33%

kurang menyulitkan

7%

tidak menyulitkan

10%

7

51

8. Apakah anda tertarik jika ada suatu web aplikasi yang dapat merancang

web pada bidang e-commerce ?

a. Sangat Tertarik

b. Cukup Tertarik

c. Kurang tertarik

d. Tidak tertarik



Sangat tertarik 18 62%

Cukup tertarik 7 24%

Kurang tertarik 3 10%

Tidak tertarik 1 4%

Total 30 100%


Jadi dapat disimpulkan bahwa koresponden sangat tertarik dengan

adanya e-commerce generator.

sangat tertarik62%

cukup tertarik24%

kurang tertarik10%

tidak tertarik4%

8

52

3.2 Analisis dan Solusi Kebutuhan

Dari hasil analisis user diatas, maka dirumuskan solusi - solusi sebagai berikut:

a. Membuat sistem dengan ide utama dapat membuat suatu web.

b. Membuat sistem yang mudah dalam merancang web.

c. Membuat sistem yang user friendly dalam merancang web.

d. Membuat sistem pembuatan web yang memiliki tingkat kemudahan tinggi

dalam merancang desain web.

e. Membuat sistem pembuatan web yang tidak perlu melibatkan user dalam tahap

pembuatan kode.

f. Membuat sistem yang bersifat online.

g. Membuat webiste dengan sistem yang dapat membuat web.

h. Membuat web dengan sistem yang dapat membuat web pada bidang e-

commerce.

NO Analisis Kebutuhan Solusi kebutuhan

1 koresponden mempunyai keinginan

memiliki web sendiri.

Membuat sistem yang berlandasan dapat

membuat suatu web.

2 koresponden memiliki keinginan

untuk merancang web sendiri.

Membuat sistem yang mudah dalam

merancang web.

3 koresponden masih merasa tak

handal dalam merancang web

sendiri.

Membuat sistem yang user friendly dalam

merancang web.

Tabel 3.13 Analisis dan solusi kebutuhan

53

4 koresponden memiliki kendala

dalam merancang web pada bagian

desain.

Membuat sistem pembuatan web yang

memiliki tingkat kemudahan tinggi dalam

merancang desain web.

5 koresponden memiliki kendala

dalam merancang web pada bagian

pengkodingan.

Membuat sistem pembuatan web yang tidak

perlu melibatkan user dalam pengkodingan.

6 Koresponden satu hari dapat

menghabiskan waktu online

minimal 2 jam.

Membuat sistem yang bersifat online

7 koresponden membutuhkan sistem

yang dapat membuat web secara

online.

Membuat webiste dengan sistem yang

dapat membuat web secara online.

8 koresponden memiliki minat

mempunyai e-commerce sendiri.

Membuat web dengan sistem yang dapat

membuat web pada bidang e-commerce.

54

3.2.1 Skema proses pembentukan e-commerce generator

Gambar 3.13 Skema proses pembentukan e-commerce generator

Gambar diatas merupakan skema tahapan dalam proses pembentukan e-

commerce generator, skema ini merupakan implementasi dari landasan teori

waterfall model. Tahap pertama yaitu menyamakan visi dan misi dalam

pembentukan program. Setelah ide tercipta yakni membentuk e-commerce

generator, maka untuk mempermudah tahap selanjutnya diperlukan

pengumpulan data dengan menggunakan metode-metode penelitian. Tahap

kedua adalah menyusun timeline yaitu dengan memprediksikan jangka waktu

progam ini dibentuk. Tahap ketiga modelling program e-commerce generator

dengan menggunakan penerapan implementasi konsep UML yaitu

55

mendeskripsikan sistematika progam melalui diagram seperti class diagram,

usecase, activity, dan sequence. Serta untuk pembentukan desain interface e-

commerce generator digunakan perancangan layar (storyboard). Tahap keempat

yaitu tahap dimana program dibentuk. Tahap terakhir yaitu melakukan evaluasi

program.

3.3 Perancangan Sistem

Perancangan sistem yang digunakan untuk merancang sistem yaitu

menggunakan metode UML yang meliputi class diagram, use case diagram,

activity diagram, dan sequence diagram.

3.3.1 Class diagram

Class diagram dibawah ini merupakan class diagram yang

digunakan dalam sistem e-commerce generator :

Gambar 3.14 Class Diagram e-commerce generator

56

3.3.2 Use Case Diagram

Use case diagram dibawah ini akan menjelaskan langkah–langkah

yang terdapat didalam sistem, serta memberikan gambaran tentang

perilaku sistem berdasarkan sudut pengguna web.

Gambar 3.15 Use case e-commerce generator

57

3.3.3 Use Case Specification

Use Case Specification menjelaskan lebih detail mengenai

interaksi antara pelaku dengan sistem. Seluruh kegiatan akan

mendapatkan respon dari sistem yang dikembalikan lagi ke pelaku.

Berikut adalah use case specification dari e-commerce generator:

a. Use case specification daftar

Pada proses ini, user diminta untuk mengisi form yang telah

ditampikan oleh sistem, agar para user yang baru mencoba e-

commerce generator dapat melakukan proses login.

Usecase Daftar

Actor User

Description User melakukan pendaftaran

Pre-Condition

Flow of events 1.Masuk ke halaman utama

2.Masuk ke halaman register

Post Condition User mengisi form yang diberikan sistem,

untuk menjadi member.

Tabel 3.14 Use case specification daftar

58

Skenario Utama

Kondisi Awal Setelah melakukan pengisian form

Aksi Aktor Reaksi Sistem

1) Mengisi form daftar

2) Mencocokan data user dengan

Database. Jika salah tampil pesan error

lalu form daftar ditampilkan kembali

3)Mengisi kembali Form daftar

4) Mencocokan data daftar dengan

database

5) Jika cocok akan tampil halaman utama

untuk member

Kondisi Akhir Member dapat melakukan kegiatan pada

sistem sesuai kewenangannya.

Tabel 3.15 use case skenario daftar

59

b. Use case specification login user.

Pada proses ini, user diwajibkan melakukan login sebelum dapat

menggunakan fasilitas yang ada di e-commerce generator.

Use case Login

Actor User

Description User melakukan Login

Pre-Condition User sudah melakukan pendaftaran

Flow of events Masuk ke halaman utama

Post Condition User mengisi form Login

Tabel 3.16 Use case specification login user

60

Skenario Utama

Kondisi Awal Sudah melakukan pendaftaran


1) Mengisi form login

2) Mencocokan data login dengan

database.

Jika login salah sistem akan

menampilkan pesan error dan akan

menampilkan form login kembali

3)Mengisi kembali Form Login


database

Jika cocok akan menampilkan halaman

utama untuk user

Kondisi Akhir User dapat melakukan kegiatan pada


Tabel 3.17 Use case skenario login user

61

c. Use case specification pilih template user.

Pada proses ini, merupakan tahap awal untuk membentuk desain e-

commerce yaitu user melakukan pemilihan template yang telah

disediakan oleh sistem.

Use case Pilih Template

Actor User

Description User memilih template yang disediakan

oleh sistem

Pre-Condition User sudah berhasil login dan masuk ke

sistem

Flow of events 1.Masuk ke halaman home utama

2.Masuk ke halaman pilih template

Post Condition User memilih template

Tabel 3.18 Use case specification pilih template user

62

Skenario Utama

Kondisi Awal User sudah berhasil melakukan login


1) Memilih template 2) sistem menampilkan template yang

dipilih dalam bentuk mini

3) mengklik button next 4) sistem melakukan transisi ke halaman

selanjutnya

Kondisi Akhir Member sudah melakukan pemilihan

template sesuai keinginan user

Tabel 3.19 Use case scenario pilih template user

63

d. Use Case specification edit template

Pada tahap ini, user dapat mengedit template yang dipilihnya.

Use case Pilih Template

Actor User

Description User melakukan edit template yang sudah

dipilih

Pre-Condition User sudah berhasil login dan masuk ke

sistem



3.Masuk ke halaman edit template

Post Condition Member melakukan edit template,

melakukan edit pada warna serta huruf

yang ada di template

Tabel 3.20 Use case specification edit template

64

Skenario Utama

Kondisi Awal User sudah melakukan pemilihan template


1) Member melakukan pengeditan

template

2) sistem menampilkan template yang

sedang diedit oleh member

3) mengklik button next 4) sistem melakukan transisi ke halaman

selanjutnya

Kondisi Akhir Member sudah melakukan edit template

sesuai dengan keinginan member

Tabel 3.21 Use case scenario edit template

65

e. Use case specification login admin.

Proses ini adalah proses login dimana sistem akan menentukan user

yang melakukan login merupakan seorang administrator atau bukan.

Usecase Login

Actor Admin

Description admin melakukan Login

Pre-Condition User terdaftar sebagai admin

Flow of events Masuk ke halaman home admin

Post Condition Login berhasil

Tabel 3.22 Use case specification login admin

66

Skenario Utama

Kondisi Awal


1) Mengisi form login


database

Jika salah akan Menampilkan pesan error

dan menampilkan form login kembali

3)Mengisi kembali Form Login


database

Jika cocok akan menampilkan halaman

utama untuk admin

Kondisi Akhir admin dapat melakukan kegiatan pada


Tabel 3.23 Use case scenario login admin

67

f. Use case specification input template admin.

Pada tahap ini, seorang admin dapat melakukan penambahan

template terhadap sistem, maka sistem akan memiliki lebih banyak

variasi template e-commerce. Untuk memenuhi kebutuhan user dalam

membentuk desain e-commerce

Use case Input Template

Actor Admin

Description Admin dapat menambahkan template yang

kedalam sistem

Pre-Condition User sudah berhasil Login dan masuk ke

sistem sebagai admin


2.Masuk ke halaman setting

3.Masuk ke halaman input template

Post Condition Memasukkan data-data template yang

dibutuhkan oleh sistem.

Tabel 3.24 Use case specification input template admin

68

Skenario Utama

Kondisi Awal User sudah melakukan pemilihan template


1) melakukan penguploadan template 2) sistem memproses dan menyimpan

template ke dalam database

Kondisi Akhir

admin sudah melakukan penambahan

template pada sistem e-commerce

generator

Tabel 3.25 Use case skenario update template admin

69

g. Use case specification generate.

Pada tahap ini, sistem akan melakukan generate pada template yang telah

dibuat oleh user, maka untuk mendapatkan hasil rancangan desain e-commerce

serta sistem e-commerce, user harus melakukan pengunduhan.

Use case Generate

Actor User

Description User mengklik button generate, lalu

sistem yang akan men-generate coding

Pre-Condition User sudah berhasil melakukan rancangan

desain pada web yang akan dipublish



3.Masuk ke halaman edit template

4.Masuk ke halaman generate

Post Condition Mendapatkan kode script e-commerce

Tabel 3.26 Use case specification generate

70

Skenario Utama

Kondisi Awal User sudah merancang desain web


1) mengklik button generate 2) sistem memproses dan melakukan

generate

Kondisi Akhir Sistem melakukan generate, dan user

dapat melakukan pengunduhan.

Tabel 3.27 Use case skenario generate

71

3.3.4 Sequence Diagram

Setiap interaksi yang terjadi pada sistem e-commerce generator

akan direpresentasikan kedalam sequence diagram berikut ini:

a. Sequence Diagram daftar

Saat user memilih menu daftar pada halaman home, halaman layar

untuk daftar akan ditampilkan oleh sistem. User lalu dapat

melakukan pendaftaran pada halaman pendaftaran. User lalu

menginput data diri pada halaman daftar. Jika user telah menginput

data diri maka sistem akan menyimpan data yang telah dimasukkan

kedalam database.

Gambar 3.16 Sequence Diagram daftar

72

b. Sequence Diagram login user

User dapat melakukan login pada halaman login. User lalu

memasukkan username dan password. Jika user salah menginput

username dan password, maka sistem akan menampilkan pesan

error pada layar. Jika user menginput data secara valid, maka

sistem akan menampilkan halaman home member.

Gambar 3.17 Sequence Diagram login user

73

c. Sequence Diagram pilih template

Saat member memilih menu template pada halaman menu utama,

halaman layar untuk template akan ditampilkan. Member lalu dapat

memilih template pada layar halaman template. Jika Member telah

memilih template yang diinginkan maka sistem akan menyimpan

data kedalam database. Jika member ingin melihat template yang

telah dipilihnya, maka sistem akan mengambil data dan

menampilkannya kembali di layar halaman template.

Gambar 3.18 Sequence Diagram pilih template

74

d. Sequence Diagram edit template

Pada halaman edit template, member dapat mengedit template pada

layar halaman template. Jika member telah mengedit template dan

telah melakukan perubahan template sesuai yang diinginkan maka

sistem akan menyimpan data kedalam database.

Gambar 3.19 Sequence Diagram edit template

75

e. Sequence Diagram login admin

User dapat melakukan login pada tampilan layar login. Dengan

memasukkan username dan password. Sistem akan melakukan

pengecekan data dengan mengirim data ke tabel user. Jika user

salah melakukan input username dan password, maka sistem akan

menampilkan pesan eror pada layar. Jika user menginput data

secara valid dan memiliki hak akses sebagai admin, maka sistem

akan menampilkan halaman home untuk admin.

Gambar 3.20 Sequence Diagram login admin

76

f. Sequence Diagram input template admin

Saat admin berada pada halaman input template, Admin dapat

menambah template kedalam sistem.dengan cara melakukan

pengunggahan template yang diinginkan ke sistem e-commerce

generator.

Gambar 3.21 Sequence Diagram input template admin

77

g. Sequence Diagram generate user

Saat member berada pada halaman generate, member dapat

melakukan pengunduhan hasil rancanagan e-commerce. Sistem

akan melakukan generate pada rancangan desain e-commerce yang

telah dibentuk oleh member.

Gambar 3.22 Sequence Diagram generate user

78

3.3.5 Activity Diagram

Pelaku selalu memulai aktifitasnya yang pertama, kemudian akan

mendapat respon dari sistem yang nantinya akan menampilkan proses

akhir dari proses tersebut. Berikut adalah activity diagram dari e-

commerce generator:

a. Activity Diagram Daftar

Proses ini terjadi saat user belum terdaftar menjadi seorang member

di e-commerce generator, user mengisi form yang telah disediakan

oleh sistem, dan sistem akan menyimpan data-data user kedalam

database.

Gambar 3.23 Activity Diagram Daftar

79

b. Activity Diagram login user

Proses ini terjadi saat user sudah terdaftar menjadi seorang member

e-commerce generator, maka user dapat melakukan login, di halaman

login user mengisi data email dan password, jika login benar maka

sistem akan memproses, dan segera menampilkan ke halaman

selanjutnya, namun apabila user melakukan kesalahan maka sistem

akan memberikan pesan error.

Gambar 3.24 Activity Diagram login user

80

c. Activity Diagram pilih template

Proses ini terjadi saat user sudah melakukan login maka sistem akan

menampikan halaman template yang berisi beberapa template yang

bisa dipilih oleh member, setelah member melakukan pemilihan

template maka sistem akan memproses.

Gambar 3.25 Activity Diagram pilih template

81

d. Activity Diagram edit template

Pada proses ini, user yang sudah melakukan login, dan pemilihan

template, akan berada pada proses pengeditan template, dalam edit

template dapat input banner nama web, footer note, pengunggahan

logo, dan lain-lain.

Gambar 3.26 Activity Diagram edit template

82

e. Activity Diagram login admin

Pada proses ini sistem akan menentukan seorang administrator atau

bukan yang melakukan login, jika ternyata yang melakukan login

adalah seorang admin, maka admin akan memiliki akses menuju

halaman yang dikhususkan untuk admin.

Gambar 3.27 Activity Diagram login admin

83

f. Activity Diagram input input admin

Pada proses ini jika admin akan memilih halaman input template lalu

sistem akan menampilkan halaman input template, pada halaman

tersebut jika admin menambah template maka sistem akan

menyimpan, apabila berhasil sistem akan menampilkan hasil input

template berupa daftarnya saja.

Gambar 3.28 Activity Diagram input template admin

84

g. Activity Diagram generate

User yang berhasil login dan sudah menggunakan setiap fitur-fitur e-

commerce generator. Pada tahap terakhir member akan berada pada

halaman generate, sistem akan melakukan generate dan member

dapat mendapatkan desain e-commerce yang telah dibuatnya dengan

cara melakukan pengunduhan.

Gambar 3.29 Activity Diagram generate

85

3.3.6 Class Diagram e-commerce

Gambar 3.30 Class Diagram e-commerce

86

3.3.7 Use Case e-commerce

Gambar 3.31 Use Case-commerce

87

3.4 Perancangan layar

Perancangan layar merupkan awal dari pembuatan user-interface yang

nantinya akan diterapkan dalam e-commerce generator, Berikut rancangan

tampilan yang dibagi menjadi beberapa halaman:

Gambar 3.33 Perancangan layar daftar

Gambar 3.32 Perancangan layar login

88

Gambar 3.35 Perancangan layar pilih template

Gambar 3.34 Perancangan layar halaman Utama user

89

Gambar 3.37 Perancangan layar generate template

Gambar 3.36 Perancangan layar edit template

90

3.5 Skema Sistem e-commerce generator

Dalam skema diatas merupakan bentuk dasar dalam pembentukan e-

commerce generator, maka dapat dilihat e-commerce generator akan fokus

dalam pembuatan dibagian view. Kinerjanya adalah satu unit e-commerce akan

dibentuk dahulu, lalu dalam model dan controller e-commerce tersebut akan

disimpan dalam sistem, sehingga hanya view e-commerce yang akan dibentuk

secara dinamik didalam e-commerce generator. Setelah view dirancang dalam e-

commerce generator, maka view e-commerce tersebut akan digabungkan ke

model dan controller e-commerce, semua itu akan masuk ke dalam tahap

generate.

Gambar 3.38 Skema sistem e-commerce generator

bab 3 analisis dan perancangan 3.1 analisis webthesis.binus.ac.id/doc/bab3/2012-1-00266-if bab...

Documents