57
2. Desain Antarmuka Interface
Berikut ini merupakan rancangan desain antarmuka hasil lengkap ada di lampiran dari aplikasi
Mobile School Maps MooMaps universitas di Yogyakarta : a.
Halaman Utama Rancangan desain halaman utama dapat dilihat pada gambar berikut :
Gambar 23. Desain Halaman Utama b.
Halaman Posisi Pengguna Rancangan desain halaman posisi pengguna dapat dilihat pada gambar
berikut :
Gambar 24. Desain Halaman Posisi Pengguna
58
c. Halaman Detail Universitas
Rancangan desain halaman detail universitas dapat dilihat pada gambar berikut :
Gambar 25. Desain Halaman Detail Universitas d.
Halaman Peta Universitas Rancangan desain halaman peta universitas dapat dilihat pada gambar
berikut :
Gambar 26. Desain Halaman Peta Universitas
59
e. Halaman Rute Ke Kampus
Rancangan desain halaman rute ke kampus dapat dilihat pada gambar berikut :
Gambar 27. Desain Halaman Rute ke Kampus
3. Desain Sistem
Rancangan desain sistem aplikasi Mobile School Maps MooMaps dapat
dilihat pada gambar berikut :
Gambar 28. Desain Sistem
60
4. Desain Basis Data
Rancangan basis data pada aplikasi Mobile School Maps MooMaps yang
dibuat menggunakan tool MySQL Workbench dapat dilihat pada gambar berikut :
Gambar 29. Rancangan Desain Basis Data
C. Tahap Implementasi
Tahap implementasi merupakan tahap mentranslasikan desain yang telah dibuat ke dalam program perangkat lunak yang meliputi implementasi sistem,
implementasi antarmuka, dan implementasi basis data.
1. Implementasi Sistem
Proses pengembangan aplikasi Mobile School Maps MooMaps dilakukan
dengan menggunakan kode editor Sublime Text 2 dengan menggunakan
phonegap dan ionic sebagai framework aplikasi. a.
Implementasi Layout Dan Tampilan Aplikasi Dalam perencanaan awal pembuatan aplikasi menggunakan JQuery Mobile
sebagai framewok UI dikarenakan kemudahan penggunaan dan sudah
banyaknya tutorial penggunaanya. Penggunaan JQuery Mobile ketika diujikan di
web browser masih menunjukan performa yang bagus dengan waktu load yang cepat, namun masalah muncul ketika aplikasi sudah di
deploy ke dalam