Advertisement
  1. Code
  2. Angular

Membuat Aplikasi Blogging Menggunakan Angular dan MongoDB: Delete Post

by
Read Time:7 minsLanguages:
This post is part of a series called Creating a Blogging App Using Angular & MongoDB.
Creating a Blogging App Using Angular & MongoDB: Edit Post

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Pada bagian sebelumnya dari rangkaian tutorial ini, Anda belajar bagaimana menerapkan fungsionalitas untuk mengedit rincian posting blog.

Pada bagian ini, Anda akan menerapkan fungsionalitas untuk menghapus entri blog yang ada dan menerapkan fungsi logout user.

Mulai

Mari kita mulai dengan kloning kode sumber dari bagian terakhir dari seri tutorial.

Arahkan ke direktori proyek dan instal dependensi yang diperlukan.

Setelah Anda memiliki dependensi terinstal, restart aplikasi klien dan server.

Arahkan browser Anda ke http://localhost:4200 dan Anda akan memiliki aplikasi yang berjalan.

Menambahkan Delete Confirmation

Anda telah menambahkan ikon delete ke posting blog yang tercantum. Saat user mengeklik ikon delete yang sesuai dengan pos blog mana pun, Anda perlu menampilkan popup konfirmasi delete. Jika pengguna mengkonfirmasikan proses penghapusan maka hanya posting blog yang perlu dihapus.

Mari mulai dengan menambahkan konfirmasi popup modal saat pengguna mengeklik tombol delete. Tambahkan kode popup modal berikut ke file show-post.component.html.

Ubah ikon delete untuk menyertakan atribut data-target seperti yang ditunjukkan:

Simpan perubahan di atas dan restart server klien. Masuk ke aplikasi dan klik pada ikon delete yang sesuai dengan entri blog manapun, dan Anda akan memiliki modal konfirmasi yang muncul.

Angular Blog App - Delete Confirmation Pop UpAngular Blog App - Delete Confirmation Pop UpAngular Blog App - Delete Confirmation Pop Up

Membuat API Delete Blog Post

Mari buat endpoint REST API untuk menghapus entri blog. Di file server/app.js, buat titik akhir API REST untuk menangani penghapusan posting blog berdasarkan id posting blog. Berikut adalah bagaimana titik akhir REST API terlihat:

Mulailah dengan menghubungkan ke database MongoDB menggunakan klien Mongoose.

Anda akan menggunakan metode findByIdAndRemove untuk menemukan entri blog menggunakan id dan menghapusnya. Setelah posting blog berhasil dihapus, Anda akan mengembalikan status sebagai respon. Berikut adalah bagaimana titik akhir REST API terlihat:

Membuat Panggilan ke API Delete

Saat pengguna mengeklik ikon delete, Anda harus menyimpan detail post dalam variabel. Jika pengguna melanjutkan dengan opsi delete setelah konfirmasi, Anda akan melakukan panggilan ke REST API delete.

Tambahkan metode yang disebut setDelete pada tombol delete klik di show-post.component.html. Begini tampilannya:

Di dalam file show-post.component.ts, tentukan sebuah variabel yang disebut post_to_delete.

Tentukan metode yang disebut setDelete di dalam show-post.component.ts agar detail postingan dihapus.

Ketika pengguna mengklik tombol batal popup, Anda perlu memanggil metode yang disebut unsetDelete untuk mengatur post_to_delete menjadi null. Begini tampilannya:

Berikut adalah bagaimana tombol Cancel untuk kode HTML show-post.component.html terlihat:

Sekarang mari kita definisikan metode layanan yang disebut deletePost di dalam file show-post.service.ts. Begini tampilannya:

Untuk memanggil metode layanan dari ShowPostComponent, tentukan metode yang disebut deletePost yang akan berlangganan metode deletePost dari ShowPostService. Berikut adalah bagaimana metode deletePost dari tampilan ShowPostComponent:

Setelah posting dihapus, Anda perlu me-refresh daftar posting, maka Anda perlu melakukan panggilan ke metode getAllPost. Anda juga perlu menutup popup setelah penghapusan berhasil.

Pertama, impor referensi ke ViewChild dan ElementRef di file show-post.component.ts.

Tentukan variable closeBtn untuk membuat referensi ke tombol close popup .

Sekarang, saat panggilan delete berhasil, Anda perlu menutup popup konfirmasi delete.

Berikut adalah bagaimana metode deletePost yang dimodifikasi terlihat:

Berikut adalah bagaimana file show-post.component.ts terlihat:

Simpan perubahan di atas dan restart aplikasi client dan server. Masuk ke aplikasi dan klik ikon delete yang sesuai dengan entri blog. Anda akan memiliki kotak konfirmasi yang muncul. Konfirmasikan penghapusan posting blog, dan posting blog akan dihapus dan daftar posting blog akan diperbarui.

Penanganan Sesi User Selama Masuk

Saat pengguna masuk ke aplikasi, Anda akan menyimpan username login di localstorage. Modifikasi metode validateLogin di dalam LoginComponent untuk menyimpan username login di localstorage.

Bila hasil dari panggilan API tervalidasi, tambahkan kode berikut untuk menyimpan username yang masuk.

Berikut adalah bagaimana metode validateLogin terlihat:

Sekarang, di dalam file home.component.html, tambahkan metode yang disebut logout ke tombol log out.

Di dalam file home.component.ts, buat metode yang disebut logout. Di dalam metode logout, Anda perlu menghapus penyimpanan lokal untuk loggedInUser. Berikut adalah bagaimana metode terlihat:

Dalam metode konstruktor HomeComponent, Anda perlu menambahkan tanda centang pada kunci penyimpanan lokal loggedInUser. Jika tidak ditemukan, Anda perlu mengarahkan ulang ke halaman masuk. Berikut adalah bagaimana file home.component.ts terlihat:

Simpan perubahan di atas dan restart server klien. Usahakan mengakses home page dengan cara loading URL http://localhost:4200/home di jendela browser. Anda akan diarahkan ke halaman login.

Masuk ke aplikasi dan klik tombol log out. Anda akan keluar dan diarahkan ke halaman login.

Meringkas

Di bagian tutorial ini, Anda belajar bagaimana menerapkan penghapusan posting blog dengan menambahkan sebuah ikon ke daftar posting blog. Anda juga membuat REST API untuk menghapus rincian posting blog dari database MongoDB menggunakan klien Mongoose.

Anda hanya menerapkan fitur dasar aplikasi blog, dan aplikasi ini dapat dikembangkan lebih jauh untuk menyertakan lebih banyak fitur.

Bagaimana pengalaman Anda belajar membuat aplikasi blogging menggunakan Angular dan MongoDB? Beri tahu kami pendapat dan saran Anda di komentar di bawah ini.

Source code dari tutorial ini tersedia di GitHub.

Dan akhirnya, ingat bahwa JavaScript adalah bahasa web. Ini bukan tanpa kurva belajar, tapi jika Anda mencari sumber daya tambahan untuk dipelajari atau digunakan dalam pekerjaan Anda, lihat apa yang tersedia di Pasar Envato.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.