Archive for October 26th, 2008

26
Oct
08

Liverpool Tundukkan Chelsea

London – Liverpool meraih tiga angka dalam lawatannya ke Stamford Bridge, kandang Chelsea. Kemenangan “Si Merah” pada partai pekan ke-9 Premiership ini diraih dengan skor tipis 1-0.

Kemenangan Liverpool, Minggu (26/10/2008), membuat tim Merseyside itu kini menjadi satu-satunya tim yang belum pernah meraih kekalahan di Liga Primer musim ini. Tambahan tiga angka juga membuat mereka sementara ini menjadi penguasa tunggal puncak klasemen dengan poin 23.

Buat Chelsea, kekalahan di kandang sendiri itu menjadi kekalahan pertama klub London tersebut di Liga Primer, sekaligus kekalahan pertama Luiz Felipe Scolari selama menukangi “Si Biru”. Berakhir pula rekor kandang tak terkalahkan Chelsea di Premiership, yang menurut catatan BBC sudah bertahan selama sekitar empat tahun dan delapan bulan.

Kemenangan buat Liverpool sudah dikunci sedari menit kesepuluh. Sepakan keras Xabi Alonso membentur pemain lawan dan menceplos ke gawang Chelsea tanpa mampu ditahan Petr Cech.

Di sisa paruh pertama pertandingan, Chelsea relatif lebih mendominasi kendati tak bisa menyamakan kedudukan. Di babak kedua, Liverpool lebih “hidup” ketimbang babak pertama dan beberapa kali mengancam gawang Chelsea. Tapi skor akhir 1-0 buat tim tamu tak berubah.

Susunan Pemain:

Chelsea: Cech; Bosingwa (Sinclair ’84), Carvalho, Terry, Ashley Cole, Mikel, Kalou (Di Santo ’58), Deco, Lampard, Malouda (Belletti ’58), Anelka.

Liverpool: Reina; Arbeloa, Carragher, Agger, Aurelio, Alonso, Mascherano, Kuyt (Lucas ’87), Gerrard, Riera (Hyypia ’90), Keane (Babel ’60).

( krs / a2s )

26
Oct
08

Membuat form tanpa table munggunakan CSS

Sekarang ini trend desain web adalah tanpa table alias tableless. Mengapa tableless? katanya sih load-nya jadi lebih ringan dibanding dengan table (saya sendiri belum ngebuktiin seberapa besarkah perbedaannya). Selain itu mendesain sebuah web tanpa table jauh lebih fleksibel karena kita bisa memindahkan kolom dari kanan ke kiri atau sebaliknya dengan hanya mengubah CSS-nya tanpa mengubah code HTML-nya.

Salah satu komponen dalam sebuah halaman web adalah form isian. Nah bagaimana membuat form isian tanpa table. Berikut adalah contoh bagaimana membuat form isian tanpa table menggunakan CSS.
Mari diLanjot yaa..h

26
Oct
08

Tugas Pemrograman Web

Saat ini ajax merupakan teknologi dalam bidang web yang sedang naik daun. Load yang lebih cepat karena tidak perlu meload semua halaman menjadi salah satu keunggulan dari teknologi ajax ini. Saat membuat website direktori saya coba untuk menerapkan teknologi ajax ini pada website tersebut. Emang tidak semua menggunakan ajax tetapi hanya pada form daftarkan website saya gunakan teknologi ajax untuk mensubmit form tersebut.

Saya menggunakan mootools sebagai framework javascript yang cukup mudah untuk digunakan. Kamu dapat membaca postingan ini untuk mengenal lebih jauh tentang mootols. Kamu dapat mendownload mootools di sini. Ada dua cara yang dapat kita digunakan untuk mensubmit form dengan ajax menggunakan mootools. Sebelum membahas kedua cara tersebut hal yang perlu disiapkan adalah file untuk form dan file action. Contoh file form adalah sebagai berikut.

1
2
3
4
5
6
7
8
9
<div id="response"></div>
<form action="action.php" method="post" name="form" id="form" onsubmit="submit_form(); return false;">
		<label for="name">Nama: </label>
<input name="name" size="30" id="name" type="text" />

		<label for="name">Alamat email: </label>
<input name="email" size="30" id="email" type="text" />
<input name="task" id="task" value="Submit" type="submit" />
	</form>

dan contoh file action adalah sebagai berikut.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
if( $_POST ){
	if( trim($_POST['name']) == '' ){
		echo 'Silahkan masukkan nama Anda.';
	}
	elseif( trim($_POST['email']) == '' ){
		echo 'Silahkan masukkan alamat email Anda.';
	}
	else{
		// kamu dapat melakukan aksi di sini, misal-nya masukin ke database atau yang lain.
		echo 'Terima kasih telah mengisi form. Berikut adalah data Anda:';
		echo 'Nama Anda: '.$_POST['name'];
		echo 'Email Anda: '.$_POST['email'];
	}
}
?>

1. Cara pertama adalah menggunakan fungsi javascript
Cara ini adalah dengan membuat fungsi javascript untuk melakukan action ketika form disubmit. Contoh fungsi tersebut adalah:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function submit_form(){
	var fn = function(){
		$('task').disabled=false;
		$('response').removeClass('ajax-loading').addClass('response');
	}

	var html = "Harap menunggu...";
	$('response').removeClass('response').addClass('ajax-loading').setHTML(html);
	$('task').disabled=true;
	var options = {};
	options['update'] = 'response'; // id div yang akan di tulisi response dari action
	options['onComplete'] = fn;
	options['evalScripts'] = false; //jika respon mengandung javascript berikan nilai true
	$('form').send(options);
}

Jika menggunakan cara ini maka kamu harus menambahkan onsubmit=”submit_form(); return false;” pada form kamu. Contohnya sebagai berikut.

1
2
<form action="action.php" method="post" name="form" id="form" onsubmit="submit_form(); return false;">
</form>

2. Cara kedua adalah menggunakan window.domready
Cara ini adalah menambahkan event submit pada form menggunakan domready. Contohnya sebagai berikut.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.addEvent('domready', function(){
	$('form2').addEvent('submit', function(e){
		e = new Event(e).stop();
		var fn = function(){
			$('task2').disabled=false;
			$('response2').removeClass('ajax-loading').addClass('response');
		};

		var html = "Harap menunggu...";
		$('response2').removeClass('response').addClass('ajax-loading').setHTML(html);
		$('task2').disabled=true;

		var options = {};
		options['onComplete'] = fn;
		options['update'] = 'response2';
		$('form2').send(options);
	});
});

Jika kamu menggunakan cara ini maka kamu harus menambahkan id pada form, misalnya

1
2
<form action="action.php" method="post" name="form2" id="form2">
</form>

Kamu dapat melihat contoh penerapan metode tersebut di sini. Atau kamu juga dapat mengunduh contoh tersebut di sini.




 

October 2008
M T W T F S S
    Dec »
 12345
6789101112
13141516171819
20212223242526
2728293031  

Follow

Get every new post delivered to your Inbox.