Unknown user at 23:25, 6 April 2025

2025-04-06T23:25:34Z

← Older revision		Revision as of 23:25, 6 April 2025
Line 45:		Line 45:
	'''`index.html`'''		'''`index.html`'''

			<pre>
	<!DOCTYPE html>		<!DOCTYPE html>
	<html>		<html>
Line 74:		Line 75:
	</body>		</body>
	</html>		</html>
			</pre>

	'''🚀 Cara Menjalankan'''		'''🚀 Cara Menjalankan'''
Line 92:		Line 94:
	'''`index.html` (POST Form)'''		'''`index.html` (POST Form)'''

			<pre>
	<!DOCTYPE html>		<!DOCTYPE html>
	<html>		<html>
Line 119:		Line 122:
	</body>		</body>
	</html>		</html>
			</pre>

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

Unknown user at 12:11, 6 April 2025

2025-04-06T12:11:54Z

Show changes

Unknown user: Created page with "Berikut adalah Modul Pengenalan AJAX untuk kuliah Web Programming, lengkap dengan contoh dan cara menjalankan di Ubuntu 24.04 tanpa menggunakan Visual Studio Code...."

2025-04-05T12:31:40Z

Created page with "Berikut adalah **Modul Pengenalan AJAX** untuk kuliah **Web Programming**, lengkap dengan contoh dan cara menjalankan di **Ubuntu 24.04** tanpa menggunakan Visual Studio Code...."

New page

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.

---

## 📘 Modul: Pengenalan AJAX (Asynchronous JavaScript and XML)

### 🎯 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. 🧠 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).

---

## 2. 🔧 Tools di Ubuntu 24.04

### Text Editor
- **Gedit**: GUI editor bawaan.
- **Nano**: Terminal-based editor.

### Server Lokal
- **Python 3 HTTP server** (bawaan Ubuntu):
```bash
cd nama_folder
python3 -m http.server 8000
```

---

## 3. 📦 Struktur File Contoh

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

---

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

### `data.json`
```json
{
"nama": "Dzaq Rayhan",
"status": "Mahasiswa Web Programming"
}
```

### `index.html`
```html
<!DOCTYPE html>
<html>
<head>
<title>AJAX Demo</title>
</head>
<body>
<h1>AJAX Demo - Ambil Data</h1>
<button onclick="ambilData()">Ambil Data</button>
<p id="output"></p>

<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>
```

### 🚀 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!

---

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

### `index.html` (POST Form)
```html
<!DOCTYPE html>
<html>
<head>
<title>Form AJAX</title>
</head>
<body>
<h2>AJAX POST Demo</h2>
<input type="text" id="nama" placeholder="Nama">
<button onclick="kirimData()">Kirim</button>
<p id="hasil"></p>

<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>
```

### `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
```

---

## 📚 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 - Revision history

Unknown user at 23:25, 6 April 2025

Unknown user at 12:11, 6 April 2025

Unknown user: Created page with "Berikut adalah **Modul Pengenalan AJAX** untuk kuliah **Web Programming**, lengkap dengan contoh dan cara menjalankan di **Ubuntu 24.04** tanpa menggunakan Visual Studio Code...."

Unknown user: Created page with "Berikut adalah Modul Pengenalan AJAX untuk kuliah Web Programming, lengkap dengan contoh dan cara menjalankan di Ubuntu 24.04 tanpa menggunakan Visual Studio Code...."