Selamat Malam Kali ini kita akan membuat MEAN (MongoDB Express.js Angular.Js Node.js) CRUD. Kami menggunakan Angular CLI versi terbaru yaitu versi 8, Untuk BackEnd nya kita menggunakan Node.js dan Express.js dan untuk databasenya kita menggunakan MongoDB
#Prequisites
-telah menginstall Node.js versi terbaru
-telah menginstall MongoDB
Langkah pertama
Buatlah projek baru dengan nama angular8crud menggunakan angular cli dengan perintah
ng new angular8crud
kemudian masuk ke folder projek dan buka dengan code editor disini saya menggunakan visual studio code
cd angular8crud
code .
kemudian tambahkan css pada angular.json disni saya menggunakan bootstrap 4
"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
kemudian jalankan Angular server development dengan perintah
ng serve -o
nanti akan terbuka laman baru di browser dengan alamat http://localhost:4200/ menampilkan halaman awal angular
#1 Deskripsi Projek
Kita akan membuat Backend dengan Node.js dengan field ProductName, ProductDescription, dan ProductPrice
#2 Menggenerate Angular Component
ng g c product-add --skipTests=true
ng g c product-get --skipTests=true
ng g c product-edit --skipTests=true
sesuaikan kode app-routing.module.ts seperti berikut:
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductAddComponent } from './product-add/product-add.component';
import { ProductEditComponent } from './product-edit/product-edit.component';
import { ProductGetComponent } from './product-get/product-get.component';
const routes: Routes = [
{
path: 'product/create',
component: ProductAddComponent
},
{
path: 'edit/:id',
component: ProductEditComponent
},
{
path: 'products',
component: ProductGetComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
#3 Membuat Navigasi
masukan kode berikut pada app.component.html
<nav class="navbar navbar-expand-sm bg-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a routerLink="product/create" class="nav-link" routerLinkActive="active">
Create Product
</a>
</li>
<li class="nav-item">
<a routerLink="products" class="nav-link" routerLinkActive="active">
Products
</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<router-outlet></router-outlet>
</div>
#4 Konfigurasi Angular Router Progres Indicator
kita akan menginstall library ng2-slim-loading-bar dan rxjs untuk menjembatani angular8 dengan package pihak-ketiga
npm install ng2-slim-loading-bar --save
npm install rxjs-compat --save
selanjutnya import SlimLoadingBarModule pada app.module.ts
// app.module.ts
import { SlimLoadingBarModule } from 'ng2-slim-loading-bar';
imports: [
...
SlimLoadingBarModule
],
lalu tambhkan library css pada style.css di folder src
@import "../node_modules/ng2-slim-loading-bar/style.css";
#5Menambahkan Router Event
sekarang tambahkan kode berikut ke app.compnent.ts
// app.component.ts
import { Component } from '@angular/core';
import {SlimLoadingBarService} from 'ng2-slim-loading-bar';
import { NavigationCancel,
Event,
NavigationEnd,
NavigationError,
NavigationStart,
Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular8tutorial';
constructor(private loadingBar: SlimLoadingBarService, private router: Router) {
this.router.events.subscribe((event: Event) => {
this.navigationInterceptor(event);
});
}
private navigationInterceptor(event: Event): void {
if (event instanceof NavigationStart) {
this.loadingBar.start();
}
if (event instanceof NavigationEnd) {
this.loadingBar.complete();
}
if (event instanceof NavigationCancel) {
this.loadingBar.stop();
}
if (event instanceof NavigationError) {
this.loadingBar.stop();
}
}
}
Selanjutnya tambahkan angular ng2-slim-loading-bar ke dalam app.componet.html
<!-- app.component.html -->
<ng2-slim-loading-bar color="blue"></ng2-slim-loading-bar>
<nav class="navbar navbar-expand-sm bg-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a routerLink="product/create" class="nav-link" routerLinkActive="active">
Create Product
</a>
</li>
<li class="nav-item">
<a routerLink="products" class="nav-link" routerLinkActive="active">
Products
</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<router-outlet></router-outlet>
</div>
#6 Menambahkan Bootstrap form HTML
tambahkan kode html berikut pada product-add.component.html
<!-- product-add.component.html -->
<div class="card">
<div class="card-body">
<form>
<div class="form-group">
<label class="col-md-4">Product Name</label>
<input type="text" class="form-control" />
</div>
<div class="form-group">
<label class="col-md-4">Product Description </label>
<textarea class="form-control" rows = 7 cols = "5"></textarea>
</div>
<div class="form-group">
<label class="col-md-4">Product Price</label>
<input type="text" class="form-control" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Create Product</button>
</div>
</form>
</div>
</div>
#7 Membuat Angular Form Validation
Import ReactiveFormModule ke dalam file app.module.ts
// app.module.ts
import { ReactiveFormsModule } from '@angular/forms';
imports: [
...
ReactiveFormsModule
],
Selanjutnya pada file product-add.component.ts kita akan mengimport FormGroup, FormBuilder, Validators modules dari @angular/forms
// product-add.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-product-add',
templateUrl: './product-add.component.html',
styleUrls: ['./product-add.component.css']
})
export class ProductAddComponent implements OnInit {
angForm: FormGroup;
constructor(private fb: FormBuilder) {
this.createForm();
}
createForm() {
this.angForm = this.fb.group({
ProductName: ['', Validators.required ],
ProductDescription: ['', Validators.required ],
ProductPrice: ['', Validators.required ]
});
}
ngOnInit() {
}
}
sekarang tambahkan kode berikut pada product-add.component.html
<!-- product-add.component.html -->
<div class="card">
<div class="card-body">
<form [formGroup]="angForm" novalidate>
<div class="form-group">
<label class="col-md-4">Product Name</label>
<input type="text" class="form-control"
formControlName="ProductName"
#ProductName />
</div>
<div *ngIf="angForm.controls['ProductName'].invalid && (angForm.controls['ProductName'].dirty || angForm.controls['ProductName'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['ProductName'].errors.required">
Product Name is required.
</div>
</div>
<div class="form-group">
<label class="col-md-4">Product Description </label>
<textarea class="form-control" rows = 7 cols = "5"
formControlName="ProductDescription"
#ProductDescription></textarea>
</div>
<div *ngIf="angForm.controls['ProductDescription'].invalid && (angForm.controls['ProductDescription'].dirty || angForm.controls['ProductDescription'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['ProductDescription'].errors.required">
Product Description is required.
</div>
</div>
<div class="form-group">
<label class="col-md-4">Product Price</label>
<input type="text" class="form-control"
formControlName="ProductPrice"
#ProductPrice
/>
</div>
<div *ngIf="angForm.controls['ProductPrice'].invalid && (angForm.controls['ProductPrice'].dirty || angForm.controls['ProductPrice'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['ProductPrice'].errors.required">
Product Price is required.
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"
[disabled]="angForm.pristine || angForm.invalid" >
Create Product
</button>
</div>
</form>
</div>
</div>
#8 Menambahkan dan mengkonfigurasi HttpClientModule
Import HttpClientModule kedalam file app.module.ts
// app.module.ts
import { HttpClientModule } from '@angular/common/http';
imports: [
...
HttpClientModule
],
#9 Membuat TypeScript Model file
di dalam folder src -> app, buat file baru dengan nama Product.ts dan masukan kode berikut
// Product.ts
export default class Product {
ProductName: string;
ProductDescription: string;
ProductPrice: number;
}
10 Membuat Angular Service file
fungsi utama service ini untuk menangani AJAX request dari backend server ke frontend
ng g service products --skipTests=true
sesuaikan file product.service.ts sebagai berikut:
// products.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ProductsService {
constructor() { }
}
sekarang import products.service.ts ke dalam app.module.ts
// app.module.ts
import { ProductsService } from './products.service';
providers: [ ProductsService ],
#11 Submit Form ke dalam Node Server
buat sebuah file products.service.ts dan masukan kode berikut:
// products.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ProductsService {
uri = 'http://localhost:4000/products';
constructor(private http: HttpClient) { }
addProduct(ProductName, ProductDescription, ProductPrice) {
const obj = {
ProductName,
ProductDescription,
ProductPrice
};
console.log(obj);
this.http.post(`${this.uri}/add`, obj)
.subscribe(res => console.log('Done'));
}
}
tambahkan Add Product Button di dalam product-add.component.html
<div class="form-group">
<button (click) = "addProduct(ProductName.value, ProductDescription.value, ProductPrice.value)" type="submit" class="btn btn-primary"
[disabled]="angForm.pristine || angForm.invalid" >
Create Product
</button>
</div>
tambahkan fungsi addProduct dalam file product-add.component.ts
// product-add.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ProductsService } from '../products.service';
@Component({
selector: 'app-product-add',
templateUrl: './product-add.component.html',
styleUrls: ['./product-add.component.css']
})
export class ProductAddComponent implements OnInit {
angForm: FormGroup;
constructor(private fb: FormBuilder, private ps: ProductsService) {
this.createForm();
}
createForm() {
this.angForm = this.fb.group({
ProductName: ['', Validators.required ],
ProductDescription: ['', Validators.required ],
ProductPrice: ['', Validators.required ]
});
}
addProduct(ProductName, ProductDescription, ProductPrice) {
this.ps.addProduct(ProductName, ProductDescription, ProductPrice);
}
ngOnInit() {
}
}
#12 Membuat Backend API di Node.js
di dalam root folder buat folder baru dengan nama api
kemudian buka terminal dan ketikan perintah
npm init -y
kemudian install beberapa modul
npm install express body-parser cors mongoose --save
kemudian kita install nodemon server dan kita modifikasi file server.js agar node.js server bisa restart otomatis
npm install nodemon --save-dev
kemudian di dalam folder api buat file baru dengan nama server.js
// server.js
const express = require('express'),
path = require('path'),
bodyParser = require('body-parser'),
cors = require('cors'),
mongoose = require('mongoose');
const app = express();
let port = process.env.PORT || 4000;
const server = app.listen(function(){
console.log('Listening on port ' + port);
});
kemudian kita akan mengkoneksikan dengan database MongoDB tetapi sebelumnya harus menginstall dulu MongoDB nya dan menstart mongoDB server dengan perintah
mongod
//atau jika di windows
net start mongodb
sekarang kita sudah terhubung ke database,
kemudian buat file baru dengan nama DB.js di dalam folder api dan masukan kode berikut:
// DB.js
module.exports = {
DB: 'mongodb://localhost:27017/ng8crud'
};
kemudian ubah file server.js seperti di bawah agar aplikasi kita terhubung dengan node.js server
// server.js
const express = require('express'),
path = require('path'),
bodyParser = require('body-parser'),
cors = require('cors'),
mongoose = require('mongoose'),
config = require('./DB');
mongoose.Promise = global.Promise;
mongoose.connect(config.DB, { useNewUrlParser: true }).then(
() => {console.log('Database is connected') },
err => { console.log('Can not connect to the database'+ err)}
);
const app = express();
app.use(bodyParser.json());
app.use(cors());
const port = process.env.PORT || 4000;
const server = app.listen(port, function(){
console.log('Listening on port ' + port);
});
simpan perubahan di server.js dan buka terminal untuk start server node.js dengan perintah
nodemon server
Sekarang kita mempunyai tiga server yang berjalan
1. Angular Development server untuk frontend
2. Nodemon server untuk Backend
3. MongoDB server untuk database
#13 Membuat Route dan Model file
didalam folder api buat dua buah folder baru dengan nama routes dan models
di dalam models folder buat sebuah file dengan nama Product.js
// Product.js
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
// Define collection and schema for Product
let Product = new Schema({
ProductName: {
type: String
},
ProductDescription: {
type: String
},
ProductPrice: {
type: Number
}
},{
collection: 'Product'
});
module.exports = mongoose.model('Product', Product);
didalam folder routes buat file baru dengan nama product.route.js dan masukan kode berikut:
// product.route.js
const express = require('express');
const app = express();
const productRoutes = express.Router();
// Require Product model in our routes module
let Product = require('../models/Product');
// Defined store route
productRoutes.route('/add').post(function (req, res) {
let product = new Product(req.body);
product.save()
.then(product => {
res.status(200).json({'Product': 'Product has been added successfully'});
})
.catch(err => {
res.status(400).send("unable to save to database");
});
});
// Defined get data(index or listing) route
productRoutes.route('/').get(function (req, res) {
Product.find(function (err, products){
if(err){
console.log(err);
}
else {
res.json(products);
}
});
});
// Defined edit route
productRoutes.route('/edit/:id').get(function (req, res) {
let id = req.params.id;
Product.findById(id, function (err, product){
res.json(product);
});
});
// Defined update route
productRoutes.route('/update/:id').post(function (req, res) {
Product.findById(req.params.id, function(err, product) {
if (!product)
res.status(404).send("Record not found");
else {
product.ProductName = req.body.ProductName;
product.ProductDescription = req.body.ProductDescription;
product.ProductPrice = req.body.ProductPrice;
product.save().then(product => {
res.json('Update complete');
})
.catch(err => {
res.status(400).send("unable to update the database");
});
}
});
});
// Defined delete | remove | destroy route
productRoutes.route('/delete/:id').get(function (req, res) {
Product.findByIdAndRemove({_id: req.params.id}, function(err, product){
if(err) res.json(err);
else res.json('Successfully removed');
});
});
module.exports = productRoutes;
tambhkan product route ke server.js
// server.js
const express = require('express'),
path = require('path'),
bodyParser = require('body-parser'),
cors = require('cors'),
mongoose = require('mongoose'),
config = require('./DB');
const productRoute = require('./routes/product.route');
mongoose.Promise = global.Promise;
mongoose.connect(config.DB, { useNewUrlParser: true }).then(
() => {console.log('Database is connected') },
err => { console.log('Can not connect to the database'+ err)}
);
const app = express();
app.use(bodyParser.json());
app.use(cors());
app.use('/products', productRoute);
const port = process.env.PORT || 4000;
const server = app.listen(port, function(){
console.log('Listening on port ' + port);
});
#14 Menyimpan data ke database MongoDB
Masukan isian form di menu create product lalu submit
kemudian buka mongoDB untuk melihat apakah data sudah tersimpan di database atau belum
#15 Menampilkan data pada Angular FrontEnd
masukan kode berikut pada product-get.component.html:
<!-- product-get.component.html -->
<table class="table table-hover">
<thead>
<tr>
<td>Product Name</td>
<td>Product Description</td>
<td>Product Price</td>
<td colspan="2">Actions</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let product of products">
<td>{{ product.ProductName }}</td>
<td>{{ product.ProductDescription }}</td>
<td>{{ product.ProductPrice }}</td>
<td><a [routerLink]="['/edit', product._id]" class="btn btn-primary">Edit</a></td>
<td><a [routerLink]="" class="btn btn-danger">Delete</a></td>
</tr>
</tbody>
</table>
di dalam products.service.ts masukan fungsi getProducts() untuk fetching data dari database ke Aplikasi Angular
// products.service.ts
getProducts() {
return this
.http
.get(`${this.uri}`);
}
Sekarang kita include products.service.ts file dan Product.ts file kedalam product-get.component.ts
// product-get.component.ts
import { Component, OnInit } from '@angular/core';
import Product from '../Product';
import { ProductsService } from '../products.service';
@Component({
selector: 'app-product-get',
templateUrl: './product-get.component.html',
styleUrls: ['./product-get.component.css']
})
export class ProductGetComponent implements OnInit {
products: Product[];
constructor(private ps: ProductsService) { }
ngOnInit() {
this.ps
.getProducts()
.subscribe((data: Product[]) => {
this.products = data;
});
}
}
cek di browser dengan membuka URL: http://localhost:4200/products
#16 Edit dan Update
tambahkan kode berikut ke dalam file product-edit.component.ts:
// product-edit.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { ProductsService } from '../products.service';
@Component({
selector: 'app-product-edit',
templateUrl: './product-edit.component.html',
styleUrls: ['./product-edit.component.css']
})
export class ProductEditComponent implements OnInit {
angForm: FormGroup;
product: any = {};
constructor(private route: ActivatedRoute, private router: Router, private ps: ProductsService, private fb: FormBuilder) {
this.createForm();
}
createForm() {
this.angForm = this.fb.group({
ProductName: ['', Validators.required ],
ProductDescription: ['', Validators.required ],
ProductPrice: ['', Validators.required ]
});
}
ngOnInit() {
this.route.params.subscribe(params => {
this.ps.editProduct(params['id']).subscribe(res => {
this.product = res;
});
});
}
}
di dalam products.service.ts tambhkan fungsi editProduct
// products.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ProductsService {
uri = 'http://localhost:4000/products';
constructor(private http: HttpClient) { }
addProduct(ProductName, ProductDescription, ProductPrice) {
console.log(ProductName, ProductDescription, ProductPrice);
const obj = {
ProductName,
ProductDescription,
ProductPrice
};
this.http.post(`${this.uri}/add`, obj)
.subscribe(res => console.log('Done'));
}
getProducts() {
return this
.http
.get(`${this.uri}`);
}
editProduct(id) {
return this
.http
.get(`${this.uri}/edit/${id}`);
}
}
kemudian kita buat html form untuk edit dengan nama product-edit.component.html
<!-- product-edit.component.html -->
<div class="card">
<div class="card-body">
<form [formGroup]="angForm" novalidate>
<div class="form-group">
<label class="col-md-4">Product Name</label>
<input type="text" class="form-control"
formControlName="ProductName"
#ProductName
[(ngModel)] = "product.ProductName"/>
</div>
<div *ngIf="angForm.controls['ProductName'].invalid && (angForm.controls['ProductName'].dirty || angForm.controls['ProductName'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['ProductName'].errors.required">
Product Name is required.
</div>
</div>
<div class="form-group">
<label class="col-md-4">Product Description </label>
<textarea class="form-control" rows = 7 cols = "5"
formControlName="ProductDescription"
#ProductDescription [(ngModel)] = "product.ProductDescription"></textarea>
</div>
<div *ngIf="angForm.controls['ProductDescription'].invalid && (angForm.controls['ProductDescription'].dirty || angForm.controls['ProductDescription'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['ProductDescription'].errors.required">
Product Description is required.
</div>
</div>
<div class="form-group">
<label class="col-md-4">Product Price</label>
<input type="text" class="form-control"
formControlName="ProductPrice"
#ProductPrice
[(ngModel)] = "product.ProductPrice"
/>
</div>
<div *ngIf="angForm.controls['ProductPrice'].invalid && (angForm.controls['ProductPrice'].dirty || angForm.controls['ProductPrice'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['ProductPrice'].errors.required">
Product Price is required.
</div>
</div>
<div class="form-group">
<button (click) = "updateProduct(ProductName.value, ProductDescription.value, ProductPrice.value)" type="submit" class="btn btn-primary"
[disabled]="angForm.invalid" >
Update Product
</button>
</div>
</form>
</div>
</div>
sekarang kita tambhkan fungsi update di products.service.ts
// products.service.ts
updateProduct(ProductName, ProductDescription, ProductPrice, id) {
const obj = {
ProductName,
ProductDescription,
ProductPrice
};
this
.http
.post(`${this.uri}/update/${id}`, obj)
.subscribe(res => console.log('Done'));
}
Kemudian buat fungsi updateProduct di product-edit.component.ts
// product-edit.component.ts
updateProduct(ProductName, ProductDescription, ProductPrice, id) {
this.route.params.subscribe(params => {
this.ps.updateProduct(ProductName, ProductDescription, ProductPrice, params.id);
this.router.navigate(['products']);
});
}
#17 Delete Data
Pertama-tama definisikan dulu click even pada tombol delete di product-get.component.html
<!-- product-get.component.html -->
<tbody>
<tr *ngFor="let product of products">
<td>{{ product.ProductName }}</td>
<td>{{ product.ProductDescription }}</td>
<td>{{ product.ProductPrice }}</td>
<td><a [routerLink]="['/edit', product._id]" class="btn btn-primary">Edit</a></td>
<td><a (click) = "deleteProduct(product._id)" class="btn btn-danger">Delete</a>
</tr>
</tbody>
Sekarang buat fungsi deleteProduct function di dalam file product-get.component.ts
// product-get.component.ts
deleteProduct(id) {
this.ps.deleteProduct(id).subscribe(res => {
this.products.splice(id, 1);
});
}
Sekarang buat fungsi deleteProduct() di dalam file product.service.ts kita akan mengirimkan ID dengan AJAx request untuk menghapus data dari backend
// products.service.ts
deleteProduct(id) {
return this
.http
.get(`${this.uri}/delete/${id}`);
}
Akhirnya Selesai juga CRUD nya, jika kode diatas ada yang kurang jelas saya sudah menguploadnya di github,
terimakasih telah mengikuti tutorial ini semoga bermanfaat jika ada yang kurang silkan ditanyakan pada kolom komentar, jika artikel ini bermanfaat silakan di share terimakasih.
.png)
