Melepas kepenatan sejenak, setelah beberapa hari ini saya belajar+mengerjakan sesuatu yang baru. 1 minggu ini saya lagi asik-asiknya ngulik framework Yii, framework PHP yang sangat-sangat powerfull untuk membuat aplikasi berbasis web. Banyak kemudahan yang diberikan, seperti extension, widget, dan yang paling bikin saya kesemsem ialah fitur generatornya. Dengan hanya klik, klik dan klik, sudah menghasilkan sebuah aplikasi CRUD :D. Kayaknya memang harus pindah ke Yii, setelah CI tidak ada perkembangan sama sekali dalam beberapa bulan ini. Apalagi kemarin, kancah dunia per-CI-an dibuat heboh, gara-gara Ellislab si empunya CI, ingin menjual kepemilikian framework tersebut -_-.
Nah, di postingan malam ini saya ingin berbagi sedikit tentang sebuah tutorial PhoneGap sederhana, yaitu Menampilkan dan Parsing Data JSON Dari Web Services (Android & iOS). Salah satu framework mobile yang keren menurut saya dan framework mobile yang dibilang masih beta serta tidak layak pakai oleh dosen saya (wkakakakkkk…). Untuk menampilkan data dari server online di aplikasi berbasiskan PhoneGap, kita akan menggunakan javascript untuk melakukan parsing data dalam bentuk JSON yang dihasilkan oleh web service di sisi server. OK deh, kita langsung aja ke langkah-langkah pembuatannya.
1. Silahkan install terlebih dahulu framework PhoneGap, untuk platformnya terserah rekan-rekan saja. Bisa di android atau IOS, disini saya menggunakan android. Tutorial instalasi silahkan dicek disini.
2. Di project, akan terbuat sebuah folder “assets”. Kita akan meletakkan file html, css dan js di folder ini.
3. Buat sebuah tabel seperti di bawah ini :
CREATE TABLE IF NOT EXISTS `tbl_kategori` ( `id_kategori` int(5) NOT NULL AUTO_INCREMENT, `nama_kategori` varchar(100) NOT NULL, PRIMARY KEY (`id_kategori`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ; INSERT INTO `tbl_kategori` (`id_kategori`, `nama_kategori`) VALUES (1, 'Teknologi'), (2, 'Gosip dan Curhat'), (3, 'Pendidikan'), (4, 'Kuliner'), (5, 'Politik'), (6, 'Hukum'), (7, 'Kriminal');
4. Sebagai web service-nya, buat sebuah file dengan nama DBConnect.php. Hasil query database, dikonversi menjadi format JSON dengan fungsi json_encode(). Simpan di dalam folder htdocs.
<?php class DBConnect { public $host; public $user; public $pass; public $perintah; public $database; public $koneksi; function __construct() { $this->host="localhost"; $this->user="root"; $this->pass=""; $this->koneksi=mysql_connect($this->host,$this->user,$this->pass); if(!$this->koneksi) { echo "Koneksi gagal"; exit(); } $this->database="db_services"; $q=mysql_select_db($this->database,$this->koneksi); if(!$q) { echo "Database tidak ditemukan"; } } public function GetKategori() { $this->perintah = mysql_query("select * from tbl_kategori"); while($r=mysql_fetch_array($this->perintah)) { $arr[] = $r; } echo '{"items":'. json_encode($arr).'}'; } } header("content-type: application/json"); $db = new DBConnect(); $db->GetKategori(); ?>
5. Untuk tampilannya, disini saya menggunakan jQueryMobile. Sehingga untuk link css dan js, memanggil versi online-nya saja. Buat sebuah file, dengan nama kategori.html di dalam folder assets.
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script src="js/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script> <script src="js/kategori.js"></script> <style type="text/css"> .listview-custom{ padding: 10px; border-bottom: 1px solid #ccc; } .listview-custom a{ text-decoration: none; color: #333; } </style> </head> <body> <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>Data Kategori</h1> </div> <div data-role="content"> <div id="loading" style="display:none;text-align:center;"> <b>Sabar Brow...!</b> <br><br> <img src="loading.gif"> </div> <div id="gagal" style="display:none;text-align:center;color:#F00;"> <div class="alert alert-danger"> <strong>Koneksi ente ngenesss broww...</strong> </div> </div> <div id="tampilData" style="display:none;"> <ul id="dataList" data-role="listview" data-divider-theme="a"> </ul> </div> </div> <div data-role="footer" data-position="fixed"> <h4>Data Kategori</h4> </div> </div> </body> </html>
6. Sekarang untuk melakukan parsing dari format JSON yang dihasilkan oleh web service di atas, kita membutuhkan bantuan javascript. Buat sebuah file dengan nama kategori.js di dalam folder /assets/js.
$(document).ready(function() { $('#loading').show(); get_data(); function get_data(){ var AmbilData; $.ajax({ type : 'GET', url : 'http://10.0.2.2/services/DBConnect.php', async: true, beforeSend: function(x) { if(x && x.overrideMimeType) { x.overrideMimeType("application/j-son;charset=UTF-8"); } }, dataType : 'json', success : function(data){ AmbilData = data.items; $('#loading').hide(); $('#tampilData').show(); $.each(AmbilData, function(index, loaddata) { $('#dataList').append( '<li data-role="list-divider" data-theme="a" class="listview-custom"><a onClick="alert(\''+ loaddata.nama_kategori + '\');" data-ajax="false">'+ loaddata.nama_kategori + '</a></li>'); }); }, error: function(jqXHR, exception) { $('#loading').hide(); $('#gagal').show(); } }); } });
7. Untuk tambahan seperti animasi loading, bisa menggunakan gambar animasi dalam bentuk .gif yang banyak tersedia di internet.
8. Jalankan via emulator android atau IOS. Disini saya mencobanya di kedua emulator tersebut, dan hasilnya seperti di bawah ini :
Tampak memang benar-benar hybrid, karena dengan sekali membuat aplikasinya untuk di satu platform, sudah tersedia juga untuk platform lainnya. Benar-benar efisien untuk urusan teknis dan waktu, sehingga dateline produk pun bisa dengan cepat terselesaikan. Jadi kalau sudah begini, apa masih beta dan tidak layak pakai…??? (wkakakakakakkk.,.).
Untuk contoh source code lengkapnya, bisa di download di akhir postingan ini. OK deh, sekian dulu postingan saya kali ini. Semoga bisa bermanfaat untuk rekan-rekan yang sedang belajar PhoneGap.
“Stay Foolish, Stay Hungry”
Happy Blogging and Keep Coding
Cheerrrss….!!!!
Mantap gan tutornya ..sgt episien ..:D
mas, mau tanya kalau misalkan pakai methode pos dan get untuk login dan register ada tidak contohnya? oh iya klo misalkan dalam pembuatannya ini ada pada localhost saja bagaimana mas?
next tutorial yaw brow, mudah2an awal bulan depan 🙂
http://10.0.2.2/services/DBConnect.php‘,
gan itu url nya mksdnya gmn ?
saya harus ganti apa? (maklum gan anak bego)
Mas…bagaimana caranya kalau Kita mau memafaatkan API dari website lain….
sekalian tutornya donk mas,… ” CRUD data JSON dengan Phonegap”.
di tunggu… 😀
next postingan yaw brow 😀
siap mas bro… saya tunggu postingannya….
thank before… 😀
Kok aku coba ngga bisa tampil ya mas?
Yang tampil malah “Koneksi ente ngenesss broww…”
padahal kan localhostnya dah jalan?
Proses loading juga tidak tampil ketika mau ngeload data?
nyobanya dimana??
emulator??
device??
emulator pake ip 10.0.2.2
kalo device, pake hosting atau bisa jg pake database lokal dengan konsep adhoc
Kalo untuk memanggil isi dari Kuliner atau Pendidikan gmn mas?
yaw disesuaikan saja sumber datanya
maksud saya sintak memanggil key nya.
error nya pas manggil key nya. binggung.
ini sintak di json nya, betul ngak?
url : ‘http://10.0.2.2/phone/kuliner.php?id=’+ loaddata.id +”,
iya mas, tinggal dimasukkan saja parameternya kesana
Thanks banget tutornya, cm ada pertanyaan sedikit nih. Kenapa saat saya menggunakan DBConnect.php yang di lokal dapat jalan dengan baik sedangkan saat saya menggunakan DBConnect.php yang ada di hosting saya jadinya gagal yah. Padahal saya jalankan file nya dapat ditampilkan di browser. Thx
mungkin gara2 hostingnya yg masih mengembalikan tag html di json nya,,
coba cari2 solusinya di stackoverflow, kemarin saya sempat nemu link nya, tapi lupa save
Gan, kok di tempat ane, ada tanda silang di jquery jquery-1.7.1.min.js nya
Kenapa ya?
Gan ….
mau tanya nih ….
misalnya tampilanya saya buat lewat phonegap ….
dan ngambil databasenya lewat JSON ….
menurut Juragan sendiri nih yah bisa gag …
trim’s …
Mantap bli, ternyata ada juga org indo yg seneng phonegap, keknya dosennya males belajar lagi, atau mungkin udh stack di bhs pemograman tertentu, atau memang phonegap terlalu instan buat dia 🙂
So well, Phonegap dikembangkan bukan oleh sembarang orang, Adobe jd salah satu vendor software yg ikut terlibat.
Pagi gan, saya sudah instal phonegap 3.2 di PC windows 7, IDE yg dipakai Eclipse. Saya sudah membuat simple app menggunakan listview dan sudah berjalan di emulator android. yang mau saya tanyakan, apakah kode yang sama dapat berjalan di emulator IOS? jika saya tidak punya IOS mac/laptop, apakah kode yang sama bisa saya compile di phonegap build agar menghasilkan sebuah app yang berjalan di IOS platform? terima kasih
Emulatornya Pake Apaan ?
Iphone 5 gmnCaranya GUN ?
bro punya aq kok munculnya cuma koneksi ente ngenes, aq pakai mysql yang ada di pc aq, dan phonegap nya di pc yang sama, aq pakai localhost dan 127.0.0.1 di file javascriptnya gak mau juga
type : ‘GET’,
url : ‘http://localhost/json/cread_json.php’,
async: true,
beforeSend: function(x) {
if(x && x.overrideMimeType) {
x.overrideMimeType(“application/j-son;charset=UTF-8”);
}
},
Bro….sy punya masalah yang sama dengan Tri Wiyono, klo di running kategori.html, munculnya cm ” koneksi ente ngenes” padahal klo sy akses http://127.0.0.1:8070/TestConnect/dbconnect.php melalui browser…keluar hasil berupa datanya
knapa ya broo?
crudnya ditunggu de..
mas brow,,sempatin upload android restonya mas brow. yang lengkap. client dan servernya.
ane dapet clientnya di github. tapi ga ada servernya. servernya langsung ke resto.gedelumbung.com.
kalo bisa dapat sourcodenya kan enak buat belajar. soalnya ane cepet belajar kalo pake sistem ATM. pengen belajar bikin aplikasi android, phonegap, REST.
thanks sebelumnya mas brow. terus nulis dan sharing source code…
kalo yg keluar cuma header dan footer doang itu kenapa ya mas bro??
sy coba di localhost utk database, hasilnya gak muncul
di hosting gratisan juga gak muncul,
ip-nya udah sy sesuaikan dgn localhost dan ip hosting juga.
Sy uji cobanya langsung pake device.
Terima kasih
Bro….sy punya masalah yang sama dengan Tri Wiyono, klo di running kategori.html, munculnya cm ” koneksi ente ngenes” padahal klo sy akses http://127.0.0.1:8070/TestConnect/dbconnect.php melalui browser…keluar hasil berupa datanya
knapa ya broo?
thank you bro.. this is what I need! I just try and then connect! great!!
Masih ditunggu tutorial “CRUD data JSON dengan Phonegap” nya bang hhehe, searching digoogle masih gak ada kayaknya 😀
mas ditunggu contoh yang pake method post and get nya yaa 🙂
any way tutorialnya keren (y)
bro. itu program setelah gw run diandroid aplication eclipse ketika data nya ditambah atau dihapus dalam database kemudian gw run lagi file dieclipsedata yang muncul gk sesuai dengan didatabase. apanya ya yg gk ngerefresh?
contoh nya record kriminal gw hapus trs gw jalanin file android nya masih ada. seharusnya kn gk muncul. mungkin bisa kasih penjelasan bro. gw coba restart aplikasi eclipse dan dreamweaver tetep begitu
Om Swastyastu bli, saya mau tanya…
bagaimana cara kita kalau mau bikin web servicenya dari website online yang sudah ada?
mohon bantuannya bli..
suksme
Om Santi Santi Santi Om
kalau buat script login di phonegap seeprti apa ia??
mohon pencerahannya