The Google trick “Let it Snow” – Replication

Sudahkah teman2 mencoba mengetikan keywords “Let it snow” tanpa petik di google? Trick google kali ini adalah yang paling mengagumkan (menurut saya). ¬†Seketika juga saat anda tekan enter, hujan salju akan turun lalu diiringi oleh “membekunya” jendela browser anda. Ketika pembekuan sampai pada tahap akhir, anda bisa menuliskan sesuatu di jendela anda yang telah “membeku” itu. Dan untuk menghilangkan efeknya, cukup menekan tombol “Defrost”. Ehmm keren! Seketika saya mengetahui trick google ini, sayapun ingin membuat tiruannya.

Adakah dari teman2 yang sudah mengunjungi Christmas Card Website (2011) ? Website ini pertama kali di publikasikan desember tahun 2010. Dengan fitur awal adalah hujan salju, back sounds, ubah warna dan bentuk salju serta dapat memberikan komentar. Nah, diwebsite inilah tiruan the Google “Let it snow” dibuat. Ya memang jauh dari sempurna dibanding aslinya, wajar sajalah replikasi fitur “Let it snow” ini dibuat hanya kurang dari 12 jam.. @@ Replikasi inipun dapat ditulisi sesuatu saat mencapai pembekuan dan juga dapat di “Defrost”. Ehmm.. lumayan buat mempercantik tampilan website¬†Christmas Card Website (2011). ūüôā mari berkunjung dan rasakan kemiripannya. hha salam blogger.. eSDhee

Advertisements

jQuery Talk : jQuery Time Tree, a plugin to create tree of time

Pernahkan anda membuat aplikasi Business Intelligent berbasis web? Jika pernah, adakah kesulitan ketika anda ingin membuat sebuah drilldown dan roolup untuk time tree? (Time tree biasanya digunakan untuk menyajikan dimensi waktu sebagai navigasi saat report ditampilkan.)

Time Tree Example

Time Tree Example

Permasalahan diatas dapat dipecahkan dengan menggunakan plugin ini, jqTimeTree. jqTimeTree menyediakan navigasi waktu yang dapat digunakan saat menampilkan report. Dalam pre-release ini, jQTimeTree hanya menyediakan dimensi waktu dalam tahun, bulan dan minggu dalam tahun. Setiap node dalam time tree secara default akan menampilkan alert box berupa waktu yang sedang diklik. Fungsi default ini tentunya dapat dikostumasi dengan fungsi lain. e.g. anda ingin mengirimkan informasi waktu ini ke server dan mengambil report yang bersangkutan untuk ditampilkan kembali ke antarmuka user secara asinkron. Maka anda dapat menggunakan fungsi ajax yang sudah disediakan diframework jQuery.

Tentunya sebuah plugin harus mendukung sebuah kostumasi dan jqTimeTree pun sudah dapat dikostumasi. Sebagai contoh, laporan/report yang akan anda tampilkan berada dalam kurun waktu 2005-1-20 sampai dengan 2011-6-6, maka anda dapat dengan mudah mengatur kurun waktu tersebut pada saat jqTimeTree dibangun/built. Konfigurasi tersebut secara default akan seperti ini.

$(document).ready( function() {
jQuery('#jQueryTimeTree').jqTimeTree({
script: 'php_classes/jq.controller.php', //the default of php controller file
expandSpeed: 200, //the time of expanding tree in milliseconds
collapseSpeed: 200, //the time of collapsing tree in milliseconds
startDate: '2005-1-20 00:00:00', //this is would be the start of the time tree
endDate: '2011-6-6 00:00:00', //this is would be the end of the time tree
multiTree: true //make sure for startDate and endDate statement should be formatted like YYYY-MM-DD HH:MM:SS
}, function(time) {
//take an action to the clicked time in this function
//by the default, the clicked time will be shown on the alert box
alert(time);
//for further use, you can send this time to take a report from database or data warehause
//you can use ajax function to make an asynchronous http request });
});

jQTimeTree saat ini masih dalam pengembangan, diharapkan project ini dapat membantu teman-teman yang sedang mengembangkan aplikasi business intelligent berbasis web. Untuk demo, teman-teman dapat melihatnya diwebsite berikut, http://esdhee-art.eu5.org/jQueryTimeTree/. Untuk mengunduh plugin ini silahkan kunjungi GitHub. Plugin yang anda unduh sudah termasuk demo beserta penjelasan singkat. Seperti potongan code diatas.

Anda bisa mendukung saya untuk tetap melakukan update tutorial dengan cara mem-follow blog saya, atau mem-follow twitter saya disini, bisa juga dengan meninggalkan komentar dan atau me-request tutorial yang anda inginkan. Best regards, eSDhee

AJAX Talk: Simple XML HTTP Request Object Implementation

Ini adalah kesempatan saya yang pertama untuk memberikan sedikit pengenalan kepada anda tentang AJAX(Asynchronous JavaScript and XML). AJAX bukanlah sebuah teknologi, melainkan sebuah teknik yang mendeskripsikan bagaimana JavaScript dapat digunakan untuk mengambil data dari server dengan menggunakan XML HTTP Request Object dan kemudian data tersebut dimasukan kedalam website dengan menggunakan DOM(Document Object Model). Semua ini bekerja secara asinkron(Asynchronous) dan dapat diselesaikan tanpa me-refresh page. AJAX merupakan teknik yang tepat untuk membuat suatu website yang dimanis.

Banyak implementasi dari AJAX ini. Namun kali ini saya akan mulai memperkenalkan AJAX dari Simple XML HTTP Request Object. Sudahkah anda siap untuk menyambut AJAX? Klo sudah mari kita mulai..

1. Starter

Tutorial ini saya buat mengharuskan anda untuk membuat webserver local. Jika anda belum menginstalnya silahkan instal terlebih dahulu. Saya anjurkan anda menggunakan XAMPP. Silahkan lihat tutorialnya disini XAMPP Talk: How to instal XAMPP. Jika sudah menginstal, buatlah folder tutorialajax pada c:\xampp\htdocs. Buatlah juga beberapa file berikut:

  1. index.html digunakan sebagai homepage. Dimana kita akan membuat halaman ini sebagai halaman utama.
  2. requestme.php file ini akan kita gunakan sebagai target file yang akan kita load secara asynchronous ke halaman utama.
  3. jquery.js ini adalah jQuery library yang kita gunakan untuk memberikan sedikit animasi pada website.

2.  Download jQuery Library

Jika anda belum mempunyai jQuery Library, silahkan download disini. Copy semua scriptnya dan paste pada file jquery.js. Jangan lupa untuk menyimpan file tersebut.

3. HTML Coding time

Continue reading

jQuery Talk: Menu Highlighter

Kali ini saya akan mencoba untuk memberikan pencerahan tentang teknik memperindah tampilan halaman web dengan jQuery. jQuery kali ini saya namakan dengan Menu Highlighter. Dimana menu yang akan kita buat ini akan memberikan highlight bukan hanya sekedar title default dari browser anda, tapi title dengan sedikit animasi. (Lihat screen shot-nya dibawah ini) Ok, mari kita langsung saja ke tutorialnya.

1. Starter

Buatlah folder dengan nama tutorial-highlight dan buatlah 5 file dengan nama masing-masing:

  1. index.html digunakan untuk pengkodean html
  2. style.css digunakan untuk memberikan style pada html yang kita buat
  3. js-style.js digunakan untuk menampung code javascript.
  4. hover.png dapat di download disamping ini
  5. jquery.js ini adalah jQuery library yang kita gunakan untuk memberikan sedikit animasi pada website.

2.  Download jQuery Library

Jika anda belum mempunyai jQuery Library, silahkan download disini. Copy semua scriptnya dan paste pada file jquery.js. Jangan lupa untuk menyimpan file tersebut.

3. HTML coding time

Continue reading

jQuery Talk: eSDhee-Slider v1.0, Plugin for Image Slider

Jika dalam artikel sebelumnya yang berjudul jQuery Talk: Image Slider, image slider yang dibuat tidak menggunakan plugin sehingga sedikit sulit dipahami oleh user. Maka dalam tutorial kali ini saya mencoba membuat plugin image slider sederhana tanpa ada image berukuran besarnya, disini hanya menampilkan thumbnail dari slider.

Untuk mendownload plugin ini, silahkan klik disini.

Untuk melihat pengimplementasian plugin ini, silahkan klik disini.

Dalam penggunaan plugin ini, user tidak harus memahami seluruh code yang ada didalamnya. User hanya perlu sedikit menambahkan deskripsi dari image slider yang ingin dibuat. contohnya code pada baris-baris ini :
Continue reading

jQuery Talk: Form Validation(with Validation Plug-in)

Biasanya kita membuat script sendiri untuk memvalidasi sebuah email atau form yang lain, namun sekarang kita tak perlu berpusing-pusing untuk memikirkan String Verification semuanya itu telah di provide oleh sebuah Plugin jQuery. Plugin jQuery ini dinamakan jQuery validation plug-in dengan nomer versi yang akan saya bahas adalah v1.2.1de.

Download jQuery validation plug-in v1.2.1de.

Memvalidasi E-mail atau tipe inputan lain seperti text, option, password dll dngan menggunakan jQuery Plugin ternyata tidak sesulit yang saya bayangkan. Ini sangatlah mudah. Yang perlu kita ketahui dalam penggunaan Plugin ini adalah:

1. Deklarasikan alamat Plugin

Deklarasikan alamat Plugin dan alamat library jquery di bagian Head HTML seperti ini:

<script src=”js/jquery.easing.1.3.js” type=”text/javascript”></script>

<script type=”text/javascript” src=”js/jquery.js”></script>

2. Tambahkan CSS code

Continue reading

jQuery Talk: Image Slider

Kali ini saya akan membahas bagaimana caranya membuat Slide (pergantian galeri foto) pada website kita. Image Slider yang saya akan bahas menggunakan efek fadeout dan fadein yang sudah ada pada jQuery library dan juga menggunakan fungsi pemberi delay yang juga ada pada jQuery library. Untuk lebih jelasnya, mari kita bahas potongan- potongan source code body html yang diperlukan berikut ini.

<body>
<img id=”imageSlider” src=”foto/baby4.jpg” />
</body>

Untuk permulaan marilah pertama2 buat html-nya. HTML yang diperlukan hanya seperti quote yang diatas. Memang awal pembuatan Image Slider terlihat hanya seperti memberikan atau memasang foto dalam html, namun dari objek ini dapat kita mainkan dengan jQuery effects. Untuk mempercantik ukuran dan tampilan Image Slider, tambahkan css berikut.

Continue reading