"My Notes" Feature — Setup

Ringkasan

Video ini memulai pembangunan fitur My Notes — halaman di mana user yang sudah login bisa membuat, mengedit, dan menghapus catatan pribadi mereka. Kita membuat custom post type note, template page-my-notes.php, dan UI form dengan input/textarea serta tombol edit/delete.

---

1. Membuat Halaman My Notes

Langkah:

1. Dashboard → Pages → Add New → Judul: My Notes → Publish
2. Buat template khusus: page-my-notes.php di theme folder
3. Copy isi page.php sebagai starter, lalu modifikasi

---

2. Redirect User yang Belum Login

File: page-my-notes.php (bagian atas)

<?php
if (!is_user_logged_in()) {
  wp_redirect(esc_url(site_url('/')));
  exit;
}

get_header();
// ... rest of template

!is_user_logged_in() — tanda seru berarti "jika TIDAK logged in", redirect ke homepage.

---

3. Menambahkan Link My Notes di Header

File: header.php (dalam blok if (is_user_logged_in()))

<a href="<?php echo esc_url(site_url('/my-notes')); ?>" class="btn btn--small btn--orange float-left push-right">
  My Notes
</a>

• Link hanya muncul untuk user yang sudah login
• User yang belum login tidak melihat tombol ini

---

4. Membuat Custom Post Type: Note

File: mu-plugins/university-post-types.php

// Note post type
register_post_type('note', array(
  'show_in_rest' => true,
  'supports' => array('title', 'editor'),
  'public' => false,       // Tidak muncul di public queries/search
  'show_ui' => true,       // Tetap muncul di admin dashboard
  'labels' => array(
    'name' => 'Notes',
    'add_new_item' => 'Add New Note',
    'edit_item' => 'Edit Note',
    'all_items' => 'All Notes',
    'singular_name' => 'Note'
  ),
  'menu_icon' => 'dashicons-welcome-write-blog'
));

Properti Penting:

Properti	Nilai	Penjelasan
'public' => false	Tersembunyi dari public — tidak muncul di pencarian atau query default
'show_ui' => true	Tetap tampil di admin dashboard (tanpa ini, admin juga tidak bisa melihat)
'show_in_rest' => true	Bisa diakses via REST API (penting untuk fitur frontend)

---

5. Query Notes Milik User yang Login

File: page-my-notes.php

<div class="container container--narrow page-section">
  <ul class="min-list link-list" id="my-notes">
    <?php
    $userNotes = new WP_Query(array(
      'post_type' => 'note',
      'posts_per_page' => -1,           // Ambil semua notes
      'author' => get_current_user_id()  // Hanya milik user ini!
    ));

    while($userNotes->have_posts()) {
      $userNotes->the_post(); ?>
      <li data-id="<?php the_ID(); ?>">
        <input readonly class="note-title-field" value="<?php echo esc_attr(get_the_title()); ?>">
        <span class="edit-note">
          <i class="fa fa-pencil" aria-hidden="true"></i> Edit
        </span>
        <span class="delete-note">
          <i class="fa fa-trash-o" aria-hidden="true"></i> Delete
        </span>
        <textarea readonly class="note-body-field"><?php echo esc_attr(wp_strip_all_tags(get_the_content())); ?></textarea>
      </li>
    <?php } ?>
  </ul>
</div>

Poin Penting:

Kode	Penjelasan
'author' => get_current_user_id()	Kunci privacy — hanya menampilkan notes milik user yang sedang login
'posts_per_page' => -1	Ambil semua notes (tidak dibatasi 10 default)
data-id="<?php the_ID(); ?>"	ID post disimpan di HTML agar JavaScript bisa mengaksesnya
readonly	Field tidak bisa diedit sampai user klik tombol Edit
esc_attr()	Escape untuk keamanan (digunakan dalam atribut HTML)
wp_strip_all_tags()	Menghapus HTML tags dari content (menghilangkan <p>, komentar WP)

---

Struktur UI My Notes

┌─────────────────────────────────────────────┐
│  [Create New Note form — akan dibuat nanti]  │
├─────────────────────────────────────────────┤
│  ┌─────────────────────────────────────┐    │
│  │ Biology Lecture #4        [Edit][Del]│    │
│  │ I learned 5000 things in class...   │    │
│  └─────────────────────────────────────┘    │
│  ┌─────────────────────────────────────┐    │
│  │ Math Lecture #1           [Edit][Del]│    │
│  │ Math class was great...             │    │
│  └─────────────────────────────────────┘    │
└─────────────────────────────────────────────┘