Angular memang merupakan frontend framework. Biasanya untuk membuat fitur CRUD atau yang berhubungan dengan database kamu akan membutuhkan sebuah backend untuk menanganinya.
Pada artikel kali ini, kamu akan mempelajari bagaimana membuat fitur CRUD pada Angular tanpa menggunakan backend. Yakni langsung berinteraksi dengan data yang ada pada database di Firestore.
Sebagai contoh kasus, kita akan membuat fitur CRUD sederhana untuk manajemen data Barang pada database.
Project Firebase
Pertama kamu harus buka dulu halaman Console Firebase. Kemudian silahkan login menggunakan akun google masing-masing.
Apabila kamu belum memiliki project sebelumnya, silahkan buat project terlebih dahulu, lalu masuk ke dalam project tersebut. Dalam artikel ini, saya membuat project dengan nama angular-crud.
Setelah kamu masuk ke dashboard project, klik tombol yang ditandai pada gambar dibawah ini, untuk mengintegrasikan aplikasi kamu ke firebase.
Kemudian silahkan daftarkan Nama Aplikasi pada form yang tampil. Kamu akan diberikan code konfigurasi firebase seperti apiKey, projectId dsb.
Silahkan simpan code tersebut karna nantinya akan kita gunakan pada Angular untuk mengintegrasikan Angular dengan database di Firestore.
Sekarang coba buka menu Cloud Firestore, ini merupakan halaman dimana kamu dapat melihat data yang berhasil terkirim dari Angular.
Apabila tampilannya tidak seperti diatas, berarti kamu belum memiliki database. Silahkan klik tombol Buat Database dan ikuti instruksi selanjutnya.
Buat Project Angular
Seperti biasa, silahkan buat sebuah project Angular menggunakan perintah ng new angular-firestore pada terminal. Perintah ini akan membuat sebuah project bernama angular-firestore.
Pada project Angular kali ini, kita akan menggunakan CSS Framework yang bernama Semantic-UI.
Untuk menggunakan Semantic via CDN kamu hanya perlu menambahkan link berikut pada index.html yang berada di folder root Angular.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha256-9mbkOfVho3ZPXfM7W8sV2SndrGDuh7wuyLjtsWeTI1Q=" crossorigin="anonymous"/>Konfigurasi Firebase
Sekarang buka file environment.ts yang terdapat pada folder src/environments. Kemudian buat variabel firebaseConfig yang berisi key konfigurasi yang telah kamu dapatkan dari firebase tadi.
export const environment = {
production: false,
firebaseConfig : {
apiKey: "AIzaSyDflIo2rV1kU3WsxOGJI5uDytDmay4Nwyo",
authDomain: "angular-crud-96e65.firebaseapp.com",
projectId: "angular-crud-96e65",
storageBucket: "angular-crud-96e65.appspot.com",
messagingSenderId: "205633528048",
appId: "1:205633528048:web:661debae382967a5a2e235",
measurementId: "G-GJQVQB614L"
}
};Konfigurasi tersebut hanya akan berjalan pada Angular dengan mode Development. Sementara jika kamu ingin masuk ke mode Production, copy variabel firebaseConfig tersebut ke file environment.prod.ts.
Install & Import Module
Ketik perintah berikut pada terminal untuk menginstal dependensi Firebase :
npm install firebase @angular/fireSekarang buka file app.module.ts lalu import module firebase yang kita butuhkan. Sehingga app.module.ts akan terlihat seperti berikut:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { AngularFireModule } from '@angular/fire'; //import baris ini
import { environment } from 'src/environments/environment'; //import baris ini
import { AngularFirestoreModule } from "@angular/fire/firestore"; //import baris ini
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
AngularFireModule.initializeApp(environment.firebaseConfig), //import baris ini
AngularFirestoreModule //import baris ini
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Desain Tampilan
Sesuai dengan yang disebutkan diatas, pada project kali ini kita akan menggunakan Simantic UI, buka file app.component.html lalu ketik kode berikut:
<div class="ui container">
<h1 style="padding-top: 2rem; text-align: center;">Angular CRUD</h1>
<div class="ui form">
<div class="field">
<label>Nama Barang</label>
<input type="text" [(ngModel)]="nama" name="nama" autocomplete="off">
</div>
<div class="field">
<label>Stok</label>
<input type="number" [(ngModel)]="stok" name="stok" autocomplete="off">
</div>
<div class="field">
<label>Harga</label>
<input type="number" [(ngModel)]="harga" name="harga" autocomplete="off">
</div>
<div class="ui inverted primary button" *ngIf="!isEdit" (click)="simpan()">Simpan</div>
<div class="ui inverted primary button" *ngIf="isEdit" (click)="edit()">Perbarui</div>
<div class="ui inverted secondary button" (click)="reset()">Reset</div>
</div>
<table class="ui celled table">
<thead>
<tr class="ui center aligned">
<th>Nama Barang</th>
<th>Stok</th>
<th>Harga</th>
<th>Aksi</th>
</tr>
</thead>
<tbody *ngFor="let item of this.myData" class="ui center aligned">
<tr>
<td data-label="Nama Barang">{{item.namaBarang}}</td>
<td data-label="Stok">{{item.stokBarang.toLocaleString(['id'])}}</td>
<td data-label="Harga">Rp. {{item.hargaBarang.toLocaleString(['id'])}}</td>
<td data-label="Aksi">
<div class="ui buttons">
<button class="ui positive button" (click)="getEdit(item)">Edit</button>
<div class="or" data-text="/"></div>
<button class="ui button" (click)="delete(item)">Hapus</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>syntax [(ngModel)] bertujuan untuk mengambil nilai yang ada pada input type text tersebut. Lalu syntax *ngIf merupakan logika layaknya if else.
...isEdit berarti variabel isEdit berada pada kondisi true dan !isEdit berada pada kondisi false.
Jangan jalankan dulu, karna kamu hanya akan mendapatkan error. Sebab logikan dan fungsinya belum kita buat.
Buat Fungsi dan Logic
Buka file app.component.ts secara default kode kamu akan berbentuk seperti berikut:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-firestore';
constructor(){}
}
Pertama-tama import Angular Firebase.
import { AngularFirestore } from '@angular/fire/firestore';Dekralasikan variabel yang kita butuhkan.
myData: any[] = [];
id;
nama;
stok;
harga;
isEdit;Tambahkan constructor untuk memanggil fungsi yang pertama kali ingin dijalankan.
constructor( private firestore: AngularFirestore ){
this.tampilData();
}Buat fungsi untuk memanggil data dari database. Disini untuk nama collection nya saya buat menjadi "barang".
tampilData() {
let data = this.firestore.collection('barang');
let dataTerbaru = data.valueChanges({ idField: 'id' });
dataTerbaru.subscribe(ss => this.myData = ss);
this.isEdit = false
}Buat fungsi yang bertugas untuk menyimpan data ke database.
simpan() {
let data = {
namaBarang: this.nama,
stokBarang: this.stok,
hargaBarang: this.harga
}
this.firestore.collection('barang')
.add(data)
.then(res => {
console.log(res);
this.tampilData();
this.reset();
})
.catch(e => {
console.log(e);
})
}Buat fungsi untuk menangani event saat user meng-klik tombol edit pada list barang. Sehingga fields barang yang dipilih akan pindah ke dalam form di atasnya.
getEdit(arr) {
this.isEdit = true;
this.id = arr.id;
this.nama = arr.namaBarang;
this.stok = arr.stokBarang;
this.harga = arr.hargaBarang;
}Buat fungsi yang bertugas meng-edit data pada database.
edit() {
let data = {
namaBarang: this.nama,
stokBarang: this.stok,
hargaBarang: this.harga
}
this.firestore.collection('barang')
.doc(this.id)
.update(data)
.then(res => {
console.log(res);
this.tampilData();
this.reset();
})
.catch(e => {
console.log(e);
})
}Buat fungsi yang menangani event saat user meng-klik tombol hapus pada list barang.
delete(arr) {
this.firestore.collection('barang')
.doc(arr.id)
.delete()
.then(res => {
console.log(res);
this.tampilData();
this.reset();
})
.catch(e => {
console.log(e);
})
}Terakhir, buat fungsi yang bertugas untuk me-reset form.
reset() {
this.isEdit = false;
this.nama = "";
this.stok = "";
this.harga = "";
}Sehingga secara keseluruhan, kode pada app.component.ts akan berbentuk seperti berikut:
import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-firestore';
myData: any[] = [];
id;
nama;
stok;
harga;
isEdit;
constructor( private firestore: AngularFirestore ){
this.tampilData();
}
tampilData() {
let data = this.firestore.collection('barang');
let dataTerbaru = data.valueChanges({ idField: 'id' });
dataTerbaru.subscribe(ss => this.myData = ss);
this.isEdit = false
}
simpan() {
let data = {
namaBarang: this.nama,
stokBarang: this.stok,
hargaBarang: this.harga
}
this.firestore.collection('barang')
.add(data)
.then(res => {
console.log(res);
this.tampilData();
this.reset();
})
.catch(e => {
console.log(e);
})
}
getEdit(arr) {
this.isEdit = true;
this.id = arr.id;
this.nama = arr.namaBarang;
this.stok = arr.stokBarang;
this.harga = arr.hargaBarang;
}
edit() {
let data = {
namaBarang: this.nama,
stokBarang: this.stok,
hargaBarang: this.harga
}
this.firestore.collection('barang')
.doc(this.id)
.update(data)
.then(res => {
console.log(res);
this.tampilData();
this.reset();
})
.catch(e => {
console.log(e);
})
}
delete(arr) {
this.firestore.collection('barang')
.doc(arr.id)
.delete()
.then(res => {
console.log(res);
this.tampilData();
this.reset();
})
.catch(e => {
console.log(e);
})
}
reset() {
this.isEdit = false;
this.nama = "";
this.stok = "";
this.harga = "";
}
}
Jalankan Aplikasi
Silahkan jalankan aplikasi dengan menggunakan perintah ng serve pada terminal. Silahkan buka browser dan arahkan ke url http://localhost:4200.
Sekarang silahkan lakukan pengujian terhadap aplikasi tersebut. Kemudian untuk memastikan datanya masuk atau tidak ke database, kamu dapat melihatnya langsung di Cloud Firestore.
Kesimpulan
Pada artikel kali ini kamu telah belajar bagaimana membuat project di Firebase, menggunakan database Cloud Firestore dan juga membuat aplikasi sederhana untuk memanajemen data barang menggunakan database dari Firebase.
Untuk keperluan pembelajaran kamu dapat mendownload source code yang saya contohkan pada artikel ini di halaman github saya.
Last modified : 09 February 2021