March 2015 | apank

Home » Archives for March 2015

20 Perintah Sederhana Melalui Fungsi Run

in windows - on 10:10 - No comments

Kotak dialog Run biasa digunakan untuk menjalankan atau untuk sekedar sebagai jalan singkat dalam mengaktifkan feature tertentu. Banyak sekali perintah yang bisa kamu gunakan dan mungkin saja beberapa diantaranya masih banyak yang belum diketahui. Berikut ini akan PCplus tampilkan 20 perintah beserta fungsinya yang bisa digunakan untuk aktifitas komputasi sehari-hari. Untuk mengakses fungsi Run secara cepat bisa dengan menekan kombinasi tombol Windows dan R (Win+R). Berikut beberapa perintah yang bisa kamu coba:
1. %programfiles%
Perintah ini berguna jika kamu ingin langsung masuk ke folder Program Files.
2. %userprofile%
Seperti perintah pada nomor 1, secara langsung akan diarahkan ke folder profil pengguna yang memudahkan untuk mengakses dokumen, foto, musik, serta video.
3. control
Cara lain untuk masuk ke Control Panel adalah dengan mengetikkan perintah tersebut.
4. cleanmgr
Cara termudah untuk membersihkan segala file sampah pada Recycle Bin serta file temporari. Dengannya, kamu akan langsung diarahkan untuk membuka Windows Disk Cleanup Manager.
5. compmgmt.msc
Perintah ini akan langsung membuka Computer Management yang biasanya bisa dilakukan dengan melakukan klik kanan pada My Computer/Computer dan pilih Manage.
6. firewall.cpl
Ingin mengaktif atau non-aktifkan fungsi firewall Windows? kamu bisa mengetikkan perintah tersebut.
7. fsmgmt.msc
Jika ingin melihat folder atau perangkat yang telah di-share bisa menggunakan perintah ini. Kamu juga bisa dengan mudah mengatur fungsi bagi pakai (share) dari sini.
8. Buka peramban
Gunakan perintah berikut untuk membuka peramban favorit kamu. Ketik iexplore untuk pengguna Internet Explorer, chrome untuk Google Chrome, firefox jika menggunakan Mozilla Firefox, atau opera bagi pengunanya.
9. msinfo32
Cara termudah untuk melihat spesifikasi komputer melalui Windows adalah dengan mengetikkan perintah tersebut. Informasi yang ditampilkan lengkap mencakup hardware serta software yang digunakan.
10. netplwiz
Perintah ini berguna bagi komputer yang memiliki beberapa profil pengguna. Administrator bisa secara langsung mengatur konfigurasi untuk akun pengguna. Sedangkan pengguna bisa mengatur dan mengubah sendiri profil mereka masing-masing.
11. osk
osk merupakan kependekan dari On Screen Keyboard yang mana berfungsi untuk mengaktifkan dan digunakan untuk tujuan keamanan atau hal lain.
12. logoff atau shutdown
Sesuai namanya, masing-masing perintah tersebut berguna untuk mematikan komputer atau logoff. Jika ingin membatalkan perintah shutdown yang sudah terlanjur dilakukan, bisa mengetikkan shutdown –a. Tentu saja kamu mesti melakukannya dengan cepat sebelum proses shutdown berlangsung.
13. utilman
Untuk menampilkan Utility Manager jika kamu ingin mengaktifkan feature Magnifier atau Narrator.
14. wuapp
Perintah yang berguna untuk menampilkan Windows Update Manager. Kamu bisa memasang, mengatur, atau menghentikan proses otomatis update dari sini.
15. write atau notepad
Ingin cepat-cepat mencatat hal penting sebelum terlupa? Jika iya, langsung saja gunakan aplikasi sederhana dari Windows yang lebih ringan dibanding aplikasi office lain dengan mengetikkan perintah tersebut.
16. mstsc
Untuk membuka aplikasi remote desktop dan menghubungkannya dengan komputer klien.
17. fonts
Dengannya kamu akan diarahkan ke folder font jika ingin menambahkan font yang belum ada.
18. regedit
Salah satu perintah paling populer jika ingin mengutak-atik registri Windows.
19. msconfig
Perintah ini berguna untuk mengaktif/non-aktifkan beberapa aplikasi yang berjalan pada Startup, Services, dan juga Boot.
20. winver
Akan menampilkan versi sistem operasi Windows yang sedang kamu gunakan.

Aplikasi RSS Berbasis Phonegap Menggunakan zRSSFeed

in android, phonegap - on 02:41 - No comments

Salah satu bentuk problem ketika mendevelop aplikasi RSS berbasis HTML5 atau Ajax adalah permasalahan Same Origin Policy. Konsep Same Origin Policy adalah tameng keamanan aplikasi berbasis Javascript. Sehingga hal ini berimbas pada sulitnya developer saat membuat aplikasi RSS untuk memfetching url dari domain yang berbeda. Setelah beberapa saat mencari solusi, akhirnya penulis menemukan sebuah library javascript bernama zRSSFeed. Library memanfaatkan Google Feed API untuk membaca feed url.

RSS dengan zRSSFeed

zRSSFeed adalah library javascript yang dapat pula diimplementasikan ke dalam aplikasi HTML5 Phonegap. Bagi pembaca yang akan membuat aplikasi mobile baik Android, iPhone, Blackberry, Windows Phone tak ada salahnya untuk menjajal library js satu ini. Berikut adalah implementasi zRSSFeed untuk Phonegap Android Application :
1. Pertama, download library dari situs resmi zRSSFeed di http://www.zazar.net/developers/jquery/zrssfeed/zrssfeed-120.zip
2.Mulailah dengan project Phonegap menggunakan Eclipse atau Adobe Dreamweaver 5.5 yang sudah mendukung Phonegap. Dalam praktik ini, penulis menamai aplikasi ini dengan nama “rssku”. Mengenai nama silahkan pembaca bisa mengubahnya.
3. Buat folder baru bernama rss di dalam /assests/www . Setelah itu ekstrak file zrssfeed-120.zip, taruh file jquery.zrssfeed.js dan jquery.zrssfeed.css ke dalam folder rss tersebut project Anda. Sertakan juga library Jquery. Pengaturan file folder seperti di bawah ini :

      
src

gen

assets

  www

    rss

      jquery-1.7.2.min

      jquery.zrssfeed.js

      jquery.zrssfeed.css

  index.html

  cordova-1.9.0.js

bin

libs

res

view raw gistfile1.txt hosted with ❤ by GitHub

4. Kemudian di dalam file index.html, tulis kode seperti berikut ini :

      
<!DOCTYPE HTML>

<html>

  <head>

    <meta name="viewport" content="width=320; user-scalable=no" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <title>RSS Feed Ku</title>

  <link href="rss/jquery.zrssfeed.css" rel="stylesheet" type="text/css">

 <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>

 <script type="text/javascript" charset="utf-8" src="rss/jquery-1.7.2.min"></script>

 <script type="text/javascript" charset="utf-8" src="rss/jquery.zrssfeed.min.js"></script>

 <script type="text/javascript" charset="utf-8">

        function init() {

            document.addEventListener("deviceready", onDeviceReady, true);

        }   

        function onDeviceReady() {

         //loading rss secara otomatis saat aplikasi dibuka 

         $(document).ready(function () {

       $('#rss').rssfeed('http://feeds.feedburner.com/mkhudablog');

      }); 

        }

 </script>  

  </head>

  <body onload="init();" id="stage" class="theme">

    <h2>RSS Feed</h2>

 <div id="rss">

  <!-- RSS akan tampil di sini  -->

 </div>

  </body>

</html>

view raw index.html hosted with ❤ by GitHub

5. Sebelum anda membuild / debug aplikasi, pastikan anda menambah kode <access origin=”.*” /> dibawah ini pada file cordova.xml yang terletak di dalam folder /res/xml/. Kode ini memungkinkan aplikasi melakukan request ke seluruh domain web online.

      
<access origin="http://127.0.0.1*"/> <!-- allow local pages -->

<access origin=".*"/> <!-- kode yang ditambahkan -->

view raw gistfile1.xml hosted with ❤ by GitHub

6. Silahkan debug atau run aplikasi Anda. Atau dicoba dahulu dibuka melalui web browser. Dan rss Anda akan tampil pada foto di atas.

Aplikasi Kuis Berbasis Android Menggunakan JQuizMe

in android, phonegap - on 02:27 - No comments

Penulis menemukan sebuah library Javascript berbasis Jquery yang dapat dipergunakan untuk pembuatan sebuah Kuis. Library ini penulis temukan di code.google.com dengan nama project JQuizMe. Dibuat oleh Larry Battle dan hingga sekarang telah mencapai versi 2.2.1. Dalam tutorial kali ini penulis akan menjelaskan secara ringkas penggunaan JQuizMe pada framework Phonegap.

Kuis Phonegap

Lihat Demo Download Source

Lihat Tutorial Android Lainnya disini

Sebagai informasi tambahan, dengan menggunakan JQuizMe kita pun bisa membuat aplikasi kuis untuk berbagai jenis pertanyaan. Cakupan jenis pertanyaannya antara lain:

Kuis berbentuk Fill in the Blank (Mengisi secara manual)
Flash Card (Kuis bergambar)
Multiple Choice (Kuis pilihan ganda)
True and False (Kuis benar atau salah)

Setelah membaca dokumentasi lengkap di kuis tersebut dan mencoba mengaplikasikannya dengan localhost, penulis kemudian mencoba mengkombinasikan JQuizMe agar dapat dijalankan pada platform Android maupun Smartphone lain. Ternyata JQuizMe juga berjalan baik di smartphone dengan beberapa perubahan tampilan agar terlihat responsive pada berbagai device.
Mari kita mulai tutorial sederhana pembuatan aplikasi kuis berjenis multiple choice. Yang perlu Pembaca persiapkan untuk membuat aplikasi kuis ini adalah :

JQuery versi 1.8.3 (bisa di download melalui situs resmi Jquery.com), dan
JQuizMe library (berisi file javascript dan css) – download di http://code.google.com/p/jquizme/downloads/list

Pertama, kita membuat konfigurasi project Phonegap sederhana melalui Eclipse yang telah terpasang plugin MDS Applaud. Pembaca bisa mengikuti tutorial pemasangan MDS Applaud yang telah saya tulis sebelumnya di artikel yang berjudul membuat project MDS Applaud, jika belum memasang plugin tersebut.
Berikut adalah informasi konfigurasi aplikasi Phonegap yang penulis buat :

Nama aplikasi : Kuis Phonegap
Build Target : Android 2.1 (Agar support platform Android 2.1 ke atas)
Package Name : com.mkhuda.phonegapkuis
Phonegap Contents Configuration : Minimal Phonegap Project
Phonegap version : Phonegap cordova 1.9.0 (Anda bisa menggunakan versi lain)

Kemudian setelah kita membuat project di atas. Selanjutnya kita membuat dua folder baru di dalam folder assets/www dengan nama folder js/ dan css/. Lalu kita copy library JQuery dan JQuizme ke dalam folder js/ dan JQuizme.css ke dalam folder css/. Seperti ini :

Isi folder assets www

Langkah selanjutnya adalah menuliskan script di index.html dengan menginclude script jquery, jquizme.js dan jquizme.css, berikut adalah kode yang harus ditulis. Untuk mempercepat tutorial, saya sudah menyertakan script / source code aplikasi ini. Berikut adalah isi dari index.html :

      
<!DOCTYPE HTML>

<html>

<head>

  <meta name="viewport" content="width=320; user-scalable=no" />

  <meta http-equiv="Content-type" content="text/html; charset=utf-8">

 <title>Kuis Phonegap</title>

 <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>

 <link rel="stylesheet" type="text/css" href="css/jQuizMe.css"/>

</head>

<body>

 <div id="quizArea"/>

</body>

<script type="text/javascript" src = "js/jquery-1.8.3.js"></script>

<script type="text/javascript" src="js/jQuizMe-2.2.1.js"></script>

<script type="text/javascript">

$( function($){

 var quiz = {

  multiList: [

   {

    ques: "Bahasa pemrograman apa yang didukung Phonegap",

    ans: "HTML, CSS, Javascript",

    ansSel: ["PHP, ASP, MySQL", "Ruby on Rails"]

   },

   {

    ques: "Apakah Phonegap dapat digunakan untuk membuat aplikasi Blackberry?",

    ans: "Iya",

    ansSel: ["tidak"]

   },

   {

    ques: "Platform apa saja yang didukung",

    ans: "Android, iOS, Windows Phone, Blackberry",

    ansSel: ["Windows 7, Windows ME,", "Linux, Chrome App, Firefox Add-ons"]

   }

  ],

 },

 options = {

  help: "<center>Silahkan jawab pertanyaan-pertanyaan yang ada</center>",

  intro: "Kuis Phonegap<br>Info tutorial lebih lanjut, Anda bisa belajar di <a href='http://mkhuda.com/'>Mkhuda.com</a>",

  allRandom: true,

  title: "Basic Phonegap"

 };    

 $("#quizArea").jQuizMe(quiz, options);

});

</script>

</html>

view raw index.html hosted with ❤ by GitHub

Kode di atas menunjukkan bahwa kita membuat variabel bernama Quiz yang berisi option multilist untuk pembuatan kuis berjenis multiple choice. Pertanyaan dibuat berbentuk array dimana :

ques, merupakan soal pertanyaan yang dibuat
ans, jawaban yang benar, dan
ansSel, merupakan pilihan ganda dari soal pertanyaan

Kita bisa melihat dokumentasi lengkap mengenai option dan penjelasan Array di http://code.google.com/p/jquizme/wiki/HowToUse

Pengaturan Mode Layar Aplikasi Android Melalui Manifest

in android, phonegap - on 02:24 - No comments

Dalam pembuatan sebuah aplikasi Android, tentunya kita juga harus merancang dan merencanakan apakah aplikasi yang kita buat nanti akan ditampilkan secara portrait atau landspace. Dengan mengubah beberapa string di dalam file AndroidManifest.xml pada project Eclipse, kita dapat dengan mudah melakukan pengaturan mode layar aplikasi kita nanti.

android portrait landscape

Phonegap adalah framework hybrid yang dapat kita pakai untuk pembuatan aplikasi Android maupun platform lain. Sama halnya seperti aplikasi Native android lain, untuk mengatur aplikasi berbasis Phonegap kita juga masih mempergunakan file AndroidManifest.xml. Pengaturan dalam manifest ini diantaranya adalah untuk :

Melakukan setting versi aplikasi
Konfigurasi build target
Konfigurasi User Permission untuk pengaksesan fitur perangkat
Dan juga mode layar

Untuk artikel kali ini, saya akan membahas bagaimana cara mengatur mode layar baik Landspace atau Portrait. Untuk mengatur layar secara portrait saja, kita harus menambahkan atribut android:screenOrientation menjadi Portrait.

android:screenOrientation= "portrait" <!-- mode hanya portrait -->

1	android:screenOrientation= "portrait" <!-- mode hanya portrait -->

android:screenOrientation= "landscape" <!-- mode hanya landscape -->

1	android:screenOrientation= "landscape" <!-- mode hanya landscape -->

set Atribut ini terletak di dalam tag <activity>, sedangkan tag <activity> terletak di dalam tag <application>. Agar lebih jelas silahkan lihat kode berikut untuk pengaturan mode screen-nya :

<application android:icon="@drawable/ic_launcher"
   android:label="@string/app_name" >
   <activity android:configChanges="orientation|keyboardHidden"
      android:name=".MyPhoneGapActivity"
      android:screenOrientation= "portrait" <!-- ganti menjadi landspace atau portrait -->
      android:label="@string/app_name" >
        <intent-filter>
          <action android:name="android.intent.action.MAIN" />
          <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

<application android:icon="@drawable/ic_launcher"

android:label="@string/app_name" >

<activity android:configChanges="orientation|keyboardHidden"

android:name=".MyPhoneGapActivity"

android:screenOrientation= "portrait"

android:label="@string/app_name" >

<intent-filter>

</intent-filter>

</activity>

</application>

Untuk mengganti ke mode landscape, Anda hanya perlu mengubah android:screenOrientation menjadi Landspace. Agar kembali ke mode default, atau agar layar dapat menyesuaikan dengan posisi device user (portrait dan landscape mode). Silahkan hilangkan atribut android:screenOrientation tersebut.

Aplikasi Efek Buku Berbasis Phonegap

in android, phonegap - on 02:23 - No comments

My Booklet

Dengan menggunakan library Booklet dari Jquery, pada tutorial kali ini kita akan membuat sebuah aplikasi Android berbasis Phonegap yang menampilkan halaman per halaman buku layaknya buku asli. Dimana dari halaman tersebut nantinya kita dapat memasukkan teks atau gambar.
Salah satu plugin Jquery yang akan saya aplikasikan kali ini adalah Jquery Booklet. Jquery Booklet dibuat oleh Will Grauvogel yang sekarang bekerja di Universitas Purdue. Plugin ini tidak berdiri sendiri, karena kita juga harus meng-include beberapa plugin lain untuk memberikan efek smooth pada manipulasi halaman buku. Berikut adalah beberapa library yang dipakai untuk pembuatan ini :

Jquery.min.js
Jquery.easing
dan Jquery.booklet itu sendiri.

Download Sources

Jquery mempunyai puluhan library yang dapat kita pergunakan untuk membuat manipulasi halaman buku. namun setelah saya coba beberapa dari library tersebut, saya lebih memilih Jquery Booklet karena kesederhanaan pengaplikasiannya. Selain itu, Jquery Booklet juga memungkinkan kita memberi efek-efek tertentu yang tentunya sudah disediakan dalam konfigurasi plugin ini.

Tutorial

Mula-mula, kita akan membuat project aplikasi efek buku ini Phonegap di Eclipse. Sebelumnya, Anda dapat mengikuti pembuatan project seperti di tutorial Aplikasi Konversi Jarak Mil yang sebelumnya sudah saya publish. Kita hanya merubah beberapa konfigurasi project aplikasi dengan menyesuaikan kebutuhan aplikasi booklet ini. Berikut adalah konfigurasi yang saya pakai :

Project Name : Booklet
Package Name : com.mkhuda.booklet
Phonegap Version : Phonegap versi 1.9.0
Built Target : Android 2.2 (SDK version 8)

Jangan lupa hapus juga atribut xLargeScreens untuk memastikan tidak terjadi error pada file Manifest kita.

Selanjutnya, kita akan memasukkan beberapa library yang dibutuhkan untuk pembuatan aplikasi buku ini. Untuk memangkas tutorial, silahkan download library di sini. Berikut adalah gambar pengaturan penempatan folder untuk library javascript dan CSS yang saya include dalam aplikasi ini :

folder library

Dari gambar terlihat, seluruh file CSS saya masukkan ke dalam folder Booklet dan file library Jquery saya masukkan ke folder JS.
Oh iya, dalam folder Booklet saya juga memodifikasi dan membuat file library css bernama jquery.booklet.480.css. File ini merupakan modifikasi dari library css asli booklet. Dimaksudkan agar tampilan halaman buku dapat menyesuaikan resolusi beberapa perangkat Android yang berlayar kecil (dibawah 480 px).

Langkah selanjutnya kita masukkan saja library tersebut dengan memanggilnya melalui <head> di dalam file index.html. Semua file library yang telah kita masukkan ke folder tadi, harus kita panggil. Berikut kode yang dapat pembaca tulis :

<!-- Javascript Library -->
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery-ui.min"></script>
<script type="text/javascript" src="js/jquery.booklet.1.4.0.js"></script>

<!-- CSS Library -->
<link href="booklet/jquery.booklet.1.4.0.css" rel="stylesheet" type="text/css" />
<link href="booklet/jquery.booklet.480.css" media="only screen and (max-width: 480px)" 
rel="stylesheet" type="text/css" />

rel="stylesheet" type="text/css" />

Pada line terakhir, kita memasukkan jquery.booklet.480.css dan menambahkan atribut media=”only screen and (max-width: 480px). Dengan ini, secara otomatis pengguna yang menggunakan perangkat beresolusi di bawah 480 px agar dapat menyesuaikan tampilan (bahasa kerennya Responsive).

Masih di dalam tag <head>, kita tulis juga kode konfigurasi untuk library Jquery Booklet agar dapat membaca tag id HTML yang nanti juga akan kita tulis. Berikut adalah konfigurasinya :

<script type="text/javascript">
$(function() {
   //membaca div #mybooklet
   $('#mybooklet').booklet({
        easing:  null,
        easeIn:  null,
 easeOut: null,
 next: '#next',
        prev: '#prev' 
   });
});
</script>

$(function() {

//membaca div #mybooklet

$('#mybooklet').booklet({

easing: null,

easeIn: null,

easeOut: null,

next: '#next',

prev: '#prev'

});

</script>

Untuk source code di dalam body, silahkan tulis source code berikut :

<center>
<div id="title">
<h3>
Mkhuda Booklet</h3>
</div>
</center>
<div id="mybooklet">
   <div>
    <center>
<h3>
Halaman Pertama</h3>
</center>
</div>
<div>
    <center>
<h3>
Halaman Kedua</h3>
</center>
</div>
<div>
    <center>
<h3>
Halaman Ketiga</h3>
</center>
</div>
</div>
<center>
 <a href="#" id="prev">Halaman Sebelumnya</a> []
 <a href="#" id="next">Halaman Selanjutnya</a>  
   </center>

<center><div id="title"><h3>Mkhuda Booklet</h3></div></center>

<div>

<center><h3>Halaman Pertama</h3></center>

</div>

<div>

<center><h3>Halaman Kedua</h3></center>

</div>

<div>

<center><h3>Halaman Ketiga</h3></center>

</div>

<a href="#" id="prev">Halaman Sebelumnya</a> []

<a href="#" id="next">Halaman Selanjutnya</a>

</center>

Pada kode di atas, jelas tertulis kita akan membuat buku yang mempunyai tiga halaman. Dan di bawahnya kita juga membuat navigasi untuk menuju ke halaman berikutnya atau kembali ke halaman sebelumnya. Cukup simpel.

HASIL

Download Sources

Sebelum melakukan compile project ke perangkat Android atau Simulator. Kita harus mengatur pengaturan mode layar aplikasi buku ini menjadi landspace untuk memastikan agar aplikasi berjalan secara landspace. Tambahkan saja atribut android:screenOrientation dengan value landscape di dalam tag <application> androidManifest.xml.

android:screenOrientation= "landscape"

1	android:screenOrientation= "landscape"

Silahkan lihat cara mengaturnya di tutorial pengaturan mode layar ini.

Di dalam source code, saya sudah menyertakan semua library baik jquery easing, booklet, hingga hasil file .APK aplikasi booklet tersebut. Selamat mencoba !

android:screenOrientation= “landscape” <!– mode hanya landscape –>

Aplikasi Android Phonegap Dengan Database SQLite

in android, phonegap - on 02:10 - 1 comment

Untuk membuat aplikasi Android berbasis HTML5 menggunakan Phonegap yang berisi konten-konten informasi, alangkah baiknya kita menggunakan engine database SQLite. Meskipun kita bisa menuliskan secara langsung data / teks / informasi secara inline, tapi akan lebih terstruktur jika menggunakan sebuah database.

Phonegap and Sqlite

Download Sources

Lihat Tutorial Android Lainnya disini

Berikut adalah beberapa keuntungannya :

Data lebih terstruktur
Kode lebih ringkas dibanding menulis informasi langsung ke dalam syntax HTML
Data bisa dipakai ulang
Informasi dapat diupdate dengan mudah

Tutorial kali ini, penulis akan membuat sebuah aplikasi sederhana yang memanfaatkan database SQLite. Aplikasi ini merupakan contoh pemanfaatan SQLite di Phonegap yang akan kita query informasi di dalamnya menggunakan Jquery Mobile. Kita tahu Jquery Mobile merupakan library yang dapat dimanfaatkan untuk memanipulasi tampilan aplikasi mobile berbasis web.
Berikut adalah beberapa library yang akan kita embed ke dalam aplikasi ini :

Jquery Mobile versi 1.3.1 (atau terbaru)
Cordova.js (Phonegap)

Dengan memanfaatkan MDS Applaud kita akan dapat membuat project dengan cukup ringkas dan mudah. Silahkan ikuti tutorial cara instalasi dan pemasangan MDS Applaud di Eclipse jika pembaca belum mengetahui cara instalasinya. Plugin ini sangat mempermudah kita membuat project berbasis Phonegap.
Berikut adalah informasi project aplikasi kita kali ini:

Nama Aplikasi : Phonegap with SQLite
Target / Build Target : Android 2.1 (minimal)
Package Name : com.mkhuda.phonegapsqlite (opsional/bisa dirubah)
Konfigurasi : Minimal Phonegap Project
Versi : Phonegap 1.9.0 (Rekomendasi MDS)

Setelah project berhasil dibuat, silahkan edit AndroidManifest.xml dengan menghapus sintaks xLargeScreen agar kesalahan pada kode hilang dan aplikasi dapat berjalan. Kemudian upload file library yang dibutuhkan kedalam folder assets/www/[folder_anda] yang bisa Anda buat, semisal saya membuat folder bernama JQM. Lihat gambar berikut :
Folder JQM

Pada gambar di atas, bisa Anda lihat saya telah menempatkan seluruh aset library Jquery Mobile yang terdiri dari file javascript dan css. Selain itu saya juga menaruh library Jquery 1.8.3 ke dalam folder tersebut untuk memudahkan dan menstrukturkan library yang ada.

Kemudian kita berlanjut ke koding utama pemrograman Sqlite dengan menaruhnya ke dalam file index.html. Setelah semua file library Anda include-kan ke dalam index.html, selanjutnya Anda bisa membuat script sebagai berikut :

<script
 type="text/javascript" charset="utf-8">
        function init() {
            document.addEventListener("deviceready", onDeviceReady, 
true);
        }  
    // fungsi untuk membuat databse baru bernama Database Sqlite
 function onDeviceReady() {
        var db = window.openDatabase("Database", "1.0", "Database 
Sqlite", 200000);
        db.transaction(populateDB, errorCB, successCB);
    }

    // Membuat tabel ke dalam database yang berisi id dan data
    function populateDB(tx) {
        tx.executeSql('DROP TABLE IF EXISTS SQLITE');
        tx.executeSql('CREATE TABLE IF NOT EXISTS SQLITE (id unique, 
data)');
        tx.executeSql('INSERT INTO SQLITE (id, data) VALUES (1, "Halaman
 Pertama")');
        tx.executeSql('INSERT INTO SQLITE (id, data) VALUES (2, "Halaman
 Kedua")');
    }

    // Callback jika terjadi kesalahan pada database
    function errorCB(err) {
        alert("Error processing SQL: "+err);
    }

    // Callback atau fungsi untuk membuka database yang tadi telah kita 
buat
    function successCB() {
        $(document).ready(function()  {
   db = window.openDatabase("Database", "1.0", "Database Sqlite", 
200000);
   db.transaction(queryDB, errorCB);
   function queryDB(trans) {
    console.log("QUery DB");
         trans.executeSql('SELECT * FROM SQLITE', [], querySuccess);
      }

    // Melakukan query data ke dalam html yang telah kita manipulasi 
dengan Jquery Mobile
    function querySuccess(trans, results) {
     console.log("Results DB");
        var len = results.rows.length;
        var s = '';
        for (var i=0; i<len; i++){
            $("#list").append("
<li><a 
href='#"+results.rows.item(i).id+"' data-transition='none' 
><h3>
"+results.rows.item(i).id+"</h3>
<p>
"+results.rows.item(i).data+"</p>
</a></li>
");

            $("body").append("<div data-role='page' 
id='"+results.rows.item(i).id+"'>
<div data-role='header' 
data-position='fixed' data-theme='b'>
<h1>
Page</h1>
<a 
data-icon='arrow-l' data-corners='false' href='#example-list' 
data-transition='none'>Kembali</a></div>
<center>
<a
 href='#' data-corners='false' 
data-role='button'>Share</a></center>
</div>
");
        }
         $("#list").listview();
    }
 });
    }
</script>

function init() {

document.addEventListener("deviceready", onDeviceReady, true);

}

// fungsi untuk membuat databse baru bernama Database Sqlite

function onDeviceReady() {

var db = window.openDatabase("Database", "1.0", "Database Sqlite", 200000);

db.transaction(populateDB, errorCB, successCB);

}

// Membuat tabel ke dalam database yang berisi id dan data

function populateDB(tx) {

tx.executeSql('DROP TABLE IF EXISTS SQLITE');

tx.executeSql('CREATE TABLE IF NOT EXISTS SQLITE (id unique, data)');

tx.executeSql('INSERT INTO SQLITE (id, data) VALUES (1, "Halaman Pertama")');

tx.executeSql('INSERT INTO SQLITE (id, data) VALUES (2, "Halaman Kedua")');

}

// Callback jika terjadi kesalahan pada database

function errorCB(err) {

alert("Error processing SQL: "+err);

}

// Callback atau fungsi untuk membuka database yang tadi telah kita buat

function successCB() {

$(document).ready(function() {

db = window.openDatabase("Database", "1.0", "Database Sqlite", 200000);

db.transaction(queryDB, errorCB);

function queryDB(trans) {

console.log("QUery DB");

trans.executeSql('SELECT * FROM SQLITE', [], querySuccess);

}

// Melakukan query data ke dalam html yang telah kita manipulasi dengan Jquery Mobile

function querySuccess(trans, results) {

console.log("Results DB");

var len = results.rows.length;

var s = '';

for (var i=0; i<len; i++){

$("#list").append("<li><a href='#"+results.rows.item(i).id+"' data-transition='none' ><h3>"+results.rows.item(i).id+"</h3><p>"+results.rows.item(i).data+"</p></a></li>");

$("body").append("<div data-role='page' id='"+results.rows.item(i).id+"'><div data-role='header' data-position='fixed' data-theme='b'><h1>Page</h1><a data-icon='arrow-l' data-corners='false' href='#example-list' data-transition='none'>Kembali</a></div><center><a href='#' data-corners='false' data-role='button'>Share</a></center></div>");

}

$("#list").listview();

}

});

}

</script>

Pada kode di atas, saya membuat 5 fungsi utama yang terangkum dalam fungsi init(), dimana fungsi-fungsi tersebuat adalah :

onDeviceReady(); membuat database baru
populateDB(); memasukkan tabel data ke dalam database yang telah dibuat
errorCB(); notifikasi jika terjadi error pada eksekusi database
successCB(); Melakukan select database jika eksekusi database berhasil
querySuccess(); melakukan query database ke dalam bentuk list jquery mobile

Oke, fungsi script utama untuk melakukan query database sqlite telah kita buat. Selanjutnya kita akan membuat script html di dalam tag <body></body> dimana class dan definisinya merunut kepada dokumentasi Jquery Mobile. Silahkan ketik kode ini di dalam tag <body></body> :

<body
 onload="init();" id="stage" class="theme">
<div id="example-list" data-role="page" data-theme="b" 
data-content-theme="a">
  <div data-role="header" id="headerku" data-theme="a">
    <h3>
Phonegap SQLite</h3>
</div>
<div id="kontenku">
 
    <ul id="list" data-inset="false" data-filter="true" 
data-theme="d" data-divider-theme="d" data-icon="false" 
data-filter-placeholder="Cari data" data-global-nav="demos" 
class="jqm-list"></ul>
</div>
</div>
</body>

<h3>Phonegap SQLite</h3>

</div>

</div>

</body>

Silahkan dicoba dijalankan ke android simulator atau device. Semoga berhasil. Saya juga telah menyertakan source code tutorial ini yang dapat Anda gunakan dan implementasikan untuk belajar maupun proyek sebenarnya.

Download Sources

Lihat Tutorial Android Lainnya disini

Terima kasih, selamat mencoba !

apank

20 Perintah Sederhana Melalui Fungsi Run

Aplikasi RSS Berbasis Phonegap Menggunakan zRSSFeed

Aplikasi Kuis Berbasis Android Menggunakan JQuizMe

Pengaturan Mode Layar Aplikasi Android Melalui Manifest

Aplikasi Efek Buku Berbasis Phonegap

Tutorial

Aplikasi Android Phonegap Dengan Database SQLite

Popular Posts

Page Rank

Archives