BAB 2. LANDASAN TEORI
2.1. Surabaya
Kota Surabaya terletak di antara 1120 36’ - 1120 54’ Bujur Timur dan 70 12’ - 70 21’ Lintang Selatan. Wilayah Kota Surabaya berbatasan langsung dengan Selat Madura di sebelah utara dan di sebelah timur, sedangkan di sebelah selatan berbatasan dengan Kabupaten Sidoarjo dan berbatasan dengan Kabupaten Gresik di sebelah barat. Pemerintah Kota Surabaya membagi wilayah menjadi 5 wilayah kerja pembantu walikota, yaitu Surabaya Utara, Surabaya Timur, Surabaya Selatan, Surabaya Barat, dan Surabaya Pusat. Berdasarkan Peraturan Daerah No.5 Tahun 2001, Kota Surabaya terbagi atas 31 kecamatan. Total luas wilayah Surabaya adalah 326,36 km2 dengan Kecamatan Benowo merupakan kecamatan dengan wilayah terluas yaitu 23,73 km2 yang terletak di Surabaya Barat. Sedangkan Kecamatan Simokerto adalah kecamatan dengan luasan terkecil yaitu 2,59 km2 terletak di Surabaya Pusat. Realisasi pendapatan pada APBD Pemerintah Kota Surabaya pada tahun 2014 mencapai lebih dari 6,4 trilyun rupiah. Nilai tersebut lebih besar dibanding realisasi tahun sebelumnya yang tercatat lebih dari 5,2 trilyun rupiah.
Realisasi Pendapatan Asli Daerah (PAD) tahun 2014 juga lebih besar yaitu mencapai 3,3 trilyun rupiah. Perkiraan jumlah penduduk Kota Surabaya tahun 2014 mencapai 2,83 juta jiwa. 49,38 persen dari jumlah tersebut merupakan penduduk Laki-laki dan 50,62 persen merupakan penduduk perempuan. (BPS Kota Surabaya, 2015)
2.2. Aspirasi Masyarakat
Aspirasi secara definitif mengandung dua pengertian, aspirasi di tingkat ide dan aspirasi di tingkat peran struktural. Di tingkat ide, konsep aspirasi berarti sejumlah gagasan/ide verbal dari lapisan masyarakat manapun dalam suatu forum formalitas yang dituangkan dalam bentuk usulan kegiatan pembangunan. Di tingkat peran dalam struktur, adalah keterlibatan langsung dalam suatu. Aspirasi berupa kebutuhan masyarakat dalam bentuk produk, jasa, pelayanan, dan lain sebagainya
yang wajib untuk bisa dipenuhi sehingga dapat mencapai kesejahteraan yang dituangkan dalam bentuk usulan kegiatan pembangunan kegiatan (Purwoko, 2008).
2.3. PhoneGap
PhoneGap merupakan teknologi framework yang sedang berkembang dan digunakan untuk pembangunan aplikasi cross-mobile platform. PhoneGap menggunakan HTML5, JavaScript, dan CSS3 yang menjadi teknologi standar di dunia web untuk proses pembuatan aplikasi mobile. Dengan menggunakan PhoneGap, para developer aplikasi yang memiliki sedikit pengetahuan tentang bahasa pemrograman native mobile dapat membangun sebuah aplikasi untuk berbagai platform mobile (Ghatol & Patel, 2012).
PhoneGap telah didownload lebih dari 1 juta kali dan sedang digunakan oleh lebih dari 400.000 pengembang. Ribuan aplikasi yang dibangun menggunakan PhoneGap yang tersedia di toko aplikasi mobile dan direktori. Kode PhoneGap disumbangkan kepada Apache Software Foundation (ASF) di bawah nama Apache Cordova dan lulus untuk status proyek top-level pada Oktober 2012. Melalui ASF, pengembangan PhoneGap masa depan akan memastikan kepengurusan terbuka proyek. Ini akan selalu tetap gratis dan open source di bawah Lisensi Apache, Versi 2.0. (phonegap.com/about).
2.3.1. Arsitektur PhoneGap
Spesifikasi arsitektur aplikasi berbeda pada setiap basisnya. Biarpun begitu data-driven aplikasi dibuat dengan mengikuti aristektur dasar. Aplikasi PhoneGap bertindak sebagai client agar user bisa berinteraksi dengannya. PhoneGap Client berkomunikasi dengan sebuah server aplikasi untuk menerima data. Server aplikasi mengatur business logic dan berkomunikasi dengan sebuah back-end data repository.
Server aplikasi biasanya adalah sebuah web server (Apache, IIS, dll) dan mempunyai sebuah server side scripting language seperti ColdFusion, Java, .NET, PHO, dan sebagainya. PhoneGap adalah sebuah agnotic dari back-end technologies dan dapat bekerja dengan banyak server aplikasi menggunakan protocol web standart.
Server aplikasi melakukan business logic dan perhitungan, dan menerima atau
menahan data dari repository data yang terpisah – biasanya sebuah relasional database, tetapi juga bia semua struktur atau mekanisme untuk penahanan data.
Aplikasi PhoneGap biasanya tidak langsung meminta langsung ke sebuah database, komunikasinya adalah melalui sebuah aplikasi server. Komunikasi Client ke aplikasi server dapat berdasarkan standart HTTP request untuk content HTML, REST – ful XML services, JSON services, atau SOAP (atau websockets jika OS kita mendukung). Ada beberapa beberapa teknik yang dapat digunakan di sebuah desktop- browser berbasis AJAX.
Arsiktektur client-side biasanya menggunakan Model Single-page application, dimana logic aplikasi berada disebuah page HTML single. Page ini tidak pernah diambil dari memori. Semua data akan di display dengan mengupdate HTML DOM, data diterima dari server aplikasi menggunakan teknik AJAX, dan variabel disimpan dimemory dengan JavaScript. Arsitektur Multi-page client-side aplikasi mendukung, tetapi tidak di anjurkan karena kita akan kehilangan variabel memori ketika memanggil page yang terpisah.
Gambar 2.1. Arsitektur PhoneGap
Gambar 2.1 menunjukkan bagaimana bentuk kinerja PhoneGap terhadap bahasa pemrograman HTML dan CSS, dan terhadap fitur-fitur seperti kamera, GPS, dan lain-lain. Aplikasi mengunakan teknologi PhoneGap dibangun dengan bahasa pemrograman HTML dan CSS. Untuk diaplikasikan dalam bentuk mobile device application, PhoneGap API bekerja sama dengan Jquery Mobile menggunakan aplikasi HTML tersebut sehingga aplikasi bekerja dengan baik dalam mobile device dan memfasilitasi fitur-fitur.
2.3.2. Fitur-fitur PhoneGap
Setiap aplikasi yang dibangun dengan Phonegap harus menyertakan sebuah library Javascript dari Phonegap. Library Phonegap ini diberi nama Cordova.js.
Library cordova.js adalah inti dari aplikasi Phonegap, dia bekerja di belakang layar dan melakukan pekerjaan pemanggilan fitur-fitur asli platform. Cordova.js dan Cordova.jar bekerja saat melakukan pemanggilan API tertentu yang dokumentasi dapat dilihat melalui situs resmi Phonegap. Library Cordova.js inilah yang menjembatani antara bahasa pemrograman Phonegap dan fitur asli dalam aplikasi mobile seperti Camera, GPS, Accelerometer, Compass, File System dan lain sebagainya. Saat membangun project berbasis Phonegap, pertama diharuskan membuat sebuah MainActivity, terutama untuk project berbasis platform Android.
MainActivity adalah kunci Phonegap dalam mengakses fitur alami ponsel. Fitur ini adalah pendamping utama file Cordova.js dalam membimbing Cordova.js untuk mengakses berbagai fitur native ponsel tersebut.
Tabel 2.1. Fitur-fitur PhoneGap dalam berbagai jenis platform
Seperti yang terlihat pada Tabel 2.1, PhoneGap memiliki beberapa fitur yang mendukung aplikasi mereka, yakni Accelerometer, Camera, Compass, Contacts, File, Geolocation, Media, Network, Notification (Alert), Notification (Sound), Notification (Vibration), storage. Accelerometer sendiri adalah fitur yang menangkat pergerakan divais dalam arah x,y, dan z. camera adalah fitur untuk mengakses kamera bawaan dari divais, compass adalah fitur untuk mendapatkan arah, contacs adalah fitur yang menyediakan akses ke database kontak pada divais, file adalah fitur API untuk membaca, menulis, dan menavigasi hierarki file system, geolocation adalah menyediakan akses ke data lokasi berdasarkan perangkat sensor GPS atau disimpulkan dari sinyal jaringan. Media adalah fitur yang menyediakan kemampuan untuk merekam dan memutar file audio pada divais. Network adalah fitur yang menyediakan akses paket data menggunakan koneksi dari operator, notification adalah fitur untuk menyediakan pemberitahuan bagi pengguna divais dengan audio, visual, dan perabaan atau getaran pada ponsel, dan storage adalah fitur yang menyediakan akses kepada media penyimpanan pada device. (Akbar dan Nurrachman, 2013)
iPhone / iPhone 3G iPhone 3Gs /
lebih baru Android Blackberry OS 5.x
Blackberry
OS 6.0+ WebOS Windows Phone 7 Symbian
Accelerometer √ √ √ √ √ √ √ √
Camera √ √ √ √ √ √ √ √
Compass X √ √ x x √ √ x
Contacts √ √ √ √ √ x √ √
File √ √ √ √ √ x √ x
Geolocation √ √ √ √ √ √ √ √
Media √ √ √ x x x √ x
Network √ √ √ √ √ √ √ √
Notification
(Alert) √ √ √ √ √ √ √ √
Notification
(Sound) √ √ √ √ √ √ √ √
Notification
(Vibration) √ √ √ √ √ √ √ √
Storage √ √ √ √ √ √ √ x
2.4. Google Maps API
Google Maps Application Programming Interface (API) merupakan suatu fitur aplikasi yang dikeluarkan oleh Google untuk memfasilitasi pengguna yang ingin mengintegrasikan Google Maps ke dalam website masing-masing dengan menampilkan data point milik sendiri. Dengan menggunakan Google Maps API, Google Maps dapat di-embed pada website eksternal. Agar aplikasi Google Maps dapat muncul di website tertentu, diperlukan adanya API key.
Gambar 2.2. Penempatan Google Maps API Key
Seperti yang ditunjukan pada Gambar 2.2, API key merupakan kode unik yang digenerasikan oleh Google untuk suatu website tertentu, agar server Google Maps dapat mengenali. Google Maps API telah menyediakan template dasar yang dapat digunakan oleh pengguna untuk dikembangkan lebih lanjut: (Ichtiara, 2008).
Untuk menggunakan Google Maps API, yang dibutuhkan adalah pengetahuan tentang
HTML, JavaScript, dan koneksi internet. Saat ini versi terakhir Google Map API adalah versi 3. Versi ini akan tampil lebih cepat dari versi sebelumnya khususnya untuk browser mobile device (iPhone dan ponsel android OS).
2.4.1. Basic Source Code Google Maps API
Gambar 2.3. Kode Dasar Google Maps API
Gambar 2.3 menggambarkan langkah-langkah implementasi Google Maps API. Langkah-langkah yang untuk melakukan pemrograman mendasar menggunakan Google Maps API adalah:
1. Memasukkan Maps API Javascript ke dalam HTML
2. Membuat elemen div dengan nama map_canvas untuk menampilkan peta
3. Membuat beberapa objek literal untuk menyimpan properti-property pada peta 4. Menuliskan fungsi Javascript untuk membuat objek peta
5. Meng-inisiasi peta dalam tag body HTML dengan event onload
2.5. JSON (JavaScript Object Notation)
JSON (JavaScript Object Notation) merupakan format untuk pertukaran data seperti halnya XML. JSON sangat mudah dimenegerti oleh manusia, karena formatnya yang sederhana. Tidak hanya manusia, mesin pun dapat membaca JSON dengan sangat mudah. Format ini dibuat berdasarkan bagian dari bahasa pemrograman JavaScript, Standar ECMA-262 Edisi ke-3 Desember 1999. JSON merupakan format teks yang tidak bergantung pada bahasa pemrograman apapun karena menggunakan gaya Bahasa yang umum digunakan oleh programmer golongan C termasuk C, C++, C#, Java, JavaScript, Perl, Phyton dan lain-lain (JSON, 2014).
JSON dibangun di atas dua struktur (JSON, 2014):
Kumpulan pasangan nama/nilai. Dalam beberapa Bahasa pemrograman, hal ini direalisasikan sebagai objek (object), record, struktur (struct), kamus (dictionary), hash table, daftar kunci (key list), atau associative array.
Daftar nilai yang berurutan. Dalam kebanyakan bahasa pemrograman, hal ini dinyatakan sebagai array, vector (vector), daftar (list), atau urutan (sequence).
2.5.1. Bentuk-bentuk JSON
Dalam file JSON, terdapat beberapa bentuk yang biasa ditemukan. Bentuk- bentuk tersebut adalah object dan array.
Gambar 2.4. JSON object Sumber: (http://www.json.org)
JSON object adalah sebuah nama yang memiliki nilai dan bersifat tidak tersusun/tidak teratur. Untuk menulis sebuah object, dimulai dengan { (kurung kurawal kiri) dan diakhiri dengan } (kurung kurawal kanan). Setiap nama diikuti dengan : (titik dua) lalu diikuti dengan pemberian nilai. setiap nama dipisahkan dengan , (koma). Pada Gambar 2.4 terdapat contoh penulisan dalam object dalam gambar.
Gambar 2.5. JSON array Sumber: (http://www.json.org)
JSON array adalah sekelompok dari nilai-nilai yang tersusun/teratur. Untuk menulis sebuah array, dimulai dengan [ (kurung siku kiri) dan diakhiri dengan ] (kurung siku kanan). Setiap nilai dipisahkan dengan , (koma). Pada Gambar 2.5 terdapat contoh penulisan dalam array dalam gambar.
2.5.2. Jenis-jenis Value atau Nilai
Setiap object dan array didalamnya selalu memiliki value atau nilai yang kemudian dipakai sebagai salah satu source dari aplikasi. JSON dapat membaca beberapa jenis nilai pada object dan array yang dideklarasikan.
Gambar 2.6. JSON value Sumber: (http://www.json.org)
Gambar 2.6 menunjukkan nilai-nilai apa saja yang dapat diketahui JSON. Sebuah value (nilai) dapat berupa sebuah string, sebuah number, true atau false atau null, sebuah object atau sebuah array. Struktur JSON array dapat memuat sebuah array dalam array (nested).
Gambar 2.7. value string Sumber: (http://www.json.org)
JSON string adalah sebuah urutan dari nol atau lebih karakter Unicode, dan dibungkus dengan double quotes (petik dua). Simbol \ (backslash) lalu diikuti dengan sebuah karakter digunakan untuk menjalankan beberapa fungsi dalam sebuah string.
Gambar 2.7 menunjukkan bagaimana struktur dari nilai string beserta fungsi-fungsi yang dapat digunakan dalam sebuah string. Contohnya \n untuk pindah ke baris kalimat yang baru.
Gambar 2.8. JSON number Sumber: (http://www.json.org)
Gambar 2.8 menunjukkan bagaimana struktur dari nilai number. Sebuah number dalam JSON sangat mirip dengan number yang ada pada C atau Java, namun format angka oktal dan heksadesimal tidak digunakan.
2.6. PHP
PHP adalah sebuah kepanjangan dari Hypertext Preprocessor, PHP Atau Hypertext Preprocessor ialah sebuah bahasa pemrograman yang berupa kode atau script yang bisa ditambahkan ke dalam Bahasa Pemrograman HTML , PHP itu sendiri sering kali digunakan untuk hal merancang, membuat dan juga memprogram sebuah website. PHP juga sangat sering digunakan untuk membuat sebuah ataupun
beberapa CMS, CMS ialah sebuah software atau perangkat lunak yang mempunyai kegunaan untuk memanipulasi semua atau beberapa isi dari sebuah halaman website.
PHP adalah sebuah bahasa pemrograman web yang popular, tangguh dan dapat di peroleh secara gratis. Belajar PHP cukup menyenangkan, karena bahasa ini tergolong mudah untuk dipelajari. Untuk mempermudah dan mempercepat pengembangan aplikasi dengan PHP, banyak bermunculan framework PHP (Sofwan, 2007). Banyak digunakan oleh programmer berlatar belakang C/C++ karena kemiripan syntaxnya.
Bersifat open source, karenanya gratis dan bebas. Database pasangannya biasanya MySQL, dijalankan bersama webserver Apache di atas operating system Linux.
Semuanya gratis dan bebas. (Muhardin, 2003)
Sebuah script PHP dieksekusi pada server dan hasilnya dikirim kembali kepada browser. Sebuah script PHP dapat ditempatkan dimanapun dalam dokumen.
default file extension untuk file PHP adalah ".php". Sebuah file PHP normalnya mengandung HTML tags, dan beberapa kode-kode PHP.
Pada Gambar 2.9, terlihat sebuah contoh mengenai file PHP sederhana, dilengkapi dengan script PHP yang menggunakan built-in function “echo” untuk menampilkan teks "Hello World!" pada web page. Catatan: Setiap pernyataan PHP diakhiri dengan sebuah semicolon (;).
Gambar 2.9. Kode Dasar PHP Sumber: (http://www.w3schools.com/php/)
2.7. HTML
HTML(Hyper Text Markup Language) adalah simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser. Tag-tag HTML selalu diawali dengan <x> dan diakhiri dengan
</x> dimana x tag HTML seperti b, i, u dan sebagainya. Namun ada juga tag yang tidak diakhiri dengan tanda </x> seperti tag <br>, <input> dan lainnya. Sebuah halaman website akan diapit oleh tag <html>……</html>. File-file HTML selalu berakhiran dengan ekstensi *.htm atau *.html. Jadi jika anda mengetik sebuah naskah dan menyimpannya dengan ekstensi *.html maka anda membuat file yang berformat HTML (Astamal, 2006).
2.7.1. HTML Documents
Setiap dokumen HTML harus diawali dengan deklarasi <!DOCTYPE html>.
Sebuah dokumen HTML dimulai dengan <html> dan diakhiri dengan </html>.
Bagian output (yang terlihat di layar) selalu diapit oleh <body> dan </body>
Gambar 2.10. HTML Documents
Sumber: (http://www.w3schools.com/html/html_basic.asp) 2.7.2. HTML Headings
HTML headings didefinisikan dengan tags <h1> sampai dengan <h6>:
Gambar 2.11. HTML Headings
Sumber: (http://www.w3schools.com/html/html_basic.asp) 2.7.3. HTML Paragraphs
HTML paragraphs didefinisikan dengan tag <p>:
Gambar 2.12. HTML Paragraphs
Sumber: (http://www.w3schools.com/html/html_basic.asp) 2.7.4. HTML Links
HTML links didefinisikan dengan tag <a>:
Gambar 2.13. HTML Links
Sumber: (http://www.w3schools.com/html/html_basic.asp) 2.7.5 HTML Images
HTML images didefinisikan dengan tag <img>. Source file (src), alternative text (alt), dan size (width dan height) bersifat sebagai atribut.
Gambar 2.14. HTML Images
Sumber: (http://www.w3schools.com/html/html_basic.asp)
2.8. AJAX
Istilah AJAX (Asynchronous JavaScript And XML) dalam pengembangan web menjadi populer pada beberapa tahun belakangan ini. AJAX ini sendiri bukan merupakan bahasa pemrograman baru, AJAX hanya merupakan sebuah teknik pemanfaatan object XMLHttpRequest dengan javascript untuk berkomunikasi dengan server secara Asynchronous, dengan pemanfaatan object XMLHttpRequest ini kita dapat membuat proses berjalan secara background atau bekerja dibelakang layar sementara user dapat tetap berinteraksi dengan halaman web yang ada. Pemanfaatan tehnik Asynchronous ini jugalah yang telah mendorong pengembangan web menjadi lebih kaya atau banyak yang menulisnya dengan istilah pengembangan Rich Internet Application (RIA) atau WEB 2.0. AJAX pertama kali di perkenalkan oleh Jesse James Garrett pada tulisannya yang berjudul AJAX: A New Approach To Web Applications. Jesse James memberi istilah AJAX untuk singkatan dari Asynchronous JavaScript And XML, namun pada perkembangannya data yang dikomunikasikan secara Asynchronous tidaklah harus berupa XML data, kita mengunakan format data lain untuk dikomunikasikan secara Asynchronous dengan server seperti PLAIN TEXT FILE, HTML DATA atau juga berupa SWF data (Flash file). Tehnik komunikasi Asynchronous dengan server sendiri pertama kali dikembangkan oleh microsoft pada tahun 1997, kemudian pertama kali XMLHttpRequest Object diperkenalkan pada IE5 (circa 1998) dan kemudian dipergunakan secara luas pada Outlook web access. Jesse James Garrett's kemudian memberikan istilah AJAX untuk tehnik Asynchronous ini pada salah satu tulisannya di tahun 2005. Dan hingga saat
ini telah banyak yang mengimplementasikan teknik ini dalam pengembangan web.
(Peter, 2007) 2.8.1 HTTP
Untuk memahami AJAX dengan baik perlu memahami tentang hypertext transmission protocol (HTTP), sebuah protokol untuk mengirimkan halaman web, gambar, dan tipe file lainnya dari internet pada browser dan sebaliknya. HTTP terdiri dari dua bagian: sebuah request dan sebuah response. Ketika anda menulis sebuah URL pada browser, browser akan membuat dan mengirimkan sebuah request.
Request ini memuat URL yang telah di ketik bersamaan dengan informasi tentang browser itu sendiri. Pihak server menerima request tersebut dan mengirimkan balik response. Response memuat informasi mengenai request bersamaan dengan data dalam URL. Browser yang menentukan dalam menginterpretasi response dan tampilan dalam halaman web (Zakas, McPeak, Fawcett, 2007).
2.8.2. JQuery-AJAX
JQuery library memiliki kecocokan dalam menangani kapabilitas AJAX.
Fungsi-fungsi dan metode-metode didalamnya membuat pengambilan data dari server tidak memerlukan halaman browser melakukan refresh (The JQuery Foundation, 2016). Beberapa fungsi-fungsinya yaitu:
.ajaxComplete() : Memunculkan sebuah handler yang akan dipanggil ketika AJAX request selesai.
.ajaxError() : Memunculkan sebuah handler yang akan dipanggil ketika AJAX request selesai dengan terdeteksi kesalahan (error).
.ajaxSend() : Memberikan sebuah function yang akan dieksekusi sebelum AJAX request dikirim.
.ajaxStart() : Memunculkan sebuah handler yang akan dipanggil ketika AJAX pertama dimulai.
.ajaxStop() : Memunculkan sebuah handler yang akan dipanggil ketika AJAX request telah selesai.
.ajaxSuccess() : Memberikan sebuah function yang akan dieksekusi ketika AJAX request selesai dengan sukses.
jQuery.ajax() : Menjalankan sebuah HTTP request yang bersifat asynchronous
jQuery.ajaxPrefilter() : Mengatasi custom AJAX option atau memodifikasi option yang ada sebelum setiap request dikirim dan sebelum setiap request diproses oleh $.ajax()
jQuery.ajaxSetup() : Menetapkan nilai default untuk AJAX request kedepan.
Penggunaan fungsi ini tidak disarankan.
jQuery.ajaxTransport() : Menciptakan sebuah object yang mengatasi transmisi aktual dari data AJAX.
jQuery.get() : Mengambil data dari server menggunakan HTTP Get request
jQuery.getJSON() : Mengambil data JSON dari server menggunakan Get HTTP request
jQuery.getScript() : Mengambil sebuah file JavaScript dari server menggunakan Get HTTP request, kemudian mengeksekusinya
jQuery.param() : Membuat sebuah representasi serial dari sebuah array, object, atau JQuery object cocok digunakan dalam sebuah URL query string atau AJAX request.
jQuery.post() : Mengambil data dari sebuah server menggunakan HTTP POST request.
.load() : Memuat data dari server dan meletakkan HTML pada element yang cocok
.serialize() : Menyandi kumpulan element dalam sebuah string
.serializeArray() : Menyandi kumpulan element kedalam array nama atau array nilai.
2.9. Responsive Design
Tujuan dari Responsive Design adalah untuk membuat suatu desain tampilan aplikasi multi-platform yang dapat menyesuaikan dengan lingkungan user mengakses aplikasi tersebut, apakah yang dilihat dari browser PC tradisional, ataupun melalui
smartphone, agar tampilan bagus dan mudah dibaca (Marcotte, 2011). Responsive Design memiliki tiga komponen penting diantaranya:
The Fluid Grid
Grid merupakan salah satu unsur yang telah secara konsisten digunakan di seluruh disiplin ilmu desain, dari tipografi melalui desain furniture. Biasanya dalam desain aplikasi, grid dibuat dalam pixel, dengan 960 pixel menjadi pilihan yang lebih disukai oleh kebanyakan desainer. Seperti, di antara alasan-alasan lain, itu adalah kerangka yang arus proses desain, dan tetap dalam pikiran aturan desain klasik pertiga.
Media Queries
Tujuan dari media queries untuk Responsive Design untuk melihat kemampuan dari perangkat yang sedang digunakan dalam aplikasi. Disamping itu dapat digunakan untuk memeriksa resolusi layar tinggi dan lebar dari perangkat, apakah perangkat portrait atau landscape. Setelah permintaan media yang telah ditentukan, maka perangkat akan memuat style sheet sesuai yang telah direncanakan sebelumnya.
Flexible Media
Tujuan untuk media yang fleksibel (khusus gambar) adalah untuk memungkinkan mereka untuk memuat berbeda pada perangkat yang berbeda. Sebuah solusi awal telah cukup menetapkan ukuran gambar sampai 100% pada semua perangkat, dan berhenti di situ. Namun belum tentu yang lurus ke depan. Sebagai contoh, sebuah gambar pada ponsel perlu menjadi ukuran file cukup kecil, sehingga tidak memakan semua bandwidth dengan biaya yang mahal, sementara itu mungkin juga perlu memperbaiki pesannya karena memiliki ukuran layar lebih kecil dari PC.
2.10. Survei Software-software Sejenis
Dalam penggerjaan skripsi ini, dilakukan survey terlebih dahulu terhadap software-software sejenis, untuk menganalisa perbandingan fitur-fitur yang ada.
Terdapat beberapa software yang akan digunakan sebagai referensi, antara lain Qlue, Waze dan Neighborhood Crime Watch.
2.10.1. Qlue
Qlue merupakan aplikasi berbasis media sosial yang memberikan kemudahan bagi pengguna untuk melaporkan masalah utama pada lingkungannya. Tidak hanya melaporkan, pengguna juga bisa menangkap momen penting disekitarnya menggunakan foto dan lokasi dan mengunggahnya ke Qlue. Tujuan Qlue adalah untuk meningkatkan kepedulian publik terhadap lingkungan dan mendukung pemerintah memperbaiki masalah di Jakarta. Selain itu, aplikasi ini juga menjadi penilaian kinerja lurah dan camat setempat dalam menindaklanjuti keluhan warga.
Cara ini tentu lebih mudah, cepat, dan murah dibanding harus blusukan untuk melihat kondisi atau lingkungan secara langsung.
Gambar 2.15. Contoh Laporan dari user Qlue Gambar 2.16. Halaman Profil Qlue
Gambar 2.15 dan Gambar 2.16 merupakan contoh pengunaan aplikasi Qlue.
Gambar 2.15 merupakan sebuah contoh dari laporan user Qlue. User dapat melampirkan foto kejadian dan menambahkan judul beserta caption yang menjelaskan gambar kejadian tersebut. Gambar 2.16 menunjukan halaman profile
dari user. Dalam halaman profile, dapat terlihat avatar yang digunakan user, nama, level user, beserta data diri lainnya.
Fitur-fitur yang dimiliki Qlue:
Melakukan pengambilan foto suatu kejadian dan bisa di upload melalui tombol upload.
Melaporkan kejadian berupa foto dan keterangan dengan cara upload pada pihak pemerintah.
Memberikan laporan tentang suatu tempat bisnis (bank, restaurant, rumah sakit, dan lain-lain) berupa laporan positif (apresiasi) dan laporan negatif (kritik).
Menampilkan Map dimana laporan itu diberikan.
User memiliki halaman profil pribadi dan ada fitur following and followers.
Fitur level user, status user, ranking user dipengaruhi oleh tingkat aktifitas user dan reputasi user.
Fitur Coins and Gems yaitu reward yang diberikan kepada user dengan syarat dan ketentuan tertentu.
Fitur Avatar berupa gambar untuk mewakili user dalam profilnya. Avatar shop menggunakan mata uang coins and gems.
Fitur Message (Inbox, Sent Message) antar user.
Membuat forum diskusi antar user mengenai topik-topik tertentu.
Fitur search user dan search neighborhood (lokasi).
Fitur MyNeighborhood untuk melihat segala laporan yang berkaitan dengan lokasi tempat tingal user.
Fitur ranking neighborhood yang mencatat ranking lokasi (kabupaten) teraktif memberikan laporan beserta reward coin and gems pada setiap user bertempat tinggal di lokasi tersebut dalam periode tertentu.
2.10.2. Waze
Waze merupakan aplikasi digital berbasis lokasi yang cukup banyak dipakai pengguna smartphone di Indonesia. Waze kerap digunakan sebagai aplikasi wajib
untuk digunakan untuk memandu perjalanan hingga menghindari kemacetan. Waze dimanfaatkan pengguna di Indonesia untuk berbagi informasi dan mengetahui situasi lalu lintas, dengan memanfaatkan fitur GPS. Tak heran jika Indonesia masuk dalam 10 besar pengguna Waze secara global.
Gambar 2.17. Tampilan Awal Waze Gambar 2.18. Fitur Report Waze
Gambar 2.17 dan Gambar 2.18 merupakan contoh pengunaan aplikasi Waze.
Gambar 2.17 merupakan tampilan awal ketika user masuk kedalam menu Waze.
Berbeda dengan Qlue, Waze lebih menonjolkan tampilan peta daripada tampilan post- post laporan dari user. Pada Gambar 2.18, User dapat memberikan laporan menegani topik-topik tertentu.
Fitur-fitur yang dimiliki Waze adalah:
Menampilkan maps untuk mengetahui lokasi user dan reports dari user lain.
Setiap user memiliki profil pribadi beserta fitur friendship.
Fitur Navigate dari suatu titik (start point) pada titik tujuan (finish point)
Fitur Message (Inbox, Sent Message) antar user.
Fitur Send Location, baik lokasi user sekarang, lokasi rumah, lokasi kantor, dan lokasi tujuan.
Pelaporan masalah dalam lalu lintas jalan dengan berbagai kriteria.
Pengambilan foto pada laporan masalah lalu lintas.
2.10.3. Neighborhood Crime Watch
Neighborhood Crime Watch adalah aplikasi yang memfasilitasi sharing informasi kriminalitas melalui berbagai aplikasi sosial media yang memiliki daftar kontak (LINE, BBM, ataupun SMS).
Gambar 2.19. Tampilan Awal Neighborhood Gambar 2.20. Tampilan Peta Crime Watch Neighborhood Crime Watch
Gambar 2.19 dan Gambar 2.20 merupakan contoh pengunaan aplikasi Neighborhood Crime Watch. Gambar 2.19 adalah tampilan awal dari aplikasi ini.
Dalam menu awal, hanya terdapat tiga pilihan yaitu shoot, spot, dan share. Gambar 2.20. menunjukan tampilan fitur spot, yaitu memilih lokasi dalam peta tempat dimana
user melihat kriminalitas. Hal ini digunakan untuk melakukan pelaporan kriminalitas lebih lanjut.
Fitur yang dimiliki aplikasi ini:
Shoot, mengambil gambar melalui kamera device dan mengumpulkan gambar pada 1 folder
Spot, mencatat lokasi dan mengambil gambar screenshoot tempat user berada
Share, membagikan gambar dalam folder dan dapat menambahkan deskripsi.
Share dilakukan pada aplikasi sosial media seperti LINE, BBM, ataupun aplikasi sejenis lainnya.
2.11. Perbandingan
Setelah melakukan survei terhadap software-software sejenis, semua software tersebut memfasilitasi pelaporan terhadap permasalahan kota. Aplikasi pelaporan masyarakat dan forum opini publik mengambil beberapa fitur dari aplikasi sejenis, namun beberapa fitur ditambahkan demi menjawab kebutuhan.
Tabel 2.2. Perbandingan software sejenis
Fitur Qlue Waze
Neighborhood Crime Watch
Aplikasi yang akan
dibuat
Upload foto √ √ √ √
Report tentang city problems √ √ √ √
Report tentang city appreciations
√ x x √
Verifikasi masalah oleh pihak pemerintah
√ x x x
Memperlihatkan peta dan lokasi
√ √ √ √
User profile √ √ x √
Tabel 2.2. Perbandingan software sejenis (lanjutan) User’s friends / followers and
following
√ √ x √
Tingkatan pemakaian users √ √ x √
Self currency (gold/coin) dan shop
√ x x x
Avatar untuk profil user √ x x √
Foto untuk profil user x √ x x
Fitur message √ √ x √
Forum diskusi user √ x x √
Search user lain √ √ x √
Search lokasi √ √ √ √
Filter city problem reports by lokasi
√ x x √
Ranking user √ x x √
Ranking lokasi √ x x √
Pengelompokan reports x x x √
Comment users on reports √ x x √
Pengaduan reports palsu oleh user
x x x √
Blacklist users oleh Admin x x x √
Seperti yang terdapat pada Tabel 2.2, ada yang merupakan aplikasi antar user dan ada yang merupakan aplikasi yang menjembatani pemerintah dan user. Beberapa diantaranya tidak menyediakan suatu forum diskusi antar user. Selain itu, aplikasi- aplikasi tersebut tidak memfasilitasi pengelompokan-pengelompokan laporan berdasarkan waktu, tempat, dan jenis yang sebenarnya memudahkan user untuk mengetahui garis besar laporan.
