BAB IV
IMPLEMENTASI DAN PENGUJIAN
4.1 Implementasi
Proses implementasi berikut menjelaskan mengenai implementasi dari sistem yang telah dijelaskan pada bab sebelumnya. Untuk implementasi ini, penulis menggunakan
bahasa pemograman PHP, HTML 5 dan javascript. Untuk proses pengujian dan untuk melihat hasil output, penulis menggunakan compiler Xcode untuk merancang dan
implementasi aplikasi berbasis IOS dan compiler Eclipse dan Android SDK untuk merancangan aplikasi dan implementasi aplikasi berbasis Android. Penulis
menggunakan simulator yang tersedia pada masing-masing compiler untuk menampilkan user interface sistem yang akan dirancang. Penulis menggunakan
Phonegap framework untuk membantu mengembangkan aplikasi Android dan IOS
dengan sekali program.
4.1.1 Hasil Penggunaan Teknik CSS For Retina Display
Pada tahap ini penulis akan membandingkan dua interface menu utama aplikasi yang dikembangkan. Satu interface menggunakan teknik css for retina display, satu
interface tanpa menggunakan teknik tersebut. Dengan demikian didapat perbedaan
tampilan yang dapat dilihat pada gambar 4.1 dibawah ini.
Ubiversitas Sumatera Utara
Gambar 4.1 Hasil menggunakan teknik CSS For Retina Display kiri dan tanpa menggunakan teknik
CSS For Retina Display kanan
Terlihat perbandingan penggunaan teknik CSS for retina display menu terlihat lebih tajam dan jelas, berbeda dengan tanpa penggunaan teknik tersebut.
4.1.2 Hasil Penggunaan HTML 5 Auto Responsive
Pada tahap ini penulis akan menggambarkan hasil penggunaan HTML 5 untuk membuat aplikasi yang auto responsive. Untuk lebih jelasnya, Penulis akan
menampilkan hasil penggunaan script auto responsive HTML 5 pada sistem yang telah dirancang. Adapun tampilan hasilnya dapat dilihat dari website testing
responsive yang tersedia dan gratis. Adapun website yang digunakan penulis yaitu:
http:www.responsinator.com . Website tersebut dapat diakses online untuk mengecek
apakah aplikasi yang dibangun memiliki system auto responsive. Setelah masuk ke halaman website tersebut, input website URL Uniform Resource Locator halaman
sistem yang telah dibangun. Adapun hasil tampilan yang telah diuji testing menggunakan software tersebut adalah sebagai berikut:
Ubiversitas Sumatera Utara
Gambar 4.2 Input Website URL yang ingin diuji auto-responsive
Hasil yang ditampilkan pada website tersebut dapat dilihat pada gambar dibawah ini.
Gambar 4.3 Tampilan System pada Iphone 3 ataupun 4 potrait width 320px
Gambar 4.4 Tampilan System pada Iphone 3 ataupun 4 landscape width 480px
Ubiversitas Sumatera Utara
Gambar 4.5 Tampilan System pada Iphone 5 potrait width 320px
Gambar 4.6 Tampilan System pada Crappy Android Landscape width 320px
Gambar 4.7 Tampilan System pada Nexus 4 potrait width 384px
Ubiversitas Sumatera Utara
Gambar 4.8 Tampilan System pada Nexus 4 Landscape width 600px
Gambar 4.9 Tampilan System pada Ipad Landscape width 1024px
Dari keterangan gambar 4.3 sampai dengan gambar 4.9 telah diuji penggunaan auto responsive
dalam beberapa perangkat yang berbeda ukuran layar pixels. Penulis juga membandingkan website yang tidak memiliki fitur auto responsive, adapun website
tersebut adalah sebagai berikut:
Ubiversitas Sumatera Utara
Gambar 4.10 Tampilan System tanpa fitur auto responsive pada Iphone dan
Crappy Android
Dapat dilihat dari gambar 4.10 bahwa betapa pentingnya penggunaan fitur auto responsive HTML 5
dalam membangun sebuah aplikasi berbasis mobile. Tampilan
Ubiversitas Sumatera Utara
yang menarik dan mudah teratur memudahkan pengguna dalam mengoperasikan sistem tersebut.
4.1.3 Hasil Perancangan Penggunaan Phonegap Framework
Kategori