Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
 ...
TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara
Implementasi AJAX untuk pemilihan Mata Kuliah Page 3
sks=document.getElem...
TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara
Implementasi AJAX untuk pemilihan Mata Kuliah Page 4
BAGIAN 2:
Kinerja
 ...
TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara
Implementasi AJAX untuk pemilihan Mata Kuliah Page 5
{
document.getElemen...
TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara
Implementasi AJAX untuk pemilihan Mata Kuliah Page 6
<?php
$nomer=$_GET[n...
TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara
Implementasi AJAX untuk pemilihan Mata Kuliah Page 7
BAGIAN 3:
Kinerja
 ...
TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara
Implementasi AJAX untuk pemilihan Mata Kuliah Page 8
document.getElementB...
TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara
Implementasi AJAX untuk pemilihan Mata Kuliah Page 9
Menggunakan scriptse...
TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara
Implementasi AJAX untuk pemilihan Mata Kuliah Page 10
BAGIAN 4:
Kinerja
...
TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara
Implementasi AJAX untuk pemilihan Mata Kuliah Page 11
var j_sks=0;
var sk...
TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara
Implementasi AJAX untuk pemilihan Mata Kuliah Page 12
?>
<input type='che...
TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara
Implementasi AJAX untuk pemilihan Mata Kuliah Page 13
Menggunakan scriptp...
Upcoming SlideShare
Loading in …5
×

Implementasi ajax 25 okt2012

172 views

Published on

this is to remember me about programing is fun.

Published in: Education
  • Be the first to comment

  • Be the first to like this

Implementasi ajax 25 okt2012

  1. 1. STMIK AKAKOM 12 IMPLEMENTASI AJAX Untuk pemilihan mata kuliah Oleh : M Guntara
  2. 2. 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
  3. 3. TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara Implementasi AJAX untuk pemilihan Mata Kuliah Page 3 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
  4. 4. TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara Implementasi AJAX untuk pemilihan Mata Kuliah Page 4 BAGIAN 2: Kinerja  Menghitung jumlah sks ,untuk mata kuliah yangdipilih (check box di centang)  Penjelasan setiap mata kuliah saatcursormousediatas nama mata kuliah KRS_AJAX2.PHP <html><head> <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></span> } } 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
  5. 5. TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara Implementasi AJAX untuk pemilihan Mata Kuliah Page 5 { 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
  6. 6. TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara Implementasi AJAX untuk pemilihan Mata Kuliah Page 6 <?php $nomer=$_GET[nomere]; include "koneksi.php"; /*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
  7. 7. TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara Implementasi AJAX untuk pemilihan Mata Kuliah Page 7 BAGIAN 3: Kinerja  Menghitung jumlah sks ,untuk mata kuliah yangdipilih (check box di centang)  Penjelasan setiap mata kuliah saatcursormousediatas nama mata kuliah  Informasi Kuota,tetapi bila di pilih BELUM BERPENGARUH dalampemakaian dan sisa kuota KRS_AJAX3.PHP <html><head> <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) {
  8. 8. TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara Implementasi AJAX untuk pemilihan Mata Kuliah Page 8 document.getElementById(mana).innerHTML=""; } </script> </head><body> <form name="f"> <?php include "koneksi.php"; $x=mysql_query("select kodemk,namamk,sks,kuota,pakai from matakul"); $no=0; while($y=mysql_fetch_array($x)) { $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 echo "<br>$kodemk &nbsp "; $id_baris="p".$no; /*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 $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>"; ?> <input type="hidden" name="jum_mk" value=<? echo $jumlah_mk ;?>><br> Jumlah : <span id="jumsks"></span> sks </form> </body></html> RINCI_KRS.PHP
  9. 9. TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara Implementasi AJAX untuk pemilihan Mata Kuliah Page 9 Menggunakan scriptsebelumnya (di bagian 2) OUTPUT
  10. 10. TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara Implementasi AJAX untuk pemilihan Mata Kuliah Page 10 BAGIAN 4: Kinerja  Menghitung jumlah sks ,untuk mata kuliah yangdipilih (check box di centang)  Penjelasan setiap mata kuliah saatcursormousediatas nama mata kuliah  Informasi :Kuota, terpakai,sisa kuota dan bila dipilih / tidak terpakai dan sisa kuota BERUBAH KRS_AJAX4.PHP <html><head> <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;
  11. 11. TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara Implementasi AJAX untuk pemilihan Mata Kuliah Page 11 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=""; } </script> </head><body> <form name="f"> <?php include "koneksi.php"; $x=mysql_query("select kodemk,namamk,sks,kuota,pakai from matakul"); $no=0; while($y=mysql_fetch_array($x)) { $no++; $kodemk=$y[kodemk]; $namamk=$y[namamk]; $sk=$y[sks]; $kuo=$y[kuota]; $pakai=$y[pakai]; echo "<br>$kodemk &nbsp "; $id_baris="p".$no; $id_sisa="s".$no; /*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 $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()'> ";*/
  12. 12. TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara Implementasi AJAX untuk pemilihan Mata Kuliah Page 12 ?> <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>"; ?> <input type="hidden" name="jum_mk" value=<? echo $jumlah_mk ;?>><br> Jumlah : <span id="jumsks"></span> sks </form> </body></html> EDIT_KRS.PHP <?php $kodemk=$_GET[kodemk]; $pil=$_GET[pil]; include "koneksi.php"; /*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
  13. 13. TEKNOLOGI WEB I – STMIK AKAKOM oleh : M. Guntara Implementasi AJAX untuk pemilihan Mata Kuliah Page 13 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

×