Membuat Buku Catatan Online dengan Jquery

Dengan bantuan code Jquery kita akan membuat catatan online dengan tampilan layaknya sebuah buku, agar nantinya bisa kita akses dan bagikan ke teman kita, atau untuk keperluan yang lain.

Kelebihan dari buku kita kali ini adalah ukurannya yang responsive, jadi bukan hanya dengan laptop atau PC saja, tapi kita juga bisa membukanya dengan HP, ataupun Tablet, asalkan terdapat koneksi Internet ^_^

Membuat Buku Catatan Online dengan Jquery

Contoh catatan ane kali ini adalah kumpulan cerita Abu Nawas yang ane dapat dari berbagai sumber, silahkan lihat demonya disini :

Demo Flip Book - Abu Nawas

Ane simpan semua code jquery itu kedalam googledrive, untuk mempercepat loading, jadi sekarang kita hanya membutuhkan code HTML sebagai penampakan buku dan artikelnya, berikut code yang akan kita pakai sebagai front end ( tampilan depan ).

Langkah 1 :: Buat Code HTML

Silahkan buka Notepad dan masukkan code berikut, kemudian simpan dengan nama minibook.html


<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TITLE BUKU</title>
    <link rel="https://2.bp.blogspot.com/-z0S3Ow7f5A0/UnmKZGThJDI/AAAAAAAAASA/DdhTHLVf_j4/s25-c/icon-webjalanan.png" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0BwxBVI9xP07VT3ZYaU5HckhZTXM" />      
</head>
<body>
<div id="container" class="container">
<!-- MENU BUKU -->
<div class="menu-panel">
    <h3>JUDUL BUKU</h3>
    <ul id="menu-toc" class="menu-toc"> 
<li class="menu-toc-current"><a href="#page1">Judul Artikel-1</a></li>
    <li><a href="#page2">Judul Artikel-1</a></li>
    <li><a href="#page3">Judul Artikel-1</a></li>
    <li><a href="#page4">Judul Artikel-1</a></li>
    <li><a href="#page5">Judul Artikel-1</a></li>

    </ul>
    <div id="flipbook"></div>
</div>
  
<div class="bb-custom-wrapper">
<div id="bb-bookblock" class="bb-bookblock">

    <!-- ARTIKEL 1 -->
    <div class="bb-item" id="page1">
    <div class="content">
    <div class="scroller">
    <h2>Judul Artikel 1 </h2>
    <p>Deskripsi dan Isi Artikel 1</p>

    </div>
    </div>
    </div>

    <!-- ARTIKEL 2 -->
    <div class="bb-item" id="page2">
    <div class="content">
    <div class="scroller">
    <h2>Judul Artikel 2 </h2>
    <p>Deskripsi dan Isi Artikel 2</p>

    </div>
    </div>
    </div>

    <!-- ARTIKEL 3 -->
    <div class="bb-item" id="page3">
    <div class="content">
    <div class="scroller">
    <h2>Judul Artikel 3 </h2>
    <p>Deskripsi dan Isi Artikel 3</p>

    </div>
    </div>
    </div>

    <!-- ARTIKEL 4 -->
    <div class="bb-item" id="page4">
    <div class="content">
    <div class="scroller">
    <h2>Judul Artikel 4 </h2>
    <p>Deskripsi dan Isi Artikel 4</p>

    </div>
    </div>
    </div>

    <!-- ARTIKEL 5 -->
    <div class="bb-item" id="page5">
    <div class="content">
    <div class="scroller">
    <h2>Judul Artikel 5 </h2>
    <p>Deskripsi dan Isi Artikel 5</p>

    </div>
    </div>
    </div>

<nav>
<span id="bb-nav-prev">&larr;</span>
<span id="bb-nav-next">&rarr;</span>
</nav>
<span id="tblcontents" class="menu-button">Daftar Isi</span>
</div>
</div>
</div>

<!-- JQUERY SCRIPT -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwxBVI9xP07VUkdiLWlaZkVVM1E"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwxBVI9xP07VMEp2ZlJJUmF3VVU"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwxBVI9xP07VQW96TU1GWXcwM1E"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwxBVI9xP07Vb25Wazd1RG9relE"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwxBVI9xP07VOC16RDMtN2s0QWM"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwxBVI9xP07Vb21kc2lTaFJNYkE"></script>
<script>$(function() { Page.init();});</script>
</body>
</html>


Rubah Judul dan Isi Artikel sesuai dengan buku yang agan inginkan, pelajari dulu konsep penataan codenya bila agan ingin menambahkan lebih dari 5 Artikel  ( dalam contoh code, ane hanya memberi 5 artikel ).

Langkah 2 :: Upload ke Google Drive

Pastikan terlebih dahulu file minibook.htm agan sudah benar, dengan membukanya menggunakan Browser Firefox, Chrome atau yang lain. Bila file sudah benar silahkan buka https://drive.google.com
Pilih New ==> File Upload


Langkah 3 :: Share File minibook.html

Ada dua cara untuk share minibook yang telah kita buat.
  1. Melalui link share yang muncul setelah selesai upload
  2. Melalui icon share yang ada pada menu Google Drive

Pada pop up sahre Pilih link Advanced yang berada pada pojok kanan Bawah,
kemudian pilih sahring On - Public on the web , agar semua orang bisa melihat buku agan.



Langkah 4 :: Short URL + QR Code ( Optional )

Setelah langkah dua selesai, kita akan mendapatkan link share yang terlihat seperti ini :
https://drive.google.com/open?id=0BwxBVI9xP07VdC1LTV9TNWlWcG8
https://drive.google.com/file/d/0BwxBVI9xP07VdC1LTV9TNWlWcG8/view?usp=sharing
Code yag ane bold warna merah merupakan id file kita di google drive, untuk melihat tampilan buku yang barusan kita buat, silahkan buka dengan alamat URL berikut :
https://googledrive.com/host/IdGoogleDrive
Contoh jadinya seperti ini :
https://googledrive.com/host/0BwxBVI9xP07VdC1LTV9TNWlWcG8
Sampai sini, Buku karya agan sudah bisa dibuka secara Online, akan tetapi akan sangat susah untuk mengingat link yang panjang tersebut, untungnya google sudah mempersiapkan ShortURL untuk kita, dengan tambahan Fitur QR Code untuk Android.

Caranya Short URL dan membuat QR  code cukup mudah :
  1. Silahkan masuk ke https://goo.gl
  2. Masukkan Link yang panjang diatas kemudian Klik Shorten URL
.


Untuk QR Code, tinggl kita tambahkan saja .qr pada bagian belakang URL Shortner tersebut.
Contoh :
URL Shortner ==> https://goo.gl/KzS3Wb
Ambil QR Code ==> https://goo.gl/KzS3Wb.qr

Dan hasilnya akan muncul gambar QR Code seperti ini :









Sekarang kita bisa membagikan link Shortner kita untuk dijadikan buku catatan online, atau kalau agan mempunyai Android, tinggal scan saja gambar  QR Code.


OK Selamat berkreasi gan ^_^







Related Artikel Membuat Buku Catatan Online dengan Jquery

2 comments:

  1. Anonymous7/20/2015

    Terima kasih gan, info yang bermanfaat untuk membuat contekan..hehehee

    ReplyDelete
    Replies
    1. waduhh....emang boleh ya gan,
      bawa HP waktu ujian ^_^

      bisa aja ente gan,
      kalau gitu selamat menyontek gan

      Delete