Advertisement
  1. Code
  2. Angular

Membuat Aplikasi Blogging Menggunakan Angular & MongoDB: Menampilkan 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: Home
Creating a Blogging App Using Angular & MongoDB: Add Post

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Dalam bagian terakhir dari seri tutorial, anda melihat bagaimana menulis REST API endpoint untuk login pengguna. Anda menggunakan Mongoose untuk berinteraksi dengan MongoDB dari Node. Setelah berhasil tervalidasi, anda melihat bagaimana menggunakan Angular Router untuk menavigasi ke HomeComponent.

Di bagian seri tutorial ini, anda akan membuat sebuah komponen untuk daftar rincian posting blog pada home page.

Persiapan

Mari kita mulai dengan cloning source code dari bagian terakhir dari seri tutorial.

Navigasikan ke direktori proyek dan menginstal dependensi yang diperlukan.

Setelah Anda memiliki dependensi yang terinstal, restart aplikasi client dan server.

Arahkan browser Anda ke http://localhost:4200 dan anda harus menjalankan aplikasi.

Angular Blogging AppAngular Blogging AppAngular Blogging App

Menciptakan komponen yang posting Tampilkan

Setelah pengguna mendapatkan login ke aplikasi, Anda akan menampilkan HomeComponent. HomeComponent bertindak seperti komponen pembungkus untuk semua komponen yang ditampilkan di dalamnya. Anda akan menampilkan daftar posting blog yang ditambahkan oleh pengguna di HomeComponent.

Untuk menampilkan posting blog, mari kita membuat komponen baru yang bernama ShowPostComponent. Buat sebuah folder bernama show-post di dalam folder src/app. Di dalam folder show-post, buat file bernama show-post.component.html dan menambahkan kode HTML berikut:

Buat file bernama show-post.component.ts yang akan berisi class ShowPostComponent. Berikut adalah tampilannya:

Impor ShowPostComponent dalam app.module.ts file.

Tambahkan ShowPostComponent  di NgModule dalam app.module.ts file.

Memodifikasi file home.component.html untuk menginclude ShowPostComponent selector.

Berikut adalah tampilan file home.component.html:

Simpan perubahan di atas dan refresh client application. Saat login ke dalam aplikasi, Anda akan dapat melihat posting blog yang terdaftar.

Angular Blog App - Show Post ComponentAngular Blog App - Show Post ComponentAngular Blog App - Show Post Component

Membuat Show Post Component Service

Data yang ditampilkan dalam Layanan ShowPostComponent menampilkan data hard-coded. Anda akan memerlukan layanan untuk query daftar posting blog dari MongoDB database. Mari kita membuat sebuah layanan untuk ShowPostComponent Anda.

Buat file bernama show-post.service.ts di src/app/show-post dan tambahkan kode berikut:

Di dalam ShowPostService, buatlah metode yang bernama getAllPost, yang akan membuat panggilan REST API untuk mendapatkan daftar posting blog. Berikut adalah tampilannya:

Berikut adalah tampilan file show-post.service.ts:

Selanjutnya, Anda perlu untuk menuliskan REST API untuk query MongoDB collection untuk mendapatkan daftar posting blog.

Di sisi server, mari kita mulai dengan membuat model untuk posting. Di dalam folder models, buatlah sebuah file bernama post.js. Memerlukan modul Mongoose dan membuat skema untuk posting blog dan ekspor. Berikut adalah tampilan /server/models/post.js:

Ekspor file post.js yang ditentukan di atas di app.js.

Membuat API endpoint /api/post/getAllPost untuk mengambil daftar posting blog. Menggunakan mongoose client untuk menyambung ke MongoDB database.

Setelah koneksi Anda terjalin, anda dapat menggunakan Post model untuk menemukan daftar posting blog.

callback .find mengembalikan daftar dokumen.

Kembalian dokumen akan di urutkan dengan ascending, jadi tambahkan kondisi untuk mengurutkan posting blog dalam urutan descending.

Setelah Anda memiliki list data hasil query dari database, kembalian berisi data dan status. Berikut adalah tampilan REST API:

Membuat panggilan API

Dalam file show-post.component.ts, definisikan sebuah list array untuk menjaga hasil panggilan API.

Import ShowPostService di ShowPostComponent.

Tambahkan ShowPostService sebagai provider untuk ShowPostComponent.

Definisikan sebuah method yang disebut getAllPost untuk membuat panggilan ke service method. Berikut adalah tampilannya:

Seperti yang terlihat dalam kode di atas, data hasil diatur ke variabel posting.

Buat panggilan ke metode yang didefinisikan di atas dari metode ngOnInit, sehingga detail posting blog diambil segera setelah komponen diinisialisasi.

Berikut adalah tampilan file show-post.component.ts:

Merender Posting Blog

Collection MongoDB mungkin tidak memiliki entri untuk query. Jadi mari kita tambahkan beberapa entri di MongoDB dari mongo shell.

Masukkan MongoDB shell dengan mengetik perintah berikut:

Setelah anda memasukkan mongo shell, periksa database tersedia dalam MongoDB database.

Pilih blogDb database dari entri yang terdaftar.

Buatlah collection bernama post.

Masukkan beberapa entri ke dalam post collection.

Sekarang mari kita bind variabel posts kita di ShowPostComponent ke kode HTML.

Anda akan membuat penggunaan ngFor direktif untuk iterate melalui variabel posts dan menampilkan posting blog. Memodifikasi file show-post.component.html seperti yang ditunjukkan:

Simpan perubahan di atas dan restart klien dan server REST API. Sign in ke aplikasi dan anda akan memiliki records yang dimasukkan dari MongoDB yang ditampilkan pada home page.

Angular Blog App - Dynamic Blog Post ListingAngular Blog App - Dynamic Blog Post ListingAngular Blog App - Dynamic Blog Post Listing

Membungkusnya

Dalam tutorial ini, anda membuat ShowPostComponent untuk menampilkan detail posting blog dari MongoDB database. Anda membuat REST API untuk query ke database MongoDB menggunakan Mongoose klien dari Node server.

Dalam bagian selanjutnya dari seri tutorial, Anda akan mempelajari cara membuat AddPostComponent untuk menambahkan posting baru dari antarmuka pengguna aplikasi.

Source code untuk tutorial ini tersedia di GitHub.

Bagaimanakah pengalaman Anda sejauh ini? Beritahu 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.