konglie.web.id

Cegah double Post dengan Http Post/Redirect/Get

konglie — Tue, 14 May 2013 15:10:12 +0000

Ketika membuat aplikasi berbasis Web, pasti pernah (jika bukan sering) berurusan dengan form html. Dimana form merupakan sarana interaksi user dengan aplikasi atau halaman Web yang dikunjunginya tersebut. Form yang memuat data penting dan sensitif biasanya akan menggunakan metode POST dalam pengiriman datanya. Cara kerjanya sederhana, user mengisi data di form yang ada kemudian submit form tersebut, halaman web yang menerima form tersebut kemudian memproses data yang dikirimkan, kemudian tampilkan pesan atau hasil dari pemrosesan data tersebut, selesai.

Masalah yang muncul adalah ketika user melakukan refresh atau reload, misalnya dengan menekan tombol F5 di browser, maka form yang tadinya disubmit akan disubmit ulang, meskipun memang biasanya browser akan meminta konfirmasi terlebih dahulu. Seperti yang ditampilkan pada gambar di bawah ini.

Apakah ada masalah dengan hal tersebut ? Mari kita bahas. Misalkan kita membuat website e-commerce, atau toko online, user mengisi form order barang, kemudian disubmit, dan kemudian disubmit lagi. Tentunya di aplikasi kita akan mencatat ada 2 buah transaksi yang sama persis, yang belum tentu si user memang benar ingin melakukan 2 buah order tersebut. Apakah ini fatal? Bisa iya bisa tidak. Bukan masalah, jika emang kita melakukan konfirmasi ke pembeli, namun bisa fatal jika website kita adalah website yang menganggap bahwa transaksi online adalah hal yang valid dan absolut. Dengan demikian website kita akan mencatat ada 2 order, padahal user hanya bermaksud order 1 kali.

Bagaimana mengatasi hal ini ? Sebelumnya, perlu diingat bahwa form HTML dikirimkan menggunakan protokol HTTP, dengan demikian tentunya, response yang diharapkan oleh browser adalah dalam format protokol HTTP pula.

Kunci dari penanganan masalah double POST submit ini adalah meminta browser menuju ke halaman lain setelah form selesai diproses.

Mari kita lihat contoh kasusnya.

File php yang menampilkan pesan atau hasil setelah form diproses. Katakanlah namanya prg-hasil.php.


	
		Http Post Redirect Get
		
	
	
		Form sudah disubmit
 
		
			if(isset($_POST['submit']))
			{
				// proses form kiriman
				// misalnya, simpan ke database atau yang lain
				// .....
 
				echo "Form disubmit kesini menggunakan POST, apabila di refresh, maka form akan dikirim ulang
";
			}
		?>

Berikut adalah file berisi formulir html.


	
		Http Post Redirect Get
		
	
	
			Form Testing Post Redirect Get
			
				Input 1 

				Input 2

Perhatikan baris

, yang menandakan bahwa form ini akan dikirimkan ke file prg-hasil.php. Tidak ada yang salah dengan ini, namun coba jalankan dan kemudian setelah muncul pesan submit, maka form akan disubmit ulang, setelah browser melakukan konfirmasi tentunya.

Solusinya adalah, kita akan melakukan submit form ke file yang berbeda dengan file yang akan menampilkan hasilnya. Contoh dibawah ini, kita akan mengirimkan form ke dirinya sendiri, kemudian setelah form diproses, baru akan menuju ke file prg-hasil.php untuk menampilkan pesan/hasil pemrosesan form.


	
		Http Post Redirect Get
		
	
	
		 if(!isset($_POST['submit'])){ ?>
 
			Form Testing Post Redirect Get
			
				Input 1 

				Input 2 

				
 
				
			
 
		 } else { 
 
			// proses form kiriman
			// misalnya, simpan ke database atau yang lain
			// .....
 
			// setelah selesai tampilkan pesan
			// disinilah kunci dari tutorial ini, 
			// menggunakan header 302 Found, 
			// dilanjutkan dengan header Location
			// hal ini berarti meminta browser untuk menuju ke halaman yang dituju
			// namun, request ini akan dilakukan dengan menggunakan HTTP GET
			// hal ini bertujuan untuk mencegah POST berulang ulang, apabila
			// user melakukan refresh atau reload pada browser nya
			header('HTTP/1.1 302 Found');
			header('Location: prg-hasil.php');
 
		} ?>

Silakan jalankan dan setelah menampilkan pesan hasil form, lakukan refresh. Form tidak akan dikirim ulang. Hal ini dikarenakan terutama pada 2 baris

header('HTTP/1.1 302 Found');
header('Location: prg-hasil.php');

yang mana mengirimkan Header HTTP dengan response code 302, yang berarti bahwa halaman ini ada namun bukan disini, namun ada di file prg-hasil.php. Dengan demikian, browser akan menuju halaman yang diberikan disini, namun tanpa membawa form yang tadi disubmit. Teknik ini dikenal dengan nama Post/Redirect/Get.

Dengan demikian, bisa mengatasi masalah double submit POST. Sekedar tambahan, komunikasi antara file yang satu dan lainnya bisa menggunakan session, cookie, atau media lainnya, termasuk database.

Berikut adalah ilustrasi yang melukiskan masalah dan solusi dari double POST ini. Gambar diambil dari Wikipedia.

Demikian, semoga tulisan ini berguna untuk kita semua.

MySQL Transaction Query

konglie — Thu, 09 May 2013 08:57:39 +0000

Dalam SQL terkadang kita membutuhkan untuk menjalankan lebih dari 1 query untuk mendapatkan hasil tertentu. Dimana beberapa query ini adalah menjadi 1 kebutuhan. Contohnya, dalam proses transfer saldo dari rekening A ke rekening B. Proses transfer ini melibatkan paling tidak 2 buah query, yaitu query pertama mengurangi jumlah saldo A dan query kedua menambahkan saldo rekening B.

Hal seperti ini disebut sebagai atomic transaction, atomic berarti bagian terkecil yang sudah tidak dapat dipisahkan lagi. 2 buah query yang dibutuhkan untuk proses pemindahan saldo itu harus berjalan secara menyeluruh, bayangkan ketika proses pemotongan saldo A berhasil, namun penambahan saldo B gagal, pasti si A marah besar, hehehe….

Secara gampangnya, saldo A harus terpotong apabila saldo B berhasil ditambahkan, atau query pertama akan disimpan apabila query kedua (dan seterusnya) berhasil. Jika tidak, maka perubahan yang terjadi harus dibatalkan. Perubahan disini bukan berarti menambahkan kembali ke rekening A, melainkan membatalkan perubahan yang ada.

Query untuk menjalankan hal ini disebut sebagai TRANSACTION. Hasil dari Transaction ini akan disimpan bila seluruh query yang terlibat berhasil dijalankan. di MySQL, Transaction harus dimulai dengan query BEGIN, kemudian diakhiri dengan COMMIT apabila ingin menyimpan perubahan, dan ROLLBACK apabila ingin membatalkan perubahan yang terjadi setelah BEGIN tadi.

Contoh penerapan dalam MySQL (dan juga database SQL standard lainnya) adalah berikut

mysql> DESC customer;
+-------+-------------+------+-----+---------+----------------+
| FIELD | TYPE        | NULL | KEY | DEFAULT | Extra          |
+-------+-------------+------+-----+---------+----------------+
| id    | INT(11)     | NO   | PRI | NULL    | AUTO_INCREMENT |
| name  | VARCHAR(40) | YES  |     | NULL    |                |
| saldo | INT(11)     | YES  |     | NULL    |                |
+-------+-------------+------+-----+---------+----------------+
3 ROWS IN SET (0.00 sec)
 
mysql> SELECT * FROM customer;
+----+------------+-------+
| id | name       | saldo |
+----+------------+-------+
|  1 | John Doe   |   100 |
|  2 | Will Smith |   100 |
+----+------------+-------+
2 ROWS IN SET (0.00 sec)
 
mysql> BEGIN;
Query OK, 0 ROWS affected (0.01 sec)
 
mysql> UPDATE customer SET saldo = saldo - 20 WHERE id = 1;
Query OK, 1 ROW affected (0.00 sec)
ROWS matched: 1  Changed: 1  Warnings: 0
 
mysql> SELECT * FROM customer;
+----+------------+-------+
| id | name       | saldo |
+----+------------+-------+
|  1 | John Doe   |    80 |
|  2 | Will Smith |   100 |
+----+------------+-------+
2 ROWS IN SET (0.00 sec)
 
mysql> ROLLBACK;
Query OK, 0 ROWS affected (0.10 sec)
 
mysql> SELECT * FROM customer;
+----+------------+-------+
| id | name       | saldo |
+----+------------+-------+
|  1 | John Doe   |   100 |
|  2 | Will Smith |   100 |
+----+------------+-------+
2 ROWS IN SET (0.00 sec)

Contoh query diatas memberikan gambaran ketika saldo customer 1 diubah, namun kemudian dilakukan perintah ROLLBACK. Data yang ada akan dikembalikan sama seperti keadaan sebelum BEGIN.

Berikut contoh penerapan COMMIT.

mysql> SELECT * FROM customer;
+----+------------+-------+
| id | name       | saldo |
+----+------------+-------+
|  1 | John Doe   |   100 |
|  2 | Will Smith |   100 |
+----+------------+-------+
2 ROWS IN SET (0.01 sec)
 
mysql> BEGIN;
Query OK, 0 ROWS affected (0.00 sec)
 
mysql> UPDATE customer SET saldo = saldo - 30 WHERE id = 1;
Query OK, 1 ROW affected (0.00 sec)
ROWS matched: 1  Changed: 1  Warnings: 0
 
mysql> SELECT * FROM customer;
+----+------------+-------+
| id | name       | saldo |
+----+------------+-------+
|  1 | John Doe   |    70 |
|  2 | Will Smith |   100 |
+----+------------+-------+
2 ROWS IN SET (0.00 sec)
 
mysql> COMMIT;
Query OK, 0 ROWS affected (0.05 sec)
 
mysql> SELECT * FROM customer;
+----+------------+-------+
| id | name       | saldo |
+----+------------+-------+
|  1 | John Doe   |    70 |
|  2 | Will Smith |   100 |
+----+------------+-------+
2 ROWS IN SET (0.00 sec)
 
mysql> BEGIN;
Query OK, 0 ROWS affected (0.00 sec)
 
mysql> UPDATE customer SET saldo = saldo - 20;
Query OK, 2 ROWS affected (0.01 sec)
ROWS matched: 2  Changed: 2  Warnings: 0
 
mysql> SELECT * FROM customer;
+----+------------+-------+
| id | name       | saldo |
+----+------------+-------+
|  1 | John Doe   |    50 |
|  2 | Will Smith |    80 |
+----+------------+-------+
2 ROWS IN SET (0.00 sec)
 
mysql> ROLLBACK;
Query OK, 0 ROWS affected (0.18 sec)
 
mysql> SELECT * FROM customer;
+----+------------+-------+
| id | name       | saldo |
+----+------------+-------+
|  1 | John Doe   |    70 |
|  2 | Will Smith |   100 |
+----+------------+-------+
2 ROWS IN SET (0.00 sec)

Pada tampilan diatas,apa yang terjadi adalah
1. Saldo awal adalah 100
2. BEGIN, kita mulai SQL Transaction
3. Kita kurangi saldo customer dengan 1 sebanyak 30
4. Saldo customer 1 adalah 70
5. COMMIT, simpan perubahan secara permanen
6. Saldo customer 1 adalah 70, setelah commit secara permanen
7. BEGIN, kita mulai SQL Transaction kedua
8. Kurangi kembali saldo customer 1 sebanyak 20
9. Lihat bahwa saldo customer 1 adalah 50, yang mana adalah benar 70 – 20 = 50;
10. kita lakukan ROLLBACK, batalkan seluruh perubahan setelah BEGIN
11. Saldo customer 1 kembali menjadi 70.

Demikian tulisan sederhana ini, semoga bermanfaat bagi kita semua.

Membangun Android Web Application dengan WebView

konglie — Mon, 06 May 2013 04:49:25 +0000

Sudah lama tidak post di blog ini. Karena kemarin memang sedang sibuk skripsi dan juga tuntutan pekerjaan yang tidak ada habisnya.
Kangen juga ngetik di blog ini. Kebetulan kemarin sempat diundang sebagai pembicara di salah satu komunitas pemrograman kampus, membahas mengenai DroidMyAdmin, yang juga adalah materi skripsi saya.

Any way, post kali ini bukan untuk membahas hal itu, namun saya ingin memberikan sedikit screencasting mengenai membuat Web Application di Android dengan mudah, hanya dengan sebuah webview saja. Silakan disimak.

Semoga bermanfaat untuk kita semua.

(My)SQL Query untuk mengambil row sebagai kolom

konglie — Tue, 18 Dec 2012 04:19:51 +0000

Jadi ceritanya ada sahabat membutuhkan penampilan laporan untuk aplikasi yang sedang dia buat dengan menampilkan jumlah item sesuai dengan jenis item akan tetapi dihitung per user per item tersebut. Item disini hanya ada 2 saja, jadinya memudahkan penyusunan kata-kata indah SQL nya. Langsung saja ke TKP.

Struktur table (saya buat mirip dengan table asli di aplikasi tersebut).

mysql>desc my_table;
+-------+---------+------+-----+---------+-------+
| FIELD | TYPE    | NULL | KEY | DEFAULT | Extra |
+-------+---------+------+-----+---------+-------+
| id    | INT(11) | YES  |     | NULL    |       |
| item  | INT(11) | YES  |     | NULL    |       |
+-------+---------+------+-----+---------+-------+

data yang ada adalah sebagai berikut

mysql> SELECT * FROM my_table;
+------+------+
| id   | item |
+------+------+
|    1 |  100 |
|    1 |  100 |
|    1 |  100 |
|    1 |  100 |
|    1 |  100 |
|    1 |  500 |
|    1 |  500 |
|    1 |  500 |
|    1 |  500 |
|    2 |  100 |
|    2 |  100 |
|    2 |  100 |
|    2 |  100 |
|    2 |  100 |
|    2 |  100 |
|    2 |  500 |
|    2 |  500 |
|    2 |  500 |
|    2 |  500 |
|    2 |  500 |
|    2 |  500 |
|    2 |  100 |
+------+------+
22 ROWS IN SET (0.00 sec)

Data yang diinginkan adalah

+------+-----------------+-----------------+
| id   | jumlah_item_100 | jumlah_item_500 |
+------+-----------------+-----------------+
|    1 |               5 |               4 |
|    2 |               7 |               6 |
+------+-----------------+-----------------+

Mari kita kerjakan.

Pertama kita butuh menghitung jumlah item untuk masing-masing item dan masing-masing user (id).

SELECT
        id,
        item,
        COUNT(item) AS n
FROM my_table
GROUP BY 1,2

Hasilnya

+------+------+---+
| id   | item | n |
+------+------+---+
|    1 |  100 | 5 |
|    1 |  500 | 4 |
|    2 |  100 | 7 |
|    2 |  500 | 6 |
+------+------+---+

Disini kita sudah bisa melihat jumlah user dan jumlah item yang ada (diindikasikan oleh n). Kita perlu menyederhanakannya lebih lanjut. Agar field id ditampilkan secara unique (atau DISTINCT), hanya saja kita tidak dapat menggunakan query distinct karena kita butuh semua id yang tersedia. Caranya adalah dengan memisahkan kedua item menjadi field atau column.

SELECT
        id,
        CASE item
                WHEN 100 THEN n
                ELSE 0
        END AS item100,
        CASE item
                WHEN 500 THEN n
                ELSE 0
        END AS item500
FROM (
        SELECT
                id,
                item,
                COUNT(item) AS n
        FROM
                my_table
        GROUP BY 1,2
        ) AS p

Hasilnya,

+------+---------+---------+
| id   | item100 | item500 |
+------+---------+---------+
|    1 |       5 |       0 |
|    1 |       0 |       4 |
|    2 |       7 |       0 |
|    2 |       0 |       6 |
+------+---------+---------+

Sudah semakin terlihat jelas bukan? Langkah terakhir adalah menghilangkan baris yang tidak perlu, yaitu baris dimana item yang berisi 0 tidak perlu ditampilkan. Algoritma yang digunakan salah satunya adalah sebagai berikut

Ambil semua baris, jumlah semua item per id. Pada hasil diatas, misalnya kita ambil id 1, maka jumlah untuk item100 adalah 5 + 0 = 5, dan jumlah untuk item500 adalah 0 + 4 = 4, dengan demikian penjumlah total tidak akan mengubah nilai, dikarenakan pada satu baris hanya satu field item saja yang memiliki nilai, dan lainnya adalah 0. Untuk penjumlahan, SQL query (MySQL atau semua database server pada umumnya) memiliki fungsi SUM()

Jadi, querynya adalah

SELECT
        id,
        SUM(item100) AS jumlah_item_100,
        SUM(item500) AS jumlah_item_500
FROM
(
        SELECT
                id,
                CASE item
                        WHEN 100 THEN n
                        ELSE 0
                END AS item100,
                CASE item
                        WHEN 500 THEN n
                        ELSE 0
                END AS item500
        FROM (
                SELECT
                        id,
                        item,
                        COUNT(item) AS n
                FROM
                        my_table
                GROUP BY 1,2
                ) AS p
) AS y
GROUP BY id;

Hasil akhirnya adalah

+------+-----------------+-----------------+
| id   | jumlah_item_100 | jumlah_item_500 |
+------+-----------------+-----------------+
|    1 |               5 |               4 |
|    2 |               7 |               6 |
+------+-----------------+-----------------+

Semoga postingan blog ini dapat memberi manfaat untuk kita semua.

SMS Gratis di Android via Internet

konglie — Tue, 01 May 2012 14:04:47 +0000

Kemaren lihat di salah satu forum yang saya ikuti, ada yang post mengenai website SMS Gateway yang dia buat. Lumayan juga bisa kirim SMS gratis dari web. Bahkan si pembuat juga menyediakan halaman khusus apabila diakses via mobile (handphone), yang mana akan menampilkan versi yang (lebih) sederhana dibandingkan apabila dibuka via komputer/desktop.

Saya sendiri setelah mengetahui adanya layanan tersebut, lumayan sering memanfaatkan servis yang diberikan untuk mengirimkan SMS secara gratis (tentunya, hehehe…) Lumayan, tinggal buka dari opera mini, dengan internet yang sudah langganan unlimited, atau bahkan Wifi kantor yang bener-bener free, bisa menghemat beberapa ratus rupiah untuk mengirim SMS ke nomer-nomer yang gak terlalu wajib menggunakan nomer handphone saya sendiri.

Nah, masalahnya setelah penggunaan beberapa kali, terpikir repot juga ya, setiap kali mau kirim SMS (gratis) ini harus masuk dulu ke websitenya, loading-nya kan lumayan memakan waktu. Akhirnya terpikir untuk membuat sebuah thin-client sederhana agar dapat menggunakan SMS gratis tersebut. Dari handphone juga sih, hanya saja saat ini baru terbatas untuk Sistem Operasi Android, minimal Android 2.1

Aplikasi-nya sendiri saya sebut sebagai beta, karena aplikasi tersebut dapat berjalan atau tidak semuanya tergantung kepada provider SMS Gratis tersebut, bisa saja sewaktu-waktu layanan SMS Gratis berubah alamat, atau bahkan dimatikan secara total (mudah-mudahan tidak). Aplikasi ini murni hanya sebagai jembatan saja, antara handphone dan server si penyedia layanan. Tampilan aplikasi juga teramat sangat sederhana, hanya form input nomer tujuan dan juga pesan yang ingin dikirimkan. Itu saja.

Berminat, silakan download disini.

Membuat Tampilan Jadwal sesuai dengan durasi

konglie — Tue, 10 Apr 2012 07:37:49 +0000

Berikut source codenya,


global $schedules, $start, $leap, $duration, $leapWidth;
 
$start = '00:00'; // waktu kolom pertama
$leap = 60; // jumlah menit antar kolom
$duration = 60 * 24;  //jumlah menit total = 24 jam
$leapWidth = 120; // pixel, lebar per kolom waktu
$totalWidth = $leapWidth * (($duration / $leap) + 1);
 
// format data, diasumsikan sudah jadi, tentunya data ini bisa diambil dari db atau apapun itu
$schedules = array(
	'stasiun 1' => array(
		array(
			'duration' => '30',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '120',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '180',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '30',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '30',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '90',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '30',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '30',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
	),
	'stasiun 2' => array(
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '30',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '120',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '30',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '180',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '30',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '30',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		),
		array(
			'duration' => '60',
			'title' => 'Programme Name',
			'description' => 'whatever...'
		)
	)
);
 
function displayTime($start, $leapOver)
{
	list($h, $m) = explode(':', $start);
	$hplus = floor($leapOver / 60);
	$mplus = $leapOver - ($hplus * 60);
 
	$h = sprintf("%02d", intval($h) + $hplus);
	$m = sprintf("%02d", intval($m) + $mplus);
 
	return "$h:$m";
}
 
function renderHeaderCell()
{
	global $start, $leap, $duration, $leapWidth;
	$cells = "";
	$column = "";
 
	$currentTime = 0;
	$cells .= " 
";		
	while($currentTime < $duration)
	{	
		$cells .= "" . displayTime($start, $currentTime). "
";		
		$currentTime += $leap;
	}
 
	$cells .= "";
	return $cells;
}
 
function renderSchedule()
{
	global $schedules, $start, $leap, $duration, $leapWidth;
 
	$rows = "";
	$colspan = $duration / $leap;
	foreach($schedules as $channel => $detail)
	{
		$rows .= "";
		$rows .= "$channel
";
 
		$totDur = 0;
		$oneDay = 24 * 60; // jumlah menit dalam satu hari
		foreach($detail as $show)
		{
			$dur = $show['duration'];
			$title = $show['title'];
			$desc = $show['description'];
			$totDur += $dur;
 
			if($totDur > $oneDay)
			{
				// terserah mau ngapain disini, validasi aja
			}
 
			$columnWidth = $dur / $leap * $leapWidth;
			$rows .= "$title $dur
";
		}
 
		$rows .= "";
	}
 
	return $rows;
}
?>


	time table
	


	 echo renderSchedule();?>
	
		
			
				
					 echo renderHeaderCell();?>

Konversi Basis Angka

konglie — Sat, 24 Mar 2012 04:41:08 +0000

Salah satu mata kuliah di periode ini adalah Sistem Digital. Dan materi pembukanya adalah mengenai basis angka, dengan kuliah pembuka yang begitu “wah”, karena tanpa basa basi langsung mendapat tugas yang soalnya gak banyak, hanya 4 soal, tapi diharuskan menulis di kertas folio bergaris, dan ternyata 1 halaman bolak balik kertas folio tersebut full.

Tugas yang dimaksud adalah (jangan basa basi, langsung aja ke aplikasi) melakukan konversi basis angka dari basis yang satu ke basis lainnya, lebih detail, adalah konversi basis 16 (hexadecimal) ke basis 2 (binary), basis 8 (octal), basis 5 (quinary), dan basis 7 (septenary). Meskipun sebenarnya, konversi tersebut bukanlah hal yang susah secara teori, namun apabila melibatkan angka-angka yang begitu banyak (banyak dalam arti jumlah digit), apalagi desimal (desimal dalam arti jumlah angka di belakang koma), lumayan membuat jari keriting.

Dan tentunya, sang Dosen dengan begitu cerdasnya membuat mahasiswanya gak berkutik, karena dalam tugas tersebut diharuskan membuat langkah-langkah konversi sehingga didapat hasil akhirnya. Oh Dear, seandainya saja hanya hasil yang dibutuhkan, kalkulator sudah siap sedia.

Obok-obok internet, kebanyakan hanya memberikan fungsi konversi saja, tidak disertakan step by step konversinya. Contohnya yang ini (lengkap dengan istilah basis angka-nya). Maka, dengan bantuan penjelasan algoritma dari sahabat, Fahri Aje (http://daffari.multiply.com), akhirnya saya berinisiatif membuat sebuah aplikasi kecil (ada setelah ini), untuk menghitung konversi angka, dan juga membuat step by step konversinya.

Enjoy!

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.