Upload
iyyad-yahya
View
47
Download
0
Embed Size (px)
DESCRIPTION
Perancangan dan Implementasi Sistem
Citation preview
BAB IV
PERANCANGAN DAN IMPLEMENTASI
A. Perancangan Sistem
Perancangan dapat didefinisikan sebagai penggambaran, perencanaan, dan
pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah ke dalam
suatu kesatuan yang utuh dan berfungsi. Alat bantu yang digunakan untuk
menggambarkan perancangn sistem yaitu UML (unified modeling language).
1. Perancangan UML
a. Diagram Use case
1) Indentifikasi aktor
Aktor yang berperan dalam perangkat ini antara lain:
Tabel 4.1. Identifikasi Aktor
No Aktor Deskripsi
1 Pengunjung/Guest Orang yang mengakses aplikasi tetapi
tidak mempunyai hak akses sebagai
pengguna aplikasi
2 Pengguna/User Orang yang mempunyai hak akses
dalam menggunakan transaksi aplikasi
peminjaman dan perbaikan
3 Pengelola/Admin Orang yang mengelola seluruh fasilitas
dan aktifitas yang ada dalam aplikasi
dan dapat memberikan hak akses
kepada calon pengguna
43
2) Identifikasi diagram Use Case
Tabel 4.2. Identifikasi Use Case
No Nama Use Case Deskripsi Aktor
1 Login Use Case menggambarkan
kegiatan aktor memasukkan
username dan password
untuk mengakses aplikasi
Pengguna,
Pengelola
2 Input Form
Peminjaman
ruang rapat
Use Case menggambarkan
kegiatan mengisi form
Peminjaman ruang rapat
Pengguna
3 Input Form
Peminjaman aula
Use Case menggambarkan
kegiatan mengisi form
Peminjaman aula
Pengguna
4 Input Form
peminjaman
kendaraan
Use Case menggambarkan
kegiatan mengisi form
Peminjaman kendaraan
Pengguna
5 Input Form
permintaan
perbaikan sarana
gedung
Use Case menggambarkan
kegiatan mengisi form
permintaan perbaikan sarana
gedung
Pengguna
6 Input Form
permintaan
perbaikan
kendaraan
Use Case menggambarkan
kegiatan mengisi form
permintaan perbaikan
kendaraan
Pengguna
7 Lihat Jadwal
Peminjaman
ruang rapat
Use Case memperlihatkan
jadwal peminjaman ruang
rapat
Pengguna
8 Lihat Jadwal
Peminjaman aula
Use Case memperlihatkan
jadwal peminjaman aula
Pengguna
44
9 Lihat Jadwal
peminjaman
kendaraan
Use Case memperlihatkan
jadwal peminjaman
kendaraan
Pengguna
10 Lihat Jadwal
permintaan
perbaikan sarana
dan prasarana
Use Case memperlihatkan
jadwal perbaikan sarana dan
prasarana
Pengguna
11 Lihat Jadwal
permintaan
perbaikan
kendaraan
Use Case memperlihatkan
jadwal permintaan
perbaikan kendaraan
Pengguna
12 Cari Data
Peminjaman /
Perbaikan
Use Case memperlihatkan
pencarian data peminjaman /
perbaikan
Pengguna
13 Tambah
pengguna
Use Case menggambarkan
kegiatan menambah data
pengguna
Pengelola
14 Lihat Data
Pengguna
Use Case memperlihatkan
data semua pengguna
Pengelola
15 Kelola hak akses
pengguna
Use Case menggambarkan
kegiatan mengelola hak
akses pengguna
Pengelola
16 Membuat status
dan komentar
permintaan
peminjaman /
perbaikan
Use Case menggambarkan
kegiatan mengisi status
peminjaman/perbaikan
Pengelola
45
3) Pembuatan diagram use case
Gambar 4.1. Diagram Use Case Peminjaman dan Perbaiakan Sarana dan
Prasarana
4) Skenario Use Case
a) Skenario Login
Tabel 4.3. Skenario login
Nomor Use Case : 1
Nama Use Case : Login
Aktor : Pengguna, Pengelola
Kondisi awal : Aktor harus mengisi parameter username
dan password terlebih dahulu
Keluaran : Aktor dapat masuk dan mengakses aplikasi
Deskripsi : Use Case menggambarkan kegiatan aktor
memasukkan username dan password
untuk mengakses aplikasi
Skenario Utama
No Aksi Aktor No Respon Sistem
1 Input username dan
password
2 Validasi username dan
password
3 Menampilkan halaman
sesuai otentifikasi
Kondisi akhir : Jika username dan password benar maka
tampil halaman beranda dan menu utama,
jika salah maka aktor harus memasukkan
username dan password kembali
46
b) Skenario Peminjaman Ruang Rapat
Tabel 4.4. Skenario peminjaman ruang rapat
Nomor Use Case : 2
Nama Use Case : Input Form Peminjaman Ruang Rapat
Aktor : Pengguna
Kondisi Awal : Aktor harus mengisi form peminjaman
ruang rapat
Keluaran Aktor dapat menginput data peminjaman
ruang rapat
Deskripsi : Use Case menggambarkan kegiatan aktor
mengisi form peminjaman ruang rapat
Skenario Utama
No Aksi Aktor No Respon Sistem
1 Input username dan
password
2 Validasi username dan
password
3 Menampilkan halaman
sesuai otentifikasi
4 Pilih menu Peminjaman
Ruang Rapat
5 Tampil halaman form
dan tabel data
peminjaman ruang rapat
6 Pilih tab menu Form
Peminjaman
7 Tampil form input data
peminjaman ruang rapat
8 Input data peminjaman
ruang rapat dan pilih tombol
Kirim
9 tampil daftar data yang
telah diinput dan
menampilkan pesan
sukses input data
peminjaman ruang rapat
Kondisi Akhir : Data akan disimpan di dalam basis data
dan ditampilkan pada tabel data
peminjaman aula, jika tidak maka akan
muncul pesan kesalahan
c) Skenario Peminjaman Aula
Tabel 4.5. Skenario peminjaman aula
Nomor Use Case : 3
Nama Use Case : Input Form Peminjaman Aula
Aktor : Pengguna
Kondisi Awal : Aktor harus mengisi form peminjaman
aula
Keluaran Aktor dapat menginput data peminjaman
aula
Deskripsi : Use Case menggambarkan kegiatan aktor
mengisi form peminjaman aula
Skenario Utama
No Aksi Aktor No Respon Sistem
1 Input username dan
password
2 Validasi username dan
password
47
3 Menampilkan halaman
sesuai otentifikasi
4 Pilih menu Peminjaman
Aula
5 Tampil halaman form
dan tabel data
peminjaman aula
6 Pilih tab menu Form
Peminjaman
7 Tampil form input data
peminjaman aula
8 Input data peminjaman aula
dan pilih tombol Kirim
9 tampil daftar data yang
telah diinput dan
menampilkan pesan
sukses input data
peminjaman aula
Kondisi Akhir : Data akan disimpan di dalam basis data
dan ditampilkan pada tabel data
peminjaman kendaraan, jika tidak maka
akan muncul pesan kesalahan
d) Skenario Peminjaman Kendaraan Tabel 4.6. Skenario peminjaman kendaraan
Nomor Use Case : 4
Nama Use Case : Input Form Peminjaman Kendaraan
Aktor : Pengguna
Kondisi Awal : Aktor harus mengisi form peminjaman
kendaraan
Keluaran Aktor dapat menginput data peminjaman
kendaraan
Deskripsi : Use Case menggambarkan kegiatan aktor
mengisi form peminjaman kendaraan
Skenario Utama
No Aksi Aktor No Respon Sistem
1 Input username dan
password
2 Validasi username dan
password
3 Menampilkan halaman
sesuai otentifikasi
4 Pilih menu Peminjaman
Kendaraan
5 Tampil halaman form
dan tabel data
peminjaman kendaraan
6 Pilih tab menu Form
Peminjaman
7 Tampil form input data
peminjaman kendaraan
8 Input data peminjaman
kendaraan dan pilih tombol
Kirim
9 tampil daftar data yang
telah diinput dan
menampilkan pesan
sukses input data
peminjaman kendaraan
Kondisi Akhir : Data akan disimpan di dalam basis data
dan ditampilkan pada tabel data
peminjaman ruang rapat, jika tidak maka
akan muncul pesan kesalahan
48
e) Skenario Permintaan Perbaikan Sarana dan Prasarana
Tabel 4.7. Skenario permintaan perbaikan sarana dan prasarana
Nomor Use Case : 5
Nama Use Case : Input Form Permintaan Perbaikan Sarana
dan Prasarana
Aktor : Pengguna
Kondisi Awal : Aktor harus mengisi form permintaan
perbaikan sarana dan prasarana
Keluaran Aktor dapat menginput data permintaan
perbaikan sarana dan prasarana
Deskripsi : Use Case menggambarkan kegiatan aktor
mengisi form permintaan perbaikan sarana
dan prasarana
Skenario Utama
No Aksi Aktor No Respon Sistem
1 Input username dan
password
2 Validasi username dan
password
3 Menampilkan halaman
sesuai otentifikasi
4 Pilih menu Permintaan
Perbaikan Sarana dan
Prasarana
5 Tampil halaman form
dan tabel data
permintaan perbaikan
sarana dan prasarana
6 Pilih tab menu Form
Perbaikan
7 Tampil form input data
permintaan perbaikan
sarana dan prasarana
8 Input data permintaan
perbaikan sarana dan
prasarana dan pilih tombol
Kirim
9 tampil daftar data yang
telah diinput dan
menampilkan pesan
sukses input data
permintaan perbaikan
sarana dan prasarana
Kondisi Akhir : Data akan disimpan di dalam basis data
dan ditampilkan pada tabel data
permintaan perbaikan sarana dan
prasarana, jika tidak maka akan muncul
pesan kesalahan
f) Skenario Permintaan Perbaikan Kendaraan
Tabel 4.8. Skenario permintaan perbaikan kendaraan
Nomor Use Case : 6
Nama Use Case : Input Form Permintaan Perbaikan
Kendaraan
Aktor : Pengguna
Kondisi Awal : Aktor harus mengisi form permintaan
perbaikan kendaraan
49
Keluaran Aktor dapat menginput data permintaan
perbaikan kendaraan
Deskripsi : Use Case menggambarkan kegiatan aktor
mengisi form permintaan perbaikan
kendaraan
Skenario Utama
No Aksi Aktor No Respon Sistem
1 Input username dan
password
2 Validasi username dan
password
3 Menampilkan halaman
sesuai otentifikasi
4 Pilih menu Permintaan
Perbaikan kendaraan
5 Tampil halaman form
dan tabel data
permintaan perbaikan
kendaraan
6 Pilih tab menu Form
Perbaikan
7 Tampil form input data
permintaan perbaikan
kendaraan
8 Input data permintaan
perbaikan kendaraan dan
pilih tombol Kirim
9 tampil daftar data yang
telah diinput dan
menampilkan pesan
sukses input data
kendaraan
Kondisi Akhir : Data akan disimpan di dalam basis data
dan ditampilkan pada tabel data
permintaan perbaikan kendaraan, jika tidak
maka akan muncul pesan kesalahan
g) Skenario Lihat Jadwal Peminjaman Ruang Rapat
Tabel 4.9. Skenario lihat jadwal peminjaman ruang rapat
Nomor Use Case : 7
Nama Use Case : Lihat Jadwal Peminjaman Ruang Rapat
Aktor : Pengguna
Kondisi Awal : Aktor harus mengirim form peminjaman
ruang rapat terlebih dahulu
Keluaran Aktor dapat melihat seluruh daftar
peminjaman ruang rapat
Deskripsi : Use Case memperlihatkan jadwal
peminjaman ruang rapat
Skenario Utama
No Aksi Aktor No Respon Sistem
1 Input username dan
password
2 Validasi username dan
password
3 Menampilkan halaman
sesuai otentifikasi
4 Pilih menu Peminjaman
5 Pilih menu Peminjaman
Ruang Rapat
6 Tampil halaman jadwal
peminjaman ruang rapat
50
Kondisi Akhir : Data jadwal peminjaman ruang rapat akan
ditampilkan dalam bentuk tabel pada
halaman aplikasi
h) Skenario Lihat Jadwal Peminjaman Aula
Tabel 4.10. Skenario lihat jadwal peminjaman aula
Nomor Use Case : 8
Nama Use Case : Lihat Jadwal Peminjaman Aula
Aktor : Pengguna
Kondisi Awal : Aktor harus mengirim form peminjaman
aula terlebih dahulu
Keluaran Aktor dapat melihat seluruh daftar
peminjaman aula
Deskripsi : Use Case memperlihatkan jadwal
peminjaman aula
Skenario Utama
No Aksi Aktor No Respon Sistem
1 Input username dan
password
2 Validasi username dan
password
3 Menampilkan halaman
sesuai otentifikasi
4 Pilih menu Peminjaman
5 Pilih menu Peminjaman
Aula
6 Tampil halaman jadwal
peminjaman aula
Kondisi Akhir : Data jadwal peminjaman aula akan
ditampilkan dalam bentuk tabel pada
halaman aplikasi
i) Skenario Lihat Jadwal Peminjaman Kendaraan
Tabel 4.11. Skenario lihat jadwal peminjaman kendaraan
Nomor Use Case : 9
Nama Use Case : Lihat Jadwal Peminjaman Kendaraan
Aktor : Pengguna
Kondisi Awal : Aktor harus mengirim form peminjaman
kendaraan terlebih dahulu
Keluaran Aktor dapat melihat seluruh daftar
peminjaman kendaraan
Deskripsi : Use Case memperlihatkan jadwal
peminjaman kendaraan
Skenario Utama
No Aksi Aktor No Respon Sistem
1 Input username dan
password
2 Validasi username dan
password
3 Menampilkan halaman
sesuai otentifikasi
4 Pilih menu Peminjaman
51
5 Pilih menu Peminjaman
Kendaraan
6 Tampil halaman jadwal
peminjaman kendaraan
Kondisi Akhir : Data jadwal peminjaman kendaraan akan
ditampilkan dalam bentuk tabel pada
halaman aplikasi
j) Skenario Lihat Jadwal Permintaan Perbaikan Sarana dan
Prasarana
Tabel 4.12. Skenario lihat jadwal peminjaman sarana dan prasarana
Nomor Use Case : 10
Nama Use Case : Lihat Jadwal Permintaan Perbaikan Sarana
dan Prasarana
Aktor : Pengguna
Kondisi Awal : Aktor harus mengirim form permintaan
perbaikan sarana dan prasarana terlebih
dahulu
Keluaran Aktor dapat melihat seluruh daftar
permintaan perbaikan sarana dan prasarana
Deskripsi : Use Case memperlihatkan jadwal
permintaan perbaikan sarana dan prasarana
Skenario Utama
No Aksi Aktor No Respon Sistem
1 Input username dan
password
2 Validasi username dan
password
3 Menampilkan halaman
sesuai otentifikasi
4 Pilih menu Perbaikan
5 Pilih menu Perbaikan
Sarana dan Prasarana
6 Tampil halaman jadwal
permintaan perbaikan
sarana dan prasarana
Kondisi Akhir : Data jadwal permintaan perbaikan sarana
dan prasarana akan ditampilkan dalam
bentuk tabel pada halaman aplikasi
k) Skenario Lihat Jadwal Permintaan Perbaikan Kendaraan
Tabel 4.13. Skenario lihat jadwal permintaan perbaikan kendaraan
Nomor Use Case : 11
Nama Use Case : Lihat Jadwal Peminjaman Kendaraan
Aktor : Pengguna
Kondisi Awal : Aktor harus mengirim form permintaan
perbaikan kendaraan terlebih dahulu
Keluaran Aktor dapat melihat seluruh daftar
permintaan perbaikan kendaraan
Deskripsi : Use Case memperlihatkan jadwal
permintaan perbaikan kendaraan
52
Skenario Utama
No Aksi Aktor No Respon Sistem
1 Input username dan
password
2 Validasi username dan
password
3 Menampilkan halaman
sesuai otentifikasi
4 Pilih Menu Perbaikan
5 Pilih menu Perbaikan
Kendaraan
6 Tampil halaman jadwal
permintaan perbaikan
kendaraan
Kondisi Akhir : Data jadwal permintaan perbaikan
kendaraan akan ditampilkan dalam bentuk
tabel pada halaman aplikasi
l) Skenario Pencarian Data Peminjaman / Perbaikan
Tabel 4.14. Skenario tambah data pengguna
Nomor Use Case : 12
Nama Use Case : Cari Data Peminjaman / Perbaikan
Aktor : Pengguna
Kondisi Awal : Aktor harus menyimpan data peminjaman /
perbaikan terlebih dahulu
Keluaran Aktor dapat melihat data peminjaman /
perbaikan
Deskripsi : Use Case menggambarkan mencari data
peminjaman / perbaikan
Skenario Utama
No Aksi Aktor No Respon Sistem
1 Input username dan
password
2 Validasi username dan
password
3 Menampilkan halaman
sesuai otentifikasi
4 Pilih Form Cari 5 Tampil halaman Form
Pencarian
5 Pilih Parameter Pencarian 6 Tampil halaman data
pencarian
Kondisi Akhir : Data pencarian akan ditampilkan pada
halaman utama tabel peminjaman /
perbaikan
m) Skenario Tambah Data Pengguna Tabel 4.15. Skenario tambah data pengguna
Nomor Use Case : 13
Nama Use Case : Tambah Data Pengguna
Aktor : Pengelola
Kondisi Awal : Aktor harus mengirim username, password
dan level pengguna
Keluaran Aktor dapat menginput data pengguna
53
Deskripsi : Use Case menggambarkan kegiatan
menambah data pengguna
Skenario Utama
No Aksi Aktor No Respon Sistem
1 Input username dan
password
2 Validasi username dan
password
3 Menampilkan halaman
sesuai otentifikasi
4 Pilih menu Kelola Data
Pengguna
5 Tampil menu dropdown
Kelola Data Pengguna
6 Pilih menu Tambah Data
Pengguna
7 Tampil halaman form
input data pengguna
8 Mengisi username,
password dan level
pengguna
9 Simpan data pengguna
dan tampil pesan sukses
input data pengguna
Kondisi Akhir : Data pengguna akan disimpan dalam basis
data dan ditampilkan dalam tabel
pengguna
n) Skenario Lihat Data Pengguna
Tabel 4.16. Skenario tambah data pengguna
Nomor Use Case : 14
Nama Use Case : Lihat Data Pengguna
Aktor : Pengelola
Kondisi Awal : Aktor harus menyimpan data pengguna
terlebih dahulu
Keluaran Aktor dapat melihat data pengguna
Deskripsi : Use Case menggambarkan kegiatan
melihat data pengguna
Skenario Utama
No Aksi Aktor No Respon Sistem
1 Input username dan
password
2 Validasi username dan
password
3 Menampilkan halaman
sesuai otentifikasi
4 Pilih menu Kelola Data
Pengguna
5 Pilih menu Lihat Data
Pengguna
6 Tampil halaman data
pengguna
Kondisi Akhir : Data pengguna akan disimpan dalam basis
data dan ditampilkan dalam tabel
pengguna
54
o) Skenario Kelola Hak Akses Pengguna
Tabel 4.17. Skenario kelola hak akses pengguna
Nomor Use Case : 15
Nama Use Case : Kelola Data Pengguna
Aktor : Pengelola
Kondisi Awal : Aktor harus menyimpan data
pengguna terlebih dahulu
Keluaran Aktor dapat mengelola hak akses
pengguna
Deskripsi : Use Case menggambarkan kegiatan
mengelola hak akses pengguna
Skenario Utama
No Aksi Aktor No Respon Sistem
1 Input username dan
password
2 Validasi username dan
password
3 Menampilkan halaman
sesuai otentifikasi
4 Pilih menu Kelola Data
Pengguna
5 Tampil menu dropdown
Kelola Data Pengguna
6 Pilih menu Kelola Hak
Akses
7 Tampil halaman form
kelola data pengguna
8 Mengisi assignment,
permission, roles, tasks dan
operations dari data
pengguna dan
9 Data hak akses akan
disimpan dalam basis
data
Kondisi Akhir : Setiap pengguna memiliki hak akses
yang berbeda dalam menggunakan
aplikasi (pengguna/pengelola)
b. Diagram activity
1) Diagram activity login
Gambar 4.2. Diagram activity login
55
2) Diagram activity peminjaman ruang rapat, aula dan kendaraan
Gambar 4.3. Diagram activity peminjaman ruang rapat, aula dan kendaraan
3) Diagram activity permintaan perbaikan kendaraan, sarana dan
prasarana
Gambar 4.4. Diagram activity permintaan perbaikan kendaraan, sarana dan
prasarana
56
4) Diagram activity pencarian data peminjaman / perbaikan sarana dan
prasarana
Gambar 4.5. Diagram activity pencarian data peminjaman / perbaikan
5) Diagram activity lihat data pengguna
Gambar 4.6. Diagram activity lihat data pengguna
6) Diagram activity tambah data pengguna
Gambar 4.7. Diagram activity tambah data pengguna
57
7) Diagram activity kelola hak akses pengguna
Gambar 4.8. Diagram activity kelola hak akses penguna
c. Diagram Class
Gambar 4.9. Class Diagram pada aplikasi SiSarpras
58
d. Diagram Sequence
1) Diagram sequence Login
Gambar 4.10. Diagram sequence login
2) Diagram sequence Peminjaman Sarana dan Prasarana
Gambar 4.11. Diagram sequence peminjaman sarana dan
prasarana
3) Diagram Sequence Perbaikan Sarana dan Prasarana Gedung
Gambar 4.12. Diagram sequence perbaikan sarana dan prasarana
59
4) Diagram sequence pencarian data peminjaman dan perbaikan
Gambar 4.13. Diagram sequence pencarian data peminjaman dan
perbaikan
5) Diagram sequence kelola data pengguna
Gambar 4.14. Diagram sequence kelola data pengguna
2. Perancangan Basis Data
Berikut akan dijelaskan mengenai implementasi tabel-tabel yang
digunakan pada pembangunan aplikasi SiSarpras.
60
1) Tabel peminjaman ruang rapat
Tabel 4.18. Tabel data peminjaman ruang rapat
No Nama Type Null Keterangan
1 id Int(5) No Primary key, Auto
Increment
2 Pemohon Varchar(50) No
3 Unit Varchar(50) No
4 Telp Varchar(30) No
5 Tgl_pinjam Varchar(30) No
6 Tgl_kembali Varchar(30) No
7 Nm_ruang Varchar(50) No
8 Kegiatan Text No
9 Jml_peserta Int(10) No
10 Tgl_input Varchar(30) No
11 Status Varchar(50) No
12 komentar Text No
2) Tabel peminjaman aula
Tabel 4.19. Tabel data peminjaman aula
No Nama Type Null Keterangan
1 id Int(5) No Primary key, Auto
Increment
2 Pemohon Varchar(50) No
3 Unit Varchar(50) No
4 Telp Varchar(30) No
5 Tgl_pinjam Varchar(30) No
6 Tgl_kembali Varchar(30) No
7 Nm_ruang Varchar(50) No
8 Kegiatan Text No
9 Jml_peserta Int(10) No
10 Tgl_input Varchar(30) No
11 Status Varchar(50) No
12 Komentar Text No
61
3) Tabel peminjaman kendaraan
Tabel 4.20. Tabel data peminjaman kendaraan
No Nama Type Null Keterangan
1 id Int(5) No Primary key, Auto
Increment
2 Pemohon Varchar(50) No
3 Unit Varchar(50) No
4 Telp Varchar(30) No
5 Tgl_pinjam Varchar(30) No
6 Tgl_kembali Varchar(30) No
7 Jns_kend Varchar(50) No
8 Kegiatan Text No
9 Tgl_input Varchar(30) No
10 Status Varchar(50) No
11 Komentar Text No
4) Tabel perbaikan sarana
Tabel 4.21. Tabel data perbaikan sarana
No Nama Type Null Keterangan
1 id Int(5) No Primary key, Auto
Increment
2 Pemohon Varchar(50) No
3 Unit Varchar(50) No
4 Telp Varchar(30) No
5 Tgl_rusak varchar(30) No
6 Nm_sarana Varchar(100) No
7 Tgl_input varchar(30) No
8 Deskripsi Text No
9 Status Varchar(50) No
10 Komentar Text No
5) Tabel perbaikan kendaraan
Tabel 4.22. Tabel data perbaikan kendaraan
No Nama Type Null Keterangan
1 id Int(5) No Primary key, Auto
Increment
2 Pemohon Varchar(50) No
3 Unit Varchar(50) No
4 Telp Varchar(30) No
5 Tgl_rusak varchar(30) No
6 Jns_kend Varchar(100) No
62
7 Tgl_input varchar(30) No
8 Deskripsi Text No
9 Status Varchar(50) No
10 Komentar Text No
3. Perancangan Antar Muka Pengguna (user interface)
a. Perancangan menu
Gambar 4.15. Perancangan menu aplikasi
b. Perancangan antar muka utama
1) Perancangan antarmuka Login
BatalLogin
Enter Text
Enter Text
Option 1
Username
Password
<Logo1>
<Breadcrumb>
<Logo2>
<Footer>
<Menu1> <Menu2>
Gambar 4.16. Perancangan antarmuka menu login
Ya Tidak
Ya
Login
Autentifikasi
Server
Pengguna
Pengelola
Peminjaman Sarana
Ruang rapat
Aula
Kendaraan
Perbaikan Sarana Sarana Kerja
Kendaraan
Kelola Data
Pengguna Lihat Data Pengguna
Daftar Pengguna
Tambah Pengguna
Kelola Hak Akses
Halaman Utama Pengunjung
63
2) Perancangan antarmuka Petunjuk Penggunaan
<Logo1>
<Breadcrumb>
<Footer>
<Menu1> <Menu2>
Isi Menu <text HTML>
<Judul>
Enter Text
Gambar 4.17. Perancangan antarmuka menu Petunjuk
Penggunaan
3) Perancangan antarmuka Alur Penggunaan
<Logo1>
<Breadcrumb>
<Footer>
<Menu1> <Menu2>
Isi Menu <gambar>
Enter Text
<Judul>
Gambar 4.18. Perancangan antarmuka menu alur
penggunaan
64
4) Perancangan antarmuka Beranda
<Logo1>
<Breadcrumb>
<Footer>
<Menu1> <Menu2><Menu3><Menu4>
<Informasi Aplikasi><Informasi Pengguna>
<Nama App> <Menu5>
Pilih Menu
Gambar 4.19. Perancangan antarmuka menu beranda
5) Perancangan Antarmuka Menu utama Jadwal Peminjaman dan
Perbaikan
<Logo1>
<Breadcrumb>
<Footer>
<Menu1> <Menu2>
<Tab Menu1>
field1 field2 field3 field4 Field(n)
<Tab Menu2><Tab Menu3>
Pilih Menu
<Menu3> <Menu4>
Gambar 4.20. Perancangan antar muka menu utama
jadwal peminjaman dan perbaikan
65
6) Perancangan antarmuka Daftar Peminjaman dan Perbaikan
<Logo1>
<Breadcrumb>
<Form>
<Footer>
<Tab Menu1><Tab Menu2><Tab Menu3>
Pilih Menu
<Menu1> <Menu2><Menu3><Menu4><Nama App> <Menu5>
Daftar Atribut id=1
Daftar Atribut id=n
Gambar 4.21. Perancangan antar muka Daftar
Peminjaman dan Perbaikan
7) Menu utama Form Peminjaman dan Perbaikan
BatalKirim
Enter Text
Enter Text
Label1
Label2
<Logo1>
<Breadcrumb>
<Form>
<Footer>
Label3 Enter Text
<Tab Menu1><Tab Menu2><Tab Menu3>
Pilih Menu
<Menu1> <Menu2><Menu3><Menu4><Nama App> <Menu5>
Gambar 4.22. Perancangan antar muka menu utama Form
Peminjaman dan Perbaikan
66
B. Implementasi
Implementasi sistem merupakan tahap meletakan sistem sehingga siap
untuk dioperasikan. Implementasi bertujuan untuk mengkonfirmasi modul-
modul perancangan, sehingga pengguna dapat member masukan kepada
pengembangan sistem.
1. Perangkat Keras Pembangun
Perangkat keras yang digunakan dalam pembuatan aplikasi ini adalah:
a. Prosessor: Intel Core ™ 2 Duo CPU T6400 2,00 GHz
b. RAM: 4 GB
c. VGA: Memory 64 MB
d. Harddisk: 500 GB
e. Monitor LCD 14”
2. Perangkat Lunak Pembangun
Perangkat lunak yang digunakan dalam pembuatan aplikasi ini adalah:
a. Sistem Operasi Windows 7 Ultimate
b. Bahasa pemrograman Yii Framework versi 1.1.10
c. Editor pemrograman Notepad++ versi 6.5
d. Perancang desain logo Corel Draw versi X6
e. Web Browser Mozilla Firefox versi 27.0
f. Aplikasi FTP File Zilla versi 3.5.3
g. Editor basis data SQLyog Ultimate versi 11.11
h. Perancang UML Visual Paradigm versi 11.0
i. Web Server Xampp versi 1.8.1
67
3. Implementasi pada Web Server
a. Implementasi pada web server lokal / localhost
Pada implementasi ini penulis menggunakan perangkat lunak web
server Xampp versi 1.8.1 yang diinstal pada komputer penulis.
Langkah-langkah yang dilakukan adalah:
1) Menginstal aplikasi Xampp versi 1.8.1 pada komputer penulis,
dalam hal ini program disimpan pada drive C:/xampp.
2) Setelah itu pada control panel Xampp aktifkan Apache dan
MySQL, seperti tampak pada gambar:
Gambar 4.23. Control panel xamp versi 1.8.1
3) Untuk melakukan pengetesan ketikkan alamat
http://localhost/xampp pada web browser. Jika konfgurasi benar
dilakukan maka akan tampil halaman utama xampp seperti tampak
pada gambar:
68
Gambar 4.24. Halaman utama xampp versi 1.7.3
4) Salin folder program yang akan dibuat pada
C:/xampp/htdocs/nama-aplikasi
5) Setelah itu untuk menguji program maka ketikkan
http://localhost/nama-aplikasi pada web browser. Jika konfigurasi
benar dilakukan maka akan tampak halaman seperti pada gambar:
Gambar 4.25. halaman utama aplikasi implementasi web server
local
69
b. Implementasi pada Web Hosting / internet
Adapun spesifikasi web hosting yang dipakai oleh penulis adalah:
Tabel 4.23 Implementasi web hosting
No Spesifikasi Keterangan
1 Nama Server Server32idhostinger.com
2 IP Server 31.170.165.184
3 Lokasi Server Washington, Amerika Utara
4 Aktif Server 10 September 2013
5 Domain sarpras.pusku.com
6 Status Paket Gratis
7 Versi Apache 2.2.14
8 PHP versi 5.3
9 MySQL versi 5.1.61
Langkah yang dilakukan penulis adalah:
1) Melakukan pendaftaran nama domain pada pada alamat
http://www.idhostinger.com dengan menggunakan alamat email
penulis.
2) Selanjutnya melakukan aktivasi web hosting dengan menggunakan
username dan password yang telah dikirimkan kepada email
penulis yang telah terdaftar.
3) Selanjutnya penulis menginstalasi perangkat lunak FTP FileZilla
Client versi 3.5.3. pada komputer penulis. Program akan disimpan
pada drive C:/Program Files/FileZilla FTP Client/filezilla.exe.
4) Dengan menggunakan perangkat lunak FTP FileZilla Client versi
3.5.3 penulis mengunggah aplikasi yang telah dibuat dengan
terlebih dahulu melakukan konfigurasi seperti tampak pada
gambar:
70
Gambar 4.26. Konfigurasi web hosting dengan menggunakan FTP
Filezilla versi 3.5.3.
5) Setelah konfigurasi dilakukan setelah itu klik “Connect” pada
kotak dialog site manager dan klik “OK”, maka penulis masuk ke
dalam folder aplikasi yang ada didalam server idhostinger.com.
Gambar 4.27. Kotak dialog untuk masuk ke dalam server aplikasi
6) Jika koneksi berhasil maka akan muncul pesan seperti berikut:
Gambar 4.28. Pesan sukses memasuki server aplikasi
71
7) Selanjutnya melakukan pengunggahan folder aplikasi yang telah
penulis implementasikan pada web server lokal seperti tampak
pada gambar:
Gambar 4.29. Proses pengunggahan folder aplikasi pada web
hosting idhostinger.com
8) Jika folder telah selesai diunggah maka akan tampak root folder
seperti tampak pada gambar:
Gambar 4.30. Root folder aplikasi sistem informasi sarana dan
prasarana pada server idhostinger
72
9) Untuk melakukan pengetesan maka ketikkan alamat
http://sarpras.pusku.com sesuai nama domain yang telah penulis
dapatkan dari web server idhostinger.com. Jika konfigurasi
dilakukan dengan benar maka akan tampak seperti pada gambar:
Gambar 4.31. Tampilan antarmuka aplikasi saat diakses melalui
jaringan internet
4. Implementasi Basis Data
Pembuatan basis data dilakukan dengan menggunakan bahasa SQL,
dimana DBMS yang digunakan adalah MySQL, implementasi basis
datanya dalam SQL adalah sebagi berikut:
a. Pembuatan basis data
CREATE DATABASE IF NOT EXISTS `u617271765_sar`
DEFAULT CHARACTER SET latin1;
b. Pembuatan tabel user
CREATE TABEL `tbl_user` (
`id` int(20) NOT NULL AUTO_INCREMENT,
`username` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL,
`level` int(20) NOT NULL,
PRIMARY KEY (`id`)
73
) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;
c. Pembuatan tabel peminjaman ruang rapat
CREATE TABLE `tbl_rapat` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`pemohon` varchar(50) NOT NULL,
`unit` varchar(50) NOT NULL,
`telp` varchar(30) NOT NULL,
`tgl_pinjam` varchar(30) NOT NULL,
`tgl_kembali` varchar(30) NOT NULL,
`nm_ruang` varchar(50) NOT NULL,
`kegiatan` text NOT NULL,
`jml_peserta` int(5) NOT NULL,
`tgl_input` varchar(30) NOT NULL,
`status` varchar(50) NOT NULL,
`komentar` text,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=54 DEFAULT CHARSET=latin1;
d. Pembuatan tabel peminjaman aula
CREATE TABLE `tbl_aula` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`pemohon` varchar(50) NOT NULL,
`unit` varchar(50) NOT NULL,
`telp` varchar(30) NOT NULL,
`tgl_pinjam` varchar(30) NOT NULL,
`tgl_kembali` varchar(30) NOT NULL,
`nm_ruang` varchar(50) NOT NULL,
`kegiatan` text NOT NULL,
`jml_peserta` int(5) NOT NULL,
`tgl_input` varchar(30) NOT NULL,
`status` varchar(50) NOT NULL,
`komentar` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;
74
e. Pembuatan tabel pinjam kendaraan
CREATE TABLE `tbl_pinjam_kendaraan` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`pemohon` varchar(50) NOT NULL,
`unit` varchar(50) NOT NULL,
`telp` varchar(30) NOT NULL,
`tgl_pinjam` varchar(30) NOT NULL,
`tgl_kembali` varchar(30) NOT NULL,
`jns_kend` varchar(50) NOT NULL,
`kegiatan` text NOT NULL,
`tgl_input` varchar(30) NOT NULL,
`status` varchar(50) NOT NULL,
`komentar` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;
f. Pembuatan tabel perbaikan sarana
CREATE TABLE `tbl_perb_sarana` (
`id` int(5) NOT NULL AUTO_INCREMENT,
`pemohon` varchar(50) NOT NULL,
`unit` varchar(50) NOT NULL,
`telp` varchar(30) NOT NULL,
`tgl_rusak` varchar(30) NOT NULL,
`nm_sarana` varchar(100) NOT NULL,
`tgl_input` varchar(30) NOT NULL,
`deskripsi` text NOT NULL,
`status` varchar(50) NOT NULL,
`komentar` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;
g. Pembuatan tabel perbaikan kendaraan
CREATE TABLE `tbl_perb_kendaraan` (
`id` int(5) NOT NULL AUTO_INCREMENT,
`pemohon` varchar(50) NOT NULL,
`unit` varchar(50) NOT NULL,
75
`telp` varchar(30) NOT NULL,
`tgl_rusak` varchar(30) NOT NULL,
`jns_kend` varchar(50) NOT NULL,
`tgl_input` varchar(20) NOT NULL,
`deskripsi` text NOT NULL,
`status` varchar(50) NOT NULL,
`komentar` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;
5. Implementasi Antarmuka
Implementasi dari aplikasi ini terdiri dari beberapa halaman
yang memiliki fungsi sendiri-sendiri. Halaman-halaman tersebut
akan tampil secara berurutan sesuai dengan urutan yang telah
terprogram, setelah pengguna melakukan proses tertentu.
a. Implementasi antar muka halaman utama pengunjung
Antar muka halaman utama adalah halama yang pertama kali
muncul ketika membuka aplikasi. Nama file: index.php
Gambar 4.32. Halaman Utama Pengunjung
76
Gambar 4.33. Halaman Utama Pengunjung tentang aplikasi
Gambar 4.34. Footer untuk halaman utama pengunjung
b. Implementasi antar muka halaman menu login
Untuk masuk ke dalam menu dalam aplikasi, maka dari
halaman utama dengan terlebih dahulu memasukkan parameter
username dan password sesuai hak akses yang diberikan oleh
pengelola. Nama file: Login.php
Gambar 4.35 Implementasi antarmuka halaman menu login
77
c. Implementasi antarmuka menu petunjuk penggunaan
Menu ini adalah sebagai petunjuk bagi pengguna untuk dapat
melakukan seluruh transaksi dalam aplikasi. Nama file:
petunjuk.php
Gambar 4.36 Implementasi antarmuka menu petunjuk pengguna
d. Implementasi antar muka menu alur penggunaan
Pada menu ini akan menampilkan gambar prosedur penggunaan
aplikasi secara keseluruhan, yang digambarkan dalam bentuk flow
map sistem atau bisa disebut sebagai Standar Operating Procedure
(SOP) aplikasi SiSarpras. Nama File: alur.php.
Gambar 4.37 Implementasi antarmuka menu Petunjuk Penggunaan
78
e. Implementasi antar muka banner aplikasi
Pada tampilan antar muka banner akan ditampilkan logo
aplikasi yang menggambarkan penggunaan dari aplikasi. Nama
file: logo_sarpras.png.
Gambar 4.38. Logo Aplikasi Sistem Informasi Sarana dan Prasarana
f. Implementasi antar muka halaman beranda / home
Jika pengguna aplikasi sudah berhasil melakukan login maka
akan ditampilkan halaman beranda, yang merupakan antarmuka
yang memberikan informasi bahwa pengguna yang mempunyai
hak akses dalam aplikasi dapat menggunakan seluruh menu
yang ada di dalam aplikasi sesuai hak akses yang diberikan
oleh pengelola. Nama File: index.php
Gambar 4.39 Implementasi antarmuka halaman menu beranda
79
g. Implementasi antar muka halaman menu utama
Implementasi ini dimaksudkan untuk memperlihatkan halaman
utama pengguna dan pengelola. Dalam hal ini pengguna
dapat mengakses seluruh menu yang ada dalam aplikasi sesuai hak
akses yang diberikan pengelola. Nama file: main.php
Gambar 4.40 Implementasi antarmuka halaman menu utama untuk
pengguna
Gambar 4.41 Implementasi antarmuka halaman menu utama
untuk pengelola
h. Implementasi antarmuka halaman menu kelola data pengguna
Pada menu ini yang membedakan adalah pada Menu Kelola Data
Pengguna yang hanya ditampilkan untuk pengelola (admin).
Nama file:main.php
Gambar 4.42 antarmuka halaman menu Kelola Data Pengguna
1) Lihat Data Pengguna
Menu ini untuk menampilkan seluruh data pengguna yang ada
di dalam database yang mempunyai hak akses berbeda sesui
level yang diberikan kepadanya.
80
Level dalam Aplikasi ini adalah:
a) Level 1 untuk Administrator/admin/pengelola
b) Level 2 untuk User/Pengguna
c) Level 3 untuk pengunjung yang tidak mempunyai akun
Gambar 4.43 Implementasi antarmuka halaman Tampil Data
Pengguna
2) Tambah Data Pengguna
Pada menu ini ditampilkan form isian untuk menambahkan
data pengguna ke dalam basis data, dengan mengisi parameter
username, password dan level pengguna. Nama file:
tambahUser.php
Gambar 4.44 Implementasi antarmuka halaman Input Data
Pengguna
Ketika form Input Data Pengguna berhasil ditambahkan maka akan
tampil pesan sukses input data seperti tampak pada gambar 4.23.
81
Gambar 4.45 Implementasi antarmuka pesan sukse input data
pengguna
3) Kelola Hak Akses
Menu ini digunakan untuk mengelola hak akses pengguna
sesuai levelnya dan juga pengaturan tentang menu apa saja
yang dapat diakses oleh pengguna. Nama file: rights.php
Gambar 4.46 antarmuka halaman Kelola Hak Akses Pengguna
i. Halaman Menu Peminjaman Sarana dan prasarana
Pada menu ini terdapat 3 sub menu yaitu: peminjaman ruang rapat,
aula dan kendaraan seperti tampak pada gambar berikut:
Gambar 4.47 Implementasi antarmuka halaman menu Peminjaman
1) Peminjaman Ruang Rapat
Pada saat menu ini diakses maka akan ditampilkan tabel data
peminjaman yang terurut secara descending berdasarkan
82
tanggal input form. Pada halaman ini terdapat tombol pencarian
data peminjaman berdasarkan setiap atribut yang ada dalam
tabel, atau disebut juga advance search.
Gambar 4.48. Implementasi antarmuka halaman menu Jadwal
Peminjaman Ruang Rapat
Gambar 4.49. Implementasi antarmuka halaman Form Pencarian
Data Peminjaman Ruang Rapat
83
Gambar 4.50. Implementasi antarmuka halaman Item Data
Peminjaman Ruang Rapat
Gambar 4.51. Implementasi antarmuka halaman Form
Peminjaman Ruang Rapat
2) Peminjaman Ruang Aula
Gambar 4.52. Implementasi antarmuka halaman menu Jadwal
Peminjaman Ruang Aula
84
Gambar 4.53. Implementasi antarmuka halaman Form Pencarian
Data Peminjaman Ruang Aula
Gambar 4.54. Implementasi antarmuka halaman Item Data
Peminjaman Ruang Aula
Gambar 4.55. Implementasi antarmuka halaman Form Peminjaman
Ruang Aula
85
3) Peminjaman Kendaraan
Gambar 4.56. Implementasi antarmuka halaman menu Jadwal
Peminjaman Kendaraan
Gambar 4.57. Implementasi antarmuka halaman Form Pencarian
Data Peminjaman Kendaraan
Gambar 4.58. Implementasi antarmuka halaman Item Data
Peminjaman Kendaraan
86
Gambar 4.59. Implementasi antarmuka halaman Form Peminjaman
Kendaraan
j. Halaman Menu Perbaikan
Menu ini terdiri dari 2 yakni Menu Perbaikan Sarana Gedung dan
Kendaraan
Gambar 4.60. Implementasi antarmuka halaman menu Perbaikan
1) Halaman Menu Perbaikan Sarana Gedung
Pada saat menu ini diakses maka akan ditampilkan tabel data
perbaikan yang terurut secara descending berdasarkan tanggal
input form. Pada halaman ini terdapat tombol pencarian data
perbaikan berdasarkan setiap atribut yang ada dalam tabel,
atau disebut juga advance search.
87
Gambar 4.61. Implementasi antarmuka halaman menu Jadwal
Perbaikan Sarana Gedung
Gambar 4.62. Implementasi antarmuka halaman Form Pencarian
Data Perbaikan Sarana Gedung
Gambar 4.63. Implementasi antarmuka halaman Item Data
Permintaan Perbaikan Sarana Gedung
88
Gambar 4.64. Implementasi antarmuka halaman Form Permintaan
Perbaikan Sarana Gedung
2) Halaman Menu Perbaikan Kendaraan
Gambar 4.65. Implementasi antarmuka halaman menu Jadwal
Perbaikan Kendaraan
Gambar 4.66. Implementasi antarmuka halaman Form Pencarian
Data Perbaikan Kendaraan
89
Gambar 4.67. Implementasi antarmuka halaman Item Data
Perbaikan Kendaraan
Gambar 4.68. Implementasi antarmuka halaman Form Permintaan
Perbaikan Kendaraan
k. Halaman Login dan Logout Pengguna
Menu ini digunakan untuk keluar dari aplikasi.
Gambar 4.69. Implementasi antarmuka halaman login/logout pengguna
C. Pengujian Sistem
Pengujian perangkat lunak adalah elemen kritis dari jaminan kualitas
perangkat lunak dan mempesentasikan kajian pokok dari spesifikasi,
desain, dan pengkodean. Pengujian Black-box berfokus pada persyaratan
fungsional perangkat lunak. Dengan demikian, pengujian black-box
90
berfokus pada persyaratan fungsional perangkat lunak. Pengujian ini
memungkinkan perekayasa perangkat lunak mendapatkan serangkaian
kondisi input yang sepenuhnya semua persyaratan fungsional untuk suatu
program.
1. Rencana Pengujian
Tabel 4.24. Rencana Pengujian Sistem
No Item Uji Detail Pengujian Jenis Ujian
1 Login Verifikasi Login Black Box
2 Peminjaman Ruang
Rapat
Lihat Jadwal, Daftar
Peminjaman, Input Form
Peminjaman, Edit Data
Peminjaman, Hapus Data
Peminjaman
Black Box
3 Peminjaman Aula
Lihat Jadwal, Daftar
Peminjaman, Input Form
Peminjaman, Edit Data
Peminjaman, Hapus Data
Peminjaman
Black Box
4 Peminjaman
Kendaraan
Lihat Jadwal, Daftar
Peminjaman, Input Form
Peminjaman, Edit Data
Peminjaman, Hapus Data
Peminjaman
Black Box
5 Perbaikan Sarana
dan Prasarana Kerja
Lihat Jadwal, Daftar
Perbaikan, Input Form
Perbaikan, Edit Data
Perbaikan, Hapus Data
Perbaikan
Black Box
6 Perbaikan
Kendaraan
Lihat Jadwal, Daftar
Perbaikan, Input Form
Perbaikan, Edit Data
Perbaikan, Hapus Data
Perbaikan
Black Box
7 Kelola Data
Pengguna
Lihat Data Pengguna,
Tambah Data Pengguna,
Kelola Hak Akses
Black Box
91
2. Kesimpulan Hasil Pengujian
Setelah dilakukan pengujian black box terhadap seluruh rencana
pengujian maka dapat disimpulkan bahwa aplikasi Sistem Informasi
Sarana dan Prasarana (SiSarpras) secara fungsional cukup efektif untuk
digunakan dalam kegiatan pengelolaan peminjaman dan perbaikan
sarana dan prasarana pada Kantor Badan Pengawas Obat dan Makanan.