lifelong learner — urip iku urup, currently working on accenture.

Chapter 4 – form, service, class, singleton dan model (part A/teori)

3
Degananda.com -

Chapter 4 ini memiliki dua part, yakni part A dan part B. Part A fokus untuk membahas teori mengenai form, services, class dan model. Sedangkan part B fokus pada implementasi teori tersebut pada project / coding. Pemisahan ini dilakukan karena jika digabung post akan menjadi sangat panjang dan menjadi kurang nyaman untuk dibaca oleh anda. Sehingga pastikan membaca part A sebelum part B.

Pada tutorial ini secara umum akan melanjutkan aplikasi pengelola note kita dengan menambahkan fitur form. Jika anda belum mengikuti tutorial sebelumnya anda dapat mengikutinnya (chapter 3 mengenai input, output, routing dan ng-style).

https://degananda.com/2017/05/24/tutorial-angular-2-chapter-3-input-output-routing-ng-style/

karena tutorial ini merupakan tutorial yang berkelanjutan sehingga memerlukan source dari tutorial sebelumnya. Untuk mempermudah mengikuti tutorial ini, maka anda dapat mengclone repository dari source code yang digunakan pada chapter 4 ini.

https://github.com/degananda/angular-note/tree/4.0

untuk chapter-chapter sebelumnya cukup ganti 4.0 menjadi X.0 , X adalah nomor dari chapter. semoga ini dapat membantu.

WHAT WE BUILD? DEMO?

http://demo.degananda.com/angular/chapter-4/

Langsung akses pada halaman diatas untuk melihat demo dari apa yang akan kita kerjakan di chapter 4 ini. Pada chapter-chapter sebelumnya tidak ada demo dikarenakan apa yang kita kerjakan pada chapter sebelumnya tidak terlalu komplex. Namun pada chapter ini cukup complex sehingga pada awal tutorial diharapkan anda sudah tahu apa yang akan dibuat sehingga memberikan sedikit gambaran.

Aplikasi sangat sederhana tanpa dilakukan styling karena masih mencapai chapter 4 , styling akan dilakukan pada chapter – chapter selanjutnya namun, pada intinnya , aplikasi angularnote pada chapter 4 ini memiliki empat fungsi utama yaitu :

  1. Melihat daftar note
    Note yang akan ditampilkan diambil dari services yang mengacu pada model “note” yang telah kita buat.
  2. Menghilangkan dan menampilkan note (show/hide)
    ini telah kita bahas pada chapter-3, untuk detail pembuatan show/hide ini anda dapat melihat pada chapter-3
  3. Menambahkan note (menggunakan singleton)
    Penambahan note ini dilakukan tanpa DBMS maka object note ini akan disimpan dalam array yang terletak diproperty services. Atau biasa kita sebut sebagai singleton class.
  4. Mengubah note
    Mengubah object note yang ada pada services .
  5. Menghapus note
    Menghapus object note yang ada pada services.

0. Prequireste

Tutorial ini membutuhkan beberapa hal yang sudah anda pelajari terlebih dahulu sehingga anda lebih mudah dalam mempelajarinnya. Diantarannya yaitu :

  1. Mengerti tentang decorator @input dan @output
  2. Mengerti cara membuat routing
  3. Mengerti cara angular-cli dalam membuat komponen/pipe/service/class/model baru
  4. Faham mengenai directive ngIf dan style.

jika anda belum mempelajari ke empat hal tersebut , maka sangat dianjurkan untuk mengikuti tutorial sebelum ini agar tidak lompat terlalu jauh.

1. Goal

Terdapat beberapa goal yang akan dicapai dari chapter ini. Goal adalah sesuatu yang diharapkan untuk dicapai oleh anda yang membaca tutorial / ulasan ini. Beberapa goal tersebut adalah :

  1. Mengerti mengenai pembuatan form dengan menggunakan FormBuilder
  2. Mengerti pemanfaatan route params.
  3. Mengerti cara membuat services
  4. Mengerti mengenai dependency injection
  5. Mengerti pembuatan model
  6. Mengerti membuat singleton dalam suatu class / services

Pada ulasan ini aplikasi pengelola note kita masih belum menggunakan DBMS(database management system) karena kita belum mempelajari penggunaan http. pada chapter selanjutnya akan dibahas bagaimana menghubungkan angular 2 dengan database melalui http request. Kita akan menggunakan RESTful webservices yang telah dibuat di tutorial di blog ini. Sehingga, fokus utama pada tuturial ini adalah bagaimana membuat aplikasi pengelola note tanpa menggunakan DBMS.

2. Teori

2.1 FormBuilder

Form adalah salah satu bagian yang paling penting dari aplikasi. Karena form menghandle terjadinnya input dari user yang kemudian data tersebut akan diproses ke database dan akan ditampilkan kembali dengan melalui beberapa aturan tertentu. Contoh pada kasus note kita adalah user akan menginputkan isi dari note melalui suatu form yang kemudian data isi note itu akan diproses melalui services, dan dari services tersebut akan menghubungkan data yang diperoleh dari form menuju ke singleton class(temporary local database). Ada dua jenis pembuatan form pada angular. yang pertama template driven dan kedua model driven form. Kita akan menggunakan template driven form karena dapat digunakan untuk membuat form yang dinamis(penambahan item pada form dapat sewaktu-waktu).

2.1.1 Template driven form

Ada dua hal yang harus didefinisikan saat membuat template driven form, pertama adalah view komponen(html) harus mencakup seluruh template syntax yang harus digunakan untuk membuat form yang kedua adalah mendefinisikan property formnya pada class komponen(file .ts/typescript). Kita menggunakan template syntax khusus form untuk membuat template driven form pada bagian komponen viewnya (html). Adapun syntax yang digunakan adalah :

formGroup formgroup ini merupakan wadah yang mengumpulkan seluruh item pada form. atau dapat kita ibaratkan sebagai container. template syntax ini akan kita tuliskan sebagai attribute di bagian <form>
ngSubmit atribut ini berfungsi sebagai eventhandler. Yakni saat user tersebut mensubmit form tersebut. Expression yang kita masukan ke atribut ini adalah berupa fungsi pada komponen(class). Misalnya memanggil fungsi tambahNote() untuk menambahkan data note ke singleton.
formControlName jika anda familiar dengna php, maka formControlName ini adalaha attribut yang memiliki fungsi seperti “name” fungsinnya adalah sebagai identifier. Data-data yang diproses diambil dari form item yang memiliki atribut formControlName atau pada angular kita sebut sebagai form control (item dari form dapat berupa textarea, inpu

, select, radio, dan lain-lain).

berikut ini adalah contoh dari penulisan template syntax untuk form di komponen view


<form [formGroup]="addNoteForm" (ngSubmit)="addNote(addNoteForm)">

    <div class="input-field">
        <input type="text" class="validate" formControlName="note_title">
        <label for="first_name">Note Title</label>
    </div>


   <div class="input-field">
        <textarea class="materialize-textarea" formControlName="note_description">
        </textarea>
        <label for="first_name">Note Description</label>
    </div>

    <div>
        <button type="submit" class="waves-effect waves-light btn">Add Note</button>
    </div>

</form>

 

Sedangkan pada komponen classnya kita akan menggunakan formbuilder untuk mempercepat penulisan fungsi-fungsi yang digunakan pada template drive form. Pertama kita harus mendefinisikan formgroup sebagai property pada class. Kemudian menginisiasi formgroup tersebut dengan menggunakan formbuilder saat lifecycle hooks ngOnInit(). selesai, as simple as that. maka form tersebut siap digunakan.

    addNoteForm : FormGroup;

    ngOnInit(){
        this.addNoteForm = this.formBuilder.group({
            note_title : this.formBuilder.control(''),
            note_description : this.formBuilder.control('')
        });
    }

2.2 route params

Route params adalah suatu parameter yang kita dapatkan pada url. Contohnya adalah pada url dibawah ini :

http://demo.degananda.com/angular/chapter-4/note/modify/0

/note/modify merupakan path yang kita berikan untuk memanggil komponen (form-note). Sedangkan angka “0” sifatnya adalah sebagai parameter yang dinamis. Sehingga angka nol tersebut dapat berubah menjadi 1 , 2, 3 dan sebagainya tergantung dari jumlah note. Sehingga path routing untuk url diatas adalah

/note/modify/:id

id akan berganti-ganti sesuai dengan idnote. Form untuk mengubah note akan mengambil id tersebut dan akan mencocokan dengan singleton kemudian data dari singleton akan dimasukan ke form sesuai dengan datanya. Pada intinnya, parameter pada router ini berfungsi untuk mengambil nilai dinamis dari sebuah url dan biasannya digunakan untuk menampilkan data spesifik tertentu (single data) berdasarkan idnya.

data yang ditampilkan adalah array dengan id nomor 0(berdasarkan paramter “0” diahir url) yang diambil dari class singleton. Untuk membuat sebuah route dengan menggunakan parameter yang bersifat dinamis maka kita dapat menggunakan contoh kode dibawah ini :

    {
        path : 'note/modify/:id',
        component : FormNoteComponent,
        data : {
            breadcumb : 'home / note / modify'
        }
    }

parameter yang dinamis (berupa user input dari url) akan diawali dengan titik dua (“:”, tanpa petik). Sedangkan parameter yang static tidak membutuhkan titik dua.

2.3 Services / Injectable

Secara hafiah services berarti layanan. Services biasannya digunakan untuk menyimpan fungsi-fungsi yang terhubung dengan modul yang mengirimkan data ke luar aplikasi. Contohnya untuk menghandle pemanggilan http request / mengakses API/web services. Services ini memiliki decorator berupa @injectable artinnya , kita dapat memanggil services ini dikomponen lainnya sehingga services juga dapat disebut sebagai shared services karena digunakan secara bersama-sama. Kita tidak akan membahas terlalu dalam mengenai services ini, pada intinnya hanya tahu cara menggunakannya. Pembahasan lebih lanjut mengenai service ini mungkin akan dijadikan satu ulasan khusus karena sangat banyak.

Untuk membuat services kita dapat menggunakan angular cli dengan syntax

ng g service nama service

secara otomatis angular akan mengenerate services untuk kita tanpa melakukan pembuatan class service tersebut. Contoh dari services adalah sebagai berikut ini

import { NoteServiceInterface } from './../interface/note.service.interface';
import { Note } from './../model/note.model';
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
// Import RxJs required methods
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class NoteService implements NoteServiceInterface<Note> {

    listNote : Note [] = [];

    constructor(private http : Http){}



    getNote() : Observable <Note[]> {
        return this.http.get('http://localhost/deganote/note')
             .map((res : Response) => res.json().result);
    }

    addNote(noteItem : Object) : Observable <Note[]> {
        let bodyString = JSON.stringify(noteItem);
        let headers      = new Headers({ 'Content-Type': 'application/json' });
        let options       = new RequestOptions({ headers: headers });
        return this.http.post('http://localhost/deganote/note', bodyString, options)
            .map((res : Response) => res.json());
    }

    deleteNote(noteItem : Note){
        let noteIndex = this.listNote.indexOf(noteItem);
        this.listNote.splice(noteIndex,1);
    }

}

pada intinnya services ini akan berisi fungsi-fungsi yang nantinnya akan dapat diakses dari komponen lainnya. Contohnya pada kode diatas terdapat fungsi get, add dan delete. tiga fungsi tersebut akan digunakan pada komponen yang berfungsi sebagai form.

2.4 Depedency Injection

dependency injection adalah mekanisme yang digunakan untuk menaggil services / shared services ataupun modul external. Cara melakukan depedency injection adalah pastikan class yang akan di inject memiliki decorator @injectable. Berikut ini adalah contoh DI / Depedency injection

    constructor(private noteService : NoteService, private formBuilder : FormBuilder){
    }

DI dapat menggunakna property private atau public sama seperti saat kita membuat class dijava. Private berarti hanya dapat digunakan di class tersebut sedangkan public jika model/service yang kita inject digunakan secara bersama-sama (shared services).

2.5 Model

model merupakan class yang memiliki attribute (data) dan behavior (fungsi). Contohnya adalah note atau catatan. Catatan memiliki suatu fungsi dan attribut yang menyertainnya.

attribute fungsi
isi_note dapat menambahkan isi note
tanggal_note dapat mengubah isi note
dapat menghapus note
dapat melihat daftar note

Pada tabel diatas adalah gambaran singkat mengenai model note kita. Ketika attribut dan bahavior tersebut kita tuangkan menjadi kode maka hasilnya adalah sebagai berikut ini :

export class NoteModel {

    isi_note : String;
    tanggal_note : String;

    constructor(isi_note : String, tanggal_note : String){
        this.isi_note = isi_note;
        this.tanggal_note = tanggal_note;
    }

}

2.6 Singleton class

Singleton class adalah sebuah class yang digunakan untuk menyimpan data yang disimpan dalam bentuk tertentu (tergantung pada kebutuhan). Contohnya kita dapat menyimpan data tersebut dalam bentuk array , string ataupun number. Banyak sekali fungsi dari singleton ini, khususnya untuk menangani penyimpanan data-data yang bersifat lokal contohnya :

  1. menyimpan informasi user
    Contohnya adalah, ketika user login ke aplikasi kita maka biasannya kita akan berikan sambutan berupa “hello, nama user”. Nama user ini kita dapatkan melalui database. Jika kita ambil dari tersebut dari database setiap pergantian halaman tentunnya akan memakan banyak bandwidth. Oleh karena itu user akan kita simpan di singleton sehingga hanya satu kali melakukan request ke web services setelah itu data nama user akan ditampilkan secara lokal.
  2. menyimpan informasi session
    Hal ini sama dengan kasus nomor 1 (menyimpan informasi user). Session ini biasannya kita simpan didatabase(online) dan sifatnya terpisah dengan aplikasi. Namun terkadang ada juga yang memanfaatkan singleton untuk menyimpan session. Namun hal ini tidak direkomendasikan karena sangat bahaya dari sisi keamanan.
  3. menyimpan konfigurasi local
    Misalkan kita memiliki sebuah aplikasi manajemen note. Kita dapat menggunakan singleton untuk menyimpan konfigurasi pembuatan note. Pada saat berada diform pembuatan note akan diberikan opsi berupa pemilihan warna , jenis font dan ukuran font. Kita dapat menafaatkan singleton untuk menyimpan konfigurasi tersebut meski setelah user melakukan exit pada aplikasi data singleton akan hilang.
  4. dan lain-lain

namun data tersebut tidak bertahan lama karena setelah aplikasi di exit maka secara otomatis data yang disimpan akan hilang. Jika kita pernah menggunakan php, singleton class ini memiliki fungsi yang sama seperti halnya dengan session. Pada intinnya , singleton sangat bagus untuk menyimpan data temporary dan sangat tidak dianjurkan untuk menyimpan data login (cookies/session). Contoh dari singleton class

import { Injectable } from '@angular/core';
// class
import { NoteModel } from './note-model';
// model 

@Injectable()
export class ServiceNoteService {

  listNote : Array<NoteModel> = [];

  constructor() { 
  }

  addNote(note : NoteModel){
    this.listNote.push(note);
  }

}

singleton ini berada di sebuah class services. Karena memang service note yang nantinnya dibuat ini akan menggunakan temporary data(singleton).