Berikut adalah **Modul Pengenalan AJAX** untuk kuliah **Web Programming**, lengkap dengan contoh dan cara menjalankan di **Ubuntu 24.04** tanpa menggunakan Visual Studio Code. Modul ini cocok untuk pemula agar memahami konsep komunikasi asynchronous menggunakan JavaScript + AJAX.

---

1. 📘 Modul: Pengenalan AJAX (Asynchronous JavaScript and XML)

1. 1. 🎯 Tujuan Pembelajaran

- Mahasiswa memahami konsep komunikasi **asynchronous** antara **frontend dan backend**. - Mahasiswa dapat mengirim permintaan (request) ke server tanpa me-refresh halaman. - Mahasiswa mampu menjalankan dan menguji AJAX di Ubuntu menggunakan **tools bawaan**.

---

1. 1. 🧠 Apa Itu AJAX?

- AJAX** memungkinkan halaman web untuk:

- Mengambil/mengirim data dari/ke server secara **asynchronous**. - Tidak perlu **reload seluruh halaman**. - Sangat berguna untuk membuat **web interaktif dan cepat** (misalnya search suggestion, live form check, dsb).

---

1. 2. 🔧 Tools di Ubuntu 24.04

1. 1. Text Editor

- **Gedit**: GUI editor bawaan. - **Nano**: Terminal-based editor.

1. 1. Server Lokal

- **Python 3 HTTP server** (bawaan Ubuntu):

 ```bash
 cd nama_folder
 python3 -m http.server 8000
 ```

---

1. 3. 📦 Struktur File Contoh

``` /ajax-demo │ ├── index.html ← halaman utama ├── data.json ← file dummy dari “server” └── server.py ← contoh server Python (opsional) ```

---

1. 4. 📄 Contoh AJAX Sederhana (GET data dari file JSON)

1. 1. `data.json`

```json {

 "nama": "Dzaq Rayhan",
 "status": "Mahasiswa Web Programming"

} ```

1. 1. `index.html`

```html <!DOCTYPE html> <html> <head>

 <title>AJAX Demo</title>

</head> <body>

AJAX Demo - Ambil Data

 <button onclick="ambilData()">Ambil Data</button>

 <script>
   function ambilData() {
     const xhr = new XMLHttpRequest();
     xhr.open("GET", "data.json", true);

     xhr.onload = function() {
       if (xhr.status === 200) {
         const data = JSON.parse(xhr.responseText);
         document.getElementById("output").innerText = `Nama: ${data.nama}, Status: ${data.status}`;
       } else {
         document.getElementById("output").innerText = "Gagal mengambil data!";
       }
     };

     xhr.send();
   }
 </script>

</body> </html> ```

1. 1. 🚀 Cara Menjalankan

1. Simpan semua file ke dalam satu folder, misalnya `ajax-demo/` 2. Buka terminal:

  ```bash
  cd ~/ajax-demo
  python3 -m http.server 8000
  ```

3. Buka browser dan kunjungi:

  `http://localhost:8000`

Klik tombol “Ambil Data” dan lihat data muncul tanpa reload!

---

1. 5. 💬 Contoh AJAX POST ke Server Dummy (menggunakan server.py)

1. 1. `index.html` (POST Form)

```html <!DOCTYPE html> <html> <head>

 <title>Form AJAX</title>

</head> <body>

AJAX POST Demo

 <input type="text" id="nama" placeholder="Nama">
 <button onclick="kirimData()">Kirim</button>

 <script>
   function kirimData() {
     const nama = document.getElementById("nama").value;
     const xhr = new XMLHttpRequest();
     xhr.open("POST", "/kirim", true);
     xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

     xhr.onload = function () {
       document.getElementById("hasil").innerText = xhr.responseText;
     };

     xhr.send(JSON.stringify({ nama: nama }));
   }
 </script>

</body> </html> ```

1. 1. `server.py` (Server Python Sederhana)

```python from http.server import BaseHTTPRequestHandler, HTTPServer import json

class Handler(BaseHTTPRequestHandler):

   def do_POST(self):
       if self.path == '/kirim':
           content_length = int(self.headers['Content-Length'])
           post_data = self.rfile.read(content_length)
           data = json.loads(post_data)
           nama = data.get('nama', 'Tidak ada nama')
           response = f"Halo, {nama}!"
           self.send_response(200)
           self.send_header('Content-type','text/plain')
           self.end_headers()
           self.wfile.write(response.encode())

httpd = HTTPServer(('localhost', 8000), Handler) print("Server running at http://localhost:8000") httpd.serve_forever() ```

📌 **Cara jalankan server POST:** ```bash python3 server.py ```

---

1. 📚 Tugas Mahasiswa

1. Buat form AJAX untuk:

  - Mengambil list produk dari file JSON
  - Menampilkan ke halaman tanpa reload

2. Tambahkan tombol "Refresh Data" 3. (Bonus) Buat form POST sederhana ke Python backend

---

Kalau kamu mau, aku juga bisa bantu bikin file `data.json` untuk tugas kamu atau bantu debug script kamu. Mau lanjut?

Pengenalan AJAX untuk komunikasi asynchronous

AJAX Demo - Ambil Data

AJAX POST Demo

Navigation menu

Search