Pengertian AJAX Dan JQUERY

Pengertian AJAX
AJAX adalah singkatan dari Asynchronous Javascript and XML yang memanfaatkan XMLHttpRequest

sebagai sarana komunikasi dengan server side script. Dengan AJAX memungkinkan kita untuk dapat
menerima dan mengirim data/informasi dalam format JSON, XML, HTML dan TEXT tanpa perlu melakukan
refresh halaman web.
Pada prinsipnya AJAX menggunakan bahasa javascript namun dalam penggunanya kode javascript cukup sulit
bagi pemula sehingga lebih mudah jika kita menggunakan library javascript yaitu jQuery, untuk lebih jelasnya
simak pembahasan berikut ini:
Persiapan
Pada tutorial kali ini kita belajar ajax dasar menggunakan jQuery dan PHP sehingga ada beberapa hal yang
perlu dipersiapkan yaitu:
 Download jQuery-3.5.1
 Install aplikasi Xampp
Hingga pada saat artikel ini ditulis jQuery versi terakhir adalah versi 3.5.1 kalian bisa juga menggunakan versi
terbaru yang tersedia disitus resminya.
Xampp adalah aplikasi web server yang menyediakan modul pengembangan web

seperti apache dan mysql dan beberapa lainnya. Pastikan aplikasi ini sudah terinstal di komputer kalian jika
belum, ikuti caranya pada link yang saya cantumkan di atas.
AJAX dengan jQuery dan PHP
A. Penggunaan Metode Load()
Metode load() adalah metode yang tersedia di dalam library jQuery yang digunakan untuk memuat data dari
server yang kemudian dapat ditempatkan pada elemen tertentu di halaman website.
Bentuk Umum:
$(selector).load(URL,data,callback);
Langkah 1 : Buat file demo.php
<?php
echo "Info ini dimuat dari file demo.php";

?>
File demo.php berfungsi sebagai file yang akan di muat dengan AJAX menggunakan metode load().
Langkah 2 : Buat file index.php
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="tampil">Informasi akan ditampilkan disini</div>
<button id="btn_tampil">Tampilkan</button>
<script>
$(document).ready(function(){
$('#btn_tampil').click(function(){
$('#tampil').load('demo.php');
});
});
</script>
</body>
</html>
File index.php berfungsi sebagai file utama yang akan memuat informasi yang di request menggunakan
metode load() pada file demo.php.
Perhatikan pada bagian <head> kita menyisipkan file jquery-3.5.1.min.js yang berada di dalam satu
folder project di htdocs.
Pada contoh ini kita menggunakan atribut ID yang ditandai dengan tanda # kalian juga bisa memakai
atribut class dengan tanda . (titik) sebagai selector pada saat dipanggil memakai jQuery.
Elemen yang dipakai untuk menampilkan data yang diload adalah pada elemen <div> dengan atribut
id=’tampil’, Saat tombol dengan atribut id=’btn_tampil’ di klik maka isi dari file demo.php akan dimuat ke
dalam elemen id=’tampil’.
B. Penggunaan Metode get(),post() dan ajax()

Metode get() dan post() serta ajax () merupakan metode yang digunakan meminta (request) data dari sumber
lain yang ditentukan. Metode get() digunakan untuk mendapatkan data dari server dan dapat mengembalikan
data yang di-chache. Sedangkan untuk metode post() digunakan untuk mendapatkan beberapa data dari server,
namun metode post() tidak menyimpan data. Untuk metode ajax() juga sama namun penggunaannya lebih
kompleks. Secara pribadi saya sering menggunakan metode ajax() daripada 2 metode lainnya. Berikut ini
contoh dari masing-masing metode:
Metode jQuery get()
Metode get() akan meminta data dari server dengan jenis HTTP GET dengan bentuk umum sebagai berikut:
$.get (URL,callback);
Dari metode get dapat dilihat ada dua perameter yaitu URL dan callback, parameter URL digunakan untuk
menentukan URL yang diminta, sedangkan parameter callback adalah fungsi yang akan dieksekusi saat
permintaan berhasil.
Contoh:
Langkah 1 : Buat file get.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script>
$.get('info.php',function(data, status){
alert('Data : '+data+'\nStatus: '+status);
});
});
});
</script>
</body>
</html>
Langkah 2 : buat file baru dengan nama info.php
<?php
echo "Info ini dimuat dari file info.php";
?>
Langkah 3 : jalnkan file get.html melalui localhost
Saat tombol Tampilkan di klik maka browser akan menampilkan jendela pemberitahuan dengan menampilkan
data yang diambil dari file eksternal PHP dan menampilkan status sukses.
Metode jQuery post()

Bentuk umum penggunaan metode post() adalah sebagai berikut:
$.podt(URL,data,callback);
Pada metode post sedikit ada tambahan pada parameter opsional dimana kita dapat menentukan beberapa data
yang akan dikirim bersamaan saat permintaan (request) dilakukan.
Contoh:
Langkah 1 : buatlah file post.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script>
$.post('info.php',{nama : 'Setiawan Dimas', alamat : 'Jl Panjaitan no
88'},
function(data, status){
alert('Data : '+data+'\nStatus: '+status);
});
});
});
</script>
</body>
</html>
Langkah 2 : Buatlah file info.php
<?php
$nama=$_POST['nama'];
$alamat=$_POST['alamat'];
echo "Nama : ".$nama;
echo "Alamat : ".$alamat;
?>
Langkah 3 : Jalankan file post.html melalui localhost
Dapat dilihat dengan metode post kita dapat mengirim beberapa data ke server lalu ditampilkan.
Metode jQuery ajax()
Semua metode ajax jquery menggunakan metode ajax(), metode ini kebanyakan digunakan untuk permintaan
(request) data ke server disaat metode lain tidak dapat digunakan.
$.ajax({URL,data,cache,success})
Metode ajax sebetulnya memiliki banyak parameter kalian bisa membaca pada referensi di w3school. Untuk
contoh penggunannya saya akan contohkan dengan menggunakan database, simak pembahasannya dibawah:
Bekerja Dengan Database
Pada bagian ini dalam sesi belajar ajax Saya akan sedikit mencontohkan bagaimana penggunaan AJAX di
dalam aplikasi web yang sudah terhubung dengan database. Basis data yang dipakai adalah MySQL, ada dua
contoh yang akan saya bagikan yang pertama penggunaan AJAX pada form dan ajax pada komponen
combobox (tag select).
Penggunaan AJAX pada form
Langkah 1 : Buat database
create database belajar_ajax;
Langkah 2 : Membuat tabel
create table mahasiswa (
nik char(10) NOT NULL PRIMARY KEY,
nama VARCHAR(50) NOT NULL,
jurusan char(2)NOT NULL
);
Langkah 3 : Membuat file koneksi.php
<?php
$host="localhost";
$user="root";
$password="";
$db="belajar_ajax";
$kon = mysqli_connect($host,$user,$password,$db);
if (!$kon){
die("Koneksi gagal:".mysqli_connect_error());
}
?>
File koneksi berfungsi untuk membuat koneksi ke database dengan beberapa konfigurasi pada host, user,
password dan database yang digunakan. Pastikan konfigurasi ini kalian sesuaikan dengan yang kalian pakai.
Langkah 4 : Membuat file index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form method="post" id="form_mahasiswa">
<label>NIK </label>
<input type="number" name="nik"><br>
<label>Nama </label>
<input type="text" name="nama"><br>
<label>Jurusan</label>
<select name="jurusan">
<option value="TI">Teknik Informatika</option>
<option value="TK">Teknik Komputer</option>
<option value="SI">Sistem Informasi</option>
<option value="KA">Komputerisasi Akuntansi</option>
<option value="MI">Manajemen Informatika</option>
</select>
</form>
<hr>
<div id="tampil_data"></div>
<script>
$('#tampil_data').load("tampil.php");
var data = $('#form_mahasiswa').serialize();
$.ajax({
type : 'POST',
url : "tambah.php",
data: data,
cache : false,
success : function(data){
});
});
});
</script>
</body>
</html>
File index berfungsi sebagai halaman utama saat program dijalankan dari localhost. Dengan menampilkan
form sederhana untuk data mahasiswa.
Langkah 5 : Membuat file tambah.php
<?php
//Include file koneksi ke database
include "koneksi.php";
//menerima nilai dari kiriman form
$nik=$_POST["nik"];
$nama=$_POST["nama"];
$jurusan=$_POST["jurusan"];
//Query input menginput data kedalam tabel mahasiswa
$sql="insert into mahasiswa (nik,nama,jurusan) values('$nik','$nama','$jurusan')";
//Mengeksekusi/menjalankan query diatas
$hasil=mysqli_query($kon,$sql);
?>
Fungsi file tambah.php adalah menerima data yang dikirim dari form ajax yang selanjutnya kita insert
kedalam tabel mahasiswa.
Langkah 6 : Membuat file tampil.php
<table border='1'>
<tr>
<th>No</th>
<th>NIK</th>
<th>Nama</th>
<th>Jurusan</th>
</tr>
<?php
$hasil=mysqli_query($kon,"select * from mahasiswa order by nik desc");
$no=0;
while ($data = mysqli_fetch_array($hasil)):
$no++;
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $data['nik']; ?></td>
<td><?php echo $data['nama']; ?></td>

<td><?php echo $data['jurusan']; ?></td>
</tr>
<?php endwhile;?>
</table>
File tampil.php berfungsi untuk menampilkan setiap data mahasiswa dari database kedalam aplikasi. File ini
kita tampilkan menggunakan metode load() yang sudah kita bahas pada materi diatas.
Langkah 7 : Uji coba
Dapat dilihat pada demo diatas saat form di submit halaman browser tidak melakukan refresh karena semua
proses terjadi dibelakang layar hal ini karena data di kirim ke server menggunakan AJAX.
Implementasi Ajax Pada Combobox
Pada bagian terakhir seri belajar ajax saya ingin mencontohkan penggunaan AJAX pada komponen combobox,
dimana saat pengguna memilih salah satu item di combobox maka secara otomatis akan menampilkan
data/informasi berdasarkan pilihan item tersebut.
Langkah 1 : Menambahkan beberapa contoh data berikut ke dalam tabel mahasiswa.
INSERT INTO mahasiswa (nik,nama,jurusan)
VALUES ('135410156','Ahmad Riko','TI'),

('135610157','Dahlan Iskan','SI'),
('135410189','Wawan Setiawan','MI'),
('135310156','Safitri Ayu','SI'),
('135310150','Rian Hidayat','KA'),
('135510920','Dani Hermawan','MI'),
('135518322','Nita Daniyatun','TK'),
('135518900','Mili Wilian','TI'),
('135510190','Marshel Saraun','TK'),
('135510191','Nacha Saraun','TI'),
('135558944','Bayu Mandalika','MI'),
('158984545','Juan Burnama','KA'),
('158549583','Candra Sidauruk','TK'),
('136349343','Kory Ubi','SI'),
('147343998','Chika Lestari','SI');
Langkah 2 : Buat file index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<label>Pilih Jurusan : </label>
<select name="jurusan" id="jurusan">
<option value="TI">Teknik Informatika</option>
<option value="TK">Teknik Komputer</option>
<option value="SI">Sistem Informasi</option>
<option value="KA">Komputerisasi Akuntansi</option>
<option value="MI">Manajemen Informatika</option>

</select>
<hr>
<div id="tampil_data"></div>
<script>
$('#jurusan').bind('change', function () {
var jurusan=$("#jurusan").val();
$.ajax({
method: 'POST',
url : "tampil.php",
data: {jurusan:jurusan},
success : function(data){
$('#tampil_data').html(data);
});
});
});
</script>
</body>
</html>
File index.html berfungsi sebagai file utama yang menampilkan combobox jurusan, saat pengguna memilih
pilihan item yang lain maka event change akan terjadi dengan mengambil nilai pada combobox jurusan dan
kemudian mengirimnya ke server menggunakan metode ajax().
Langkah 3 : Buat file tampil.php
<table border='1'>
<tr>
<th>No</th>
<th>NIK</th>
<th>Nama</th>
<th>Jurusan</th>
</tr>
<?php
if (isset($_POST['jurusan'])) {
$jurusan=$_POST['jurusan'];
}else {
$jurusan='';
$hasil=mysqli_query($kon,"select * from mahasiswa where jurusan='".$jurusan."'order by nik
desc");
$no=0;
while ($data = mysqli_fetch_array($hasil)):
$no++;
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $data['nik']; ?></td>
<td><?php echo $data['nama']; ?></td>
<td><?php echo $data['jurusan']; ?></td>
</tr>
<?php endwhile;?>
</table>
File tampil berfungsi untuk menampilkan data mahasiswa berdasarkan jurusan yang dipilih dari combobox.
Langkah 4 : Uji coba
Dapat diliha dari hasil output diatas data yang ditampilkan di dalam tabel akan menyesuaikan berdasarkan
pilihan jurusan yang dipilih.
Kesimpulan
Sekian pembahasan artikel kali ini mengenai belajar AJAX dasar dengan menggunakan jQuery dan PHP serta
database MySQL yang sangat cocok untuk kalian para pemula. Dengan demikian dapat saya simpulan ajax
adalah suatu teknik yang sangat bagus untuk aplikasi yang responsif karena proses permintaan atau mengirim
data ke server dilakukan disisi belakang layar sehingga tidak terjadi reload halaman pada browser.
Yang kedua adalah penggunaan ajax tidak terbatas hanya untuk form maupun combobox, bisa juga kalian
implementasi pada komponen-komponen html lainnya sesuai dengan kebutuhan aplikasi yang dibuat.

Pengertian AJAX Dan JQUERY

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pengertian AJAX Dan JQUERY

Diunggah oleh

Hak Cipta:

Format Tersedia

Pengertian AJAX

AJAX adalah singkatan dari Asynchronous Javascript and XML yang memanfaatkan XMLHttpRequest

Xampp adalah aplikasi web server yang menyediakan modul pengembangan web

AJAX dengan jQuery dan PHP

A. Penggunaan Metode Load()

Langkah 1 : Buat file demo.php

echo "Info ini dimuat dari file demo.php";

<script type="text/javascript" src="jquery-3.5.1.min.js"></script>

<div id="tampil">Informasi akan ditampilkan disini</div>

B. Penggunaan Metode get(),post() dan ajax()

Metode jQuery get()

Langkah 1 : Buat file get.html

<script type="text/javascript" src="jquery-3.5.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css">

alert('Data : '+data+'\nStatus: '+status);

Langkah 2 : buat file baru dengan nama info.php

echo "Info ini dimuat dari file info.php";

Langkah 3 : jalnkan file get.html melalui localhost

Metode jQuery post()

Langkah 1 : buatlah file post.html

<script type="text/javascript" src="jquery-3.5.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css">

$.post('info.php',{nama : 'Setiawan Dimas', alamat : 'Jl Panjaitan no

alert('Data : '+data+'\nStatus: '+status);

Langkah 2 : Buatlah file info.php

echo "Nama : ".$nama;

echo "Alamat : ".$alamat;

Langkah 3 : Jalankan file post.html melalui localhost

Metode jQuery ajax()

Penggunaan AJAX pada form

Langkah 1 : Buat database

create database belajar_ajax;

Langkah 2 : Membuat tabel

create table mahasiswa (

nik char(10) NOT NULL PRIMARY KEY,

nama VARCHAR(50) NOT NULL,

jurusan char(2)NOT NULL

Langkah 3 : Membuat file koneksi.php

<script type="text/javascript" src="jquery-3.5.1.min.js"></script>

<form method="post" id="form_mahasiswa">

<input type="number" name="nik"><br>

<input type="text" name="nama"><br>

<option value="TI">Teknik Informatika</option>

<option value="TK">Teknik Komputer</option>

<option value="SI">Sistem Informasi</option>

<option value="KA">Komputerisasi Akuntansi</option>

<option value="MI">Manajemen Informatika</option>

var data = $('#form_mahasiswa').serialize();

Langkah 5 : Membuat file tambah.php

//Include file koneksi ke database

//menerima nilai dari kiriman form

$sql="insert into mahasiswa (nik,nama,jurusan) values('$nik','$nama','$jurusan')";

//Mengeksekusi/menjalankan query diatas

$hasil=mysqli_query($kon,"select * from mahasiswa order by nik desc");

while ($data = mysqli_fetch_array($hasil)):

<td><?php echo $no; ?></td>

<td><?php echo $data['nik']; ?></td>

<td><?php echo $data['nama']; ?></td>

Langkah 7 : Uji coba

Implementasi Ajax Pada Combobox

Langkah 1 : Menambahkan beberapa contoh data berikut ke dalam tabel mahasiswa.

INSERT INTO mahasiswa (nik,nama,jurusan)

VALUES ('135410156','Ahmad Riko','TI'),