Pengembangan Web Taman Wisata Kopeng Berbasis Responsive

1

Pengembangan Web Taman Wisata Kopeng Berbasis Responsive

Web Design (RWD)

Artikel Ilmiah

diajukan kepada

Fakultas Teknologi Informasi

untuk memperoleh Gelar Sarjana Komputer

Peneliti:

Agus Kistiyantoro (672009266)

Suprihadi, S.Si., M.Kom.

Program Studi Teknik Informatika


Universitas Kristen Satya Wacana

Salatiga

Mei 2016

2

3

4

5

6

7

Pengembangan Web Taman Wisata Kopeng Berbasis Responsive

Web Design (RWD)

1) Agus Kistiyantoro, 2)

Suprihadi


Universitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50711, Indonesia

E-mail : 1) [email protected],

2) [email protected]

Abstract

Design and this study attempts to develop information system based tourism web

responsive design that would facilitate users in access to information service kopeng park

.Design for development website park kopeng it uses hardware intel® celeron® ,

processor1.50 ghz and memoryram 4 gb .The research in the development of information

park web based kopeng responsive using twitter bootstrap is to collect data , designing

programs , make the program , and testing , if in testing program does not runs well

repair , so as to produce information systems park kopeng decent accessed online .The

data used in this research obtained from interviews directly with the park kopeng , and

the internet .By applying responsive web design at the website park kopeng allow users to

access information service kopeng with young tourism.

Keywords : Responsive Web Design, Twitter Bootstrapt

Abstrak

Perancangan dan penelitian ini bertujuan untuk mengembangkan sistem informasi

pariwisata berbasis Responsive Web Design yang dapat memudahkan pengguna dalam

mengakses layanan informasi Taman Wisata Kopeng. Perancangan untuk pengembangan

Website Taman Wisata Kopeng ini menggunakan hardware intel® Celeron®,

Processor1.50 GHz dan MemoryRAM 4 GB . Alur penelitian dalam pengembangan

informasi Taman Wisata Kopeng berbasis web Responsive dengan menggunakan twitter

bootstrap adalah mengumpulkan data, merancang program, membuat program, dan

pengujian, jika dalam pengujian program tidak berjalan baik maka dilakukan perbaikan,

sehingga menghasilkan sistem informasi Taman Wisata Kopeng yang layak diakses

secara online. Data yang digunakan dalam penelitian ini didapat dari hasil wawancara

langsung dengan staff taman Wisata Kopeng, dan internet. Dengan menerapkan

Responsive Web Design pada website Taman Wisata Kopeng memudahkan pengguna

dalam mengakses layanan informasi pariwisata kopeng dengan mudah.

Kata Kunci: Responsive Web Design, Twitter Bootstrap

1 Mahasiswa Fakultas Teknologi Informasi Universitas Kristen Satya Wacana

2 Staf Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana

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.

javascript:void(0)

javascript:void(0)

javascript:void(0)

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

TambahHapus

Lihat

Ubah

Tambah Hapus

Lihat

<<extend>><<extend>>



<<extend>>

<<extend>>


<<extend>>

<<extend>>

<<extend>> <<extend>>


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

Pada bab ini berisi tentang hasil dan pembahasan yang meliputi

implementasi rancangan pengembangan web Taman Wisata Kopeng Berbasis

Responsive, dan pembahasan hasil implementasi web yang digunakan.

Pembahasan berisi uraian hasil implementasi berdasarkan yang tertulis dalam bab

3 (tiga). Sedangkan analisis hasil akan dilakukan terhadap hasil yang telah diuji

dari aplikasi.

Metode pengembangan sistem yang dipergunakan pada penelitian ini

adalah metode prototype. Dalam proses implementasi, menghasilkan 2 (dua)

prototipe, yang berdasarkan hasil pengujian merupakan prototype aplikasi

presentasi transaksi jual beli yang sudah sesuai dengan kebutuhan pengelola dan

pemilik pasar digital. Supaya lebih memperjelas proses pengembangan sistem

dapat dilihat dalam Tabel 1.

Tabel 1 Dokumentasi Prototipe I

No Spesifikasi Deskripsi Testing dan Validasi Ket.

1 Kelola Website

bagi Admin

Proses Create, Update

dan Delete kamar pada

website taman wisata

kopeng

Admin menambah,

mengedit dan menghapus

kamar taman wisata

kopeng.

OK


dan Delete layanan pada


kopeng

Admin menambah,


layanan taman wisata

kopeng.

OK


dan Delete fasilitas pada


kopeng

Admin menambah,


daftar harga dan fasilitas

lainnya di taman wisata

kopeng.

OK


dan Delete gallery pada


kopeng

Admin menambah,


foto gallery yang

disediakan taman wisata

kopeng.

OK

Penerapan Responsive pada web Taman Wisata Kopeng dipergunakan

untuk lebih pengembangkan pengunjung taman wisata kopeng, Untuk dapat

mewujudkan tersebut, maka diperlukan teknologi untuk memudahkan pengunjung

dalam impelementasinya. Dipilih responsiveweb design karena tampilan bisa

menyesuaikan dengan device yang digunakan user sehingga user menjadi nyaman

mengaksesnya.

Selama ini web Taman Wisata Kopeng Masih mengunakan template web

yang biasa, sehingga disaat user mengakses dengan menggunakan mobile

tampilan menjadi terpotong sesuai ukuran device nya.

14

Gambar 6. Tampilan web dengan menggunakan ponsel

Gambar 7. Tampilan web dengan menggubakan Tablet

Pada Gambar 6 dan Gambar 7 adalah tampilan Website menggunakan

device mobile. Pada web tersebut akan terpotong dan untuk mengakses laman user

harus menggeser atau memperbesar laman Web.

karena hal tersebut, maka sistem diberi layanan login seperti terlihat pada

gambar 8.

Gambar 8 Form Login

15

Setelah login berhasil maka sistem akan menampilkan laman Admin

seperti pada gambar 9, dimana Admin bisa mengelola konten yang ada seperti

kamar, layanan, fasilitas, dan gallery.

Gambar 9 Tampilan Beranda Kamar Admin

Pada gambar 9 adalah tampilan untuk mengelola kamar. Admin bisa bisa

menambah kamar, edit tariff kamar, dan menghapus kamar.

Gambar 10 Tampilan Beranda Layanan Admin

Pada gambar 10 adalah tampilan untuk mengelola Layanan yang

didalamnya berupa menu makanan dan minuman. Admin bisa menambah menu

makanan dan minuman, edit harga makanan dan minuman, dan menghapus menu.

16

Gambar 11 Tampilan Beranda Fasilitas Admin

Pada gambar 11 adalah tampilan untuk mengelola Fasilitas yang

disediakan di obyek Taman Wisata Kopeng. Admin bisa menambah Fasilitas, edit

tariff Fasilitas , dan menghapus Fasilitas.

Gambar 12 Tampilan Beranda Gallery Admin

Pada gambar 12 adalah tampilan untuk mengelola Gallery berupa Foto-

foto fasilitas di obyek Taman Wisata Kopeng. Admin bisa menambah Fasilitas,

edit tariff Fasilitas , dan menghapus Fasilitas.

17

Kode Program 1 Adalah Kode program index.html untuk memanggil Bootstrap 1. <!DOCTYPE html>

2. <html>

3. <head>

4. <meta charset="utf-8">

5. <title>My First Bootstrap project</title>

6. <link rel="stylesheet"

7. type="text/css"href="css/bootstrap.css">

8. </head>

9. <body>

10. 

12. <script src="http://code.jquery.com/jquery

13. 1.10.1.min.js"></script>

14. <script src="js/bootstrap.js"></script>

15. </body>

16. </html>

5. Simpulan

Dari data diatas, dapat menyimpulkan bahwa semakin berkembangnya

jaman maka semakin pula kebutuhan RWD sangat dibutuhkan bagi para web

designer. Hal ini tidak memungkinkan jika pada tahun tahun mendatang

penerapan RWD sangat diwajibkan. Dalam pengembangan Website Taman Wisata

Kopeng dengan menggunakan Responsive Web Design yang dapat menyesuaikan

resolusi layar pengunjung, maka akan semakin banyak pula pengunjung yang

akan nyaman ketika mengunjungi web tersebut.

Pembangunan website ini masih bisa dibuat semenarik mungkin dan

dikembangkan lebih lanjut terutama dalam tampilan sistemnya. Dari segi yang

disajikan mungkin belum sepenuhnya sempurna, oleh karena itu, ada baiknya

dengan menambah beberapa informasi yang lebih lengkap. Agar website ini

kelihatan cantik, disarankan untuk menambah sekaligus diperbanyak animasi,

dengan tujuan agar pengunjung dalam mengakses website ini tidak cepat bosan.

6. Pustaka

[1] Akib, z. 2014. “Perancangan Website Menggunakan Responsive Web

Design”, Vol. 2 Issue 1, ISSN: 2303-5786.

[2] Suwantoro, 2004, Dasar-Dasar Pariwisata, Yogyakarta : Andi.

[3] Putra, C., Iriani, A. & Manuputty, A. D. 2011. Perancangan dan Implementasi E-

Tourism pada Sistem Informasi Pariwisata Salatiga.

[4] Faudi, A. 2013. Perancangan Dan Pembuatan Sistem Informasi

Pariwisata Kabupaten Simeule Berbasis Web. Sekolah Tinggi Manajemen

Informatika Dan Komputer STMIK U’BUDIYAH Indonesia, Banda Aceh. [5] Purnama, Pupung Budi.2005.Kiat Praktis Menjadi Desainer Web

Profesional.Jakarta : PT: Elex Media Komputindo.

Documents

Pengembangan Web Taman Wisata Kopeng Berbasis Responsive