Aplikasi Web E-Tourism

Destinasi Wisata di Batam

Ikhwan Ash Shafa Arrafi (4312011026)

Muhammad Farhan (4312011027)

Teknik Informatika
POLITEKNIK NEGERI BATAM

i
 KATA PENGANTAR / UCAPAN TERIMAKASIH

Puji dan syukur kehadirat Tuhan Yang Maha Esa karena atas limpahan
Berkat dan Karunia-Nya yang selalu membimbing penulis dapat menyelesaikan
laporan ini sebagai salah satu tujuan dari Tugas Mata Kuliah Desain Web
Responsif yang penulis lakukan.
Laporan ini di buat sebagai pertanggung jawaban penulis dalam mengikuti
Pembelajaran Mata Kuliah Desain Web Responsif. Laporan  ini  dibuat 
berdasarkan  data-data  dan  pengetahuan serta informasi yang kami dapatkan,
selama mempelajari mata kuliah desain web responsif. Selama penyusun
mengikuti pembelajaran di mata kuliah desain web responsif, penulis
mendapatkan banyak ilmu, serta pengetahuan yang sangat bermanfaat serta
sangat berguna bagi penulis. Penulis mengharapkan laporan ini dapat berguna
bagi para pembaca.
Penulis juga menyadari bahwa selama melaksanakan Pembelajaran mata
kuliah Desain Web Responsif, penyusun tidak luput dari kesalahan baik itu
dalam tindakan maupun perkataan, yang disengaja ataupun yang tidak disengaja.
Dan penyusun berharap kepada pembaca untuk memberikan kritik dan saran
yang akan membantu untuk menyempurnakan laporan ini. 

Penulis

ii
 DAFTAR ISI

KATA PENGANTAR / UCAPAN TERIMAKASIH.................................ii

DAFTAR ISI...............................................................................................ii

BAB I PENDAHULUAN...........................................................................2

BAB II ANALISA DESAIN MOCKUP.....................................................2

BAB III IMPLEMENTASI DESAIN FIGMA............................................2

BAB IV DESAIN DAN PENGKODINGAN..............................................2

BAB V HASIL DAN PENGUJIAN UI/UXError! Bookmark not defined.

BAB VI KESIMPULAN............................Error! Bookmark not defined.

REFERENSI...............................................Error! Bookmark not defined.

 BAB I
PENDAHULUAN

Beberapa tahun terakhir ini dan sampai sekarang manuasia tidak terlepas
dari informasi, pada saat ini semakin penting dan telah menjadi suatu bagian
yang penting dalam kehidupan sehari hari masyarakat. Smartphone memberikan
fasilitas Android/iOS sebagai dasar yang dimiliki oleh sebuah mobile phone pada
umumnya dan di dukung dengan beberapa fasilitas dari sebuah personal
komputer, Masyarakat yang membutuhkan liburan untuk menghilangkan
kejenuhan kerja sangat sering berpergian atau berwisata sebagai salah satu
aktivitas untuk kumpul keluarga, Sebagian besar dari mereka akan merencanakan
kegiatan wisatanya dan mencari informasi terlebih dahulu mengenai tempat
wisata yang akan mereka kunjungi melalui internet.
Di Batam, banyak pulau yang memiliki pesona yang menarik, contohnya
seperti Pulau Abang, Pulau Ranoh. Selain itu Batam juga memiliki banyak pantai
contohya seperti Tanjung Pinggir yang berada di perbatasan antara Batam dan
negara tetangga Singapura, pengunjung dapat melihat pemandangan singapura
dari dekat di pantai tersebut.

1
 BAB II
ANALISA DESAIN MOCKUP

Pada aplikasi yang kami rancang kali ini, kami mengadaptasi desain
basis eCommerce, Desain Mockup ini kami buat menggunakan Figma.
Pengunjung akan melihat landing page saat pertama kali situs dibuka, pada
halaman utama akan disuguhkan Tempat Rekomendasi untuk destinasi wisata,
dan bisa juga melakukan search dengan mengetik nama tempat pada Text box
"Explore".

Pengunjung juga dapat melakukan login pada situs, dengan pilihan yang
beragam, bisa melalui email secara biasa bisa juga melalui akun social media dan
google. Karena ini berbasis web, maka aplikasi ini diakses melalui browser.

Metode Pembayaran yang digunakan pada aplikasi ini direncanakan bisa

melalui Dompet digital (OVO, Go-Pay, DANA), Bank, dan Secara langsung.

2
 BAB III
IMPLEMENTASI DESAIN FIGMA

Kami menggunakan Figma untuk membuat desain mockup pada aplikasi

yang kami rancang.
1. Pertama kami menggunakan layer dengan ukuran desktop untuk Halaman
Landing, lalu memilih background.

3
4
2. Menambahkan Text Judul dan Tombol Pada Halaman Landing

5
3. Membuat Header dan Footer Untuk Halaman pertama, setelah Landing page

6
a. Frame dengan ukuran 1440x3250

b. Membuat Background header dan beberapa tombol dengan text tool dan
Shape Tool.

7
8
c. Membuat premis pada Halaman Utama dan Search box dengan text tool
dan Shape tool.

9
 d. Membuat Objek Pada Section Recommendations

10
e. Penambahan Footer menggunakan Text Tool dan Rectangle

11
4. Mendesain Tampilan login page dengan Text tool dan shape tool.

12
 BAB IV
DESAIN DAN PENGKODINGAN

Buatlah implementasi tutorial dan langkah-langkah dalam mendesain web

sesuai dengan prototype atau desain visual bagian2 dari keseluruhan aplikasi
menggunakan HTML, CSS dan Javascript (atau framework Bootstrap).
Kami mengimplementasikan desain yang telah kami buat dari figma
menggunakan framework bootstrap, walaupun akhirnya halaman yang kami buat
belum sepenuhnya selesai, namun sudah menggambarkan bagaimana
implementasi halaman aplikasi web yang kami buat dapat berjalan responsive
pada device tertentu sesuai dengan tujuan awal dari mata kuliah ini.

1. Import Library dan Stylesheet

Membuat site folder terlebih dahulu, dan membuat file index.html, disini
kami menggunakan atom sebagai text editor, framework bootstrap yang kami
gunakan pada aplikasi ini adalah versi 4.6, disertai dengan jquery.
Menyertakan meta tag viewport agar web dapat berfungsi responsive, untuk
stylesheet kami menggunakan css bawaan dari bootstrap sekaligus yang kami
buat sendiri, tak lupa juga menyertakan library jquery agar bootstrap dapat
berjalan dengan semestinya.

13
2. Membuat Navbar
Menggunakan class navbar yang disediakan oleh bootstrap, sertakan juga
class untuk tombol collapse-dropdown pada navbar untuk halaman
responsive, menambahkan nav item dan linknya sesuai dengan yang telah di
desain di mockup, menggunakan class btn untuk tombol yang mengarah ke
halaman login.

3. Membuat Jumbotron dan Search box

Menggunakan element jumbotron untuk membuat tulisan Headline pada
Halaman depan, tidak lupa menggunakan class container agar element
terposisi dengan rapi, untuk background pada jumbotron kami menggunakan
css yang kami buat pada bagian head di file html ini. Kami menggunakan
form-control untuk membuat search box.

4. Membuat Daftar Produk menggunakan class “Card”

Setelah membuat Search box dan Jumbotron, kami membuat etalase produk
dengan nama section “Recommended Places” menggunakan element card

14
 yang disediakan oleh bootstrap.

5. Membuat Tampilan Detail produk dan Pembelian

Detail produk ditampilkan dalam bentuk pop-up, maka dari itu kami
menggunakan class modal yang disediakan oleh bootstrap, saat detail produk
ditampilkan pada pop-up, kami menggunakan table dan class row untuk

15
 memposisikan gambar dan tulisan detail produk.

6. Membuat Footer
Untuk footer kami memanfaatkan class row yang disediakan oleh bootstrap.

16
 BAB V
HASIL DAN PENGUJIAN UI/UX

Disini kami menggunakan developer tools pada browser untuk menguji apakah
aplikasi yang kami buat memiliki tampilan yang responsive, kelengkapan konten
pada halaman yang kemi buat belum sepenuhnya selesai.

Ga
mbar 5.1 Halaman Depan Aplikasi Secara reguler

17
 Ga
mbar 5.2 Halaman depan aplikasi dalam Tampilan responsive

Ga
mbar 5.3 Tampilan Detail Produk

18
 5.4
Tampilan Responsive pada detail Produk

19
 BAB VI
KESIMPULAN
Aplikasi Destinasi wisata ini direncanakan menjadi sarana untuk
memudahkan turis/pengunjung untuk mendapatkan informasi wisata yang cocok
di Pulau Batam .
Dalam aplikasi ini,direncanakan pengguna juga tentunya dapat melihat
detail dari destinasi.
Untuk melakukan transaksi di aplikasi ini pengguna perlu masuk ke Website
terlebih dahulu, setelah itu mereka dapat destinasi wisata yang mereka inginkan.
Sebelum melakukan transaksi pembayaran pengguna perlu memeriksa detail
destinasi terlebih dahulu untuk memastikan bahwa tidak ada kesalahan.
Kemudian pengguna mengisi detail alamat pengiriman dan memilih metode
pembayaran sesuai yang tersedia dalam aplikasi.

20