Modul Pertemuan 9

HTTP REQUEST METHODS

Tujuan
1. Siswa dapat memahami tentang berbagai macam metode HTTP Request.
2. Dapat menentukan metode request untuk melakukan manipulasi data / entitas.

A. Pengertian
B. Asynchronous Programming
Asynchronous programming dalam JavaScript adalah teknik pemrograman yang
memungkinkan program untuk menjalankan tugas yang berpotensi memakan waktu lama dan
tetap responsif terhadap peristiwa lain selama tugas tersebut berjalan, daripada harus
menunggu hingga tugas tersebut selesai. Dalam JavaScript, banyak fungsi yang disediakan
oleh browser, terutama yang paling menarik, dapat berpotensi memakan waktu lama, dan
oleh karena itu, bersifat asynchronous. Beberapa contoh fungsi asynchronous pada JavaScript
adalah membuat permintaan HTTP menggunakan fetch(), memulai operasi yang memakan
waktu lama dengan memanggil sebuah fungsi, dan lain-lain.
Dalam asynchronous programming, program dapat melanjutkan menjalankan tugas lain
sambil menunggu peristiwa eksternal, seperti permintaan jaringan, terjadi. Hal ini dapat
meningkatkan kinerja dan responsivitas program.
Asynchronous programming dapat diimplementasikan dengan menggunakan teknik
seperti callback, promise, dan async/await. Callback adalah fungsi yang dieksekusi setelah
kode luar selesai dijalankan. Promise memungkinkan Anda membuat kode yang berjalan
setelah periode waktu tertentu atau ketika kondisi tertentu terpenuhi. Async/await adalah
cara baru untuk menulis kode asynchronous yang lebih mudah dibaca dan dipahami.
Asynchronous programming sangat penting dalam pengembangan web karena banyak
fungsi pada web yang bersifat asynchronous, seperti permintaan HTTP, interaksi pengguna,
dan lain-lain. Dengan menggunakan asynchronous programming, program dapat tetap
responsif terhadap peristiwa lain sambil menunggu tugas yang berpotensi memakan waktu
lama selesai dijalankan.
Berikut adalah beberapa keuntungan dari menggunakan asynchronous programming
dalam JavaScript:
A. Responsivitas: Dengan menggunakan asynchronous programming, program dapat tetap
responsif terhadap peristiwa lain sambil menunggu tugas yang berpotensi memakan
waktu lama selesai dijalankan. Hal ini dapat meningkatkan kinerja dan responsivitas
program.

Draft Modul Pertemuan 9.docx 1

 B. Efisiensi: Asynchronous programming memungkinkan program untuk menjalankan tugas
secara bersamaan, memastikan operasi yang memakan waktu, seperti permintaan
jaringan atau pembacaan berkas, tidak menghentikan seluruh program. Alih-alih
menunggu tugas selesai sebelum melanjutkan tugas berikutnya, operasi asynchronous
memungkinkan program untuk memulai beberapa tugas dan menangani penyelesaiannya
secara asynchronous.
C. Kode yang lebih mudah dibaca dan dipahami: Asynchronous programming dapat
diimplementasikan dengan menggunakan teknik seperti callback, promise, dan
async/await. Async/await adalah cara baru untuk menulis kode asynchronous yang lebih
mudah dibaca dan dipahami.
D. Meningkatkan kinerja: Dalam asynchronous programming, program dapat melanjutkan
menjalankan tugas lain sambil menunggu peristiwa eksternal, seperti permintaan
jaringan, terjadi. Hal ini dapat meningkatkan kinerja program.
E. Meningkatkan pengalaman pengguna: Dengan menggunakan asynchronous
programming, program dapat tetap responsif terhadap peristiwa lain sambil menunggu
tugas yang berpotensi memakan waktu lama selesai dijalankan. Hal ini dapat
meningkatkan pengalaman pengguna pada aplikasi web.
F. Memungkinkan interaksi yang mulus dengan server dan API eksternal: Asynchronous
programming memungkinkan interaksi yang mulus dengan server dan API eksternal tanpa
memblokir utas utama. Hal ini dapat meningkatkan efisiensi dan responsivitas program.

Perbedaan antara synchronous dan asynchronous programming dalam JavaScript adalah

sebagai berikut:

Synchronous Asynchronous
Kode diproses secara sequential, artinya setiap Kode diproses secara independent, artinya
baris kode tidak akan dieksekusi sebelum baris tugas-tugas dapat dieksekusi secara
kode sebelumnya selesai diproses bersamaan tanpa harus menunggu tugas lain
selesai
Task akan dieksekusi satu persatu sesuai Task dapat dilakukan secara bersamaan tanpa
dengan urutan dan prioritas task harus menunggu proses antrian
Proses eksekusi program berjalan secara Tugas-tugas dapat dieksekusi secara
berurutan sesuai dengan baris kode tertentu independen tanpa memblokir utas utama
Function 1 harus benar-benar selesai baru Tugas yang memakan waktu lama tidak akan
melakukan eksekusi function 2 dan seterusnya memblokir utas utama dan membuat program
menjadi tidak responsif
Tugas yang memakan waktu lama dapat Callback, promise, dan async/await adalah
memblokir utas utama dan membuat program teknik umum untuk mengelola kode
menjadi tidak responsif asynchronous

Draft Modul Pertemuan 9.docx 2

 Dalam synchronous programming, program akan menunggu setiap tugas selesai sebelum
melanjutkan tugas berikutnya, sedangkan dalam asynchronous programming, program dapat
melanjutkan menjalankan tugas lain sambil menunggu tugas yang berpotensi memakan waktu
lama selesai dijalankan. Asynchronous programming dapat meningkatkan responsivitas dan
efisiensi program serta meningkatkan pengalaman pengguna pada aplikasi web. Berikut
adalah contoh asynchronous programming pada JavaScript:
1. Callbacks
2. Promises
3. Async/await
C. Asynchronous JavaScript and XML (AJAX)
AJAX atau Asynchronous JavaScript and XML adalah teknik yang digunakan untuk membuat
website yang dinamis dan responsif. AJAX memungkinkan website untuk mengupdate dan
memperbarui tampilan web tanpa harus melakukan reload browser. AJAX bekerja secara
asynchronous untuk berkomunikasi dengan server, artinya proses pertukaran informasi
dilakukan di background dan halaman dapat tetap diakses oleh pengunjung website. AJAX
menggunakan objek XMLHttpRequest untuk berkomunikasi dengan server. Berikut adalah cara
kerja AJAX:
1. Browser memanggil AJAX JavaScript untuk mengaktifkan XMLHttpRequest dan
mengirimkan HTTP Request ke server.
2. XMLHttpRequest dibuat untuk proses pertukaran data di server secara asynchronous.
3. Server menerima, memproses, dan mengirimkan data kembali ke browser.
4. Browser menerima data tersebut dan langsung ditampilkan di halaman website, tanpa
perlu reload atau membuat halaman baru.
Untuk menggunakan AJAX dalam JavaScript dan PHP, Anda dapat membuat objek
XMLHttpRequest untuk mengambil data dari server dan menentukan fungsi handler untuk
event. Anda juga dapat menentukan method dan URL untuk mengirim request ke server dan
mengembalikan data dalam format yang sesuai. Pada sisi server, Anda dapat membuat file PHP
yang akan mengambil data dari database dan mengembalikan data dalam format JSON. Setelah
data berhasil diambil, fungsi json_encode() digunakan untuk mengubah data menjadi format
JSON. Fungsi header() digunakan untuk menentukan tipe konten yang akan dikembalikan,
sedangkan fungsi echo() digunakan untuk mengembalikan data dalam format JSON.
Berikut adalah cara menggunakannya dalam JavaScript dan PHP:
1. Membuat objek XMLHttpRequest

Draft Modul Pertemuan 9.docx 3

2. Menentukan fungsi handler untuk event

3. Menentukan method dan URL

4. Mengirim request

Pada contoh di atas, objek XMLHttpRequest() dibuat untuk mengambil data dari server
dengan menggunakan metode GET. Fungsi onreadystatechange() digunakan untuk
menentukan fungsi handler untuk event. Fungsi open() digunakan untuk menentukan method
dan URL, sedangkan fungsi send() digunakan untuk mengirim request. Setelah data berhasil
diambil, fungsi handler akan dieksekusi untuk menampilkan data pada console.
Untuk menggunakan AJAX dengan PHP, Anda dapat membuat file PHP yang akan
mengambil data dari server dan mengembalikan data dalam format yang sesuai. Berikut
adalah contoh kode PHP untuk mengambil data dari database dan mengembalikan data dalam
format JSON:

Pada contoh di atas, file PHP digunakan untuk mengambil data dari database dan
mengembalikan data dalam format JSON. Setelah data berhasil diambil, fungsi json_encode()

Draft Modul Pertemuan 9.docx 4

 digunakan untuk mengubah data menjadi format JSON. Fungsi header() digunakan untuk
menentukan tipe konten yang akan dikembalikan, sedangkan fungsi echo() digunakan untuk
mengembalikan data dalam format JSON.

D. Instruksi Praktik
1. Pada pertemuan evaluasi (UTS) kita telah membuat project CRUD (Create Read Update
Delete) untuk memanipulasi data / entitas menggunakan Bahasa PHP Native. Project
tersebut disimpan dalam 1 file, maka langkah pertama mari kita uraikan menjadi beberapa
file terlebih dahulu berdasarkan fungsinya, yaitu file untuk create data, update data, dan
delete data.

koneksi.php

create.php

update.php

Draft Modul Pertemuan 9.docx 5

delete.php

Draft Modul Pertemuan 9.docx 6

 index.php
2. Setelah memisahkan beberapa fungsi CRUD, silakan memasukkan fungsi tersebut di file
index.php, contohnya pada baris setelah tag body seperti pada gambar berikut ini. Setelah
memasukkan dengan perintah include, coba jalankan aplikasi menggunakan web browser,
pastikan fungsi CRUD dapat berjalan normal seperti sebelumnya.

Draft Modul Pertemuan 9.docx 7

3. Langkah selanjutnya adalah kita akan mencoba melakukan create data secara
asynchronous menggunakan AJAX. Pada form data diri, silakan hapus attribute method
dan action, kemudian tambahkan attribute id dengan value formDataDiri seperti pada
contoh gambar berikut ini :

4. Hapus attribute name pada tombol kirim / simpan sehingga menjadi seperti ini:

5. Tambahkan tag <script> baru sebelum penutup tag </body> untuk memisahkan kode
javascript sudah kita buat sebelumnya, ketikkan fungsi AJAX untuk mengeksekusi simpan
data pada file create.php. Perhatikan gambar berikut :

Draft Modul Pertemuan 9.docx 8

6. Ubah script pada file create.php dengan menghilangkan baris if(isset()) dan header(),
hingga menjadi seperti pada gambar berikut ini:

7. SIlakan refresh halaman index anda, jika muncul error seperti gambar berikut ini, berikan
komentar “//” pada line include create.php, update.php, dan delete.php.

Gambar Error

Nonaktifkan baris include create.php, dll

8. Setelah menonaktifkan baris include , pastikan halaman index tidak ada error dengan cara
reload page.

Draft Modul Pertemuan 9.docx 9

9. Untuk memberikan notifikasi berhasil ketika menyimpan data, kita gunakan library
javascript yang bernama sweetalert. Library dapat diakses melalui situs
https://sweetalert2.github.io/ .

10. Silakan tambahkan file css dan javascript pada halaman index anda, perhatikan gambar
berikut :
Css : <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css" rel="stylesheet">

Js : <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css" rel="stylesheet">

11. Coba kita gunakan library sweetalert2 pada event success ajax, dengan asumsi web akan
menampilkan popup notifikasi sukses ketika data berhasil disimpan.

12. Silakan refresh halaman index dan memasukkan data baru.

Draft Modul Pertemuan 9.docx 10

13. Selanjutnya kita akan membuat fungsi edit data menggunakan ajax. Langkah pertama
adalah silakan tambahkan class baru pada tombol edit di setiap tabel, misalkan .editdata.
ubah value dari atribut href menjadi href=”javascript:;”. Kemudian tambahkan atribut baru
bernama data-id dengan value id dari data tersebut. Sehingga menjadi seperti gambar
berikut ini :

14. Selanjutnya kita buat event baru jika tombol dengan class “editdata” diclick, maka aplikasi
akan mengambil data dari database kemudian data akan ditampilkan pada form.
Perhatikan gambar berikut ini :

15. Edit file edit.php menjadi kode seperti gambar berikut ini :

Draft Modul Pertemuan 9.docx 11