6. Bab IV Perancangan Dan Implementasi

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



Peminjaman aula

Pengguna

4 Input Form

peminjaman

kendaraan



Peminjaman kendaraan

Pengguna

5 Input Form

permintaan

perbaikan sarana

gedung



permintaan perbaikan sarana

gedung

Pengguna

6 Input Form

permintaan

perbaikan

kendaraan



permintaan perbaikan

kendaraan

Pengguna

7 Lihat Jadwal

Peminjaman

ruang rapat

Use Case memperlihatkan

jadwal peminjaman ruang

rapat

Pengguna

8 Lihat Jadwal

Peminjaman aula


jadwal peminjaman aula

Pengguna

44

9 Lihat Jadwal

peminjaman

kendaraan


jadwal peminjaman

kendaraan

Pengguna

10 Lihat Jadwal

permintaan

perbaikan sarana

dan prasarana


jadwal perbaikan sarana dan

prasarana

Pengguna

11 Lihat Jadwal

permintaan

perbaikan

kendaraan


jadwal permintaan

perbaikan kendaraan

Pengguna

12 Cari Data

Peminjaman /

Perbaikan


pencarian data peminjaman /

perbaikan

Pengguna

13 Tambah

pengguna


kegiatan menambah data

pengguna

Pengelola

14 Lihat Data

Pengguna


data semua pengguna

Pengelola

15 Kelola hak akses

pengguna


kegiatan mengelola hak

akses pengguna

Pengelola

16 Membuat status

dan komentar

permintaan

peminjaman /

perbaikan


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


mengisi form peminjaman ruang rapat

Skenario Utama



password


password


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


8 Input data peminjaman

ruang rapat dan pilih tombol

Kirim

9 tampil daftar data yang

telah diinput dan

menampilkan pesan

sukses input data


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


aula


aula


mengisi form peminjaman aula

Skenario Utama



password


password

47


sesuai otentifikasi


Aula


dan tabel data

peminjaman aula


Peminjaman


peminjaman aula

8 Input data peminjaman aula

dan pilih tombol Kirim


telah diinput dan

menampilkan pesan

sukses input data

peminjaman aula



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


kendaraan


kendaraan


mengisi form peminjaman kendaraan

Skenario Utama



password


password


sesuai otentifikasi


Kendaraan


dan tabel data

peminjaman kendaraan


Peminjaman



8 Input data peminjaman

kendaraan dan pilih tombol

Kirim


telah diinput dan

menampilkan pesan

sukses input 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


mengisi form permintaan perbaikan sarana

dan prasarana

Skenario Utama



password


password


sesuai otentifikasi

4 Pilih menu Permintaan

Perbaikan Sarana dan

Prasarana


dan tabel data


sarana dan prasarana


Perbaikan




8 Input data permintaan

perbaikan sarana dan

prasarana dan pilih tombol

Kirim


telah diinput dan

menampilkan pesan

sukses input 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


mengisi form permintaan perbaikan

kendaraan

Skenario Utama



password


password


sesuai otentifikasi

4 Pilih menu Permintaan

Perbaikan kendaraan


dan tabel data


kendaraan


Perbaikan



kendaraan

8 Input data permintaan

perbaikan kendaraan dan

pilih tombol Kirim


telah diinput dan

menampilkan pesan

sukses input data

kendaraan



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


Deskripsi : Use Case memperlihatkan jadwal


Skenario Utama



password


password


sesuai otentifikasi



Ruang Rapat

6 Tampil halaman jadwal


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


aula terlebih dahulu


peminjaman aula


peminjaman aula

Skenario Utama



password


password


sesuai otentifikasi



Aula


peminjaman aula

Kondisi Akhir : Data jadwal peminjaman aula akan


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


kendaraan terlebih dahulu





Skenario Utama



password


password


sesuai otentifikasi


51


Kendaraan



Kondisi Akhir : Data jadwal peminjaman kendaraan akan


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


permintaan perbaikan sarana dan prasarana


permintaan perbaikan sarana dan prasarana

Skenario Utama



password


password


sesuai otentifikasi

4 Pilih menu 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


permintaan perbaikan kendaraan


permintaan perbaikan kendaraan

52

Skenario Utama



password


password


sesuai otentifikasi

4 Pilih Menu Perbaikan


Kendaraan



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



password


password


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



password


password


sesuai otentifikasi

4 Pilih menu Kelola Data

Pengguna

5 Tampil menu dropdown

Kelola Data Pengguna

6 Pilih menu Tambah Data

Pengguna


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


melihat data pengguna

Skenario Utama



password


password


sesuai otentifikasi


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


mengelola hak akses pengguna

Skenario Utama



password


password


sesuai otentifikasi


Pengguna

5 Tampil menu dropdown

Kelola Data Pengguna

6 Pilih menu Kelola Hak

Akses


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



Increment






7 Nm_ruang Varchar(50) No

8 Kegiatan Text No

9 Jml_peserta Int(10) No



12 Komentar Text No

61

3) Tabel peminjaman kendaraan

Tabel 4.20. Tabel data peminjaman kendaraan



Increment






7 Jns_kend Varchar(50) No

8 Kegiatan Text No



11 Komentar Text No

4) Tabel perbaikan sarana

Tabel 4.21. Tabel data perbaikan sarana



Increment




5 Tgl_rusak varchar(30) No

6 Nm_sarana Varchar(100) No

7 Tgl_input varchar(30) No

8 Deskripsi Text No


10 Komentar Text No

5) Tabel perbaikan kendaraan

Tabel 4.22. Tabel data perbaikan kendaraan



Increment




5 Tgl_rusak varchar(30) No

6 Jns_kend Varchar(100) No

62

7 Tgl_input varchar(30) No

8 Deskripsi Text 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:

http://localhost/xampp

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

http://localhost/nama-aplikasi

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:

http://sarpras.pusku.com/

http://www.idhostinger.com/

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 ù617271765_sar`

DEFAULT CHARACTER SET latin1;

b. Pembuatan tabel user

CREATE TABEL `tbl_user` (

ìd` int(20) NOT NULL AUTO_INCREMENT,

ùsername` varchar(100) NOT NULL,

`password` varchar(100) NOT NULL,

`level` int(20) NOT NULL,

PRIMARY KEY (ìd`)

http://sarpras.pusku.com/

73

) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;

c. Pembuatan tabel peminjaman ruang rapat

CREATE TABLE `tbl_rapat` (


`pemohon` varchar(50) NOT NULL,

ùnit` 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 (ìd`)


d. Pembuatan tabel peminjaman aula

CREATE TABLE `tbl_aula` (







`nm_ruang` varchar(50) NOT NULL,


`jml_peserta` int(5) NOT NULL,



`komentar` text NOT NULL,

PRIMARY KEY (ìd`)


74

e. Pembuatan tabel pinjam kendaraan

CREATE TABLE `tbl_pinjam_kendaraan` (







`jns_kend` varchar(50) NOT NULL,





PRIMARY KEY (`id`)


f. Pembuatan tabel perbaikan sarana

CREATE TABLE `tbl_perb_sarana` (





`tgl_rusak` varchar(30) NOT NULL,

`nm_sarana` varchar(100) NOT NULL,


`deskripsi` text NOT NULL,



PRIMARY KEY (`id`)


g. Pembuatan tabel perbaikan kendaraan

CREATE TABLE `tbl_perb_kendaraan` (




75


`tgl_rusak` varchar(30) NOT NULL,

`jns_kend` varchar(50) NOT NULL,


`deskripsi` text NOT NULL,



PRIMARY KEY (`id`)


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


Gambar 4.51. Implementasi antarmuka halaman Form


2) Peminjaman Ruang Aula


Peminjaman Ruang Aula

84


Data Peminjaman Ruang Aula


Peminjaman Ruang Aula

Gambar 4.55. Implementasi antarmuka halaman Form Peminjaman

Ruang Aula

85

3) Peminjaman Kendaraan


Peminjaman Kendaraan


Data Peminjaman Kendaraan


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


Perbaikan Sarana Gedung


Data Perbaikan Sarana Gedung


Permintaan Perbaikan Sarana Gedung

88

Gambar 4.64. Implementasi antarmuka halaman Form Permintaan

Perbaikan Sarana Gedung

2) Halaman Menu Perbaikan Kendaraan


Perbaikan Kendaraan


Data Perbaikan Kendaraan

89


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





Peminjaman

Black Box

4 Peminjaman

Kendaraan





Peminjaman

Black Box

5 Perbaikan Sarana

dan Prasarana Kerja


Perbaikan, Input Form

Perbaikan, Edit Data

Perbaikan, Hapus Data

Perbaikan

Black Box

6 Perbaikan

Kendaraan


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.

6. Bab IV Perancangan Dan Implementasi

Documents

Transcript of 6. Bab IV Perancangan Dan Implementasi