BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM 4.1 Implementasi Tahap implementasi adalah tahap penerapan aplikasi yang dibuat sesuai dengan analisis dan perancangan yang telah dilakukan sebelumnya dan diharapkan aplikasi dapat menjadi solusi dalam proses pendistribusian merchandise ke pelanggan. Aplikasi dibuat berbasis web menggunakan bahasa pemrograman PHP dan database MySQL. Selain berbasis web aplikasi ini juga dibuat berbasis mobile yang menggunakan bahasa pemrograman JavaScript. 4.1.1 Network diagram Perancangan network diagram menggambarkan hubungan jaringan dalam mendukung sebuah sistem, berikut adalah penggambaran network diagram sistem : User Apache Web Server Komputer Laptop My SQL Database Smartphone Gambar 4. 1 Network Diagram Gambar diatas mengambarkan alur Network diagram dalam membangun sistem informasi pendistribusian merchandise semen3roda di PT.Kharisma Mulia Abadijaya. User dapat menggunakan komputer, laptop atau smartphone yang dihubungkan ke sistem melalui jaringan internet kemudian terhubung dengan apache web server sehingga user dapat mengakses sistem pendistribusian tersebut. 82
4.1.2 Spesifikasi Perangkat Keras Perangkat keras yang digunakan dalam pembuatan Sistem Informasi Pengawasan Distribusi Merchandise adalah sebagai berikut : 1. Komputer Server Spesifikasi perangkat keras pada komputer server yang diperlukan untuk implementasi rancangan aplikasi kepegawaian adalah sebagai berikut: Tipe Komputer : Laptop Processor : Intel(R) Core(TM) i3-2365m CPU @1.40GHz 1.40 GHz Memory (RAM) : 2.00 GB 2. Smartphone Tipe Smartphone : Samsung Grand Duos Processor : Android OS 4.1.2 Jelly Bean Memory (RAM) : 1.00 GB 3. Koneksi Internet Untuk implementasi aplikasi akan berjalan menggunakan koneksi internet kerena aplikasi ini berbasis website dan mobile 83
4.1.3 Perancangan Aplikasi (Application Design) Gambar 4. 2 Application Design Perancangan aplikasi diatas menjelaskan bahwa aplikasi yang diakai adalah browser yang dapat diakses melalui website maupun mobile. Server yang digunakan adalah Apache 2.4. Dalam pembuatan coding aplikasi web menggunakan PHP dengan framework CodeIgniter dan coding aplikasi mobile menggunakan JavaScript dengan framework Cordova. Database yang digunakan adalah MySQL. 4.1.4 Spesifikasi Perangkat Lunak Untuk mengimplementasikan rancangan Sistem Informasi Pengawasan Distribusi Merchandise yang telah dibuat, diperlukan perangkat lunak dengan spesifikasi dibawah ini. 84
Tabel 4. 1 Spesifikasi Perangkat Lunak Operating System Microsoft Windows Database MySQL 5.5.16 Server Apache 2.4 Framework Website CodeIgniter Framework Mobile Cordova 4.2 Implementasi Database 4.2.1 Tampilan Layar Pembuatan Database Dalam pembuatan aplikasi, tahap awal yang dilakukan adalah membuat basis data. Basis data yang digunakan pada Sistem Informasi Pengawasan Distribusi Semen3Roda yaitu MySQL. Implementasi basis data yang digunakan dalam pembuatan aplikasi ini memiliki spesifikasi sebagai berikut : Gambar 4. 3 Spesifikasi Implementasi Database 85
Gambar 4. 4 Spesifikasi Implementasi Database 4.2.2 Tampilan Layar Tabel User Gambar 4. 5 Spesifikasi Tabel User 86
4.2.3 Tampilan Layar Tabel Role 4.2.4 Tampilan Layar Tabel Toko Gambar 4. 6 Spesifikasi Tabel Roler Gambar 4. 7 Spesifikasi Tabel Toko 87
4.2.5 Tampilan Layar Tabel Merchandise Gambar 4. 8 Spesifikasi Tabel Merchandise 4.2.6 Tampilan Layar Tabel Request Order Gambar 4. 9 Spesifikasi Tabel Request Order 88
4.2.7 Tampilan Layar Tabel Request Order Detail Gambar 4. 10 Spesifikasi Tabel Request Order Detail 4.2.8 Tampilan Layar Tabel Receive Note Gambar 4. 11 Spesifikasi Tabel Request Note 89
4.2.9 Tampilan Layar Tabel Receive Note Detail Gambar 4. 12 Spesifikasi Tabel Request Note Detail 4.2.10 Tampilan Layar Tabel Delivery Form Gambar 4. 13 Spesifikasi Tabel Delivery Form 90
4.2.11 Tampilan Layar Tabel Delivery Form Detail Gambar 4. 14 Spesifikasi Tabel Delivery Form Detail 4.3 Tampilan Layar Sistem Web 4.3.1 Tampilan Menu Login Gambar 4. 15 Tampilan Menu Login 91
4.3.2 Tampilan Halaman Utama 4.3.3 Tampilan Menu Tambah User Gambar 4. 16 Tampilan Halaman Utama Gambar 4. 17 Tampilan Menu Tambah User 92
4.3.4 Tampilan Menu Lihat User 4.3.5 Tampilan Menu Edit User Gambar 4. 18 Tampilan Menu Lihat User Gambar 4. 19 Tampilan Menu Edit User 93
4.3.6 Tampilan Menu Tambah Toko 4.3.7 Tampilan Menu Lihat Toko Gambar 4. 20 Tampilan Menu Tambah Toko Gambar 4. 21 Tampilan Menu Lihat Toko 94
4.3.8 Tampilan Menu Edit Toko Gambar 4. 22 Tampilan Menu Edit Toko 4.3.9 Tampilan Menu Tambah Merchandise Gambar 4. 23 Menu Tambah Merchandise 95
4.3.10 Tampilan Menu Lihat Merchandise Gambar 4. 24 Tampilan Menu Lihat Merchandise 4.3.11 Tampilan Menu Edit Merchandise Gambar 4. 25 Tampilan Menu Edit Merchandise 96
4.3.12 Tampilan Menu Buat Request Order Gambar 4. 26 Tampilan Menu Buat Request Order 97
4.3.13 Tampilan Menu Lihat Request Order Gambar 4. 27 Tampilan Menu Lihat Request Order 4.3.14 Tampilan Menu Detail Request Order Gambar 4. 28 Tampilan Menu Detail Request Order 98
4.3.15 Tampilan Cetak Request Order Gambar 4. 29 Tampilan Cetak Request Order 4.3.16 Tampilan Menu Buat Receive Note Gambar 4. 30 Tampilan Menu Buat Receive Note 99
4.3.17 Tampilan Menu Lihat Receive Note Gambar 4. 31 Tampilan Menu Lihat Receive Note 4.3.18 Tampilan Menu Detail Receive Note Gambar 4. 32 Tampilan Menu Detail Receive Note 100
4.3.19 Tampilan Menu Edit Receive Note Gambar 4. 33 Tampilan Menu Edit Receive Note 101
4.3.20 Tampilan Cetak Receive Note Gambar 4. 34 Tampilan Cetak Receive Note 102
4.3.21 Tampilan Menu Buat Delivery Form Gambar 4. 35 Tampilan Menu Buat Delivery Form 103
4.3.22 Tampilan Menu Lihat Delivery Form Gambar 4. 36 Tampilan Menu Lihat Delivery Form 104
4.3.23 Tampilan Menu Edit Delivery Form Gambar 4. 37 Tampilan Menu Edit Delivery Form 105
4.3.24 Tampilan Menu Detail Delivery Form Gambar 4. 38 Tampilan Menu Detail Delivery Form 106
4.3.25 Tampilan Menu Detail Delivery Form setelah diterima oleh toko Gambar 4. 39 Tampilan Menu Detail Delivery Form setelah diterima oleh toko 107
4.3.26 Tampilan Cetak Delivery Form Gambar 4. 40 Tampilan Cetak Delivery Form 4.3.27 Tampilan Menu Lihat Stok Merchandise Gambar 4. 41 Tampilan Menu Lihat Stok Merchandise 108
4.3.28 Tampilan Cetak Laporan Stok Merchandise Gambar 4. 42 Tampilan Cetak Laporan Stok Merchandise 4.4 Tampilan Layar Sistem Mobile 4.4.1 Tampilan Login Gambar 4. 43 Tampilan Login 109
4.4.2 Tampilan Detail Data Delivery Form Gambar 4. 44 Tampilan Detail Data Delivery Form 110
4.4.3 Tampilan Form Delivery Form Gambar 4. 45 Tampilan Form Delivery Form 111
4.5 Pengujian Sistem 4.5.1 Metode Pengujian Metode pengujian ini dilakukan dengan menggunakan metode black box testing yaitu suatu pengujian yang berfokus pada persyaratan fungsional perangkat lunak tanpa memperdulikan source code program. Pengujian ini untuk menentukan sejauh mana sistem dapat membantu pegawai. Pengujian dengan metode black box dilakukan dengan cara memberikan sejumlah masukkan pada program aplikasi yang kemudian diproses sesuai dengan kebutuhan fungsionalnya untuk melihat apakah sistem pengawasan distribusi ini menghasilkan keluaran yang diinginkan sesuai dengan fungsi dari program aplikasi tesebut. Bila dari input yang diberikan menghasilkan output yang sesuai dengan kebutuhan fungsionalnya, maka program aplikasi yang penulis rancang berhasil. Tetapi bila output yang dihasilkan tidak sesuai dengan kebutuhan fungsionalnya, maka masih terdapat kesalahan pada program aplikasi tersebut. Pengujian dilakukan dengan mencoba semua kemungkinan yang terjadi dan dilakukan secara berulang-ulang. Jika dalam pengujian terdapat kesalahan, maka akan dilakukan pencarian dan perbaikan untuk memperbaiki kesalahan yang terjadi. Jika telah selesai melakukan perbaikan maka akan dilakukan pengujian kembali. Pengujian dan perbaikan dilakukan terus-menerus hingga diperolah hasil yang terbaik. 4.5.2 Skenario Pengujian Skenario pengujian dilakukan untuk mengetahui aplikasi telah berjalan sesuai fungsinya, dan memastikan bahwa aplikasi sudah sesuai dengan spesifikasi dan berfungsi dengan baik. Skenario pengujian dilakukan dengan cara memilih dari setiap pilihan yang ada pada aplikasi. Kemudian dilakukan pengujian dengan menekan tombol yang ada pada halaman form dari aplikasi, apakah tombol sudah sesuai dengan kegunaan dan yang diharapkan. Berikut beberapa skenario pengujian yang akan dilakukan : 112
4.5.2.1 Pengujian aplikasi web Tabel 4. 2 Pengujian aplikasi web No Antar muka Bagian Status Skenario pengujian Hasil Pengujian yang diuji antar muka aplikasi yang diuji 1 Halaman Login Masukkan username Jika verifikasi Login halaman dan password lalu berhasil maka login klik "Kirim" aplikasi akan menampilkan halaman utama. Jika verifikasi tidak berhasil maka user memasukkan kembali username dan password yang sesuai 2 Menu Membuat Mengisi data user Data user berhasil tambah data data user form input berupa : Nama disimpan sesuai user baru data user lengkap, username, yang diinput password, privilege, alamat, email, nomor telepon lalu klik "Submit" 3 Menu lihat Mengubah Klik "Edit" ubah Data user berhasil data user data user form edit data user yang tidak diubah sesuai yang data user sesuai lalu klik "Edit diinput Data" 4 Menu lihat Menghapus Pilih data user yang Data user berhasil data user data user tabel data ingin dihapus lalu dihapus user klik "Hapus" 5 Menu Membuat Mengisi data toko Data toko berhasil tambah data data toko form input berupa : Nama toko, disimpan sesuai toko baru data toko nama pemilik, yang diinput alamat, nomor 113
telepon, daerah lalu klik "Submit" 6 Menu lihat Mengubah Klik "Edit" ubah Data toko berhasil data toko data toko form edit data user yang tidak diubah sesuai yang data toko sesuai lalu klik diinput "Submit" 7 Menu lihat Menghapus Pilih data toko yang Data toko berhasil data toko data toko tabel data ingin dihapus lalu dihapus toko klik "Hapus" 8 Menu Membuat Mengisi data Data merchandise tambah data data form input merchandise berupa : berhasil disimpan merchandise merchadise data Nama merchandise, sesuai yang diinput baru merchandise jenis merchandise, warna lalu klik "Submit" 9 Menu lihat Mengubah Klik "Edit" ubah Data merchandise data data form edit data merchandise berhasil diubah merchandise merchandise data yang tidak sesuai sesuai yang diinput merchandise lalu klik "Submit" 10 Menu lihat Mengubah Pilih data Data merchandise data data tabel data merchandise yang berhasil dihapus merchandise merchandise merchandise ingin dihapus lalu klik "Hapus" 11 Menu buat Membuat Mengisi data request Data yang sudah request order request order form input order berupa : Nama diinput berhasil baru data request merchandise, Id disimpan dan order merchandise, jenis muncul pada tabel merchandise, jumlah list merchandise request lalu klik yang ada dibawah "Tambah" lalu klik form input data "Simpan Request request order Order" 114
12 Menu lihat Mengubah Klik "Edit" ubah Data request order request order data request form edit data request order berhasil diubah order request order yang tidak sesuai sesuai yang diinput lalu klik "Simpan Request Order" 13 Menu lihat Menghapus Pilih request order Request order request order data request tabel request yang ingin dihapus berhasil dihapus order order lalu klik "Hapus" 14 Menu lihat Menyetujui Klik "Approve" Request order request order request order tabel data berhasil disetujui (hanya request order dilakukan oleh manager) 15 Menu lihat Mencetak Pilih request order Request order request order request order tabel daftar yang akan ingin berhasil tercetak request order dicetak lalu klik "Detail" kemudian akan muncul detail data request order lalu pilih "Download As PDF" 16 Menu buat Membuat Masukkan id request Data receive note receive note receive note form input order yang akan berhasil disimpan receive note dijadikan receive note kemudian klik "Preview" dan sistem akan menampilkan data request order yang diinginkan lalu klik "Gunakan RO Ini" 115
17 Menu lihat Mengubah Mengubah data Data receive note receive note data receive form edit receive note yang yang telah diubah note yang receive note tidak sesuai lalu klik berhasil tersimpan telah "Simpan Receive tersimpan Note" 18 Menu lihat Menghapus Pilih receive note Receive note request order data receive tabel receive yang ingin dihapus berhasil dihapus note note lalu klik "Hapus" 19 Menu lihat Mencetak Pilih receive note Receive note receive note receive note tabel daftar yang akan ingin berhasil tercetak receive note dicetak lalu klik "Detail" kemudian akan muncul detail data receive note lalu pilih "Download As PDF" 20 Menu buat Membuat Mengisi data Data delivery form delivery delivery form input delivery form berupa baru tersimpan form form baru data delivery : Nama toko, nama form merchandise, jumlah request lalu akan muncul data toko dan merchandise secara lengkap serta terdapat data sisa stok merchandise kemudian klik "Tambah". Setelah data muncul pada tabel list merchandise yang terdapat dibagian bawah form klik "Simpan Delivery Form" 116
21 Menu lihat Mengubah Mengubah data Data delivery form delivery data delivery form edit delivery form yang yang telah diubah form form yang delivery form tidak sesuai lalu klik berhasil tersimpan telah "Simpan Delivery tersimpan Form" 22 Menu lihat Menghapus Pilih delivery form Data delivery form delivery delivery tabel daftar yang akan dihapus berhasil terhapus form form delivery form lalu klik "Hapus" 23 Menu lihat Mencetak Pilih delivery form Delivery form delivery delivery tabel daftar yang akan ingin berhasil tercetak form form delivery form dicetak lalu klik "Detail" kemudian akan muncul detail data delivery form lalu pilih "Download As PDF" 24 Menu lihat stok Mencetak laporan stok tabel daftar stok merchandise Klik "Download As PDF" Laporan stok merchandise berhasil tercetak 4.5.2.2 Pengujian aplikasi mobile Tabel 4. 3 Pengujian aplikasi mobile No Antarmuka Fungsi Status Skenario Pengujian Hasil yang yang Diuji yang Diuji Aplikasi Dinginkan 1 Halaman Login Menampilka Masukan username Jika hasil verifikasi login n halaman dan password lalu username dan login klik "Login" password sesuai, maka aplikasi akan menampilkan tabel data delivery form. 117
Jika hasil verifikasi tidak sesuai, pengguna harus memasukan kembali username dan password yang sesuai. 2 Delivery Melengkapi Menampilka Pilih delivery form Data delivery form form delivery n form input sesuai toko yang yang telah from data delivery dituju lalu klik dilengkapi foto dan dengan foto form "Submit". Aplikasi lokasi toko telah dan lokasi akan nampilkan tersimpan toko by detail data delivery GPS form lalu klik "Get Coordinate" untuk mendapatkan titik lokasi toko by GPS kemudian klik "Simpan". Klik "Start Camera" untuk membuka kamera smartphone, klik "Stop Camera" untuk keluar dari kamera smartphone, klik "Switch Camera" untuk mengubah arah bidik kamera, klik "Take Picture" untuk mengambil gambar yang diinginkan. Setalah itu klik "Simpan" 118