Ikhtisar Chapter 18: User-Generated Content (My Notes)

Apa yang Dipelajari?

Membangun fitur CRUD lengkap di front-end — user yang login bisa membuat, mengedit, dan menghapus catatan pribadi melalui REST API, lengkap dengan keamanan berlapis.

Poin Utama

1. Setup Dasar

• Buat CPT note dengan public => false (tersembunyi dari publik) dan show_ui => true (tetap tampil di admin)
• Template page-my-notes.php dengan redirect jika belum login (!is_user_logged_in())
• Query hanya note milik user sendiri: 'author' => get_current_user_id()

2. CRUD via REST API

Operasi	Method	URL	Keterangan
Create	POST	/wp-json/wp/v2/note	Tanpa ID
Read	GET	/wp-json/wp/v2/note	List semua
Update	POST	/wp-json/wp/v2/note/{id}	Dengan ID + data
Delete	DELETE	/wp-json/wp/v2/note/{id}	Dengan ID

Setiap request butuh nonce di header (X-WP-Nonce) agar WordPress mengenali user.

3. JavaScript Module Pattern

• Class MyNotes di file terpisah (MyNotes.js)
• Toggle edit/cancel: readonly attribute dilepas/dipasang, CSS class animasi
• Delegated events ($("#my-notes").on("click", ".delete-note", fn)) agar tombol pada note yang baru dibuat juga berfungsi

4. Keamanan Berlapis

Layer	Teknik
Permissions	capability_type => 'note' + Members plugin → subscriber hanya bisa CRUD note sendiri
Status paksa	wp_insert_post_data filter → semua note dipaksa private di server (tidak bisa dibypass dari client)
Sanitasi server	sanitize_text_field() untuk judul, sanitize_textarea_field() untuk konten
Escape output	esc_attr(), esc_textarea(), wp_strip_all_tags() di template

5. Per-User Limit

• count_user_posts(get_current_user_id(), 'note') untuk menghitung jumlah note
• Blokir pembuatan baru jika sudah > 4 note dan ini adalah post baru (!$postArray['ID'])
• Expose userNoteCount via register_rest_field() agar front-end bisa sembunyikan form

6. Detail Kecil tapi Penting

• Hapus prefix "Private:" dari judul: filter the_title + str_replace()
• Argumen ke-4 di add_filter() = jumlah parameter yang diterima callback (default 1, perlu 2 untuk $postArray)
• jQuery .slideUp() / .slideDown() untuk animasi, atau CSS transition untuk versi jQuery-free

7. Versi jQuery-Free (Bonus)

Ganti jQuery dengan vanilla JS + Axios:

• document.querySelector() ganti $()
• axios.post() / axios.delete() ganti $.ajax()
• axios.defaults.headers.common['X-WP-Nonce'] untuk set nonce global

Satu Kalimat

Fitur My Notes menunjukkan alur lengkap user-generated content: CRUD via REST API di front-end, dilindungi nonce, capability checks, sanitasi server-side, dan pembatasan jumlah per user.