19
3.2 Analisa Masalah
Analisa masalah sistem untuk membangun aplikasi berbasis web pada toko musik Anggita Musicca Guitar. Sistem yang ada saat ini menggunakan
media sosial dan akan dikembangkan dengan wordpress menjadi aplikasi berbasis web agar pelanggan maupun admin dengan mudah melihat, mencari,
membeli, maupun meng-update barang pada aplikasi berbasis web Anggita
Musicca Guitar.
3.3 Analisa Kebutuhan Sistem
1. User pelanggan
Fasilitas-fasilitas yang akan diberikan kepada pelanggan untuk memudahkan dalam mencari, memilih dan memesan barang sebagai
berikut: a.
Fasilitas Komentar Fasilitas ini berguna untuk menulis ataupun membalas dan
melihat komentar-komentar diskusi yang ditulis pelanggan lain.
b. Fasilitas Lihat Barang
Fasilitas ini berguna untuk melihat barang apa saja yang tersedia pada Aplikasi.
c. Fasilitas Beli Barang
20
Fasilitas ini berguna untuk membeli barang yang diinginkan pelanggan.
2. Admin
Fasilitas yang tersedia untuk admin adalah: a.
Fasilitas Kelola Barang
Fasilitas ini berguna untuk mengubah, menambah dan menghapus data barang
b.
Fasilitas Kelola Komentar Diskusi
Fasilitas ini berguna untuk membuat topik, membalas komentar dan menghapus komentar pada forum diskusi.
21
3.3.1 Use Case Diagram
1. User
User
Gambar 3.1 Use Case diagram subsistem UserMember.
Lihat barang
Beli barang
Tulis Komentar Forum
Lihat Forum
Login
Logout
Daftar Member
22
2. Admin
Admin
Gambar 3.2 Use Case diagram subsistem Administrator
3.3.1.1 Use Case Narasi
1. Nama Use Case
: Daftar Member Deskripsi
: Use case ini menggambarkan proses daftar menjadi member untuk masuk kedalam sistem.
Kondisi awal : Pelanggan membuat akun dengan
username dan password.
Tambah Login Admin
Ubah Barang
Hapus Barang
Kelola
Logout Admin
23
Trigger : Use Case ini digunakan pelanggan yang ingin
menjadi member. Kesimpulan : Use case ini berhenti apabila pelanggan telah
berhasil keluar dari kehalaman menu utama sistem. Batasan Implementasi
: Member berhasil keluar dari sistem. Aksi Aktor
Respon Sistem Step 1: user memilih daftar
member login Step 2: Sistem akan menampilkan
menu login daftar member Step 3: Member memasukkan data
diri beserta
username dan
password yang akan dipakai. Step 4: Member menekan tombol
“Oke” Step 5: Sistem akan cek validasi
username dan password Step 6: Sustem akan menampilkan
pesan konfirmasi
pendaftaran member
24
2. Nama Use Case : Login member
Deskripsi : Use case ini menggambarkan proses
masuk kedalam halaman sistem. Kondisi awal
: Member telah memiliki username dan password.
Trigger : Use case ini digunakan saat member
ingin masuk kedalam halaman sistem.
Aksi Aktor Respon Sistem
Step 1: Member membuka halaman LOGIN
Step 2: Sistem meminta member untuk memasukkan
username dan password Step
3: Member
memasukkan username dan password
Step 4: Member menekan tombol LOGIN
Step 5 : Sistem mengecek validasi
username dan
password
25
Step 6: Sistem masuk ke halaman utama Member
Kesimpulan : Use case ini berhenti apabila member
telah berhasil masuk kehalaman menu utama sistem Batasan Implementasi : Hanya dapat diakses oleh member
yang memiliki username dan password
3. Nama Use Case : Logout Member
Deskripsi : Use case ini menggambarkan proses
keluar dari sistem Kondisi awal
: Member telah melalui proses LOGIN Trigger
: Use case ini digunakan saat member ingin keluar dari halaman sistem
Aksi Aktor Respon Sistem
Step 1: Member memilih menu LOGOUT
Step 2: Sistem melakukan proses LOGOUT
Kesimpulan : Use case ini berhenti apabila
member telah berhasil keluar dari halaman menu utama sistem
Batasan Implementasi : Keluar dari halaman sistem.
26
4. Nama Use Case
: Lihat barang Deskripsi
: Use case ini merupakan halaman awal dimana user dapat melihat barang yang dijual di Anggita
Musicca Gitar. Kondisi awal
: User sudah masuk ke alamat web Lapak Indie Musik.
Trigger : Usecase digunakan untuk melihat
barang yang di jual di Lapak Indie Musik.
Kesimpulan : Use case ini berhenti saat user memilih
menu lain. Batasan Implementasi : Sistem selesai dibangun dan dapat
diakses. 5.
Nama Usecase : Beli Barang
Aksi Aktor Respon Sistem
Step 1: user memilih menu “Produk” untuk melihat barang
yang dijual Step 2: Sistem akan menampilkan
menu “Produk”
dengan menampilkan data barang yang
dijual.
27
Deskripsi : Usecase ini digunakan untuk
membeli barang sesuai dengan keinginan pelanggan.
Kondisi awal : Pelangan sudah masuk ke
menu utama dan memilih produk.
Trigger : Usecase ini digunakan untuk
melakukan pembelian barang.
Aksi Aktor Respon Sistem
Step 1: User memilih menu produk
Step 2: Sistem menampilkan detail produk
Step 3: User menekan tombol
beli gambar
keranjang Step 4: Sistem menampilkan
halaman produk pembelian Step 5: User melakukan
konfirmasi pembelian
28
dengan menekan tombol proceed to checkout
Step 6: Sistem memproses dan akan menampilkan total
pembelian dan
halaman pengisian data user dari
nama, alamat hingga alamat email sebagai.
Step 7: Setelah mengisi data pembelian dengan lengkap,
user dapat
mengakhiri proses pembelian dengan
menekan tombol
Place Order
Step 8:
Sistem akan
menyimpan data user dan menampilkan Order Detail
dan Customer Detail yang sudah
tersimpan, proses
pmbelian selesai.
29
Kesimpulan : Usecase ini akan berhenti
apabila user menekan tombil lain atau proses beli barang
berhasil. Batasan Implementasi : Sistem selesai dibangun dan
dapat diakses.
6. Nama Usecase
: Lihat Komentar Deskripsi
: Usecase ini digunakan untuk melihat
komentar dari
pelanggan lain. Trigger
: Usecase ini digunakan saat user ingin melihat komentar
Aksi Aktor Respon Sistem
Step 1: User memilih menu “Forum Diskusi”
Step 2: Sistem menampilkan halaman
“Forum Diskusi”
Kesimpulan : Sistem akan menampilkan
halaman forum.
30
Batasan Implementasi : Menampilkan semua topik dan komentar.
7. Nama Usecase
: Tulis Komentar Deskripsi
: Usecase ini menggambarkan proses user menulis komentar.
Trigger :
Usecase ini
digunakan apabila user akan menulis
komentar. Aksi Aktor
Respon Sistem Step 1: User menulis pada
forum diskusi
Step 2: User menekan tombol “Submit”
Step 3: Sistem memproses dan
menyimpan data
komentar
Step 4: Sistem menampilkan komentar user
31
Kesimpulan : Usecase ini digunakan untuk
menulis komentar. Batasan Implementasi
: Harus dapat menyimpan data komentar.
8. Nama Usecase
: Tambah Barang Deskripsi
: Usecase ini menggambarkan proses enambahan data barang
baru pada sistem. Trigger
: Usecase ini digunakan untuk menambah barang baru.
Aksi Aktor Respon Sistem
Step 1: Admin memilih menu “add product”
Step 2:
Sistem menampilakan
halaman tambah barang
Step 3: Admin menambah data barang dengan mengisi
field yang ada di halaman, keterangan, detail produk
dan foto
32
Step 4: Admin menekan button “Save”
Step 5: Sistem memproses dan
akan menampilkan
pesan berhasil Kesimpulan
: Usecase ini berhenti saat admin
berhasil menambah
data barang atau keluar dari halaman.
Batasan Implementasi : Dapat menyimpan data
barang.
9. Nama Usecase
: Ubah Barang Deskripsi
: Usecase ini menggambarkan proses ubah barang.
Trigger :
Usecase ini
digunakan untuk
mengubah data barang Aksi Aktor
Respon Sistem Step 1: Admin memilih
data yang akan diubah pada “product”
33
Step 2:
Sistem menampilkan detail data
barang Step 3: Admin mengubah
data barang dan menekan tombol “save”
Step 4: Sistem memproses pengubahan data barang
dan menampilkan pesan berhasil
Kesimpulan : Usecase akan berhenti
jika data barang berhasil diubah dan disimpan. Batasan Implementasi : Data barang yang tersimpan
harus dapat diubah.
10. Nama Usecase
: Hapus Barang Deskripsi
: Usecase
ini menggambarkan proses hapus barang.
Trigger : Usecase ini digunakan untuk
menghapus data barang. Aksi Aktor
Respon Sistem Step 1: Admin memilih
34
barang yang akan di hapus pada
“product” Step
2: Sistem
menampilkan data barang Step 3: Admin mencari
data barang yang akan di hapus
Step 4: pilih data yang di hapus dan tekan tombol
“trash” Step 5: Sistem memproses
data yang dihapus dan menampilkan
pesan berhasil
Step 5: user menekan “Save”
Kesimpulan : Usecase ini berhenti
jika data berhenti jika data berhasil dihapus. Batasan Implementasi : harus dapat menghapus data
barang.
35
11. Nama Usecase
: Kelola Komentar Deskripsi
: Usecase ini menggambarkan proses untuk menampilkan atau
menghapus komentar pada forum diskusi. Trigger
: Usecase ini digunakan untuk menampilkan atau menghapus komentar.
Aksi Aktor Respon Sistem
Step 1: Admin masuk ke halaman “Forum Diskusi”
Step 2: Sistem akan menampilkan halaman
“Forum Diskusi” Step 3: Admin dapat menghapus
komentar dengan memilih komentar yang akan di hapus dan
menekan tombol “Trash” Step 4: Sistem menampilkan
halaman “Forum Diskusi”
Kesimpulan : Usecase ini berhenti
apabila admin keluar dari halaman komentar.
36
Batasan Implementasi : Hanya dapat diakses oleh admin dan harus dapat menampilkan dan meghapus
komentar.
37
3.4 Logical Design
3.4.1 Pemodelan Proses DFD Data Flow Diagram
a. Diagram Konteks
Diagram konteks adalah model proses untuk mendokumentasikan
lingkup sistem Jeffrey Whitten, Lonnie D Bentley, Victor M. Barlow, 2004
Gambar 3.3 Diagram Konteks
b. Diagram Berjenjang
1. Diagram Berjenjang SI Anggita Musicca Guitar
Gambar 3.4 Diagram Berjenjang SI Anggita Musicca Gitar
Aplikasi Toko Anggita Musicca Guitar
Admin User
Aplikasi Toko Online Anggita Musicca Guitar
2 Subsistem User
1 Subsistem
Administrator
38
2. Diagram Berjenjang Subsistem Administrator
Gambar 3.5 Diagram Berjenjang Subsistem Administrator.
1 Subsistem
Administrator
1.1 Login
Administrator 1.2
Kelola Barang 1.3
Kelola Diskusi
1.2.1p Tambah
Barang 1.2.1p
Ubah Barang
1.2.1p Hapus
Barang 1.3.1p
Hapus Diskusi
39
3. Diagram Berjenjang Subsistem User
Gambar 3.6 Diagram Berjenjang Subsistem UserMember
2 Subsistem
User
2.2 Lihat Barang
2.1.1p Beli
Barang 2.3
Lihat Diskusi
2.2.1p Tulis
Diskusi 2.1
Login User 2.4
Logout User
40
c. DFD Level
1. DFD Level 1 Subsistem Administrator
1
ADMIN Username password
Data Tambah Barang
Konfirmasi Data Ubah Barang
Konfirmasi Data Hapus Barang
Konfirmasi
Data Tulis Komentar Konfirmasi
Data Hapus Komentar Konfirmasi
Konfirmasi
1.1p
LOGIN ADMINISTRASI
1.2p
KELOLA BARANG
1.3p
KELOLA DISKUSI
Gambar 3.7 DFD Level 1 Subsistem Administrator
41
2. DFD Level 1 Subsistem User
2
USER Data Cari Barang
Data Barang Data Beli Barang
Konfirmasi
Lihat Forum Diskusi
Data Lihat Forum Diskusi
Data Tulis Diskusi
Konfirmasi
2.1p
LIHAT BARANG
2.2p
LIHAT FORUM DISKUSI
Gambar 3.8 DFD Level 1 Subsistem UserMember
42
3. DFD Level 2 Proses 1.2
1.2
ADMIN Data Tambah Barang
Konfirmasi
Data Ubah Barang Konfirmasi
Data Hapus Barang Konfirmasi
1.2.1p
1.2.2p
1.2.3p
TAMBAH BARANG
UBAH BARANG
HAPUS BARANG
Gambar 3.9 DFD Level 2 Proses 1.2
43
4. DFD Level 2 Proses 1.3
1.3
ADMIN Data Tampil
DISKUSI Konfirmasi
Data Hapus Diskusi Konfirmasi
1.3.1p
1.3.2p
TAMPILKAN DISKUSI
HAPUS DISKUSI
Gambar 3.10 DFD Level 2 Proses 1.3
5. DFD Level 2 Proses 2.2
2.2
User Data Cari Barang
Konfirmasi
Data Beli Barang Konfirmasi
2.2.1p
2.2.2p
CARI BARANG
BELI BARANG
Gambar 3.11 DFD Level 2 Proses 2.2
44
6. DFD Level 2 Proses 2.3
2.3
User Data Tulis Diskusi
Konfirmasi Data Diskusi
2.3.1p
TULIS DISKUSI
Gambar 3.12 DFD Level 2 Proses 2.3
45
3.4.1.1 Pemodelan Data
wp_comment
TULIS isi_komentar
tgl_komentar
wp_users email
BELI
nama_barang jumlah
harga
kode_barang ALAT MUSIK
nama_barang harga
deskripsi
gambar KATEGORI
PUNYA kategori
Kode barang
1 N
N
N N
1
Gambar 3.13 Diagram ER
3.4.1.2 Perancangan Antar Muka
3.4.1.2.1 User pelanggan
Beberapa desain antar muka yang akan di rancang untuk pelanggan sebagai berikut:
46
1. Halaman Awal
ANGGITA MUSICCA GITAR
HOME PRODUK
GITAR CUSTOM
SOFTCASE CUSTOM
SERVICE GITAR
KOMENTAR KONTAK
POST
Gambar 3.14 Disain halaman home
2. Halaman Menu Produk
ANGGITA MUSICCA GITAR
HOME PRODUK
GITAR CUSTOM
SOFTCASE CUSTOM
SERVICE GITAR
KOMENTAR KONTAK
PERLENGKAPAN ALAT MUSIK
CAJON GITAR
VIOLIN
Gambar 3.15 Disain halaman menu produk
47 3.
Halaman Menu Produk Perlengkapan
ANGGITA MUSICCA GITAR
HOME PRODUK
GITAR CUSTOM
SOFTCASE CUSTOM
SERVICE GITAR
FORUM KONTAK
PERLENGKAPAN ALAT MUSIK
CAJON GITAR
VIOLIN
Gambar 3.16 Disain halaman menu produk perlengkapan
4. Halaman Menu Produk Perlengkapan Cajon
ANGGITA MUSICCA GITAR
HOME PRODUK
GITAR CUSTOM
SOFTCASE CUSTOM
SERVICE GITAR
FORUM KONTAK
KATEGORI PERLENGKAPAN CAJON
Gambar 3.17 Disain halaman menu produk perlengkapan cajon
48 5.
Halaman Menu Produk Perlengkapan Gitar
ANGGITA MUSICCA GITAR
HOME PRODUK
GITAR CUSTOM
SOFTCASE CUSTOM
SERVICE GITAR
FORUM KONTAK
kategori PERLENGKAPAN GITAR
Gambar 3.18 Disain halaman menu produk perlengkapan gitar 6.
Halaman Menu Produk Perlengkapan Violin
ANGGITA MUSICCA GITAR
HOME PRODUK
GITAR CUSTOM
SOFTCASE CUSTOM
SERVICE GITAR
FORUM KONTAK
kategori PERLENGKAPAN VIOLIN
Gambar 3.19 Disain halaman menu produk perlengkapan violin
49 7.
Halaman Menu Produk Alat Musik
ANGGITA MUSICCA GITAR
HOME PRODUK
GITAR CUSTOM
SOFTCASE CUSTOM
SERVICE GITAR
FORUM KONTAK
PERLENGKAPAN ALAT MUSIK
CAJON GITAR
VIOLIN
Gambar 3.20 Disain halaman menu produk alat musik
8. Halaman Menu Produk Alat Musik Cajon
ANGGITA MUSICCA GITAR
HOME PRODUK
GITAR CUSTOM
SOFTCASE CUSTOM
SERVICE GITAR
FORUM KONTAK
KATEGORI ALAT MUSIK CAJON
Gambar 3.21 Disain halaman menu produk alat musik cajon
50 9.
Halaman Menu Produk Alat Musik Gitar
ANGGITA MUSICCA GITAR
HOME PRODUK
GITAR CUSTOM
SOFTCASE CUSTOM
SERVICE GITAR
FORUM KONTAK
KATEGORI ALAT MUSIK GITAR
Gambar 3.22 Disain halaman menu produk alat musik gitar
10. Halaman Menu Produk Alat Musik Violin
ANGGITA MUSICCA GITAR
HOME PRODUK
GITAR CUSTOM
SOFTCASE CUSTOM
SERVICE GITAR
KOMENTAR KONTAK
KATEGORI ALAT MUSIK VIOLIN
Gambar 3.23 Disain halaman menu produk alat musik violin
51 11.
Halaman Gitar Custom
ANGGITA MUSICCA GITAR
HOME PRODUK
GITAR CUSTOM
SOFTCASE CUSTOM
SERVICE GITAR
FORUM KONTAK
TENTANG GITAR CUSTOM ALAMAT ATAU KONTAK
Gambar 3.24 Disain halaman menu gitar custom
12. Halaman Menu Softcase Custom
ANGGITA MUSICCA GITAR
HOME PRODUK
GITAR CUSTOM
SOFTCASE CUSTOM
SERVICE GITAR
FORUM KONTAK
GITAR AKUSTIK GITAR ELEKTRIK
Gambar 3.25 Disain halaman menu softcase custom
52 13.
Halaman Menu Softcase Custom Gitar Akustik
ANGGITA MUSICCA GITAR
HOME PRODUK
GITAR CUSTOM
SOFTCASE CUSTOM
SERVICE GITAR
FORUM KONTAK
SOFTCASE GITAR AKUSTIK KATEGORI
Gambar 3.26 Disain halaman menu softcase custom gitar akustik
14. Halaman Menu Softcase Custom Gitar Elektrik
ANGGITA MUSICCA GITAR
HOME PRODUK
GITAR CUSTOM
SOFTCASE CUSTOM
SERVICE GITAR
FORUM KONTAK
SOFTCASE GITAR ELEKTRIK KATEGORI
Gambar 3.27 Disain halaman menu softcase custom gitar elektrik
53 15.
Halaman Service Gitar
ANGGITA MUSICCA GITAR
HOME PRODUK
GITAR CUSTOM
SOFTCASE CUSTOM
SERVICE GITAR
FORUM KONTAK
DAFTAR SERVICE DAN HARGA
Gambar 3.28 Disain halaman menu service gitar
16. Halaman Komentar
ANGGITA MUSICCA GITAR
HOME PRODUK
GITAR CUSTOM
SOFTCASE CUSTOM
SERVICE GITAR
FORUM KONTAK
FORUM AREA
Gambar 3.29 Disain halaman menu forum diskusi
54 17.
Halaman Kontak
ANGGITA MUSICCA GITAR
HOME PRODUK
GITAR CUSTOM
SOFTCASE CUSTOM
SERVICE GITAR
FORUM KONTAK
KONTAK ANGGITA MUSSICA GITAR
Gambar 3.30 Disain halaman menu kontak
3.5 Desain Fisik dan Integrasi