48 BAB IV
ANALISA DAN PERANCANGAN SISTEM
4.1. Analisa Permasalahan
4.1.1 Sistem yang digunakan pada saat ini
Sistem penjualan yang dilakukan oleh Toko Lia Butik Brebes merupakan sistem yang hanya memanfaatkan beberapa akun sosial saja seperti facebook dan Blackberry Messanger sehingga ruang lingkup penjualannya kurang luas dan terbatasnya ruang promosi karena dengan begitu hanya orang-orang tertentu saja yang dapat mengetahui toko ini beserta informasi penting lainnya.
4.1.2 Solusi yang ditawarkan
Dari permasalahan diatas, solusi yang ditawarkan adalah
pembuatan toko online, yang dapat membuat sistem promosi dan penjualan secara online. Dalam sistem ini, penjual dapat meningkatkan penjualan dengan cara memperluas jangkauan penjualan dan konsumen dapat melihat informasi barang secara online dengan promosi dan informasi yang lebih lengkap serta melakukan pemesanan langsung dari e-commerce sehingga dapat menyelesaiakan permasalahan promosi dan persaingan
49
4.2. Analisa Kebutuhan Sistem
Peracangan sistem sangat dibutuhkan untuk mendapatkan suatu sistem yang dapat berjalan dengan baik. Diantaranya mencakup perancangan database, peracangan perangkat keras (hardware), perangkat lunak (software), dan brainware.
4.2.1 Perangkat Keras
Adapun pemilihan spesifikasi minimal hardware yang digunakan dalam merancang program ini adalah satu perangkat komputer dengan spesifikasi minimal sebagai berikut :
1. Processor Intel(R) Core(TM) 2. RAM DDR3 4,00GB
3. Hardisk 620 GB
4. Input device berupa mouse dan keyboard 5. Output device berupa monitor dan printer 6. Modem Smartfrend
4.2.2 Perangkat Lunak
1. Sistem Operasi Microsoft Windows 7.
2. Program Aplikasi Macromedia Dreamweaver CS5.
3. Program Aplikasi XAMMP V.3.2.1 - Data : Mysql
50
-Run : Php -Server :Apache 4.3. Perancangan Sistem
4.3.1 Use Case Diagram 1. Identifikasi Aktor
Adapun kegiatan yang telah divisualisasikan kedalam diagram use case adalah sebagai berikut :
Tabel 4.1 Indentifikasi Aktor
No Aktor Deskripsi
1 Admin Bagian yang mengenai dan
memproses data pada Lia Butik Brebes
2 Member Orang yang sudah mendaftar menjadi anggota pembeli pada Lia Butik Brebes
3 Non Member Orang yang belum mendaftar dan belum menjadi anggota pada Lia Butik Brebes
2. Identifikasi Diagram Use Case Case menggambarkan interaksi antara actor dengan sistem.
Tabel 4.2 Identifikasi Digram Use Case No Use Case
Name
Deskripsi Aktor
51
1 Login Use case
menggambarkan kegitan
memasukkan username dan password untuk mengakses sistem
Admin dan
Member
No Use Case Name
Deskripsi Aktor
2 Logout Use case
menggambarkan kegiatan keluar dari system
Admin dan
Member
3 Manajemen prodak
Use Case
menggambarkan kegiatan mengolah data barang
Admin
4 Manajemen Data
Kategori Admin
Use Case
Menggabarkan kegiatan mengolah data kategori
Admin
5 Lihat Pemesanan
Use Case
menggambarkan kegiatan mengolah data admin
Admin
6 Pesan Barang
Use Case
menggambarkan kegiatan pesan barang
Member
7 Lihat Detail Barang
Use case
menggambarkan kegiatan lihat barang
Member dan non member
8 Melakukan pendaftaran member
Use case
menggambarkan kegiatan
melakukan pendaftaran member
Non member
52
Berikut adalah gambar model use case diagram website penjualan Toko Lia Butik Brebes :
Gambar 4.1 Use Case Diagram
53
4.3.2 Sequence Diagram
Sequence Diagram yang menggambarkan bagaimana obyek berinteraksi dengan obyek lainnya melalui pesan (message) yang disampaikan, disusun dalam urutan kejadian atau waktu dan secara khusus berasosiasi dengan use case. Agar dapat memahami tentang rangkaian, urutan atau rentetan sistem maka perlu dibuatnya sequence diagram, yaitu :
1. Sequence Digram Melakukan Login
Gambar 4.2 Sequence Digram Melakukan Login
54
2. Sequence Diagram Admin Manajemen Cara Beli
Gambar 4.3 Sequence Diagaram Admin Manajemen Cara Beli 3. Sequence Diagram Admin Manajemen Ganti Password
55
Gambar 4.4 Sequence Diagram Admin Manajemen Ganti Password
4. Sequence Diagram Admin Manajemen Prodak
Gambar 4.5 Sequence Digram Admin Manajemen Prodak
56
5. Sequence Diagram Admin Manajemen Kategori
Gambar 4.6 Sequence Admin Manajemen Kategori 6. Sequence Diagram Admin Manajemen Data Customer
57
Gamabar 4.7 Sequence Digram Admin Manajemen Data Customer 7. Sequence Diagram Admin Manajemen Bukutamu
Gambar 4.8 Sequence Diagram Admin Manajemen Bukutamu 8. Sequence Diagram Admin Manajemen Konfirmasi Pembayaran
58
Gambar 4.9 Sequence Diagram Admin Manajemen Konfirmasi 9. Sequence Diagram Admin Manajemen Logout
Gambar 4.10 Sequence Diagram Admin Manajemen Logout 10. Sequence Digram User Daftar Member
59
Gambar 4.11 Sequence Diagram User Daftar Member 11. Sequence Diagram User Login Member
Gambar 4.12 Sequence Diagram User Login Member 12. Sequence Diagram User Melihat Prodak Kami
60
Gambar 4.13 Sequence Diagram User Melihat Prodak Kami 13. Sequence Diagram User Prodak
Gambar 4.14 Sequence Diagram User Prodak 14. Sequence Diagram User Kategori
61
Gambar 4.15 Sequence Diagram User Kategori 15. Sequence Diagram User Pemesanan
Gambar 4.16 Sequence Diagram User Pemesanan 16. Sequence Diagram User bukutamu
62
Gambar 4.17 Sequence Diagram User Bukutamu 17. Sequence Diagram User Konfirmasi Pembayaran
Gambar 4.18 Sequence Diagram User Konfirmasi 18. Sequence Diagram User Logout
63
Gambar 4.19 Sequence Diagram User Logout
4.3.3 Class Diagram
Class diagram adalah inti dari proses pemodelan objek. Baik forward engineering maupun reverse engineering memanfaatkan diagram ini. Forward engineering adalah proses perubahan model menjadi kode program sedangkan reverse engineering sebaiknya merubah kode program menjadi model. Agar dapat membuat kode program maka dapat memanfaatkan class diagram, berikut ialah gambar class diagram website penjualan pada Toko Lia Butik Brebes :
64
Gambar 4.20 Class Diagram
65
4.3.4 Table Relation
Di dalam table relation terdapat hubungan antar table, yang merepresentasikan interaksi antara satu table dengan table lainya.
Table Relation ini juga dapat menjadi kode database yang sesuai dengan database yang digunakan. Berikut ialah gambar table relation website penjualan Toko Lia Butik :
66
Gambar 4.21 Table Relation
67
4.3.5 Activity Diagram
Menerangkan aktivitas dari masing-masing use case, yaitu setiap interaksi antara aktor dengan sistem yang telah digambarkan dalam use case diagram. Menjelaskan setiap alir aktivitas yang dilakukan sistem, atas perintah dari aktor.
1. Activity Diagram Login Admin
Gambar 4.22 Gambar Login Admin
act Login Admin
Sistem Admin
Mulai
input Username dan
Passw ord Validasi Username dan
Passw ord
Apakah Username dan Password valid ? Peringatan Login Gagal
Menampilkan Halaman Utama
Selesai [Ya]
[Tidak]
68
2. Activity Diagram Manajemen Cara Beli
Gambar 4.23 Activity Diagram Manajemen Cara Beli 3. Activity Diagram Manajemen Cara Ganti Password
69
Gambar 4.24 Activity Diagram Manajemen Cara Ganti Password 4. Activity Diagram Manajemen Prodak
70
Gambar 4.25 Activity Diagram Manajemen Prodak
71
5. Activity Diagram Manajemen Kategori
72
Gambar 4.26 Activity Manajemen Kategori 6. Activity Diagram Manajemen Customer
Gambar 4.27 Activity Diagram Manajemen Customer
73
7. Activity Diagram Manajemen Bukutamu
Gambar 4..28Activity Diagram Manajemen Bukutamu
act manaj emen bukutamu
system admin
mulai
pilih menu bukutamu tampil halaman bukutamu
apakah akan delet ?
pilih recorde
proses delet
selesai ya
tidak
74
8. Activity Diagram Manajemen Konfirmasi
Gambar 4.29 Activity Diagram Manajemen Konfirmasi 9. Activity Diagram Manajemen Logout
Gambar 4.30 Activity Diagram Manajemen Log
act manaj emen konfirmasi pembayaran
system admin
mulai
pilih menu konfirmasi tampil halaman konfirmasi
apakah akan delet ?
pilih record
proses delet
selesai [tidak]
[ya]
75
10. Activity Diagram User Login Member
Gambar 4.31 Activity Diagram User Login Member
act user login member
sistem user
mulai
masuk form login
menerima permintaan form login
menampilkan form login mengisi username dan
passw ord
v alidasi username dan passw ord
peringatan login Gagal
menampilkan halaman utama
selesai [ya]
[tidak]
76
11. Activity Diagram User Daftar Member
Gambar 4.32 Activity Diagram User Daftar Member 12. Activity Diagram User Kategori
77
Gambar 4.33 Activity Diagram User Kategori 13. Activity Diagram User Member Prodak
Gambar 4.34 Activity Diagram User Member Prodak 14. Activity Diagram User Profil
78
Gambar 4.35 Activity Diagram User Profil 15. Activity Diagram User Pemesanan
Gambar 4.36 Activity Diagram User Pemesanan
79
16. Activity Diagram User Pembelian
Gambar 4.37 Activity Diagram User Pembelian 17. Activity Diagram User Bukutamu
act user pembelian
system member
mulai
pilih produck menampilkan halaman
produk
apakah akan beli ?
menampilkan halaman pembelian
apakah akan hapus ? menampilkan semua
prodak
apakah akan buy now ? selsesai
menampilkan struck pembayaran
selesai ya
selesai ya
ya tidak
[tidak]
[tidak]
80
Gambar 4.38 Activity Diagram User Bukutamu 18. Activity Diagram User Konfirmasi
Gambar 4.39 Activity Diagram User Konfirmasi
act user bukutamu
system member
mulai
pilih menu bukutamu menampilkan halaman
bukutamu
apakah akan input ?
melakukan input bukutamu
selesai ya
tidak
act user konfirmasi
system member
mulai
pilih menu konfirmasi
menampilkan halaman konfirmasi
apakah akan input ?
melakukan input konfirmasi pembayaran
selesai [tidak]
[ya]
81
19. Activity Diagram User Melakukan Logout
Gambar 4.40 Activity Diagram User Melakukan Logout
82
4.4. Implementasi Database 4.4.1 Tabel Admin
Table 4.3 Tabel Admin
No Nama Field Type panjang Keterangan 1 Username Varchar 50 Usernameadmin 2 Password Varchar 50 Password Admin 3 nama_lengkap Varchar 100 Nama Admin
4 Email Varchar 100 Email admin
5 lno_telp Varchar 20 No telepon admin
6 Level Varchar 20 Level admin
7 Blokir
Enum (“Y,N”
Blokir admin
83
4.4.2 Tabel produk
Table 4.4 Tabel Produk
No Nama Field Type Panjang Keterangan
1 Id_prodak Int 5 Primary key
2 Id_kategori Int 5 Kategori prodak 3 Nama_produk Varchar 100 Nama prodak 4 Produk_seo Varchar 100 Prodak
5 Deskripsi Text Deskripsi prodak
6 Harga Int 20 Harga prodak
No Nama Field Type Panjang Keterangan
7 Stok Int 5 Stok barang
8 Berat decimal 5,2 Berat barang
9
Tanggal_masuk Date
Tanggal masuk pemesanan
10 Gambar varchar 100 Gambar prodak
11 Dibeli Int 5 Beli barang
12 Diskon Int 5 Diskon barang
13 Status varchar 10 Status barang
14 Review Text Review barang
84
4.4.3 Tabel Customer
Table 4.5 Tabel Kustomer
No Nama Field Type Panjang Keterangan
1 Id_customer Int 5 Primary key
2 Password Varchar 50 Password customer 3 Nama_lengkap Varchar 100 Nama customer
4 Alamat Text Alamat customer
5 Email Varchar 100 Email customer
6 Telepon Varchar 12 No telepon customer
7 Id_kota int 5 Kota customer
8 Aktif enum Customer online
4.4.4 Tabel Kategori
Table 4.6 Tabel Kategori
No Nama Type Panjang Keterangan
1 Id_kategori Int 5 Primary key
2 Nama_kategori Varchar 100 Nama kategori 3 Kategori_seo Varchar 100 Kategori
85
4.4.5 Tabel Bukutamu
Table 4.7 Tabel Bukutamu
No Nama Type Panjang Keterangan
1 Id_bukutamu Varchar 6 Primary key
2 Nama Varchar 4 Kategori
3 Email Varchar 45 Produk
4 Pesan Varchar 15 Harga produk
5 Waktu Varchar 45 Foto
6 Keterangan Varchar 225 Keterangan
4.4.6 Tabel Konfirmasi Pembayaran
Table 4.8 Tabel Konfirmasi Pembayaran
No Nama Type Panjang Keterangan
1 Id_konfirmasi Int 5 Primary key 2 No_order Varchar 40 Nomer orderan
3 Nama Varchar 15 Nama pengirim
4 Bank Varchar 20 Bank di tuju
5 Nominal char 15 Jumlah nominal
4.4.7 Tabel Order Masuk
Table 4.9 Tabel Order Masuk
86
No Nama Type Panjang Keterangan
1 Id_order Int 5 Nomer order
2 Status_order Varchar 50 Status order
3 Tgl_order Date Tanggal order
4 Jam_order Time Jam order
5 Id_customer Int 5 Nama yang mengorder
4.5. Desain Input/Output
4.5.1 Antar Muka Pemakai (User Interface)
Gambar 4.41 Antar Muka Pemakai (User Interface)
87
4.5.2 Antar Muka Admin 1. Login Admin
Gambar 4.42 Login Admin 2. Halaman Administrator
Gambar 4.43 Halaman Administrator 3. Desain Layout Manage Data Prodak
88
Gambar 4.44 Data Prodak 4. Desain Layout Manage Data Kategori
Gambar 4.45 Data Kategori 5. Desain Layout Manage Data Customer
89
Gambar 4.45 Data Customer 6. Desain Layout Manage Data Bukutamu
Gambar 4.46 Data Bukutamu
7. Desain Layout Manage Data Konfirmasi Pembayaran
90
Gambar 4.47 Data Konfirmasi Pembayaran 8. Desain Layout Manage Data Order Masuk
Gambar 4.48 Data Order Masuk 9. Desain LogOut
91
Gambar 4.49 Desain Logout
92
