Belajar CRUD Angular CLI dan MySQL

Pada artikel sebelumnya kita telah membahas dan belajar bareng bagaimana cara membuat REST API SERVER dari MySQL dengan menggunakan NodeJS. Nah, pada artikel kali ini, kita akan memanfaatkan REST API SERVER yang telah kita buat kemarin untuk Angular.

Bagi teman-teman yang belum membaca artikel sebelumnya, silahkan dibaca dulu ya Membuat REST API SERVER dengan NodeJS dan MySQL. Karena artikel ini sangat erat kaitannya dengan artikel sebelumnya.

Persiapan

Seperti biasa, sebelum memulai project tentunya kita harus mempersiapkan beberapa hal terlebih dahulu.

#1. NodeJS

Tanpa NodeJS, teman-teman tidak akan bisa mengikuti artikel ini secara tuntas. Jadi silahkan download dan install dulu NodeJS nya. 

#2. REST API SERVER

Pada artikel sebelumnya saya telah membahas cara membuat REST API SERVER dari MySQL dengan menggunakan NodeJS. Teman-teman silahkan baca dulu artikel tersebut. Dan pada bagian paling bawah artikel tersebut terdapat link untuk download atau clone projectnya, beserta langkah-langkah instalasi nya.

#3. Text Editor

Saya sangat merekomendasikan teman-teman memakai Visual Studio Code, tapi itu semua tergantung kenyamanan masing-masing.

Buat Project Baru Angular

Langkah pertama yang kita lakukan adalah membuat sebuah project baru. Disini hanya akan saya jelaskan secara singkat, namun apabila teman-teman ingin penjelasan yang lebih detail , silahkan baca artikel saya yang berjudul : Berkenalan Dengan Angular CLI

Ketikkan perintah berikut pada Command Prompt:

ng new crud-angular-mysql

Proses ini akan memakan waktu, tergantung dari koneksi jaringan internet yang teman-teman gunakan. alert-info

Buat Component

Selanjutnya buatlah tiga buah komponen dengan mengetikkan perintah berikut ke Command Prompt:

ng g c list-karyawan

ng g c add-karyawan

ng g c edit-karyawan

• Component list-karyawan sebagai penampil semua data karyawan
• Component add-karyawan sebagai form input data karyawan
• Component edit-karyawan sebagai form edit data karyawan

Buat Router

Jika teman-teman belum tau cara kerja dan apa kegunaan Router, silahkan baca artikel sebelumnya yang berjudul : Menggunakan Fitur Router Link pada Angular

Untuk membuat Router ketikkan perintah berikut:

ng g m app.routing --flat

Perintah tersebut akan menghasilkan satu buah file bernama "app.routing.module.ts" Kemudian buka file tersebut dan tambahkan koding sebagai berikut:

import { NgModule }               from '@angular/core';
import { Routes, RouterModule }   from '@angular/router';
import { CommonModule }           from '@angular/common';
import { ListKaryawanComponent }  from './list-karyawan/list-karyawan.component';
import { AddKaryawanComponent }   from './add-karyawan/add-karyawan.component';
import { EditKaryawanComponent }  from './edit-karyawan/edit-karyawan.component';

const appRoutes: Routes = [
  { path: '', component:  ListKaryawanComponent},
  { path: 'add-karyawan',  component:  AddKaryawanComponent},
  { path: 'edit-karyawan/:id',  component:  EditKaryawanComponent},
  { path: '**',   redirectTo: ''}
];

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(appRoutes),
    CommonModule
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

Selanjutnya buka file "app.component.html" hapus semua koding yang ada didalamnya kemudian ganti dengan koding berikut :

<button routerLink="/list-karyawan">List Karyawan</button>
<button routerLink="/add-karyawan">Input Karyawan</button>
<hr>
<router-outlet></router-outlet>

Kemudian silahkan buka file app.module.ts. Perhatikan koding imports-nya, tambahkan AppRoutingModule, HttpClientModule dan FormsModule pada bagian imports:

imports: [
   BrowserModule,
   AppRoutingModule,
   HttpClientModule
], 

Untuk menguji apakah router berjalan dengan baik atau tidak, silahkan jalankan projectnya dengan mengetikkan perintah:

ng serve

Setelah itu akses http://localhost:4200. Maka akan tampil seperti berikut:

Dengan begitu kita bisa berpindah dari halaman list-karyawan ke add-karyawan tanpa perlu adanya reload halaman.

Membuat Rest Api Service

Rest Api Service bertujuan sebagai penghubung antara Frontend (Angular) dan Backend (NodeJS). Untuk membuat Rest Api, silahkan ketikkan perintah berikut di Command Prompt:

ng g s rest-api

Buka file "rest-api.service.ts" dan ketikkan koding berikut:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})
export class RestApiService {

    constructor(private http: HttpClient) { }

    get(link: string){
        return this.http.get(link).toPromise();
    }

    post(link: string, body:any){
        return this.http.post(link, body).toPromise();
    }

    delete(link: string){
        return this.http.delete(link).toPromise();
    }

    put(link: string, body:any){
        return this.http.put(link, body).toPromise();
    }
}

• Get untuk mengambil data
• Post untuk memberikan data
• Delete untuk menghapus data
• Put untuk mengedit data

Menampilkan dan Menghapus Data Karyawan

Buka file list-karyawan.component.ts kemudian ketikkan koding berikut:

import { Component, OnInit } from '@angular/core';
import { RestApiService }    from '../rest-api.service';

@Component({
    selector: 'app-list-karyawan',
    templateUrl: './list-karyawan.component.html',
    styleUrls: ['./list-karyawan.component.css']
})
export class ListKaryawanComponent implements OnInit {

    dataKaryawan: Object;

    constructor(private rest: RestApiService) { }

    async ngOnInit() {
    try {
        const data = await this.rest.get(
            'http://localhost:8080/api-karyawan/karyawan'
        );
        this.dataKaryawan = data['data'];
        } catch (error) {
            console.log(error);
        }
    }

    async delete(id){     
        await this.rest.delete(
        `http://localhost:8080/api-karyawan/hapus-karyawan/${id}`
        );
        this.ngOnInit();
    }

}

ngOnInit() adalah function yang dijalankan secara otomatis pertama kali ketika kita mengakses sebuah komponen.alert-info

Selanjutnya silahkan buka file list-karyawan.component.ts dan ketikkan koding berikut:

<h2>Data Karyawan</h2>
<table border="1" width="80%">
    <tr>
        <th>NIP</th>
        <th>NAMA</th>
        <th>ALAMAT</th>
        <th>JABATAN</th>
        <th>AKSI</th>
    </tr>
        <tr *ngFor="let data of dataKaryawan">
        <td>{{data.nip}}</td>
        <td>{{data.nama}}</td>
        <td>{{data.alamat}}</td>
        <td>{{data.jabatan}}</td>
        <td>
            <button routerLink="/edit-karyawan/{{data.nip}}">Edit</button>
            <button (click)="delete(data.nip)">Hapus</button>
        </td>
    </tr>
</table>

Sekarang coba akses http://localhost:4200/ Maka akan tampil semua data karyawan sebagai berikut:

Menambah Data Karyawan

Untuk menambah data karyawan tentunya kita membuatuhkan sebuah form untuk input data karyawan. Silahkan buka file add-karyawan.component.html Kemudian ketikkan koding berikut :

<table>
    <tr>
        <td>NIP</td>
        <td>:</td>
        <td><input [(ngModel)]="nip" type="text"></td>
    </tr>
    <tr>
        <td>Nama Lengkap</td>
        <td>:</td>
        <td><input [(ngModel)]="nama" type="text"></td>
    </tr>
    <tr>
        <td>Alamat</td>
        <td>:</td>
        <td><input [(ngModel)]="alamat" type="text"></td>
    </tr>
    <tr>
        <td>Jabatan</td>
        <td>:</td>
        <td><input [(ngModel)]="jabatan" type="text"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td>
            <button (click)="saveDataKaryawan()">Simpan</button>
        </td>
    </tr>
</table>

Sampai disini silahkan teman-teman akses http://localhost:4200/add-karyawan maka akan tampil seperti berikut:

Namun kita belum bisa untuk menyimpan data.

Selanjutnya buka file add-karyawan.component.ts dan ketikkan koding berikut:

import { Component, OnInit } from '@angular/core';
import { Router }            from '@angular/router';
import { RestApiService }    from '../rest-api.service';

@Component({
    selector: 'app-add-karyawan',
    templateUrl: './add-karyawan.component.html',
    styleUrls: ['./add-karyawan.component.css']
})
export class AddKaryawanComponent implements OnInit {

    constructor(private router: Router,private rest: RestApiService) { }
    nip     = '';
    nama    = '';
    alamat  = '';
    jabatan = '';

    ngOnInit() {
    }

    async saveDataKaryawan(){
        try{        
            const data = await this.rest.post(
                'http://localhost:8080/api-karyawan/add-karyawan',
                {
                    nip     : this.nip,
                    nama    : this.nama,
                    alamat  : this.alamat,
                    jabatan : this.jabatan
                }
            );
        this.router.navigate(['list-karyawan']); 
        } catch (error){
            console.log(error);
        }
    }

}

Silahkan teman-teman tes untuk menginputkan data pada form tersebut. Apabila terjadi error, silahkan tanyakan di kolom komentar.

Edit Data Karyawan

Selanjutnya, untuk mengedit data tentunya kita membuatuhkan sebuah form lagi untuk mengedit data karyawan. Silahkan buka file edit-karyawan.component.html dan ketikkan koding berikut:

<table *ngIf="edit">
    <tr>
        <td>NIP</td>
        <td>:</td>
        <td><input [(ngModel)]="edit.nip" type="text"></td>
    </tr>
    <tr>
        <td>Nama Lengkap</td>
        <td>:</td>
        <td><input [(ngModel)]="edit.nama" type="text"></td>
    </tr>
    <tr>
        <td>Alamat</td>
        <td>:</td>
        <td><input [(ngModel)]="edit.alamat" type="text"></td>
    </tr>
    <tr>
        <td>Jabatan</td>
        <td>:</td>
        <td><input [(ngModel)]="edit.jabatan" type="text"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td>
            <button (click)="editDataKaryawan()">Simpan</button>
        </td>
    </tr>
</table>

Setelah itu buka file edit-karyawan.component.ts dan ketikkan koding berikut:

import { Component, OnInit }      from '@angular/core';
import { RestApiService }         from '../rest-api.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
    selector: 'app-edit-karyawan',
    templateUrl: './edit-karyawan.component.html',
    styleUrls: ['./edit-karyawan.component.css']
})
export class EditKaryawanComponent implements OnInit {
    edit    : Object;  
    nip     : any;

    constructor(
        private rest: RestApiService,
        private activatedRoute: ActivatedRoute,
        private router: Router
        ) 
    {this.nip = activatedRoute.snapshot.url[1].path;}

    async ngOnInit() {
        const nip = this.nip
        const data = await this.rest.get(
            `http://localhost:8080/api-karyawan/karyawan/${nip}`
        );    
        this.edit = data['data'];
    }

    async editDataKaryawan() {
        try{        
            await this.rest.put(
                'http://localhost:8080/api-karyawan/edit-karyawan',
                {
                    nip     : this.nip,
                    nama    : this.edit['nama'],
                    alamat  : this.edit['alamat'],
                    jabatan : this.edit['jabatan']
                }
            );
        this.router.navigate(['list-karyawan']); 
        } catch (error){
            console.log(error);
        }
    }

}

Artikel ini sangat erat kaitannya dengan artikel sebelumnya yang membahas tentang Membuat REST API SERVER dengan NodeJS dan MySQL. Sangat disarankan untuk membaca atau mengikuti artikel tersebut dulu. Karna tutorial ini tidak akan berjalan tanpa adanya REST API SERVER.

Kesimpulan

Pada artikel ini kita telah belajar bagaimana cara CRUD (Crud Read Update and Delete) menggunakan Framework Angular dan Database MySQL. Bagian terpenting dalam pembelajaran ini adalah kita harus mengerti peranan Rest Api Service sebagai penghubung antara Angular dan NodeJS.

Nantikan terus artikel selanjutnya, semoga artikel ini dapat membantu teman-teman yang masih pemula di Angular seperti saya. Jangan lupa tinggalkan jejak di kolom komentar. Terimakasih.

Source Code Project ini tersedia di Github saya, buat teman-teman yang membutuhkan silahkan didownload. Tapi jangan lupa follow ya :) alert-info

Github/download/button/Black

---