�ݺ�ߣ

STMIK AKAKOM
12
IMPLEMENTASI AJAX
Untuk pemilihan mata kuliah
Oleh : M Guntara

TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara
Implementasi AJAX untuk pemilihan Mata Kuliah Page 2
BAGIAN 1:
Kinerja
 Menghitung jumlah sks ,untuk mata kuliah yangdipilih (check box di centang)
BASIS DATA YG DIPAKAI
Nama database: akakom
Tabel : matakul
KONEKSI.PHP
<?php
mysql_connect("localhost","root","root");
mysql_select_db(akakom);
?>
KRS_AJAX1.PHP
<html><head>
<scriptlanguage="javascript">
var cek=false;
if(window.XMLHttpRequest)
cek=new XMLHttpRequest();
else if(window.ActiveXObject)
cek=new ActiveXObject("Microsoft.XMLHTTP");
function hitung_sks()
{
var j_mk=f.jum_mk.value; ambil jumlah matakuliah dari <form name=f” > <input type=”hidden”
name=”jum_mk” …
var j_sks=0;
var sks,sk;
for(i=1;i<=j_mk;i++) membaca baris berbaris dari mata kuliah
{
idck="ck"+i;  membuat id untuk tiap baris checkbox id=ck1 untuk baris 1 , ck2 untuk baris 2 dst
if(document.getElementById(idck).checked) melihat apakah chekbox suatu baris di centang ? bila
YA lakukan baris berikut
{
idsk="sk"+i; membuat id untuk sks mata kuliah id=sk1 untuk baris 1, sk2 baris ke 2 , dst

sks=document.getElementById(idsk).innerHTML;  mengambil jumlah sks tiap baris yang dicentang
j_sks+=parseInt(sks); menjumlah sks tiap baris yg di centang
}
}
document.getElementById('jumsks').innerHTML=j_sks;  menempatkan jumlah sks yang di elemen
dengan Id=”jumsks”
}
</script>
</head><body>
<form name="f">
<?php
include"koneksi.php";
$x=mysql_query("select kodemk,namamk,sks,kuota from matakul"); ambil data dari tabel
$no=0;
while($y=mysql_fetch_array($x))  transfer ke array
{
$no++;  kounter untukmembuat nomor baris tiap mata kuliah dan jumlah mata kuliahnya
$kodemk=$y[kodemk];  transfer array ke variabel biasa
$namamk=$y[namamk];  transfer array ke variabel biasa
$sk=$y[sks]; transfer array ke variabel biasa
$kuo=$y[kuota];  transfer array ke variabel biasa
echo "<br>$kodemk &nbsp $namamk"; menampilkan kode mata kuliah dan nama mata kuliah
$id_sks='sk'.$no; membuat id tiap baris untuk sks pada elemen <span> id=sk1 untuk baris 1, id=sk2 untuk
baris ke-2 , dst
echo "<span id=$id_sks>$sk</span>sks "; untuk menampatkan sks per matakuliah
$id_ck='ck'.$no;  membuat id tiap baris untuk sks pada elemen checkbox , id=ck1 untuk baris 1, id=ck2
untuk baris ke-2 , dst
echo "<input type='checkbox' name=$id_ck id=$id_ck onClick='hitung_sks()'>";  membat checkbox dengan
id sesuai barisnya ck1,ck2, dst
}
$jumlah_mk=$no;  transfer jumlah mata kuliah ke var $jumlah_mk
echo "<hr>";
?>
<input type="hidden" name="jum_mk" value=<? echo $jumlah_mk ;?>><br>  menempatkan jumlah mata
kuliah secara tersembunyi agar dpaatdiakses di javascript dengan f.jum_mk.value
Jumlah :
<span id="jumsks"></span> sks  menempatkan jumlah sks yang dipilih
</form>
</body></html>
OUTPUT

BAGIAN 2:
Kinerja
 Penjelasan setiap mata kuliah saatcursormousediatas nama mata kuliah
KRS_AJAX2.PHP
<html><head>
<script language="javascript">
var cek=false;
function jupuk(sumber,id_ne)
{
cek.open("GET",sumber,true);
cek.onreadystatechange=function(){
if(cek.readyState==4 && cek.status==200)
{
document.getElementById(id_ne).innerHTML=cek.responseText;  mengambil
output dari rinci_krs.php, hasil ditempatkan seuai baris-nya <span id=$id_baris></span>
}
}
cek.send(null);
}
{
var j_mk=f.jum_mk.value;
var j_sks=0;
var sks,sk;
for(i=1;i<=j_mk;i++)
{
idck="ck"+i;
if(document.getElementById(idck).checked)
{
idsk="sk"+i;
sks=document.getElementById(idsk).innerHTML;
j_sks+=parseInt(sks);
}
}
document.getElementById('jumsks').innerHTML=j_sks;
}
/*fungsi untuk hapus penjelasan tiap baris mk */
function hapus(mana)  mana ada variabel yang berisi id masing2 baris
untuk penjelasan/catatan tiap mata kuliah bila cursor keluar dari nama mata
kuliah

{
document.getElementById(mana).innerHTML=""; menghapus /memberikan data
kosong di baris matakuliah bila cursor TIDAK diatas nama mata kuliah
}
</script>
</head><body>
<form name="f">
<?php
include "koneksi.php";
$x=mysql_query("select kodemk,namamk,sks,kuota from matakul");
$no=0;
while($y=mysql_fetch_array($x))
{
$no++;
$kodemk=$y[kodemk];
$namamkmk=$y[namamk];
$sk=$y[sks];
$kuo=$y[kuota];
echo "<br>$kodemk &nbsp ";
$id_baris="p".$no; membuat id untuk menampilkan penjelasan tiap baris
matakuliah dengah id=p1 untuk baris 1, p2 baris 2 , dst
/*tanda pettik '<?php echo $kodemk;?>' HARUS , kalau tidak maka dianggap numerik saja A123 = 123 */
?>
<span onMouseOver="jupuk('rinci_krs.php?nomere='+'<?php echo
$kodemk;?>','<? echo $id_baris; ?>')"
onMouseOut="hapus('<?echo $id_baris;?>')";>
<?php echo $namamkmk ;?>
</span> elemen <span> digunakan agar bisa memanfaatkan event
onMouseOver/onMouseOut :
- Bila onMouseOver akan memanggil fungsi jupuk dengan membawa data
:rinci_krs.php?nomere=kode mata kuliah dan id untuk penjelasan mata
kuliah ($id_baris)
- Bila onMouseOut akan menghapus penjelasan
<?
$id_sks='sk'.$no; membuat id untuk sks per mata kuliah, sk1 untuk mk
baris 1, dst
echo "<span id=$id_sks>$sk</span> sks"; menampilkan sks per mk
Penggunaan <span > agar bisa dikenal dengan innerHTMKL
$id_ck='ck'.$no;
echo "<input type='checkbox' name=$id_ck id=$id_ck
onClick='hitung_sks()'> ";
echo "<span id=$id_baris></span>"; menampilkan penjelasan tiap mk daat
cursor diatas nama mata kuliah
}
$jumlah_mk=$no;
echo "<hr>";
?>
<input type="hidden" name="jum_mk" value=<? echo $jumlah_mk ;?>><br>
Jumlah :
<span id="jumsks"></span> sks
</form>
</body></html>
RINCI_KRS.PHP

<?php
$nomer=$_GET[nomere];
/*tanda petik pada $nomer HARUS, kalau tidak bila ada alpabet akan eror */
$c=mysql_query("select catatan from matakul where kodemk='$nomer' ");
$d=mysql_fetch_array($c);
$catat=$d[catatan];
echo " --> $catat";hasil yang akan di tangkap oleh responseTEXT sebagai
penjelasan dari masing2 baris mata kuliah
?>
OUTPUT

BAGIAN 3:
Kinerja
 Informasi Kuota,tetapi bila di pilih BELUM BERPENGARUH dalampemakaian dan sisa kuota
KRS_AJAX3.PHP
<html><head>
var cek=false;
{
{
document.getElementById(id_ne).innerHTML=cek.responseText;
}
}
cek.send(null);
}
{
/*======hitung jumlah sks yang dipilih*/
var j_sks=0;
var sks,sk;
{
idck="ck"+i;
{
idsk="sk"+i;
}
}
}
function hapus(mana)
{

document.getElementById(mana).innerHTML="";
}
</script>
</head><body>
<form name="f">
<?php
$x=mysql_query("select kodemk,namamk,sks,kuota,pakai from matakul");
$no=0;
{
$no++;
$kodemk=$y[kodemk];
$namamk=$y[namamk];
$sk=$y[sks];
$kuo=$y[kuota];  transfer kuota dari array ke var tunggal
$pakai=$y[pakai];  transfer jumlah yg terpilih dari array ke var tunggal
$id_baris="p".$no;
/*tanda pettik '<?php echo $kodemk;?>' harus , kalau tidak maka dianggap
numerik saja A123 = 123 */
?>
<?php echo $namamk ;?>
</span>
<?
$id_sks='sk'.$no;
echo "<span id=$id_sks>$sk</span> sks";
$id_ck='ck'.$no;
/*echo "<input type='checkbox' name=$id_ck id=$id_ck
onClick='hitung_sks()'> ";*/
?>
<input type='checkbox' id=<? echo $id_ck;?> onClick="hitung_sks()">
<?
echo " Kuota : $kuo"; menampilakan kuota tiap mata kuliah
echo " Dipakai: $pakai"; menampilkan yang sdh di pilih kuliah
$sisa=$kuo-$pakai;  hitung sisa kuota
echo " Sisa $sisa"; menampilakan sisa
echo "<span id=$id_baris></span>";
}
$jumlah_mk=$no;
echo "<hr>";
?>
Jumlah :
</form>
</body></html>
RINCI_KRS.PHP

Menggunakan scriptsebelumnya (di bagian 2)
OUTPUT

BAGIAN 4:
Kinerja
 Informasi :Kuota, terpakai,sisa kuota dan bila dipilih / tidak terpakai dan sisa kuota BERUBAH
KRS_AJAX4.PHP
<html><head>
var cek=false;
{
{
document.getElementById(id_ne).innerHTML=cek.responseText;
}
}
cek.send(null);
}
/*fungsi untuk hitung sks, terpakai dan sisa kuota*/
function hitung_sks(kodemk,letak,centang) kodemk =kode matakuliah
,letak = id menempatkan kuota, terpakai dan sisa , centang=id untuk
checkbox
{
var pilih;
if(document.getElementById(centang).checked)
pilih=1;  bila chekbox di centang pilih = 1
else
pilih=0;  bila chekbox di TIDAK centang pilih = 0
cek.open("GET",'edit_krs.php?kodemk='+kodemk+'&pil='+pilih,true); 
menjalankan edit_krs.php dg AJAX dengan membawa kodemk dan pil
document.getElementById(letak).innerHTML=cek.responseText;  menempatkan
hasil dari edit_krs.php
}
}
cek.send(null);
/*======hitung jumlah sks yang dipilih*/

?>
<input type='checkbox' id=<? echo $id_ck;?> onClick="hitung_sks('<? echo
$kodemk;?>','<? echo $id_sisa; ?>','<? echo $id_ck;
?>')">
<?
$sisa=$kuo-$pakai;
echo "<span id=$id_sisa> Kuota : $kuo Dipakai :$pakai SIsa : $sisa
</span>"; meletakkan letak kuota, terpakai dan sisa bila terjadi
perubahan centang pada checkbox
echo "<span id=$id_baris></span>";
}
$jumlah_mk=$no;
echo "<hr>";
?>
Jumlah :
</form>
</body></html>
EDIT_KRS.PHP
<?php
$kodemk=$_GET[kodemk];
$pil=$_GET[pil];
/*tanda petik pada $nomer HARUS, kalau tidak bila ada alpabet akan eror */
$a=mysql_query("select kuota,pakai from matakul where kodemk='$kodemk'
"); mengakses kuota, dan pakai untuk suatu kodemk
$b=mysql_fetch_array($a);
$kuota=$b[kuota];
$pakai=$b[pakai];
if ($pil==1)  jika nilai $pil=1 artinya checkbok di centang
$pakai++;  jumlah pemakai/pendaftar matakuliah tambah 1
Else
$pakai--; jumlah pemakai/pendaftar matakuliah
berkrang 1
$sisa=$kuota-$pakai;  menghitung sisa kuota
mysql_query("update matakul set pakai='$pakai' where kodemk='$kodemk'
"); mengedit nilai pakai dari tabel
echo " Kuota : $kuota Dipakai:$pakai, Sisa : $sisa "; output hasil
penambahan/pengurangan pendaftar mata kuliah yang akan di tangkap sebagai
responseTEXT
?>
RINCI_KRS.PHP

Menggunakan scriptpada fileyangsama sebelumnya (bagian 2)
OUTPUT
TUGAS PRA UTS
- Perkelompok1-3mhs
- Kirim: database,scriptdan penjelasannya
TUGAS pra UTS
Menggunakan AJAXbuat aplikasi sederhana (topik
bebas tidak rahasia-asalbeda dengan contoh di
kuliah)
 Menampilkan data/informasi rinci
 Memanipulasi data (rekam, ubah, tambah,
hapus) -pilih salah satu saja
- Perkelompok 1-3 orang
- Maks 172 jam
- Dikirim ke m_guntara@yahoo.com
Subyek : tugas II teknologi web 1 klas 1

�ݺ�ߣ

Implementasi ajax 25 okt2012

Recommended

More Related Content

Recently uploaded (20)

Featured (20)

Implementasi ajax 25 okt2012