BAB IV PROTOTIPE, PENGEMBANGAN, DAN VERIFIKASI

Transkripsi

1 BAB IV PROTOTIPE, PENGEMBANGAN, DAN VERIFIKASI Pada bab ini akan dibahas mengenai prototipe, pengembangan modul aplikasi Jafaik beserta faktor pendukung yang dibutuhkan oleh sistem, serta hasil pengujian terhadap sistem menggunakan jenis perangkat bergerak yang digunakan untuk mengakses sistem. 4.1 Prototipe dan Pengembangan Pada tahap prototype dan pengembangan akan menjelaskan tentang penulisan program dalam mengembangkan aplikasi Jafaik. Pada pengembangan sebelumnya fungsi untuk menentukan lokasi pengguna menggunakan fungsi GPS dan Cell ID. Kedua fungsi tersebut dijalankan pada sisi klien yaitu pada aplikasi widget Jafaik sedangkan pada penggunaan fungsi geolokasi dilakukan pada sisi server. Berikut ini kode program aplikasi server Jafaik untuk mendapatkan koordinat lokasi pengguna menggunakan fungsi geolokasi berdasarkan alamat IP peramban pengguna. Kode 4.1 Potongan kode mendapatkan nilai koordinat dari W3C. function showposition(position){ var x = document.getelementbyid("demo"); x.innerhtml=""+position.coords.latitude+"," +position.coords.longitude; latitude.value = position.coords.latitude; longitude.value = position.coords.longitude; koord.value = latitude.value + "," + longitude.value; Dari potongan kode di atas dapat dijelaskan bagian utama untuk mendapatkan nilai dari Latitude dan Longitude agar bisa ditampilkan pada peramban perangkat bergerak. Pada baris pertama mendifinisikan fungsi untuk menampilkan posisi yang berupa function showposition dengan id position. Pada baris ke 2 membuat sebuah variabel x dimana variabel x tersebut memiliki nilai 49

2 50 yang dimiliki oleh id demo dan fungsi document.getelementbyid merupakan sebuah metode untuk menaruh nilai pada sebuah ID. Pada baris ke 3 mengubah nilai pada variabel x menjadi elemen HTML menggunakan fungsi x.innerhtml dimana nilai x yang tersimpan sekarang berupa nilai Latitude dan Longitude yang didapat nantinya. Pada baris ke 4 hingga ke 6 terdapat fungsi penyimpanan nilai Latitude, Longitude serta koord dari nilai yang didapat oleh fungsi position.coords.latitude dan position.coord.longitude. Kode 4.2 Potongan kode mendapatkan nilai koordinat dari ipinfo.io. if(isset($_server['http_x_forwarded_for']) && $_SERVER['HTTP_X_FORWARTDED_FOR']!= '') { $ip= $_SERVER['HTTP_X_FORWARDED_FOR']; } else { $ip= $_SERVER['REMOTE_ADDR']; } $file = " $details = json_decode(file_get_contents($file)); $lok = $details->loc; Dari potongan kode di atas dapat dijelaskan bagian utama untuk mendapatkan nilai Latitude dan Longitude dari server ipinfo.io. Pada baris pertama server akan memeriksa apakah IP peramban pengguna terdapat proxy menggunakan fungsi HTTP_X_FORWADER_FOR. Pada baris ke 3 variabel $ip akan menyimpan nilai IP dari server proxy yang didapat oleh fungsi HTTP_X_FORWADER_FOR jika memang browser pengguna menggunakan proxy namun jika tidak maka pada baris ke 5 variabel $ip akan menyimpan alamat IP dari server layanan internet yang user gunakan. Pada baris ke 7 aplikasi Jafaik akan melakukan permintaan lokasi ke server ipinfo.io menggunakan alamat IP yang telah tersimpan pada variabel $ip. Pada baris ke 7 aplikasi Jafaik akan membaca nilai yang dikirim berupa script json yang telah di sandikan menggunakan fungsi json_decode. Pada baris terakhir aplikasi Jafaik mendefinisikan nilai dari variabel loc pada sub variabel $details menjadi $lok untuk akhirnya digunakan oleh aplikasi Jafaik yang memiliki nilai Latitude dan Longitude server penyedia layanan internet yang pengguna gunakan.

3 51 Gambar 4.1 Contoh hasil lookup dari ipinfo.io. Kode 4.3 Potongan kode tampilan pemberi lokasi. <body id="page1" onload="getlocation()">  <div class="tail-top"> <div class="tail-bottom"> <div id="main"> <div class="box"> <div class="border-right"> <div class="border-left"> <div class="inner"> <div align="center" id="mapholder"></div> <p align="center" id="demo" name="demo"></p> <p align="center" id="fdesc"> Lokasi Kota Anda:<br />(<?php echo $lok ;?>) </p> <center> <form id="form1" action="/pelem.php" method="get"> <input name="koord" id="koord" type="hidden" size="50" value="" /> <input id="latitude" type="hidden" /> <input id="longitude" type="hidden" /> <input style="margin: 5px; padding: 2px;" type="submit" value="tekan untuk Melanjutkan"> <script> var input = document.getelementbyid('koord'); if(input.value.length == 0) input.value = "<?php echo $lok ;?>"; </script> </form> 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

4 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 "<div align='center'>"; echo "<table width='100%' cellpadding='5' cellspacing='5' bordercolor='000099'border='solid'>"; 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 "<tr width='100%'> <td align='left'>". "<a href=\"synopsis2.php?koord=$koord&idfilm=". $rows["id_film"]. "\"><img width=25% align=left hspace=5 vspace=1 src=". $rows["gambar"]." /></a>". " <a href=\"synopsis2.php?koord=$koord&idfilm=". $rows["id_film"]. "\"><span id=\"fjudul\">".$rows["nama_film"]."</span></a><br />". "<span id=\"fdesc\"> [Rating ". $rows["rating"]. "] <img width=30% style='margin: 5px; min-height:10px;' src='$bintang' /> <br />". di ". "<a href=\"theater_detail2.php?koord=$koord&idtheater=". $rows["id_theater"]."&hargatiket=".$rows["harga_tiket"]. "\" >". $rows["nama_theater"]. "</a> <br />". " [ $jarak Km HTM: Rp.".$rows["harga_tiket"]."]</span>". "<div id='sinopsis'><br />$sinopsis</div>"; "</td></tr>"; } echo "</table>"; echo '</div>'; Pada potongan kode di atas merupakan kode untuk memanggil sebuah tabel dimana tabel tersebut berisikan gambar film, sinopsis, judul film, waktu

5 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. <h1 id="fstatus"><b><span style="color:#bbaaff"><?php echo $rows['nama_theater'];?></span></b></h1> <span id="fstatus2"> <a target="_blank" href=" echo $koordt;?>"><?php echo $rows['alamat_theater']?></a><br> <a target="_blank" href="tel:<?php echo $rows["no_telepon_theater"];?>"><?php echo $rows["no_telepon_theater"];?></a> </span> </div> <div id="divpeta"> <imgid="imgpeta"src=" center=<?phpecho$koordt;?>&size=480x360&zoom=14&maptype=roadmap&markers=color:red%7clabel: T%7C<?php echo $koordt;?>&sensor=false" align="center" width="100%" /><br /> <form action=" method="get" target="_blank"> <input type="hidden" name="saddr" value="<?php echo $_GET["koord"];?>" /> <input type="hidden" name="daddr" value="<?php echo $koordt;?>" /> <input style="margin: 3px" type="submit" value="dapatkan Petunjuk Arah"/> </form> <br /> <br /> </div> 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

6 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, initialscale=1, maximum-scale=1"> 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  only screen and (max-width: 1280px) { html, body { min-width:800px; /* font-size: 4em; */ } only screen and (max-width: 800px) { html, body { min-width:640px; /* font-size: 4em; */ only screen and (max-width: 640px) { html, body { min-width:360px; /* font-size: 3em; */ only screen and (max-width: 360px) { html, body { min-width:240px; /* font-size: 2em; */ } </style>

7 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.

8 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.

9 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

10 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 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 :

11 59 1. Sistem Operasi Android versi 4.0 (Ice Cream Sandwich) 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 Skenario Pengujian Untuk mengetahui hasil dari aplikasi yang dibuat maka dilakukan skenario yang dilakukan pada Juli 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 Sifat Cara Pengujian Hasil yang diharapkan Pengguna mengakses Peramban menampilkan halaman lokasi pengguna koordinat pengguna beserta dengan akses internet peta lokasi pengguna berada Penerimaan koordinat dari W3C. Fungsi menunjukan rute teater Pengguna mengakses halaman lokasi pengguna tanpa akses internet. Menggunakan petunjuk arah teater dari lokasi pengguna Menggunakan petunjuk arah teater tanpa mendapat koordinat pengguna 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. 3 Percobaan responsive halaman web Menggunakan layar dengan orientasi portrait. Menggunakan layar dengan orientasi portrait. Menyesuaikan tampilan pada layar browser. Ukuran gambar keluar dari elemen yang dipakai. 4 Percobaan dengan peramban yang mendukung HTML 5 Mengakses halaman penunjuk lokasi. Mengakses halaman penunjuk lokasi. Peramban menampilkan koordinat latitude dan longitude dari W3C. Peramban tidak menampilkan nilai koordinat dari W3C.

12 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 Item yang diuji Sifat Cara Pengujian Hasil yang diharapkan Hasil Pengujian Pengguna Peramban Sesuai. mengakses menampilkan halaman lokasi koordinat pengguna pengguna beserta peta lokasi dengan akses pengguna berada. internet 1 Penerimaan koordinat dari W3C. Pengguna mengakses halaman lokasi pengguna tanpa akses internet. Peamban tidak menampilkan koordinat yang dikirimkan server. Sesuai. 2 3 Fungsi menunjukan rute teater Percobaan responsive halaman web 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. 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 Sesuai Sesuai Sesuai Sesuai 4 Percobaan dengan peramban yang mendukung HTML 5 Mengakses halaman penunjuk lokasi. Mengakses halaman penunjuk lokasi. Peramban menampilkan koordinat latitude dan longitude dari W3C. Peramban tidak menampilkan nilai koordinat dari W3C API. Sesuai Sesuai

13 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.

14 62