dengan menggunakan alat-alat pengembangan sistem. Alat tcrsebut biasa disebut

4.1 Metode Perancangan Sistem

Metode perancangan sistem informasi ini menggunakan metode aliran data dengan menggunakan alat-alat pengembangan sistem. Alat tcrsebut biasa disebut dengan dataflow diagram (DFD).

4.2 Desain sistem Informasi

Di dalam proses desain sistem informasi disajikan dalam benluk logical model. Logical model sistem informasi akan digambarkan dengan menggunakan dataflow diagram (DFD).

4.2.1 Data Flow Diagram

Desain ini dimulai dari bentuk yang paling global yaitu diagram konteks setiap sistem, kemudian diagram konteks ini diturunkan sampai bentuk yang

paling detail.

Pada Sistem Informasi Pemilihan Model Rumah aliran data bersumber

tipe, luas tanah, perkiraan biaya, video dan image files sehingga terbentuklah data

rumah setelah diproses. Dan user akan mendapatkan beberapa data rumah sesuai dengan input yang dia masukan berdasar tipe, luas tanah ataupun perkiraan biaya yang dia punya.

17

yang nantinya akan digunakan oleh userweb. Berikut ini adalah diagram konteks sistem informasi pemilihan model rumah :

-- Input Data Rumah ——>•/

/ 0 SISTEM

ADMIN ^{i i}

i,

INFORMAS PEMILIHAN

* ^MODEL

RUMAH

view Data Rumah,

view profile user, r~ ~~~1_

view data penawaran

Input data profile, input penawaran rumah

View Data Rumah.

View Data Penawaran

USER

Gambar 4.1 Konteks diagram sistem informasipemilihan model rumah.

DFD Level 1 Sistem Informasi Pemilihan Model Rumah Berbasis Web

Diagram arus data level 1 sistem informasi pemilihan model rumah berbasis web terdiri dari delapan proses yaitu : yaitu proses login, proses manajemen web, proses input data, proses edit data, proses hapus data rumah.

proses cari data, proses autodelete, dan proses sign up. Aliran data yang mengalir pada diagram ini adalah semua data baik itu data di sistem admin, maupun data sistem user, dan sistem autodelete. Diagram arus data level 1 sistem dapat dilihat pada gambar 4.2.

tbUserAdmm

i

Iblmaga

tbUserWeb ^ 1

tb Profile

tbPenawaran

1

Datafakiumal Data Irniige

Dala Image i

Dala [i

11

Data us dn'.apen

3 Proses Input Data

password i

t

1 Proses

Login

7 Proses Aulo Delete

T USER

4 Proses Fdil Dal a

Profile use

1 i

Proses Sign Up

2 Proses Manaiemen

Web

s Proses Hapus Data

i

e Proses View Data

Gambar 4.2 DFD level I Sistem Informasi Pemilihan Model Rumah berbasis Web

1. DFD Level 2 Proses Login

Pada diagram arus data level 2 proses login aliran data yang mengalir pada adalah data useradmin dan userweb. Diagram arus data level 2 proses login dapat dilihat pada gambar 4.3.

Usem-imff.

Password i

¥ Uscnan»e.

Password Data Cerwar

¥

¥ IbUseiArlrnin

^ Data Purl

tbUserWeb 1

_^ dsenwne.

Password

1.1

Proses Username

Login " h'"5v'wa

Admin

Validasi

•- Uaername.

Pi55"urJ

IA ^AkSBS

" Use.

¥ Valid as> peiica ••

Dai a UserWeb Dal a Penflwaran i

UStR 1

¥

¥ Oat a Rumah.

iJala Image

*• tbRomah

*- Iblmage 1

*- tbProfilc ~a A

Gambar 4.3 DFD level 2 proses login

2. DFD Level 2 Proses Manajemen Web

Pada diagram arus data level 2 proses manajemen web aliran data yang mengalir pada adalah data userweb, data profile, dan data penawaran. Diagram arus data level 2 proses manajemen web dapat dilihat pada gambar 4.4.

UaerWab pro'ile

f

LlyrWeh profile

ADMIN 1

Uala Penawaran

Ru.ish

Dal a Perwaran

R urn all

¥ 2.1

View -*

UserWeb

¥

2.2 Hapus UserWeb

A

¥

2.3 View Penawaran

¥

2.4 Hapus Penawaran

»- .tbUserWeb - .

¥ ¥ tbPenawaran

¥ lb Profile

Gambar 4.4 DFD level 2 proses manajemen web

3. DFD Level 2 Proses Input Data

Pada diagram arus data level 2 proses input data aliran data yang mengalir pada adalah data rumah, data image dan data penawaran. Diagram arus data level 2 proses input data dapat dilihat pada gambar 4.5.

ADMIN

USER

/ 3.1 \

I Input

\ Data /'

\ Rumah /

Username, password

/ 3.2 s

/ Input ' Data

\ Penawaran,

Tipe, luas tanah,

biaya

Image files

J

Tipe, luas tanah, biaya, contact,

image files

Gambar 4.5 DFD level 2 input data

tbRumah

tblmage

tbPenawaran

4. DFD Level 2 Proses Edit Data

Pada diagram arus data level 2 proses edit data aliran data yang mengalir

pada adalah data rumah, data image, data penawaran dan data profile. Diagram

arus data level 2 proses edit data dapat dilihat pada gambar 4.6.

ADMIN

USER LOGIN

4.1 Edit Data Rumah

T Usemame.

password i

4.2 Edit Data Penawaran

4.3 Edit Profile User

Tips, luas tanah,

biaya

Image files

Tipe, luas tanah, biaya, contact,

image files

Mama, Alamat, Pekerjaan, Sex, E-mail.

Conlaci, Usemame,

Password

Gambar 4.6 DFD level 2 proses edit data

tbRumah

tblmage

tbPenawaran

tbProfile

5. DFD Level 2 Proses Hapus Data

Pada diagram arus data level 2 proses hapus data aliran data yang mengalir

pada adalah data rumah, data image, dan data penawaran. Diagram arus data level

2 proses hapus data dapat dilihat pada gambar 4.7.

ADMIN

USER

5.1 Hapus

Data Rumah

f Usemame,

password i

Tipe.

luas lanah, biaya

Image tiles

i

5.2 Tipe,

Hapus luas tanah.

** biaya, contact,

Data

Penawaran image files

tbRumah

tblmage

tbPenawaran

Gambar 4.7 DFD level 2 proses hapus data

6. DFD Level 2 Proses View Data

Pada diagram arus data level 2 proses view data aliran data yang mengalir pada adalah data rumah, data image, dan data penawaran. Diagram arus data level 2 proses view data dapat dilihat pada gambar 4.8.

ADMIN

i i

biaya.

image files

5.1 View Data Rumah

Tipe.

as tanah, biaya

- 6.2 ' ^Tipe.

. , - ^ uas tanah

View

- 4 ^.lnayH. i;imlai

Dala image files

Penawaran

tblmage

tbPenawaran

Gambar 4.8 DFD level 2 proses view data

7. DFD Level 2 Proses AutoDelete

Pada diagram arus data level 2 proses autodelete data aliran data yang

mengalir pada adalah data penawaran. Diagram arus data level 2 proses autodelete

data dapat dilihat pada gambar 4.9.

ADMIN

7,1 AutoDelete

f Usemame,

password

Tipe, luas tanah, biaya. contact.

note, image files

tbRumah

Gambar 4.9 DFD level 2 proses autodelete

5. DFD Level 2 Proses Sign Up

Pada diagram arus data level 2 proses sign up data aliran data yang

mengalir pada adalah data userweb dan data profile. Diagram arus data level 2

proses sign up data dapat dilihat pada gambar 4.10.

USER 8.1

Sign Up

Usemame, Password

Usemame.

Nama, Alamal, Sex. E-Mail,

Pekerjaan

Gambar 4.10 DFD level 2 proses sign up

tbUserWeb

tbProfile

4.3 Relasi Antar Tabel

Sistem Informasi Pemilihan Model Rumah Berbasis Web melibatkan

sistem admin dan sistem user. Relasi antar tabel sistem yaitu sebagai berikut:

?

UserA Rumah

• >^. Kode Rumah

« Tipe

Luas Tanah Biaya Tingkat Note User"

Password

* * *

Image

Kode Rumah 'Image

UserW DenaM

MJserW* i*< : Denah2

'Password

T

Penawaran

••Kode Rumah *

f Tipe

Profile LuasTanah

Biaya

User* -* Tingkat

Nama Note

Alamat MJser"

Sex Pekerjaan Email

Contact Image Tgl_Masuk Expiry

Gambar 4.11 Relasi Antar Tabel Sistem

ICcterangan :

* : primary key (kunci utama)

** :foreign key (kunci asing)

* * : hubungan one to one

: hubungan one to many : hubungan many to many

++•

A* •*•

4.4 Desain Basis Data

Basis data merupakan salah satu komponen yang penting pada sistem

informasi, karena bcrfungsi sebagai basis data penyedia informasi bagi para

pcmakainya. Desain basis data terdiri dari Sistem Admin dan Sistem Use

ser

4.4.1 Desain Basis Data Pada Sistem Admin

I. Tabel User

Tabel User berisi tentang data admin user. Elemen Tabel User seperti gambar

4.12.

Field Type Key Default User varchar(15) PRI

Password varchar(IO)

Gambar 4.12 Tabel user

2. Tabel Rumah

Tabel Rumah berisi tentang data tipe, luas tanah, biaya dan kelerangan model

rumah. Elemen Tabel Rumah seperti gambar 4.13.

Field Type Key Default KdRumah varchar(12) PRI

Tipe Int(8) LTanah Int(lO)

Biaya varchar(20) J

Tingkat char(2) 0

Note longtext 0

Gambar 4.13 Tabel rumah

3. Tabel Image

Tabel Image berisi tentang data movie dan image files model rumah. Elemen

Tabel Image seperti gambar 4.14.

Field Type Key Default KdRumah varchar(12) PRI

Image text

[Denah 1 text

|Denah2 text 0

Gambar 4.14 Tabel image

4.4.2 Desain Basis Data Pada Sistem User

1. Tabel UserWeh

Tabel UserWeb berisi tentang data user yang nantinya akan mengakses dan melakukan segala macam operasi di web. Elemen Tabel UserWeb seperti gambar

4.15.

Field Type Key Default

User varchar(15) PRI | Password varchar(lO) |

Gambar 4.15 Tabel userWeb

2. Tabel Profile

Tabel Profile berisi tentang data profile dari user web. Elemen Tabel Profile

seperti gambar 4.16.

Field Type Key Default

User varchar(15) PRI

Nama varchar(30)

AI am at varchar(35)

Sex varchar( 10) Pekerjaan Varchar(20)

Email Varchar{20) 0

- — —

Gambar 4.16 Tabel profile

3. Tabel Penawaran

Tabel Penawaran berisi tentang data rumah siap pakai yang ditawarkan oleh para

user. Elemen Tabel Penawaran seperti gambar 4.17.

Field Type Key Default KdRumah warchar( 12) PRI|

Tipe Int(S)

J J

I/Tanah Int(10)

~I

Biaya varchar(20)

Tingkat char(2) 0

Note |longtext •^zn

Image ~||tcxt

Denah 1 text Denah2 text

o

User varchar(15) Contact Varchar(15) Image Varchar(30)

||

Tgl Masuk Date

J|

Expiry Date

Gambar 4.17 Tabel penawaran

4.5 Rancangan Antar Muka Masukan

4.5.1 Rancangan Antar Muka Masukan Sistem Admin

1. Rancangan interface form login

Form Login

User Pass^vord

Login

r" J

— -

Exit

Gambar 4.18 Rancangan interface form login

2. Rancangan interface form input data rumah

Form Input Data Rumah Luas Bangunan • I"v Movie/Image

Luas Tanah |v

Biaya Iv

Tingkat _Tidak

Ya

Kode Rumah T

Note

L R

Denah

; li 1 ;

LI 2

Save Cancel

Gambar 4.19 Rancangan interface form input data rumah

3. Rancangan interface form edit data rumah

a. Berdasar Kode

Form Edit Data Rumah Masukan Kode T L R Movie/Image

Luas Bangunan 1v

Luas Tanah 1v

Biaya 1v

Tingkat _Tidak

Ya

Note Denah

Lt 1

Kode Bam T L R

Lt 2

Save New Refresh Fxit

Gambar 4.20 Rancangan interface form edit data rumah berdasar kode

b. Berdasar Pipe atau Luas Tanah

Form Edit Data Rumah Kode Rumah

Movie/Image

Luas Bangunan N

Luas Tanah Iv

Biaya W

Tingkat _Tidak

Ya

Note Denah

Lt. 1

Kode Baru T L R

Lt. 2

Save New

Cancel

Gambar 4.21 Rancangan interfaceform edit data rumah berdasar tipt

4. Rancangan interfaceform view data rumah

a. Berdasar Kode

Form View Data Rumah

Masukan Kode T L R Movie/Image

Luas Bangunan 1v

Luas Tanah [v

Biaya 1v

Tingkat _Tidak

Ya ^•

Note Denah

Lt. 1

Kode Baru T Edit

Refresh

Exit

L R

Lt 2

Gambar 4.22 Rancangan interface form view data rumah berdasar kode

b. Berdasar Tipe atau Luas Tanah

Form View Data Rumah

Masukan Tipe ^{V GO}

KiIRumah ripe LTanall a

Note

Tingkat Tidak

Ya

Edit Refresh Exit

Movie/Image

Denah

Lt. 1

Lt. 2

Gambar 4.23 Rancangan interfaceform view data rumah berdasar tipe

5. Rancangan interface form hapus data rumah

a. Berdasar Kode

Form Hapus Data Rumah

Masukan Kode T L R Movie/image

Luas Bangunan ^V

Luas Tanah ^V

Biaya V

Tingkat _Tidah

Ya

Note Denah

Lt. 1

Lt. 2 Hapus

Refresh

Exit

Gambar 4.24 Rancangan interface form hapus data rumah berdasar kode

b. Berdasar Tipe atau Luas Tanah

Form Hapus Data Rumah

Masukan Tipe ^{V GO}

KdRurridli Tide Usual! B|iy

Note

Tingkat Tidak Ya

Hapus Refresh Exit

Movie/Image

Denah

Lt. 1

Lt. 2

Gambar 4.25 Rancangan interface form hapus data rumah berdasar tipe

6. Rancangan interface form ganti kode rumah

Form Ganti Kode Rumah

Kode Lama

Kode Baru

TflLinR,

Save New

Refresh

Exit

Gambar 4.26 Rancangan interface form ganti kode

7. Rancangan interface form ganti password

Form Ganti Password

Old Password New Password

Verify Password

OK Cancel

Gambar 4.27Rancangan interface form ganti password

4.5.2 Rancangan Antar Muka Masukan Sistem User 1. Rancangan interface form home

Gambar 4.28 Rancangan interface form home

2. Rancangan interface sign up new user

Form Sign Up New User

Address —*- Go

i Nama Ala mat

PtVerjaan

Email

User

Password

R«iyue Pasword

sign up reset

Gambar 4.29 Rancangan interface form sign up new user

3. Rancangan interfaceform editprofile

Form Edit Profile

Alarnal

Pfllt»r|aan

Gambar 4.30 Rancangan interface form edit profile

4. Rancangan interface form search data rumah

Form Search Data Rumah

Address

Tipe

Luas Tanah

Biaya

ar Image Pc

Go

Gambar 4.31 Rancangan interface form search data rumah

5. Rancangan interface form search data penawaran rumah

Form Search Data Penawaran Rumah

Address

Tipe

Luas Tanah

Biaya

Go

Gambar 4.32 Rancangan interface form data penawaran

6. Rancangan interface, form input data penawaran

Form Input Data Penawaran Rumah

Tipe

I Tanah

liraya

Slalus nago / trdali

Note

Gambar 4.33 Rancangan interface input datapenawaran rumah

7. Rancangan interface form edit data penawaran rumah

Form Edit Data Penawaran Rumah

Tipt?

LTanaJ>

B-aya

Status rleycWtidak

NdIb

Contact fersnn

Gambar 4.34 Rancangan interface form edit datapenawaran rumah

8. Rancangan interface hapus data penawaran rumah

Form Hapus Data Penawaran Rumah

Address |_. _ . ;r~H nn

Trpe i |

LTanari i 1

Biaya | |

Status L... 1

Note

Contact

Person 1 ~~1

edit data mman

Gambar 4.35 Rancangan interface form hapus datapenawaran rumah