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

chapter 6 – basic search angular

1
Degananda.com -

Setelah medesain aplikasi manajemen note dengan menggunakan material desain pada chapter ke-5 kemarin sekarang kita akan membuat sistem search untuk memfilter note yang ditampilkan. Tutorial mengenai search ini akan terbagi dalam dua chapter ( 6 dan 7) yang masing-masing memiliki fokus yang berbeda. Pada chapter-6 ini yang akan kita buat adalah basic search sementara pada chapter-7 merupakan bentuk pengembangan dari basic search yang salah satunnya meliputi search dengan timing waktu.

Jika anda belum pernah mengikuti tutorial angular chapter-5 maka kami sarankan untuk mengikutinnya terlebih dahulu. Karena source code yang digunakan untuk membuat search ini diambil dari chapter-6. Namun jika anda, tidak ingin mengikuti chapter-5 juga tidak masalah dikarenakan sistem search ini merupakan komponen yang terpisah anda masih dapat mengikutinnya tanpa mengikuti chapter-chapter sebelumnya. Untuk mengakses chapter-5 anda dapat melihat link dibawah ini.

https://degananda.com/2017/06/11/chapter-5-angular-material-design-ui/

0. Pre-requisites

Sebelum anda mengikuti tutorial chapter-6 ini ada beberapa hal mengenai angular yang harus anda pelajari terlebih dahulu. Jika anda belum mengerti hal tersebut untuk memahami tutorial chapter ini akan terasa sulit karena banyak istilah-istilah baru mengenai angular dan tidak ada pada pemrograman javascript pada umumnya. Ini dikarenakan angular banyak menggunakan custom component dan custom directive. Berikut ini adalah hal-hal yang sebaiknya anda mengerti sebelum mengikuti tutorial chapter-6 ini :

  1. input dan output decorator
    ini mutlak diperlukan karena komunikasi antar elemen terutama terkait dengan pertukaran data melalui kedua decorator tersebut
  2. user input event (change, click, dan lain-lain)
  3. custom pipe
    kita akan menggunakan custom pipe untuk membuat search dengan bantuan fungsi filter() pada array (input dari pipe transform berupa/bertipe data array).

jika anda belum memahami tiga hal diatas anda juga dapat mengikuti tutorial angular pada blog ini dari chapter-1 hingga chapter-5.

1. What we build ?

Kita akan membuat sebuah sistem search yang letaknya berada dikomponen berbeda untuk menfilter data note/catatan pada list. Input dari search dapat berupa angka , huruf ataupun simbol. Sistem filter search akan berfungsi layaknya query “like” pada sql. Contohnya kita memiliki tiga buah list

  1. Mangga
  2. Apel
  3. Banana

jika kita melakukan search kata “an” yang akan muncul adalah “mangga” dan “banana” karena kedua kata tersebut mengandung kata “an”. Dibawah ini adalah ilustrasi dari UI(user interfaces) sistem search yang di implementasikan pada aplikasi manajemen note.

Anda juga dapat mengakses demo(pada browser anda) diatas pada link dibawah ini :

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

Untuk mempermudah mengikuti ulasan ini anda dapat mengclone atau mendownload source code yang digunakan pada chapter-6 pada link github dibawah ini

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

1.1 Restriksi / batasan

sistem search yang akan dibuat hanya bersifat “basic” atau dasar. Olehkarenannya mekanisme searchnya adalah sebagai berikut ini :

  1. Search dilakukan setelah user melakukan “tab”/memencet tab pada keyboard atau ketika user mengarahkan cursor keluar dari input text (lokasi memasukan keyword search).
  2. Tidak ada timer (search pada saat kondisi 1)
    Jika dengan timer maka ketika user selesai mengetikan keyword akan ada jeda beberapa milisecond/second kemudian sistem otomatis akan melakukan search.
  3. Tidak ada batas minimal huruf yang dapat disearch
  4. Tidak ada animasi loading(spinner) saat proses search berlangsung
    search yang paling bagus adalah yang dapat menginformasikan progress dari search tersebut termasuka adannya animasi loading karena hal itu membuat user nyaman.
  5. Tidak ada mekanisme loading komponen saat proses search berlangsung

Untuk timer, animasi loading dan mekanisme loading komponen akan dibahas pada chapter-7 mengenai “timed search“. Sehingga pada tutorial ini tidak mencakup lima hal diatas.

2. Lets code

kita akan membuat satu komponen baru yakni com-search untuk menampung form search. Namun tidak menggunakan formgroup. Kemudian kita akan hubungkan komponen com-search tersebut dengan com-listnote sebagai container. dan terahir kita akan aplikasikan custom pipe pada ngFor(pada com-listnote) untuk menfilter data note yang akan muncul sesuai dengan keyword yang kita tuliskan pada input di com-search.

PS : kita masih menggunakan angular material desain untuk mendesain UI nya.

2.1 Membuat komponen com-search

seperti biasannya untuk membuat komponen baru dengan angular-cli perintah yang digunakan adalah

ng g component com-search

Untuk view pada komponen(com-search.component.html) tersebut akan terdiri dari sebuah input text. karena kita menggunakan material desain maka syntax yang digunakan adalah <md-input-container> untuk containernya sedangkan untuk form itemnya / input text menggunakan directive mdInput yang dipasangkan pada syntax html <input>. Kemudian kita juga gunakan directive #querySearch (nama “querySearch” bebas , anda dapat menggantinya dengan apapun) untuk menangkap isi/value dari input text. “#” ini digunakan untuk mengambil nilai dari attribute “value” dari sebuah form item / input text / number / option namun tanpa menggunakan mekanisme form.

user input event yang digunakan sesuai dengan restriksi kita yakni “change”. Event tersebut akan tereksekusi apabila nilai dari komponen berubah DAN user menekan tombol pada keyboard(contohnya tab) ataupun ketika cursor mouse meninggalkan dari elemen tersebut(bukan unhover). Silahkan dicoba pada link demo untuk melihat secara langsung bagaimana user input event “change” ini berjalan.

Untuk komponen class (com-search.component.ts) kita akan menggunakan satu buah output dan event emitter untuk memberikan data kepada komponen list-note. Data yang kita berikan / outputkan dari com-search ini akan digunakan com-lisnote untuk diproses ke custom pipe. Ouput() akan bernama searchQueryElement dan nilainya akan ter”emit” atau tergenerate setelah user input event “change”.

Jangan lupa untuk melakukan import modul eventemitter pada anguar/core.  Kita menggunakan ouput dan event emitter karena komponen search terpisah. Jika komponen search terletak di komponen yang sama dengan list-note maka tidak perlu output atau event emitter cukup mengandalkan nilai directive #querySearch.

2.2 Membuat custom pipe

Buat custom pipe dengan menggunakan perintah berikut ini

ng g pipe pipe-search

Pipe yang dibuat ini secara default akan bernilai “pure”. Pure pipe hanya akan tereksekusi apabile terjadi perubahan pada pure input di suatu model. Contohnya kita memiliki model A pada saat ngOnInit() model tersebut berisi array [a,b,c] maka pipe akan dieksekusi , namun ketika kita tambahkan d dan menjadi [a,b,c] (tidak ada hooks ngOnInit()) maka pipe tidak akan tereksekusi karena perubahan tidak “pure”. Oleh karena itu kita akan gunakan non pure custom pipe karena model akan berubah bukan di hook ngOnInit()

setiap pipe akan memiliki fungsi transform secara default dengan nilai awal yang bertipe array. Array tersebut dapat kita filter dengan memanfaatkan fungsi .filter(). Kita akan menggunakan format ES6 atau ES2015 dalam penulisannya. Filter() akan melakukan iterasi pada isi dari array kemudian akan dicocokan dengan fungsi indexOf() yang akan menguji apakah ada kata pada isi array tersebut sesaui dengan keyword. Kemudian setiap isi dari array tersebut akan dikembalikan(jika bernilai true atau nilai indexOf > 1) menjadi array dan direturn.

2.3 Menyambungkan ke komponen com-listnote

kita akan mengimplementasikan custom pipe yang kita buat (nama : pipeSearch ) pada ngFor yang berada di komponen view dari listnote (com-list.component.html). Selain itu kita juga akan memanggil custom komponen “com-search” yang telah kita buat.  komponen custom search tersebut juga kita berikan directive sesuai dengan nama output decorator untuk menangkap nilai yang diemit (searchQueryElement) atau nilai dari keywordnya.

pada com-listnote.ts kita akan membuat sebuah model bernama searchQuery yang memiliki nilai default “” (bukan null). model tersebut akan bergantinnya nilainya ketika terdapat value yang diemit dari komponen search(melalui @output). dan model tersebut akan kita jadikan input untuk custom pipe kita sehingga pipe , komponen com-search , ngFor, komponen list-note dapat terhubung satu dengan lainnya.

selesai ~. Jika ada pertanyaan silahkan ditanyakan melalui komentar dibawah.