Bab 3

Metode dan Perancangan Sistem

Dalam bab ini akan dijelaskan tentang model proses yang

digunakan, analisis kebutuhan, perancangan desain sistem,

gambaran database perangkat lunak, gambaran desain antarmuka

(interface) sampai cara kerja aplikash

3.1. Model Proses yang DigunakanPrototyping Model dimulai dengan pengumpulan

persyaratan. Pengembang dan pelanggan bertemu dan menentukan

tujuan umum untuk perangkat lunak, mengidentifikasi persyaratan

apapun yang dibutuhkan. Desain cepat berfokus pada representasi

aspek-aspek dari perangkat lunak yang akan terlihat oleh pelanggan /

pengguna misalnya, pendekatan input dan format output (Pressman,

2001)

Gambar 3.1 Bagan Prototyping Model (Pressman, 1997)

14

Tiga tahapan prototyping, yaitu:

1. Pengumpulan kebutuhan : pada tahap ini meliputi perijinan

pembuatan aplikasi, pengamatan secara langsung terhadap

ruangn-ruangan yang akan di buat denah. Mendatangi dan

mewawancarai nara-sumber untuk kelengkapan data lapangan.

Secara terperinci menjadi :

- Nama Dosen

Data nama dosen didapatkan berdasarkan wawancara

langsung ke tiap fakultas yang ada, karena data yang sangat

penting mengingat banyaknya jumlah dosen yang pada tiap

fakultas.

- Nama Ruangan

Data ruangan diperlukan untuk mendata nama dan kode

ruangan. Pendataan ruangan diperlukan karena dalam satu

ruangan dapat terdiri dari beberapa bagian sehingga dosen

yang bekerja dalam satu ruangan dapat labih dari satu.

2. Perancangan : pada pembuatan prototype, yang diutamakan ialah

proses masukkan dan keluaran dari aplikasi. Perancangan dilak­

ukan cepat dan rancangan mewakili semua aspek software yang

diketahui, dan rancangan ini menjadi dasar pembuatan prototype.

Pada tahap pembuatan dan pengujian sesuai dengan perancangan

makan di gunakan perangkat lunak seperti PHP, MySQL,

Notepad++. Perangkat lunak yang digunakan mengubah,

pengaturan, dan pembuatan aplikasi agar terlihat menarik dan

database agar dapat mengakses langsung pada halaman web.

PHP memungkinkan web dapat di buat dinamis pemeliharaan

15

situs web dapat mudah dan efisien. MySQL ( My Struktur Query

Language ) merupakan program pembuatan database yang

bersifat open souce, menggunakan bahasa query standar yang di

miliki SQL. Corel Draw di gunakan untuk mendesain tampilan

gambar pada denah ruangan maupun tampilan pada web.

Macromedia Flash digunakan untuk menunjukan tampilan

gedung-gedung yang ada di lingkungan FTI UKSW.

3. Evaluasi prototype: setelah menyelesaikan perancangan dan

pembuatan aplikasi, tahap evaluasi dilakukan untuk menguji

seberapa besar program dapat berjalan dengan baik dan aplikasi

bermanfaat untuk pencarian lokasi. Pada tahap mengujian di

lakukan pada mahasiswa baru mau pun mahasiswa lama.

3.2. Analisis KebutuhanTahap analisis ini digunakan untuk mengetahui dan

menterjemahkan semua permasalahan serta kebutuhan perangkat

lunak dan kebutuhan sistem yang dibangun. Oleh karena itu dalam

tahapan ini akan dilakukan proses pengumpulan data-data untuk

membangun sistem.

3.2.1. Pengumpulan DataPada tahap ini dilakukan wawancara dan pengambilan data

dosen pada fakultas sebagai data dosen. Untuk mengetahui apakah

aplikasi yang akan di buat nantinya dapat digunakan sebagai bahan

pertimbangan Universitas maka dilakukan wawancara terhadap

salah satu karyawannya yaitu Bapak Hariadi. Dari hasil wawancara,

dapat diketahui bahwa:

16

1. Aplikasi yang akan di buat dapat membantu para orang tua dan

mahasiswa baru yang belum tahu tentang tata letak ruangan yang

ada di UKSW.

2. Mahasiswa lama pun dapat mengetahui ruangn-ruangan yang

selama ini mereka belum mengetahuinya.

3. Aplikasi dapat membantu memberikan informasi terutama lokasi

ruang/gedung. Virtual map ini sangat bermanfaat terutama bagi

orangtua mahasiswa atau tamu dari luar UKSW.

3.2.2. Analisis Kebutuhan Hardware dan SoftwareKebutuhan software dan hardware yang akan digunakan

untuk membangun aplikasi tersebut, memiliki spesifikasi:

a. Kebutuhan hardware yang digunakan

1. Processor : Intel Pentium 4 @ 2,6 GHz

2. Memori : 512 MB RAM

3. Hard Disk : 2 GB free disk

b. Kebutuhan software yang digunakan

1. Windows XP Service Pack 2

2. Macromedia Flash

3. Wampserver

3.2.3. Analisis Kebutuhan InputUntuk kebutuhan input dari sistem yang dibutuhkan

berdasarkan dari hasil wawancara adalah:

1. Dapat dilihat oleh semua kalangan

2. Dapat mempermudah dalam pencarian tataletak ruang

17

3.2.4. Analisis Kebutuhan ProsesUntuk perancangan proses akan dimodelkan dengan

menggunakan DFD (Data Flow Diagram). DFD adalah suatu grafik

yang menjelaskan sebuah sistem dengan menggunakan bentuk-

bentuk atau simbul untuk menerangkan aliran data dari proses-

proses yang saling berhubungan.

Pada tahap ini akan di adakan prencanaan DFD level 0 dan

jika di harap kurang maka akan dilanjutkan dengan level 1 dan

seterusnya sehingga di rasakan bahwa penjelasan cukup di mengerti.

Setiap tahap perancangan yang telah disampaikan pada bab

sebeumnya dipaparkan lebih lengkap di dalam bab ini bagian 3.3.1,

3.3.2 dan 3.3.3.

3.3. Perancangan Sistem Tahap perancangan bertujuan untuk memberikan gambaran

awal yang jelas tentang apa yang harus dikerjakan dalam tahap

pembuatan aplikasi. Perancangan yang baik akan mempercepat

proses pembuatan sebab pembuat aplikasi tinggal mengikuti

rancangan yang ada. Rancangan yang dibuat juga dapat dipakai

sebagai dokumentasi aplikasi.

3.3.1 Perancangan ProsesPada perancangan proses ini akan dijelaskan proses dari

jalannya aplikasi ini dan juga bagian-bagian yang saling

berhubungan melalui Flowchart, DFD (Data Flow Diagram) dan

ERD (Entity Relationship Diagram).

18

3.3.1.1 Flowchart

Gambar 3.2 Flowchart pencarian ruangan

19

Pada Gambar 3.2 menjelaskan proses pencarian ruangan

pada pengguna atau user. Pertama pengguna diberikan pilihan untuk

menentukan pencarian berdasarkan ruangan, dosen, atau semua

kategori. Pilihan berdasarkan dosen maka pencarian hanya dapat

dilakukan hanya berupa nama dosen yang ada di UKSW begitu juga

jika pengguna memilih kategori ruangan maka pencarian hanya

dapat berdasarkan nama ruangan yang ada di FTI UKSW tetapi jika

pengguna tidak memilih semua kategori maka pencarian akan

mencari bardasarkan kategori ruangan dan ketegori dosen. Setelah

melakukan pemilihan pengguna dapat mencari ruangan dengan ketik

nama dosen atau pun nama ruangan yang diinginkan dan menekan

enter. Setelah menekan enter maka akan muncul link gambar atau

denah ruangan yang di tuju.

3.3.1.2 Data Flow Diagram (DFD)Data Flow Diagram (DFD) adalah alat pembuatan model

yang memungkinkan profesional sistem untuk menggambarkan

sistem sebagai suatu jaringan proses fungsional yang dihubungkan

satu sama lain dengan alur data.

Komputerisasi. Data Context Diagram dapat juga disebut

Diagram Aliran Data level 0. Data Context Diagram berisi

penjelasan umum atau global tentang proses yang terjadi dalam

sistem yang menggambarkan interaksi antara sistem dan entity luar.

Berdasarkan pemahaman tersebut, maka Data Flow Diagram untuk

layanan tata letak ruang di UKSW terlihat sebagai berikut:

20

Gambar 3.3 Diagram Konteks (DFD Level 0)

Pada diagram DFD level konteks yang ditunjukkan pada

gambar, menunjukkan proses alur sistem secara garis besar. Pada

gambar admin dapat melakukan proses masukkan data, melihat.

Sedangkan guest hanya dapat melakukan proses melihat data denah

peta. Sistem sendiri akan menghasilkan keluaran berupa tampilan

data dan peta kepada admin dan user.

Gambar 3.4 Diagram DFD Level 1

Admin

user

Informasi denah

Input/edit data

Informasi denah

Permintaan denah

0Denah ruangan

2D

21

Pada diagram DFD level 1 konteks yang ditunjukkan pada

gambar, menunjukkan proses alur sistem secara garis besar. Pada

gambar admin dapat

melakukan proses edit, input, delete dan melihat hasil masukan data

yang berupa informasi denah

Gambar 3.5 Diagram DFD Level 2 Proses login

Pada DFD level 2 proses login menjelaskan proses login

yang dilakukan oleh admin berdasarkan dua level. Level disini

dimaksudkan bahwa untuk memudahkan pengelolaan data, admin

yang bekerja dan yang dapat mengelola basis data dibagi

berdasarkan dua kategori, yaitu bagian BAA,dan bagian Fakultas

kedua bagian ini berhak mengolah data di database.

Admi

1

login

2Mengisi

username &

password

dbuser

Cek usernam dan password

Hasil cek username & pass

22

Gambar 3.6 Diagram DFD Level 2 Proses Pengelolaan Data

Pada Gamabr 3.6 proses user hanya dapat melihat denah

yang telah tersedia dengan memilih kategori yang telah disediakan

oleh admin.

3.3.1.3 ERD (Entity Relationship Diagram)ERD adalah diagram yang menggambarkan hubungan antara

beberapa entitas atau opyek-opyek dasar yang ada pada sebuah

aplikasi. Pada Gambar 3.5 dijelaskan ERD dari aplikasi denah

interaktif. ( sumber, tahun )

User

1Kategori

Ruang/dosen

2Input nama ruang/dose

nFTI

3Tampilan

denah ruangan

23

Gambar 3.7 Entity Relationship Diagram (ERD)

Gambar 3.7 menjelaskan Hubungan relasi antara

entitas dosen dimana satu dosen bisa memiliki lebih dari satu ruangn

dan tiap dosen memiliki satu fakultas. Pada entitas dosen, dosen juga

sebagai admin pada entitas dbuser. Pada tiap fakultas memiliki lebih

dari satu gedung dan tiap gedung memiliki satu atau lebih lantai

gedung. Pada tiap lantai memiliki lebih dari satu ruangan dan tiap

ruangan memiliki satu denah gambar ruangan.

Nama

nik Nama

Id

Memiliki

Gedung

Nama

Id

Lantai_gedung

Nama

Id

Id_fakultas

Memiliki

Id_fakultas Id_lantai

Id_gedung

Ruangan

Namanik Nama

Id

Memiliki

Fakultas

size

Id_ruangan

Gambar

type

Nama

Id

Id_lantai

Id_gedung

Memiliki

Nama

nik Nama

Id

Id_fakultas Id_ruangan

Id_lantai

Id_gedung

NamaId

username password

hak_akses

Dosendb_userMemiliki

Memiliki

24

Analisis Kebutuhan OutputOutput yang akan dihasilkan adalah berupa program Virtual

Map di mana dalam program tersebut dapat menunjukan ruangan

yang diinginkan sekaligus menunjukan ruangan dosen pengajaran

dari setiap Fakultas yang berada di UKSW.

3.3.2 Perancangan Tampilan Aplikasi

Gambar 3.8 Form Login

Pada gambar 3.8 admin dapat mengakses aplikasi dengan

cara memasukan username dan password apabilah berhasil maka

admin menuju ke halaman admin dan dapat penambah atau pun

mengubah data.

25

Gambar 3.9. Desain Tampilan Utama

Gambar 3.9 adalah bentuk dasar dari tampilan aplikasi.

Aplikasi ini terdiri dari 4 bagian yaitu header menu, body dan footer.

Pada bagian header terdapat background image dan pada kanan atas

terdapat icon login yang berfungsi untuk mengakses aplikasi. Pada

bagian menu terdapat submenu yaitu beranda, kategori, fakultas dan

search.

Menu beranda merupakan link ke halaman utama, sedangkan

pada menu kategori terdapat dua pilihan yaitu pilihan dosen dan

ruangan. Jika memilih dosen maka pencarian ruangan akan

dilakaukan berdasarkan ruangan dosen sedangkan jika memilih

ketegori ruangan, maka pencarian berdasarkan ruangan UKSW.

Pada menu fakultas adalah keterori seluruh fakultas yang ada

di UKSW dan mengartikan bahwa kategori akan di batasi

berdasarkan fakultas yang ada. Pada menu fakultas akan di utaman

berdasarkan pencarian dosen. Menu search merupakan menu untuk

26

melakukan pencarian sebagai contoh jika pengguna mencari ruangan

A101.

Pada menu search pengguna menuliskan kata A maka semua

yang mengandung A akan muncul dan saat memasukan A101 maka

akan menanpilkan link A101. Link A101 dapat di klik sehingga akan

muncul denah rungan A101. Pada gambar 3.10 adalah contoh denah

A101 yang telah ditemukan berdasarkan pencarian ruangan.

Gambar 3.10 Denah Ruangan A101

27

Gambar 3.11 Utama Admin

Pada Gambar 3.11 menjelaskan tampilan utama adamin yaitu

terdapat header, menu user, body, menu admin, dan footer. Pada

header menjelaskan tentang nama instansi dan terdapat icon logout.

Menu user merupakn menu yang disediakan untuk pengguna

dapat melihat dan menggunakan aplilasi Layanan Informasi

Mahasiswa. Body merupakan bidang yang inputan submenu dari

menu admin.

Menu admin merupakan menu yang dapat di akses oleh

admin. Pada bagin menu terdapat submenu. Menu input data

terdapat submenu fakultas, dosen, gedung, dan ruangan. Menu edit

terdapat submenu fakultas, dosen, gedung, dan ruangan, sedangkan

pada menu upload terdapat menu upload gambar.

28

Gamber 3.12 Input Data Fakultas

Pada Gambar 3.12 admin memilih submenu fakultas, pada

submenu fakultas terdapa tiga inputan yaitu id, nama, dan inisial. Id

merupakan id dari fakultas dengan tipe primary key, sedangkan

nama merupakan nama dari tiap fakultas yang berada di UKSW.

Inisial merupakan singkatan atau pun nama yang sering di gunakan

pada umumnya dan sering d kenal oleh mahasiswa.

Gambar 3.13 Input Data Dosen

29

Gamabar 3.7 admin memilih submenu dosen, pada submenu

dosen terdapa tujuh inputan yaitu id, nama, dan inisial dosen,

fakultas, ruangan, lantai gedung, dan gedung. Id merupakan id dari

fakultas dengan tipe primary key, sedangakan nama merupakan

nama pra dosen yang berada di UKSW. Inisial merupakan singkatan

atau pun nama yang sering di gunakan pada umumnya dan sering di

kenal oleh mahasiswa. Fakultas merupakan tempat para dosen

mengajar atau bertugas. sedangkan ruangan, gedung, dan lantai

gedung merupakan lokasih dan tempat kantor dosen pengajar.

Gambar 3.14 Input Data Gedung

Pada gambar 3.14 menjelaskan bahwa admin memilih

submenu gedung di mana terdapat dua filed yaitu id dan nama. id

mempunyai tipe primary kay sedangkan nama merupakan nama

gedung yang berada di UKSW.

30

Gamabr 3.15 Input Data Ruangan

Gambar 3.15 merupakan submenu ruangan dengan lima filed

yaitu id, nama, gedung, lantai gedung dan fakultas. Id merupakan

primary kay, sedangakan nama menunjukan nama ruangan

contohnya A101 seperti pada gambar 3.9. Filed gedung dan lantai

gedung merupakan nama gedung yang ada di UKSW dan lantai

menunjukan berada pada lantai berapa ruangan berada. Filed

fakultas merupakan nama fakultas dari setiap fakultas yang berada di

UKSW

Gamber 3.16 Menu Edit Data

31

Gambar 3.16 adalah menu dimana terdapat empat submenu

yaitu fakultas, dosen, ruangan, dan gedung. Pada gambar 3.16

adalah menu edit. Saat admin memilih filed submenu dengan filed

fakultas maka akan muncul tampilan table fakultas dengan kolom

no, id, nama, inisal dan option.

Pada kolom option terdapat dua menu yaitu hapus dan edit,

saat klik hapus maka data yang terpilih akan terhapus sedangkan jika

memilih edit maka data yang terpilih akan ditampilkan kembali dan

dapat di update.

Pada menu upload admin dapat menambahkan gambar denah

menambahkan data dan keterangan gambar.

3.3.3 Perancangan Struktur Tabel DataSalah satu komponen penting dalam perancangan Layanan

Informash Mahasiswa adalah rancangan struktur tabel. Oleh karena

itu, pada bagian ini akan dirancang struktur tabel yang digunakan

dalam Sistem Layanan Informasi Mahasiswa. Adapun tabel yang

termasuk dalam perancangan struktur adalah:

Tabel 3.1 Tabel Dosen

Name Data Type Field Size

Allow

Zero

id Varchar Auto No

nama_dosen Varchar 25 No

Nama_panggilan Varchar 20 No

Id_fakultas Varchar 10 No

Id_ruangan Varchar 10 No

32

Id_gedung Varchar 10 No

Tabel 3.1 merupakan tabel dosen yang memuat 6 fields yaitu

field id yang digunakan untuk menyimpan ID dosen dan sebagai

primary key, field nama_dosen untuk menyimpan nama dosen, field

nama_panggilan untuk nama panggilan dosen, sedangakan

id_fakultas, id_ruangan, id_gedung merupakan forenkey dari tabel

fakultas, tabel ruangan dan tabel gedung.

Tabel 3.2 Tabel Ruangan

Name Data Type Field Size

Allow

Zero

Id Varchar Auto No

Nama Varchar 20 No

Id_gedung Varchar 10 No

Id_fakultas Varchar 10 No

Id_lantai Varchar 10 No

Tabel 3.2 merupakan tabel ruangan yang memuat 5 fields

yaitu field id yang digunakan untuk menyimpan ID ruangan dan

sebagai primary key, field nama untuk menyimpan nama ruangan

sedangkan field id_gedung,id_fakultas, dan di_lantai merupakan

forenkey dari table gedung, table fakultas dan table lantai.

Tabel 3.3 Tabel fakultas

Name Data Type Field Size Allow

33

Zero

Id Varchar Auto No

Nama Varchar 20 No

Tabel 3.3 merupakan tabel fakultas yang memuat 2 fields

yaitu field id yang digunakan untuk menyimpan ID ruangan dan

sebagai primary key, field nama untuk menyimpan nama fakultas.

Tabel 3.4 Tabel Gambar

Name Data Type Field Size

Allow

Zero

Id Varchar Auto No

Nama Varchar 20 No

zise blob

Id_lantai_gedung Varchar 10 No

type Varchar 10 No

Id_ruangan Varchar 10 No

Id_gedung Varchar 10 No

Tabel 3.4 merupakan tabel gambar yang memuat tujuh fields

yaitu field id yang digunakan untuk menyimpan ID gambar dan

sebagai primary key, field nama untuk menyimpan nama gambar,

field zise untuk mengetahi ukuran dari file gambar, fields type untuk

mengetaui tipe data sedangkan id_lantai_gedung, id_ruangan,

34

id_gedung merupakan forenkey dari table lantai gedung, tabel

ruangan dan tabel gedung.

Tabel 3.5 Tabel Gedung

Name Data Type Field Size

Allow

Zero

Id Varchar Auto No

Nama Varchar 20 No

Tabel 3.5 merupakan tabel gambar yang memuat 2 fields

yaitu field id yang digunakan untuk menyimpan ID gedung dan

sebagai primary key, field nama untuk menyimpan nama gedung.

Tabel 3.6 Tabel lantai_gedung

Name Data Type Field Size

Allow

Zero

Id Varchar Auto No

Nama Varchar 20 No

Tabel 3.6 merupakan tabel gambar yang memuat 2 fields

yaitu field id yang digunakan untuk menyimpan ID lantai_gedung

dan sebagai primary key, field nama untuk menyimpan nama

lantai_gedung.

Tabel 3.7 Tabel login

Name Data Type Field Size Allow

35

Zero

Id bigint Auto No

Nama Varchar 20 No

Username Varchar 20 No

Password Varchar 20 No

Hak_akses Varchar 20 No

Id_fakultas Varchar 20 No

Table 3.7 merupakan table untuk menyimpan data admin

yang dapat akses penuh pada aplikasi. Pada kolom nama id

merupakan primary key, pada field nama merupakan nama pemakai

atau nama pengguna dari admin, sedangkan pada filed username dan

password di gunakan untuk menyimpan username dan password

untuk mengakses aplikasi. Filed hak_akses merupakan tipe hak

akses pada admin, id_fakultas di ambil dari table fakultas.

3.3.4 Desain MapSebelum membuat denah ruangan, dilakukan pengumpulan

informasi mengenai tempat atau daerah yang akan buat denah.

Dalam hal ini, penulis menggunakan UKSW (Universitas Kristen

Satya Wacana) sebagai objek. Informasi yang dikumpulkan berupa

informasi mengenai gedung, dosen dan ruang UKSW, mencari

denah UKSW, memetakan beberapa gedung UKSW. Peta UKSW

hanya sebagai salah satu contoh pengimplementasian sistem denah

ke dalam bentuk layanan aplikasi yang sesungguhnya. Peta-peta

yang digunakan sebagai contoh tersebut, tidak memperhatikan jarak

36

dalam pembuatannya. Hal ini dikarena adanya kesulitan untuk

mengukur jarak antar gedung dan luas-luas gedung dan ruang yang

berada pada lingkungan kampus UKSW.

Gambar 3.17 Peta UKSW ( UKSW, 2005 )

Setelah dilakukan pengumpulan informasi, informasi di olah

agar setiap gedung yang dapat dipetakan dan penggambarannya

dikenali oleh program sebagai layer tersendiri.

3.4. Perancangan Metode

Dalam penelitian ini, pengujian sistem di lakukan dengan

metode black box testing. Uji coba black box testing digunakan

untuk mendemonstrasikan fungsi software yang dioperasikan,

apakah inputan diterima dengan benar, apakah output yang

dihasilkan benar, dan apakah intergritas informasi eksternal

terpelihara. (Ayuliana, 2009)