Analisa Masalah Diagram Konteks Diagram Berjenjang DFD Level

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