8
KONSEP MEMBANGUN APLIKASI FRONT END BERBASIS WEB APPML (APPLICATION MODELING LANGUAGE) Joko Triyono 1) , Prita Haryani 2) 1,2) Jurusan Teknik Informatika, Fakultas Teknologi Industri, IST AKPRIND Yogyakarta Email: 1) [email protected], 2) [email protected] Abstrak Teknologi web akhir-akhir ini berkembang sangat pesat, setelah HTML 5 di luncurkan, maka terjadi banyak perubahan dalam teknik pemrograman berbasis web, APPML (Application Modeling Language) merupakan salah satu teknik pemrograman yang berbasis pada HTML5. Semakin banyak web di bangun maka akan semakin banyak pula data beredar di dunia maya. Dan mau tidak mau, sebuah informasi akan menjadi referensi bagi informasi yang lain dan begitu seterusnya sehingga informasi akan menjadi sebuah mata rantai yang saling kait mengkait satu sama lain. Walaupun sistem informasi telah online selama 24 jam dan bisa diakses dari mana saja selama ada koneksi internet tetapi akan menjadi tidak efektif dan efisien jika harus mengunjungi masing-masing sistem informasi yang ada untuk mendapatkan informasi yang dibutuhkan. Maka diperlukan sebuah metode atau teknik dalam membangun aplikasi front end dengan melakukan koleksi data dari berbagai sumber sistem informasi yang relevan, dengan menanamkan service server dan service client sebagai penghubung antar sistem dengan dukungan JSON, XML. Dengan teknik APPML (Application Modeling Language) yang diterapkan pada sebuah aplikasi front end berbasis html 5 tanpa melakukan koneksi database secara langsung, tetapi cukup memanggil service berbasis JSON maka akan di peroleh data atau informasi yang dibutuhkan tanpa harus mengunjungi sistem informasi yang ada secara langsung. Keywords: appml, json, service, xml 1. PENDAHULUAN Teknologi web akhir-akhir ini berkembang sangat pesat, setelah HTML 5 di luncurkan dengan dikeluarkannya rekomendasi dari W3C pada tahun 28 Oktober 2014, maka terjadi banyak sekali perubahan dalam teknik pemrograman berbasis web, APPML (Application Modeling Language) merupakan salah satu teknik pemrograman yang berbasis pada HTML5. Semakin banyak web di bangun maka akan semakin banyak pula data beredar di dunia maya, seiring dengan meningkatnya kebutuhan masyarakat akan informasi, baik itu hanya sebagai berita maupun informasi sebagai kebutuhan pokok dalam menjalankan kegiatan harian. Dan mau tidak mau, sebuah informasi akan menjadi referensi bagi informasi yang lain dan begitu seterusnya sehingga informasi akan menjadi sebuah mata rantai yang saling kait mengkait satu sama lain. Walaupun sistem informasi telah online selama 24jam dan bisa diakses dari mana saja selama ada koneksi internet tetapi akan menjadi tidak efektif dan efisien jika harus mengunjungi masing-masing sistem informasi yang ada untuk mendapatkan informasi yang dibutuhkan. Maka diperlukan sebuah metode atau teknik dalam membangun aplikasi front end dengan melakukan koleksi data dari berbagai sumber sistem informasi yang relevan sehingga sebuah aplikasi front end akan membantu end user untuk melihat informasi secara cepat dan live. Dalam sebuah penelitian tentang pengembangan sistem disimpulkan bahwa sistem yang difokuskan dalam mencari kriteria yang sesuai untuk pemesanan boarding untuk kamar asrama bisa dilakukan dengan sistem aplikasi [5]. Keberhasilan dalam mengimplemen-tasikan sistem ini adalah dapat bekerja dengan baik untuk membantu siswa dalam mencari lokasi tempat tinggal yang tepat. Dari pencarian, arahan, hingga pemesanan secara online dan respon fasilitas sistem dengan menggunakan SMS (Short Message Service) kepada pemilik kos yang memudahkan proses pemesanan. Dalam penelitian yang berbeda di peroleh hasil tentang pengembangan sebuah prototype sistem informasi yang di kombinasikan dengan jejaring sosial twitter, dimana jejaring twitter digunakan petani untuk melaporkan semua kegiatannya ke sistem informasi, dengan menggunakan fasilitas APIs (Aplication Programming Language) maka informasi yang masuk akan di kirimkan ke sistem informasi dengan menggunakan account dari twitter pengirim. Dengan metode ini secara

KONSEP MEMBANGUN APLIKASI FRONT END BERBASIS WEB … · tentang pengembangan sebuah prototype sistem informasi yang di kombinasikan dengan jejaring sosial twitter, dimana jejaring

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: KONSEP MEMBANGUN APLIKASI FRONT END BERBASIS WEB … · tentang pengembangan sebuah prototype sistem informasi yang di kombinasikan dengan jejaring sosial twitter, dimana jejaring

KONSEP MEMBANGUN APLIKASI FRONT END BERBASIS WEB APPML(APPLICATION MODELING LANGUAGE)

Joko Triyono1), Prita Haryani2)

1,2)Jurusan Teknik Informatika, Fakultas Teknologi Industri, IST AKPRIND YogyakartaEmail: 1)[email protected], 2)[email protected]

AbstrakTeknologi web akhir-akhir ini berkembang sangat pesat, setelah HTML 5 di luncurkan, maka

terjadi banyak perubahan dalam teknik pemrograman berbasis web, APPML (Application ModelingLanguage) merupakan salah satu teknik pemrograman yang berbasis pada HTML5. Semakin banyakweb di bangun maka akan semakin banyak pula data beredar di dunia maya. Dan mau tidak mau,sebuah informasi akan menjadi referensi bagi informasi yang lain dan begitu seterusnya sehinggainformasi akan menjadi sebuah mata rantai yang saling kait mengkait satu sama lain. Walaupunsistem informasi telah online selama 24 jam dan bisa diakses dari mana saja selama ada koneksiinternet tetapi akan menjadi tidak efektif dan efisien jika harus mengunjungi masing-masing sisteminformasi yang ada untuk mendapatkan informasi yang dibutuhkan. Maka diperlukan sebuah metodeatau teknik dalam membangun aplikasi front end dengan melakukan koleksi data dari berbagaisumber sistem informasi yang relevan, dengan menanamkan service server dan service client sebagaipenghubung antar sistem dengan dukungan JSON, XML. Dengan teknik APPML (ApplicationModeling Language) yang diterapkan pada sebuah aplikasi front end berbasis html 5 tanpamelakukan koneksi database secara langsung, tetapi cukup memanggil service berbasis JSON makaakan di peroleh data atau informasi yang dibutuhkan tanpa harus mengunjungi sistem informasi yangada secara langsung.

Keywords: appml, json, service, xml

1. PENDAHULUANTeknologi web akhir-akhir ini berkembang

sangat pesat, setelah HTML 5 di luncurkandengan dikeluarkannya rekomendasi dari W3Cpada tahun 28 Oktober 2014, maka terjadibanyak sekali perubahan dalam teknikpemrograman berbasis web, APPML(Application Modeling Language) merupakansalah satu teknik pemrograman yang berbasispada HTML5. Semakin banyak web di bangunmaka akan semakin banyak pula data beredar didunia maya, seiring dengan meningkatnyakebutuhan masyarakat akan informasi, baik ituhanya sebagai berita maupun informasi sebagaikebutuhan pokok dalam menjalankan kegiatanharian. Dan mau tidak mau, sebuah informasiakan menjadi referensi bagi informasi yang laindan begitu seterusnya sehingga informasi akanmenjadi sebuah mata rantai yang saling kaitmengkait satu sama lain. Walaupun sisteminformasi telah online selama 24jam dan bisadiakses dari mana saja selama ada koneksiinternet tetapi akan menjadi tidak efektif danefisien jika harus mengunjungi masing-masingsistem informasi yang ada untuk mendapatkaninformasi yang dibutuhkan.

Maka diperlukan sebuah metode atauteknik dalam membangun aplikasi front end

dengan melakukan koleksi data dari berbagaisumber sistem informasi yang relevan sehinggasebuah aplikasi front end akan membantu enduser untuk melihat informasi secara cepat danlive.

Dalam sebuah penelitian tentangpengembangan sistem disimpulkan bahwa sistemyang difokuskan dalam mencari kriteria yangsesuai untuk pemesanan boarding untuk kamarasrama bisa dilakukan dengan sistem aplikasi [5].Keberhasilan dalam mengimplemen-tasikansistem ini adalah dapat bekerja dengan baikuntuk membantu siswa dalam mencari lokasitempat tinggal yang tepat. Dari pencarian,arahan, hingga pemesanan secara online danrespon fasilitas sistem dengan menggunakanSMS (Short Message Service) kepada pemilikkos yang memudahkan proses pemesanan.Dalam penelitian yang berbeda di peroleh hasiltentang pengembangan sebuah prototype sisteminformasi yang di kombinasikan dengan jejaringsosial twitter, dimana jejaring twitter digunakanpetani untuk melaporkan semua kegiatannya kesistem informasi, dengan menggunakan fasilitasAPIs (Aplication Programming Language) makainformasi yang masuk akan di kirimkan kesistem informasi dengan menggunakan accountdari twitter pengirim. Dengan metode ini secara

Page 2: KONSEP MEMBANGUN APLIKASI FRONT END BERBASIS WEB … · tentang pengembangan sebuah prototype sistem informasi yang di kombinasikan dengan jejaring sosial twitter, dimana jejaring

teknologi dan biaya petani tidak mengalamikesulitan dalam melaporkan kegiatannya,sedangkan dari sisi investor akan bisa melihatperkembangan investasinya [7]. Juga padapenelitian lain tentang komunikasi datadihasilkan bahwa penerapan sistem pengendalidan pemantau kendaraan jarak jauh padapenelitian ini diimplementasikan denganmembuat prototype alat IoT (Internet of Things)menggunakan Rapsberry Pi 3 Model B, modemGSM, GPS USB VK-172 Glonass, dan relay DC[6]. Perangkat IoT akan dilengkapi aplikasi yangakan dikoneksikan dengan server Firebase danselanjutnya dipasang pada kendaraan. Jikakendaraan dihidupkan maka alat IoT akanmengirimkan data posisi kendaraan dari satelitGPS ke server Firebase. Penggunaan serverFirebase dipilih karena mendukungpemrograman socket, memiliki pustaka yanglengkap untuk berbagai platform web dan pirantibergerak, dapat digabungkan dengan berbagaiframework, dan menyediakan layanan DbaaS(Database as a Service). Hasilnya, data posisikendaraan yang diterima server, secara langsung(realtime) akan ditampilkan melalui aplikasi websistem pengendali dan pemantau jarak jauhdengan tampilan visualisasi Google Maps dantombol lock/unlock untuk menghidupkan danmematikan/mengunci kendaraan. Tentangkepuasan pengguna website disimpulkan bahwadari hasil uji hipotesis menunjukkan bahwadimensi citizen support, content and appreanceof information, reability, functionality of theinteraction environment, trust, dan dimensi easeof use berpengaruh terhadap kualitas layanan e-government [3]. Kualitas layanan e-governmentberpengaruh terhadap kepuasan penggunawebsite, kualitas layanan e-governmentberpengaruh terhadap intensitas penggunawebsite dan kepuasan pengguna websiteberpengaruh terhadap intensitas penggunaanwebsite Pemerintah Kota Yogyakarta. Daribeberapa penelitian yang telah ada di dapatdisimpulkan bahwa metode penampilan maupunpengiriman informasi masih terkait dengansebuah aplikasi tertentu, atau tersaji pada sebuahaplikasi. Kelengkapan informasi di website akanmeningkatkan tingkat kepuasan pengguna,sehingga di harapkan tingkat kunjungan websiteakan meningkat.

Dalam penelitian lain tentang AppMLmenyimpulkan bahwa APPML adalah sebuahteknik yang patut di perhitungkan untukmemangkas waktu pengembangan aplikasi web,yang dengan mudah bisa dikombinasikan dengan

arsitektur aplikasi web serta memperluaskemampuan yang ada pada HTML [4]. AppMLadalah singkatan dari Application ModelingLanguage, berjalan di halaman HTML manapunserta tidak perlu instalasi [2]. AppML adalah alatuntuk membawa data ke aplikasi HTML baik ituobject, file maupun database. AppMLArchitecture dalam dokumen resmi padaw3schools dijelaskan bahwa sebagai sebuahArsitektur Web Modern dengan menggabungkanteknik dan gagasan terkini tentangpengembangan web modern [1]. AppML fokuspada kecepatan, kesederhanaan, dan biaya rendahmeliputi : Arsitektur MVC Berorientasi Layanan,Konsumsi Bandwidth Sangat Rendah,Optimalisasi untuk Cloud Computing, PemisahanPenuh Konten dari Presentasi, PemrogramanDeklaratif Cerdas, Perkembangan WebDevelopment yang cepat, Sangat Scalable danTestable, Mudah Konfigurasi dan Rekonfigurasi,Dukungan Pintar untuk Akun dan PeranPengguna. AppML menggunakan arsitekturMVC seperti pada Gambar 1.

Gambar 1. Arsitektur MVC

Model mendeskripsikan aplikasi, Modeltidak memperhatikan presentasi atau userinterface (UI), model diimplementasikan denganJSON.

{"rowsperpage" : 10,"database" : {

"connection" : "localmysql","sql" : "SELECT CustomerName, City, Country

FROM Customers","orderby" : "CustomerName"

},"filteritems" : [

{"item" : "CustomerName", "label" : "Customer"},{"item" : "City"},{"item" : "Country"}

],"sortitems" : [

Page 3: KONSEP MEMBANGUN APLIKASI FRONT END BERBASIS WEB … · tentang pengembangan sebuah prototype sistem informasi yang di kombinasikan dengan jejaring sosial twitter, dimana jejaring

{"item" : "CustomerName", "label" : "Customer"},{"item" : "City"},{"item" : "Country"}]}

View hanya sebuah script HTML, sebagaiuserinterface untuk menginputkan maupunmenampilkan data.

<!DOCTYPE html><html lang="en-US"><title>Customers</title><link rel="stylesheet" href="/w3css/4/w3.css"><script src="/appml/2.0.3/appml.js"></script><body><div class="w3-container" appml-data="local?model=model_customers"><h1>Customers</h1><div appml-include-html="inc_listcommands.htm"></div><div appml-include-html="inc_filter.htm"></div><table class="w3-table-all">

<tr><th>Customer</th><th>City</th><th>Country</th>

</tr><tr appml-repeat="records">

<td>{{CustomerName}}</td><td>{{City}}</td><td>{{Country}}</td>

</tr></table></div></body></html>

Sedangkan Controller sebagai script dari clientdan atau server, pada sisi client script web iniakan mengontrol aplikasi untuk menampilkandata sebagaimana didefinisikan dalam model danatribut HTML, dapat berjalan independen dariHTML (tersem-bunyi) dan bisa meminta datamodel dari server web (server SQL), Edit datamaupun mengirimkan data ke server web.Sedangkan Skrip server dapat mengontrolaplikasi dengan menerima permintaan dari klien(browser), mengembalikan, menerima data dariklien dan memperbarui data di server sertamenjaga otentikasi dan keamanan.

2. METODE PENELITIANMetode penelitian dilakukan dalam skala

laboratorium di Laboratorium Jaringan danInternet Institut Sains dan Teknologi AKPRINDYogyakarta, data atau model yang digunakandalam penelitian ini adalah Aplikasi SistemInformasi, Service Server, Service Client,APPML yang dari beberapa sumber tersebut diolah sedemikian rupa sehingga bisa menjelaskanpenelitian yang dimaksud.

Pengembangan aplikasi menggunakanmetode pengembangan waterfall. Metodewaterfall ini dibangun oleh Winston W. Roycepada tahun 1970 untuk menggambarkan praktikproduk perangkat lunak. Model waterfall terdiridari lima fase yaitu analysis, design,implementation, testing dan maintenance. Setiapfase pada model waterfall dapat dilihat padaGambar 2.a. Analysis

Pada tahap analisis dilakukan prosespengumpulan data untuk mendapatkaninformasi mengenai perangkat lunak yangakan dikembangkan sesuai dengan kebutuhanpengguna. Teknik pengumpulan data untuktahap analisis ini bisa dengan observasi,wawancara maupun kuesioner.

b. DesignTahap design digunakan untukmenerjemahkan kebutuhan perangkat lunakdari tahap analisis ke desain. Desain yangdibuat berupa sketsa desain aplikasi denganmenggunakan UML.

c. ImplementationSetelah desain dibuat, tahap selanjutnya yaitumembuat atau mengembangkan aplikasiperangkat lunak.

d. TestingPada tahap testing, verifikasi dan validasiaplikasi perangkat lunak dilakukan. Tahaptesting digunakan untuk menemukankesalahan atau debug pada saat pembuatanaplikasi. Tahapan pengujian secarakeseluruhan mencakup pengujian unit,pengujian integrasi, pengujian sistem, danpengujian penerimaan.

e. MaintenanceTahap terakhir dari model waterfall ini adalahtahapan maintenance. Proses instalasi produkdan pemeliharaan dilakukan dalam tahapmaintenance.

Page 4: KONSEP MEMBANGUN APLIKASI FRONT END BERBASIS WEB … · tentang pengembangan sebuah prototype sistem informasi yang di kombinasikan dengan jejaring sosial twitter, dimana jejaring

Gambar 2. Fase penelitian pada model waterfall

Kebutuhan SistemBahan dan alat yang dibutuhkan untuk

penelitian ini meliputi hardware dan software,diantaranya yaitu:1. Hardware, laptop Lenovo dengan spesifikasi

Intel® Core™ i5-5200U CPU @ 2.20GHz ×4 Ram 7,7 GiB 64bit Hardisk 500GB.

2. Software Sistem operasi Ubuntu 16.04 LTS.3. Software Web Server, PHP4. Database MySQL5. Perangkat jaringan dan server public di

Laboratorium Komputer Jaringan danInternet.

Metode Pengumpulan DataMetode yang digunakan dalam

pengumpulan data pada penelitian ini terdiri daribeberapa metode, yaitu:

Metode Observasi, Metode observasi inidigunakan untuk pengumpulan data denganpengamatan secara langsung maupun tidaklangsung terhadap obyek yang diteliti.

Metode Studi Kepustakaan, Metode studikepustakaan merupakan sebuah cara dalampengumpulan data dengan mempelajari bahanpustaka baik berupa dokumen tertulis ataupunberupa gambar dengan membandingkanbeberapa referensi.

Metode Eksperimen, Metode inidigunakan dengan mengadakan uji coba dansimulasi yang telah dibuat menggunakan dua

buah Web Server, satu web server di serverPublic milik Laboratorium Jaringan dan Internet( untuk selanjutnya di sebut Server Public) yangdi isi sebuah sistem informasi web onlineberbasis PHP dan MySQL, sedangkan webserver kedua di letakkan di localhost /Laptop( yang untuk selanjutnya di sebut server lokal)yang di isi sebuah aplikasi berbasis web HTML,PHP dan MySQL.

Peraturan BisnisPeraturan bisnis pada obyek penelitian adalahbahwa server public adalah server sistem aplikasiyang telah berjalan, sedangkan server lokaladalah sebuah sistem informasi yang akanmengambil data dari server public melaluiservice yang disediakan di server public yangkemudian di tampilkan di server lokalmenggunakan metode APPML. Service Clientpada server lokal akan memanggil service serverdi server public menggunakan JSON, sedangkanaplikasi APPML di server lokal akan memanggilservice client dan akan menerima data berbentukXML.

Desain SistemBerdasarkan peraturan bisnis yang telah

dijelaskan, maka dalam tulisan ini diimplementasikan dalam sebuah gambar designseperti yang di tunjukkan pada Gambar 3.

Page 5: KONSEP MEMBANGUN APLIKASI FRONT END BERBASIS WEB … · tentang pengembangan sebuah prototype sistem informasi yang di kombinasikan dengan jejaring sosial twitter, dimana jejaring

Gambar 3. Desain Sistem

Dalam penelitian ini akan di bangun:1. Sebuah sistem informasi di server lokal2. Service server di server public3. Service client di server lokalDari gambar 3 bisa dijelaskan sebagai berikut:1. Sistem aplikasi pada server lokal akan

menampilkan data berbasis HTML yangakan mengambil data melalui APPML padaserver lokal.

2. APPML sendiri akan mendapatkan data darisebuah service client yang ada di serverlokal berbasis Server Side dalam hal iniPHP yang berbentuk array assosiativ dandiubah jadi XML.

3. Service Client berbasis server side php akanmemanggil sebuah service server di serverpublic melalui JSON dan akan mendapatkandata berbentuk JSON dan diubah jadi arrayassosiativ.

4. Service Server berbasis server side php akanmembaca data pada sistem informasi, baikitu fungsi atau koneksi database yang telahdi sediakan dan akkan mendapatkan databerbentuk array assosiativ dan di ubah jadiJSON untuk dikirimkan ke Service Client.

Perancangan Sistem1. Sistem Informasi Aplikasi LokalAkan menampilkan data mahasiswa denganformat tabel Nomor Urut, Nomor Mahasiswa,Nama Mahasiswa dan Jurusan. Berikut ini adalahlisting aplikasi di sisi APPML mhs1.html.

1. <head>2. <script src="appml.js"></script>3. <title>DATA MAHASISWA VIA APPML</title>4. </head>5. <body>6. <div align=center><h1>DATA MAHASISWA</h1>7. <div appml-

data="http://localhost/lh/service/service.php">

8. <table border=1 cellpadding="0"cellspacing="0" width="100%">

9. <tr>10. <td width="5%">Nu</td><td

width="10%">NIM</td><tdwidth="75%">NAMA MAHASISWA</td><tdwidth="10%">Kode Jur</td>

11. </tr>12. <tr appml-repeat="records">13. <td

align=center>{{nu}}</td><td>{{nim}}</td><td>{{nama}}</td><td>{{kodejur}}</td>

14. </tr>15. </table>16. </div>17. </div>18. </body>

Pada listing mhs1.html bisa dijelaskan sebagaiberikut: Pada baris 2. appml.js, adalah fungsi utama

APPML yang digunakan sebagai bagianutama dari sistem berbasis APPML.

Pada baris 7. Adalah menyataka n ataumengarahkan bahwa data APPML di ambildari sumber di alamat tersebut, bisa localhostmaupun alamat publik.

Pada baris 12. appml-repeat=”records”sebagai loop data dari records hasil daripemanggilan baris 7 dengan format JSON.

Pada baris 13. Adalah proses menampilkanelemen data dari JSON menggunakan{{nim}} dan seterusnya sesuai dengan formatdata dari JSON.

2. Sistem Service ClientSistem Service Client adalah aplikasi serverside berbentuk PHP yang dipanggil olehaplikasi lokal dan akan mengirimkan data keservice server. Berikut ini adalah listingaplikasi di sisi service client service.php

Page 6: KONSEP MEMBANGUN APLIKASI FRONT END BERBASIS WEB … · tentang pengembangan sebuah prototype sistem informasi yang di kombinasikan dengan jejaring sosial twitter, dimana jejaring

1. <?php2. $url="http://labora.lab.akprind.ac.id/service

/service.php";3. $jsonfile = file_get_contents($url);4. echo "{ \"records\" : ".$jsonfile."}";5. ?>

Pada listing service.php bisa dijelaskansebagai berikut:Pada baris 2, $url adalah alamat dari serviceserver yang akan diambil datanya.Pada baris 2. file_get_content adalah prosesuntuk mengambil data pada service server.Pada baris 3. Data hasil file_get_contentberbentuk JSON di tambahkan “records :”agar format datanya standart dengan aplikasiAPPML.

3. Service ServerService Server adalah aplikasi di ranah publikberbasis server side yang akan berhubunganlangsung dengan sistem informasi maupundatabase, dan bertugas untuk memberikaninformasi kepada service client dalam formatJSON. Berikut ini adalah listing aplikasiservice server service.php.

1. <?php2. include_once "buka.php";3. $sql="select nim,nama,kodejur from alum

limit 10";4. $query = $db->prepare($sql);5. $uu=$query->execute();6. $i=0;7. $arr = array();8. $data = $query->fetchAll();9. foreach ($data as $r) {

10. $i++;11. $tmp=array("nu" => $i,"nim" =>

$r['nim'],"nama" => $r['nama'],"kodejur" =>$r['kodejur'] );

12. array_push($arr, $tmp);13. }14. $jsonfile = json_encode($arr);15. echo $jsonfile;16. ?>

Pada listing service.php bisa dijelaskansebagai berikut:

Pada baris 1 sd 9, adalah proses koneksidatabase dan pembacaan data.

Pada baris 11, adalah pemasukan data rekordkedalam sebuah $tmp dengan format arrayassosiative.

Pada baris 12, adalah pemasukan data $tmpkedalam array $arr.

Pada baris 14, adalah proses pengubahan datadari array assosiative ke dalam format JSON.

Pada baris 15, adalah meng-outputkan dataJSON ke peminta informasi.

3. HASIL DAN PEMBAHASANAplikasi yang menggunakan APPML ini

perlu di ujicoba untuk mengetahui sejauh manainformasi ini bisa di berikan kepada end usersesuai dengan yang di rencanakan ataudiinginkan.

Dari hasil pengujian terhadap webpraktikum di laboratorium komputer di dapatkanhasil yang memuaskan, di peroleh bahwa outputaplikasi berbasis APPML ini seperti padaGambar 4 tentang hasil aplikasi APPML.

Web http://labora.lab.akprind.ac.id adalahweb public milik laboratorium komputer yangmenampung dan mengelola data pendaftaranpraktikum, di dalam database sistem ini terdapattabel mahasisw yang menampung data

mahasiswa yang mengikuti praktikum. Gambar 5menunjukkan salah satu tampilan weblabora.lab.akprind.ac.id, sedangkan pada Gambar6 menunjukkan tabel mahasisw di lihat dari toolsphpmyadmin.

Gambar 4. Hasil Aplikasi APPML

Page 7: KONSEP MEMBANGUN APLIKASI FRONT END BERBASIS WEB … · tentang pengembangan sebuah prototype sistem informasi yang di kombinasikan dengan jejaring sosial twitter, dimana jejaring

Gambar 5. Tampilan web http://labora.lab.akprind.ac.id

Gambar 6. Tampilan tabel mahasiswa melalui phpmyadmin

Dari pengujian di sisi service serverhttp://labora.lab.akprind.ac.id/service/service.phpdidapatkan hasil sebagai berikut:

[{"nu":1,"nim":"111051005","nama":"SAMUEL KARELLABOK","kodejur":"05"},{"nu":2,"nim":"111051011","nama":"FARIZ SATYAWIRANTO","kodejur":"05"},{"nu":3,"nim":"111051023","nama":"YusufFebriyanto","kodejur":"05"},{"nu":4,"nim":"111051028","nama":"VeraLaurensiana Kocu","kodejur":"05"},{"nu":5,"nim":"111051063","nama":"Syifa NurulHuda","kodejur":"05"},{"nu":6,"nim":"111051074","nama":"FUADAZIZ","kodejur":"05"},{"nu":7,"nim":"111051075","nama":"AgostinhoFernandes Da Silva","kodejur":"05"},{"nu":8,"nim":"111051092","nama":"Agradira DwiWahyuda","kodejur":"05"},{"nu":9,"nim":"112053006","nama":"PermadiYulianto","kodejur":"05"},{"nu":10,"nim":"121051001","nama":"Frederico F.e.Da Cunha","kodejur":"05"}]

Data dengan format JSON yang berisi datamahasiswa, adapun format JSON bisa dijelaskansebagai berikut:

[{ "nu":1, elemen nomor urut"nim":"111051005", elemen NIM"nama":"SAMUEL KAREL LABOK",elemen NamaMahasiswa"kodejur":"05"elemen Kode Jurusan},...]

Tiap record data berisi nu, nim, nama dankodejur. Sedangkan pengujian di sisi serviceclient pada http://localhost/lh/service/service.phpdiperoleh data sebagai berikut:

{ "records" :[{"nu":1,"nim":"111051005","nama":"SAMUEL KARELLABOK","kodejur":"05"},

Page 8: KONSEP MEMBANGUN APLIKASI FRONT END BERBASIS WEB … · tentang pengembangan sebuah prototype sistem informasi yang di kombinasikan dengan jejaring sosial twitter, dimana jejaring

{"nu":2,"nim":"111051011","nama":"FARIZ SATYAWIRANTO", "kodejur":"05"},{"nu":3,"nim":"111051023", "nama":"YusufFebriyanto", "kodejur":"05"},{"nu":4,"nim":"111051028", "nama":"VeraLaurensiana Kocu", "kodejur":"05"},{"nu":5,"nim":"111051063", "nama":"Syifa NurulHuda", "kodejur":"05"},{"nu":6,"nim":"111051074","nama":"FUAD AZIZ","kodejur":"05"},{"nu":7,"nim":"111051075","nama":"AgostinhoFernandes Da Silva", "kodejur":"05"},{"nu":8,"nim":"111051092","nama":"Agradira DwiWahyuda", "kodejur":"05"},{"nu":9,"nim":"112053006","nama":"PermadiYulianto", "kodejur":"05"},{"nu":10,"nim":"121051001","nama":"Frederico F.e.Da Cunha", "kodejur":"05"}]}

Pada pengujian ini juga diperoleh dalam formatJSON, dengan perincian sebagai berikut:

{ "records" : [{ "nu":1,

"nim":"111051005","nama":"SAMUEL KAREL LABOK","kodejur":"05"

},....]}

Penambahan elemen “records” pada bagian ini,yang akan digunakan oleh APPML untukmelakukan looping data.

4. KESIMPULANDari paparan hasil penelitian diatas, maka

bisa dibuktikan bahwa menggunakan teknikAPPML dengan mengkombinasikan denganJSON akan bisa mendukung komunikasi antarsistem informasi, sehingga penyebaran dan ataupenyajian informasi tidak hanya dilakukan olehsebuah sistem informasi saja, melainkan bisa dilakukan oleh sistem-sistem informasi yang lain.Dari sisi keamanan, juga bisa di tingkatkan,karena sistem informasi service client tidak perlumengetahui user maupun password untuk aksesdatabase, bahkan tidak perlu tahu juga namatabel, relasi dan komponen-komponen lain yangada pada sistem informasi dan service server.Service client hanya akan mengetahui hasil databerupa format JSON yang telah disediakan dantinggal mengolah menjadi output pada tampilanweb APPML. Dari sisi networking, maka pada

saat membuat aplikasi end user, maka bisadilakukan secara localhost tanpa harusmelakukan duplikasi database maupun sisteminformasi, karena data bisa langsung di perolehsecara langsung antara service client dan serviceserver secara realtime selama ada koneksiinternet.

5. REFERENSI[1] dari w3schools.com:

https://www.w3schools.com/appml/appml_architecture.asp , diakses 05 April 2017.

[2] AppML Tutorial. 2017. w3schools.com:https://www.w3schools.com/appml/default.asp, diakses 05 April 2017.

[3] Haryani, P. 2016. Evaluasi Kualitas LayananE-Government Pemerintah KotaYogyakarta Dengan Metode E-GovQualModifikasi. Simposium Nasional Ke-15RAPI 2016. Hal. 379-386. Surakarta:Fakultas Teknik UniversitasMuhammadiyah Surakarta.

[4] Mangal, M. & Dubey, M. 2015. AppML : AnIdea of Mordern Web Development.International Journal Of Engineering &Computer Science (IJECS). P. 11761-11764.

[5] Saputro, G. A. Hamzah, A. & Triyono, J.2013. Sistem Informasi Pengolahan DataRumah Kos Menggunakan FrameworkCodeigniter Di Kelurahan DemanganKecamatan Gondokusuman Yogyakarta.Jurnal Script.

[6] Susanti, E. & Triyono, J. 2016. PrototypeAlat IoT (Internet Of Things) untukPengendali dan Pemantau Kendaraan SecaraRealtime. Simposium Nasional RAPI XV2016.

[7] Triyono, J. 2015. Sistem InformasiAgroteknologi Berbasis Web Dan JejaringSosial Twitter. Seminar Nasional IENACO.P. 205-212.