Komunikasi Asinkron dengan JavaScript dan Flask
- Modul 2.3: Komunikasi Asinkron dengan JavaScript dan Flask
- Pendahuluan
Dalam pengembangan aplikasi web modern, komunikasi asinkron memungkinkan pembaruan konten halaman web tanpa perlu memuat ulang seluruh halaman. Teknik ini meningkatkan interaktivitas dan responsivitas aplikasi. Flask, sebagai framework web Python yang ringan, dapat diintegrasikan dengan JavaScript untuk mencapai komunikasi asinkron menggunakan AJAX (Asynchronous JavaScript and XML). Modul ini akan membahas cara mengintegrasikan Flask dengan JavaScript untuk komunikasi asinkron, dengan contoh implementasi memuat data secara dinamis tanpa me-refresh halaman.
- Instalasi Flask di Ubuntu 24.04
Sebelum memulai, pastikan Python 3 dan pip telah terinstal di sistem Anda. Berikut langkah-langkah instalasi Flask:
1. **Perbarui daftar paket dan instal dependensi yang diperlukan:**
```bash sudo apt update sudo apt install python3 python3-pip python3-venv -y ```
2. **Buat direktori proyek dan navigasikan ke dalamnya:**
```bash mkdir flask_ajax cd flask_ajax ```
3. **Buat dan aktifkan virtual environment:**
```bash python3 -m venv venv source venv/bin/activate ```
4. **Instal Flask:**
```bash pip install Flask ```
- Konsep Dasar AJAX
AJAX memungkinkan aplikasi web untuk mengambil dan mengirim data ke server secara asinkron tanpa mengganggu tampilan halaman saat ini. Dengan menggunakan objek `XMLHttpRequest` atau API Fetch dalam JavaScript, halaman web dapat memperbarui kontennya secara dinamis. citeturn0search11
- Integrasi Flask dengan JavaScript Menggunakan AJAX
Berikut adalah langkah-langkah untuk mengintegrasikan Flask dengan JavaScript guna memuat data secara dinamis tanpa me-refresh halaman:
1. **Buat Struktur Proyek:**
```bash
flask_ajax/
├── app.py
└── templates/
└── index.html
```
2. **Buat Aplikasi Flask (`app.py`):**
```python from flask import Flask, render_template, jsonify
app = Flask(__name__)
# Data contoh
data = [
{"id": 1, "name": "Item 1"},
{"id": 2, "name": "Item 2"},
{"id": 3, "name": "Item 3"}
]
@app.route('/')
def index():
return render_template('index.html')
@app.route('/data')
def get_data():
return jsonify(data)
if __name__ == '__main__':
app.run(debug=True)
```
Dalam kode di atas, route `/` merender template `index.html`, dan route `/data` mengembalikan data dalam format JSON.
3. **Buat Template HTML (`templates/index.html`):**
```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Flask AJAX Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
Daftar Item
<script>
$(document).ready(function() {
$.ajax({
url: '/data',
type: 'GET',
success: function(response) {
response.forEach(function(item) {
$('#item-list').append('
'); }); }, error: function(error) { console.log('Error:', error); } }); }); </script> </body> </html> ``` Dalam template ini, jQuery digunakan untuk melakukan permintaan GET ke endpoint `/data`. Data yang diterima kemudian ditampilkan dalam elemen `
- ` tanpa me-refresh halaman. citeturn0search23
- Penjelasan Alur Kerja
- Keuntungan Menggunakan AJAX dengan Flask
- Referensi
- ` dengan menambahkan item secara dinamis.
3. **Pembaruan Konten Halaman:**
- Tanpa me-refresh halaman, daftar item diperbarui dengan data yang diterima dari server.