My Notes Frontend — Delete via REST API

Ringkasan

Video ini menghubungkan UI My Notes dengan WordPress REST API menggunakan JavaScript. Kita membuat module MyNotes.js, belajar mengirim DELETE request via $.ajax(), mengautentikasi request dengan nonce, dan membuat tombol delete dinamis berdasarkan ID post.

---

1. Membuat Module JavaScript: MyNotes.js

File: src/modules/MyNotes.js

import $ from 'jquery';

class MyNotes {
  constructor() {
    this.events();
  }

  events() {
    $(".delete-note").on("click", this.deleteNote);
  }

  // methods di bawah sini...
  deleteNote() {
    alert("You clicked delete");
  }
}

export default MyNotes;

Import di src/index.js:

import MyNotes from './modules/MyNotes';
// ...
const myNotes = new MyNotes();

---

2. REST API: Tipe-tipe Request

REST API menggunakan URL yang sama tapi dengan tipe request berbeda:

Tipe Request	Aksi	Contoh URL
GET	Mengambil data	/wp-json/wp/v2/note/137
POST	Membuat/update data	/wp-json/wp/v2/note/137
DELETE	Menghapus data	/wp-json/wp/v2/note/137

Browser secara default mengirim GET request saat mengunjungi URL. Dengan JavaScript, kita bisa mengirim tipe request apapun.

---

3. Mengirim DELETE Request dengan $.ajax()

deleteNote() {
  $.ajax({
    beforeSend: (xhr) => {
      xhr.setRequestHeader('X-WP-Nonce', universityData.nonce);
    },
    url: universityData.root_url + '/wp-json/wp/v2/note/137', // hardcoded dulu
    type: 'DELETE',
    success: (response) => {
      console.log("Congrats");
      console.log(response);
    },
    error: (response) => {
      console.log("Sorry");
      console.log(response);
    }
  });
}

Penjelasan Properti $.ajax():

Properti	Penjelasan
beforeSend	Dijalankan sebelum request dikirim — tempat menambahkan header
url	URL REST API yang dituju
type	Tipe request: 'GET', 'POST', atau 'DELETE'
success	Fungsi yang dijalankan jika request berhasil
error	Fungsi yang dijalankan jika request gagal

---

4. Autentikasi dengan Nonce

Tanpa autentikasi, WordPress akan menolak request dengan error "Unauthorized".

Langkah 1: Generate Nonce di PHP

File: functions.php (dalam wp_localize_script)

wp_localize_script('main-university-js', 'universityData', array(
  'root_url' => get_site_url(),
  'nonce' => wp_create_nonce('wp_rest')  // PENTING: underscore, BUKAN dash!
));

Peringatan: Gunakan wp_rest dengan underscore (_), BUKAN dash (-). Ini typo yang sangat umum!

Langkah 2: Kirim Nonce dalam Request Header

beforeSend: (xhr) => {
  xhr.setRequestHeader('X-WP-Nonce', universityData.nonce);
}

Konsep	Penjelasan
Nonce	"Number used once" — angka rahasia yang WordPress generate per sesi login
wp_create_nonce('wp_rest')	PHP function yang membuat nonce
X-WP-Nonce	Header name yang WordPress cari untuk autentikasi
universityData.nonce	Nilai nonce yang tersedia di frontend (via wp_localize_script)

---

5. Membuat Delete Button Dinamis (by ID)

Alih-alih hardcode ID, gunakan data-id attribute dari parent <li>.

HTML (sudah ada di template):

<li data-id="<?php the_ID(); ?>">

JavaScript:

deleteNote(e) {
  var thisNote = $(e.target).parents("li");

  $.ajax({
    beforeSend: (xhr) => {
      xhr.setRequestHeader('X-WP-Nonce', universityData.nonce);
    },
    url: universityData.root_url + '/wp-json/wp/v2/note/' + thisNote.data('id'),
    type: 'DELETE',
    success: (response) => {
      thisNote.slideUp();  // Animasi hapus dari halaman
      console.log("Congrats");
      console.log(response);
    },
    error: (response) => {
      console.log("Sorry");
      console.log(response);
    }
  });
}

Poin Penting:

Kode	Penjelasan
e.target	Elemen spesifik yang diklik (parameter event)
.parents("li")	Cari ancestor <li> terdekat
.data('id')	Ambil nilai data-id attribute (jQuery otomatis strip prefix data-)
.slideUp()	jQuery method — animasi slide ke atas lalu hapus elemen dari halaman

---

Catatan CSS

Untuk animasi slideUp/slideDown jQuery berjalan mulus, comment out blok CSS "Reveal and Hide Fade Transitions" di css/modules/my-notes.css (~line 131):

/* Tambahkan /* di atas #my-notes dan */ di bawah file */

Nanti saat beralih ke versi jQuery-free, uncomment kembali CSS ini.