Assalamualaikum
Kali ini saya akan memposting tugas untuk presentasi
teori mata kuliah Pemrograman Mobile yang di ampu oleh bapak M.Ropianto. semoga
tulisan ini dapat bermanfaat bagi pembaca dan khususnya bagi saya sendiri.
Pengertian ajax
AJAX
memiliki kepanjangan Asynchronous Javascript And XML, pada dasarnya ajax
menggunakan XMLHttpRequest object Javascript untuk membuat
request ke server tanpa melakukan refresh halaman website. Yang dibutuhkan agar
ajax dapat berjalan adalah javascript harus di enable pada browser yang
digunakan. Walaupun javascript merupakan dasar dari Ajax, dimana javascript
sangat susah pada implementasi dan maintenance, tetapi Ajax memiliki struktur
pemrograman yang lebih mudah untuk dipahami. Anda tinggal membuat object
XMLHttpRequest dan memastikan object tersebut terbentuk dengan benar. Kemudian
menentukan kemana hasilnya akan ditampilkan atau dikirim. AJAX dapat
diintegrasikan dengan server side programming seperti PHP, ASP, JSP dll.
Perhatikan mekanisme proses AJAX menggunakan PHP berikut ini
Pada
mekanisme di atas, proses berawal dari web client. Web client merequest sebuah
halaman PHP ke server melalui Javascript, selanjutnya server akan merespon
dan menjalankan script PHP. Script PHP akan menghasilkan respon dalam bentuk
XML dan data XML tersebut akan dikirim kembali ke web client untuk diolah oleh
Javascript. Hasil olahan javascript tersebut akhirnya akan ditampilkan di web
client sebagai output tanpa harus merefresh halaman web. Berbeda
dengan mekanisme
biasa dalam menjalankan PHP seperti yang ditunjukkan pada gambar berikut
Pada
mekanisme biasa, respon yang dihasilkan oleh server berupa HTML yang
mengakibatkan halaman web akan merefresh tampilan. Dilihat dari sisi efisiensi,
hal ini tentu kurang sekali. Sedangkan kekurangan AJAX dibandingkan mekanisme
biasa adalah memiliki tingkat kesukaran pemrograman yang lebih tinggi, karena
programmer harus menguasai 4 hal yaitu HTML-(XHTML), Javascript, XML dan juga
server side programming seperti PHP dan lain sebagainya.
Perbedaan
metode post dengan get
Metode
POST
Menyembunyikan variabel pada URL
Tidak ada batasan panjang string
Menggunakan $_POST dalam
pengambilan variabel
Lebih sering digunakan pada input
data melalui form
Penggunaan pada data-data penting
seperti password
Metode
GET
Menampilkan variabel pada URL
batasan panjang string sampai
2047 karakter
Menggunakan $_GET dalam
pengambilan variabel
Lebih sering digunakan untuk
input data melalui link
Penggunaan pada data-data yang
kurang penting
Dasar
ajax get & post
Sebuah
data dari form dapat di-submit (disampaikan) melalui dua metode diatas. Kedua
metode tersebut sebenarnya memiliki tujuan yang sama, perbedaannya terletak
pada cara mengirimkan data yang telah diterima. Jika metode GET menampilkan
nilai data pada url untuk mengirimkan data, maka metode POST menyembunyikan
nilai data tersebut pada url.
Form
mengirimkan informasi dengan cara menambahkan data pada url dalam bentuk string
Query yang terdiri dari koding nama_data=nilai_data secara
berpasangan. String ini mengandung nama dan nilai data, yang di-pisah dengan
tanda &, sedangkan jika data mengandung spasi maka akan di pisah dengan
tanda plus +.
Contoh
URL:
?nama=andi&alamat=batam
Function
get
Untuk penulisan dari function .get ini bisa
diperhatikan sebagai berikut :
$.get(url,callback);
Pada
penulisan function .get di
atas di gunakan untuk menerima data dengan function .get dan memiliki
parameter url dan parameter callback. pada url, letakkan url di tempat data akan di request. dan
pada callback letakkan function yang akan di jalankan jika function $.get
sukses .
Selanjutnya buat sebuah contoh untuk penerimaan
data oleh function .get.
Pertama buat sebuah
file php yang sudah terkoneksi dengan ibrary jquery nya, seperti biasa saat akan
menggunakan JQuery/.
File
diberinama functionget.php
<html>
<head>
<script
type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$.get('tes.php',function(data){
$("#tampil").html(data);
});
});
</script>
</head>
<body>
<div
id="tampil"></div>
</body>
</html>
Kemudian buat satu buah file php lagi dengan nama
tes.php dan isi dengan koding ini:
<?php
echo "hey, selamat belajar di STT Ibnu
Sina";
?>
Function
post
Untuk cara penulisan dari function .post() ini:
$.post(url,data,callback);
Untuk
function .post bisa melakukan men-submit data dengan menambahkan parameter data, Ini berarti memungkinkan untuk
melakukan pengiriman
data, pada
parameter data letakkan data yg akan di submit.Sebagai contoh, buat sebuah file php, beri
nama file
dengan
functionpost.php
<html>
<head>
<script
type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#tombol").click(function(){
var
nama = $("#nama").val();
$.post('tes1.php',{nama:nama},function(data){
$("#tampil").html(data);
});
});
});
</script>
</head>
<body>
<input
type="text" id="nama">
<button
id="tombol">tombol</button>
</body>
</html>
Perhatikan pada file functionpost.php, di sini di buat sebuah penginputan data yang
mana ketika tombol di klik maka nilai value dari #nama akan di simpan sebagai variabel nama,
dan variabel nama ini yg akan di jadikan
sebagai data yang akan di
submit ke file tes1.php. dan jika function .post sukses maka data akan di
tampilkan pada element #tampil .
Kemudian buat file ph dengan
nama tes1.php
dengan isi koding sebagai berikut:
<?php
echo $_POST['nama'];
?>
Wassalamualaikum
Dosen Pembimbing:
Nama :
M.Ropianto, S.Kom,M.Kom
NIDN :
102867804
Status :
Dosen/Kaprodi Teknik Informatika STT Ibnu Sina
Pengampuh Matakuliah : Pemrograman Mobile
Tidak ada komentar:
Posting Komentar