BAB III ANALISA DAN PERANCANGAN SISTEM 3.1 Objek Penelitian 3.1.1 Sejarah Perusahaan Jaya Komputer merupakan sebuah usaha keluarga yang bergerak di bidang penjualan komputer dan aksesoris diantaranya adalah monitor, processor, hardisk, memory dan perangkat aksesoris lainnya. Selain penjualan komponen komputer, jaya komputer juga melayani penjualan paket komputer lengkap, tukar tambah, maupun reparasi. Jaya komputer didirikan oleh Bambang Iswadi (pemilik) pada 2010 yang beralamat di Perumahan Pondok Timur Indah Jl Puyuh 1 blok F no 31 Mustika Jaya, Bekasi Timur. Usaha ini berawal saat pemilik yang pernah bekerja sebagai teknisi di salah satu perusahaan komputer di Jakarta merasa tertantang untuk mempunyai usaha sendiri dibidang penjualan komputer. Pemilik memilih Bekasi sebagai tempat usahanya sebab pemilik melihat pasar yang menjanjikan karena belum adanya toko komputer yang lengkap dan murah di daerah Bekasi sedangkan kebutuhan perangkat komputer saat ini dibutuhkan masyarakat. Ini terbukti dengan respon yang diberikan oleh masyarakat yang sangat positif. 3.1.2 Visi dan Misi Adanya visi dan misi merupakan syarat wajib bagi sebuah perusahaan dimana ini merupakan landasan dasar atas tujuan yang akan dicapai sebuah perusahaan. Adapun visi dan misi dari Jaya komputer yaitu : Visi Menjadi toko yang menyediakan peralatan komputer yang lengkap, dan terjangkau, juga menguntungkan dalam industri perdagangan 26

27 Misi 1. Memberikan layanan terbaik bagi konsumen 2. Memberikan kepuasan terhadap konsumen 3.1.3 Struktur Organisasi Bagi setiap perusahaan, struktur organisasi mempunyai arti yang penting. Karena dengan mengetahui struktur organisasi, maka dapat diperoleh gambaran mengenai bagian-bagian yang ada dalam perusahaan tersebut, dan sampai sejauh mana wewenang dan tanggung jawab bagianbagian tersebut dapat melaksanakan tugasnya. Dengan demikian, akan dapat diketahui siapa yang akan dapat bertanggung jawab dan kepada siapa harus bertanggung jawab atas suatu pekerjaan yang telah dilakukan maupun yang sedang dilakukan.dalam mencapai sasaran dan tujuan perusahaan dibutuhkan suatu organisasi atau kesatuan kerja sumber daya manusia yang berada di dalamnya agar dapat bekerjasama dalam mencapai tujuan perusahaan tersebut. Adapun struktur organisasi Jaya Komputer dapat di lihat pada gambar tersebut: PEMILIK ADMIN TEKNISI 1 TEKNISI 2 Gambar 3.1 Struktur Organisasi Jaya Komputer Adapun berikut ini adalah keterangan dari tugas-tugas dan wewenang bagianbagian yang ada pada Jaya Komputer sesuai dengan struktur organisasi:

28 1. Pemilik a. Bertanggung jawab atas aktivitas yang dilaksanakan secara keseluruhan. b. Memfasilitasi kebutuhan dalam penjualan dan perbaikan komputer. c. Merencanakan dan mengembangkan Jaya Komputer. 2. Admin a. Mengelola data pemesanan dan mengkonfirmasi. b. Memberikan informasi barang service computer. c. Mengelola kinerja teknisi. 3. Teknisi 1 & 2 a. Melakukan perbaikan computer dengan sesuai prosedur 3.2 Analisa Proses Bisnis Berjalan User datang ke toko jaya komputer, user menceritakan keluhan dan kerusakan yang terjadi pada komputernya. Lalu teknisi melihat dan mengecheck komputer tersebut dimana letak permasalahannya. Setelah mengetahui letak kerusakannya, teknisi melihat stock barang yang tersedia, jika stock tersedia maka akan dilakukan perbaikan dengan mengkonfirmasi kepada user terlebih dahulu, jika stock barang kosong maka teknisi hanya akan memberi tahu sparepart yang harus di ganti atau di perbaiki. Jika user mengkonfirmasi untuk memperbaiki komputer maka teknisi akan segera memperbaikinya. Dan komputer pun selesai siap untuk dipakai kembali.

29 3.2.1 Use Case Proses Bisnis Menceritakan permasalahan komputer Memeriksa letak kerusakan Costumer Memeriksa Stok Barang ADMIN Memperbaiki kerusakan Gambar 3.2 Use Case Diagram proses bisnis yang sedang berjalan Tabel 3.1 Use Case Menceritakan Permasalahan Komputer Nama Use Case Aktor Description Menceritakan Permasalahan komputer User dan Admin user menceritakan keluhan dan kerusakan yang terjadi pada komputernya Tabel 3.2 Use Case Memeriksa Letak Kerusakan Nama Use Case Aktor Description Memeriksa Letak Kerusakan User dan Admin Admin mengecheck komputer dan mencari letak kerusakannya

30 Tabel 3.3 Use Case Memeriksa Stok Barang Nama Use Case Aktor Description Memeriksa Stok Barang Admin Admin melakukan pengecheckan stok barang bila ingin dilakukan sebuah perbaikan Tabel 3.4 Use Case Memperbaiki Kerusakan Nama Use Case Memperbaiki kerusakan Aktor Admin Description Admin mengganti sparepart yang rusak dan memasangnya 3.3 Analisa Permasalahan Analisis permasalahan dapat digambarkan dengan sebuah kerangka kerja Performance, Information, Economics, Control, Efficiency, Service (PIECES) dijelaskan seperti di bawah ini : PIECES Sistem Lama Sistem Baru Performance Lamban dalam Lebih cepat dalam mengelola data user dan melakukan transaksi mengelola data user dan melakukan transaksi. Information Terkait data user dan transaksi tidak akurat sehingga menghambat proses informasi. Economics Biaya pengeluaran relatif lebih mahal Terkait data user dan transaksi lebih akurat sehingga membantu mempercepat proses informasi. Biaya pengeluaran relatif lebih murah

31 karena adanya pembelian kertas. Control Media penyimpanan data user dan transaksi mudah di akses, sehingga rentan di curi. Efficiency Banyak menghabiskan waktu dalam menggumpulkan data user dan data transaksi. Service Pelayanan kurang memuaskan karena data yang konsisten mengakibatkan lamanya proses pengolahan data untuk dibuat laporan. karena tidak adanya pembelian kertas. Data user dan transaksi disimpan di dalam database dan hanya dapat di akses oleh pihak tertentu. Lebih hemat waktu karena data user dan data transaksi sudah tersedia secara structural. Pelayanan akan meningkat karena data lebih konsisten sehingga mempercepat pengolahan data. 3.4 Perancangan System Perancangan prosedur yang diusulkan akan berorientasi objek dengan menggunakan diagram UML sebagai alat bantu dalam mendokumentasikan dan memvisualisasikan website yang akan dibangun. 3.4.1 Use Case Diagram Diagram use case ini menggambarkan website yang akan dibangun, bagaimana seseorang atau aktor akan menggunakan dan memanfaatkan dari website yang dibangun. Sasaran pemodelan use case ini mendefinisikan kebutuhan fungsional dan operasional sistem dengan

32 mendefinisikan skenario dari website yang akan dibangun. Pendefinisian ini meliputi identifikasi use case dan skenario dari website yang akan dibangun. Registrasi Melakukan konsultasi kerusakan USER Merespon Data Konsultasi ADMIN Hasil Laporan Konsultasi Gambar 3.3 Use case Diagram Usulan Proses System Konsultasi

33 Registrasi Memilih barang USER Memeriksa stok barang ADMIN Memesan Barang Gambar 3.4 Use Case Diagram Usulan Proses Pemesanan Barang

34 3.4.2 Deskripsi Use Case Deskripsi use case digunakan untuk memudahkan dalam menganalisa skenario yang akan kita gunakan pada fase-fase selanjutnya dengan melakukan penilaian terhadap skenario tersebut. Berikut deskripsi use case yang diusulkan : Tabel 3.5 Deskripsi Use Case Registrasi Nama Use Case Registrasi Aktor User Deskripsi Melakukan registrasi untuk bisa login pada website Jaya Komputer Pre - Condition User mengisi Username, Email, Password, Alamat dan No Telepon Scenario User mengisi dan mengirim data yang telah diisi agar terdaftar ke dalam sistem Alternatif Flow - Post - Condition Data yang dikirim masuk kedalam sistem Tabel 3.6 Deskripsi Use Case Login Nama Use Case Aktor Deskripsi Pre - Condition Scenario Alternatif Flow Post - Condition Login User dan Admin Melakukan login agar dapat menggunakan website Jaya Komputer User dan admin menginput username dan password Jika username dan password yang dimasukan benar maka sistem akan menampilkan halaman home Jaya Komputer Jika username dan password yang dimasukan salah maka sistem tidak bisa melanjutkan ke halaman selanjutnya Sistem menampilkan menu utama atau pilihan

35 Tabel 3.7 Deskripsi Use Case Melakukan Konsultasi Pemeriksaan Nama Use Case Melakukan Konsultasi Pemeriksaan Aktor User Deskripsi Melakukan pengisian permasalahan yang terjadi Pre - Condition User menceritakan kerusakan Scenario Jika sistem mengidentifikasi analisa kerusakan, dan menginformasikan Alternatif Flow - Post - Condition Sistem menampilkan data permasalahan yang terjadi Tabel 3.8 Deskripsi Use Case Merespon Data Permasalahan Nama Use Case Aktor Deskripsi Pre - Condition Scenario Alternatif Flow Post - Condition Merespon Data Permasalahan Admin Melakukan analisa pemeriksaan pada terhadap komputer Admin merespon permasalahan Jika telah menganalisa kerusakan, admin langsung memberitahu user Sistem menampilkan kerusakan yang terjadi Tabel 3.9 Deskripsi Use Case Hasil Laporan Analisa Nama Use Case Aktor Deskripsi Hasil Laporan Analisa User dan Admin Memberitahu Hasil laporan kerusakan computer dan sparepart yang harus diganti oleh user

36 Pre - Condition User dan Admin melihat hasil laporan kerusakan Scenario Jika hasil laporan sudah terbukti user konfirmasi ke admin Alternatif Flow - Post - Condition Sistem menampilkan hasil laporan yang terjadi Tabel 3.10 Deskripsi Use Case Memilih Barang Nama Use Case Memilih Barang Aktor User Deskripsi Memilih barang yang akan diinginkan di website jaya komputer Pre - Condition User menginput barang Scenario Jika user telah memilih barang maka akan menampilkan jumlah list barang Alternatif Flow - Post - Condition Sistem menampilkan list barang yang telah di pilih Tabel 3.11 Deskripsi Use Case Memeriksa Stok Barang Nama Use Case Aktor Deskripsi Pre - Condition Scenario Alternatif Flow Post - Condition Mengecheck Stok Barang Admin Melihat jumlah barang yang tersedia Admin menginput barang yang akan di tampilkan di website Jika admin melihat stok barang tersedia maka akan ditampilkan di website Jika admin melihat stok barang tidak tersedia maka akan menampilkan stok empty di website Sistem menampilkan menu list barang

37 Tabel 3.12 Deskripsi Use Case Pesan Barang Nama Use Case Pesan Barang Aktor User dan Admin Deskripsi Melakukan pesan barang yang telah dipilih di website Pre - Condition User dan admin menginput pesan barang Scenario Jika barang yang telah dipilih akan tampil list barang Alternatif Flow - Post - Condition Sistem menampilkan barang yang sudah di pesan 3.4.3 Activity Diagram Activity diagram menggambarkan urutan aktivitas untuk suatu proses tertentu. Berdasarkan use case yang ada, dibuat activity diagram untuk masing-masing use case. Berikut ini adalah diagram aktivitas website Jaya Komputer.

38 Activity Diagram Login User Sistem Login Halaman Login Masukan Username dan Password Memvalidasi Username dan Password No Ya Phase Gambar 3.5 Activity Diagram Login Pada gambar diatas aktivitas dimulai user untuk login lalu sistem menampilkan halaman login. Setelah itu user diminta untuk memasukan username dan password kemudian sistem akan memvalidasi username dan password jika benar maka akan menampilkan halaman utama dan jika salah maka akan kembali menu login.

39 Activity Diagram Melakukan Konsultasi kerusakan User Sistem Masuk ke Menu Konsultasi Menampilkan Menu Konsultasi Mengisi di halaman kolom konsultasi Memvalidasi data konsultasi Phase Gambar 3.6 Activity Diagram Melakukan Konsultasi Kerusakan Pada gambar diatas aktivitas menjelaskan bahwa user masuk ke menu konsultasi lalu sistem menampilkan menu konsultasi. Setelah itu user mengisi kolom yg sudah disedikan untuk menuliskan masalah kerusakan komputer, kemudian system menvalidasi untuk diterima oleh admin

40 Activity Diagram Merespon Data Konsultasi Admin System Membuka Menu Konsultasi Menampilkan Menu Konsultasi Merespon data konsultasi dari user Menvalidasi Respon Konsultasi Phase Gambar 3.7 Activity Diagram Merespon Data Konsultasi Pada gambar diatas menjelaskan aktivitas admin membuka menu konsultasi lalu system menampilkan menu konsultasi, setelah itu admin melihat data data kerusakan keluhan yang terjadi pada komputer yang telah di diisi oleh user, kemudian admin membalas keluhan komputer tersebut dan system memvalidasi respon konsultasi ke user.

41 Activity Diagram Hasil Laporan Admin User Mengirim Hasil Konsultasi Menerima Hasil Konsultasi No Yes Menghubungin Jaya Komputer Phase Gambar 3.8 Activity Diagram Hasil Laporan Pada gambar diatas menjelaskan aktivitas admin mengirim hasil laporan untuk memperbaiki komputer tersebut, lalu user menerima hasil penyelesaian masalah tersebut apabila user menerima untuk memperbaiki maka user menghubungi jaya komputer apabila tidak maka user hanya mengetahui permasalahan apa saja dan selesai.

42 Activity Diagram Menu Barang User Sistem Masuk ke Menu Barang Menampilkan Menu Barang Memilih Barang Mengkonfirmasi Phase Gambar 3.9 Activity Diagram Menu Barang Pada gambar diatas menjelaskan aktivitas user masuk ke menu barang, sistem menampilkan menu barang. Kemudian user memilih barang lalu sistem mengkonfirmasi.

43 Activity Diagram Stock Barang Admin Sistem Masuk ke Menu Periksa Stock Barang Menampilkan Menu Periksa Stock Barang Mencari Stock Barang Menampilkan Stock Barang Phase Gambar 3.10 Activity Diagram Stock Barang Pada gambar aktivitas di atas menjelaskan bahwa admin masuk ke menu periksa stok barang, sistem menampilkan menu stok barang. Lalu admin mencari stok barang kemudian sistem menampilkan stok barang.

44 Activity Diagram Pemesanan Barang User Sistem Masuk ke Menu Pemesanan Barang Menampilkan Menu Pemesanan Barang Memesan Barang Memvalidasi No Ya Phase Gambar 3.11 Activity Diagram Pemesanan Barang Pada gambar diatas menjelaskan user masuk ke menu pemesanan barang, sistem menampilkan menu pemesanan barang. Lalu user memesan barang, sistem memvalidasi jika tidak ada stok maka kembali ke menu memesan barang dan jika iya selesai.

45 3.4.4 Sequence Diagram Sequence diagram digunakan untuk mengambarkan perilaku pada sebuah skenario. Diagram ini menunjukan sejumlah contoh objek dan message (pesan) yang diletakan diantara obyek-obyek ini di dalam use case. Sequence diagram menggambarkan interaksi antar objek di dalam dan disekitar sistem (termasuk pengguna, display, dan sebagainya) berupa pesan yang digambarkan terhadap waktu. User Form Daftar Data User User 1.Input data costumer() 2.Daftar() 3.Daftar gagal() 4. Simpan data 5. Simpan data () Gambar 3.12 Sequence Diagram Daftar Pada gambar di atas proses yang sedang terjadi saat user melakukan daftar pada website jaya computer. Prosesnya dimulai saat user memilih menu daftar dan kemudian user mengisi data pada form daftar, apabila gagal sistem akan kembali ke form daftar, dan jika berhasil sistem akan menampilkan halaman login.

46 User Form Login Data User Halaman Utama 1.Login() 2.Username, password() 3.Username, password gagal() 4. Username, password benar () Gambar 3.13 Sequence Diagram User Login Pada gambar di atas proses yang sedang terjadi saat user melakukan login pada website jaya komputer. Prosesnya dimulai saat user membuka website dan menampilkan halaman login, kemudian user mengisi username dan password pada form login, sistem akan memvalidasi username dan password, apabila benar sistem akan menampilkan halaman utama, dan jika salah sistem akan menampilkan pesan login gagal. Setelah user berhasil melakukan login sistem akan menapilkan halaman utama.

47 User Menu Pemesanan Barang Barang 1.Memilih menu barang() 2.Melihat barang 3.Memesan Barang() Gambar 3.14 Sequence Diagram Menu Pemesanan Pada gambar di atas proses yang sedang terjadi saat user memilih menu barang kemudian melihat dan memilih barang yang akan dipesan setelah itu user mengkonfirmasi pemesanan dan akan menampilkan jumlah barang.

48 User Menu Konsultasi Konsultasi 1. Mengisi kolom konsultasi kerusakan yang terjadi() 2.Menampilkan data konsultasi Gambar 3.15 Sequence Diagram Menu Konsultasi Pada gambar di atas proses yang sedang terjadi saat user melihat penyebab kerusakan kemudian menu konsultasi menampilkan berupa kolom untuk menuliskan kerusakan apa saja yang terjadi pada komputer.

49 Admin Form Login Data Admin Halaman Utama 1.Login() 2.Username, password() 3.Username, password gagal() 4. Username, password benar () Gambar 3.16 Sequence Diagram Admin Login Pada gambar di atas proses yang sedang terjadi saat admin melakukan login pada website jaya komputer. Prosesnya dimulai saat admin membuka website dan menampilkan halaman login, kemudian admin mengisi username dan password pada form login, sistem akan memvalidasi username dan password, apabila benar sistem akan menampilkan halaman utama, dan jika salah sistem akan menampilkan pesan login gagal. Setelah admin berhasil melakukan login sistem akan menapilkan halaman utama.

50 Admin Menu Stok Barang Barang 1.Memeriksa stok barang() 2.Menampilkan stok barang Gambar 3.17 Sequence Diagram Admin Stock Barang Pada gambar di atas proses yang sedang terjadi saat admin memeriksa stok barang kemudian menu stok barang akan menampilkan sebuah list barang dan apabila terdapat barang baru atau stok barang habis maka admin akan merubahnya.

51 Admin Menu Konsultasi User 1.Menerima data kerusakan() 2.Merespon laporan konsultasi() Gambar 3.18 Sequence Diagram Admin Konsultasi Pada gambar di atas proses yang sedang terjadi saat admin menerima data keluhan komputer user di menu konsultasi, kemudian admin membelas apa saja yang terjadi pada kerusakan komputer dan harus segera memperbaikinya, lalu user mendapat hasil laporan permasalahannya.

52 3.4.5 Class Diagram Detail Transaksi Transaksi -kdtransaksi -kduser -kdkota -tanggaltransaksi -statustransaksi -Edit() -Tambah() -Hapus() * Kota -kdkota -namakota -ongkir -estimasi -Tambah() -Edit() * * -kddetailtransaksi -kdtransaksi -kdproduk -jumlah -Tambah() 1 * 1 Komentar Konsultasi -kdkomentar -kdkonsultasi -komentar -status -tanggalkomentar -tambah() -Edit() Konsultasi - kdkonsultasi - kduser - jenisproduk -merk -serie_produk -keterangan -gambar -tanggalkonsultasi + Edit() + Hapus() * 1 - ID_User - Nama - Alamat - No_telp - Email - Password + Tambah() + Ubah() 1 1 User Admin 1 - ID_Admin - Nama_Admin - Password + Tambah() + Ubah() + Hapus() 1 1 Pesan - ID_Pemesan - ID_Custumer + Tambah() + Ubah() + Hapus() * Kategori * Keranjang -kdkeranjang -kdproduk -kduser -jumlah -Tambah() -Hapus() * Konfirmasi -Kdkonfirmasi -kd transaksi -norekening -banktujuan -gambar -kduser -Tambah() -Hapus() 1 -kdkategori -namakategori -Tambah() -Hapus(0 Barang -Kdproduk -nama1 -berat -harga -stok -deskripsi -kdkategori -gambar -Tambah() -Hapus() * Gambar 3.19 Class Diagram Website Jaya Komputer 3.4.6 Rancangan Database Tabel 3.13 Tabel User No Nama Field Tipe Data Panjang Keterangan

53 1 Id_User Int 5 Primary Key 2 Nama Varchar 30 Nama User 3 Alamat Varchar 50 Alamat User 4 No Tlp Int 15 Nomer Telpon User 5 Email Varchar 20 Email User 6 Password Varchar 8 Password User Tabel 3.14 Tabel Konsultasi No Nama Field Tipe Data Panjang Keterangan 1 Id_User Int 5 Primary Key 2 Id_Admin Int 5 Id Admin Tabel 3.15 Tabel Admin No Nama Field Tipe Data Panjang Keterangan 1 Id_Admin Int 5 Primary Key 2 Nama Admin Varchar 30 Nama Admin 3 Password Varchar 8 Password Admin Tabel 3.16 Tabel Pemesanan No Nama Field Tipe Data Panjang Keterangan 1 Id_Pemesanan Int 5 Primary Key 2 Id_User Int 5 Id User 3.5 Struktur Menu

54 Daftar Login Costumer Admin Pesan Konsultasi Lokasi Konfirmasi Pesan Laporan Konsultasi Gambar 3.20 Struktur Menu 3.6 Rancangan Antar Muka 3.6.1 Rancangan Halaman Utama Gambar 3.21 Rancangan Halaman Index

55 Pada gambar 3.21 dijelaskan dari fungsi textfield, label dan button yang memiliki fungsi masing-masing. Berikut penjelasannya: a. Button Home : untuk menampilkan isi dari home b. Button Produk : untuk menampilkan isi dari pesan barang c. Button Konsultasi : untuk menampilkan menu Konsultasi d. Button Lokasi : untuk menampilkan lokasi dari jaya komputer e. Button Login : untuk melakukan login ke dalam web f. Button Daftar : untuk melakukan registrasi apabila user belum mempunyai akun g. Label Product Categories : untuk menampilkan daftar produk yang dijual h. Image Placeholder : untuk menampilkan gambar dari produk 3.6.2 Rancangan Halaman Daftar

56 Gambar 3.22 Rancangan Halaman Daftar Pada gambar 3.22 dijelaskan dari fungsi textfield dan button yang memiliki fungsi masing-masing. Berikut penjelasannya: a. Textfield Nama : untuk memasukan nama user b. Textfield Address : untuk memasukan alamat user c. Textfield No.tlp : untuk memasukan nomor telepon user d. Textfield Email : untuk memasukan email user e. Textfield Password : untuk memasukan password user f. Button Daftar : untuk melakukan daftar jika data sudah di isi semua dengan benar

57 g. Button Kembali : untuk melakukan kembali ke menu home 3.6.3 Rancangan Halaman Login Gambar 3.23 Rancangan Halaman Login Pada gambar 3.23 dijelaskan dari fungsi textfield dan button yang memiliki fungsi masing-masing. Berikut penjelasannya: a. Textfield email : untuk memasukan email user b. Textfield Password : untuk memasukan password user c. Button Login : untuk melakukan login jika sudah mendaftar 3.6.4 Rancangan Halaman Home User

58 Gambar 3.24 Rancangan Halaman Home User Pada gambar 3.24 dijelaskan dari fungsi textfield dan button yang memiliki fungsi masing-masing. Berikut penjelasannya: a. Button Home : untuk menampilkan isi dari home b. Button Produk : untuk menampilkan isi dari produk barang c. Button Lokasi : untuk menampilkan lokasi dari jaya komputer d. Button Konsultasi : untuk menampilkan konsultasi e. Button Keranjang : untuk menampilkan keranjang pesan f. Button Name Profile : untuk memilih profile atau logout g. Label Product Categories : untuk menampilkan daftar produk yang dijual

59 h. Image Placeholder : untuk menampilkan gambar dari produk serta terdapat detail dan harga produk 3.6.5 Rancangan Halaman Produk Gambar 3.25 Rancangan Halaman Produk Pada gambar 3.25 dijelaskan dari fungsi textfield dan button yang memiliki fungsi masing-masing. Berikut penjelasannya: a. Button Home : untuk menampilkan isi dari home b. Combo Box Produk : untuk memilih spare part c. Button Lokasi : untuk menampilkan lokasi dari jaya komputer d. Button Konsultasi : untuk menampilkan konsultasi e. Button Keranjang : untuk menampilkan keranjang pesan

60 f. Button Name Profile : untuk memilih profile atau logout g. Label Product Categories : untuk menampilkan daftar produk yang dijual h. Image Placeholder : untuk menampilkan gambar dari produk serta terdapat detail dan harga produk i. Button Pesan : untuk melakukan konfirmasi pemesanan barang 3.6.6 Rancangan Halaman Konsultasi Gambar 3.26 Rancangan Halaman Konsultasi Pada gambar 3.26 dijelaskan dari fungsi textfield dan button yang memiliki fungsi masing-masing. Berikut penjelasannya: a. Button Home : untuk menampilkan isi dari home b. Combo Box Produk : untuk memilih spare part

61 c. Button Konsultasi : untuk menampilkan menu konsultasi d. Button Keranjang : untuk menampilkan keranjang pesan e. Button Lokasi : untuk menampilkan lokasi dari jaya komputer f. Combo Box Name User : untuk memilih profile atau logout g. Textfield Jenis Produk : untuk memasukan jenis produk h. Textfield Merk : untuk memasukan merk i. Textfield Type : untuk memasukan type j. Textfield Keterangan : untuk memasukan keterangan masalah k. Textfield Gambar : untuk memasukan gambar l. Button Choose file : untuk memilih gambar m. Button Kirim : untuk mengirim data konsultasi 3.6.7 Rancangan Halaman Lokasi

62 Gambar 3.27 Rancangan Halaman Lokasi Pada gambar 3.27 dijelaskan dari fungsi textfield dan button yang memiliki fungsi masing-masing. Berikut penjelasannya: a. Button Lokasi : untuk menampilkan lokasi dari jaya komputer b. Maps : untuk menampilkan denah lokasi yang terhubung dengan google maps 3.6.8 Rancangan Halaman Keranjang

63 Gambar 3.28 Rancangan Halaman Keranjang Pada gambar 3.28 dijelaskan dari fungsi textfield dan button yang memiliki fungsi masing-masing. Berikut penjelasannya: a. Button Keranjang : untuk menampilkan isi dari Keranjang b. Textfield Keranjang pesan : untuk menampilkan daftar pesanan c. Button checkout : untuk menampilkan menu hasil pesan 3.6.9 Rancangan Halaman Profile

64 Gambar 3. 29 Rancangan Halaman Profile Pada gambar 3.29 dijelaskan dari fungsi textfield dan button yang memiliki fungsi masing-masing. Berikut penjelasannya: a. Combo Box Name User : untuk memilih profile atau logout b. Image Profile : untuk menampilkan gambar profile c. Textfield Deskripsi : untuk menampilkan isi profile 3.6.10 Rancangan Halaman Home Admin

65 Gambar 3.30 Rancangan Halaman Home Admin Pada gambar 3.30 dijelaskan dari fungsi textfield dan button yang memiliki fungsi masing-masing. Berikut penjelasannya: a. Button Home : untuk menampilkan isi dari home b. Combo Box Data Master : untuk memilih data pesanan, data konsultasi, dan data konfirmasi pembayaran c. Combo Box Data Asset : untuk memilih data user, dan data produk d. Combo Box Data Operasional : untuk memilih data kategori, dan data kota e. Combo Box Name Admin : untuk memilih Profile, dan Logout 3.6.11 Rancangan Halaman Admin Data Master

66 Gambar 3.31 Rancangan Halaman Admin Data Master Pada gambar 3.31 dijelaskan dari fungsi textfield dan button yang memiliki fungsi masing-masing. Berikut penjelasannya: a. Combo Box Data Master : untuk memilih data pesanan, data konsultasi, dan data konfirmasi pembayaran

67 3.6.12 Rancangan Halaman Admin Data Asset Gambar 3.32 Rancangan Halaman Admin Data Asset Pada gambar 3.32 dijelaskan dari fungsi textfield dan button yang memiliki fungsi masing-masing. Berikut penjelasannya: a. Combo Box Data Asset : untuk memilih data user, dan data produk 3.6.13 Rancangan Halaman Admin Data Operasional

68 Gambar 3.33 Rancangan Halaman Admin Data Operasional Pada gambar 3.33 dijelaskan dari fungsi textfield dan button yang memiliki fungsi masing-masing. Berikut penjelasannya: a. Combo Box Data Operasional : untuk memilih data kategori, dan data kota