Ikhtisar Chapter 13: REST API & AJAX

Apa yang Dipelajari?

Menggunakan WordPress REST API untuk memuat konten secara real-time di browser menggunakan JavaScript (AJAX), tanpa harus reload halaman.

Poin Utama

1. WordPress REST API — Dasar

WordPress punya URL khusus yang mengembalikan data dalam format JSON (bukan HTML):

URL	Hasil
/wp-json/wp/v2/posts	10 post terbaru
/wp-json/wp/v2/pages	10 page terbaru
/wp-json/wp/v2/posts?search=biology	Post yang cocok dengan "biology"
/wp-json/wp/v2/posts?per_page=2	Hanya 2 post
/wp-json/wp/v2/posts/7	Post dengan ID 7

REST API mendukung operasi CRUD (Create, Read, Update, Delete) — di chapter ini fokus pada Read.

2. Mengambil Data dengan jQuery

Gunakan $.getJSON() untuk mengirim request ke REST API dan mendapat respons JSON:

$.getJSON(universityData.root_url + "/wp-json/wp/v2/posts?search=" + this.searchField.val(), (posts) => {
  // posts = array of objects dari WordPress
});

3. Template Literal & .map() untuk Render HTML

• Template literal (backtick `) membolehkan HTML multi-baris dan ekspresi ${...} di dalamnya
• .map() digunakan untuk loop array dan menghasilkan HTML per item
• .join('') menggabungkan array menjadi string tanpa koma

${posts.map(item => `<li><a href="${item.link}">${item.title.rendered}</a></li>`).join('')}

4. Conditional Logic: Ternary Operator

Di dalam template literal tidak bisa pakai if — gunakan ternary operator:

posts.length ? '<ul>...</ul>' : '<p>Tidak ada hasil.</p>'

• posts.length = 0 → false (kosong) → tampilkan pesan "tidak ditemukan"
• posts.length > 0 → true → tampilkan list hasil

5. URL Fleksibel dengan wp_localize_script()

Jangan hardcode URL (misalnya http://localhost:3000). Gunakan PHP untuk menyuntikkan URL dinamis ke JavaScript:

wp_localize_script('main-university-js', 'universityData', array(
  'root_url' => get_site_url()
));

Hasilnya: variabel universityData.root_url otomatis berisi URL WordPress yang aktif — aman untuk environment apapun.

6. Pindahkan HTML Overlay ke JavaScript

Alih-alih menulis HTML search overlay di footer.php, buat method addSearchHTML() di JavaScript yang menambahkan HTML ke DOM via $("body").append(...). Keuntungan:

• HTML dan logic hidup di satu tempat
• Jika JS dimatikan, HTML overlay tidak perlu dikirim

7. Quick UX: Auto-Focus & Timer

• Kurangi typing delay dari 2000ms → 750ms agar lebih responsif
• this.searchField.focus() dengan delay 301ms (CSS transition 300ms harus selesai dulu)
• this.searchField.val('') untuk mengosongkan field saat overlay dibuka ulang

8. Synchronous vs Asynchronous

Pendekatan	Cara Kerja	Kecepatan
Nested getJSON (synchronous)	Request kedua menunggu yang pertama selesai	Lambat
$.when().then() (asynchronous)	Semua request berjalan bersamaan	Cepat

$.when(
  $.getJSON(url + "/wp-json/wp/v2/posts?search=" + keyword),
  $.getJSON(url + "/wp-json/wp/v2/pages?search=" + keyword)
).then((posts, pages) => {
  var combined = posts[0].concat(pages[0]);
  // render combined results...
});

Penting: Dalam $.when().then(), data ada di index [0] (bukan langsung), karena parameter berisi [data, statusText, jqXHR].

9. Error Handling

Argument kedua di .then() adalah callback untuk error — menampilkan pesan jika network gagal alih-alih crash.

Satu Kalimat

REST API mengubah WordPress dari "mesin HTML" menjadi sumber data JSON yang bisa dikonsumsi JavaScript untuk pengalaman real-time tanpa reload halaman.