Lokasi Kota Anda:
()
Potongan kode di atas merupakan kode untuk menampilkan nilai dari latitude dan longitude yang telah didapat menggunakan Kode 4.1 dan Kode 4.3. Pada baris pertama merupakan kode untuk menjalankan fungsi getLocation yang merupakan fungsi dari dari kode 4.1, fungsi ini akan berjalan ketika body dari HTML dieksekusi. Pada baris ke 10 terdapat id mapholder, dimana id tersebut berfungsi untuk menampilkan hasil dari variabel mapholder pada fungsi dari
52
showPosition. Sedangkan pada baris ke 11 terdapat id demo yang berfungsi untuk menampilkan hasil dari variabel demo yang sebelumnya didapat oleh fungsi showPosition. Pada baris ke 20 terdapat variabel baru yang dibuat yaitu variabel input dimana variabel tersebut berisi nilai element yang didapat pada id koord pada baris ke 15, pada baris ini dibuat sebuah kondisi jika nilai pada id koord yang merupakan nilai latitude dan longitude hasil dari fungsi getLocation kosong maka id tersebut akan berisi nilai latitude dan longitude dari variabel $loc yang didapat dari lookup pada server ipinfo.io. Kode 4.4 Potongan Kode halaman beranda. echo "
"; echo ""; while ($rows = mysql_fetch_array($hasil)) { // proses sinopsis & jarak & bintang rating $sinopsis = substr(strip_tags($rows['sinopsis']),0, 225); while (substr($sinopsis, -1) != " ") $sinopsis = substr($sinopsis,0,strlen($sinopsis)-1); $sinopsis .= "..."; $jarak = $rows['jarak']; $pembulatan = 10 * round($rows['rating']/10); // bulatkan ke sepuluhan terdekat $bintang = "images/star/star-$pembulatan.png"; // end proses sinopsis & jarak & bintang rating echo "
"; echo '
';| ". " ". " . $rows["rating"] . "<span id=\"fDesc\"> [Rating "] ". " @".$rows["jam_tayang"]." di ". "". $rows["nama_theater"] . " ". " [ $jarak Km | HTM: Rp.".$rows["harga_tiket"]."]". " $sinopsis |
Pada potongan kode di atas merupakan kode untuk memanggil sebuah tabel dimana tabel tersebut berisikan gambar film, sinopsis, judul film, waktu
53
tayang, nama bioskop yang akan menayangkan film tersebut dan harga tiketnya. Hal tersebut dijelaskan pada potongan kode mulai dari baris ke 7 hingga baris ke 30. Pada baris ke 12 terdapat penambahan bentuk rating dari tiap film yaitu dengan variabel $pembulatan = 10 * round($rows['rating']/10. Rating didapat dari situs imdb.com yang kemudian dirubah menjadi gambar bintang dengan pembulatan 10, contoh jika film memiliki rating 70 maka terdapat bintang yang menyala berjumlah 7 pada film.
Kode 4.5 Potongan kode penunjuk arah.
<span style="color:#bbaaff">
<span id="fStatus2"> ">">
Potongan kode diatas merupakan potongan kode pada halaman theater. Pada baris ke terdapat fungsi pemanggilan nama bioskop dari database berupa $rows[„nama_theater‟]. Pada baris ke 4 hingga ke 5 merupakan kode yang berfungsi untuk menampilkan alamat dari bioskop yang didapat dari longitude dan latitude bioskop tersebut. Nilai tersebut sebelumnya telah disimpan di database yang kemudian dipanggil menggunakan fungsi $rows[„alamat_theater‟]. Pada baris ke 27 dibuat sebuah form untuk menyimpan latitude dan longitude pengguna
54
serta latitude dan longitude menggunakan fungsi echo $_GET["koord"] dan echo $koordt yang nantinya nila tersebut akan menjadi nilai awal atau saddr dan nilai akhir atau daddr pada google direction. Kode 4.6 Potongan kode Viewport. <meta name="viewport" content="width=device-width, scale=1, maximum-scale=1">
initial-
Potongan kode di atas merupakan aturan dalam penggunaan viewport yang dikombinasikan dengan Media Queries. Memiliki nama elemen berupa “viewport”. Kemudian memiliki nilai content berupa “width” dimana width adalah proper yang mengatur ukuran dari viewport. Pada potongan kode di atas nilai width diatur dengan nilai “device-width” yang artinya lebar layar pada pixel CSS memiliki skala 100%. Nilai ini akan menyesuaikan dengan tinggi dan lebar perangkat. Initial-scale adalah properti yang mengatur tingkat pembesaran halaman pada saat pertama kali dimuat. Sedangkan maximum-scale adalah properti yang mengatur izin pengguna untuk melakukan pembesaran.
Kode 4.7 Potongan kode Media Queries <style> @media only screen and (max-width: 1280px) { html, body { min-width:800px; /* font-size: 4em; */ } } @media only screen and (max-width: 800px) { html, body { min-width:640px; /* font-size: 4em; */ } @media only screen and (max-width: 640px) { html, body { min-width:360px; /* font-size: 3em; */ } @media only screen and (max-width: 360px) { html, body { min-width:240px; /* font-size: 2em; */ }
55
Potongan kode diatas merupakan potongan kode penggunaan Media Queries pada CSS. Di baris ke 3 terdapat kode yang mengatur tampilan body akan memiliki lebar sebesar 800px dengan ukuran tulisan sebesar 4em jika layar perangkat pengguna sebesar 1280px. 4.2 Implementasi Antar Muka Tampilan lokasi pengguna merupakan tampilan dimana ketika pengguna mengakses langsung ke alamt situs Jafaik maka server akan melakukan sebuah proses yang nantinya mengubah nilai alamat IP pengguna menjadi nilai latitude dan longitude yang digunakan untuk menentukan lokasi dari pengguna. Nilai ini akan menjadi acuan bagi server Jafaik untuk menampilkan lokasi bioskop terdekat dan titik awal rute menuju lokasi bioskop yang ingin pengguna tuju. Lihat pada Gambar 4.2.
Gambar 4.2 Tampilan lokasi pengguna. Pada tahap pengembangan sebelumnya di halaman utama, pengguna disajikan data berupa kolom jadwal film yang direkomendasikan oleh server berdasarkan parameter yang ditentukan oleh server dan juga memiliki tampilan yang sederhana. Pada pengembangan kali ini tampilan utama dibuat lebih menarik dan mengubah parameter untuk merekomendasikan film yang ingin ditonton. Lebih jelasnya dapat dilihat pada Gambar 4.3 di bawah ini.
56
Gambar 4.3 Tampilan halaman utama. Pada tampilan halaman teater berisikan informasi mengenai jadwal film yang akan tayang pada hari tertentu dan juga detail alamat dari teater yang pengguna pilih. Pada pengembangan kali ini ditambahkan sebuah fungsi yang dapat menunjukan arah menuju teater yang ingin pengguna tuju. Fitur ini memanfaatkan layanan dari Google Direction milik Google. Lihat pada Gambar 4.4 dan 4.5 untuk lebih jelasnya.
Gambar 4.4 Tampilan halaman teater.
57
Gambar 4.5 Tampilan fitur petunjuk arah.
Gambar 4.6 Tampilan pada layar dengan lebaran minimal 1280px
Gambar 4.7 Tampilan pada layar dengan lebaran minimal 800px
58
Gambar 4.8 Tampilan pada layar dengan lebaran minimal 640px
Gambar 4.9 Tampilan pada layar dengan lebaran minimal 360px
4.3 Verivikasi dengan Pengujian Verifikasi dilakukan dengan pengujian yaitu dengan menggunakan metode blackbox untuk lebih memfokuskan pada keperluan fungsional dan aplikasi. Dengan metode ini, maka validitas fungsi akan diuji, apakah menghasilkan keluaran yang sesuai dengan yang diharapkan atau tidak. Pengujian fungsi pada aplikasi ini dilakukan untuk mengetahui apakah aplikasi berjalan sesuai dengan yang telah dirancang. Hasil pengujian dan analsisi untuk aplikasi server dititik beratkan kepada proses penerimaan nilai Latitude dan Longitude yang dilakukan oleh server Jafaik dan layanan dari Google. 4.3.1 Lingkungan Pengujian Aplikasi server dihosting dengan menggunakan alamat m.jafaik.com sedangkan pengujian menggunakan perangkat bergerak Samsung Galaxy Wonder GT- I850 dengan spesifikasi sebagai berikut :
59
1. Sistem Operasi Android versi 4.0 (Ice Cream Sandwich) 2. 1.4 GHz Scorpion processor, Adreno 205 GPU, Qualcomm MSM8255T Snapdragon 3. Memori Internal 512 MB RAM, 2 GB ROM 4. GPS dengan dukungan A-GPS 5. Ukuran layar 3,7inci 4.3.2 Skenario Pengujian Untuk mengetahui hasil dari aplikasi yang dibuat maka dilakukan skenario yang dilakukan pada Juli 2013. Pengujian aplikasi ini dilakukan dengan menggunakan metode blackbox dan menggunakan perangkat bergerak Samsung Galaxy Wonder GT- I850. Item yang diuji berupa penerimaan koordinat, fungsi rute, koordinat menggunakan IP, Percobaan Widget pada jenis perangkat bergerak, dan Tipe perangkat bergerak. Berikut Tabel skenario yang akan dilakukan. Tabel 4.1 Skenario Pengujian No
Item yang diuji
1
Penerimaan koordinat dari W3C.
Sifat Normal
Cara Pengujian Pengguna mengakses halaman lokasi pengguna dengan akses internet . Pengguna mengakses halaman lokasi pengguna tanpa akses internet. Menggunakan petunjuk arah teater dari lokasi pengguna Menggunakan petunjuk arah teater tanpa mendapat koordinat pengguna
Hasil yang diharapkan Peramban menampilkan koordinat pengguna beserta peta lokasi pengguna berada.
Menggunakan layar dengan orientasi portrait. Menggunakan layar dengan orientasi portrait.
Menyesuaikan tampilan pada layar browser. Ukuran gambar keluar dari elemen yang dipakai.
Normal
Mengakses halaman penunjuk lokasi.
Tidak Normal
Mengakses halaman penunjuk lokasi.
Peramban menampilkan koordinat latitude dan longitude dari W3C. Peramban tidak menampilkan nilai koordinat dari W3C.
Tidak Normal Normal
2
Fungsi menunjukan rute teater
3
Percobaan responsive halaman web
4
Percobaan dengan peramban yang mendukung HTML 5
Tidak Normal
Normal Tidak Normal
Peramban tidak menampilkan koordinat yang dikirimkan server. Google Maps akan menampilkan rute menuju teater yang pengguna pilih Google maps tidak menampilkan petunjuk arah hanya menunjukan lokasi teater.
60
4.3.3 Hasil Pengujian Setelah melakukan skenario pengujian yang telah direncanakan maka didapat hasil pengujian sebagai berikut. Lihat Tabel 4.2. Tabel 4.2 Hasil Pengujian No
1
Item yang diuji
Penerimaan koordinat dari W3C.
Sifat
Cara Pengujian
Hasil yang diharapkan
Normal
Pengguna mengakses halaman lokasi pengguna dengan akses internet
Peramban menampilkan koordinat pengguna beserta peta lokasi pengguna berada.
Tidak Normal
Pengguna mengakses halaman lokasi pengguna tanpa akses internet.
Peamban tidak menampilkan koordinat yang dikirimkan server.
Sesuai.
Normal
Menggunakan petunjuk arah teater dari lokasi pengguna Menggunakan petunjuk arah teater tanpa mendapat koordinat pengguna Aplikasi diakses dengan pengguna tidak disekitar perkotaan Menggunakan layar dengan orientasi portrait. Menggunakan layar dengan orientasi portrait.
Google Maps akan menampilkan rute menuju teater yang pengguna pilih Google maps tidak menampilkan petunjuk arah hanya menunjukan lokasi teater.
Sesuai
Aplikasi akan menampilkan pesan “Saat ini belum ada jadwal film atau tidak ada teater terdekat Menyesuaikan tampilan pada layar browser. Ukuran gambar keluar dari elemen yang dipakai.
Sesuai
Normal
Mengakses halaman penunjuk lokasi.
Sesuai
Tidak Normal
Mengakses halaman penunjuk lokasi.
Peramban menampilkan koordinat latitude dan longitude dari W3C. Peramban tidak menampilkan nilai koordinat dari W3C API.
Tidak Normal 2
Fungsi menunjukan rute teater Tidak Normal
Normal
3
4
Percobaan responsive halaman web
Percobaan dengan peramban yang mendukung HTML 5
Tidak Normal
Hasil Pengujian Sesuai.
Sesuai
Sesuai
Sesuai
Sesuai
61
4.4 Analisis Hasil Pengujian Berikut merupakan verifikasi dan analisis hasil pengujian dari ketiga item yang telah diuji. 1.
Fungsi geolokasi atau penerimaan nilai latitude dan longitude yang didapat dari alamat IP sesuai dengan yang diharapkan karena setelah pengguna menyetujui permintaan berbagi lokasi maka saat itu juga peramban akan menampilkan koordinat pengguna sedangkan jika tidak menyetuji maka peramban hanya akan menampilkan koordinat lokasi server penyedia layanan internet yang digunakan pengguna.
2.
Fungsi dari menunjukan rute teater berjalan sesuai dengan yang diharapkan yaitu dengan menunjukan rute dari koordinat pengguna berada atau lokasi server penyedia layanan internet yang digunakan pengguna hingga menuju lokasi teater yang ingin pengguna tuju.
3.
Pada percobaan responsive web, ukuran dari konten yang ada mengikuti ukuran dari layar, sehingga tidak terpaku pada layar tertentu.
4.
Dengan mengaktifkan fungsi geolokasi pada perangkat bergerak, browser akan mampu menjalankan fungsi HTML5 yang digunakan untuk mencari koordinat dari penggua.
62