Corat coret program

Menjalankan Flash dengan jQuery

Pernahkah kalian menemui sebuah website yang didalamnya terdapat animasi flash? Jika jawabannya belum pernah, kalian bisa lihat contohnya di web yang ini atau juga web yang ini. Tapi sekarang website dengan flash sudah mulai banyak ditinggalkan. Alasannya karena telah muncul jQuery. JQuery ini dirasa lebih ringan untuk ditempelkan pada sebuah website dan tentunya mempunyai kemampuan menciptakan tampilan yang tidak kalah menariknya dengan flash.

Nah, pada postingan kali ini kita akan belajar menggabungkan keduanya menjadi satu, kita akan menampilkan animasi flash pada sebuah halaman website dengan menggunakan jQuery.

JQuery ini selain mampu memanipulasi tampilan, ternyata juga bisa digunakan untuk menambahkan atau menampilkan flash (embed) pada sebuah halaman website HTML.

Pada tutorial ini kita hanya membutuhkan 3 buah file, yaitu: file jquery.tools.min.js, file animasi flash, dan sebuah file HTML. Untuk yang belum mempunyai file jQuery nya, kalian dapat mendownloadnya disini. Sedangkan untuk isi file HTML-nya adalah sebagai berikut:

<html>
<head>
<script type="text/javascript" src="jquery.tools.min.js"></script>
<script>
flashembed("game", "deflection.swf");
</script>
<style>
#game {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="game"></div>
</body>
</html>

Dapat dilihat pada kode diatas, terdapat 3 hal yang perlu diperhatikan, yaitu:

Pemanggillan library jQuery.
<script type="text/javascript" src="jquery.tools.min.js"></script>
Penambahan obyek elemen berupa class / id pada bagian tag BODY untuk tempat animasi flash yang ingin ditampilkan. Dalam script diatas saya menggunakan id bernama "game".
<div id="game"></div>
Penambahan script jQuery pada bagian HEAD nya. Disini terdapat prosedur flashembed() yang mana di dalamnya terdapat 2 buah parameter. Parameter yang pertama yaitu selektor tempat flash akan ditampilkan. Sedangkan parameter yang kedua adalah posisi URL tempat file flash berada.
<script>
flashembed("game", "deflection.swf");
</script>

Bagaimana, sangat simpel sekali khan?

Ganti Image Background Secara Otomatis

Beberapa waktu yang lalu saya menemukan sebuah tutorial di blognya Srinivas Tamada tentang cara mengganti image background secara otomatis. Tutorialnya sangat simpel dan tidak membutuhkan coding yang panjang. Hanya dengan beberapa baris kode javascript saja, setiap kali refresh maka background web kita akan terganti secara otomatis.

Pertama, yang perlu disiapkan adalah images yang akan digunakan sebagai background. Kemudian masukkan images tersebut ke dalam folder bgimages. Urutkan nama images tersebut mulai dari angka 1. Contoh: 1.jpg, 2.jpg, 3.jpg, dst.

Buatlah sebuah file html yang isinya sebagai berikut.

<html>
<head>
<script type="text/javascript">
var totalCount = 6;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'bgimages/'+num+'.jpg';
document.body.style.backgroundRepeat = "repeat";
}
</script>
</head>
<body>
<!-- Isi body -->
</body>
<script type="text/javascript">
ChangeIt();
</script>
</html>

Coba kalian perhatikan pada baris kode javascript-nya, disitu terdapat fungsi random yang digunakan untuk mengacak angka-angka. Itulah sebabnya nama images harus berupa angka supaya dapat diacak menggunakan fungsi random itu tadi.

<script type="text/javascript">
var totalCount = 6;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'bgimages/'+num+'.jpg';
document.body.style.backgroundRepeat = "repeat";
}
</script>

Bener khan sangat simpel tutorialnya? Sekarang giliran kalian untuk mencobanya.

Membuat Grafik 3D dengan jQuery

Jika teman-teman mempunyai kesulitan untuk membuat sebuah grafik dengan menggunakan PHP, kalian dapat mencoba cara lain dengan menggunakan jQuery. Salah satu plugin jQuery yang dapat membantu kita untuk membuat sebuah grafik yaitu Plugin Fusion Chart. Dengan plugin tersebut kita hanya perlu membuat sebuah tabel yang berisi data-data yang akan dibuat grafiknya, kemudian Fusion Chart akan langsung meng-generate tabel tersebut menjadi sebuah grafik.

Cara penggunaan Plugin Fusion Chart dapat dilihat pada script berikut.

<html>
<head>
<!-- Memanggil file jQuery dan jQuery fusionCharts -->
<script type="text/javascript" src="JS/jquery-1.4.js"></script>
<script type="text/javascript" src="JS/jquery.fusioncharts.js"></script>
</head>
<body>
<!-- Tabel dengan id "myHTMLTable"-->
<table id="myHTMLTable" border="1" align="center">
<tr> <th>Status</th> <th>Januari</th>  <th>Februari</th> <th>Maret</th> </tr>
<tr> <td>Masuk</td> <td>40</td> <td>39</td> <td>40</td> </tr>
<tr> <td>ijin</td> <td>3</td> <td>1</td> <td>2</td> </tr>
<tr> <td>Alpha</td> <td>1</td> <td>2</td> <td>3</td> </tr>
<tr> <td>Sakit</td> <td>3</td> <td>5</td> <td>4</td> </tr>
<tr> <td>Cuti</td> <td>3</td> <td>3</td> <td>1</td> </tr>
</table>
<!-- Script jQuery untuk meng-generate tabel menjadi grafik-->
<script type="text/javascript">
$('#myHTMLTable').convertToFusionCharts({
swfPath: "Charts/",
type: "MSColumn3D",
data: "#myHTMLTable",
dataFormat: "HTMLTable",
});
</script>
</center>
</body>
</html>

Perhatikan pada kode script jQuery-nya.

$('#myHTMLTable').convertToFusionCharts({
swfPath: "Charts/",
type: "MSColumn3D",
data: "#myHTMLTable",
dataFormat: "HTMLTable",
});

Di situ terdapat 4 buah parameter, yaitu:

swfPath, merupakan lokasi URL file swf diletakkan.
type, merupakan jenis grafik yang digunakan. Di contoh ini kita menggunakan grafik kolom 3D.
data, merupakan id tabel yang akan di-generate menjadi grafik.
dataFormat, merupakan jenis data yang digunakan. Di contoh ini karena kita menggunakan data dari tabel, maka dataFormat-nya berupa HTMLTable.

Gimana teman menurut kalian? Kalau ada yang kurang jelas silakan kunjungi situsnya di http://www.fusioncharts.com/jquery/. Di situ juga menyediakan dokumentasi yang cukup lengkap lho tentang Plugin Fusion Chart.

Semoga bermanfaat.

Corat coret program

adv

Kamis, 24 Mei 2012

Menjalankan Flash dengan jQuery

Ganti Image Background Secara Otomatis

Membuat Grafik 3D dengan jQuery