19
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
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
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
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.
3.3.2 ActivityDiagram
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 passwordadmin tersebut valid atau tidak. Jika username atau
passwordinvalid, maka akan muncul pesan dan kembali ke menu login, akan tetapi jika username dan passwordvalid, 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
Gambar 3.4 Diagram Activity User
Pada Gambar 3.4 dijelaskan diagram activity user, maka
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 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
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
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
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
