Advertisement
  1. Code
  2. Angular

Membuat Aplikasi Blogging Menggunakan Angular dan MongoDB: Edit Post

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

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

Pada part sebelumnya dari rangkaian tutorial ini, Anda belajar cara membuat komponen add post untuk menambahkan posting blog baru. Anda belajar bagaimana membuat endpoint REST API untuk menambahkan posting baru ke database MongoDB.

Di bagian tutorial ini, Anda akan belajar bagaimana menerapkan fungsionalitas untuk mengedit posting blog yang ada dari daftar posting blog.

Memulai

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 Edit Post View

Di ShowPostComponent, Anda akan menambahkan dua ikon untuk mengedit dan menghapus entri blog. Anda akan menggunakan Font Awesome untuk menampilkan ikon edit dan hapus.

Download dan sertakan folder font awesome di folder assets.

Font Awesome In Assets FolderFont Awesome In Assets FolderFont Awesome In Assets Folder

Di halaman src/app/index.html, sertakan referensi ke style CSS font awesome.

Sekarang ubah file show-post/show-post.component.html untuk menyertakan HTML untuk mengedit dan menghapus ikon.

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

Simpan perubahan di atas dan restart aplikasi klien. Masuk ke aplikasi dan Anda akan dapat melihat edit dan hapus ikon yang sesuai dengan setiap entri blog yang ada.

Angular Blog App - Edit And Delete IconAngular Blog App - Edit And Delete IconAngular Blog App - Edit And Delete Icon

Mengisi Rincian Edit dalam Popup

Saat  pengguna mengeklik ikon edit yang sesuai dengan post mana pun, Anda harus mengisi detail posting blog di popup add post untuk memperbarui.

Tambahkan method click ke ikon edit.

Di dalam CommonService, Anda perlu menentukan observable agar tetap di track saat tombol edit diklik. Tentukan obsevable seperti yang ditunjukkan:

Tentukan variabel lain untuk melacak pos yang akan diedit.

Setiap kali tombol edit diklik, Anda akan menyimpan post yang akan diedit di CommonService dan mentrigger pengamatan untuk memberitahukan pengeditan posting. Tentukan dua method untuk mengatur agar postingan diedit dan untuk memberitahukan post edit.

Di dalam method click, Anda akan memanggil method setPostToEdit dari CommonService. Berikut adalah bagaimana method editPost terlihat:

Anda akan memiliki detail posting di common service saat pengguna mengklik tombol edit. Untuk menampilkan popup add post untuk update, Anda perlu mengklik tombol add post secara terprogram.

Di dalam file home/home.component.html, tambahkan # identifier ke tombol add post.

Impor ViewChild dan ElementRef di dalam file home.component.ts.

Tentukan reference ke tombol add di dalam file home.component.ts.

Di dalam constructor HomeComponent, subscribe ke postEdit_Observable dari CommonService. Saat memanggil callback postEdit_Observable, panggil tombol tambah klik untuk menampilkan popup. Berikut adalah bagaimana file home.component.ts terlihat:

Anda harus subscribe postEdit_Observable di file add-post.component.ts untuk mengatur postingan yang akan diedit pada variabel post. Beginilah cara metode ngOnInit di add-post.component.ts terlihat:

Simpan perubahan di atas dan restart server klien. Masuk ke aplikasi dan klik tombol edit pada salah satu blog post. Anda akan dapat melihat rincian posting yang terisi di popup add post.

Angular Blog App - Update PostAngular Blog App - Update PostAngular Blog App - Update Post

Membuat Update Post REST API

Di dalam server/app.js, mari tetapkan endpoint REST API lainnya untuk memperbarui detail post berdasarkan ID post. Begini tampilannya:

Pertama mari kita gunakan Mongoose untuk terhubung ke database MongoDB.

Setelah connection dibuat, Anda menggunakan metode update pada model Post.

Anda akan memperbarui posting berdasarkan ID dari posting yang dilewati. Seperti yang terlihat pada kode di atas, Anda telah menentukan postingan _id yang akan diperbarui. Pada pilihan kedua, Anda telah menentukan bidang yang akan diperbarui, yaitu title dan description.

Setelah rincian diperbarui, Anda akan mengembalikan status beserta jumlah baris yang terpengaruh selama update. Berikut adalah bagaimana endpoint REST API untuk update post terlihat:

Membuat REST API Call to Update

ID yang dikembalikan untuk setiap posting dari MongoDB adalah _id, jadi Anda perlu memodifikasi id pada src/app/models/post.model.ts model kita. Begini tampilannya:

Saat Anda mengklik tombol add post, metode yang disebut akan menjadi adPost. Di dalam metode adPost di add-post.component.ts, Anda akan memeriksa apakah objek post memiliki _id. Jika _id ada maka Anda perlu memanggil method update dari layanan ini, jika tidak, Anda akan memanggil method add post service.

Buat method yang disebut updatePost di dalam file add-post.service.ts.

Berikut adalah bagaimana method addPost yang dimodifikasi dari file add-post.component.ts terlihat:

Simpan perubahan di atas dan restart server Angular dan Node. Masuk ke aplikasi dan coba edit posting. Anda akan memiliki popup yang ditampilkan untuk mengedit rincian tentang mengklik tombol edit. Klik tombol add dan rinciannya akan diperbarui dan ditampilkan di daftar posting blog.

Kesimpulan

Dalam tutorial ini, Anda menerapkan fungsionalitas untuk memperbarui detail posting blog yang ada. Anda membuat endpoint Rest API back-end untuk memperbarui detail posting blog berdasarkan ID posting blog. Anda menggunakan klien Mongoose untuk memperbarui rincian posting blog di database MongoDB.

Pada bagian selanjutnya, Anda akan menerapkan fungsi delete post dan log out.

Bagaimana pengalaman Anda sejauh ini? Biarkan kami mengetahui pemikiran, saran, atau koreksi Anda di komentar di bawah ini.

Source code dari tutorial ini tersedia di GitHub.

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.