zip checker dengan prototype …

Jan 12, 2008 Author: admin | Filed under: Ajax

ini salah satu contoh aplikasi ajax dengan prototype yang barusan qu baca ne .. konsepnya dari halaman HTML di buat sebuah field input untuk memeriksa kode pos (zip code) yang valid dari beberapa kode pos yang ada di database.

di butuhkan :

satu halaman html untuk interface

satu file Php untuk komunikasi ke server

berikut ini halaman HTML amascript javascript na:

<html>
<head>
<title>AJAX Zip Checker </title>
<link rel=”stylesheet” href=”style.css” type=”text/css” />
<script src=”../js/prototype.js” language=”JavaScript” type=”text/javascript”></script>
<script type=”text/javascript” language=”JavaScript”>
function cekZip() {
if($F(’zip’).length == 5) {
//alert( $F(’zip’) );
var url = ‘cekZip.php’;
var params = ‘zip=’ + $F(’zip’);
var ajax = new Ajax.Updater(
{success: ‘zipResult’},
url,
{method: ‘get’, parameters: params, onFailure: reportError});
}
}
function reportError(request) {
$F(’zipResult’) = “Error”;
}
</script>
</head>
<body>
<form>
<label for=”zip”>zip:</label>
<input type=”text” name=”zip” id=”zip” onkeyup=”cekZip();” />
<div id=”zipResult”></div>
</form>
</body>
</html>

di javasript na ada tag $F(’zip’) itu sama aja dengan perintah untuk mengambil isi dari text field dengan id zip, jadi jika kita menulis kan ‘134as’ di field zip maka akan ‘134as’ akan di simpan di variabel yang memuat $F(’zip’).

$F(’zip’).length -> mengambil data dari field zip dan menentukan jumlah karakter yang di masukkan di field tersebut.

function cekZip() {
if($F(’zip’).length == 5) {
//alert( $F(’zip’) );
var url = ‘cekZip.php’;
var params = ‘zip=’ + $F(’zip’);
var ajax = new Ajax.Updater(
{success: ‘zipResult’},
url,
{method: ‘get’, parameters: params, onFailure: reportError});
}
}

pada fungsi di atas pada intinya jika isi dari field zip sudah mencapai lima maka akan di buat sebuah request ajax untuk memproses data yang di masukkan, url yang di minta adalah cekZip.php dengan parameter zip di isi data masukan.

function reportError(request) {
$F(’zipResult’) = “Error”;
}

fungsi ini di buat untuk menangani jika terjadi error (jika request ajax gagal)

sekarang tinggal membuat script php buat ngecek data yang di masukkan sudah valid atau belum gampang kan he he ini script php na tapi blum lengkap he he lengkapin dewe ae ya .

<?php
echo “di check zip ne”;
?>

0 Comments

Prototype $()

Jan 11, 2008 Author: admin | Filed under: Ajax

Apa itu prototype ?? prototype.js adalah library javascript yang dapat kita gunakan untuk membuat sebuah aplikasi yang interaktif di halaman web. Librari ini di buat oleh om Sam Stephenson.

di Library nya terdapat banyak objek dan fungsi yang dapat kit gunakan tujuan awalnya untuk memudahkan kita untuk melaksanakan berbagai penulisan kode dan idiom program yang berulang ulang.

Menggunakan fungsi $()

contoh :

<html>

<head>

<title> Test Page </title>

<script src=”prototype.js”></script><script>

function test(){

var d = $(’myDiv’);

alert(d.innerHTML);

d.hide();

d.show();

d.addClassName(’active’);

}

</script>

</head>

<body>

<div id=”myDiv”>

<p>This is a paragraph</p>

</div>

<div id=”myOtherDiv”>

<p>This is another paragraph</p>

</div>

<input type=”button” value=”Test $()” onclick=”test();”/><br/>

</body>

</html>

pada kode di atas variabel d = $(mydiv) artinya var d= getElementById()

Fungsi $() ini di gunakan untuk menghandle shortcut untuk tag code document.getElementById(). Sama seperti fungsi DOM, fungsi ini juga mengembalikan elemen yang dapat d passing sebagai argument.

Perbedaannya dengan fungsi DOM, fungsi ini dapat bekerja lebih baik. Objek elemen yang d kembalikan akan di beri argumen. Method extra ini akan mempermudah banyak hal seperti menyembunyikan / memunculkan elemen, mendapatkan ukuran dari element atau bahkan untuk scrolling dan lain lain.

0 Comments

Ehm

M	T	W	T	F	S	S
« Jul
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

tulis dan katakan pada dunia

zip checker dengan prototype …

Prototype $()

Categories

Archives

Meta

Ehm

Calendar

Blogroll

Tags

Most Popular

Recent Comments

Latest Entries