Pengenalan AJAX untuk komunikasi asynchronous: Difference between revisions

From OnnoCenterWiki
Jump to navigationJump to search
Newer edit →
Unknown user (talk)
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...."
 
No edit summary
Line 1: Line 1:
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'''.


## 📘 Modul: Pengenalan AJAX (Asynchronous JavaScript and XML)
==1. 🧠 Apa Itu AJAX?==


### 🎯 Tujuan Pembelajaran
'''AJAX''' memungkinkan halaman web untuk:
- Mahasiswa memahami konsep komunikasi **asynchronous** antara **frontend dan backend**.
* Mengambil/mengirim data dari/ke server secara '''asynchronous'''.
- Mahasiswa dapat mengirim permintaan (request) ke server tanpa me-refresh halaman.
* Tidak perlu '''reload seluruh halaman'''.
- Mahasiswa mampu menjalankan dan menguji AJAX di Ubuntu menggunakan **tools bawaan**.
* Sangat berguna untuk membuat '''web interaktif dan cepat''' (misalnya search suggestion, live form check, dsb).


---
==2. 🔧 Tools di Ubuntu 24.04==


## 1. 🧠 Apa Itu AJAX?
'''Text Editor'''
* '''Gedit''': GUI editor bawaan.
* '''Nano''': Terminal-based editor.


**AJAX** memungkinkan halaman web untuk:
'''Server Lokal'''
- Mengambil/mengirim data dari/ke server secara **asynchronous**.
* '''Python 3 HTTP server''' (bawaan Ubuntu):
- Tidak perlu **reload seluruh halaman**.
 
- Sangat berguna untuk membuat **web interaktif dan cepat** (misalnya search suggestion, live form check, dsb).
cd nama_folder
python3 -m http.server 8000


---


## 2. 🔧 Tools di Ubuntu 24.04
==3. 📦 Struktur File Contoh==


### Text Editor
/ajax-demo
- **Gedit**: GUI editor bawaan.
│
- **Nano**: Terminal-based editor.
├── index.html        ← halaman utama
├── data.json          ← file dummy dari “server”
└── server.py          ← contoh server Python (opsional)


### Server Lokal
==4. 📄 Contoh AJAX Sederhana (GET data dari file JSON)==
- **Python 3 HTTP server** (bawaan Ubuntu):
  ```bash
  cd nama_folder
  python3 -m http.server 8000
  ```


---
'''`data.json`'''


## 3. 📦 Struktur File Contoh
{
  "nama": "Dzaq Rayhan",
  "status": "Mahasiswa Web Programming"
}


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


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


## 4. 📄 Contoh AJAX Sederhana (GET data dari file JSON)
'''🚀 Cara Menjalankan'''
* Simpan semua file ke dalam satu folder, misalnya `ajax-demo/`
* Buka terminal:
 
cd ~/ajax-demo
python3 -m http.server 8000


### `data.json`
* Buka browser dan kunjungi:
```json
{
  "nama": "Dzaq Rayhan",
  "status": "Mahasiswa Web Programming"
}
```


### `index.html`
  http://localhost:8000
```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!
Klik tombol “Ambil Data” dan lihat data muncul tanpa reload!


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


### `index.html` (POST Form)
'''`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>
<!DOCTYPE html>
    function kirimData() {
<html>
      const nama = document.getElementById("nama").value;
<head>
      const xhr = new XMLHttpRequest();
  <title>Form AJAX</title>
      xhr.open("POST", "/kirim", true);
</head>
      xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
<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>


      xhr.onload = function () {
'''`server.py` (Server Python Sederhana)'''
        document.getElementById("hasil").innerText = xhr.responseText;
      };


      xhr.send(JSON.stringify({ nama: nama }));
from http.server import BaseHTTPRequestHandler, HTTPServer
    }
import json
  </script>
</body>
class Handler(BaseHTTPRequestHandler):
</html>
    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()


### `server.py` (Server Python Sederhana)
'''Cara jalankan server POST:'''
```python
from http.server import BaseHTTPRequestHandler, HTTPServer
import json


class Handler(BaseHTTPRequestHandler):
python3 server.py
    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:**
==📚 Tugas Mahasiswa==
```bash
python3 server.py
```


---
* Buat form AJAX untuk:
** Mengambil list produk dari file JSON
** Menampilkan ke halaman tanpa reload
* Tambahkan tombol "Refresh Data"
* (Bonus) Buat form POST sederhana ke Python backend


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


---
==Pranala Menarik==


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

Revision as of 12:11, 6 April 2025

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

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

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

🚀 Cara Menjalankan

  • Simpan semua file ke dalam satu folder, misalnya `ajax-demo/`
  • Buka terminal:
cd ~/ajax-demo
python3 -m http.server 8000
  • 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) 

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

`server.py` (Server Python Sederhana) 

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: 

python3 server.py


📚 Tugas Mahasiswa

  • Buat form AJAX untuk:
    • Mengambil list produk dari file JSON
    • Menampilkan ke halaman tanpa reload
  • Tambahkan tombol "Refresh Data"
  • (Bonus) Buat form POST sederhana ke Python backend


Pranala Menarik

Retrieved from "https://lms.onnocenter.or.id/wiki/index.php?title=Pengenalan_AJAX_untuk_komunikasi_asynchronous&oldid=72373"