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
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
Gambar 4. 4 Spesifikasi Implementasi Database
4.2.2
Tampilan Layar Tabel User
Gambar 4. 5 Spesifikasi Tabel User 86
http://digilib.mercubuana.ac.id/
4.2.3 Tampilan Layar Tabel Role
Gambar 4. 6 Spesifikasi Tabel Roler
4.2.4
Tampilan Layar Tabel Toko
Gambar 4. 7 Spesifikasi Tabel Toko
87
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
4.3.2
Tampilan Halaman Utama
Gambar 4. 16 Tampilan Halaman Utama
4.3.3
Tampilan Menu Tambah User
Gambar 4. 17 Tampilan Menu Tambah User
92
http://digilib.mercubuana.ac.id/
4.3.4
Tampilan Menu Lihat User
Gambar 4. 18 Tampilan Menu Lihat User
4.3.5
Tampilan Menu Edit User
Gambar 4. 19 Tampilan Menu Edit User
93
http://digilib.mercubuana.ac.id/
4.3.6
Tampilan Menu Tambah Toko
Gambar 4. 20 Tampilan Menu Tambah Toko
4.3.7
Tampilan Menu Lihat Toko
Gambar 4. 21 Tampilan Menu Lihat Toko
94
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
4.3.12 Tampilan Menu Buat Request Order
Gambar 4. 26 Tampilan Menu Buat Request Order
97
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
4.3.19 Tampilan Menu Edit Receive Note
Gambar 4. 33 Tampilan Menu Edit Receive Note
101
http://digilib.mercubuana.ac.id/
4.3.20 Tampilan Cetak Receive Note
Gambar 4. 34 Tampilan Cetak Receive Note
102
http://digilib.mercubuana.ac.id/
4.3.21 Tampilan Menu Buat Delivery Form
Gambar 4. 35 Tampilan Menu Buat Delivery Form 103
http://digilib.mercubuana.ac.id/
4.3.22 Tampilan Menu Lihat Delivery Form
Gambar 4. 36 Tampilan Menu Lihat Delivery Form
104
http://digilib.mercubuana.ac.id/
4.3.23 Tampilan Menu Edit Delivery Form
Gambar 4. 37 Tampilan Menu Edit Delivery Form
105
http://digilib.mercubuana.ac.id/
4.3.24 Tampilan Menu Detail Delivery Form
Gambar 4. 38 Tampilan Menu Detail Delivery Form
106
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
4.4.2
Tampilan Detail Data Delivery Form
Gambar 4. 44 Tampilan Detail Data Delivery Form
110
http://digilib.mercubuana.ac.id/
4.4.3
Tampilan Form Delivery Form
Gambar 4. 45 Tampilan Form Delivery Form
111
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
4.5.2.1 Pengujian aplikasi web Tabel 4. 2 Pengujian aplikasi web No
Antar muka Bagian yang diuji
Status
Skenario pengujian
Hasil Pengujian
antar muka aplikasi yang diuji
1
Halaman
Login
Login
Menampilkan Masukkan username
Jika verifikasi
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
Menampilkan 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
Menampilkan 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
5
Menu lihat
Menghapus
Menampilkan Pilih data user yang
Data user berhasil
data user
data user
tabel data
ingin dihapus lalu
dihapus
user
klik "Hapus"
Menu
Membuat
Menampilkan 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
http://digilib.mercubuana.ac.id/
telepon, daerah lalu klik "Submit" 6
Menu lihat
Mengubah
Menampilkan 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
8
Menu lihat
Menghapus
Menampilkan Pilih data toko yang
Data toko berhasil
data toko
data toko
tabel data
ingin dihapus lalu
dihapus
toko
klik "Hapus"
Menu
Membuat
Menampilkan 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
10
Menu lihat
Mengubah
Menampilkan 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"
Menu lihat
Mengubah
Menampilkan Pilih data
Data merchandise
data
data
tabel data
merchandise yang
berhasil dihapus
merchandise
merchandise
merchandise
ingin dihapus lalu klik "Hapus"
11
Menu buat
Membuat
Menampilkan 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
http://digilib.mercubuana.ac.id/
12
Menu lihat
Mengubah
Menampilkan 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
14
Menu lihat
Menghapus
Menampilkan Pilih request order
Request order
request order
data request
tabel request
yang ingin dihapus
berhasil dihapus
order
order
lalu klik "Hapus"
Menu lihat
Menyetujui
Menampilkan Klik "Approve"
Request order
request order
request order
tabel data
berhasil disetujui
(hanya
request order
dilakukan oleh manager) 15
Menu lihat
Mencetak
Menampilkan 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
Menampilkan 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
http://digilib.mercubuana.ac.id/
17
18
19
Menu lihat
Mengubah
Menampilkan 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"
Menu lihat
Menghapus
Menampilkan Pilih receive note
Receive note
request order
data receive
tabel receive
yang ingin dihapus
berhasil dihapus
note
note
lalu klik "Hapus"
Menu lihat
Mencetak
Menampilkan 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
Menampilkan 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
http://digilib.mercubuana.ac.id/
21
22
23
Menu lihat
Mengubah
Menampilkan 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"
Menu lihat
Menghapus
Menampilkan Pilih delivery form
Data delivery form
delivery
delivery
tabel daftar
yang akan dihapus
berhasil terhapus
form
form
delivery form
lalu klik "Hapus"
Menu lihat
Mencetak
Menampilkan 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
Menampilkan Klik "Download As tabel daftar PDF" stok merchandise
Laporan stok merchandise berhasil tercetak
4.5.2.2 Pengujian aplikasi mobile Tabel 4. 3 Pengujian aplikasi mobile
No 1
Antarmuka
Fungsi
Status
yang Diuji
yang Diuji
Aplikasi
Halaman login
Login
Skenario Pengujian
Hasil yang Dinginkan
Menampilka
Masukan username
Jika hasil verifikasi
n halaman
dan password lalu
username dan
login
klik "Login"
password sesuai, maka aplikasi akan menampilkan tabel data delivery form.
117
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
