BAB 3 ANALISIS DAN PERANCANGAN. merancang tampilan e-commerce. Dengan fitur-fitur yang sederhana seperti

Transkripsi

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

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

3 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

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

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

6 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 atau sms dari admin halomini. jadi konfirmasi yang dilakukan member dapat melalui 2 via tersebut ( atau sms).

7 43 Tabel 3.2 Perbandingan e-commerce sejenis 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 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%

8 44 Belum pernah 4 13% Total % belum pernah 13% 1 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

9 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 % 2 iya, satu web 17% tidak dapat membuat web jual beli 63% 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 e- commerce dengan baik.

10 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 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 % tidak dirasakan kurang 10% 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.

11 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 % tidak terampil 30% 4 sangat terampil 7% cukup 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.

12 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 % 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.

13 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 % tidak menyulitkan kurang 13% 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.

14 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 % 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.

15 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 % kurang tertarik 10% tidak tertarik 4% 8 cukup tertarik 24% sangat tertarik 62% Gambar 3.12 Pie chart jawaban pertanyaan nomor 8 Jadi dapat disimpulkan bahwa koresponden sangat tertarik dengan adanya e-commerce generator.

16 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. M embuat web dengan sistem yang dapat membuat web pada bidang e- commerce. Tabel 3.13 Analisis dan solusi kebutuhan NO Analisis Kebutuhan Solusi kebutuhan 1 koresponden mempunyai keinginan memiliki web sendiri. 2 koresponden memiliki keinginan untuk merancang web sendiri. 3 koresponden masih merasa tak handal dalam merancang web Membuat sistem yang berlandasan dapat membuat suatu web. Membuat sistem yang mudah dalam merancang web. Membuat sistem yang user friendly dalam merancang web. sendiri.

17 53 4 koresponden memiliki kendala dalam merancang web pada bagian desain. 5 koresponden memiliki kendala dalam merancang web pada bagian Membuat sistem pembuatan web yang memiliki tingkat kemudahan tinggi dalam merancang desain web. Membuat sistem pembuatan web yang tidak perlu melibatkan user dalam pengkodingan. pengkodingan. 6 Koresponden satu hari dapat Membuat sistem yang bersifat online menghabiskan waktu online minimal 2 jam. 7 koresponden membutuhkan sistem yang dapat membuat web secara Membuat webiste dengan sistem yang dapat membuat web secara online. online. 8 koresponden memiliki minat mempunyai e-commerce sendiri. Membuat web dengan sistem yang dapat membuat web pada bidang e-commerce.

18 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

19 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 Class diagram Class diagram dibawah ini merupakan class diagram yang digunakan dalam sistem e-commerce gener ator : Gambar 3.14 Class Diagram e-commerce generator

20 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 gen erator

21 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. Tabel 3.14 Use case specification daftar Usecase Daftar Actor Description User User melakukan pendaftaran Pre-Condition Flow of events Post Condition 1.Masuk ke halaman utama 2.Masuk ke halaman register User mengisi form yang diberikan sistem, untuk menjadi member.

22 58 Tabel 3.15 use case skenario daftar Skenario Utama Kondisi Awal Aksi Aktor Setelah melakukan pengisian form Reaksi Sistem 2) Mencocokan data user dengan 1) Mengisi form daftar Database. Jika salah tampil pesan error lalu form daftar ditampilkan kembali 4) Mencocokan data daftar dengan 3)Mengisi kembali Form daftar database 5) Jika cocok akan tampil halaman utama untuk member Kondisi Akhir Member dapat melakukan kegiatan pada sistem sesuai kewenangannya.

23 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 Description Pre-Condition Flow of events Post Condition User User melakukan Login User sudah melakukan pendaftaran Masuk ke halaman utama User mengisi form Login

24 60 Tabel 3.17 Use case skenario login user Skenario Utama Kondisi Awal Aksi Aktor Sudah melakukan pendaftaran Reaksi Sistem 2) Mencocokan data login dengan database. 1) Mengisi form login Jika login salah sistem akan menampilkan pesan error dan akan menampilkan form login kembali 4) Mencocokan data login dengan 3)Mengisi kembali Form Login database Jika cocok akan menampilkan halaman utama untuk user Kondisi Akhir User dapat melakukan kegiatan pada sistem sesuai kewenangannya.

25 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. Tabel 3.18 Use case specification pilih template user Use case Pilih Template Actor Description Pre-Condition Flow of events Post Condition User User memilih template yang disediakan oleh sistem User sudah berhasil login dan masuk ke sistem 1.Masuk ke halaman home utama 2.Masuk ke halaman pilih template User memilih template

26 62 Tabel 3.19 Use case scenario pilih template user Skenario Utama Kondisi Awal Aksi Aktor 1) Memilih template 3) mengklik button next Kondisi Akhir User sudah berhasil melakukan login Reaksi Sistem 2) sistem menampilkan template yang dipilih dalam bentuk mini 4) sistem melakukan transisi ke halaman selanjutnya Member sudah melakukan pemilihan template sesuai keinginan user

27 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 Actor Description Pilih Template User User melakukan edit template yang sudah dipilih Pre-Condition User sudah berhasil login dan masuk ke sistem Flow of events 1.Masuk ke halaman utama 2.Masuk ke halaman pilih template 3.Masuk ke halaman edit template Post Condition Member melakukan edit template, melakukan edit pada warna serta huruf yang ada di template

28 64 Tabel 3.21 Use case scenario edit template Skenario Utama Kondisi Awal Aksi Aktor 1) Member melakukan pengeditan template User sudah melakukan pemilihan template Reaksi Sistem 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

29 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 Actor Description Pre-Condition Flow of events Post Condition Login Admin admin melakukan Login User terdaftar sebagai admin Masuk ke halaman home admin Login berhasil

30 66 Tabel 3.23 Use case scenario login admin Skenario Utama Kondisi Awal Aksi Aktor Reaksi Sistem 2) Mencocokan data login dengan 1) Mengisi form login database Jika salah akan Menampilkan pesan error dan menampilkan form login kembali 4) Mencocokan data login dengan 3)Mengisi kembali Form Login database Jika cocok akan menampilkan halaman utama untuk admin Kondisi Akhir admin dapat melakukan kegiatan pada sistem sesuai kewenangannya.

31 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 Actor Description Input Template Admin Admin dapat menambahkan template yang kedalam sistem Pre-Condition User sudah berhasil Login dan masuk ke sistem sebagai admin Flow of events 1.Masuk ke halaman utama 2.Masuk ke halaman setting 3.Masuk ke halaman input template Post Condition Memasukkan data-data template yang dibutuhkan oleh sistem.

32 68 Tabel 3.25 Use case skenario update template admin Skenario Utama Kondisi Awal Aksi Aktor 1) melakukan penguploadan template User sudah melakukan pemilihan template Reaksi Sistem 2) sistem memproses dan menyimpan template ke dalam database admin sudah melakukan penambahan Kondisi Akhir template pada sistem e-commerce generator

33 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 Actor Description Generate User 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.Masuk ke halaman utama 2.Masuk ke halaman pilih template 3.Masuk ke halaman edit template 4.Masuk ke halaman generate Post Condition Mendapatkan kode script e-commerce

34 70 Tabel 3.27 Use case skenario generate Skenario Utama Kondisi Awal Aksi Aktor 1) mengklik button generate Kondisi Akhir User sudah merancang desain web Reaksi Sistem 2) sistem memproses dan melakukan generate Sistem melakukan generate, dan user dapat melakukan pengunduhan.

35 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

36 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

37 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

38 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

39 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

40 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

41 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

42 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

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

44 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

45 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

46 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

47 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

48 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

49 Class Diagram e-commerce Gambar 3.30 Class Diagram e-commerce

50 Use Case e-commerce Gambar 3.31 Use Case-commerce

51 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

52 88 Gambar 3.34 Perancangan layar halaman Utama user Gambar 3.35 Perancangan layar pilih template

53 89 Gambar 3.36 Perancangan layar edit template Gambar 3.37 Perancangan layar generate template

54 Skema Sistem e-commerce generator Gambar 3.38 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.