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 19
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 aktifitasaktifitas 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.
Gambar 3.3 Diagram Activity Admin 24
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. Nama Field id_contact email no_telp kota Tabel 3.1 Tabel Contact Keterangan Nomor id dari contact (primary key) Nama email perusahaan Nomor telepon perusahaan 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. Nama Field id_pesan nama email pesan Tabel 3.2 Tabel Pesan Keterangan Nomor id dari pesan (primary key) Nama yang mengirim komentar Email yang mengirim komentar 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. Nama Field id_admin username password Tabel 3.3 Tabel tb_admin Keterangan Nomor id admin (primary key) Username admin 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. id_tipe nama_tipe Nama Field Tabel 3.4 Tabel tb_tipe Keterangan Nomor id tipe (primary key) 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. Nama Field id_rumah nama_rumah detail post link linkdlm Id_tipe Tabel 3.5 Tabel tb_rumah Keterangan Nomor id rumah (primary key) Nama rumah Detail rumah Pilihan menampilkan rumah Link menuju ke halaman maket rumah Link menuju ke halaman maket rumah 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. Nama Field id_photo file_photo ukuran tipe lokasi post id_rumah Tabel 3.6 Tabel tb_photo Keterangan Nomor id photo (primary key) Nama foto Ukuran foto dalam bit Tipe foto Lokasi foto Pilihan untuk menampilkan foto atau tidak Nomor id rumah (foreign key)