Tinjauan Pustaka T1 672009266 Full text

8

1. Pendahuluan

Kabupaten Semarang yang merupakan salah satu daerah tujuan wisata di Jawa Tengah yang memiliki potensi kepariwisataan, yaitu Taman Wisata Kopeng. Desa Wisata Kopeng terletak di Kecamatan Getasan Kabupaten Semarang. Letak geografisnya berada di lereng gunung Merbabu, gunung Telomoyo dan gunung Andong di ketinggian 1450 m dari permukaan laut. Menyajikan panorama yang memikat dalam nuansa alam pedesaan dipadu dengan keindahan hamparan tanaman bunga dan sayuran membentuk suasana asri nan menyejukkan. Daerah tujuan wisata alam ini berjarak tempuh sekitar 14 km dari kota Salatiga dan sekitar 54 km dari kota Semarang. Berkunjung ke Desa Wisata Kopeng, wisatawan dapat menikmati wisata alam pegunungan, bunga, petik strawberi, berkuda, kerajinan, budaya dan kuliner. Wana wisata Kopeng memiliki beberapa lokasi ideal yang bisa digunakan sebagai rekreasi keluarga, perkemahan, outbond dan acara rapat serta seminar pada institusi. Perkembangan teknologi saat ini telah berkembang sangat pesat dan membawa perubahan yang sangat besar karena dengan teknologi tersebut informasi dapat didapat dengan cepat, akurat dan tidak terbatas oleh waktu dan tempat. Salah satu sektor yang berkembang dalam perkembangan teknologi adalah di bidang pariwisata yang memberikan andil untuk mendistribusikan informasi objek-objek wisata yang lebih interaktif khususnya melalui teknologi internet. Dengan harapan setelah adanya website pariwisata yang menggunakan Responsive Web Design ini akan terjadi peningkatan pengunjung, baik pada hari- hari biasa maupun hari libur. Dan memudahkan pengunjung untuk melakukan pemesanan hotel dan mengetahui informasi tentang hotel di Taman Wisata Kopeng. Berdasarkan permasalahan Website yang terjadi di Taman Wisata Kopeng maka dikembangkan Webite Taman Wisata Kopeng berbasis web Responsive Web Desaign RWD.

2. Tinjauan Pustaka

Penelitian pada jurnal dengan judul Perancangan Website Responsive Sebagai Media Informasi dan E-Learning pada SMA Negeri 1 Kota Bima Menggunakan Framework Bootstrap. Pada penelitian dengan jurnal yang berjudul Perancangan Website Responsive Sebagai Media Informasi dan E-Learning pada SMA Negeri 1 Kota Bima Menggunakan Framework Bootstrap didapatkan bahwa dengan menerapkan web responsive menggunakan framework Bootstrap dapat mempermudah siswa dalam belajar diluar sekolah menggunakan pc atau gadget dengan tampilan yang bisa menyesuaikan dengan device yang digunakan. Berdasarkan penelitian sebelumnya maka dari itu melalui penelitian ini, akan diterapkan Responsive pada pembuatan Website pariwisata menggunakan framework Bootstrap untuk Mempermudah Wisatawan dalam mengakses website Taman Wisata Kopeng. 9 PHP singkatan dari Hypertext Preprocessor yang digunakan sebagai bahasa script server-side dalam pengembangan web yang disisipkan pada dokumen HTML. Penggunaan PHP memungkinkan web dapat dibuat dinamis sehingga maintenance web menjadi lebih mudah dan efisien [1]. Gambar 1 merupakan alur kerja dari PHP yang didukung bermacam-macam sistem database. Gambar 1 Alur Kerja PHP [2] PHP pertama kali dibuat oleh Rasmus Lerdroft, seorang programmer C, sehingga sintaks PHP mirip dengan bahasa C. Semula PHP digunakan Rasmus untuk menghitung jumlah pengunjung didalam suatu web yang kemudian dikenal dengan Personal Home Page Tools versi 1.0 dan dapat dipakai dengan gratis. Versi ini pertama kali keluar pada tahun 1995. Isinya adalah sekumpulan script PERL yang dibuat untuk menciptakan halaman web yang dinamis. Kemudian pada tahun 1996 Rasmus mengeluarkan PHP versi 2.0 yang kemampuannya mampu mengakses database dan dapat terintegrasi dengan HTML. Kemudian pada tanggal 6 Juni 1998 dan 22 Mei 2000 muncul PHP versi 3.0 dan 4.0 yang lebih lengkap dibandingkan versi sebelumnya. Responsive adalah teknik untuk menbuat layout website yang dapat secara otomatis menyesuaikan dengan device yang digunakan pengunjung, baik ukuran maupun orientasinya. Pada artikel Ethan Marcotte mengulas tentang tiga teknik dalam pembuatan web Responsive, yaitu flexible layout, flexible images, dan media queries ke dalam satu pendekatan dan menamakannya Responsive Design. Hypertext Markup Language HTML merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan pada web browser. Twitter Bootstrap adalah sebuah alat bantu untuk menbuat tampilan website yang dapat mempercepat pekerjaan seseorang pengembang website ataupun pendesain halaman website. Sesuai dengan namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan. Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, table, tombol, form, navigasi, dan komponen 10 lainnya dalam sebuah website hanya dengan memanggil fungsi CSS Class dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen- komponen lainnya yang dibangun menggunakan JavaScript. Cascading Style Sheets CSS merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebuh terstruktur dan seragam. CSS bukan merupakan pemrograman. Sama halnya Styles dalam aplikasi pegolahan kata seperti Microsoft word yang dapat mengatur beberapa Style, misalnya Heading, Subbab, bodytext, Footer, images, dan Style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas File. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript dapat bekerja disebagian besar browser seperti Internet Explorer IE, Mozilla Firefox, Netscape, dan Opera. Code JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT. 3. Metode Penelitian Setelah mengetahui permasalahan dan kebutuhan penelitian, maka diperlukan suatu metode penelitian untuk mencapai tujuan penelitian yang telah ditentukan. Metode penelitian yang digunakan pada penelitian ini dapat dilihat pada gambar 2. Analisis Masalah dan Kebutuhan Studi Pustaka Pengembangan Sistem Kesimpulan dan Saran Laporan dan Publikasi Gambar 2 Tahapan Penelitian Pada tahap pertama metode penelitian, yaitu studi pustaka. Hasil pada tahap pertama adalah pemahaman teori tentang Responsive Web Design, Twitter Bootstrap, bahasa pemrograman PHP, basis data MySql dan NetBeans sebagi editor untuk mengimplementasikan aplikasi, serta Unified Modelling Language sebagai model perancangan aplikasi. Tahap kedua, yaitu merancang template dengan menggunakan bootstrapt, mendapatkan source code dari bootstrapt terlebih dahulu. dan membangun web 11 tersebut yang memanfaatkan source code bootstrap. Untuk menjalankan komponen-komponen bawaan dari bootstrap seperti modal dialog, navigation agar bias berjalan dibutuhkan jquery. Tahap selanjutnya adalah tahap ketiga, yaitu melakukan uji coba terhadap sistem yang telah dibangun pada tahap sebelumnya. Tahap ini dilakukan untuk mengukur unjuk kerja website yang dibangun, Pengujian selanjutnya adalah menguji aplikasi dalam menampilkan data-data informasi Taman Wisata Kopeng dan informasi hotel yang diperoleh dari Database, yang kemudian disajikan dalam bentuk tabel. Hasil pada tahap ketiga ini adalah sebuah aplikasi berbasis web dengan menggunakan Responsive Web Design yang layak dipergunakan untuk pengembangan obyek Taman Wisata Kopeng. Tahap terakhir, yaitu tahap pengambilan kesimpulan dan saran, dilanjutkan dengan pembuatan laporan. Laporan diwujudkan dalam bentuk laporan penelitian dan artikel ilmiah sebagai draft jurnal publikasi hasil penelitian ini. Admin Pengunjung Kelola Kamar Kelola Layanan Kelola Fasilitas Kelola Gallery Ubah Tambah Hapus Lihat Ubah Tambah Hapus Lihat Ubah Tambah Hapus Lihat Ubah Tambah Hapus Lihat extend extend extend extend extend extend extend extend extend extend extend extend extend extend extendextend Lihat Kamar Lihat Layanan Lihat Fasilitas Lihat Gallery Lihat Home Gambar 3. Use Case Diagram Aplikasi Gambar 3 merupakan use case diagram yang terdiri atas dua aktor yaitu admin dan Pengunjung. aktor admin memiliki hak akses dalam sistem. Admin bertugas mengelola data-data seperti data kamar, layanan, fasilitas, dan gallery. Sedangkan pada aktor Pengunjung hanya dapat melihat informasi dari tampilan home, kamar, layanan, fasilitas dan gallery. 12 Admin Sistem Pengunjung Atur Data Kamar Edit Kamar Tambah Kamar Hapus Kamar Simpan Atur Data Laayanan Edit Layanan Tambah Layanan Hapus Layanan Atur Data Fasilitas Edit Fasilitas Tambah Fasilitas Hapus Fasilitas Atur Data Gallery Edit Gallery Tambah Gallery Hapus Gallery Lihat Kamar Lihat Layanan Lihat Fasilitas Lihat Gallery Mulai Selesai Gambar 5. Ativity Diagram Gambar 5 menggambarkan aktifitas yang terjadi untuk Admin dan Pengunjung. Dimulai dari login Admin dengan masuk ke menu Admin pada laman Website, kemudian akan masuk ke menu Admin. Di dalam menu Admin, Admin bisa atur data kamar, layanan, fasilitas, dan gallery. Dan data akan disimpan pada system. Didalam Diagram aktifity ini user hanya bisa melihat atau membaca informasi saja. 13

4. Hasil dan Pembahasan