Implementasi ajax 25 okt2012

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

Recommended

More Related Content

Similar to Implementasi ajax 25 okt2012

Similar to Implementasi ajax 25 okt2012 (20)

Recently uploaded

Recently uploaded (20)

Implementasi ajax 25 okt2012