BAB 3 ANALIS IS 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:
37
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 ecommerce.
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 halamanhalaman 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. Tabel 3.1 Perbandingan web sejenis Fitur Pilih template Edit warna template Edit warna header Edit warna footer Edit warna konten Edit Huruf Upload gambar Shoping chart Generate code
Zyweb.com (trial version) Ada Ada Ada Ada Ada Ada Ada Tidak Tidak
Webjadi.com Ada Ada Ada Ada Ada Ada Ada Ada Tidak
41 3.1.2
Analisis web sejenis pada hasil web generator (e-commerce)
1. Bursabaju.com
Gambar 3.3 Tampilan 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.
42
1. Halomini.com
Gambar 3.4 Tampilan 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).
43 Tabel 3.2 Perbandingan e-commerce sejenis Fitur Shopping chart Cart member Order member Transaction bank Order Confirmation admin Payment confirmation member di website
Bursabaju.com
Halomini.com
Ada
Ada
Ada Ada Ada Ada Tidak
Ada Ada Ada Ada 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%
44 Belum pernah
4
13%
Total
30
100%
1 belum pernah 13%
1 kali 20%
lebih dari 5 kali 40%
kurang dari 5 kali 27%
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
45 Tabel 3.4 Jawaban pertanyaan nomor 2 Responden
Persentase
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%
2
tidak dapat membuat web jual beli 63%
iya, satu web 17% iya, kurang dari 5 web 13% lebih dari 5 web 7%
Gambar 3.6 Pie chart jawaban pertanyaan nomor 2 Jadi dapat disimpulkan bahwa koresponden tidak dapat membuat web ecommerce dengan baik.
46 3. M enurut 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 Tabel 3.6 Jawaban pertanyaan nomor 3 Responden
Persentase
Sangat dirasakan
14
47%
Cukup dirasakan
9
30%
Kurang dirasakan
4
13%
Tidak dirasakan
3
10%
Total
30
100%
tidak dirasakan 10% kurang dirasakan 13%
3 sangat dirasakan 47%
cukup dirasakan 30%
Gambar 3.7 Pie chart jawaban pertanyaan nomor 3 Jadi dapat disimpulkan bahwa koresponden sangat merasakan manfaat adanya e-commerce.
47 4. Seberapa terampilkah anda dalam membuat suatu web aplikasi? a. Sangat terampil b. Cukup terampil c. Kurang terampil d. Tidak terampil
Tabel 3.8 Jawaban pertanyaan nomor 4 Responden
Persentase
Sangat terampil
2
5%
Cukup terampil
3
20%
Kurang terampil
16
50%
Tidak terampil
9
25%
Total
30
100%
4 sangat tidak terampil 30%
terampil cukup 7% terampil 10%
kurang terampil 53%
Gambar 3.8 Pie chart jawaban pertanyaan nomor 4 Jadi dapat disimpulkan bahwa koresponden kurang terampil dalam hal membuat web aplikasi.
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
Tabel 3.9 Jawaban pertanyaan nomor 5 Responden
Persentase
Sangat tertarik
10
34%
Cukup tertarik
15
50%
Kurang tertarik
4
13%
Tidak tertarik
1
3%
Total
30
100%
tidak kurang tertarik tertarik 3% 13%
5
sangat tertarik 34%
cukup tertarik 50%
Gambar 3.9 Pie chart jawaban pertanyaan nomor 4 Jadi dapat disimpulkan bahwa koresponden cukup tertarik untuk membuat suatu e-commerce.
49 6. Apakah anda memiliki kesulitan dalam merancang web pada bagian desain? a. Sangat menyulitkan b. Cukup menyulitkan c. Kurang menyulitkan d. Tidak menyulitkan
Tabel 3.10 Jawaban pertanyaan nomor 6 Responden
Persentase
Sangat menyulitkan
6
20%
Cukup menyulitkan
15
50%
Kurang menyulitkan
5
17%
Tidak menyulitkan
4
13%
Total
30
100%
tidak menyulitkan 13% kurang menyulitkan 17%
6
sangat menyulitkan 20%
cukup menyulitkan 50%
Gambar 3.10 Pie chart jawaban pertanyaan nomor 6 Jadi dapat disimpulkan bahwa koresponden merasa kesulitan pada proses desain web.
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
Tabel 3.11 Jawaban pertanyaan nomor 7 Responden
Persentase
Sangat menyulitkan
15
50%
Cukup menyulitkan
10
33%
Kurang menyulitkan
2
7%
Tidak menyulitkan
3
10%
Total
30
100%
tidak menyulitkan kurang 10% menyulitkan 7%
7
sangat menyulitkan 50%
cukup menyulitkan 33%
Gambar 3.11 Pie chart jawaban pertanyaan nomor 7 Jadi dapat disimpulkan bahwa koresponden merasa sangat kesulitan pada tahap melakukan validasi kode dalam merancang web.
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
Tabel 3.12 Jawaban pertanyaan nomor 8 Responden
Persentase
Sangat tertarik
18
62%
Cukup tertarik
7
24%
Kurang tertarik
3
10%
Tidak tertarik
1
4%
Total
30
100%
tidak tertarik kurang 4% tertarik 10% cukup tertarik 24%
8
sangat tertarik 62%
Gambar 3.12 Pie chart jawaban pertanyaan nomor 8 Jadi dapat disimpulkan bahwa koresponden sangat tertarik dengan adanya e-commerce generator.
52 3.2
Analisis dan S olusi Kebutuhan Dari hasil analisis user diatas, maka dirumuskan solusi - solusi sebagai berikut: a. M embuat sistem dengan ide utama dapat membuat suatu web. b. M embuat sistem yang mudah dalam merancang web. c. M embuat sistem yang user friendly dalam merancang web. d. M embuat sistem pembuatan web yang memiliki tingkat kemudahan tinggi dalam merancang desain web. e. M embuat sistem pembuatan web yang tidak perlu melibatkan user dalam tahap pembuatan kode. f. M embuat sistem yang bersifat online. g. M embuat webiste dengan sistem yang dapat membuat web. h. M embuat web dengan sistem yang dapat membuat web pada bidang ecommerce. Tabel 3.13 Analisis dan solusi kebutuhan
NO
Analisis Kebutuhan
1
koresponden mempunyai keinginan
M embuat sistem yang berlandasan dapat
memiliki web sendiri.
membuat suatu web.
koresponden memiliki keinginan
M embuat sistem yang mudah dalam
untuk merancang web sendiri.
merancang web.
koresponden masih merasa tak
M embuat sistem yang user friendly dalam
handal dalam merancang web
merancang web.
2
3
sendiri.
Solusi kebutuhan
53 4
5
koresponden memiliki kendala
M embuat sistem pembuatan web yang
dalam merancang web pada bagian
memiliki tingkat kemudahan tinggi dalam
desain.
merancang desain web.
koresponden memiliki kendala
M embuat sistem pembuatan web yang tidak
dalam merancang web pada bagian
perlu melibatkan user dalam pengkodingan.
pengkodingan. 6
Koresponden satu hari dapat
M embuat sistem yang bersifat online
menghabiskan waktu online minimal 2 jam. 7
koresponden membutuhkan sistem
M embuat webiste dengan sistem yang
yang dapat membuat web secara
dapat membuat web secara online.
online. 8
koresponden memiliki minat
M embuat web dengan sistem yang dapat
mempunyai e-commerce sendiri.
membuat web pada bidang e-commerce.
54 3.2.1 Skema proses pembentukan e-commerce generator
Gambar 3.13 S kema proses pembentukan e-commerce generator
Gambar diatas merupakan skema tahapan dalam proses pembentukan ecommerce 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
UM L
yaitu
55 mendeskripsikan sistematika progam melalui diagram seperti class diagram, usecase, activity, dan sequence. Serta untuk pembentukan desain interface ecommerce 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 UM L 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 ecommerce generator dapat melakukan proses login.
Tabel 3.14 Use case specification daftar Usecase
Daftar
Actor
User
Description
User melakukan pendaftaran
Pre-Condition 1.M asuk ke halaman utama Flow of events 2.M asuk ke halaman register User mengisi form yang diberikan sistem, Post Condition untuk menjadi member.
58 Tabel 3.15 use case skenario daftar Skenario Utama Kondisi Awal
Setelah melakukan pengisian form
Aksi Aktor
Reaksi Sistem 2)
1) M engisi form daftar
M encocokan
data
user
dengan
Database. Jika salah tampil pesan error lalu form daftar ditampilkan kembali
4)
M encocokan
data
daftar
dengan
database 3)M engisi kembali Form daftar 5) Jika cocok akan tampil halaman utama untuk member
Member dapat melakukan kegiatan pada Kondisi Akhir sistem sesuai kewenangannya.
59 b. Use case specification login user. Pada proses ini, user diwajibkan melakukan login sebelum dapat menggunakan fasilitas yang ada di e-commerce generator.
Tabel 3.16 Use case specification login user Use case
Login
Actor
User
Description
User melakukan Login
Pre-Condition
User sudah melakukan pendaftaran
Flow of events
M asuk ke halaman utama
Post Condition
User mengisi form Login
60 Tabel 3.17 Use case skenario login user Skenario Utama Kondisi Awal
Sudah melakukan pendaftaran
Aksi Aktor
Reaksi Sistem 2) M encocokan data login dengan database.
1) M engisi form login
Jika
login
salah
sistem
akan
menampilkan pesan error dan akan menampilkan form login kembali
4) M encocokan data login dengan database 3)M engisi kembali Form Login Jika cocok akan menampilkan halaman utama untuk user
User dapat melakukan kegiatan pada Kondisi Akhir sistem sesuai kewenangannya.
61 c. Use case specification pilih template user. Pada proses ini, merupakan tahap awal untuk membentuk desain ecommerce yaitu user melakukan pemilihan template yang telah disediakan oleh sistem.
Tabel 3.18 Use case specification pilih template user Use case Actor
Pilih Template User User memilih template yang disediakan
Description oleh sistem User sudah berhasil login dan masuk ke Pre-Condition sistem 1.M asuk ke halaman home utama Flow of events 2.M asuk ke halaman pilih template Post Condition
User memilih template
62 Tabel 3.19 Use case scenario pilih template user Skenario Utama Kondisi Awal
User sudah berhasil melakukan login
Aksi Aktor
Reaksi Sistem 2) sistem menampilkan template yang
1) M emilih template dipilih dalam bentuk mini 4) sistem melakukan transisi ke halaman 3) mengklik button next selanjutnya Member sudah melakukan pemilihan Kondisi Akhir template sesuai keinginan user
63 d. Use Case specification edit template Pada tahap ini, user dapat mengedit template yang dipilihnya.
Tabel 3.20 Use case specification edit template Use case
Pilih Template
Actor
User
Description
User melakukan edit template yang sudah dipilih
Pre-Condition
User sudah berhasil login dan masuk ke sistem
Flow of events
1.M asuk ke halaman utama 2.M asuk ke halaman pilih template 3.M asuk ke halaman edit template
Post Condition
Member melakukan edit template, melakukan edit pada warna serta huruf yang ada di template
64 Tabel 3.21 Use case scenario edit template Skenario Utama Kondisi Awal
User sudah melakukan pemilihan template
Aksi Aktor
Reaksi Sistem
1) M ember melakukan pengeditan
2) sistem menampilkan template yang
template
sedang diedit oleh member
4) sistem melakukan transisi ke halaman 3) mengklik button next selanjutnya
Member sudah melakukan edit template Kondisi Akhir sesuai dengan keinginan member
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. Tabel 3.22 Use case specification login admin Usecase
Login
Actor
Admin
Description
admin melakukan Login
Pre-Condition
User terdaftar sebagai admin
Flow of events
M asuk ke halaman home admin
Post Condition
Login berhasil
66
Tabel 3.23 Use case scenario login admin Skenario Utama Kondisi Awal Aksi Aktor
Reaksi Sistem 2)
M encocokan
data
login
dengan
database 1) M engisi form login Jika salah akan M enampilkan pesan error dan menampilkan form login kembali
4)
M encocokan
data
login
dengan
database 3)M engisi kembali Form Login Jika cocok akan menampilkan halaman utama untuk admin
admin dapat melakukan kegiatan pada Kondisi Akhir sistem sesuai kewenangannya.
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 Tabel 3.24 Use case specification input template admin 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
Flow of events
1.M asuk ke halaman utama 2.M asuk ke halaman setting 3.M asuk ke halaman input template
Post Condition
M emasukkan data-data template yang dibutuhkan oleh sistem.
68 Tabel 3.25 Use case skenario update template admin Skenario Utama Kondisi Awal
User sudah melakukan pemilihan template
Aksi Aktor
Reaksi Sistem 2) sistem memproses dan menyimpan
1) melakukan penguploadan template template ke dalam database admin sudah melakukan penambahan Kondisi Akhir
template pada sistem e-commerce generator
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. Tabel 3.26 Use case specification generate 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
Flow of events
1.M asuk ke halaman utama 2.M asuk ke halaman pilih template 3.M asuk ke halaman edit template 4.M asuk ke halaman generate
Post Condition
M endapatkan kode script e-commerce
70
Tabel 3.27 Use case skenario generate Skenario Utama Kondisi Awal
User sudah merancang desain web
Aksi Aktor
Reaksi Sistem 2) sistem memproses dan melakukan
1) mengklik button generate generate Sistem melakukan generate, dan user Kondisi Akhir dapat melakukan pengunduhan.
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. M ember lalu dapat memilih template pada layar halaman template. Jika M ember 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 ecommerce 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 ecommerce 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.32 Perancangan layar login
Gambar 3.33 Perancangan layar daftar
88
Gambar 3.34 Perancangan layar halaman Utama user
Gambar 3.35 Perancangan layar pilih template
89
Gambar 3.36 Perancangan layar edit template
Gambar 3.37 Perancangan layar generate template
90 3.5
Skema Sistem e-commerce generator
Gambar 3.38 Skema sistem e-commerce generator Dalam skema diatas merupakan bentuk dasar dalam pembentukan ecommerce 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 ecommerce generator, maka view e-commerce tersebut akan digabungkan ke model dan controller e-commerce, semua itu akan masuk ke dalam tahap generate.
