PHP - Pengenalan AJAX

Halo, para pengembang web yang bersemangat! Hari ini, kita akan melihat dunia yang menarik dari AJAX dengan PHP. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk memandu Anda dalam perjalanan ini, bahkan jika Anda belum pernah menulis baris kode sebelumnya. Jadi, ambil secangkir kopi (atau teh, jika itu yang Anda sukai), dan mari kita mulai!

PHP - AJAX Introduction

Apa Itu AJAX?

AJAX adalah singkatan dari Asynchronous JavaScript dan XML. Jangan biarkan istilah ini yang panjang menakutkan Anda! Sebenarnya teknologi ini sangat menarik dan membuat halaman web menjadi lebih interaktif dan user-friendly.

Bayangkan Anda di restoran. Tanpa AJAX, setiap kali Anda ingin melihat menu, Anda harus meninggalkan meja Anda, pergi ke kassa, meminta menu, dan kemudian kembali. Dengan AJAX, itu seperti memiliki pelayan yang dapat membawa Anda informasi yang Anda butuhkan tanpa mengganggu pengalaman makan Anda.

Dalam istilah web, AJAX memungkinkan halaman web Anda untuk meminta dan menerima data dari server tanpa memuat ulang seluruh halaman. Itu seperti magi, tapi lebih baik karena kita bisa memahami bagaimana cara kerjanya!

Cara Kerja AJAX

Suatu peristiwa terjadi di halaman web (seperti mengklik tombol)
JavaScript membuat objek XMLHttpRequest
Objek XMLHttpRequest mengirimkan permintaan ke server web
Server memproses permintaan
Server mengirimkan tanggapan kembali ke halaman web
JavaScript membaca tanggapan
JavaScript melakukan tindakan yang sesuai berdasarkan tanggapan

Apa Yang Diperlukan Untuk Menjalankan AJAX?

Untuk menjalankan AJAX, Anda memerlukan tiga komponen utama:

Browser web yang mendukung JavaScript dan objek XMLHttpRequest
Server web (seperti Apache) yang dapat memproses permintaan AJAX
Bahasa pemrograman sisi server (dalam kasus kami, PHP)

Berita baik! Sebagian besar browser modern mendukung AJAX, jadi kita sudah setengah jalan!

Menyiapkan Lingkungan Anda

Sebelum kita mulai mengoding, mari pastikan kita sudah siap:

Instal XAMPP (termasuk server Apache dan PHP)
Buat folder baru di direktori htdocs dari instalasi XAMPP Anda
Buka editor teks favorit Anda (saya sendiri mencintai Visual Studio Code)

Sekarang kita sudah siap, mari kita menulis beberapa kode!

Permintaan AJAX Pertama Anda

mari kita mulai dengan contoh sederhana. Kita akan membuat tombol yang, saat diklik, akan mengambil pesan salam dari server tanpa memuat ulang halaman.

Pertama, buat file HTML bernama index.html:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Permintaan AJAX Pertama</title>
</head>
<body>
<h1>Selamat Datang di AJAX!</h1>
<button onclick="getGreeting()">Dapatkan Salam</button>
<p id="greetingText"></p>

<script>
function getGreeting() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("greetingText").innerHTML = this.responseText;
}
};
xhttp.open("GET", "greeting.php", true);
xhttp.send();
}
</script>
</body>
</html>

Sekarang, mari kitauraikan ini:

Kita memiliki tombol dengan event onclick yang memanggil fungsi getGreeting().
Dalam fungsi getGreeting(), kita membuat objek XMLHttpRequest.
Kita menyiapkan fungsi untuk menghandle tanggapan dari server.
Kita membuka koneksi ke greeting.php dan mengirimkan permintaan.

Selanjutnya, buat file PHP bernama greeting.php:

<?php
$greetings = array("Hello!", "Bonjour!", "Hola!", "Ciao!", "Konnichiwa!");
echo $greetings[array_rand($greetings)];
?>

Skrip PHP ini hanya mengembalikan salam acak dari array.

Saat Anda mengklik tombol, JavaScript mengirim permintaan ke greeting.php, yang menjawab dengan salam acak. JavaScript kemudian memperbarui halaman dengan salam ini, semua tanpa memuat ulang halaman!

Mengirim Data ke Server

Sekarang kita sudah menguasai pengambilan data, mari kita coba mengirim data ke server. Kita akan membuat formulir sederhana yang mengirimkan nama ke server dan mendapat salam pribadi kembali.

Perbarui index.html Anda:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Form AJAX</title>
</head>
<body>
<h1>Salam Pribadi</h1>
<input type="text" id="nameInput" placeholder="Masukkan nama Anda">
<button onclick="getPersonalizedGreeting()">Dapatkan Salam</button>
<p id="greetingText"></p>

<script>
function getPersonalizedGreeting() {
var name = document.getElementById("nameInput").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("greetingText").innerHTML = this.responseText;
}
};
xhttp.open("POST", "personalized_greeting.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name=" + name);
}
</script>
</body>
</html>

Dan buat file baru personalized_greeting.php:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$greetings = array("Hello", "Bonjour", "Hola", "Ciao", "Konnichiwa");
$greeting = $greetings[array_rand($greetings)];
echo "$greeting, $name!";
}
?>

Dalam contoh ini, kita menggunakan permintaan POST untuk mengirimkan nama ke server. Skrip PHP kemudian menggunakan nama ini untuk membuat salam pribadi.

Metode AJAX Umum

Berikut adalah tabel metode AJAX yang umum digunakan:

Metode	Deskripsi
open()	Menentukan jenis permintaan dan URL
send()	Mengirim permintaan ke server
setRequestHeader()	Menambahkan pasangan label-nilai ke header yang dikirim

Kesimpulan

Selamat! Anda baru saja mengambil langkah pertama ke dunia AJAX dengan PHP. Kita telah melihat dasar pengiriman dan penerimaan data secara asinkron, yang adalah dasar banyak aplikasi web modern.

Ingat, belajar mengoding adalah seperti belajar bahasa baru. Itu memerlukan waktu dan latihan, tapi dengan setiap baris kode yang Anda tulis, Anda menjadi semakin baik. Jangan takut untuk mencoba, membuat kesalahan, dan belajar dari kesalahan Anda.

Dalam tahun-tahun mengajar saya, saya telah melihat banyak siswa yang berubah dari pemula menjadi pengembang berbakat. Kunci adalah kekerasan dan kecurigaan. Jadi terus mengoding, terus belajar, dan sebelum Anda tahu, Anda akan membuat aplikasi web interaktif yang menakjubkan!

Kali lain, kita akan eksplorasi teknik AJAX yang lebih lanjut dan bagaimana menghandle jenis data yang berbeda. Sampai jumpa, coding yang menyenangkan!

Credits: Image by storyset

Tutorial Sebelumnya:

PHP - Pesan Flash

Tutorial Selanjutnya:

PHP - Pencarian AJAX