19

Bab 3

Metode dan Perancangan Sistem

3.1 Metode Perancangan Sistem

Dalam membangun aplikasi ini metode yang digunakan

adalah Prototyping Model. Prototyping Model membangun

sebuah model dari sebuah sistem berdasarkan kebutuhan user,

tetapi user tidak memberikan detail input, proses, dan detail

output, jadi antara user dengan programmer hanya membahas

gambaran dari program yang akan dibuat.

Gambar 3.1 Prototyping Model (Pressman, 2001)

Tahap yang dilakukan dengan metode ini adalah :

1. Pengumpulan Kebutuhan

Melakukan wawancara dengan narasumber yang ahli dan

mengerti tentang perumahan dan mendapatkan data

20

perumahan yang dibutuhkan dalam penelitian. Dari sini

dapat menganalisis kebutuhan sistem, dan mendapatkan

gambaran mengenai input, proses, dan output dari

penelitian ini. Kebutuhan input yang dibutuhkan antara

lain: model bangunan perumahan, tipe perumahan, luas

bangunan, luas tanah. Sedangkan untuk prosesnya

dibutuhkan teknologi WebGL untuk membuat maket atau

miniatur perumahan berbasis web 3D untuk memudahkan

konsumen dalam melihat model perumahan. Output akan

ditampilkan maket atau miniatur perumahan berbasis web

3D, oleh karena itu dibutuhkan library untuk mendukung

sistem agar dapat menampilkan grafik 3D pada halaman

website. Dan dibutuhkan library yang lain untuk

mendukung agar sistem dapat berjalan sesuai dengan

kebutuhan user.

2. Perancangan

Setelah mendapatkan gambaran mengenai kebutuhan yang

diperlukan dalam pembuatan aplikasi, dan bagaimana

penyelesaiannya maka dibuatlah suatu rancangan sistem

yang ingin dibuat. Rancangan ini adalah dasar pembuatan

prototype software.

3. Evaluasi Prototype

Tahap ini prototype yang sudah dibuat pada tahap

sebelumnya dievaluasi dan dinilai, apakah tujuan umum

dari pembuatan software telah tercapai. Apabila belum

21

tercapai maka tahap selanjutnya kembali ke tahap paling

awal, begitu seterusnya sampai tujuan umum tercapai.

3.2 Kebutuhan Hardware dan Software

Agar bisa membuat sistem ini, maka spesifikasi minimal

dari sebuah komputer adalah sebagai berikut:

Analisis kebutuhan software :

Editor : Adobe Dreamweaver CS4

Database : MySQL 5.0

UML Designer : Rational Rose

Tools View Designer : Autodesk 3Ds Max 2009, Coppercube

3.0.3

Analisis kebutuhan hardware :

Memori : RAM 1GB

Harddisk : 80GB

Monitor

Keyboard dan Mouse

3.3 Perancangan Sistem

Dalam perancangan sistem digunakan Unified Modelling

Language (UML).

3.3.1 Use Case Diagram

Dalam use case diagram ini dibagi menjadi dua pengguna,

yaitu admin dan user. Untuk dapat masuk ke dalam sistem, maka

22

admin harus melakukan login terlebih dahulu, untuk dapat masuk

ke dalam halaman admin. Setelah melakukan login, maka dapat

melakukan tambah data, edit data, hapus data. Yang berlaku

sebagai admin adalah administrator. Untuk masuk ke dalam

halaman maket user tidak perlu melakukan login. Yang berlaku

sebagai user adalah konsumen. Use Case Diagram Admin dan

User dilihat pada Gambar 3.2.

Gambar 3.2 Use Case Diagram Admin dan User

23

3.3.2 Activity Diagram

Di dalam sistem ini terdapat berbagai macam aktifitas yang

dapat dilakukan baik oleh admin ataupun user. Dari aktifitas-

aktifitas tersebut, maka dapat dibuatlah diagram activity yaitu

pada Gambar 3.3 yang mewakili aktifitas-aktifitas admin dan

Gambar 3.4 yang merupakan aktifitas-aktifitas yang dapat

dilakukan oleh user.

Gambar 3.3 merupakan diagram activity untuk user yang

login dengan hak akses admin. Terdapat dua swimlane atau

pelaku sistem, yaitu admin itu sendiri dan sistem. Pertama-tama

admin melakukan login dengan memasukkan username dan

password, kemudian sistem akan mengecek, apakah username

dan password admin tersebut valid atau tidak. Jika username atau

password invalid, maka akan muncul pesan dan kembali ke menu

login, akan tetapi jika username dan password valid, maka status

sistem adalah berhasil login. Setelah admin berhasil melakukan

login, admin dapat melakukan aktifitas-aktifitas seperti: melihat

komentar dari user, menambah data rumah, menambah tipe

rumah, mengubah data rumah, mengubah tipe rumah, mengubah

contact, menghapus data rumah, menghapus tipe rumah,

menghapus foto.

24

Gambar 3.3 Diagram Activity Admin

25

Gambar 3.4 Diagram Activity User

Pada Gambar 3.4 dijelaskan diagram activity user, maka

user akan menuju ke beberapa pilihan menu, antara lain: lihat tipe

rumah, lihat detail rumah, lihat galeri, lihat contact, dan kirim

komentar untuk admin. Setelah selesai dari proses-proses

tersebut, maka user dapat keluar dari halaman web.

26

3.4 Perancangan Interface

Rancangan interface panel admin login secara umum yang

menggambarkan tampilan aplikasi, ditunjukkan pada Gambar 3.5.

Gambar 3.5 Rancangan Interface Admin Panel Login

Gambar 3.5 menunjukkan rancangan interface admin panel

login secara umum. Pada form berisi input teks username, input

teks password dan tombol atau button login yang nantinya akan

menghubungkan ke dalam halaman administrator setelah admin

mengisi username dan password sesuai database.

Gambar 3.6 Rancangan Interface

27

Gambar 3.6 menunjukkan rancangan interface secara

umum. Form dibagi menjadi dua, blok atas dan blok bawah. Pada

blok atas berisi tombol-tombol navigasi atau button yang

nantinya tampilan setelah button navigasi tersebut diklik akan

berada di blok bawah. Tombol navigasi tersebut antara lain

seperti tombol admin home, masukan data di dalam tombol

masukan data terdapat tombol masukan data rumah dan masukan

data tipe rumah, edit data di dalam tombol edit data terdapat

tombol edit data rumah dan edit data tipe rumah, hapus data di

dalam tombol hapus data terdapat tombol hapus data rumah,

hapus foto rumah, dan hapus tipe rumah, contact, dan logout.

3.5 Perancangan Database

Database terdiri dari tabel-tabel yang digunakan dalam

sistem. Tabel contact berisi data untuk menghubungi perusahaan.

Terdapat id_contact sebagai primary key, email, no_telp, kota,

deskripsi. Field dari tabel contact dapat dilihat pada Tabel 3.1.

Tabel 3.1 Tabel Contact

Nama Field Keterangan

id_contact Nomor id dari contact (primary key)

email Nama email perusahaan

no_telp Nomor telepon perusahaan

kota Kota perusahaan berada

28

deskripsi Visi dan misi dari perusahaan

Field dari tabel pesan dapat dilihat pada Tabel 3.2. Tabel

pesan berisi data komentar dari user yang mengunjungi halaman

web client. Terdapat id_pesan sebagai primary key, nama, email

pesan.

Tabel 3.2 Tabel Pesan

Nama Field Keterangan

id_pesan Nomor id dari pesan (primary key)

nama Nama yang mengirim komentar

email Email yang mengirim komentar

pesan Isi komentar

Field dari tabel tb_admin dapat dilihat pada Tabel 3.3.

Tabel tb_admin berisi id_admin sebagai primary key, username

dan password administrator.

Tabel 3.3 Tabel tb_Admin

Nama Field Keterangan

id_admin Nomor id admin (primary key)

username Username admin

password Password admin

29

Field dari tabel tb_tipe dapat dilihat pada Tabel 3.4. Tabel

tb_tipe berisi id_tipe sebagai primary key yang menghubungkan

dengan tabel tb_rumah dan nama_tipe.

Tabel 3.4 Tabel tb_Tipe

Nama Field Keterangan

id_tipe Nomor id tipe (primary key)

nama_tipe Nama tipe rumah

Field dari tabel tb_rumah dapat dilihat pada Tabel 3.5.

Tabel tb_rumah berisi id_rumah sebagai primary key yang

menghubungkan dengan tabel tb_photo, nama_rumah, detail,

post, link, linkdlm, id_tipe sebagai foreign key.

Tabel 3.5 Tabel tb_Rumah

Nama Field Keterangan

id_rumah Nomor id rumah (primary key)

nama_rumah Nama rumah

detail Detail rumah

post Pilihan menampilkan rumah

link Link menuju ke halaman maket rumah

linkdlm Link menuju ke halaman maket rumah

Id_tipe Nomor id tipe (foreign key)

30

Field dari tabel tb_photo dapat dilihat pada Tabel 3.6. Tabel

tb_photo berisi id_photo sebagai primary, ukuran, tipe, lokasi,

post, id_rumah sebagai foreign key.

Tabel 3.6 Tabel tb_Photo

Nama Field Keterangan

id_photo Nomor id photo (primary key)

file_photo Nama foto

ukuran Ukuran foto dalam bit

tipe Tipe foto

lokasi Lokasi foto

post Pilihan untuk menampilkan foto atau

tidak

id_rumah Nomor id rumah (foreign key)