i
APLIKASI INFORMASI KAMAR HOTEL BERBASIS WEB STUDI KASUS PADA “HOTEL KOTA” YOGYAKARTA
SKRIPSI
Diajukan Untuk Memenuhi Syarat Memperoleh Gelar Sarjana Komputer Program Studi Teknik Informatika
Oleh:
CHRISTIAN MULYAWAN 045314032
Program Studi Teknik Informatika Universitas Sanata Dharma
Yogyakarta 2011
ii
THE WEB BASED INFORMATION APPLICATION OF ROOM’S HOTEL A CASE STUDY AT “HOTEL KOTA” YOGYAKARTA
A THESIS
Presented as Partial Fulfillment of the Requirements to Obtain Sarjana Computer Degree in Informatics Engineering Department
By :
Christian Mulyawan 045314032
INFORMATICS ENGINEERING STUDY PROGRAM INFORMATICS ENGINEERING DEPARTMENT
FACULTY OF SCIENCE AND TECHNOLOGY SANATA DHARMA UNIVERSITY
iii
v
HALAMAN MOTTO
“Tidak Ada Yang Kebetulan di Dunia Ini
Semua Bisa Terjadi Bukan Karena Kuat atau Hebatku Melainkan Karena Tuhan Punya Kehendak
Dan Dia Akan Membuat Segalanya Indah Jika Saatnya Tiba”
_ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _
“Barang Siapa Setia Dengan Perkara kecil Maka Dia Akan Setia Dengan Perkara Besar”
(Rudy Gunawan,SE*)
_ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _
“Selama Kita Hidup, Maka Selama Itulah Kita Belajar
Milikilah Selalu Sifat Pembelajar Pada Setiap Pekerjaan Yang Kita Lakukan Dan Selalu lah Mengingat Bahwa Di Atas Langit Masih Ada Langit
Karena Dengan Sifat Itu Maka Kita Akan Selalu Rendah Hati” (Christian Mulyawan)
_ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ “ Yahwe Will Never Let’s You Down ”
vi
HALAMAN PERSEMBAHAN
H idup . . .
Bagaikan Air Yang mengalir D ari H ulu M enuju ke H ilir Bagaikan D ebu Yang Terbang D i Bawa Sang Angin
Bagaikan dua Sisi M ata U ang, Kadang Suka D an Kadang D uka
H idup . . .
D ari Air Kita Belajar Kehidupan D ari Batu Kita Belajar Tegar D ari Angin kita Belajar Kesabaran
K upersembahkan karya kecilku untuk :
P apa dan M ama tercinta,
K akakku E ka P utra dan A dik - adikku,
M artinusWindu dan A ngelina tersayang,
R R .M elinda Santi A risandy terkasih,
Semua Sahabat dan orang-orang yang saya sayangi.
vii INTISARI
Hotel Kota merupakan hotel melati yang memiliki aplikasi informasi berupa website yang bersifat statis. Kelemahan dari website yang sudah ada adalah masyarakat / pelanggan belum bisa mendapatkan informasi yang jelas mengenai jenis kamar dan fasilitas – fasilitas yang ada di kamar hotel melalui website tersebut. Selain itu admin mengalami kesulitan saat harus mengupdate data - data kamar maupun fasilitas hotel mengingat website yang ada masih bersifat statis. Dari latar belakang tersebut dibangun aplikasi informasi berbasis web yang dinamis agar data - data kamar dan fasilitas dapat di update dengan mudah.
Sistem ini dibangun dengan menggunakan bahasa pemrograman PHP dan DBMS MySQL. Hasil akhir yang diperoleh adalah sebuah aplikasi informasi kamar hotel yang memberikan informasi profil hotel, tipe kamar, fasilitas hotel, galeri hotel, pengisian buku tamu dan acara yang diadakan pihak hotel.
Hasil uji coba terhadap user (pengunjung hotel dan masyarakat) menunjukan bahwa aplikasi ini memiliki menu-menu yang mudah digunakan. Hasil uji coba terhadap admin menunjukan bahwa update kamar hotel dapat dilakukan dengan mudah.
viii ABSTRACT
Hotel Kota is classified a Jasmine class. The hotel that has an application information in the form of a static website. The weakness of an existing website is the public / customers have not been able to get an information about the types of rooms and the facilities in hotel rooms through the website. Also the admin having trouble when I had to update the data of room and hotel facilities to remember the website that there is still static. From this background applications we would built a dynamic web-based information so that the data rooms and facilities can be updated easily.
The system is built using programming language PHP and the MySQL DBMS. The final result obtained is a hotel room information applications that provide information profile hotel, room type, hotel facilities, hotel gallery, filling the guest book and events held the hotel.
ix
KATA PENGANTAR
Puji dan syukur kepada Tuhan Yesus Kristus atas pertolongan dan kasih-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 Komputer 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 akademik dan dosen pembimbing skripsi, atas kesabaran, pengarahan, dan saran yang diberikan kepada penulis selama penyusunan skripsi ini.
2. Bapak JB Budi Darmawan, S.T., M.Sc. dan ibu Sri Hartati Wijono, S.Si., M.Kom. 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 mantan ketua program studi Teknik Informatika Universitas Sanata Dharma yang saat ini sudah menjabat sebagai Wakil Dekan 1.
x
5. Ibu Ridowati Gunawan, S.Kom., M.T. selaku ketua program studi Teknik Informatika Universitas Sanata Dharma.
6. Dosen - dosen Teknik Informatika Universitas Sanata Dharma yang tidak dapat saya sebutkan satu per satu. Terima kasih atas ilmu yang telah diajarkan selama ini.
7. Segenap staff Hotel Kota, atas bantuannya dalam pengambilan data-data Hotel Kota.
8. Papa dan Mama tercinta serta paman saya Kustandi Widjaya, atas kasih sayang dan doa, serta dukungannya sehingga penulis bisa menjadi seperti sekarang ini. 9. Guru saya Rudy Gunawan, atas kesabaran, doa dan dukungannya sehingga
penulis bisa menyelesaikan kuliah sesuai rencana.
10. Kakakku Eka Putra dan Adik - adikku tersayang, Martinus Windu dan Maria Fransisca Angelina, yang selalu menyayangi dan mendoakan serta memberi semangat agar penulis cepat menyelesaikan skripsi ini.
11. RR Melinda Santi Arisandy, atas kasih sayang, perhatian, penghiburan, doa dan bantuannya saat penyusunan skripsi ini hingga selesai. Terima kasih atas semua yang telah kau berikan untukku.
12. Teman-teman seperjuangan saya TI’04, terima kasih atas dukungan yang telah kalian berikan sampai titik penghabisan.
xi
14. Teman seperjuangan saya Yohannes Rio Falmy yang sudah lulus lebih dulu, terimakasih untuk semangat dan doanya selama penulis menyelesaikan skripsi ini. 15. Semua pihak yang tidak bisa penulis sebutkan satu per satu termasuk staff
sekretariat FST yang telah memberikan bantuan, dan pertolongan sejak Ujian Kolokium sampai penyusunan skripsi ini selesai.
16. Semua pihak yang tidak bisa penulis sebutkan satu per satu yang telah memberikan bantuan sampai penyusunan skripsi ini selesai.
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, 17 Agustus 2011 Penulis
( Christian Mulyawan )
xii
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, 17 Agustus 2011 Penulis
xiii
LEMBAR PERNYATAAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS
Yang bertanda tangan di bawah ini, saya mahasiswa Universitas Sanata Dharma: Nama : Christian Mulyawan
Nomor Mahasiswa : 045314032
Demi pengembangan ilmu pengetahuan, saya memberikan kepada Perpustakaan Universitas Sanata Dharma karya ilmiah saya yang berjudul :
“
APLIKASI INFORMASI KAMAR HOTEL BERBASIS WEB
STUDI KASUS PADA “HOTEL KOTA” 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 : 17 Agustus 2011 Yang menyatakan
(Christian Mulyawan)
xiv DAFTAR ISI
HALAMAN SAMPUL (BAHASA INDONESIA) ... i
HALAMAN SAMPUL (BAHASA INGGRIS)... ii
HALAMAN PERSETUJUAN PEMBIMBING ... iii
HALAMAN PENGESAHAN ... iv
HALAMAN MOTTO ... v
HALAMAN PERSEMBAHAN ... vi
INTISARI ... vii
ABSTRACT ... viii
KATA PENGANTAR ... ix
PERNYATAAN KEASLIAN KARYA ... xii
PERNYATAAN PERSETUJUAN PUBLIKASI ... xiii
DAFTAR ISI ... xiv
DAFTAR GAMBAR ... xix
DAFTAR TABEL ... xxi
DAFTAR LISTING ... xxii
BAB I PENDAHULUAN ... 1
1.1 Latar Belakang... 1
1.2 Rumusan Masalah ... 2
1.3 Batasan Masalah ... 2
xv
1.5 Metodologi Pengembangan Perangkat Lunak ... 3
1.6 Sistematika Penulisan ... 3
BAB II LANDASAN TEORI ... 5
2.1 Sistem Informasi Web... 5
2.1.1 Web Statis ... 5
2.1.2 Web Dinamis ... 7
2.2 Teknologi Web ... 9
2.2.1 Teknologi Web pada Sisi Klien ... 9
2.2.2 Teknologi Web pada Sisi Server ... 10
2.3 Kriteria Pengembangan Web... 10
2.4 Metodologi Rekayasa Perangkat Lunak Terstruktur ... 14
2.4.1 Use Case Diagram... 15
2.4.2 Data Flow Diagram ... 16
2.4.3 Entity Relational Diagram ... 17
2.5 Alat – alat Pembangun Sistem Informasi Berbasis Web ... 19
2.5.1 HTML ... 19
2.5.4 Macromedia Dreamweaver 8 ... 28
xvi
2.5.4.1 Ruang Kerja Macromedia Dreamweaver 8 ... 28
2.5.4.2 Komponen Ruang Kerja Macromedia Dreamweaver 8 .... 31
BAB III ANALISIS DAN PERANCANGAN SISTEM ... 33
3.1 Analisis Sistem ... 33
3.2 Perancangan Sistem ... 46
3.2.1 Desain Database ... 46
3.2.1.1 Logical Database ... 46
xvii
3.2.2 Disain Antarmuka (Graphical User Interface Design) ... 52
3.2.2.1 Desain Antarmuka User ... 52
BAB IV IMPLEMENTASI SISTEM ... 57
4.1 Implementasi Database... 57
4.1.1 Pembuatan Database ... 57
2.1.2 Pembuatan Tabel Admin ... 58
4.2 Implementasi Koneksi dari PHP ke MySQL ... 66
4.3 Implementasi Antarmuka ... 66
4.3.1 Implementasi Antarmuka Sisi User ... 67
BAB V ANALISA HASIL ... 75
5.1 Analisa Hasil Perangkat Lunak ... 75
5.2 Analisa Hasil Uji Coba User ... 75
5.2.1 Pengumpulan Data ... 76
5.2.2 Sasaran Penyebaran Kuisioner ... 77
5.2.3 Form Kuisioner ... 78
xviii
BAB VI KESIMPULAN DAN SARAN... 87
6.1 Kesimpulan... 87
6.2 Saran ... 87
xix
DAFTAR GAMBAR
Gambar 2.1 Mekanisme pemanggilan aplikasi web bertipe HTML ... 6
Gambar 2.2 Mekanisme pemanggilan aplikasi web bertipe PHP ... 8
Gambar 3.1 Use Case Diagram User ... 35
Gambar 3.2 Use Case Diagram Administrator ... 36
Gambar 3.3 Diagram Konteks ... 38
Gambar 3.4 Diagram Berjenjang Subsistem User ... 39
Gambar 3.5 Diagram Berjenjang Subsistem Administrator... 40
Gambar 3.6 DFD Level 0 Subsistem User ... 41
Gambar 3.7 DFD Level 0 Subsistem Administrator... 42
Gambar 3.8 DFD Level 1 Subsistem Administrator... 44
Gambar 3.9 Entity Relationship Diagram ... 45
Gambar 3.10 Relasi Antar Tabel ... 46
Gambar 3.11 Desain Halaman Beranda ... 52
Gambar 3.12 Desain Halaman Profil ... 53
Gambar 3.13 Desain Halaman Tipe Kamar ... 53
Gambar 3.14 Desain Halaman Fasilitas ... 54
Gambar 3.15 Desain Halaman Galeri ... 54
Gambar 3.16 Desain Halaman Buku Tamu ... 55
Gambar 3.17 Desain Halaman Agenda Terbaru ... 55
Gambar 3.18 Desain Halaman Hubungi Kami ... 56
xx
Gambar 4.1 Implementasi Pembuatan Database ... 58
Gambar 4.2 Implementasi Tabel Login ... 59
Gambar 4.3 Implementasi Tabel Admin ... 60
Gambar 4.4 Implementasi Tabel Kondisi ... 61
Gambar 4.5 Implementasi Tabel Tipe Kamar ... 62
Gambar 4.6 Implementasi Tabel Buku Tamu ... 63
Gambar 4.7 Implementasi Tabel Agenda Terbaru ... 64
Gambar 4.8 Implementasi Galeri ... 65
Gambar 4.9 Implementasi Halaman Beranda... 67
Gambar 4.10 Implementasi Halaman Profil ... 68
Gambar 4.11 Halaman Tipe Kamar ... 69
Gambar 4.12 Halaman Fasilitas... 70
Gambar 4.13 Halaman Galeri ... 71
Gambar 4.14 Halaman Buku Tamu ... 72
Gambar 4.15 Halaman Agenda Terbaru ... 73
Gambar 4.16 Halaman Hubungi Kami ... 74
Gambar 5.1 Form Kuisioner User ... 78
xxi
DAFTAR TABEL
Tabel 2.1 Notasi Use Case Diagram ... 15
Tabel 2.2 Notasi Data Flow Diagram ... 17
Tabel 2.3 Notasi Entity Relationship Diagram ... 19
Tabel 3.1 Tabel Admin ... 47
Tabel 3.2 Tabel Agenda Terbaru ... 48
Tabel 3.3 Tabel Buku Tamu ... 48
Tabel 3.4 Tabel Galeri ... 49
Tabel 3.5 Tabel Tipe Kamar... 49
Tabel 3.6 Tabel Kondisi ... 50
Tabel 3.7 Tabel Fasilitas Hotel ... 50
Tabel 3.8 Tabel Fasilitas ... 51
Tabel 5.1 Perhitungan Kuisioner User Pertanyaan Nomor 1 ... 80
Tabel 5.2 Perhitungan Kuisioner User Pertanyaan Nomor 2 ... 81
Tabel 5.3 Perhitungan Kuisioner User Pertanyaan Nomor 3 ... 81
Tabel 5.4 Perhitungan Kuisioner User Pertanyaan Nomor 4 ... 82
Tabel 5.5 Perhitungan Kuisioner User Pertanyaan Nomor 5 ... 82
Tabel 5.6 Perhitungan Kuisioner User Pertanyaan Nomor 6 ... 83
Tabel 5.7 Ringkasan Hasil Kuisioner Administrator ... 86
xxii
DAFTAR LISTING
1 BAB I PENDAHULUAN
I.1 Latar Belakang
Informasi selalu dicari oleh setiap orang dari zaman ke zaman. Pada zaman dahulu untuk mendapatkan informasi dilakukan dari mulut ke mulut. Sejak ditemukannya mesin, akhirnya media informasi ditampilkan dalam bentuk media cetak seperti surat kabar. Seiring dengan berkembangnya zaman dan rasa keingintahuan yang tinggi untuk mendapatkan informasi yang tepat dan akurat, maka berkembanglah media cetak dan media elektronik. Contoh media cetak yaitu surat kabar, majalah, brosur, flayer, spanduk, dan lain-lain. Contoh media elektronik yaitu radio dan televisi. Media cetak mengalami perluasan sejak ditemukannya internet pada tahun 1980-an. Pada awalnya media cetak disajikan dalam bentuk koran atau surat kabar, dengan adanya media internet maka informasi disajikan dalam bentuk surat kabar elektronik. Informasi dapat dengan mudah di akses melalui website. Untuk mengakses website kita harus terhubung dengan jaringan internet. Setelah terhubung dengan jaringan internet, maka kita dapat mencari informasi yang kita perlukan kapan saja dan dimana saja.
Hotel Kota yang terletak di jalan Jlagran no.1 sudah memiliki website berbasis HTML. Informasi yang disajikan oleh Hotel Kota sampai dengan saat ini masih manual seperti brosur, leflet dan website berbasis HTML yang menyajikan informasi tentang profil hotel, harga kamar, fasilitas hotel, galeri hotel dan contact
hotel. Hotel Kota sudah memiliki aplikasi informasi berupa website yang bersifat statis. Kelemahan dari website yang sudah ada adalah masyarakat / pelanggan belum bisa mendapatkan informasi yang jelas mengenai jenis kamar dan fasilitas – fasilitas yang ada di kamar hotel melalui website tersebut. Selain itu admin mengalami kesulitan saat harus mengupdate data-data kamar maupun fasilitas hotel mengingat website yang ada masih bersifat statis. Untuk mengatasi masalah tersebut, maka penulis tertarik untuk membuat aplikasi informasi kamar hotel berbasis web dengan menggunakan PHP dan MySQL.
I.2 Rumusan Masalah
Bagaimana membangun aplikasi informasi kamar hotel berbasis web yang dinamis dan sesuai untuk Hotel Kota?
I.3 Batasan Masalah
Aplikasi yang dibuat meliputi profil hotel, tipe kamar, fasilitas hotel, pengisian buku tamu, agenda terbaru dan contact.
I.4 Tujuan dan Manfaat penelitian
Tujuan dari penelitian ini adalah membuat aplikasi informasi kamar hotel berbasis web dengan data yang dinamis menggunakan pemrograman PHP dan MySQL pada Hotel Kota Yogyakarta.
3
domestik dan pemimpin rombongan (Tour Guide) untuk mengetahui kamar-kamar apa saja yang ada di Hotel Kota saat akan berlibur ke Yogyakarta.
I.5 Metodologi Pengembangan Perangkat Lunak
Metodologi pengembang perangkat lunak yang digunakan adalah rekayasa perangkat lunak terstruktur yang terdiri dari tahap-tahap:
1. Analisa Kebutuhan Sistem
Tahap ini merupakan proses penemuan, perbaikan, pemodelan dan menspesifikasikan sistem. Pada tahap ini kebutuhan data, aliran informasi dan kontrol serta kelakuan sistem dibuat.
2. Desain Sistem
Pada tahap ini berfokus pada disain basis data dan disain antarmuka. 3. Implementasi Sistem
Pada tahap ini hasil desain diterjemahkan ke dalam bahasa pemrograman kemudian dilakukan uji coba di laboratorium apakah program yang dibuat dapat berjalan sesuai yang diharapkan.
4. Uji coba terhadap User dan Admin.
I.6 Sistematika Penulisan
BAB I PENDAHULUAN
Pada bab ini berisi informasi tentang latar belakang, rumusan masalah, batasan masalah, tujuan dan manfaat penelitian, metodologi
pengembangan perangkat lunak dan sistematika penulisan laporan.
BAB II LANDASAN TEORI
Pada bab ini berisi dasar teori tentang Sistem Informasi Web, Metodologi Rekayasa Perangkat Lunak Terstruktur, Alat-alat pembangun sistem, HTML, PHP, MySQL, Macromedia Dreamweaver 8.
BAB III ANALISIS DAN PERANCANGAN SISTEM
Berisi analisis sistem yang sudah ada, perencanaan dan perancangan sistem yang dibuat meliputi: Data Flow Diagram (DFD), Entity Relasional Diagram (E-R Diagram), perancangan basis data dan perancangan antar muka web.
BAB IV IMPLEMENTASI SISTEM
Bab ini berisi tentang implementasi perancangan sistem dalam bahasa pemrograman PHP dan DBMS MySQL.
BAB V ANALISA HASIL
Bab ini menjelaskan hasil dari implementasi dari web yang dibuat beserta kelebihan dan kekurangannya.
BAB VI KESIMPULAN & SARAN
5 BAB II
LANDASAN TEORI
2.1 Sistem Informasi Web
World Wide Web (WWW) biasa disebut juga 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 dengan mengklik link yang ada.
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 dinamis (Kadir, 2003).
2.1.1 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 (Kadir, 2003):
a) Dapat melakukan hosting situs web dimanapun dengan biaya yang lebih rendah dibandingkan web dinamis.
b) 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.
c) 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 halaman web yang ditulis dengan menggunakan HTML.
7
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.
2.1.2 Web Dinamis
Situs web dinamis adalah situs web yang dalam menampilkan informasinya memisahkan antara isi dan presentasi, dan isinya bersifat dinamis atau dapat diubah setiap saat tanpa mengubah seluruh dokumen HTML.
Keuntungan web dinamis dibanding web statis (Kadir, 2003):
a) Biaya pemeliharaan lebih murah dibandingkan membayar untuk memprogram ulang setiap kali membutuhkan perubahan situs web.
b) 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. c) 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
9
dimungkinkan untuk membentuk aplikasi berbasis web (Web based application) (Kadir,2009).
2.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).
2.2.1 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 browser pada klien tidak mendukung fitur kode perluasan HTML. Kelebihan 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).
2.2.2 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).
Contoh teknologi yang berjalan di server adalah Common Gateway Interface
(CGI), Active Server Page (ASP), PHP, Java Server Page (JSP).
2.3 Kriteria Pengembangan Web
Ada beberapa kriteria yang harus dipenuhi dalam proses pengembangan web yang baik, yaitu (Suyanto, 2009) :
A. Usability
11
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 pengunjung bisa pergi. Dengan demikian, pengunjung dapat menemukan hal 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
13
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 feedback, contohnya adalah
critiques, comments, question, pooling/survey.
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.4 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)
15
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.4.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.
Use Case Representasi fungsionalitas atau layanan yang diberikan sistem kepada pemakai. Asosiasi Relasi antara actor dan usecase dimana ada
interaksi yang terjadi di dalamnya. Tabel 2.1 Notasi Use Case Diagram
2.4.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 Nama Keterangan
Circle Simbol ini menggambarkan proses. Proses merupakan
17
Square Simbol ini merepresentasikan external agents.
External agents merupakan batas sistem dari kerangka sistem informasi yang dibuat.
nama data store
Open-Ended
Boxes
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.
Arrow Simbol ini merepresentasikan aliran data atau input
dan output, ke dan dari proses.
Tabel 2.2 Notasi Data Flow Diagram
2.4.3 Entity Relational 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 merancang struktur basis data, sehingga basis data dapat memfasilitasi keperluan
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.
Simbol Nama Keterangan
Entitas
Merupakan sebuah objek yang nyata dan dapat dibedakan dari sesuatu yang lain. Contoh entitas : mahasiswa, guru, dsb.
Relasi
Merupakan hubungan antar entitas. Ada 3 jenis relasi yaitu : relasi one to one, relasi one to many, relasi many to many.
Atribut
19
Primary Key Merupakan sebutan untuk mewakili objek entitas yang menjadi atribut identifier.
Tabel 2.3 Notasi Entity Relationship Diagram
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.5 Alat-alat Pembangun Sistem Informasi Berbasis Web 2.5.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 klien dan dibaca dari atas ke bawah tanpa adanya lompatan-lompatan perintah. Sedangkan pengaturan format teks dan pembentukan link maupun penampilan gambar pada objeknya diatur langsung menggunakan tag-tag HTML (Kadir, 2003).
2.5.1.1 Struktur dokumen HTML
Secara sederhana HTML terdiri dari 2 bagian yaitu header dan body. Struktur HTML diapit oleh tag awal <html> dan tag terakhir </html>
Standar penulisannya adalah: <HTML>
<HEAD>
<TITLE> Judul Dokumen </TITLE> </HEAD>
<BODY>
Isi program </BODY>
</HTML>
2.5.1.2 Perintah-perintah pada HTML 1. Heading
21
HTML. Heading berbeda dengan <TITLE> yang tidak dapat muncul dalam halaman web.
2. Paragraf
Untuk membuat paragraph digunakan tag <P> lalu dapat ditulis isi paragraph dan paragraph tersebut harus diakhiri dengan tag penutup </P>. posisi paragraph diatur dengan atribut ALIGN yang biasa diikuti oleh LEFT untuk posisi paragraph rata kiri, CENTER untuk paragraph rata tengah dan RIGHT untuk paragraph rata kanan.
3. BR
Tag line break digunakan untuk menulis teks pada baris berikutnya. 4. Font
Digunakan untuk mengatur huruf HTML. Tag </FONT> memiliki beberapa atribut antara lain:
a. mengatur ukuran font
menggunakan SIZE dengan nilai 1 untuk ukuran terkecil dan nilai 7 untuk ukuran terbesar.
Perintah yang digunakan:
<FONTSIZE = 1 > ukuran font 1 </FONT> b. Mengatur jenis font
Menggunakan FACE yang kemudian diikuti dengan jenis font yang diinginkan.
Perintah yang digunakan:
<FONTFACE = “arial”> jenis huruf arial </FONT> c. Mengatur warna
Menggunakan COLOR. Untuk memberikan nilai atribut COLOR terdapat dua cara yaitu dengan menyebutkan warna seperti red, green, blue, atau dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna. Misalnya FF0000 untuk warna red, 00FF00 untuk warna green, dan 0000FF untuk warna blue. Untuk warna yang lain dapat menggabungkan antara warna-warna dasar diatas.
Perintah yang digunakan:
<FONTCOLOR =#0000FF> atau <FONTCOLOR = “red”> d. Table
Untuk membuat sebuah table digunakan perintah <table> …… </table> kemudian diikuti perintah <TR> …… </TR> Untuk membuat sebuah baris dan <TD> …. </TD> untuk membuat sebuah kolom.
5. Frame
Digunakan untuk membagi satu layer menjadi beberapa frame atau layer. Perintah yang digunakan:
<frameset rows = “,” cols = “,”>
<frame SCR = “ “ name = “ “ target = “ “ scrolling = “no”> <frame SCR = “ “ name = “ “ target = “ “ scrolling = “no”> </frameset>
23
Framename untuk member nama tiap bagian frame
Target dari menu yang dipilih, tampilan tersebut akan ditampilkan pada bagian yang mempunyai nama frame yang sama.
SCR menentukan nama file program yang akan diakses pada bagian frame tersebut.
Scrolling menentukan apakah frame tersebut akan diberikan scroll. 6. Link
Perintah Anchor (A) digunakan untuk membuat link. Untuk membuat link ke dokumen HTML lain digunakan perintah:
<A HREF=”nama_dokumen”> teks pada browser </A> 7. Image
Untuk menampilkan suatu gambar, perintah yang digunakan hanya untuk memanggil nama file dari gambar yang akan ditampilkan yaitu:
<img scr = ../image/$nama_gbr height = 50> (yudhi purwanto,2001) 2.5.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 source software 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, Windows NT, dan Macintosh.
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.
25
2.5.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 :
mysql_select_db(nama database, koneksi)
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()
Fungsi ini digunakan untuk menghitung jumlah record yang ada pada database. Sintaksnya sebagai berikut :
$jml = mysql_num_rows($qry)
mysql_close()
Fungsi ini digunakan untuk menutup koneksi yang telah dilakukan. Sintaksnya sebagai berikut :
27
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.5.3MySQL
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.
Sebagai program pembuat database, MySQL menggunakan bahasa SQL (Structure Query Language), yaitu bahasa query standar yang digunakan untuk mengakses server database. Dengan SQL tersebut maka MySQL mendukung
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.5.4 Macromedia Dreamweaver 8
Dreamweaver adalah software yang digunakan oleh Web desainer ataupun Web programmer untuk mengembangkan situs web. Ruang kerja, fasilitas dan kemampuan Dreamweaver mampu meningkatkan produktivitas dan efektivitas dalam mendesain ataupun membangun situs web. Dreamweaver juga dilengkapi dengan fasilitas yang cukup lengkap. Maka dari itu aplikasi yang akan dibuat ini menggunakan Macromedia Dreamweaver 8.
2.5.4.1 Ruang kerja Macromedia Dreamweaver 8
29
tampilan ruang kerja yang ingin anda gunakan.
Dreamweaver 8 Workspace adalah ruang kerja yang semua jendela dokumen dan panel integrasi pada satu jendela besar, dengan panel group yang berada disisi kanan. Pilihan ini dipakai oleh banyak pengguna. Dreamweaver
Workspace adalah tampilan lama seperti pada Dreamweaver. Setiap dokumen akan berada pada jendela yang terpisah. Ruang kerja pada Draemweaver 8 memiliki komponen yang memberikan fasilitas dan ruang untuk menuangkan kreasi dalam bekerja.
Komponen yang disediakan oleh Dreamweaver 8 antara lain:
A. insert bar
Insert Bar merupakan kumpulan menu yang digunakan untuk memasukkan sebuah objek atau fungsi lainnya ke dalam jendela dokumen. Contoh: image, Layer, Tabel dan lain-lain. Insert Bar juga mempunyai tujuh menu didalamnya yaitu Common, Layout, Forms, Text, HTML, Application dan Flash Elements. Untuk menampilkan dan menggunakan menu yang terdapat pada Insert Bar, Anda dapat meng-klik tombol drop down yang berada di sebelah kiri Insert Bar
B. document toolbar
Document Toolbar digunakan sebagai penempatan file-file yang telah dibuka dan sekaligus untuk menampilkan nama dari file tersebut.
C. Code
Merupakan kumpulan kode program yang telah disusun, dan berfungsi untuk
mengedit listing dari program.
Split
digunakan untuk menampilkan tab dari code view dan design view secara bersamaan.
Design
digunakan sebagai tempat untuk meletakkan objek-objek ke dalam jendela dokumen, seperti Tabel, Form, dan lainnya.
D. document window
Document Window atau biasa disebut dengan jendela dokumen,merupakan tempat untuk menampilkan objek-objek atau kode program daritab code, split, dan design.
E. panel groups
Panel Group berfungsi untuk mengatur halaman web yang telah Anda buat.Contoh : Panel File, berfungsi untuk mencari dan mengetahui letakhalaman file-file yang telah di buat
F. property inspector
31
2.5.4.2 Komponen Ruang kerja Dreamweaver 8
Di dalam ruang kerja Dreamweaver 8 terdapat beberapa komponen utama yang membentuk suatu ruang kerja. Berikut ini keterangan singkat tentang menu yang ada pada Dreamweaver 8. Menu berisi submenu yang biasanya ditampilkan sebagai dropdown menu yang akan muncul ketika anda menekan tombol menu utama
Di dalam sistem menu Dreamweaver 8 terdapat beberapa komponen yang dapat digunakan, yaitu :
A. File Menu
Berisi menu standar seperti New, Open, Save, Cut, Copy, dan Paste. Fole menu juga berisi beberapa perintah tambahan, seperti Preview in Browser dan Print Code.
B. Edit Menu
Berisi perintah seleksi dan pencarian, seperti Select Parent Tag dan Find and Replace, dan menyediakan akses ke Keyboard Shortcut Editor dan Tag Library Editor.
C. View Menu
Mengijinkan anda melihat tampilan dokumen dengan beberapa cara (seperti Design view dan Code view) dan untuk menampilkan atau menyembunyikan beberapa elemen pada dokumen dan peralatan yang dimiliki Dreamweaver 8. D. Insert Menu
Menyediakan alternatif untuk memasukkan objek pada dokumen.
E. Modify Menu
Untuk mengubah properti elemen halaman web atau item lainnya yang dipilih. Menggunakan menu ini dapat mengedit tag, mengubah table dan elemen table dan menampilkan beberapa tindakan yang dapat dilakukkan untuk item pada library da template.
F. Text Menu
Menyediakan perintah yang dibutuhkan untuk melakukan pemformatan pada teks.
G. Commands Menu
Menyediakan akses untuk beberapa macam perintah, termasuk untuk membuat album foto dengan cepat dan melakukan optimasi gambar dengan menggunakan program lain.
H. Site Menu
Menyediakan item menu untuk membuat, membuka, mengedit site. I. Window Menu
Menyediakan akses kesemua panel, inspectors, dan jendela pada Dreamweaver. J. Help Menu
33 BAB III
ANALISIS DAN PERANCANGAN SISTEM
3.1 Analisis Sistem
3.1.1 Gambaran Umum Sistem
Aplikasi yang dikembangkan merupakan sebuah website yang memiliki fasilitas untuk menampilkan informasi tentang hotel berupa teks dan foto yang di buat dengan menggunakan Bahasa Indonesia supaya dapat membantu manajemen hotel dalam mempromosikan produknya serta mempermudah wisatawan dan tour guide
dalam mencari penginapan saat akan berkunjung ke Yogyakarta.
Pada sistem ini, aktor yang terlibat dalam sistem dibedakan menjadi 2 yaitu
User dan Administrator. User (pengunjung hotel) merupakan aktor yang mempunyai hak akses ke dalam sistem meliputi melihat isi website, mengisi buku tamu dan melihat agenda yang diselenggarakan oleh hotel. Sedangkan Administrator
merupakan aktor yang mempunyai hak akses pada bagian administrasi yang berwenang untuk memanipulasi isi website.
Dalam sistem ini, pada bagian user terdapat beberapa menu utama yaitu menu Beranda, Profil, Tipe Kamar, Fasilitas, Galeri, Buku Tamu, Agenda Terbaru dan Hubungi Kami. Menu “ Beranda ” merupakan halaman utama dari sistem ini yang menampilkan sejarah singkat kota Yogyakarta serta ciri khas kota Yogyakarta. Menu “ Profil ” menampilkan informasi mengenai sejarah Hotel Kota sejak pertama kali hotel ini berdiri sampai sekarang. Menu “ Tipe Kamar ” merupakan halaman bagi
user untuk memperoleh informasi detail tentang karakteristik kamar hotel dan harga kamar per malam. Menu “ Fasilitas ” menampilkan informasi fasilitas yang disediakan oleh pihak hotel kota dan kamar apa saja yang memiliki fasilitas tersebut. Menu “ Galeri ” menampilkan sisi unik yang dari Hotel Kota berupa foto. Menu “ Buku Tamu ” merupakan menu yang diperuntukkan bagi user untuk mengirimkan pesan berupa pertanyaan atau kritik dan saran kepada pengelola hotel kota. Menu “ Agenda Terbaru “ berisi tentang acara-acara yang diselenggarakan oleh pihak Hotel Kota dalam periode tertentu. Menu “ Hubungi Kami ” merupakan menu yang diperuntukkan bagi user untuk mengetahui bagaimana cara menghubungi Hotel Kota melalui alamat, telephone atau email.
Pada bagian administrator, terdapat menu untuk mengelola isi website. Seorang administrator dapat mengakses bagian ini dengan melakukan proses login
dengan memasukan username dan password yang dimiliki. Di dalamnya, seorang
administrator dapat melakukan proses menambah, mengubah, dan menghapus isi web.
3.1.2 Pemodelan Kebutuhan Sistem
35
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, setiap user mempunyai hak akses untuk melihat isi website, melakukan pemesanan kamar hotel, dan mengisi buku tamu. Pada gambar 3.1 ditampilkan use case diagram bagi user.
User
(calon pengunjung hotel)
Gambar 3.1 Use Case Diagram User Website Hotel Kota
Lihat Beranda Lihat Profil Hotel
Lihat Tipe kamar Lihat Fasilitas
Lihat Galeri Isi Buku Tamu
Hubungi Kami Lihat Agenda Terbaru
Website Hotel Kota 3.1.2.2 Use Case Diagram Administrator
Pada aplikasi informasi ini, Seorang Administrator dapat memanipulasi data website yaitu login, logout, pengelolaan data beranda, data profil hotel, data tipe kamar, data fasilitas, data galeri, data buku tamu, data agenda terbaru dan data hubungi kami.
Proses pengelolaan data meliputi proses menambah, mengubah dan menghapus data. Use case diagram bagi administrator secara umum dapat dilihat pada gambar 3.2.
Gambar 3.2 Use Case Diagram Administrator
37
3.1.3 Pemodelan Proses
Dalam pemodelan proses, penulis menggunakan Data Flow Diagram (DFD)
untuk menggambarkan aliran data dalam sistem dan proses-proses yang terdapat dalam sistem. Dalam sistem ini, terdapat dua buah kesatuan luar (entitas) yang terlibat di dalam sistem yaitu user 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 dikembangkan dapat dilihat pada gambar 3.3.
Website
Hotel Kota
Admin User
Login, Beranda, Profil, Tipe Kamar, Fasilitas, Galeri, Buku Tamu, Agenda
Terbaru, Hubungi Kami, Logout
Konfirmasi Login, Data Beranda, Data Profil, Data Tipe Kamar, Data Fasilitas, Data Galeri, Data Buku Tamu, Data Berita Terbaru, Data Hubungi Kami,
Konfirmasi Logout
Beranda, Profil, Tipe Kamar, Fasilitas, Galeri, isi Buku Tamu, Agenda Terbaru, Hubungi Kami
Beranda, Profil , Tipe Kamar, Fasilitas, Galeri, Validasi Masukan Buku Tamu, Agenda
Terbaru, Hubungi Kami
Gambar 3.3 Diagram Konteks
3.1.3.2 Diagram 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 hotel Kota ini dibagi menjadi dua subsistem yaitu subsistem user dan subsistem administrator.
39
Gambar 3.4 Diagram Berjenjang Subsistem User
41
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.
Gambar 3.6 DFD Level 0 Subsistem User
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.
Gambar 3.7 DFD Level 0 Subsistem Administrator
43
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.
ADMINISTRATOR
Data Tipe Kamar Baru
Data Tipe Kamar
Data Tipe Kamar Yang Di Hapus Data Profil Baru
Data Profil Yang Di Hapus
11.3p
Data Beranda Yang Di Hapus
Fasilitas
Data Fasilitas Baru
Data Fasilitas
(bagian 1)
ADMINISTRATOR
ID data yang di hapus
ID data yang di hapus Data Baru Agenda Terbaru
Data Galeri Yang Di Hapus Data Baru Galeri
Data Fasilitas Yang Di Hapus Data Baru Fasilitas
45
3.1.4 Pemodelan Data 3.1.4.1 Conceptual Database
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.
Gambar 3.9 Entity Relationship Diagram
3.2 Perancangan Sistem 3.2.1 Disain Database 3.2.1.1 Logical Database
Pada gambar 3.10 dapat dilihat hasil dari conceptual design yang ditampilkan dalam relasi antar tabel.
47
3.2.1.2 Disain Physical
Desain basis data berisi tabel-tabel yang digunakan dalam sistem yaitu : 1. Tabel Admin
Tabel admin berfungsi untuk menyimpan data actor yang diberikan hak akses untuk mengelola isi website, yang dalam hal ini disebut sebagai administrator. Keterangan tabel admin dapat dilihat di tabel 3.1
Nama kolom Tipe Panjang Keterangan
PK id_admin Int 11 id admin
Password Varchar 50 password admin nama_lengkap Varchar 100 nama lengkap admin
Alamat Varchar 50 alamat admin
Telephone Varchar 30 no.Telp / HP admin
Status Enum 5 Status admin
Username Varchar 30 username admin Tabel 3.1 Tabel Admin
2. Tabel Agenda Terbaru
Tabel agenda terbaru berfungsi untuk memberikan informasi tentang acara-acara yang diadakan oleh pihak hotel pada hari yang sudah di jadwalkan. Keterangan tabel agenda terbaru dapat dilihat pada tabel 3.2.
Nama kolom Tipe Panjang Keterangan
PK id_agenda Int 30 id agenda
Tanggal Datetime 30 Tanggal acara
Judul Varchar 50 Judul acara
Isi Text Informasi seputar acara
Tabel 3.2 Tabel Agenda Terbaru 3. Tabel Buku Tamu
Tabel buku tamu berfungsi untuk menyimpan masukan dari user yang berguna untuk kemajuan hotel. Keterangan tabel buku tamu dapat dilihat pada tabel 3.3.
Nama kolom Tipe Panjang Keterangan
PK id_buku_tamu Int 11 id buku tamu
Nama Varchar 50 Nama pengirim
Email Varchar 100 Email pengirim
Subjek Varchar 40 Subjek pertanyaan
Pesan Text Kritik atau saran
49
4. Tabel Galeri
Tabel galeri berfungsi untuk mengetahui foto Hotel Kota. Keterangan tabel galeri dapat dilihat di tabel 3.4
Nama kolom Tipe Panjang Keterangan
PK Id_galeri Int 11 id galeri
Foto Varchar 20
Nama Varchar 30 Nama Foto
Tabel 3.4 Tabel Galeri
5. Tabel Tipe Kamar
Tabel tipe kamar berfungsi untuk mengetahui jenis kamar yang ada di hotel kota. Keterangan tabel tipe kamar dapat dilihat di tabel 3.5
Nama kolom Tipe Panjang Keterangan
PK Id_tipe_kamar Int 11 id tipe
Id_kondisi Int 11 Id kondisi
Id_fasilitas Int 11 Id fasilitas
Nama Varchar 50 Nama kamar
Photo Varchar 100 Gambar kamar
Tabel 3.5 Tabel Tipe Kamar
6. Tabel kondisi
Tabel kondisi berfungsi untuk harga kamar berdasarkan kondisi liburan atau tidak. Keterangan tabel kondisi dapat dilihat di tabel 3.6
Nama kolom Tipe Panjang Keterangan
PK Id_kondisi Varchar 30 id kondisi Keterangan Varchar 50 Isi
Harga Double Harga kamar
Tabel 3.6 Tabel Kondisi
7. Tabel Fasilitas Hotel
Tabel fasilitas berfungsi untuk mengetahui fasilitas apa saja yang ada disediakan hotel kota. Keterangan tabel fasilitas dapat dilihat pada tabel 3.7
Nama kolom Tipe Panjang Keterangan
PK id_fasilitas Int 11 id fasilitas
Nama Varchar 30 Nama Fasilitas
Photo Varchar 100 Photo Fasilitas
51
8. Tabel Fasilitas
Tabel fasilitas berfungsi untuk mengetahui fasilitas apa saja yang ada disediakan hotel kota. Keterangan tabel fasilitas dapat dilihat pada tabel 3.8.
Nama kolom Tipe Panjang Keterangan
PK id_fasilitas Int 11 id fasilitas
Shower Enum ‘tidak ada’,’ada’ Shower
Wifi Enum ‘tidak ada’,’ada’ Koneksi internet
AC Enum ‘tidak ada’,’ada’ AC
Breakfast Enum ‘tidak ada’,’ada’ Sarapan untuk 2 orang Room Service Enum ‘tidak ada’,’ada’ Room service
Private Bathroom Enum ‘tidak ada’,’ada’ Private bathroom Telephone Enum ‘tidak ada’,’ada’ Telephone Refrigerator Enum ‘tidak ada’,’ada’ Refrigerator
Tabel 3.8 Tabel Fasilitas
3.2.2 Disain Antarmuka (Graphical User Interface Design) 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”
53
b). Desain Halaman “Profil”
Gambar 3.12. Desain Halaman Profil c). Desain Halaman “Tipe Kamar”
Gambar 3.13. Desain Halaman Tipe Kamar
d). Desain Halaman “Fasilitas”
Gambar 3.14. Desain Halaman Fasilitas e). Desain Halaman “Galeri”
55
f). Desain Halaman “Buku Tamu”
Gambar 3.16. Desain Halaman Buku Tamu
g). Desain Halaman “Agenda Terbaru”
Gambar 3.17. Desain Halaman Agenda Terbaru
h). Desain Halaman “Hubungi Kami”
57 BAB IV
IMPLEMENTASI SISTEM
Implementasi sistem merupakan tahapan pengkodean dari hasil analisa dan perancangan system. Pada bab III telah dijelaskan mengenai perancangan aplikasi website Hotel Kota, dan pada bab IV ini akan dijelaskan mengenai implementasi sistem yang meliputi implementasi database dan antarmuka (interface) halaman website. Adapun perangkat lunak (software) yang digunakan dalam pembuatan sistem ini adalah :
• Sistem Operasi : Windows XP Profesional Service pack 2 • Server Database : WampServer
• Database tool : wamp
• Bahasa Pemrograman : PHP 5.0 • Editor : Macromedia Dreamweaver 8 • Browser : Mozilla Firefox (3.5.0)
4.1 Implementasi Database
4.1.1 Pembuatan Database
Pada tahap ini dilakukan pembuatan database pada MySQL dengan menggunakan tool SQLyog. Database yang dibuat berisi tabel-tabel yang akan diperlukan oleh sistem. Listing program 4.1 merupakan sintaks pembuatan database
yang diberi nama “hotel” :
Listing 4.1 Pembuatan Database
Gambar 4.1 Implementasi Pembuatan Database
4.1.2 Pembuatan Tabel Admin
Dalam website hotel kota terdapat 7 tabel yang dibuat berdasarkan hasil perancangan pada bab III. Tabel-tabel tersebut adalah tabel admin, kondisi, tipe kamar, buku tamu, agenda terbaru, gallery, dan fasilitas. Berikut merupakan hasil dump dari tabel-tabel tersebut :
59
a) Tabel Login
Tabel login digunakan untuk melakukan pengecekan user yang memiliki hak untuk mengelola isi website. Sintaks pembuatan tabel login dapat dilihat pada listing
program 4.2.
Listing 4.2 Pembuatan Tabel Login
Gambar 4.2 Implementasi Tabel Login
<body>
<a href="http://localhost/hotel_kota/index.php/web/main"
class="back">Back to home</a><div id="login_box"> <h1>Login Admin/Staff</h1>
<form
action="http://localhost/hotel_kota/index.php/login/process_logi n" method="post" name="login_form" id="login_form">
<p>
b). Tabel Admin
Tabel admin digunakan untuk menyimpan data aktor yang diberi hak akses untuk mengelola isi website. Sintaks pembuatan tabel admin dapat dilihat pada listing
program 4.3.
Listing 4.3 Pembuatan Tabel Admin
61
c). Tabel Kondisi
Tabel admin digunakan untuk menyimpan data aktor yang diberi hak akses untuk mengelola isi website. Sintaks pembuatan tabel admin dapat dilihat pada listing
program 4.4.
Listing 4.4 Pembuatan Tabel Kondisi
Gambar 4.4 Implementasi Tabel Kondisi
CREATE TABLE `kondisi` (
`id_kondisi` int(11) NOT NULL auto_increment,
`keterangan` varchar(50) collate latin1_general_ci NOT NULL default '',
`harga` double NOT NULL default '0', PRIMARY KEY (`id_kondisi`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=7 ;
