Aplikasi Efek Buku Berbasis Phonegap

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 Efek Buku Berbasis Phonegap

Tutorial

Post a Comment

Popular Posts

Page Rank

Archives