## PERANCANG BANGUN APLIKASI MOBILE PADA PLATFORM ANDROID BERBASIS HTML5 STUDI KASUS LAYANAN INFORMASI WEBSITE UNIPDU JOMBANG
Mita Septiana Chumairoh 1 , Budiman 2 , Diema Hernyka Satyareni 3
Universitas Pesantren Tinggi Darul Ulum Jombang, Indonesia mitayin23l@gmail.com

## Abstrak
Perkembangan teknologi web saat ini banyak digunakan pengembang software , begitu juga di Unipdu.  Kebutuhan  menggunakan  teknologi  ini  sangat  dibutuhkan  sebagai  media  layanan informasi  berbasis  web.  Akan  tetapi,  dengan  perkembangan  teknologi mobile terutama Android  yang banyak digunakan,  layanan informasi  yang sudah berjalan saat ini harus bisa mengikuti  perkembangan  teknologi mobile tersebut.  Oleh  karena  itu,  dibangunlah  Aplikasi Web Mobile Android  berbasis  HTML5  dengan  tujuan  agar  dapat  memenuhi  kebutuhan informasi  yang  dapat  diakses  melalui  perangkat mobile .  Aplikasi  ini  dilengkapi  dengan notifikasi  pengumuman  untuk  mahasiswa  dan  notifikasi  pendaftaran online untuk  admin PMB.  Aplikasi mobile yang  dibangun  mengimplementasikan  tiga  teknologi  yaitu  HTML5, Hybrid  Application yang  digunakan  untuk  membangun  aplikasi mobile di  android,  dan Google Cloud Messagging sebagai penyedia layanan cloud messaging yang digunakan untuk mengirim notifikasi ke perangkat android. Aplikasi ini berupa installer yang dapat diinstall di perangkat mobile android.  Hasil  uji  coba  aplikasi  menyimpulkan  bahwa  HTML5  dapat diterapkan  pada  layanan  informasi website Unipdu  Jombang  yang  dapat  berjalan  pada platform android.
Kata Kunci : HTML5, Mobile Android, Hybrid Application, Google Cloud Messagging .

## Abstract
The development of web technology is currently widely used software developers, as well as in Unipdu. The need to use this technology is needed as a medium of web-based information services.  However,  with  the  development  of  mobile  technology,  especially  Android  which  is widely  used,  the  service  information  that  is  already  running  at  this  time  should  be  able  to follow  the  development  of  mobile  technology.  Therefore,  built  Web  Applications  Mobile Android-based  HTML5  in  order  to  meet  the  needs  of  information  that  can  be  accessed through  mobile  devices.  The  application  comes  with  a  notification  announcements  for students  and  online  registration  notification  for  admin  PMB.  Mobile  applications  that  are built to implement the three technologies, namely HTML5, Hybrid Application used to build mobile  applications  on  Android,  and  Google  Cloud  Messagging  as  a  provider  of  cloud messaging service used to send notifications to your android device. This application can be installed  in  the  installer  android  mobile  devices.  The  trial  results  concluded  that  HTML5 applications can be applied to services Jombang Unipdu website information that can be run on android platform
Keywords: HTML5, Android Mobile, Hybrid Application, Google Cloud Messaggin

## PENDAHULUAN
Universitas  Pesantren  Tinggi  Darul ‘Ulum (UNIPDU) Jombang telah memiliki website yang  dilengkapi  dengan  layanan informasi  akademik  yang  dapat  diakses melalui web  browser baik  itu desktop browser maupun mobile  browser .  Adanya website dirasa masih kurang efektif karena hasil survey membuktikan bahwa
mahasiswa jarang sekali membuka website untuk  mencari  informasi,  hal  ini  terbukti mahasiswa kurang update dalam mendapatkan informasi akademik Unipdu..
Untuk  mengatasi  hal  tersebut  perlu adanya  pengembangan  ke  arah mobile application . Dengan adanya hybrid application yang dibangun dengan HTML5  dirasa  sangat  cocok  untuk mengembangkan website ke  arah mobile . Aplikasi  nantinya  akan  terpasang  pada perangkat mobile android yang dihubungkan  dengan database dan server website Unipdu  Jombang  yang  dilengkapi dengan  notifikasi.  Dengan  adanya  aplikasi ini  mahasiswa  cukup  menerima  informasi tersebut  melalui  perangkat mobile android yang dimilikinya.
Mengembangkan
website Unipdu  menuju  aplikasi mobile tidak  terlepas  dari  teknologi Hybrid Application dan Teknologi  Google  Cloud Message (GCM).
Berdasarkan    permasalahan  tersebut di atas, maka dapat dirumuskan permasalahan  yaitu              (1)  Bagaimana merancang dan membangun aplikasi mobile android  berbasis  HTML5  pada website Unipdu  Jombang?  (2)  Bagaimana menerapkan  teknologi  HTML5  beserta teknologi  yang  lain  agar  aplikasi mobile dapat  berjalan  pada platform android?.
Adapun  tujuan  dari  permasalahannya adalah  (1)  Merancang  dan  membangun
aplikasi mobile pada platform android berbasis  HTML5  studi  kasus website
Unipdu Jombang. (2) Menerapkan teknologi  HTML5  beserta  teknologi  yang lain  agar  aplikasi mobile dapat  berjalan pada platform android.

## METODE PENELITIAN Teknologi Hybrid Application
Menurut  Pace  (2012), hybrid application adalah  perpaduan  kelebihan yang  dimiliki native  application dengan mobile web application (HTML5). Native Application adalah aplikasi yang terpasang atau terinstal pada perangkat mobile seperti Android,  IOs,  WindowsPhone,  Symbian, atau  Blackberry  yang  memiliki  kelebihan aplikasi  berjalan  lebih  fleksibel  dan  lebih cepat.  Sedangkan mobile web application (HTML5)  adalah  aplikasi  berbasis website yang  hanya  dapat  diakses  melalui modern web browser yang  sudah  mendukung HTML5.  Kelebihan hybrid  aplication adalah  Proses loading dan  kinerja  lebih cepat  dan  dapat  dijalankan  sepenuhnya secara offline seperti aplikasi native .

## HTML5
HTLM5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan  isi  dari  WWW  ( world  wide web )  sebuah  teknologi  inti  dari internet . HTML5  adalah  revisi  kelima  dari  HTML yang  pertama  kali  diciptakan  pada  tahun 1990. HTML5 merupakan salah satu karya World Wide Web Consortium (W3C) untuk mendefinisikan  sebuah  bahasa  markah tunggal  yang  dapat  ditulis  dengan  cara HTML  ataupun  XHTML.  Salah  satu kelebihan dari HTML5 adalah mendukung untuk penyimpanan secara offline .
Teknologi Google  Cloud  Messaging (GCM) for Android Diambil dari situs resminya http://developer.android.com/google/gcm/i ndex.html , Google  Cloud  Messaging (GCM)  untuk  Android    adalah  layanan yang  memungkinkan  untuk  mengirim  data
/  pesan  dari server ke  perangkat  Android,
atau  sebaliknya  untuk  menerima  data  / pesan  dari  perangkat  ke server pada koneksi  yang  sama.  Layanan  GCM menangani semua aspek antrian pesan dan pengiriman  ke  target  aplikasi  Android yang berjalan pada perangkat target. GCM gratis tidak peduli seberapa besar kebutuhan messaging dan tidak  ada  kuota. GCM  mamiliki Cloud  Connection  Service (CCS) yang memungkinkan dapat berkomunikasi  dengan  perangkat  Android melalui koneksi XAMPP
persisten. Keuntungan  utama  dari  CCS adalah  kecepatan,  dan  kemampuan  untuk menerima  pesan  hulu  (yaitu,  pesan  dari perangkat  ke  cloud).  Berikut  adalah arsitektur dari GCM.
Gambar 1. Arsitektur GCM
Dari  gambar  di  atas  dapat  dijelaskan bahwa, perangkat mobile harus
mendapatkan  ID  dari  GCM  dengan melakukan register  terlebih dahulu (1) dan (2).  Kemudian,  ID  tersebut  akan  disimpan pada server (3).  Selanjutnya  jika  terdapat
perubahan  data  pada server atau  dengan kata  lain  admin  memposting  informasi/ pengumuman, dengan segera server membertahu  GCM  (a)  untuk  meneruskan informasi kepada perangkat mobile berupa notifikasi  (b).  Cara  kerja  GCM  ini  yang menjadi  landasan  dari  pengembangan website Unipdu ke arah mobile android.

## HASIL PENELITIAN
DAN PEMBAHASAN Perancangan Sistem Perancangan sistem yang akan dibangun mengadopsi dari Hybrid Application  yang  saat  ini  merupakan  hal baru  dalam  dunia  teknologi.  Hybrid Application sangat cocok digunakan untuk mengembangkan  layanan  yang  ada  di website  Unipdu  Jombang.  Gambar  di bawah  ini  menunjukkan  gambaran  umum dari aplikasi yang akan dibangun.
Gambar 2. Gambaran Umum sistem yang akan dibangun
Perangkat  lunak  pada  server  yaitu web server yang ditangani oleh script PHP dan  database  MySQL  dengan  sistem hosting    internet.  Aplikasi    di    sisi    server berfungsi    untuk    menangani    koneksi client    yang  berbasis  platform  android.
Setiap  inputan  dari  calon  mahasiswa  baru dan  admin  fakultas  akan    ditangani    dan dilayani    oleh    web    server.  Perangkat lunak    pada    client    dibuat  menggunakan platform    android.  Aplikasi    ini    akan dipasang    di  handphone    client  yang berfungsi untuk menerima notifikasi
layanan
informasi website Unipdu Jombang.  Gambar  3  di  bawah  ini menerangkan perancangan sistem.
Admin Fakultas Server Website Calon Mahasiswa Baru Website GCM Server Push Notification Service kirim data user, data pengumuman, dan pendaftaran Mengisi formulir pendaftaran Memasukkan informasi pengumuman Client Mahasiswa Mengirimkan notifikasi pengumuman Menerima notifikasi pengumuman Mengirimkan notifikasi PMB Client Admin PMB Menerima notifikasi PMB
Gambar 3. Alur Sistem yang akan dibangun

## Perancangan Database
Karena  dikembangkan  dari  sistem yang  sudah  ada,  maka  terdapat  beberapa tabel yang diambil dari sistem sebelumnya. Gambar  di  bawah  adalah  hasil  gabungan dari  perancangan  database  sistem  yang diusulkan.  Tabel  dengan  tanda  warna  biru adalah tabel dari sistem yang diusulkan.
Gambar 4. Perancangan Database

## Perancangan Interface
Berikut  adalah  tampilan  menu  dari aplikasi  mobile  yang  akad  dibangun. Terdapat  sembilan  menu  utama  seperti tampak pada gambar di bawah ini.
Gambar 5 . Perancangan Interface

## Implementasi Antatmuka
Implementasi    antarmuka    sistem merupakan  implementasi  hasil  dari  desain yang  telah dirancang sebelumnya.  Berikut adalah    implementasi    antarmuka  aplikasi mobile  system  informasi  website  unipdu yang dilengkapi dengan fitur notifikasi
Gambar 6. Halaman pendaftaran online

## KESIMPULAN DAN SARAN
Berdasarkan hasil analisis  masalah hingga perancangan, dapat ditarik kesimpulan bahwa teknologi hybrid application dapat digunakan untuk mengambangkan website Unipdu Jombang ke  arah mobile android  yang  dilengkapi dengan notifikasi (pemberitahuan). Mahasiswa dapat dengan mudah mendapatkan informasi dari website
Unipdu tanpa harus berkunjung ke website secara langsung.
Sedangkan saran yang dapat penulis  usulkan  adalah  bahwa  paper  ini dibuat  dengan  maksud  keinginan  penulis untuk berbagi ilmu pengetahuan. Dari hasil karya  tulis  ilmiah  ini  diharapkan  pembaca dapat  memahami  isi  dan  menganalisis kekurangan di dalamnya. Penulis menyarankan agar penerapan hybrid
application ini  tidak  hanya  pada platform Android  saja,  namun  mencakup platform yang lain seperti Windows Phone, iPhone, Blackberry dan lain sebagainya.

## DAFTAR PUSTAKA
Budiyanto, Utomo. (2011). Rancang
Bangun  Aplikasi  Mobile  Dosen
Penasihat  Akademik  :  Studi  Kasus
Universitas    Budi  Luhur  Jakarta . Jurnal TELEMATIKA MKOM, 3, (2), 26-29.
Ganefi, Robi. (2012). Pembangunan
Aplikasi  Mobile  Jejaring  Sosial Kampus  Online  Unikom  Berbasis
Android, . Skripsi pada Jurusan Teknik Informatika Universitas Komputer Indonesia Bandung : tidak diterbitkan.
Hernita. Membuat  sendiri  Aplikasi  Web Mobile menggunakan
jQuery
Mobile. Yogyakarta:  C.V  Andi
Offset, 2013.
Khafidli,  Firgiawan. Trik  Menguasai HTML5 CSS3 PHP Aplikatif.
Yogyakarta: Lokomedia, 2011.
URL :
http://developer.android.com/google/ gcm/index.html .   19 Oktober 2013.
URL : http://bisakomputer.com/notepad- text-editor-keren-serba-guna/ , 29
Desember 2013.
URL : www.oracle.com/technetwork/java/JavaS E/downloads/index.html ,  04  Desember 2011.