Scribd Logo
Upload

Welcome to Scribd!

  • Materi TWEB

    Uploaded by

    Abu Hanifah Al-Jawi
    83 views7 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    83 views7 pages

    Materi TWEB

    Uploaded by

    Abu Hanifah Al-Jawi

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    Format XML <daftar-negara> <negara nama=Indonesia benua=Asia> <negara nama=Kongo benua=Afrika> <negara nama=Yunani benua=Eropa> </daftar-negara> Cara lain

    tanpa atribut <daftar-negara> <negara> <nama>Indonesia </nama> <benua>Asia </benua> </negara> <negara> <nama>Kongo </nama> <benua>Afrika </benua> </negara> <negara> <nama>Yunani </nama> <benua>Eropa </benua> </negara> </daftar-negara> Parsing XML <html><head> <script language="javascript"> var cek=false; if(window.XMLHttpRequest) deteksi browser non IE cek=new XMLHttpRequest(); menciptakan obyek ke var cek. else if(window.ActiveXObject) deteksi browser IE obyek ke var cek. function jupuk(sumber,letak) fungsi yang dipanggil dari button onClick. { cek.open("GET",sumber,true); membaca negara.xml. var xml_hasil=parsingXML(xml_asli); parsing xml bentuk asli ke dafra negaradengan memamnggil fungsi parsingXML document.getElementById(letak).innerHTML=xml_hasil; menampatkan hasil parsing } } cek.send(null); } function parsingXML(xml_opo){ fungsi untuk parsing format asli var elemen negara var hasil=""; var i,j,negoro; for(i=0;i<daftar_negara.length;i++) mengambail baris-baris dengan elemen negara { negoro=daftar_negara[i]; isi_negoro=negoro.attributes; mengambil atribut2 dari elemen negara for (j=0;j<isi_negoro.length;j++) mengambil atribut2 dr elemen negara { atribut=isi_negoro[j]; isi_atribut=atribut.nodeValue+"&nbsp"; mengambil nilai atribut dinambah spasi (&nbsp) hasil+=isi_atribut; menambahkan setiap nilai atributu ke var hasil } cek.onreadystatechange=function() { if(cek.readyState==4 && cek.status==200) { Koneksi OK membaca komplet . var xml_asli=cek.responseXML; transfer hasil pembacaan xml (masih bentuk asli)

    hasil+="<br>"; agar setiap elemen berganti baris } return hasil; mengebalikan hasil akhir ke fungsi parsingXML } </script> </head><body> <input type="button" value="hasil XML" onClick="jupuk('negara.xml','panggon')" > menjalankan fungsi jupuk dengan membawa nilai negara.xml dan panggon <div id='panggon'> disinilah hasil akan muncul </div> penempatan hasil pembacaan negara.xml </body></html> Transformasi Database ke XML <?php /*======================================*/ /*contoh transformasi database ke XML dengan xml merupakan hasi query dari 2 tabel*/ /*oleh : M. Guntara, STMIK AKAKOM - Yogyakarta*/ /*--------------------------------------------------- */ /*untuk menjalankan silakan buat database dan tabel sbb */ /*database :akakom*/ /*tabel : */ /*mahasiswa (nomhs,nama,kodejur) */ /*jurusan (kodejur,namajur) */ /*--------------------------------------------------- */ mysql_connect("localhost","root","root"); mysql_select_db(akakom); $x=mysql_query("select m.nomhs as mno,m.nama as mna,j.namajur as jna from mahasiswa m inner join jurusan j on m.kodejur=j.kodejur");

    $dok->appendChild($akar); while($y=mysql_fetch_array($x)) { $nomhs=$y[mno];$nama=$y[mna];$jurus=$y[jna]; $elemen= $dok->createElement('mahasiswa');// deklarasi elemn $akar->appendChild($elemen); //<=======tambahkan elemen $atribut1 = $dok->createAttribute('nomhs');//buat atribut1 $atribut1->value = $nomhs;//buat isi atribut $elemen->appendChild($atribut1);//<=======tambahkan atribut $atribut2 = $dok->createAttribute('nama');//buat atribut 1 $atribut2->value = $nama;//buat isi atribut $elemen->appendChild($atribut2);//<=======tambahkan atribut $atribut3 = $dok->createAttribute('jurusan');//buat atribut 3 $atribut3->value = $jurus;//buat isi atribut $elemen->appendChild($atribut3);//<=======tambahkan atribut

    } $dok->appendChild($akar); echo 'Jumlah ukuran: ' . $dok->save("mhs_atribut.xml") . ' bytes';//rekam ke xml dan tampikan ukuran ?> Konsep Dasar JSON JSON sendiri singkatan dari JavaScript Object Notation. JSON_adi adalah nama variable pada javascript yang menunjukan bahwa variable tersebut berbentuk Object JSON karena terdapat kurung kurawal {} . Contoh : var JSON_adi = { nama:'adiputra', umur:21, status_nikah:false,

    $dok= new DOMDocument('1.0', "UTF-8"); $akar=$dok->createElement('daftar-mahasiswa');

    hobi:['coding','main game','ngetik'] };

    Analisis Program Chat File ambilChat1.php

    Cara pemanggilannya : document.write (JSON_adi.nama +" berumur "+JSON_adi.umur+" suka "+JSON_adi.hobi[0]); Pada code diatas, kita dapat membuat data tipe integer, Boolean dan juga array. Didalam array kita juga dapat membuat data object lagi berikut contohnya : var JSON_adi = { nama:'adiputra', umur:21, status_nikah:false, hobi:['coding','main game','ngetik'], teman:[ {nama:'anas', universitas:'UGM'}, {nama:'wahyu', universitas:'UNIKOM'}, {nama:'adesetio', universitas:'UGM'}, {nama:'nano', universitas:'UNIKOM'} ] }; Cara pemanggilannya : document.write(JSON_adi.nama +" berumur "+JSON_adi.umur+" suka "+JSON_adi.hobi[0]+ "<br />"); document.write("List teman : <br />"); document.write("<ol>") for(var i=0; i<JSON_adi.teman.length; i++){ document.write("<li>" + JSON_adi.teman[i].nama + " kuliah di " + JSON_adi.teman[i].universitas + "</li>"); } document.write("</ol>") <?php // Koneksi ke database mysql_connect("localhost","root","alircute"); mysql_select_db("ngrumpi_db") or die ("DATABBASE GAGAL"); //ambil data nama pengirim pesan,pesannya,waktu kirim & penanda nomor pesan $nama = $_GET['nama']; $pesan = $_GET['pesan']; $waktu = date("H:i"); $akhir = $_GET['akhir']; $json = "{"; if($akhir==0){ //penanda jk user baru masuk ke dalam chat //mengambil nomor id terakhir di tabel ngrumpi_tb $nomor = mysql_query("select nomor from ngrumpi_tb order by nomor desc limit 1"); //alternatifnya bisa pake "select max(nomor) nomor from ngrumpi_tb" $n = mysql_fetch_array($nomor); $no = $n['nomor'] + 1; //membuat isi objek untuk json berisi objek pesan yg di dalamnya ada nomor id,nama pengirim,teks pesan, dan waktu $json .= '"pesan":[ {'; $json .= '"id":"'.$no.'", "nama":"Admin", "teks":"Selamat datang di kamar Ngrumpi", "waktu":"'.$waktu.'" }]'; //Menyimpan data ke database $masuk = mysql_query("insert into ngrumpi_tb values(null,'Admin','$nama bergabung dalam chat','$waktu')");

    }else{ //jika mengetikan pesan baru maka ditambahkan ke tabel if($pesan){ $masuk = mysql_query("insert into ngrumpi_tb values(null,'$nama','$pesan','$waktu')"); } //Menampilkan semua pesan yg tersimpan setelah user login ($akhir => penanda nomor id awal dari user login) $query = mysql_query("select * from ngrumpi_tb where nomor > $akhir"); //Menyimpan semua pesan tsb ke dlm var json sbg object $json .= '"pesan":[ '; while($x = mysql_fetch_array($query)){ $json .= '{'; $json .= '"id":"'.$x['nomor'].'", "nama":"'.$x['nama'].'", "teks":"'.$x['pesan'].'", "waktu":"'.$x['waktu'].'" },'; } $json = substr($json,0,strlen($json)-1); $json .= ']'; } $json .= '}'; //menampilkan isi objek json echo $json; ?> File ngrumpi1.php <html> <head> <title> Ngrumpi 1.0 <?php

    //Scrip sederhana untuk ngrumpi . Modified By M Guntara-STMIK AKAKOM //database : ngrumpi_db //tabel : ngrumpi_tb //nomor int (3) prim auto_increment //nama varrchar(30) //pesan varchar(160); //waktu varcha(5); ?> </title> <script> //Membuat var ajaxku yg bertipe object berfungsi utk menyimpan fungsi dari ajax apkh mnggunakan ActiveXObject (IE) atau XMLHttpRequest (Non IE) var ajaxku = buatAjax(); var tnama = 0; var pesanakhir = 0; var timer; //fungsi utk mendisable textbox nama jk sudah login & mengambil pesan yg tersimpan dari server function taruhNama(){ if(tnama==0){ document.getElementById("in_nama").disabled = "true"; tnama = 1; }else{ document.getElementById("in_nama").disabled = ""; tnama = 0; } ambilPesan(); } //fungsi utk mengetahui jenis browser yg digunakan function buatAjax(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else if(window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHTTP");

    } } //fungsi utk mengambil pesan dari server function ambilPesan(){ //mengambil nama user yg login namaku = document.getElementById("in_nama").value if(ajaxku.readyState == 4 || ajaxku.readyState == 0){ //cek status dari ajax klo tdk ada Error ajaxku.open("GET","ambilChat1.php?akhir="+pesanakhir+"&nama="+nama ku,true); //membuka dokumen ambilChat1.php ajaxku.onreadystatechange = aturAmbilPesan; //set status dari fngsi aturAmbilPesan() ajaxku.send(null); } } function aturAmbilPesan(){ if(ajaxku.readyState == 4){ //cek status 4 = siap & tdk ada Error var obrol = document.getElementById("letak_obrol"); //ambil isi elemen letak_obrol (isi obrolannya) var data = eval("("+ajaxku.responseText+")"); //ambil respon dari pengiriman file ambilChat1.php terjemahkan sbg Array //ini perulangan utk membaca Array for(i=0;i<data.pesan.length;i++){ aku=data.pesan[i].nama; //ambil nama pengirim pesan //pembedaan warna antara user,admin dan org lain yg sedang ngobrol dg user if(aku==document.getElementById("in_nama").value){ warna="<font color=blue> "; //user berwarna biru aku+="(saya)"; //tambahkan kata (saya) }else if(aku=="Admin") warna="<font color=brown>"; //admin berwarna coklat else

    warna="<font color=red>";

    //org lain berwarna merah

    //ini pengaturan pemberian warnanya obrol.innerHTML +=warna+aku+"</font> "; obrol.innerHTML += "<font size=1>("+data.pesan[i].waktu+")</font> "; obrol.innerHTML += " : "+data.pesan[i].teks+"<br>"; obrol.scrollTop = obrol.scrollHeight; pesanakhir = data.pesan[i].id; } } timer = setTimeout("ambilPesan()",1000);//agar penerima pesan tdk perlu refreh halaman } //fungsi utk mengirim pesan chat function kirimPesan(){ pesannya = document.getElementById("in_pesan").value; //mengambil isi pesannya namaku = document.getElementById("in_nama").value; //mengambil nama user //cek jika pesan dan nama user tdk kosong if(pesannya != "" && namaku!=""){ //kirimkan pesan dg ajax ke halaman ambilChat1.php ajaxku.open("GET","ambilchat1.php?akhir="+pesanakhir+"&nama=" +namaku+"&pesan="+pesannya,true); ajaxku.onreadystatechange = aturAmbilPesan; ajaxku.send(null); document.getElementById("in_pesan").value = ""; }else{ //masih kosong tampilkan pesan berikut alert("Nama atau pesan masih kosong"); } } //fungsi utk default submit pada form shg jika form ditekan enter mka akan menjalankan fungsi ini function blockSubmit() {

    kirimPesan(); //memanggil fungsi kirimPesan() return false; } </script> </head> Ini utk tampillannya <body> Nama : <input type=text name=in_nama id=in_nama> <input type=button value=login id=tmbl_login onclick=taruhNama()><p> Bagian ini utk menampilkan teks nama user login <div id="letak_obrol" style="height: 300px; width: 500px; overflow: auto; background-color: lightyellow; border: 1px solid #555555;"> </div> bagian ini utk menampilkan pesan chat

    //blok javascript <script type="text/javascript"> $(document).ready(function(){ fungsi ini dijalankan ketika loading dokumen $("button").click(function(){ fungsi ketika sebuah button diklik //mengambil isi elemen in_nomhs var nom=document.getElementById('in_nomhs').value; //mengirimkan isi elemen tsb dg ajax ke file cari.php $.ajax({url: "cari.php?nomhs="+nom, success:function(hasil){ $("div").html(hasil); menuliskan hasil ke tag div }}); });}); </script> //akhir blok </head> <body> No mhs <input type="text" id="in_nomhs"> <button>Cari</button> elemen button yg akan dipanggil <div>Hasil cari Akan muncuk disini</div> tempat menampung hasil pencarian </body></html> Selain berfungsi utk pencarian data di database jQuery jga bisa digunakan utk membaca isi file text dg perintah: $("div").load('jajal.txt'); Script utk efek menggulung isi halaman: $(".munggah").click(function(){ $(".layar").slideToggle("slow"); });

    <form onSubmit="return blockSubmit();"> Pesan : <input type=text name=in_pesan id=in_pesan size=50> <input type=button value="kirim" onclick="kirimPesan()"> </form> Form utk mengirimkan pesan chat </body> </html> Sekilas JQuery Secara umum JQuery terdiri dari 3 komponen utama : - Import dari file jquery.js - Blok javascript - Tanda $(elemen) utk memanggil elemen Contoh penggunaan JQuery dlm database: <html> <head> <script type="text/javascript" src="jquery.js"></script> memangil file jquery.js

    Script utk menyembunyikan elemen $("div").click(function(){ $(this).hide(1000); }); Script utk mengubah atribut tag html, misal ukuran dari image $("button").click(function(){ $("img").attr("width","100","height","50"); }); Script utk menambahkan text pada paragraph (tag <p> , tag <div>, dsb) $("button").click(function(){ $("p").after("<p>Hello world!</p>"); }); Script utk mengubah isi text $("button").click(function(){ $("p").text("Ben sesuk dadi wong gedhe-- dudu gedhe wetenge loo"); $("div").text("iyo mbah wis ndang nginang kono"); });

    You might also like