WEBSITE PROPERTI PERUMAHAN DENGAN MENGGUNAKAN PHP DAN MYSQL STUDI KASUS DI PERUMAHAN AYODHYA CITRA YOGYAKARTA SKRIPSI Diajukan Untuk Memenuhi Syarat Memperoleh Gelar Sarjana Teknik Program Studi Teknik Informatika

(1)

WEBSITE PROPERTI PERUMAHAN DENGAN MENGGUNAKAN PHP DAN MYSQL

STUDI KASUS DI PERUMAHAN AYODHYA CITRA YOGYAKARTA

SKRIPSI

Diajukan Untuk Memenuhi Syarat Memperoleh Gelar Sarjana Teknik Program Studi Teknik Informatika

Oleh :

AGNES PUTRI TANTYA PRAMUDITA NIM : 055314028

JURUSAN TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS SANATA DHARMA YOGYAKARTA

(2)

A THESIS

Presented as Partial Fulfillment of the Requirements to Obtain Sarjana Teknik Degree in Informatics Engineering Department

By :

Agnes Putri Tantya Pramudita 055314028

INFORMATICS ENGINEERING STUDY PROGRAM INFORMATICS ENGINEERING DEPARTMENT

FACULTY OF SCIENCE AND TECHNOLOGY SANATA DHARMA UNIVERSITY

(3)

(4)

(5)

HALAMAN MOTTO

Pengharapan itu …

Bukan berarti pasrah kepada keadaan,

Bukan berarti berhenti berjuang,

Bukan berarti nyaman berpangku tangan.

Pengharapan itu adalah ...

Kepercayaan dan keyakinan di tengah perjuangan,

Percaya bahwa mata Tuhan memperhatikan,

Percaya bahwa hati Tuhan ikut merasakan dan tangan Tuhan akan membuka

jalan.

Pengharapan itu ...

Adalah iman, bahwa Tuhan membuat keajaiban lebih sering dari yang kita

harapkan.

” Kasih sayang tidak akan mengambil bentuknya yang utuh sebagai kasih sayang

jika ia hanya diperam sebagai perasaan atau niat di dalam hati.

Kasih sayang adalah pemberian, meskipun tidak semua pemberian adalah kasih

sayang. ”

(Mario Teguh)

(6)

Ku minta Tuhan setangkai bunga segar,

Ia beri kaktus jelek dan berduri…

Kuminta kupu-kupu, diberi-Nya ulat…

Aku kecewa dan sedih...

Beberapa hari kemudian...

Kaktus itu berbunga, indah sekali...

Ulat itu berubah menjadi kupu-kupu yang cantik...

Itulah jalan Tuhan...

Selalu indah pada waktunya...

Kupersembahkan karya kecilku untuk :

Papa (Alm.) dan Mama tercinta,

Adik-adikku, Pandu dan Ayu tersayang,

”Uyung-ku”, Robertus Heru Wiranto terkasih,

Semua Sahabat dan orang-orang yang aku sayangi.

(7)

INTISARI

Dalam upaya pemenuhan akan kebutuhan tempat tinggal, sering kali konsumen datang kepada pengembang perumahan untuk memilih rumah yang sesuai dengan keinginan sehingga diperlukan waktu khusus untuk melakukannya. Banyaknya pengembang yang menawarkan jasa pembangunan rumah mengakibatkan persaingan di bidang properti ini semakin ketat. Maka pengembang perlu melakukan inovasi dalam hal pemasaran produknya, tidak hanya sebatas pada penyebaran brosur atau pemasangan iklan di koran atau majalah. Untuk mengatasi permasalahan tersebut, maka penulis membangun sebuah website properti yang dapat memberikan visualisasi nyata kepada konsumen, khususnya melalui penggunaan komponen multimedia berupa foto dan video sehingga konsumen tidak perlu datang ke perumahan secara langsung.

Website properti ini dibangun dengan menggunakan bahasa pemrograman PHP dan database MySQL. Dalam pengembangan sistem, penulis menerapkan tahapan-tahapan rekayasa perangkat lunak terstruktur yang meliputi analisa, desain, implementasi dan pengujian sistem. Data-data yang digunakan dalam pengembangan website properti ini diperoleh dari hasil wawancara dengan pihak RumahJogja.com dan mengambil contoh data perumahan Ayodhya Citra.

(8)

come to housing developers to choose the house in accordance with the desire so that need special time to do it. A lot of developers who offer housing services in the field of property resulting competition is getting tight. So, developers need to innovate in terms of marketing their products, not only in distribution of brochures or advertising in newspapers or magazines. To overcome these problems, the authors build a property website that can provide real visualization to consumers, especially through the use of multimedia components in the form of photos and video so that consumers do not need to come to the housing directly.

This housing property website is built by using PHP programming language and MySQL database. In developing the system, the authors apply the stages of a structured software engineering including analysis, design, implementation and testing of the system. The data used in the development of this property website is obtained from interviews with staff of RumahJogja.com and take samples of Ayodhya Citra housing data.

(9)

KATA PENGANTAR

Puji dan syukur kepada Tuhan Yesus Kristus atas pertolongan dan kasih setia-Nya, sehingga penulis dapat menyelesaikan skripsi ini dengan baik. Penyusunan skripsi ini merupakan salah satu syarat bagi mahasiswa Jurusan Teknik Informatika untuk memperoleh gelar Sarjana Teknik di Fakultas Sains dan Teknologi, Universitas Sanata Dharma, Yogyakarta.

Pelaksanaan dan penyusunan skripsi ini dapat diselesaikan dengan baik atas bantuan, gagasan dan dukungan dari berbagai pihak. Oleh karena itu, dengan segala kerendahan hati penulis ingin mengucapkan terima kasih kepada :

1. Ibu Agnes Maria Polina, S.Kom., M.Sc., selaku dosen pembimbing, atas kesabaran, pengarahan, dan saran yang diberikan kepada penulis selama penyusunan skripsi ini.

2. Bapak Stevanus Wisnu Wijaya, S.T., M.T. dan bapak Iwan Binanto M. Cs. selaku dosen penguji, atas kritik dan saran yang membangun dalam perbaikan skripsi ini.

3. Bapak Yosef Agung Cahyanta, S.T., M.T., selaku dekan Fakultas Sains dan Teknologi Universitas Sanata Dharma.

4. Bapak Puspaningtyas Sanjoyo Adi, S.T., M.T., selaku ketua program studi Teknik Informatika Universitas Sanata Dharma.

5. Dosen-dosen Teknik Informatika Universitas Sanata Dharma. Terima kasih atas ilmu yang telah diajarkan selama ini.

6. Segenap staff RumahJogja.com, khususnya Mas Wahyu dan Mas Ferry, atas bantuannya dalam pengambilan data-data perumahan.

7. Papa (Alm.) dan Mama tercinta, atas kasih sayang, doa, serta dukungannya sehingga penulis bisa menjadi seperti sekarang ini.

(10)

10. Teman-temanku TI’05, khususnya untuk sahabat-sahabatku, Maya, Endah, Riska, Kristi, Anas, Sinyo, Sicho, Tessa, Vero, Nino, atas persahabatan yang telah kalian berikan.

11. Teman-teman kos ”VIKE” : Mena, Aster, Esti, Titik, Anna, Jeanet, Novi, Lulu, Jesika, atas semua dukungan dan semangat yang kalian berikan selama penulis mengerjakan skripsi ini.

12. Teman seperjuanganku, F.X. Novi Christian Adi Putra, untuk semangat dan bantuannya selama penulis menyelesaikan skripsi ini.

13. Teman-teman mitra perpustakaan Universitas Sanata Dharma, mba Prima, mba Evi, mba Dwi, Dima, Iray, Sanja, Ismaya, Matil, Maya, Nino, Vero, Birgit, Nori, Titik, Nur, Rohna, Riana, Lingga, untuk dukungan dan semangat yang telah kalian berikan, serta kesetiaan mendengarkan keluh kesah penulis. 14. Semua pihak yang tidak bisa penulis sebutkan satu per satu, yang telah memberikan bantuan, bimbingan, kritik dan saran dalam penyusunan skripsi ini.

Dengan segala kerendahan hati, penulis menyadari bahwa skripsi ini masih jauh dari sempurna. Oleh karena itu, penulis mengharapkan kritik dan saran yang dapat membangun serta menyempurnakan skripsi ini. Semoga skripsi ini dapat dimanfaatkan dan dikembangkan lebih lanjut sehingga skripsi ini dapat lebih bermanfaat.

Yogyakarta, September 2010 Penulis

(11)

PERNYATAAN KEASLIAN KARYA

Saya menyatakan dengan sesungguhnya bahwa Tugas Akhir yang saya tulis ini tidak memuat karya atau bagian karya orang lain, kecuali yang telah disebutkan dalam kutipan daftar pustaka, sebagaimana layaknya karya ilmiah.

Yogyakarta, September 2010 Penulis

(12)

Yang bertanda tangan di bawah ini, saya mahasiswa Universitas Sanata Dharma: Nama : Agnes Putri Tantya Pramudita

Nomor Mahasiswa : 055314028

Demi pengembangan ilmu pengetahuan, saya memberikan kepada Perpustakaan Universitas Sanata Dharma karya ilmiah saya yang berjudul :

“ WEBSITE PROPERTI PERUMAHAN DENGAN MENGGUNAKAN PHP DAN MYSQL

STUDI KASUS DI PERUMAHAN AYODHYA CITRA YOGYAKARTA ”

Beserta perangkat yang diperlukan (bila ada). Dengan demikian saya memberikan kepada Perpustakaan Universitas Sanata Dharma hak untuk menyimpan, mengalihkan dalam bentuk media lain, mengelolanya dalam bentuk pangkalan data, mendistribusikan secara terbatas, dan mempublikasikannya di internet maupun di media lain untuk kepentingan akademis tanpa perlu meminta ijin dari saya maupun memberikan royalti kepada saya selama tetap mencantumkan nama saya sebagai penulis.

Demikian pernyataan ini yang saya buat dengan sebenarnya. Dibuat di Yogyakarta

Pada tanggal : 21 September 2010 Yang menyatakan

(13)

DAFTAR ISI

HALAMAN SAMPUL (BAHASA INDONESIA) ... i

HALAMAN SAMPUL (BAHASA INGGRIS) ... ii

HALAMAN PERSETUJUAN PEMBIMBING ... iii

HALAMAN PENGESAHAN ... iv

PERNYATAAN KEASLIAN KARYA ... xi

PERNYATAAN PERSETUJUAN PUBLIKASI ... xii

(14)

2.1.3. Kriteria Pengembangan Web ... 14

2.2. Metodologi Rekayasa Perangkat Lunak Terstruktur ... 17

2.2.1. Use Case Diagram ... 18

BAB III. ANALISA DAN PERANCANGAN SISTEM ... 30

(15)

3.2. Desain Sistem ... 47

3.2.1. Desain Database ... 47

3.2.1.1. Logical Design ... 47

3.2.1.2. Physical Design ... 48

3.2.2. DesainAntarmuka (Graphical User Interface) ... 56

3.2.2.1. DesainAntarmuka User ... 56

4.3.2. Implementasi Antarmuka Sisi Administrator ... 122

4.3.3. Implementasi Prinsip Perancangan Antarmuka ... 158

BAB V. ANALISA HASIL ... 161

(16)

DAFTAR PUSTAKA ... 179 LAMPIRAN

A. KUESIONER USER

B. KUESIONER ADMINISTRATOR

(17)

DAFTAR GAMBAR

Gambar 2.1. Mekanisme Pemanggilan Aplikasi Web Bertipe HTML ... 10

Gambar 2.2. Mekanisme Pemanggilan Aplikasi Web Bertipe PHP ... 11

Gambar 3.1. Use Case Diagram User ... 32

Gambar 3.2. Use Case Diagram Administrator ... 34

Gambar 3.3. Diagram Konteks ... 38

Gambar 3.4. Diagram Berjenjang Subsistem User ... 40

Gambar 3.5. Diagram Berjenjang Subsistem Administrator ... 41

Gambar 3.6. DFD Level 0 Subsistem User... 42

Gambar 3.7. DFD Level 0 Subsistem Administrator ... 43

Gambar 3.8. DFD Level 1 Subsistem Administrator ... 44

Gambar 3.9. Entity Relationship Diagram ... 46

Gambar 3.10. Relasi Antar Tabel ... 47

Gambar 3.11. Desain Halaman ”Beranda” ... 56

Gambar 3.12. Desain Halaman ”Fasilitas Perumahan” ... 57

Gambar 3.13. Desain Halaman ”Pencarian Sederhana” ... 58

Gambar 3.14. Desain Halaman ”Pencarian Multi Kategori” ... 59

Gambar 3.15. Desain Halaman ”Hasil Pencarian Rumah” ... 60

Gambar 3.16. Desain Halaman ”Detail Data Rumah” ... 61

Gambar 3.17. Desain Halaman ”Lihat Foto Rumah” ... 62

Gambar 3.18. Desain Halaman ”Lihat Video Rumah” ... 63

Gambar 3.19. Desain Halaman ”Tipe Rumah & Harga” ... 64

Gambar 3.20. Desain Halaman ”Tips Properti” ... 65

Gambar 3.21. Desain Halaman ”Detail Tips Properti” ... 66

Gambar 3.22. Desain Halaman ”Peta” ... 67

Gambar 3.23. Desain Halaman ”Buku Tamu” ... 68

Gambar 3.24. Desain Halaman ”Lihat Buku Tamu” ... 69

Gambar 3.25. Desain Halaman ”Login” ... 70

(18)

Gambar 3.30. Desain Halaman ”Tambah Fasilitas Perumahan” ... 73

Gambar 3.31. Desain Halaman ”Ubah Fasilitas Perumahan” ... 73

Gambar 3.32. Desain Halaman ”Tambah Spesifikasi Teknis” ... 74

Gambar 3.33. Desain Halaman ”Ubah Spesifikasi Teknis” ... 75

Gambar 3.34. Desain Halaman ”Tambah Data Rumah” ... 76

Gambar 3.35. Desain Halaman ”Ubah Data Rumah” ... 76

Gambar 3.36. Desain Halaman ”Tambah Foto Rumah” ... 77

Gambar 3.37. Desain Halaman ”Ubah Foto Rumah” ... 77

Gambar 3.38. Desain Halaman ”Tambah Video Rumah” ... 78

Gambar 3.39. Desain Halaman ”Ubah Video Rumah” ... 78

Gambar 3.40. Desain Halaman ”Tambah Tips Properti” ... 79

Gambar 3.41. Desain Halaman ”Ubah Tips Properti” ... 70

Gambar 3.42. Desain Halaman ”Tambah Pengguna” ... 80

Gambar 3.43. Desain Halaman ”Ubah Pengguna” ... 80

Gambar 3.44. Desain Halaman ”Tambah Banner” ... 81

Gambar 3.45. Desain Halaman ”Ubah Banner” ... 81

Gambar 3.46. Desain Halaman ”Tambah Peta” ... 82

Gambar 3.47. Desain Halaman ”Ubah Peta” ... 82

Gambar 3.48. Desain Halaman ”Hapus Buku Tamu” ... 83

Gambar 4.1. Implementasi Pembuatan Database ... 85

Gambar 4.2. Implementasi Tabel Admin ... 86

Gambar 4.3. Implementasi Tabel Banner ... 87

Gambar 4.4. Implementasi Tabel Buku Tamu ... 88

Gambar 4.5. Implementasi Tabel Peta ... 88

Gambar 4.6. Implementasi Tabel Profil ... 89

Gambar 4.7. Implementasi Tabel Rumah ... 90

Gambar 4.8. Implementasi Tabel Video ... 91

(19)

Gambar 4.10. Implementasi Tabel Tips ... 93

Gambar 4.11. Implementasi Tabel Fasilitas ... 94

Gambar 4.12. Implementasi Tabel Spesifikasi Teknis... 95

Gambar 4.13. Implementasi Tabel Foto Perumahan ... 96

Gambar 4.14. Implementasi Halaman Beranda ... 98

Gambar 4.15. Implementasi Halaman Fasilitas Perumahan ... 99

Gambar 4.16. Halaman Pencarian Sederhana ... 100

Gambar 4.17. Halaman Pencarian Multi Kategori ... 106

Gambar 4.18. Halaman Hasil Pencarian Rumah ... 113

Gambar 4.19. Halaman Detail Data Rumah ... 114

Gambar 4.20. Halaman Lihat Foto Rumah ... 114

Gambar 4.21. Halaman Lihat Video Rumah ... 115

Gambar 4.22. Halaman Tipe Rumah & Harga ... 116

Gambar 4.23. Halaman Tips Properti ... 117

Gambar 4.24. Halaman Detail Tips Properti ... 117

Gambar 4.25. Halaman Peta ... 118

Gambar 4.26. Halaman Form Buku Tamu ... 119

Gambar 4.27. Halaman Daftar Buku Tamu ... 122

Gambar 4.28. Halaman Login ... 123

Gambar 4.29. Halaman Utama Administrator ... 126

Gambar 4.30. Halaman Ubah Profil Perumahan ... 127

Gambar 4.31. Halaman Tambah Foto Perumahan ... 130

Gambar 4.32. Halaman Ubah Foto Perumahan ... 133

Gambar 4.33. Halaman Tambah Fasilitas Perumahan ... 135

Gambar 4.34. Halaman Ubah Fasilitas Perumahan ... 137

Gambar 4.35. Halaman Tambah Spesifikasi Teknis ... 138

Gambar 4.36. Halaman Ubah Spesifikasi Teknis ... 139

Gambar 4.37. Halaman Tambah Data Rumah ... 140

Gambar 4.38. Halaman Ubah Data Rumah ... 141

Gambar 4.39. Halaman Tambah Foto Rumah ... 141

(20)

Gambar 4.44. Halaman Ubah Tips Properti ... 148

Gambar 4.45. Halaman Tambah Pengguna ... 149

Gambar 4.46. Halaman Ubah Pengguna ... 152

Gambar 4.47. Halaman Tambah Banner ... 154

Gambar 4.48. Halaman Ubah Banner ... 155

Gambar 4.49. Halaman Tambah Peta ... 156

Gambar 4.50. Halaman Ubah Peta ... 156

Gambar 4.51. Halaman Buku Tamu ... 157

Gambar 4.52. Halaman Konfirmasi Hapus Data ... 157

Gambar 5.1. Form Kuesioner User ... 164

Gambar 5.2. Form Kuesioner Administrator ... 165

Gambar 5.3. Diagram Perhitungan Hasil Kuesioner Pernyataan 1 ... 166

(21)

DAFTAR TABEL

Tabel 2.1. Notasi Use Case Diagram ... 18

Tabel 2.2. Notasi Data Flow Diagram ... 19

Tabel 2.3. Notasi Entity Relationship Diagram ... 21

Tabel 3.1. Tabel Admin ... 48

Tabel 3.10. Tabel Spesifikasi Teknis ... 53

Tabel 3.11. Tabel Tips ... 55

Tabel 3.12. Tabel Video ... 55

Tabel 5.1. Tabel Perhitungan Hasil Kuesioner Pernyataan 1 ... 166

(22)

(23)

(24)

1.1 Latar Belakang

Salah satu kebutuhan mendasar bagi setiap manusia adalah kebutuhan akan

rumah sebagai tempat tinggal. Dalam upaya pemenuhan kebutuhan akan tempat

tinggal inilah, sering kali seseorang datang kepada pengembang (developer) perumahan untuk memilih rumah yang sesuai dengan keinginan.

Banyaknya pengembang yang menawarkan jasa pembangunan rumah

mengakibatkan persaingan di bidang properti ini semakin ketat. Di dalam dunia

bisnis properti yang penuh dengan persaingan ini, membuat para pengembang

harus selalu memikirkan strategi-strategi terobosan baru yang dapat menjamin

kelangsungan bisnis yang sedang dilakukan saat ini. Para pengembang perlu

melakukan inovasi dalam bidang pemasaran agar konsumen tertarik untuk

membeli produknya.

Selama ini sering kali para pengembang mempromosikan produknya melalui

media brosur, koran, atau pun website, dimana media-media tersebut mempunyai

keterbatasan antara lain yaitu tidak memberikan gambaran nyata tentang produk

yang ditawarkan sehingga para konsumen sulit untuk membayangkan bentuk

produk secara riil karena informasi yang diberikan hanya berupa teks maupun

(25)

2

Pada website yang pernah penulis kunjungi seperti

www.alam-sutera.com, www.amanahproperty.com, www.admiralty.co.id,

www.amerta-residences.com, serta www.arsikon.com, semua website tersebut hanya

menampilkan data rumah secara umum, tidak mendetail. Foto-foto yang

ditampilkan hanya sebatas tampak muka, denah, ataupun dalam bentuk 3D saja.

Sehingga hal ini tentu saja kurang memberikan informasi dan gambaran riil dari

produk rumah yang ditawarkan.

ang perumahan

dapat m

konsumen

en tidak perlu datang ke perumahan secara langsung.

Melihat semakin ketatnya persaingan antar pengembang perumahan inilah,

maka penulis membuat sebuah website yang menyediakan layanan tentang data-data rumah seperti tipe rumah, luas bangunan, luas tanah, jumlah kamar, harga

dan lain sebagainya. Sistem informasi ini memakai komponen multimedia dimana

informasi yang ingin disampaikan oleh perusahaan atau pengemb

enjadi lebih menarik melalui multimedia yang interaktif.

Dalam sistem ini, penulis akan menggunakan komponen multimedia yang

berupa teks, gambar, dan video. Penulis berharap website ini dapat memberikan

visualisasi nyata kepada konsumen terhadap produk rumah yang ditawarkan oleh

pengembang perumahan melalui penggunaan komponen multimedia, khususnya

melalui foto dan tayangan video yang tidak hanya menampilkan bagian luar

rumah tetapi juga bagian dalam rumah. Hal ini tentu saja memudahkan

(26)

1.2 Rumusan Masalah

Berdasarkan latar belakang yang telah dipaparkan, didapatkan suatu

rumusan masalah yaitu bagaimana membangun sebuah website properti

perumahan dengan menggunakan bahasa pemrograman PHP dan basis data

MySQL yang memiliki fasilitas untuk menampilkan informasi tentang

karakteristik rumah berupa teks, foto dan video yang dapat membantu

pengembang perumahan dalam mempromosikan produknya serta mempermudah

konsumen dalam mencari rumah.

1.3 Tujuan dan Manfaat

Tujuan dibuatnya sistem ini yaitu untuk mengembangkan website properti dengan menggunakan PHP dan MySQL serta komponen multimedia yang dapat

menampilkan informasi produk perumahan yang ditawarkan oleh pengembang

secara visual kepada penggunanya.

Manfaat dari sistem ini yaitu :

• Memberikan fasilitas kepada pengembang dalam mempromosikan

produk-produknya berupa rumah tempat tinggal.

• Memberikan kemudahan bagi para konsumen dalam mencari tipe rumah yang

sesuai dengan keinginan dan kemampuan finansialnya melalui informasi

(27)

4

• Ditampilkan visualisasi rumah melalui video yang dapat dilihat dengan mudah

sehingga para konsumen tidak perlu datang ke lokasi perumahan secara

langsung untuk melihat rumah yang ditawarkan.

1.4 Batasan Masalah

Adapun batasan-batasan masalah yang terdapat dalam pembuatan sistem

informasi ini adalah :

1. Pada sistem informasi ini tidak memberikan fasilitas pemesanan dan

penjualan rumah secara online.

2. Jenis rumah yang ditawarkan hanya rumah untuk tempat tinggal.

3. Produk rumah yang ditawarkan dikhususkan dari satu pengembang saja

dalam suatu perumahan yaitu mengambil studi kasus di perumahan Ayodhya

Citra.

4. Dalam website ini, ekstensi gambar yang dipakai adalah *.jpg, sedangkan

ekstensi video yang dipakai adalah *.flv.

5. Sistem ini tidak menangani penambahan halaman baru.

6. Sistem ini tidak menangani keamanan jaringan.

1.5 Metodologi Penelitian

Metode penelitian yang digunakan dalam pembuatan tugas akhir ini adalah

(28)

a. Studi lapangan

Melakukan wawancara kepada pengembang (developer) perumahan untuk memperoleh data yang konkrit dan lengkap sebagai bahan analisa di dalam

penelitian.

b. Studi literatur

Dengan membaca buku-buku yang mendukung obyek penelitian seperti

buku tentang MySQL, Pemrograman web dengan menggunakan PHP, dan

rekayasa perangkat lunak yang digunakan sebagai referensi untuk

memperoleh kelengkapan informasi yang dibutuhkan.

c. Pengembangan sistem

Menggunakan metode Rekayasa Perangkat Lunak (RPL) secara terstruktur

(Whitten, 2004) yaitu :

1. Analisa Sistem

Pada tahap ini hal yang dilakukan adalah menganalisa permasalahan

yang dihadapi dan kebutuhan dari sistem. Mencari dan mengumpulkan

data-data secara lengkap untuk pembuatan program.

2. Desain Sistem

Pada tahap ini hal yang dilakukan adalah merancang sistem untuk

mempermudah pembuatan coding program, diantaranya yaitu: perancangan basis data, menu, input, output dan user interface.

(29)

6

3. Implementasi

Pada tahap ini membuat program sesuai dengan rancangan.

4. Pengujian

Pada tahap ini dilakukan pengujian program yang telah dibuat.

d. Uji coba kepada user

Melakukan pembagian kuesioner yang digunakan untuk mengetahui tingkat

kepuasan pengguna terhadap sistem yang dikembangkan.

1.6 Sistematika Penulisan

Adapun sistematika penyusunan tugas akhir secara keseluruhan adalah

sebagai berikut :

BAB I. PENDAHULUAN

Dalam bab ini diungkapkan mengenai latar belakang masalah, rumusan

masalah, tujuan, batasan masalah, metodologi penelitian dan sistematika

penulisan.

BAB II. LANDASAN TEORI

Dalam bab ini berisi tentang dasar-dasar teori yang digunakan untuk

(30)

BAB III. ANALISA DAN PERANCANGAN SISTEM

Dalam bab ini berisi tentang rancangan sistem yang akan dibuat.

Menjelaskan mengenai perancangan sisem dalam bentuk diagram alir yang

menyatakan semua proses yang terjadi dalam software yang akan dibuat.

Selain itu dibahas mengenai perancanan masukan dan keluaran sisem,

perancangan antarmuka dan perancangan basis data.

BAB IV. IMPLEMENTASI

Dalam bab ini berisi implementasi yang dilakukan terhadap hasil analisa dan

perancangan yang telah dilakukan pada bab sebelumnya.

BAB V. ANALISA HASIL

Dalam bab ini berisi tentang analisa hasil dan pembahasan terhadap

implementasi dari sistem yang dibangun.

BAB VI. KESIMPULAN DAN SARAN

Dalam bab ini berisi kesimpulan pembahasan dan saran-saran yang berguna

(31)

BAB II

LANDASAN TEORI

2.1 Sistem Informasi Web

World Wide Web (WWW) atau biasa disebut dengan web, merupakan salah satu sumber daya internet yang berkembang pesat. Informasi web

didistribusikan melalui pendekatan hypertext, yang memungkinkan suatu teks pendek menjadi acuan untuk membuka dokumen yang lain. Dengan pendekatan

hypertext ini, seseorang dapat memperoleh informasi dengan meloncat dari suatu dokumen ke dokumen yang lainnya.

2.1.1 Aplikasi Web

Pada awalnya aplikasi web dibangun hanya dengan menggunakan bahasa

yang disebut HTML (HyperText Markup Language) dan protokol yang digunakan dinamakan HTTP (HyperText Transfer Protocol). Pada perkembangan berikutnya, sejumlah skrip dan objek dikembangkan untuk memperluas kemampuan HTML

seperti PHP, ASP, Applet (Java).

Aplikasi web dapat dibagi menjadi 2 yaitu aplikasi web statis dan web

(32)

A. Web Statis

Situs web statis adalah situs web yang dalam menampilkan informasinya

tidak memisahkan antara isi dan presentasi atau secara singkat isinya bersifat

tetap. Web statis dibentuk dengan menggunakan HTML saja. Kekurangan aplikasi

seperti ini terletak pada keharusan untuk memelihara program secara

terus-menerus untuk mengikuti setiap perubahan yang terjadi.

Keuntungan web statis dibanding web dinamis adalah :

• Dapat melakukan hosting situs web dimanapun dengan biaya yang lebih

rendah dibandingkan web dinamis.

• Pada bagian layout dan desain, web statis lebih fleksibel dan dapat dibuat

dengan gaya yang lebih stylist, dan lebih mudah untuk mengganti dari halaman ke halaman.

• Situs web statis tidak memerlukan database untuk menyimpan data seperti

web dinamis yang bekerja dengan melakukan penyimpanan data pada suatu

database.

Gambar 2.1 memperlihatkan mekanisme ketika seorang pemakai meminta

(33)

10

Gambar 2.1 Mekanisme pemanggilan aplikasi web bertipe HTML

Prinsip kerja pengaksesan dokumen web yang berbasis HTML seperti

pada gambar 2.1 adalah sebagai berikut (Kadir, 2009) :

1. Langkah 1 menunjukkan saat pemakai melakukan permintaan terhadap sebuah

halaman web.

2. Langkah 2 menggambarkan sewaktu web server mengambil file.

3. Langkah 3 menunjukkan saat web server mengirimkan kode HTML kepada

pemakai yang meminta.

4. Langkah 4 menggambarkan ketika browser melakukan penerjemahan kode

HTML ke dalam bentuk tampilan pada layar.

B. Web Dinamis

Situs web dinamis adalah situs web yang dalam menampilkan

informasinya memisahkan antara isi dan presentasi, dan isinya bersifat dinamis

(34)

Keuntungan web dinamis dibanding web statis :

• Biaya pemeliharaan lebih murah dibandingkan membayar untuk memprogram

ulang setiap kali membutuhkan perubahan situs web.

• Web dinamis dapat di-update setiap saat dari komputer manapun juga yang

terkoneksi dengan internet, tentunya dengan cara melakukan login ke area

administrasi dengan memasukkan username dan password yang benar.

• Karena data-datanya disimpan pada database maka dapat dilakukan pencarian

data dengan mudah menggunakan search engine.

Gambar 2.2 memperlihatkan mekanisme pemanggilan halaman yang

bersifat dinamis dengan menggunakan PHP.

Gambar 2.2 Mekanisme pemanggilan aplikasi web bertipe PHP

Pada gambar 2.2, setelah web server menemukan file yang diminta pemakai (sesuatu.php), file tersebut diserahkan ke mesin PHP untuk diproses. Bila

(35)

12

permintaan pada database server dan hasil dari database server diproses lebih lanjut. Setelah semua isi file diproses, maka hasilnya (berupa suatu kode HTML)

diserahkan ke web server. Selanjutnya, web server mengirimkan kode HTML kepada pemakai. Kode sumber PHP (sesuatu.php) tidak akan diketahui oleh

pemakai karena pemakai hanya menerima kode hasil pemrosesannya. Dengan

cara seperti ini, kerahasiaan kode sumber bisa terjaga. Dengan menggunakan

pendekatan web dinamis dimungkinkan untuk membentuk aplikasi berbasis web

(Web based application) (Kadir,2009).

2.1.2 Teknologi Web

Dari sisi teknologi yang digunakan untuk membentuk web dinamis, terdapat

dua macam pengelompokkan yaitu teknologi pada sisi klien (client-side technology) dan teknologi pada sisi server (server-side technology) (Sutarman, 2003).

A. Teknologi Web pada Sisi Klien

Teknologi web pada sisi klien diimplementasikan dengan mengirimkan

kode perluasan HTML atau program tersendiri dan HTML ke klien. Klien-lah

yang bertanggung jawab dalam melakukan proses terhadap seluruh kode yang

diterima.

Kelemahan pendekatan seperti ini adalah terdapat kemungkinan bahwa

(36)

teknologi pada sisi klien adalah memungkinkan penampilan yang bersifat

dinamis, misalnya menampilkan jam yang terus-menerus berubah ataupun untuk

membuat animasi gambar yang mengikuti gerakan penunjuk mouse.

Yang termasuk dalam teknologi pada sisi klien adalah Kontrol ActiveX,

Java Applet, Skrip sisi klien (misal : JavaScript).

B. Teknologi Web pada Sisi Server

Teknologi web pada sisi server memungkinkan pemrosesan kode di dalam server sehingga kode yang sampai pada pemakai berbeda dengan kode asli pada

server.

Keuntungan penggunaan teknologi pada sisi server adalah :

1. Mengurangi lalu-lintas jaringan dengan cara menghindari percakapan

bolak-balik antara klien dan server.

2. Mengurangi waktu pemuatan kode, mengingat klien hanya mengambil kode

HTML saja.

3. Mencegah masalah ketidakkompatibelan browser.

4. Klien dapat berinteraksi dengan data yang ada pada server.

5. Mencegah klien mengetahui rahasia kode (mengingat kode yang diberikan ke

klien berbeda dengan kode asli pada server).

(37)

14

2.1.3 Kriteria Pengembangan Web

Ada beberapa kriteria yang harus dipenuhi dalam proses pengembangan

web yang baik, yaitu (Suyanto, 2009) :

A. Usability

Usability berhubungan dengan proses dimana user dapat menemukan cara untuk menggunakan situs web dengan efektif. Di samping itu, usability

adalah sebagai suatu pengalaman pengguna dalam berinteraksi dengan

aplikasi atau situs web sampai pengguna dapat mengoperasikannya dengan

mudah dan cepat.

Situs web harus memenuhi lima syarat untuk mencapai tingkat

usability yang ideal, antara lain :

• Mudah untuk dipelajari.

• Efisien dalam penggunaan.

• Mudah untuk diingat.

• Tingkat kesalahan rendah.

• Kepuasan pengguna.

B. Sistem Navigasi (Struktur)

Kemudahan bernavigasi dalam situs web melibatkan sistem navigasi

situs web secara keseluruhan dan desain interface situs web tersebut. Navigasi membantu pengunjung untuk menemukan jalan yang mudah ketika

menjelajahi situs web, memberitahu dimana mereka berada, kemana

(38)

yang dicari dengan cepat dan mudah.

Syarat navigasi yang baik adalah :

• Mudah dipelajari.

• Tetap konsisten.

• Memungkinkan feedback.

• Muncul dalam konteks.

• Menawarkan alternatif lain.

• Memerlukan perhitungan waktu dan tindakan.

• Menyediakan pesan visual yang jelas.

• Menggunakan label yang jelas dan mudah dipahami.

• Mendukung tujuan dan perilaku user.

C. Graphic Design (Desain Visual)

Desain yang baik setidaknya memiliki komposisi warna yang baik dan

konsisten, layout grafik yang konsisten, teks yang mudah di baca, penggunaan

grafik yang memperkuat isi teks, penggunaan animasi pada tempat yang tepat,

isi animasi yang memperkuat isi teks, dan secara keseluruhan membentuk

suatu pola yang harmonis.

D. Contents

Sebaik apapun situs web secara desain grafis, tanpa konten yang

berguna dan bermanfaat maka akan kurang berarti. Konten yang baik akan

menarik, relevan dan pantas untuk target audien situs web tersebut. Gaya

(39)

16

audien. Konten harus relevan dengan tujuan situs. Konten yang baik harus

dibuat secara khusus untuk web, bukan hanya mengambil dari media lain.

E. Compatibility

Situs web harus kompatibel dengan berbagai perangkat tampilannya

(browser), harus memberikan alternatif bagi browser yang tidak dapat melihat

situsnya.

F. Loading Time

Sebuah situs web yang tampil lebih cepat kemungkinan besar akan

kembali dikunjungi, apalagi bila dengan konten dan tampilan yang menarik.

G. Functionality

Seberapa baik sebuah situs web bekerja dari aspek teknologinya, ini

bisa melibatkan programmer dengan skripnya, misalnya HTML (DHTML), PHP, ASP, CGI, dll.

H. Interactivity

Buat situs web yang memungkinkan pengunjung berinteraksi dengan

situs web. Interaktivitas adalah apa yang melibatkan pengguna situs web

sebagai user experience dengan situs web itu sendiri. Dasar dari interaktivitas adalah hyperlinks (link) dan mekanisme feedback.

Gunakan hyperlink untuk membawa pengunjung ke sumber berita, topik lebih lanjut, topik terkait atau lainnya. Sedangkan untuk mekanisme

(40)

Keuntungannya, user bisa memberitahu jika ada missing link, dead link atau kesalahan yang lain. User juga bisa memberikan kritik/saran agar situs web bisa lebih baik. Bentuk lainnya juga bisa berupa fasilitas pencarian

(searching).

2.2 Metodologi Rekayasa Perangkat Lunak Terstruktur

Metodologi pengembangan sistem adalah sebuah proses tahap

pengembangan sistem yang mendefinisikan satu set aktivitas, metode, praktik,

produk jadi, dan peralatan terotomatisasi yang akan digunakan oleh para

pengembang sistem dan manajer sistem untuk mengembangkan dan merawat

sistem informasi dan perangkat lunak (Whitten, 2004).

Untuk dapat merancang, menganalisa, mendesain, dan membangun sebuah

program, sistem analis harus memahami kebutuhan dari pemilik program, dan

penyebab mengapa sistem tersebut harus dibuat. Konsep ini disebut sebagai

pengembangan berpusatkan pengguna (user centered development). Konsep ini memerlukan pendekatan use case modeling yang menginisiasikan kegiatan, siapa yang melakukan kegiatan tersebut, bagaimana respon dari sistem untuk kegiatan

itu dengan menggunakan use case diagram.

Dalam process modeling, metodologi dan analisis terstruktur memperkenalkan peralatan pemodelan yang disebut Data Flow Diagram (DFD)

(41)

18

Data modeling atau pemodelan data digunakan untuk mendefinisikan kebutuhan bisnis untuk sebuah database. Model aktual yang sering digunakan adalah entity relationship diagram (E-R diagram).

2.2.1 Use Case Diagram

Use case diagram merupakan diagram yang menggambarkan interaksi antara sistem dan eksternal sistem atau sesuatu yang berada di luar sistem dan atau

penggunanya (Whitten, 2004). Use case diagram digunakan untuk membantu menemukan objek, kelas, relasi, menggambarkan kebutuhan (requirements) dengan melihat bagaimana sistem digunakan dan siapa penggunanya dengan cara

yang bisa dicerna oleh user. Use case diagram terdiri dari actor, usecase dan asosiasi.

Simbol Nama Keterangan

Actor Seseorang atau sesuatu yang harus berinteraksi dengan sistem.

Representasi fungsionalitas atau layanan yang diberikan sistem kepada pemakai. Use Case

Relasi antara actor dan usecase dimana ada interaksi yang terjadi di dalamnya. Asosiasi

(42)

2.2.2 Data Flow Diagram

Data Flow Diagram (DFD) merupakan suatu diagram yang menggunakan notasi-notasi untuk menggambarkan arus atau aliran dari data sistem. Data Flow Diagram merepresentasikan sebuah masukan data ke dalam suatu proses atau keluaran data dari suatu proses. Penggunaannya sangat membantu untuk

memahami sistem secara logika, terstruktur dan jelas.

DFD merupakan alat bantu dalam menggambarkan atau menjelaskan sistem yang sedang berjalan secara logis. DFD juga merupakan sebuah model proses yang digunakan untuk menggambarkan aliran dari data yang melalui

sebuah sistem dan sekaligus menggambarkan proses yang dibentuk oleh sistem

tersebut. (Whitten, 2004)

Menurut Whitten (2004), ada beberapa simbol dan koneksi yang

digunakan dalam DFD seperti yang terlihat pada tabel 2.2.

Simbol ini menggambarkan proses. Proses merupakan kegiatan yang akan ditunjukkan oleh suatu sistem dalam merespon aliran data. Proses ini dapat disebut juga sebagai sistem. Dalam proses atau sistem akan menukarkan antara input dan

output dalam suatu lingkungan.

Rounded Rectangles

Simbol ini merepresentasikan

external agents. External agents

merupakan batas sistem dari

(43)

20

kerangka sistem informasi yang dibuat.

Simbol ini merepresentasikan penyimpanan data (data stores). Sering disebut sebagai file atau basis data (basis data). Simpanan data ini menghubungkan semua entitas tunggal dalam sebuah model data.

Open-Ended Boxes

Media nama data store

Simbol ini merepresentasikan aliran data atau input dan output, ke dan dari proses.

Arrow

Tabel 2.2 Notasi Data Flow Diagram

2.2.3 Entity Relationship Diagram

E-R Diagram merupakan sebuah model data yang memanfaatkan beberapa notasi tertentu untuk menggambarkan data ke dalam bentuk entitas dan relasi yang

dijelaskan oleh data itu sendiri. Sedangkan entitas merupakan kumpulan dari

orang, tempat, obyek, kejadian atau konsep yang diperlukan untuk menangkap

dan menyimpan data.

E-R diagram merupakan bagian dari Conceptual Design yang digunakan untuk memberikan gambaran secara umum mengenai hal yang penting dalam

(44)

pada saat ini dan saat yang akan datang. Perancangan conceptual model

menunjukkan entitas dan relasinya berdasarkan proses yang diinginkan. Ketika

menentukan entitas dan relasi, maka dibutuhkan analisis data mengenai informasi

yang lebih spesifik.

Conceptual Design akan menghasilkan conceptual schema yang mengacu pada conceptual model atau yang biasa disebut sebagai ER model. Perancangan

conceptual model, ditekankan pada struktur data dan relasi antar file. Pendekatan yang digunakan pada perancangan conceptual model ini adalah dengan menggunakan model relational data (Atzeni, 2000).

Simbol-simbol yang membentuk ER Model dapat dilihat pada tabel 2.3.

Merupakan sebuah objek yang nyata dan dapat dibedakan dari sesuatu yang lain. Contoh entitas : mahasiswa, guru, dsb. Entitas

Merupakan hubungan antar entitas. Ada 3 jenis relasi yaitu : relasi one to one, relasi

one to many, relasi many to many. Relasi

Merupakan sebutan untuk mewakili suatu entitas. Sebuah atribut juga merupakan sifat-sifat dari sebuah entitas. Sinonimnya adalah element, property,dan field.

Atribut

(45)

22

Dalam pembentukan ER-Diagram, ada beberapa relasi / hubungan yang berlaku antar entity, yaitu relasi satu lawan satu (one to one relationship), relasi satu lawan banyak (one to many relationship), serta relasi banyak lawan banyak (many to many relationship). Untuk derajat relasi one to one, diberi simbol (1-1). Untuk derajat relasi one to many, diberi simbol (1-N), sedangkan untuk derajat relasi many to many diberi simbol (N-N).

2.3 Tools Pengembang Sistem

2.3.1 HTML

HTML merupakan singkatan dari “Hypertext Markup Language”, yaitu merupakan bahasa standar yang biasa digunakan untuk menampilkan dokumen

web. Perintah-perintah dalam HTML ditulis dalam file berekstensi.html, dan ditandai dengan menggunakan tag (tanda) karakter ”<” dan ”>”. Struktur dasar

dari file HTML dimulai dengan tag <html>, yaitu menandakan awal dari sebuah dokumen html. Pada dasarnya dokumen HTML dibagi menjadi dua bagian, yaitu

header dan body. Masing-masing ditandai dengan pasangan container tag <head> untuk header dan <body> untuk bagian body. Bagian <head> berisi mengenai judul dokumen dan informasi dasar lainnya. Sedangkan bagian <body> berisi data

dari dokumen tersebut.

Berbeda dengan PHP, dokumen HTML akan dieksekusi oleh browser

(46)

Sedangkan pengaturan format teks dan pembentukan link maupun penampilan gambar pada objeknya diatur langsung menggunakan tag-tag HTML (Kadir,

2003).

2.3.2 PHP

PHP adalah salah satu bahasa server side yang didesain khusus untuk aplikasi web. PHP dapat disisipkan di antara bahasa HTML dan karena PHP

merupakan bahasa server side, maka PHP akan dieksekusi di server, sehingga yang dikirimkan ke browser adalah “hasil jadi” dalam bentuk HTML, dan kode PHP tidak akan terlihat.

PHP termasuk dalam Open Source Product, sehingga source code PHP bisa diubah dan didistribusikan secara bebas. Saat ini PHP banyak digunakan

untuk mengembangkan aplikasi-aplikasi yang berjalan di atas teknologi web.

Berikut ini merupakan alasan-alasan mengapa PHP banyak digunakan

dalam pembuatan web (Sutarman,2003) :

• PHP mudah dibuat dan kecepatan akses tinggi.

• PHP merupakan open sourcesoftware yang diterbitkan secara gratis.

• PHP dapat berjalan dalam web server yang berbeda dan dalam sistem operasi

yang berbeda pula. PHP dapat berjalan di sistem operasi UNIX, Windows 98,

(47)

24

• PHP juga dapat berjalan pada web server Microsoft Personal Web Server,

Apache, IIS, Xitami dan sebagainya.

• PHP termasuk bahasa yang embedded (bisa ditempel atau diletakkan dalam

tag HTML).

• PHP termasuk server side programming.

• PHP mendukung kemudahan dalam koneksi ke database, diantaranya adalah :

Oracle, MySQL, Sybase, Postgres SQL, mSQL, Solid, dan Generic ODBC.

• PHP juga mendukung komunikasi dengan layanan seperti protokol IMAP,

SNMP, NNTP, POP3, dan HTTP.

2.3.2.1 Koneksi PHP ke MySQL

PHP telah menyediakan berbagai macam fungsi untuk melakukan koneksi

dengan database MySQL.

Fungsi-fungsi yang menghubungkan antara PHP dan MySQL adalah

(Kurniawan, 2002) :

• mysql_connect()

Fungsi ini digunakan untuk melakukan koneksi ke server database MySQL. Sintaksnya sebagai berikut :

$conn=mysql_connect(host, user, password)

• mysql_select_db()

Fungsi ini digunakan untuk memilih database yang akan digunakan. Sintaksnya sebagai berikut :

(48)

• mysql_query()

Fungsi ini digunakan untuk menjalankan perintah query yang terdapat di MySQL. Sintaksnya sebagai berikut :

$qry = mysql_query(perintah sql, koneksi)

• mysql_fetch_array()

Fungsi ini digunakan untuk mengambil record dari database dan memasukkannya ke dalam array asosiatif, array numeris, atau keduanya.

Sintaksnya sebagai berikut :

$row = mysql_fetch_array($qry)

• mysql_fetch_assoc()

Fungsi ini hampir sama dengan fungsi mysql_fetch_array(), hanya saja

array yang dihasilkan hanya array asosiatif. Sintaksnya sebagai berikut :

$row = mysql_fetch_assoc($qry)

• mysql_fetch_row()

Fungsi ini hampir sama dengan fungsi mysql_fetch_array(), hanya saja

array yang dihasilkan hanya array asosiatif. Sintaksnya sebagai berikut :

$row = mysql_fetch_row($qry)

• mysql_num_fields()

Fungsi ini digunakan untuk menghitung jumlah field yang ada pada database. Sintaksnya sebagai berikut :

$jml = mysql_num_fields($qry)

• mysql_num_rows()

(49)

26

database. Sintaksnya sebagai berikut : $jml = mysql_num_rows($qry)

• mysql_close()

Fungsi ini digunakan untuk menutup koneksi yang telah dilakukan. Sintaksnya

sebagai berikut :

mysql_close(koneksi)

• mysql_pconnect()

Fungsi ini memiliki kegunaan yang sama dengan fungsi mysql_connect(),

hanya saja koneksi yang dibuka bersifat persisten. Sintaksnya sebagai berikut : $pconn = mysql_pconnect(host, user, password)

• mysql_create_db()

Fungsi ini digunakan untuk membuat database dari skrip PHP. Sintaknya sebagai berikut :

mysql_create_db(nama database)

2.3.3 MySQL

MySQL merupakan program pembuat database yang digemari di kalangan

programmer web dengan alasan bahwa program ini merupakan database yang kuat dan cukup stabil untuk digunakan sebagai media penyimpanan data.

(50)

Relational Database Management System (RDBMS), sehingga dengan kemampuan ini MySQL akan mampu menangani data-data yang berukuran sangat

besar hingga berukuran Gigabyte. MySQL juga merupakan software database

yang bersifat free (gratis).

Adapun kemampuan yang dimiliki database MySQL, antara lain adalah (Sutarman,2003) :

• Mendukung fungsi-fungsi yang ada dalam SQL.

• Dapat digunakan dan dimanfaatkan dalam banyak CPU sekaligus (multi user).

• Dapat dikoneksikan dengan berbagai bahasa pemrograman, di ataranya adalah

: C, C++, Java, Perl, PHP, dll.

• Dapat digunakan pada database yang besar.

• Dapat digunakan dalam berbagai aplikasi baik aplikasi web (misalnya dengan

PHP) maupun aplikasi non-web (misalnya dengan Visual Basic).

2.4 Antarmuka Pengguna (User Interface)

Semua yang ditampilkan di layar dibaca dalam dokumentasi atau

manipulasi dengan keyboard atau mouse adalah bagian dari user interface.

Sebagian besar program komputer yang dibuat oleh manusia memiliki user interface sebagai penghubung antara user program dengan program aplikasinya. Para pengembang program aplikasi harus memperhatikan dengan baik

(51)

28

Ada delapan aturan dalam perancangan antarmuka pengguna (user interface) yaitu (Shneiderman, 1998) :

a. Berusaha untuk konsisten

Semua urutan aksi harus konsisten dalam situasi yang sama, seperti

penggunaan istilah, warna, tampilan dan jenis huruf yang sama.

b. Memungkinkan user menggunakan shortcut

Terkadang user menginginkan agar jumlah interaksi yang dilakukan dikurangi untuk meningkatkan kepraktisannya. Penggunaan shortcut dapat dilakukan untuk mengatasi hal tersebut dan meningkatkan kecepatan tampilan.

c. Memberikan umpan balik yang informatif

Respon harus berisi informasi kepada user sesuai dengan action yang dilakukannya. User harus mengetahui action apa yang telah dan akan dilakukan dengan respon balik tersebut.

d. Merancang dialog yang memberikan keadaan akhir

Urutan aksi harus diatur menjadi bagian awal, tengah dan akhir. Hal ini

dilakukan agar user mengetahui bahwa sekelompok tindakan telah dilakukan sehingga memberikan kepuasan pada user dan memberikan kesiapan untuk melakukan tindakan selanjutnya.

e. Memberikan pencegahan kesalahan dan penanganan kesalahan secara

(52)

Sistem harus dirancang sedemikian rupa agar tidak membuat kesalahan yang

serius. Jika terjadi kesalahan, sistem harus mendeteksi dan menawarkan

mekanisme penanganan yang sederhana dan mudah dimengerti.

f. Memungkinkan memberikan aksi yang mudah

Aksi harus bisa dibalik untuk mengurangi kegelisahan dari user jika user

menjelajah ke bagian yang tidak dikenal. Mendorong penjelajahan pilihan

yang tidak biasa dipakai oleh user.

g. Mendukung pusat kendali internal

User harus merasa menguasai sistem dan sistem bekerja sesuai dengan keinginan. Kesulitan memperoleh informasi yang penting atau informasi yang

diinginkan akan memberikan ketidakpuasan bagi user.

h. Mengurangi beban ingatan jangka pendek

Manusia memiliki ingatan yang terbatas. Oleh karena itu, aplikasi harus dibuat

sedemikian rupa agar user tidak terlalu banyak menyimpan memori.

(53)

BAB III

ANALISA DAN PERANCANGAN SISTEM

3.1 Analisa Sistem

3.1.1 Gambaran Umum Sistem

Sistem yang dikembangkan merupakan sebuah website yang memiliki

fasilitas untuk menampilkan informasi tentang karakteristik rumah berupa teks,

foto dan video yang dapat membantu pengembang perumahan dalam

mempromosikan produknya serta mempermudah konsumen dalam mencari rumah

tempat tinggal.

Pada sistem ini, aktor yang terlibat dalam sistem dibedakan menjadi 3

yaitu user, administrator dan staf. User merupakan aktor yang mempunyai hak akses ke dalam sistem berupa melihat isi website, mencari data rumah, dan

mengisi buku tamu. Administrator dan Staf merupakan aktor yang mempunyai hak akses pada bagian administrasi yang berwenang untuk memanipulasi isi

website, hanya saja terdapat perbedaan wewenang yaitu pada bagian

(54)

Dalam sistem ini, pada bagian user terdapat beberapa menu utama yaitu menu Beranda, Fasilitas Perumahan, Pencarian Rumah, Tipe Rumah & Harga,

Tips Properti, Peta dan Buku Tamu. Menu “ Beranda ” merupakan halaman utama

dari sistem ini yang menampilkan profil perumahan yang menjadi obyek

penelitian, galeri foto, kilasan tips properti, kontak kita, banner, serta

menampilkan menu-menu pilihan lainnya. Menu “Fasilitas Perumahan”

menampilkan fasilitas-fasilitas yang disediakan pihak pengembang perumahan

yang ditujukan bagi kenyamanan para penghuni perumahan. Menu “ Pencarian

Rumah ” merupakan halaman bagi user untuk memperoleh informasi detail tentang karakteristik rumah sesuai dengan keinginan user melalui fasilitas pencarian. Menu “ Tipe Rumah & Harga ” menampilkan daftar tipe-tipe rumah

yang ada di perumahan beserta harga untuk setiap tipe rumah dan dilengkapi

dengan keterangan tentang cara pembayaran rumah. Menu “ Tips Properti ” berisi

tips-tips seputar properti yang dapat user terapkan dalam kehidupan sehari-hari. Menu “Peta” menampilkan denah lokasi rumah dalam perumahan (site plan) dan juga menampilkan denah lokasi perumahan. Menu “Buku Tamu” merupakan

menu yang diperuntukkan bagi user untuk mengirimkan pesan yang dapat berupa pertanyaan atau kritik saran kepada pengembang perumahan.

Pada bagian administrator, terdapat menu untuk mengelola isi website. Seorang administrator dapat mengakses bagian ini dengan melakukan proses

login terlebih dahulu ke dalam sistem dengan memasukan username dan

(55)

32

3.1.2 Pemodelan Kebutuhan Sistem

Dalam pemodelan kebutuhan sistem (modeling system requirement), penulis menggunakan use case diagram untuk memodelkan fungsi-fungsi sistem dan siapa yang melakukan kejadian. Use case diagram merupakan sebuah diagram yang menggambarkan interaksi antara sistem dengan eksternal sistem

(user). Dalam sistem ini, pemodelan dengan use case diagram dibagi menjadi dua, yang dilihat dari sisi user dan administrator.

3.1.2.1 Use Case Diagram User

Dalam sistem ini, seorang user mempunyai hak akses untuk melihat isi website, melakukan pencarian info rumah, dan mengisi buku tamu. Pada gambar

3.1 ditampilkan use casediagram bagi user.

(56)

3.1.2.2 Use Case Diagram Administrator

Dalam sistem ini, aktor yang berperan sebagai administrator dibagi ke dalam dua level yaitu level admin dan staf. Seorang staf mempunyai hak akses

untuk memanipulasi data website seperti melakukan pengelolaan terhadap data

foto perumahan, data fasilitas perumahan, data spesifikasi teknis, data foto rumah,

data video rumah, data tips properti, data banner, data peta dan data buku tamu.

(57)

34

Login

(58)

Login

Website Properti Perumahan dengan Menggunakan PHP & MySQL

Administrator

Tambah foto rumah

Ubah foto rumah

Hapus foto rumah

Tambah video rumah

Ubah video rumah

Hapus video rumah

Tambah tips properti

Ubah tips properti

Hapus pengguna Ubah pengguna Tambah pengguna Hapus tips properti <<depends on>>

Staf

(59)

36

(bagian 3)

Gambar 3.2 Use Case Diagram Administrator

3.1.3 Pemodelan Proses

(60)

yang terlibat di dalam sistem yaitu user, staf dan administrator. Kesatuan luar merupakan suatu kesatuan yang berada di luar sistem yang sedang dikembangkan.

3.1.3.1 Diagram Konteks

Diagram konteks menggambarkan sistem sebagai sebuah proses tunggal

yang berinteraksi dengan entitas luar. Dengan input data dari entitas dan output

data sebagai tanggapan sistem dari input yang dimasukkan, dimana input data digambarkan sebagai panah yang masuk dan output data yang digambarkan sebagai panah yang keluar dari proses. Diagram konteks dari sistem yang

(61)

Ga

m

bar 3.3 Diagram

Konteks

38

(62)

3.1.3.2Diagram Berjenjang

Diagram berjenjang menggambarkan proses apa saja yang dapat dilakukan

dalam sistem yang akan digunakan untuk menggambarkan Data Flow Diagram (DFD) ke level-level yang lebih rendah. Diagram berjenjang Website Properti ini dibagi menjadi dua subsistem yaitu subsistem user dan subsistem administrator.

Diagram berjenjang subsistem user dapat dilihat pada gambar 3.4 sedangkan untuk diagram berjenjang subsistem administrator dapat dilihat pada gambar 3.5.

(63)

(64)

(65)

42

3.1.3.3 DFD Level 0 (Overview Diagram)

3.1.3.3.1 DFD Level 0 Subsistem User

Aliran data pada DFD level 0 untuk subsistem user dapat dilihat pada gambar 3.6.

(66)

3.1.3.3.2 DFD Level 0 Subsistem Administrator

Aliran data pada DFD level 0 untuk subsistem administrator dapat dilihat pada gambar 3.7.

(67)

44

3.1.3.4 DFD Level 1

3.1.3.4.1 DFD Level 1 Subsistem Administrator

Aliran data pada DFD level 1 untuk subsistem administrator dapat dilihat pada gambar 3.8.

(68)

(bagian 2)

(69)

46

3.1.4 Pemodelan Data

3.1.4.1 Conceptual Design

Dalam pemodelan data, untuk menggambarkan relasi atau hubungan antar

entitas, penulis menggunakan Entity Relationship Diagram (ER Diagram). Ilustrasi ER Diagram untuk website properti ini dapat dilihat pada gambar 3.9.

(70)

3.2 Desain Sistem

3.2.1 Desain Database

3.2.1.1 Logical Design

Pada gambar 3.10 dapat dilihat hasil dari conceptual design yang ditampilkan dalam relasi antar tabel.

banner

(71)

48

3.2.1.2 Physical Design

Desain basis data berisi tabel-tabel yang digunakan dalam sistem yaitu :

1.Tabel Admin

Tabel admin digunakan untuk menyimpan data aktor yang diberi hak akses

untuk mengelola isi website (bertindak sebagai administrator). Keterangan tabel

admin dapat dilihat pada tabel 3.1.

Nama Kolom Tipe Panjang Keterangan

PK id_admin varchar 50 Id Admin

password varchar 50 Password Admin

nama_lengkap varchar 100 Nama lengkap Admin

email varchar 100 Email Admin

level varchar 50 Level Admin : admin & staf

login_terakhir datetime Tanggal dan waktu login

terakhir kali

Tabel 3.1 Tabel Admin

2. Tabel Banner

Tabel banner digunakan untuk menyimpan data iklan yang akan

ditampilkan pada halaman website. Keterangan tabel banner dapat dilihat pada

(72)

PK id_banner int 5 Id banner

judul varchar 100 Judul banner

url varchar 100 Alamat banner

tgl_posting date Tanggal memasukkan banner

Tabel 3.2 Tabel Banner

3. Tabel Buku Tamu

Tabel buku tamu digunakan untuk menyimpan masukan pesan dari user

pada halaman buku tamu. Keterangan tabel buku tamu dapat dilihat pada tabel

3.3.

Tabel 3.3 Tabel Buku Tamu

direktori varchar 100 Lokasi penyimpanan gambar banner

PK id_bukutamu int 5 Id buku tamu

nama varchar 100 Nama pengirim pesan

email varchar 100 Email pengirim pesan

tanggal date Tanggal pengiriman pesan

subjek varchar 100 Topik pesan

(73)

50

4. Tabel Fasilitas

Tabel fasilitas digunakan untuk menyimpan data fasilitas-fasilitas

perumahan. Keterangan tabel fasilitas dapat dilihat pada tabel 3.4.

PK id_fasilitas int 5 Id fasilitas

nama_fasilitas varchar 200 Nama fasilitas perumahan

Keterangan Text Keterangan fasilitas

Tabel 3.4 Tabel Fasilitas

5. Tabel Foto

Tabel foto digunakan untuk menyimpan foto-foto rumah disertai dengan

keterangan foto. Keterangan tabel foto dapat dilihat pada tabel 3.5.

PK id_foto Int 5 Id foto

FK id_rumah varchar 10 Id rumah

nama_foto varchar 100 Nama foto

direktori varchar 100 Lokasi penyimpanan file foto

keterangan text Keterangan foto

(74)

6. Tabel Foto Perumahan

Tabel foto perumahan digunakan untuk menyimpan foto-foto perumahan

secara umum. Keterangan tabel foto perumahan dapat dilihat pada tabel 3.6.

PK id_foto_perumahan int 5 Id foto perumahan

nama_foto varchar 100 Nama foto perumahan

direktori varchar 100 File foto perumahan

keterangan text Keterangan foto perumahan

Tabel 3.6 Tabel Foto Perumahan

7. Tabel Peta

Tabel peta digunakan untuk menyimpan gambar denah lokasi rumah (site plane) dan denah lokasi perumahan. Keterangan tabel peta dapat dilihat pada tabel 3.7.

PK id_peta int 5 Id peta

nama_peta varchar 100 Nama peta

direktori varchar 100 File gambar peta

keterangan text Keterangan peta

(75)

52

8. Tabel Profil

Tabel profil merupakan tabel yang digunakan untuk menyimpan data

profil perumahan. Keterangan tabel profil dapat dilihat pada tabel 3.8.

PK id_profil int 5 Id profil

nama_perumahan varchar 100 Nama perumahan

Lokasi penyimpanan file gambar

profil perumahan

direktori varchar 100

alamat_perumahan varchar 200 Alamat perumahan

nama_kantor varchar 100 Nama kantor pemasaran

alamat_kantor varchar 200 Alamat kantor pemasaran

email varchar 100 Email kantor pemasaran

telepon varchar 100 Telepon kantor pemasaran

isi_profil text Profil perumahan

ket_bayar text Keterangan pembayaran rumah

Tabel 3.8 Tabel Profil

9. Tabel Rumah

Tabel rumah digunakan untuk menyimpan data spesifikasi rumah.

(76)

PK id_rumah varchar 10 Id rumah

kavling text Kavling tanah

luas_tanah float Luas tanah

luas_bangunan float Luas bangunan rumah

jml_kamar int 5 Jumlah kamar tidur

spesifikasi_ruang text Keterangan ruangan

harga int 20 Harga rumah

uang_muka int 20 Uang muka rumah

Tabel 3.9 Tabel Rumah

10. Tabel Spesifikasi Teknis

Tabel spesifikasi teknis digunakan untuk menyimpan data teknis dari

masing-masing tipe rumah. Keterangan tabel spesifikasi teknis dapat dilihat pada

tabel 3.10.

PK id_spesifikasi int 5 Id spesifikasi

pondasi varchar 300 Bahan pondasi rumah

dinding varchar 300 Bahan dinding rumah

rangka_atap varchar 300 Bahan rangka atap

(77)

54

kusen varchar 300 Bahan kusen

pintu_utama varchar 300 Bahan pintu utama

pintu_km varchar 300 Bahan pintu kamar mandi

jendela varchar 300 Bahan jendela rumah

plafond varchar 300 Bahan plafond

lantai_ruang varchar 300 Bahan lantai ruang rumah

(keramik)

lantai_teras varchar 300 Bahan lantai teras rumah

(keramik)

lantai_km varchar 300 Bahan lantai kamar mandi

(keramik)

dinding_km varchar 300 Bahan dinding KM (keramik)

list_km varchar 300 Bahan list kamar mandi

kamar_mandi varchar 300 Spesifikasi kamar mandi

kloset varchar 300 Jenis kloset duduk

listrik varchar 300 Daya listrik

dapur varchar 300 Spesifikasi dapur

vegetasi varchar 300 Tumbuhan taman

Tabel 3.10 Tabel Spesifikasi Teknis

11. Tabel Tips

Tabel tips digunakan untuk menyimpan data tips properti. Keterangan

(78)

PK id_tips int 5 Id tips properti

FK id_admin varchar 50 Id admin

judul varchar 200 Judul tips properti

isi_tips text Isi tips properti

Lokasi penyimpanan file gambar

tips

direktori varchar 100

Hari saat tips properti di-upload

hari varchar 20

tanggal date Tanggal saat tips properti

di-upload

Jam saat tips properti di-upload

jam time

Tabel 3.11 Tabel Tips 12. Tabel Video

Tabel video digunakan untuk menyimpan data video rumah. Keterangan

tabel video dapat dilihat pada tabel 3.12.

PK id_video int 5 Id video

nama_video varchar 100 Nama video

direktori varchar 100 Lokasi penyimpanan file video

Keterangan file video

keterangan text

(79)

56

3.2.2 Desain Antarmuka (Graphical User Interface)

3.2.2.1 Desain Antarmuka User

Pada desain antarmuka user, ditampilkan desain halaman-halaman website yang berkaitan langsung dengan user (font-end).

a). Desain Halaman “Beranda”

(80)

b). Desain Halaman “Fasilitas Perumahan”

(81)

58

c). Desain Halaman “Pencarian Rumah”

(82)

(83)

60

d). Desain Halaman “ Hasil Pencarian Rumah ”

>> Hasil Pencarian Ditemukan 3 data rumah :

[ Kembali] Foto rumah

Tipe rumah : __________________________

( detail ... )

Harga : __________________________ Jumlah Kamar : __________________________ Luas Bangunan : __________________________ Luas Tanah : __________________________

Foto rumah

Tipe rumah : __________________________

( detail ... )

Foto rumah

Tipe rumah : __________________________

( detail ... )

(84)

e). Desain Halaman ” Detail Data Rumah ”

(85)

62

f). Desain Halaman ” Lihat Foto Rumah ”

(86)

g). Desain Halaman ”Lihat Video Rumah ”

(87)

64

h). Desain Halaman “ Tipe Rumah & Harga ”

(88)

i). Desain Halaman “ Tips Properti ”

(89)

66

j). Desain Halaman “ Detail Tips Properti ”

Gambar 3.21 Desain Halaman Detail Tips Properti

(90)

k). Desain Halaman “ Peta ”

(91)

68

l). Desain Halaman “ Buku Tamu ”

(92)

m). Desain Halaman “Lihat Buku Tamu”

(93)

70

3.2.2.2 Desain Antarmuka Administrator

Pada desain antarmuka administrator, ditampilkan desain halaman-halaman website yang berkaitan langsung dengan administrator dalam mengelola isi website (back-end).

a). Desain Halaman “Login”

Gambar 3.25. Desain Halaman Login

b). Desain Halaman “Halaman Utama Administrator”

(94)

c). Desain Halaman “Ubah Profil Perumahan”

(95)

72

d). Desain Halaman “Tambah Foto Perumahan”

Gambar 3.28. Desain Halaman Tambah Foto Perumahan

e). Desain Halaman “Ubah Foto Perumahan”