How To Build A Blog With Angular

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.

git clone https://github.com/royagasthyan/ShowPost AddPost

Arahkan ke direktori proyek dan instal dependensi yang diperlukan.

cd AddPost/client npm install cd  AddPost/server npm install

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

cd AddPost/client npm start cd  AddPost/server node app.js

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:

import { Component } from '@angular/core'; import { Post } from '../models/post.model';  @Component({   selector: 'app-add-post',   templateUrl: './add-post.component.html',   styleUrls: ['./add-post.component.css'] }) export class AddPostComponent {    constructor() {      }  }

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

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">     <div class="modal-dialog" role="document">         <div class="modal-content">             <div class="modal-header">                 <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>                 <button type="button" #closeBtn class="close" data-dismiss="modal" aria-label="Close">               <span aria-hidden="true">&times;</span>             </button>             </div>             <div class="modal-body">                   <form>                     <div class="form-group">                         <label for="exampleInputEmail1">Title</label>                         <input name="title" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter title">                     </div>                     <div class="form-group">                         <label for="exampleInputPassword1">Description</label>                         <textarea name="description" class="form-control" id="exampleInputPassword1" placeholder="Password">                         </textarea>                     </div>                                           <button type="button" class="btn btn-primary">Add</button>                 </form>               </div>         </div>     </div> </div>

Anda akan menampilkan komponen add post sebagai popup.

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

import { AddPostComponent } from './add-post/add-post.component';

Tambahkan komponen ke daftar NgModule declarations. Begini tampilannya:

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ROUTING } from './app.routing'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http';  import { RootComponent } from './root/root.component'; import { LoginComponent } from './login/login.component'; import { HomeComponent } from './home/home.component'; import { ShowPostComponent } from './show-post/show-post.component'; import { AddPostComponent } from './add-post/add-post.component';   @NgModule({   declarations: [     RootComponent,     LoginComponent,     HomeComponent,     ShowPostComponent,     AddPostComponent   ],   imports: [     BrowserModule,     ROUTING,     FormsModule,     HttpClientModule   ],   providers: [],   bootstrap: [RootComponent] }) export class AppModule { }

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

<button type="button" class="btn btn-link" data-toggle="modal" data-target="#exampleModal">   Add </button>

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

Menerapkan Fungsi Add Post

Tambahkan perintah ngModel ke elemen input untuk title dan description.

<input name="title" type="text" [(ngModel)]="post.title" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter title"> <textarea name="description" [(ngModel)]="post.description" class="form-control" id="exampleInputPassword1" placeholder="Password"> </textarea>

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

<button (click)="addPost()" type="button" class="btn btn-primary">Add</button>

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

import { Post } from '../models/post.model';

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

public post : Post;

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:

addPost() {   if(this.post.title && this.post.description){     // call the service method to add post   } else {   	alert('Title and Description required');   } }

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

import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Post } from '../models/post.model';  @Injectable() export class AddPostService {      constructor(private http: HttpClient){  	}  }

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

addPost(post: Post){ 	return this.http.post('/api/post/createPost',{ 		title : post.title, 		description : post.description 	}) }

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.

this.addPostService.addPost(this.post).subscribe(res =>{   	// response from REST API call });

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

import { Component } from '@angular/core'; import { AddPostService } from './add-post.service'; import { Post } from '../models/post.model';  @Component({   selector: 'app-add-post',   templateUrl: './add-post.component.html',   styleUrls: ['./add-post.component.css'],   providers: [ AddPostService ] }) export class AddPostComponent {    public post : Post;    constructor(private addPostService: AddPostService) {       this.post = new Post();   }    addPost() {   	if(this.post.title && this.post.description){   		this.addPostService.addPost(this.post).subscribe(res =>{   		    console.log('response is ', res)   		});   	} else {   		alert('Title and Description required');   	}   }  }

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:

app.post('/api/post/createPost', (req, res) => {     // insert the details to MongoDB })

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

mongoose.connect(url, { useMongoClient: true }, function(err){ 	if(err) throw err; 	console.log('connection established '); });

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

const post = new Post({ 	title: req.body.title, 	description: req.body.description })

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.

post.save((err, doc) => { 	if(err) throw err; 	return res.status(200).json({ 		status: 'success', 		data: doc 	}) })

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:

app.post('/api/post/createPost', (req, res) => {     mongoose.connect(url, { useMongoClient: true }, function(err){ 		if(err) throw err; 		const post = new Post({ 			title: req.body.title, 			description: req.body.description 		}) 		post.save((err, doc) => { 			if(err) throw err; 			return res.status(200).json({ 				status: 'success', 				data: doc 			}) 		}) 	}); })

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.

import { Component, ViewChild, ElementRef } from '@angular/core';

Di dalam AddPostComponent, tentukan variabel berikut ini:

@ViewChild('closeBtn') closeBtn: ElementRef;

Memulai klik closeBtn menggunakan kode berikut:

this.closeBtn.nativeElement.click();

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

addPost() {   if(this.post.title && this.post.description){   	this.addPostService.addPost(this.post).subscribe(res =>{   		this.closeBtn.nativeElement.click();   	});   } else {   	alert('Title and Description required');   } }

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:

import { Injectable } from '@angular/core'; import { Subject }    from 'rxjs/Subject';  @Injectable() export class CommonService {      public postAdded_Observable = new Subject();  	constructor(){  	}  	notifyPostAddition(){ 		this.postAdded_Observable.next(); 	}  }

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 { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ROUTING } from './app.routing'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http';  import { RootComponent } from './root/root.component'; import { LoginComponent } from './login/login.component'; import { HomeComponent } from './home/home.component'; import { ShowPostComponent } from './show-post/show-post.component'; import { AddPostComponent } from './add-post/add-post.component'; import { CommonService } from './service/common.service';   @NgModule({   declarations: [       RootComponent,     LoginComponent,     HomeComponent,     ShowPostComponent,     AddPostComponent   ],   imports: [     BrowserModule,     ROUTING,     FormsModule,     HttpClientModule   ],   providers: [CommonService],   bootstrap: [RootComponent] }) export class AppModule { }

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

import { CommonService } from '../service/common.service';

constructor(private showPostService: ShowPostService, private commonService: CommonService) {        }

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

ngOnInit(){     this.getAllPost();      this.commonService.postAdded_Observable.subscribe(res => {       this.getAllPost();     }); }

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:

addPost() {   if(this.post.title && this.post.description){   	this.addPostService.addPost(this.post).subscribe(res =>{   	this.closeBtn.nativeElement.click();     this.commonService.notifyPostAddition();   	});   } else {   	alert('Title and Description required');   } }

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.