IMPLEMENTASI SISTEM
4.2. Penerapan Ajax dalam membangun website Knowledge management system
Penggunaa Ajax dalam website yang penulis buat untuk mendapatkan suatu sistem wesite yang interaktif seperti halnya kita menggunakan aplikasi
desktop. Tetapi penggunaan Ajax disini masih sangat sedikit, namun masih bisa menghasilkan website yang interakrif. misalnya untuk form formulir sebagai berikut:
function cek_Id(){
if (document.register.id_user.value !=''){ var posisi = 1;
var elemen_id_info = document.getElementById ('id_info'); elemen_id_info.innerHTML = '';
var elemen_id_user = document.getElementById('id_user'); var pasangan_var_nilai = 'id=' + elemen_id_user.value; prosesData(xmlHttpSimpan, aksi.php?modul=cek_user', pasangan_var_nilai, 'id_info', posisi);
} } function cek_email(email){ var posisi = 2; var elemen_id_email = document.getElementById('id_email'); elemen_id_email.innerHTML = '';
var elemen_email = document.getElementById('email'); var pasangan_var_nilai = 'kode=' + elemen_email.value; prosesData(xmlHttpSimpan, 'aksi.php?modul=email', pasangan_var_nilai, 'id_email', posisi); } function cek_pass(){ if (document.register.pass2.value !=''){ if (document.register.pass.value != document.register.pass2.value){ var pesan = '<img src=images/error.png
border=0> Password Tidak Cocok'; }
else {
var pesan = '<img src=images/ok.png border=0> Password Cocok'; }
var obj = document.getElementById('info_pass'); obj.innerHTML = pesan;
}
}
</script>
<div class='kotak'><div class=frame><b>Register</b></div><? if( isset($_SESSION['ERRMSG_ARR']) &&
is_array($_SESSION['ERRMSG_ARR']) && count($_SESSION['ERRMSG_ARR']) >0 ) { echo "<div class=pesan>";
echo '<ul class="err">';
foreach($_SESSION['ERRMSG_ARR'] as $msg) { echo '<li>',$msg,'</li>';
<div class=isi><form method='post' name=register
action='aksi.php?modul=daftar' enctype='multipart/form-data'> <table><tr><td colspan='2'><h3>Informasi data
Pribadi</h3></td></tr>
<tr><td colspan='2'> </td></tr>
<tr><td align='right'>Nama Lengkap</td><td><input type='text' name='nama' size=31 /> *</td></tr>
<tr><td colspan='2'> </td></tr>
<tr><td align='right'>Jenis Jelamintd><td><select name='kelamin'><option selected='selected' value='Laki-laki'>Laki - Laki</option><option
value='Perempuan'>Perempuan</option></select></td></tr> <tr><td colspan='2'> </td></tr>
<tr><td align='right'>Tangal Lahir</td><td><input type='text' name=tanggal size=3><select name='bulan'><option
selected='selected'> - Bulan - </option><option value='Januari'>Januari</option><option value='Februari'>Februari</option><option value='Maret'>Maret</option><option value='April'>April</option><option value='Mei'>Mei</option><option value='Juni'>Juni</option><option value='Juli'>Juli</option><option value='Agustus'>Agustus</option><option value='September'>September</option><option value='Oktober'>Oktober</option><option value='November'>Novenber</option><option value='Desember'>Desember</option></select><input type='text' name=tahun size=8></td></tr><tr><td colspan='2'> </td></tr> <tr><td align='right'>Negara</td><td><input type='text' name='negara' size=31 /></td></tr> <tr><td colspan='2'> </td></tr> <tr><td colspan='2'><h3>Informasi Accunt</h3></td></tr> <tr><td align='right'>User ID </td>
<td><input type='text' name='user' id='id_user' onblur='cek_Id();' size=31 /> *</td></tr>
<tr><td> </td><td><span id='id_info'> </span></td></tr><tr><td
align='right'>Password</td><td><input type='password' name='pass' id='pass1' size=31 /> *</td></tr>
<tr><td colspan='2'> </td></tr>
<tr><td align='right'>Repeat Password</td><td><input
type='password' name='pass2' id='pass2' onblur='cek_pass();' size=31 /> **</td></tr>
<tr><td> </td><td><span id='info_pass'></span></td></tr> <tr><td align='right'>Email</td><td><input type='text'
name='email' id='email' onblur='cek_email();' size=31 /> *</td></tr>
<tr><td> </td><td><span id='id_email'></span></td></tr> <tr><td colspan=2><img
src='captchasecurityimages.php?width=100&height=40&character= 5' /><br />
Security Code: <input id='security_code' name='security_code' type='text' /><br /></td></tr>
Hasil script diatas sebagai berikut:
Gambar 4.1 Formulir dengan teknik Ajax
Dalam formulir tesebut karena menggunakan Ajax, kaerna validasi formulir menggunankan teknik Ajax maka untuk mengecek user id tidak perlu
<tr><td colspan='2' align='center'><input type='submit' value='Next' class=button /> <input type='reset' value='Batal' class=button /></td></tr>
</table></form>
<br>* Harus diisi<br> ** Repeat Password harus sama<br></div>
mengirimkan seluruh isi formulir ke server, cukup dengan mengarahkan kursor keluar dari text field User ID. maka akan dilakukan proses cek user apakah sudah digunakan atau belum di dalam database, sedangan script sebagai berikut:
<input type='text' name='user' id='id_user' onblur='cek_Id();' size=31 />
Jika kursor meninggalkan text field maka fungsi cek id akan di jalankan,
function cek_Id(){
if (document.register.id_user.value !=''){ var posisi = 1;
var elemen_id_info = document.getElementById ('id_info'); elemen_id_info.innerHTML = '';
var elemen_id_user = document.getElementById('id_user'); var pasangan_var_nilai = 'id=' + elemen_id_user.value; prosesData(xmlHttpSimpan, aksi.php?modul=cek_user', pasangan_var_nilai, 'id_info', posisi);
} }
Fungsi diatas akan mengirimkan permintaan ke server dengan alamat yang telah di definisikan diatas, sedangkan script yang ada pada server sebagai berikut:
$id_user = $_POST["id"]; $polausername= "[A-Za-z0-9]";
$cekuser = eregi($polausername,$id_user); if (!$cekuser){
print ("<img src='images/error.png' border=0>
Pola Username Salah
salah Gunakan kombinasi huruf dan angka"); }
else {
$sql = "SELECT id_user FROM user WHERE id_user = '$id_user'";
$hasil = mysql_query($sql);
$baris = mysql_fetch_row($hasil);
if ($baris){
print("<img src='images/error.png' border=0> Sudah Digunakan!");
Hasil dari script pada server untuk melakukan cek user id akan di tampilkan pada tag HTML yang telah di beri id ‘id_info’
<tr><td> </td><td><span id='id_info'></span>
Gambar 4.2 Validasi formulir dengan Ajax