Aptech Jakarta
Kategori
  • Android
  • Aplikasi
  • Gadget
  • Game
  • Teknologi
  • Website
  • Windows

Wedding Organizer Surabaya | Wedding Organizer Gresik | Wedding Organizer Malang | Wedding Organizer Madura | Wedding Organizer Mojokerto | Wedding Organizer Jakarta | Wedding Organizer Bogor | Wedding Organizer Depok | Wedding Organizer Tangerang | Wedding Organizer Bekasi

Catering Surabaya | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi | Catering Jakarta Murah | Catering Bogor Murah | Catering Depok Murah | Catering Tangerang Murah | Catering Bekasi Murah

Supplier Sayur | Supplier Buah | Hosting Gratis
Catering Surabaya
 | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Catering Surabaya | Catering Malang | Catering Gresik | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

ApTech Jakarta
  • Beranda
  • Catering Jakarta
  • Catering Bogor
  • Catering Depok
  • Catering Tangerang
  • Catering Bekasi
  • Aplikasi
  • Teknologi

Aplikasi Efek Buku Berbasis Phonegap

  • Mei 25, 2013
  • admin
0

SHARES

ShareTweet

My Booklet

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.

Contents

  • 1 Tutorial
    • 1.1 Baca juga:

Tutorial

1Mula-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.

2Selanjutnya, 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 aplikasi buku

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).

3Langkah 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" />

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).

4Masih 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>

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>

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.

aplikasi efek buku phonegap

HASIL

Download Sources

5Sebelum 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"

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 –>

Baca juga:

  1. Pengaturan Mode Layar Aplikasi Android Melalui Manifest
  2. Aplikasi Android Phonegap Dengan Database SQLite
  3. Aplikasi Kuis Berbasis Android Menggunakan JQuizMe
  4. Tips Mempercepat Performa Aplikasi Phonegap
  5. Aplikasi RSS Berbasis Phonegap Menggunakan zRSSFeed
 
admin

Previous Article
  • Android
  • Aplikasi
  • Teknologi

Pengaturan Mode Layar Aplikasi Android Melalui Manifest

  • Mei 24, 2013
  • admin
View Post
Next Article
  • Teknologi

Format Tanda Pemisah Angka Dengan Javascript

  • Mei 26, 2013
  • admin
View Post

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Pos-pos Terbaru
  • 8 HP Untuk Main Call of Duty Mobile Terbaik 2023
  • Game Esports Terbaik
  • Rekomendasi 10 Game Browser Terbaik
  • Aplikasi Pengunci Aplikasi Android Terbaik
  • 6 Smartwatch Terbaik 1 Jutaan Tahun 2022, Super Canggih!
Arsip
Kategori
  • Android
  • Aplikasi
  • Gadget
  • Game
  • Teknologi
  • Website
  • Windows
Wedding Organizer

Wedding Organizer Surabaya | Wedding Organizer Gresik | Wedding Organizer Malang | Wedding Organizer Madura | Wedding Organizer Mojokerto | Wedding Organizer Jakarta | Wedding Organizer Bogor | Wedding Organizer Depok | Wedding Organizer Tangerang | Wedding Organizer Bekasi

Partner

Catering Surabaya | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi | Catering Jakarta Murah | Catering Bogor Murah | Catering Depok Murah | Catering Tangerang Murah | Catering Bekasi Murah

External Link

Supplier Sayur | Supplier Buah | Hosting Gratis
Catering Surabaya
 | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Catering Surabaya | Catering Malang | Catering Gresik | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Blog Teknologi Jakarta
Berita dan artikel teknologi dan Informasi Jakarta

Input your search keywords and press Enter.