Disain User Interface - Disain Sistem - ANALISIS DAN PERANCANGAN SISTEM

c. Daftar Definisi (Definition List)

ANALISIS DAN PERANCANGAN SISTEM

3.2 Disain Sistem

3.2.2 Disain User Interface

Desain user interface untuk Situs Penawaran Properti di Yogyakarta Berbasis Web adalah sebagai berikut :

- registrasi HEADER

FOOTER

Home

Selamat datang di layanan ini.

Tanggal_hari ini

Welcome

- login admin - Registrasi Member - Login Member - Lihat Properti - Pencarian 1. Halaman home

H E A D E R

F O O T E R

H om e

Tanggal_ hari ini

S ilahkan m engisi data-data keanggotaan dibaw ah ini : U sernam e :

P assw ord : U langi P assw ord :

N am a : A lam at : N o Telepon : E m ail : K ata kunci : Jaw aban : K irim B atal D ata -data yang saya isi diatas adalah benar adanya - R egistrasi M em ber - Login M em ber - Lihat P roperti - P encarian HEADER FOOTER Username : Password : Login

*) Lupa password anda ?

2. Halaman registrasi member

Gambar 3.13 Halaman registrasi member

3. Halaman login member

HEADER

FOOTER Selamat Datang nama_member

Home

Tanggal_hari ini - Data anda

- Update data anda

- Daftar properi

- Lihat properti

--Logout

4. Halaman home member

Gambar 3.15 Halaman home member

HEADER

FOOTER

Home

Tanggal_hari ini

Nama : Budi

Alamat : Malioboro, Yogyakarta No Telepon : 8097378736 Email : budi@yahoo.com - Data anda

- Update data anda

- Daftar properi

- Lihat properti

--Logout

5. Halaman data anda

HEADER

FOOTER

Home

Tanggal_hari ini

Silahkan mengisi data-data keanggotaan dibawah ini :

Nama : Alamat : No Telepon : Email : Kirim Batal - Data anda

- Update data anda

- Daftar properi - Lihat properti --Logout HEADER FOOTER Home Tanggal_hari ini

Silahkan mengisi data-data keanggotaan dibawah ini :

Kirim Batal Daftar Properti Nama Properti : Lokasi : Jenis Properti : Jenis Penawaran : Alamat : Harga : Rp Fasilitas Properti : Fasilitas Lokasi : Status Kepemilikan :

Tanggal Mulai : Tanggal hari ini Tanggal Berakhir : Tanggal hari ini + 30 hari - Data anda

- Update data anda

- Daftar properi

- Lihat properti

--Logout

6. Halaman update data anda

Gambar 3.17 Halaman update data anda

7. Halaman daftar properti

HEADER

FOOTER Home >> Update Properti

Home

Tanggal_hari ini

GAMBAR

Nama Properti : Rumah Budi Lokasi : Jogja Tengah Jenis Properti : Rumah Jenis Penawaran : Dijual

Alamat : Malioboro,Yogyakarta Harga : Rp 200.000.000

Fasilitas Properti : Kamar Mandi 2, Garasi, Kamar Tidur Fasilitas Lokasi : Pinggir Jalan Raya, Dekat

Supermarket Status Kepemilikan : SHM Edit Hapus - Data anda

- Update data anda

- Daftar properi

- Update properti

- Update galeri

- Logout

8. Halaman lihat properti member

Gambar 3.19 Halaman lihat properti member

HEADER

FOOTER

Home

Tanggal_hari ini

Silahkan mengisi data-data keanggotaan dibawah ini :

Kirim Batal

Home >> Update Properti >> Edit Properti

Nama Properti : Jenis Properti : Jenis Penawaran : Lokasi : Alamat : Harga : Fasilitas Properti : Fasilitas Lokasi : Status Kepemilikan : - Data anda

- Update data anda

- Daftar properi

- Lihat properti

--Logout

9. Halaman edit data properti

HEADER

FOOTER Home >> Update Galeri

Home Tanggal_hari ini Gambar Utama : Gambar 1 : Gambar 2 : Gambar 3 : Gambar 4 : Gambar 5 : BROWSE UPLOAD Nama_properti UPLOAD UPLOAD UPLOAD UPLOAD UPLOAD BROWSE BROWSE BROWSE BROWSE BROWSE

10.Halaman upload gambar properti

Gambar 3.21 Halaman upload gambar properti

HEADER FOOTER Tanggal_hari ini GAMBAR GAMBAR GAMBAR GAMBAR GAMBAR GAMBAR - login admin Home - Data anda

- Update data anda

- Daftar properi

- Lihat properti

--Logout

11.Halaman lihat gambar properti

HEADER ER Home FOOT Username Password : : Login Home >> Login

12.Halaman login admin

Gambar 3.23 Halaman login admin

HEAD R FOOTER E Selamat Datang Tanggal_hari ini - Ubah Data - Lihat Member - Lihat Properti - Lihat Lokasi

- Lihat Jenis Properti

- Logout

Home 13. Halaman home admin

HEADER

FOOTER

Tanggal_hari ini

Ubah Batal Masukkan username dan password baru anda :

Username baru : Password baru : Ulangi password baru :

Home

- Ubah Data

- Lihat Member

- Lihat Properti

- Lihat Lokasi

- Lihat Jenis Properti

- Logout

14.Halaman update data admin

Gambar 3.25 Halaman update data admin

HEADER

FOOTER

Tanggal_hari ini

……... ………... Ubah Hapus ……... ………... Ubah Hapus

Username Password Aksi

Home

- Ubah Data

- Lihat Member

- Lihat Properti

- Lihat Lokasi

- Lihat Jenis Properti

- Logout

15.Halaman update member

HEADER

FOOTER

Tanggal_hari ini

………... ... Ubah Hapus

Nama Properti Tanggal Berakhir Aksi

Home

- Ubah Data

- Lihat Member

- Lihat Properti

- Lihat Lokasi

- Lihat Jenis Properti

- Logout

16.Halaman lihat properti admin

Gambar 3.27 Halaman lihat properti admin

HEADER FOOTER Tanggal_hari ini Tambah Lokasi ……... ………... Ubah Hapus ……... ………... Ubah Hapus

Kode lokasi Nama Lokasi Aksi

Home ……... ………... Ubah Hapus - Ubah Data - Lihat Member - Lihat Properti - Lihat Lokasi

- Lihat Jenis Properti

- Logout

17. Halaman update lokasi

55 HEADER FOOTER Tanggal_hari ini Tambah Lokasi ……... ………... Ubah Hapus ……... ………... Ubah Hapus

Kode Jenis Properti Nama Jenis Properti Aksi

Home ……... ………... Ubah Hapus - Ubah Data - Lihat Member - Lihat Properti - Lihat Lokasi

- Lihat Jenis Properti

- Logout

18.Halaman update jenis properti

Gambar 3.29 Halaman update jenis properti

HEADER

FOOTER Home >> Lihat Properti

Tanggal_hari ini

GAMBAR

Nama Properti : Rumah Budi Jenis Properti : Rumah Jenis Penawaran : Dijual Lokasi : Jogja Utara

Alamat : Maguwoharjo, Depok, Sleman Harga : Rp 200.000.000

Fasilitas Properti : Kamar Mandi 2, Garasi, Kamar Tidur Fasilitas Lokasi : Pinggir Jalan Raya, Dekat

Supermarket Status Kepemilikan : SHM Home - Registrasi Member - Login Member - Lihat Properti - Pencarian [1][2][3][4][5][6] - login admin [Lihat Galeri] 19.Halaman lihat properti

HEAD

FOOTER Pencarian

Home Aturan

Tanggal_hari ini

Silahkan masukkan kategori pencarian properti

Cari Batal Jenis Properti : Jenis Penawaran : Harga : Lokasi : Pemilik Properti : - login admin - Registrasi Member - Login Member - Lihat Properti - Pencarian L o g in R e g is tra s i ^{L u p a} P a s s w o rd L ih a t P ro p e rti L o g o u t D a fta r P ro p e rti D a ta a n d a ^{U p} ^te P r rti ER d a o p e

E d itP ro p e rti _{P r}^H^{a p u}_{o p e}^s_rti

3.2.3 Disain Struktur Menu

Disain struktur menu untuk Situs Penawaran Properti di Yogyakarta Berbasis Web dapat dilihat pada Gambar 3.32 untuk disain struktur menu member , gambar 3.33 untuk disain struktur menu admin, dan gambar 3.34 untuk disain struktur menu pengunjung.

Gambar 3.32 Disain struktur menu member

20.Halaman pencarian properti

57 57 Login Admin Update profil Ubah Hapus Update properti Ubah Hapus Update member Ubah Tambah Hapus

Update lokasi Update Jenis Properti Logout

Ubah

Tambah Hapus

Lihat Properti ^Pencarian Properti Gambar 3.33 Disain struktur menu admin

Gambar 3.34 Disain struktur menu pengunjung

BAB IV

IMPLEMENTASI SISTEM

Setelah selesai merancang dan menganalisa sistem yang akan dibuat, langkah selanjutnya adalah mencoba mengimplementasikan ke dalam bahasa yang dapat dimengerti oleh mesin.

Sistem ini dibuat dengan spesifikasi Software dan Hardware sebagai berikut :

Spesifikasi Software

1. Sistem Operasi Windows XP Professional. 2. Macromedia Dreamweaver MX

3. xampp 136.2 php dengan MySQL 5.0.24a dan PHP 5.1.6 4. Macromedia Flash MX

5. Adobe Photoshop 7.0 Spesifikasi Hardware

1. Prosessor Intel Pentium IV 1.88 GHz 2. Memory 512 MB

3. HardDisk 100 GB

4.1 Pembuatan Database

Pertama – tama yang dilakukan dalam pembangunan situs penawaran properti berbasis web ini adalah membuat database terlebih dahulu dengan menggunakan database MySQL. Jadi sistem yang dibuat hanya mengacu pada satu database yang diberi nama properti_db.

Adapun langkah pembuatan database properti_db adalah sebagai berikut :

Database terdiri dari lima tabel utama. Struktur tabel-tabel dalam situs penawaran properti berbasis web adalah sebagai berikut :

a. Tabel member, tabel dibuat dengan sintak SQL sebagai berikut:

CREATE TABLE ` m em ber` (

` usernam e` varchar( 20) collat e lat in1_general_ci NOT NULL, ` password` varchar( 20) collat e lat in1_general_ci NOT NULL, ` nam a` varchar( 50) collat e lat in1_general_ci NOT NULL, ` alam at m ` v archar( 100) collat e lat in1_general_ci NOT NULL, ` no_t elepon` varchar( 15) collat e lat in1_general_ci default NULL, ` alam at _em ail` varchar( 50) collat e lat in1_general_ci default NULL, ` kat a_kunci` varchar( 50) collat e lat in1_general_ci NOT NULL, ` j awaban` varchar( 20) collat e lat in1_general_ci NOT NULL,

` st at us_m em ber` varchar( 5) collat e lat in1_general_ci default NULL, PRI MARY KEY ( ` user nam e` ) ,

UNI QUE KEY ` usernam e` ( ` usernam e` ) )

b. Tabel properti, tabel dibuat dengan sintak SQL sebagai berikut:

CREATE TABLE ` propert i` (

` kode_propert i` int ( 4) NOT NULL aut o_increm ent ,

` usernam e` varchar( 20) collat e lat in1_general_ci NOT NULL, ` kode_lokasi` int ( 4) NOT NULL,

` nam a_propert i` varchar ( 30) collat e lat in1_general_ci NOT NULL, ` kode_j enis_propert i` int ( 4) NOT NULL,

` j enis_penaw aran` varchar( 16) collat e lat in1_general_ci NOT NULL, ` alam at ` varchar( 100) collat e lat in1_gener al_ci NOT NULL,

` luas` varchar( 10) collat e lat in1_general_ci NOT NULL, ` harga` varchar( 15) collat e lat in1_general_ci NOT NULL, ` fasilit as_propert i` t ex t collat e lat in1_general_ci, ` fasilit as_lok asi` t ext collat e lat in1_gener al_ci,

` st at us_kepem ilikan` varchar( 3) collat e lat in1_general_ci NOT NULL, ` t anggal_m ulai` dat e NOT NULL,

` t anggal_berakhir` dat e NOT NULL,

` gam baru` varchar( 100) collat e lat in1_general_ci default NULL, ` gam bar1` varchar( 100) collat e lat in1_general_ci default NULL, ` gam bar2` varchar( 100) collat e lat in1_general_ci default NULL, ` gam bar3` varchar( 100) collat e lat in1_general_ci default NULL, ` gam bar4` varchar( 100) collat e lat in1_general_ci default NULL, ` gam bar5` varchar( 100) collat e lat in1_general_ci default NULL, PRI MARY KEY ( ` kode_propert i` )

)

CREATE TABLE ` lokasi` (

` kode_lokasi` int ( 4) NOT NULL aut o_increm ent ,

` nam a_lokasi` varchar( 15) collat e lat in1_general_ci NOT NULL, PRI MARY KEY ( ` kode_lokasi` )

)

d. Tabel jenis_properti, tabel dibuat dengan sintak SQL sebagai berikut:

CREATE TABLE ` j enis_propert i` (

` kode_j enis_propert i` int ( 4) NOT NULL aut o_increm ent ,

` nam a_j enis_propert i` var char( 15) collat e lat in1_gener al_ci NOT NULL, PRI MARY KEY ( ` kode_j enis_propert i` )

)

e. Tabel administrator, tabel dibuat dengan sintak SQL sebagai berikut:

CREATE TABLE ` adm inist rat or` (

` usernam e` varchar( 20) collat e lat in1_general_ci NOT NULL, ` password` varchar( 20) collat e lat in1_general_ci NOT NULL, PRI MARY KEY ( ` user nam e` )

)

Hasil terakhir database properti_db menggunakan MySQL dapat dilihat pada gambar 4.1.

Dalam dokumen SKRIPSI Diajukan untuk Memenuhi Salah Satu Syarat Memperoleh Gelar Sarjana Teknik Program Studi Teknik Informatika (Halaman 67-82)