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

STMIK AKAKOM

IMPLEMENTASI AJAX Untuk pemilihan mata kuliah Oleh : M Guntara

12

TEKNOLOGI WEB I – STMIK AKAKOM

oleh : M. Guntara

BAGIAN 1: Kinerja Menghitung jumlah sks , untuk mata kuliah yang dipilih (check box di centang)

BASIS DATA YG DIPAKAI Nama database : Tabel :

akakom

matakul

KONEKSI.PHP

KRS_AJAX1.PHP <script language="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

Page 2


oleh : M. Guntara

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” } $kodemk $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 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 " ";  membat checkbox dengan id sesuai barisnya ck1,ck2, dst } $jumlah_mk=$no;  transfer jumlah mata kuliah ke var $jumlah_mk echo "
"; ?> >
 menempatkan jumlah mata kuliah secara tersembunyi agar dpaat diakses di javascript dengan f.jum_mk.value Jumlah : <span id="jumsks"> sks  menempatkan jumlah sks yang dipilih

OUTPUT

Implementasi AJAX untuk pemilihan Mata Kuliah

Page 3


oleh : M. Guntara

BAGIAN 2: Kinerja Menghitung jumlah sks , untuk mata kuliah yang dipilih (check box di centang) Penjelasan setiap mata kuliah saat cursor mouse diatas nama mata kuliah

KRS_AJAX2.PHP <script language="javascript"> var cek=false; if(window.XMLHttpRequest) cek=new XMLHttpRequest(); else if(window.ActiveXObject) cek=new ActiveXObject("Microsoft.XMLHTTP"); 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> } } cek.send(null); } function hitung_sks() { 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 Implementasi AJAX untuk pemilihan Mata Kuliah

Page 4


oleh : M. Guntara

{ document.getElementById(mana).innerHTML=""; menghapus /memberikan data kosong di baris matakuliah bila cursor TIDAK diatas nama mata kuliah }
$kodemk "; $id_baris="p".$no; membuat id untuk menampilkan penjelasan tiap baris matakuliah dengah id=p1 untuk baris 1, p2 baris 2 , dst /*tanda pettik '' HARUS , kalau tidak maka dianggap numerik saja A123 = 123 */ ?> <span onMouseOver="jupuk('rinci_krs.php?nomere='+'','')" onMouseOut="hapus('')";> 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 $sk sks"; menampilkan sks per mk Penggunaan <span > agar bisa dikenal dengan innerHTMKL $id_ck='ck'.$no; echo " "; echo "<span id=$id_baris>"; menampilkan penjelasan tiap mk daat cursor diatas nama mata kuliah } $jumlah_mk=$no; echo "
"; ?> sks

$jumlah_mk ;?>>

RINCI_KRS.PHP Implementasi AJAX untuk pemilihan Mata Kuliah

Page 5


oleh : M. Guntara

$catat";hasil yang akan di tangkap oleh responseTEXT sebagai penjelasan dari masing2 baris mata kuliah ?>

OUTPUT


Page 6


oleh : M. Guntara

BAGIAN 3: Kinerja Menghitung jumlah sks , untuk mata kuliah yang dipilih (check box di centang) Penjelasan setiap mata kuliah saat cursor mouse diatas nama mata kuliah Informasi Kuota, tetapi bila di pilih BELUM BERPENGARUH dalam pemakaian dan sisa kuota

KRS_AJAX3.PHP <script language="javascript"> var cek=false; if(window.XMLHttpRequest) cek=new XMLHttpRequest(); else if(window.ActiveXObject) cek=new ActiveXObject("Microsoft.XMLHTTP"); 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; } } cek.send(null); } function hitung_sks() { /*======hitung jumlah sks yang dipilih*/ 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; }

function hapus(mana) { Implementasi AJAX untuk pemilihan Mata Kuliah

Page 7


oleh : M. Guntara

document.getElementById(mana).innerHTML=""; }
$kodemk "; $id_baris="p".$no; /*tanda pettik '' harus , kalau tidak maka dianggap numerik saja A123 = 123 */ ?> <span onMouseOver="jupuk('rinci_krs.php?nomere='+'','')" onMouseOut="hapus('')";> $sk sks"; $id_ck='ck'.$no; /*echo " ";*/ ?> onClick="hitung_sks()"> "; } $jumlah_mk=$no; echo "
"; ?> sks

$jumlah_mk ;?>>

RINCI_KRS.PHP Implementasi AJAX untuk pemilihan Mata Kuliah

Page 8


oleh : M. Guntara

Menggunakan script sebelumnya (di bagian 2)

OUTPUT


Page 9


oleh : M. Guntara

BAGIAN 4: Kinerja Menghitung jumlah sks , untuk mata kuliah yang dipilih (check box di centang) Penjelasan setiap mata kuliah saat cursor mouse diatas nama mata kuliah Informasi : Kuota, terpakai, sisa kuota dan bila dipilih / tidak terpakai dan sisa kuota BERUBAH

KRS_AJAX4.PHP <script language="javascript"> var cek=false; if(window.XMLHttpRequest) cek=new XMLHttpRequest(); else if(window.ActiveXObject) cek=new ActiveXObject("Microsoft.XMLHTTP"); 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; } } 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 cek.onreadystatechange=function(){ if(cek.readyState==4 && cek.status==200) document.getElementById(letak).innerHTML=cek.responseText;  menempatkan hasil dari edit_krs.php } } cek.send(null); /*======hitung jumlah sks yang dipilih*/ var j_mk=f.jum_mk.value; Implementasi AJAX untuk pemilihan Mata Kuliah

Page 10


oleh : M. Guntara

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; }

function hapus(mana) { document.getElementById(mana).innerHTML=""; }
$kodemk "; $id_baris="p".$no; $id_sisa="s".$no; /*tanda pettik '' harus , kalau tidak maka dianggap numerik saja A123 = 123 */ ?> <span onMouseOver="jupuk('rinci_krs.php?nomere='+'','')" onMouseOut="hapus('')";> $sk sks"; $id_ck='ck'.$no; /*echo " ";*/

name=$id_ck id=$id_ck


Page 11


oleh : M. Guntara

?> onClick="hitung_sks('','','')"> Kuota : $kuo Dipakai :$pakai SIsa : $sisa "; meletakkan letak kuota, terpakai dan sisa bila terjadi perubahan centang pada checkbox echo "<span id=$id_baris>"; } $jumlah_mk=$no; echo "
"; ?> sks

$jumlah_mk ;?>>

EDIT_KRS.PHP

RINCI_KRS.PHP


Page 12


oleh : M. Guntara

Menggunakan script pada file yang sama sebelumnya (bagian 2)

OUTPUT

TUGAS PRA UTS

-

Per kelompok 1-3 mhs Kirim : database, script dan penjelasannya

TUGAS pra UTS Menggunakan AJAX buat aplikasi sederhana (topik bebas tidak rahasia-asal beda 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 [email protected] Subyek : tugas II teknologi web 1 klas 1


Page 13

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

Recommend Documents