Desain Antarmuka Interface Desain Sistem Desain Basis Data

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