Advertisement
  1. Code
  2. Angular

Membuat Aplikasi Blogging Menggunakan Angular dan MongoDB: Add Post

by
Read Time:8 minsLanguages:
This post is part of a series called Creating a Blogging App Using Angular & MongoDB.
Creating a Blogging App Using Angular & MongoDB: Show Post
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)

Di part sebelumnya dari rangkaian tutorial blog Angular, Anda belajar bagaimana membuat ShowPostComponent untuk menampilkan daftar posting blog di beranda. Anda fetch record yang dimasukkan dari shell MongoDB menggunakan endpoint REST API yang dibuat.

Dalam tutorial ini, Anda akan membuat komponen baru yang disebut AddPostComponent untuk menyediakan antarmuka pengguna untuk menambahkan entri blog baru ke database MongoDB.

Mulai

Mari kita mulai dengan mengkloning kode sumber dari bagian tutorial sebelumnya.

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 harus menjalankan aplikasi.

Membuat Add Post Component

Mari kita mulai dengan membuat AddPostComponent. Buat folder bernama add-post di dalam folder src/app. Di dalam folder add-post, buat file bernama add-post.component.ts dan tambahkan kode berikut ini:

Buat file bernama add-post.component.html dan kode HTML berikut ini:

Anda akan menampilkan komponen add post sebagai popup.

Sekarang Anda perlu menambahkan AddPostComponent ke NgModule. Impor AddPostComponent ke dalam file app.module.ts.

Tambahkan komponen ke daftar NgModule declarations. Begini tampilannya:

Untuk memicu popup add post, Anda telah menambahkan atribut data-target ke button di home.component.html.

Simpan perubahan di atas dan restart aplikasi. Masuk ke aplikasi dan klik pada link Add di beranda. Anda akan memiliki AddPostComponent ditampilkan sebagai popup.

Angular Blog Application - Add Post PopupAngular Blog Application - Add Post PopupAngular Blog Application - Add Post Popup

Menerapkan Fungsi Add Post

Tambahkan perintah ngModel ke elemen input untuk title dan description.

Tambahkan perintah click ke tombol untuk memanggil method untuk menyimpan entri blog.

Impor model Post dari src/app/models/post.model.ts di file add-post.component.ts.

Tentukan variabel post di file add-post.component.ts.

Tentukan method addPost di dalam file add-post.component.ts. Dari method addPost, Anda akan memvalidasi title dan description yang dimasukkan dan membuat panggilan ke method service untuk memanggil REST API. Berikut adalah bagaimana method terlihat:

Mari buat file service untuk komponen AddPostComponent. Buat file bernama add-post.service.ts dan tambahkan kode berikut:

Di dalam Layanan AddPostService, buat metode yang disebut addPost untuk melakukan panggilan REST API.

Seperti yang terlihat pada kode di atas, Anda telah menggunakan HttpClient untuk membuat panggilan API dan mengembalikan yang Observable.

Pada file add-post.component.ts di dalam method addPost, Anda akan berlangganan method addPost dari file add-post.service.ts.

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

Membuat REST API untuk Add Post

Mari buat titik akhir REST API untuk menambahkan entri blog ke database MongoDB. Di file server/app.js, buat end point API seperti yang ditunjukkan:

Pertama, Anda perlu terhubung ke database MongoDB menggunakan klien Mongoose.

Setelah koneksi selesai, Anda perlu membuat objek model menggunakan skema Post yang didefinisikan di file server/model/post.js.

Seperti yang terlihat pada kode di atas, Anda membuat objek Post dengan menggunakan title dan description yang dilewatkan dari permintaan objek req.

Panggil method save pada objek Post untuk menyimpan entri ke MongoDB.

Seperti yang terlihat pada kode di atas, sekali method save callback dipanggil tanpa error, maka akan mengembalikan pesan success beserta objek doc yang dikembalikan.

Berikut adalah bagaimana end point REST API akhirnya terlihat:

Simpan perubahan di atas dan restart server Angular dan Node. Masuk ke aplikasi dan coba tambahkan entri blog baru. Setelah Anda mengklik tombol Add, periksa konsol browser dan Anda akan mendapatkan respons keberhasilan yang tercatat.

Bila rincian posting blog ditambahkan ke database berhasil, Anda perlu menutup popup. Untuk menutup popup, ada tombol close yang perlu anda klik secara terprogram.

Anda akan menggunakan dekorator @ViewChild untuk mengakses tombol close.

Import ViewChild dan ElementRef di AddPostComponent.

Di dalam AddPostComponent, tentukan variabel berikut ini:

Memulai klik closeBtn menggunakan kode berikut:

Tambahkan kode diatas ke success callback metode addPost. Berikut adalah metode addPost dari add-post.component.ts.

Simpan perubahan dan restart server klien. Masuk ke aplikasi dan coba tambahkan entri blog baru. Setelah rincian posting blog berhasil disimpan, popup akan ditutup.

Merefresh Daftar Blog

Satu hal yang perlu diperhatikan adalah bahwa posting blog yang baru ditambahkan tidak muncul dalam daftar posting blog. Jadi Anda perlu menambahkan pemicu/trigger untuk memberi tahu kapan harus memperbarui ShowPostComponent. Anda akan memanfaatkan common service untuk berkomunikasi di antara kedua komponen tersebut.

Buat folder yang disebut service di dalam folder src/aplikasi. Buat sebuah file bernama common.service.ts dengan kode berikut:

Seperti yang terlihat pada kode di atas, Anda telah menyatakan Subject yang disebut postAdded_Observable untuk melacak penambahan posting blog baru ke database. Setiap kali sebuah posting blog baru ditambahkan ke database, Anda akan memanggil metode notifyPostAddition, yang akan memberitahukan pelanggan tentang update.

Impor CommonService ke app.module.ts dan sertakan dalam daftar penyedia NgModule. Begini tampilannya:

Import CommonService di file show-post.component.ts dan menginisialisasi dalam metode konstruktor.

Di dalam method ngOnInit, subscribe variabel postAdded_Observable dan memuat metode getAllPost. Beginilah cara metode ngOnInit:

Import CommonService di file add-post.component.ts dan panggil metode notifyPostAddition begitu posting blog telah ditambahkan. Berikut adalah bagaimana metode addPost dari AddPostComponent terlihat:

Simpan perubahan di atas dan restart server klien. Masuk ke aplikasi dan tambahkan entri blog baru. Setelah ditambahkan, daftar posting blog akan diperbarui dengan posting blog baru.

Menyimpulkan

Dalam tutorial ini, Anda membuat AddPostComponent untuk menambahkan rincian posting blog ke database MongoDB. Anda membuat REST API untuk menyimpan entri blog ke database MongoDB menggunakan klien Mongoose.

Di bagian selanjutnya dari rangkaian ini, Anda akan menerapkan fungsionalitas untuk mengedit dan memperbarui detail posting blog.

Kode sumber untuk tutorial ini tersedia di GitHub.

Bagaimana pengalaman Anda sejauh ini? Beri tahu saya saran berharga Anda di komentar di bawah ini.

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.