konglie.web.id

Slideshow (sangat) Sederhana

konglie — Sat, 18 Feb 2012 07:31:32 +0000

Banyak sekali plugin jQuery untuk membuat slideshow dengan animasi yang terbilang “wah”. Tetapi adakalanya, misalnya saya sendiri kemarin, membutuhkan animasi untuk slideshow yang ringan, dan (sangat) sederhana. Tentu saja, plugin yang “wah” untuk jQuery yang bertebaran di internet tersebut juga menyediakan opsi untuk hanya menggunakan animasi yang sederhana, tapi dalam kasus yang saya alami, saya harus membuat animasi tersebut dengan script yang sependek-pendeknya.

Berikut yang saya lakukan, untuk HTML, sederhana saja, hanya buat sebuah div sebagai container untuk gambar-gambar yang akan dijadikan sebagai slideshow. Slideshow nantinya hanya berupa animasi fading-out (gambar memudar) dan bergantian untuk setiap gambarnya, dengan durasi tampil sekian detik.

<html>
<head>
	<title>Animasi sangat sederhanatitle>
	<style type='text/css'>
	#slideshow img
	{
		position: absolute;
		left: 0;
		top: 0;
	}
	style>
 
	
	<script type='text/javascript'
		src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'>
	script>
 
	
	<script type='text/javascript'>
 
	// Fungsi yang menjadi inti dari script animasi ini
	function simpleSlideshow(slideContainer, duration)
	{
		// gambar/foto yang akan dianimasikan
		// adalah child (anak) pertama dari container yang digunakan
		var currentSlide = $('img:nth-child(1)', slideContainer);
 
		// slide tersebut akan dimodifikasi sedemikian rupa
		$(currentSlide)
		.css({
			opacity: 0 // buat opacity-nya menjadi 0, sehingga tidak terlihat (transparan)
		})
		// appendTo akan membuat anak pertama menjadi anak terakhir,
		// sehingga akan berada dibagian paling depan.
		// namun meskipun berada dipaling depan,
		// tidak akan terlihat karena sudah transparan (step sebelumnya)
		.appendTo(slideContainer)
 
		// animasikan tingkat opacity menjadi 1 (FULL),
		// sehingga pelan-pelan akan terlihat
		.animate({
			opacity: 1
		}, 'normal', function(){
			setTimeout(function(){
				// fungsi akan dijalankan kembali
				// setelah sekian detik sesuai dengan duration
				// sehingga menampilkan efek animasi berulang-ulang
				simpleSlideshow(slideContainer, duration);
			}, duration);
		})
	}
 
	// implementasi
	// jalankan fungsi animasi ketika document sudah di-load (ready)
	$(function(){
		var duration = 3000; // millsecond		
		var slideContainer = $('#slideshow');
		simpleSlideshow(slideContainer, duration);
	});
	script>
head>
<body>
<div id='slideshow'>
	<img src='image1.jpg'>
	<img src='image2.jpg'>
	<img src='image3.jpg'>
	<img src='image4.jpg'>
div>
body>
html>

Untuk melihat demo-nya, silakan klik disini.

Konsep dari animasi ini sangat sederhana, seperti yang tertulis sebagai comment pada script-nya. Kita hanya memainkan tingkat opacity dari masing-masing anak (dalam hal ini, adalah tag ). Dengan properti CSS, position absolute, left 0, dan top 0, akan membuat gambar-gambar tersebut menumpuk satu sama lainnya pada posisi yang sama pula. Dengan catatan, gambar-gambar yang digunakan harus memiliki panjang dan lebar yang sama, agar tidak ada yang terlihat terpotong oleh gambar lainnya.

Dengan posisi yang saling menumpuk tersebut, gambar yang berada diurutan paling belakang (anak pertama, belakang disini dilihat dari sudut pandang sumbu Z, 3 Dimensi) tidak akan terlihat, karena tertutup oleh gambar yang diurutan paling depan. Animasi terjadi karena jquery memainkan tingkat opacity dari 0 (transparan) menjadi 1 (Fully Opaque). Dan, setiap kali fungsi dijalankan, anak pertama akan menjadi anak terakhir, anak kedua menjadi pertama, ketika menjadi kedua, dan seterusnya, dan fungsi diulang-ulang dengan setTimeout(), sehingga terbentuklah animasi slideshow yang (sangat) sederhana.

Demikian, semoga post ini dapat berguna bagi kita semua.

Just for some testing

konglie — Tue, 14 Feb 2012 09:10:04 +0000

Post ini hanya untuk testing comment via Facebook. Komentar wordpress terlalu banyak spam, dan kurang “social”.

Parse File Aiken (moodle)

konglie — Fri, 03 Feb 2012 16:54:09 +0000

Script berikut berguna untuk melakukan parsing terhadap file (plain text) dengan format aiken yang digunakan oleh moodle. Diharapkan script ini dapat menangani kondisi dimana terdapat kata “ANSWER: ” pada soal ataupun salah satu pilihan jawabannya. Script ini dibuat tanpa bermaksud menyinggung siapapun, hanya ingin berbagi saja.

Contoh file aiken,

What is the correct answer to this question?
A. Is it this one?
B. Maybe this answer?
C. Possibly this one?
D. Must be this one!
ANSWER: D
 
Which ANSWER: LMS has the most quiz import formats?
A) Moodle
B) ATutor
C) Claroline
D) Blackboard ANSWER:
E) WebCT
F) ANSWER: Ilias
ANSWER: A

Script parser file aiken yang digunakan adalah


/*
SOURCE: http://docs.moodle.org/22/en/Aiken_format
 
a. The question must be all on one line.
b. Each answer must start with a single uppercase letter,
c. followed by a period '.' or a bracket ')', then a space.
d. The answer line must immediately follow, starting with "ANSWER: " (NOTE the space after the colon)
and then giving the appropriate letter.
 
NOTE: script dibawah mengabaikan syarat b
*/
function parseAikenFormat($file)
{
        $result = array();
 
        if(!is_readable($file))
                return FALSE;
 
        $lines = file($file);
        if(!is_array($lines))
                return FALSE;
 
        $start = true;
        $question = array();
        foreach($lines as $line)
        {
                $line = trim($line);
                if($line == "") continue;
 
                if($start)
                {
                        $question = array(
                                'question' => $line, // syarat a
                                'options' => array()
                        );
                        $start = false;
                }
                else if(preg_match("/^ANSWER:\s{1}/", $line))
                {
                         //syarat d, starting with "ANSWER: "
                        $answer = trim(preg_replace("/^ANSWER:\s{1}/", '', $line));
                        $question['answer'] = $answer;
                        $result[] = $question;
                        $start = true;
                }
                else
                {
                        $options = explode(' ', $line, 2);
                        list($opt, $optText) = $options;
                        // syarat c '.' atau ')'
                        $opt = trim(preg_replace("/\.|\)/", '', $opt)); 
                        $question['options'][$opt] = trim($optText);
                }
        }
 
        return $result;
}
 
$aikenFile = "aiken-example.txt";
$parsed = parseAikenFormat($aikenFile);
 
print_r($parsed);

Script ini hanya bertujuan untuk “membaca file aiken” dan menjadikannya format array php, hasil dari parsing tersebut harus diproses lebih lanjut, misalnya, ditampilkan, disimpan dalam database, atau lainnya. Demikian, semoga script ini dapat berguna.

Loop, mari berulang-ulang

konglie — Thu, 12 Jan 2012 10:23:43 +0000

Hari ini ada tugas membuat laporan statistik untuk akses website client per bulan Januari. Berhubung tools-nya baru sempat di-setup sekarang. Sebenarnya sudah siap sejak kemarin, sekarang hanya perlu meng-update statistik tersebut dari log file yang lama, dari tanggal 1 sampai dengan 9 januari 2012.

Post blog ini sebenarnya tidak ada tutorial apapun, hanya ingin menulis saja. Ada salah satu client yang menggunakan clustering servers, dengan beberapa server yang bersama-sama menjadi web server untuk beberapa website. 4 server tepatnya. Dan ada 8 site/user yang harus diupdate statistiknya (hanya untuk client kantor yang ini), data yang harus diupdate 9 hari.

Loop dibawah menyelesaikan 9 x 8 x 4 proses. Well, bukan hal yang susah, statistik menggunakan awstats, dan log file ditransfer dengan scp. Script dibawah sudah siap mem-parsing file-file archive dari log yang lama

#!/bin/bash
for i in {1..9}; do
        for j in `ls | grep site`; do
                cd $j/logs/;
 
                for k in ws1 ws2 ws3 ws4; do
                        F="${k}_2012010$i.bz2";
                        echo $i $k $F;
                        cp tmp/$F ./
                        tar -xjf $F;
                        for l in `ls *-201201$i.daylog`; do
                                NF=`echo $l | /bin/sed "s/.daylog/-${k}.daylog/g"`;
                                mv $l $NF;
                        done;
                done;
                /home/user/bin/theawstatscript $j;
 
                cd /home/user;
        done;
done;

Hanya ingin menulis saja.

SCD, raw translation

konglie — Thu, 05 Jan 2012 16:52:10 +0000

Tugas DATA WAREHOUSE

Membuat Deretan Abjad dengan loop

konglie — Tue, 15 Nov 2011 15:26:32 +0000

Dalam pemrograman, loop atau perulangan tentunya menjadi sesuatu yang boleh dikatakan pasti akan ditemui setiap kali seorang programmer melakukan coding. Bagaimana tidak, tentunya programmer tidak ingin mengetik berulang-ulang setiap pernyataan yang sekiranya bisa diulang, bisa dikarenakan efisiensi, atau bisa juga dikarena memang harus di-ulang, misalnya, menampilkan isi dari sebuah table dari database hingga benar-benar habis.

Misalnya saja, cetak output sebagai berikut ini

ini adalah angka 1
ini adalah angka 2
ini adalah angka 3
.
.
.
ini adalah angka 1000

Rasanya jika harus mengetik 1000 kali, akan sangat merepotkan dan tidak efisien. Hal tersebut dapat dengan mudah dilakukan, misalnya dalam syntax PHP


for($i = 1; $i <= 1000; $i++) echo "ini adalah angka $i
";
?>

Selesai urusannya, jangankan 1000, 100000000000 kali pun tidak menjadi masalah, hehehe, asalkan processornya kuat saja.

Itu jika angka, mudah saja perulangan dengan incremental, bagaimana dengan huruf/abjad? Misalnya, buat output:

ini huruf a
ini huruf b
.
.
.
ini huruf z

Gak banyak, cuma 26 baris saja. Tapi tetap saja, jari-jari bisa keriting buang-buang tenaga hanya untuk mengetikkan code tersebut. Dan juga bagaimana jika harus membuat urutan, bukan dengan angka, tetapi huruf/abjad. Misalnya, tadi sudah sampai h, maka sekarang harus i. Bagaimana caranya? Buat array dulu, kemudian diakses satu persatu? bisa saja, tapi boros.

Pada dasarnya, huruf atau abjad dalam komputer memiliki representasi angka yang digunakan untuk mengenali huruf tersebut, bukan hanya huruf, segala macam simbol karakter juga. Umumnya, dan hampir semua komputer, menggunakan pengkodean ASCII. Huruf A sampai dengan Z, memiliki karakter ASCII yang berurutan, dan hal itulah yang akan kita manfaatkan.

Berikut contoh dalam syntax javascript (dengan alert)

var s = 'a';
while(s != 'z')
{
    alert("ini huruf " + s);
    s = String.fromCharCode(s.charCodeAt(0) + 1);
}
alert("ini huruf " + s);

Atau dalam PHP


$s = 'a';
while($s != 'z')
{
        echo "ini huruf $s \n";
        $s = chr(ord($s) + 1);
}
echo "ini huruf $s 
";
?>

Tentu saja contoh diatas hanya memperlihatkan metode dan konsep yang digunakan, bukan merupakan coding yang bebas bug dan sempurna. Dan jika diperhatikan, code dari 2 bahasa pemrograman di atas sebenarnya sama saja kok, beda nama saja.

Semoga bermanfaat.

PHP: jumlah hari antara 2 tanggal

konglie — Sat, 12 Nov 2011 03:24:39 +0000

Ada sebuah kasus dimana terdapat kebutuhan untuk menghitung jumlah hari di antara 2 tanggal. Dengan menggunakan PHP, hal ini bukanlah sesuatu yang sulit atau perlu dibesar-besarkan, banyak sekali fungsi-fungsi atau pendekatan yang bisa dilakukan dalam PHP untuk melakukan perhitungan ini.

Berikut adalah salah satu dari banyak cara yang bisa dilakukan, sekali lagi, untuk menghitung jumlah hari di antara 2 tanggal, menggunakan PHP


$date1 = "2010/01/12";
$date2 = "2011/07/31";
 
function daysBetween($s, $e)
{
        $s = strtotime($s);
        $e = strtotime($e);
 
        return ($e - $s)/ (24 *3600);
}
 
echo daysBetween($date1, $date2);
echo "\n";
?>

Script diatas, terutama pada deklarasi fungsi daysBetween($s, $e), sebenarnya menitikberatkan konversi dari format tanggal dalam text, misalnya 2011-12-31 menjadi bentuk UNIX Timestamp, dengan fungsi strtotime(), kemudian, selisih dari 2 timestamp ini, dibagi dengan jumlah detik dalam 1 hari, maka didapatkanlah jumlah hari di antara 2 tanggal tersebut.

Semoga bermanfaat.

MDI Windows dengan Java

konglie — Fri, 11 Nov 2011 14:59:48 +0000

Pada post sebelumnya, saya memperlihatkan video demo untuk membuat aplikasi Windows dengan vb.NET. Aplikasi tersebut dengan konsep MDI (Multiple Document Interface) Windows, dimana terdapat satu windows utama (parent) yang kemudian menampung windows lainnya (child).

Kali ini, konsep pembuatan aplikasi GUI Windows tersebut saya bawakan dalam bahasa pemrograman Java. Dengan Netbeans 7, library default (menggunakan library Swing), hal tersebut dapat dengan mudah dilakukan.

Pada source code yang saya lampirkan, saya telah membuat wrapper untuk itu. Secara singkatnya, untuk dapat menggunakan konsep MDI, dengan source yang saya lampirkan, cukup dengan membuat JPanel Form, isi dan desain form tersebut sesuai kebutuhan dan keinginan anda, kemudian, pada windows utama (main.java), tambahkan menu item yang sesuai, dan pada action untuk menu tersebut, panggil loadChild(new namaFormAnda());

Source code ini dapat anda download dan gunakan untuk keperluan non-komersil anda. Source ini juga saya berikan, berkat dukungan dari Mr. ******** (beliau bilang, sssttt……..diem-diem aja). Source code ini saya berikan tanpa ada jaminan, garansi, ataupun dukungan apapun. Apabila anda membutuhkan hal tersebut, dapat menghubungi saya di lee@konglie.web.id

Berikut adalah video demo yang menggunakan klFrame ini.

DOWNLOAD Source Code yang digunakan

Resize VirtualBox Disk, dd Kloning

konglie — Thu, 01 Sep 2011 17:56:17 +0000

Kemaren, Linux OpenSuse yang digunakan untuk development memberikan warning akan habisnya space pada harddisk-nya. Maklumlah, harddisk yang digunakan hanya berukuran 8 GB saja.

Lho, zaman sekarang memangnya masih ada harddisk berukuran 8GB ?? Well, linux ini berjalan pada VirtualBox, sehingga memang sengaja tidak diberikan harddisk yang terlalu besar, (awalnya berpikir) cukup 8GB saja. Namun ternyata, kapasitas tersebut tidaklah mencukupi.

Lalu apa solusinya?? VirtualBox tidak menyediakan fitur untuk merubah ukuran harddisk virtual nya. Namun, menyediakan fasilitas untuk “membuat” harddisk baru dan diberikan kepada sistem operasi yang berjalan di environment virtual-nya. Apakah ini menjadi solusi?? Sebenarnya bisa saja, dengan membuat harddisk baru, dan diberikan kepada OS tersebut, namun hal ini bukanlah solusi, karena jika harddisk tersebut hendak digunakan sebagai mount point untuk sistem, maka tentunya penambahan kapasitas karena penambahan harddisk tidak akan efisien.

Karena itu, akhirnya saya mengambil solusi untuk membuat harddisk baru yang lebih besar, dalam hal ini 15GB. Dalam lingkungan sebenarnya, dapat dianalogikan bahwa kita membeli harddisk baru sebesar 15GB untuk menggantikan harddisk lama yang hanya berukuran 8GB. Lalu apa langkah selanjutnya??

Secara konsep, langkah-langkah yang harus dilakukan adalah, membuat harddisk baru itu sama persis dengan harddisk lama. Baik itu file atau foldernya, dan juga, struktur filesistem-nya, termasuk komposisi partisi didalamnya, hingga ke dalam Master Boot Record (MBR) yang ada pada harddisk yang lama. Hal ini dapat juga disebut sebagai membuat kloning harddisk.

Namun, yang harus diperhatikan adalah, bahwa kloning ini akan menyebabkan harddisk baru memiliki komposisi partisi yang sama dengan harddisk sebelumnya, yang berarti ukuran kapasitas maksimal yang akan dimiliki adalah 8GB, padahal harddisk baru berukuran 15GB. Untuk itu, setelah semuanya selesai, harus dilakukan langkah untuk me-resize partisi.

Berikut langkah-langkah yang dapat dilakukan.

Untuk kloning harddisk, pastikan kedua harddisk tersebut tidak digunakan, atau istilahnya, jangan di-mount pada OS. Untuk melakukan ini, bisa dengan meletakkan kedua harddisk tersebut pada komputer yang boot dari harddisk ke-tiga (tersendiri), boot dari live-CD linux, atau dengan boot pada mode Rescue System dari CD/DVD installer linux.

Setelah yakin bahwa harddisk yang akan dikloning maupun harddisk tujuan kloning tidak digunakan, kita siap meng-kloningnya. Untuk kloning, menggunakan perintah dari command line, dd.

Secara umum, sintax nya adalah

dd if=/sumber/harddisk of=/harddisk/tujuan

PERHATIAN: jika opsi if dan of dibalik, maka dapat menyebabkan hilangnya data secara permanen pada harddisk anda.

Pada kasus saya, harddisk lama adalah di /dev/sda sedangkan harddisk baru adalah /dev/sdb. Dengan menggunakan perintah dd if=/dev/sda of=/dev/sdb, tinggal menunggu hingga harddisk selesai dikloning.

Setelah selesai, artinya harddisk baru siap digunakan. Namun hal belum tentu OS dapat boot dari harddisk tersebut, meskipun isi nya sudah 100% sama. Hal ini dikarenakan, harddisk tersebut bisa saja memiliki id yang berbeda. Untuk melihat id dari harddisk bisa dengan perintah

ls /dev/disk/by-id

Untuk itu, perlu diedit bootloader pada OS yang bersangkutan. Untuk linux OpenSuse 11.3, bisa dengan cara mengedit file /boot/grub/menu.lst dan ganti pada parameter kernel.

Setelah berhasil boot, sekarang jalankan partitioner dari Yast (OpenSuse 11.3), dan resize partisi hingga pada ukuran yang diinginkan. Resize ini tergantung dari komposisi partisi anda, bisa saja, partisi yang dapat di-resize bukanlah partisi yang anda inginkan.

Dengan demikian, selesai, OS Linux sudah dengan harddisk baru yang berukuran lebih besar. Dibawah adalah screenshot komposisi harddisk sebelum dan setelah langkah-langkah diatas dilakukan.

Copy file diatas 2GB ke flashdisk

konglie — Sat, 30 Jul 2011 08:41:17 +0000

Barusan seorang teman ngomel-ngomel gak jelas, di depan komputernya. Bukan teman sih, cuma sekedar lihat manusianya saja, heheh…..Jadi begini ceritanya, tadi pas di bengkel, ada yang buka laptop, mungkin mau copy data dari (tapi tampaknya “ke”) flashdisk.

Tiba-tiba dia bilang, “Lho kok gak bisa?”, temannya bilang, “flashdisk nya penuh kali”, dia bilang, “mungkin, errornya sih kurang lebih gitu, filesize exceed apaaaa gitu….”. Kemudian mereka terdiam, tiba-tiba, “apaan, free-nya masih ada 5GB lebih, kan filenya cuma 3GB”. Oke stop ceritanya sampai disini.

Masalah seperti ini sebenarnya tidak mengherankan. Pada keadaan default, umumnya flashdisk yang beredar di pasaran sudah diformat menggunakan File System FAT (File Allocation Table), entah FAT16 ataupu FAT32. Filesystem ini, tidak mendukung file dengan ukuran diatas 2GB karena keterbatasan strukturisasi penyimpanannya, hal ini menyebabkan meskipun ruang penyimpanan yang ada melebihi 2GB, tetap saja, tidak akan dapat menampung sebuah file yang berukuran lebih dari itu.

Untuk itu, jika anda membutuhkan flashdisk yang dapat menyimpan file besar (diatas 2GB), beli baru! Bukan, format ulang saja flashdisk anda, tentu saja dengan catatan, freespace tersedia untuk ukuran file yang diinginkan. Format ulang dengan filesystem NTFS (agar lebih umum), atau kalau anda Linux-Fanatic, silakan menggunakan Filesytem EXT3 atau EXT4.

Tapi hati-hati, format berarti menghapus seluruh data yang sudah ada, dan Format yang disebutkan diatas bukanlah format yang generik, melainkan format yang spesific masing-masing System Operasi. NTFS adalah milik Windows (meskipun Linux bisa mengenalinya), dan EXT adalah milik Linux.

Dan juga, biasanya format selain FAT tidak akan dapat dikenali pada media-player portable. Contoh sederhana, sebuah DVD-Player untuk konsumsi rumah, tidak akan dapat membaca flashdisk berformat NTFS.