Aplikasi yang akan kita buat adalah aplikasi buku alamat yang memenuhi fungsional dasar CRUD (Create, Read, Update, Delete) data.

Skema aplikasi yang akan kita buat adalah seperti ditunjukkan pada gambar berikut ini:

Step 1 Cara Install Node JS Dan NPM Pada Windows

1. Download Node.JS Installer pada website resminya di sini

2. Jalankan file msi yang sudah didownload.

3. Ikuti petunjuk dan User Agreement. Dan tunggu sampai installasi selesai

4. Sekarang kalian restart computer kalian agar node js dapat terinstall dengan sempurna

Jika sudah mengikuti tahap-tahap diatas, maka sekarang NodeJS sudah terinstall Untuk mengetahuinya bisa buka command prompt, dan ketikan kode berikut

node -v

untuk melihat versi node js yang terinstall

npm -v

untuk melihat versi npm yang terinstall

setelah sudah install node js, mari kita install si angular

Buka cmd kalian atau kalau yang menggunakan linux atau mac gunakan terminal, bisa juga pake git bash, terserah kamu lah, tapi biar sama kayak om bewok gunakan cmd atau kepanjanganya disebut Command Prompt.

Setelah instalasi, pastikan Node.js dan NPM terinstal dengan benar. Gunakan perintah berikut untuk menampilkan versi dari node dan npm yang terinstall.

node -v npm -v

Install Angular CLI Sekarang, Instal utilitas Angular CLI menggunakan NPM package manager.

Opsi -g memastikan untuk menginstal Angular CLI secara global pada sistem. Jadi, npm akan dapat diakses oleh semua pengguna dan aplikasi pada sistem. Angular CLI menyediakan perintah yang digunakan untuk operasi command line. Mari kita periksa versi ng yang diinstal pada sistem Anda.

cek versi

ng --version

Membuat Aplikasi Angular Sistem Anda siap untuk membangun Aplikasi Angular. Perintah berikut akan membuat aplikasi Angular dengan nama hello-angular.

ng new buku-alamat Dengan perintah ini akan membuat direktori dengan nama project Anda dan membuat semua file di bawahnya. Perintah ini juga menginstal semua libraries yang diperlukan dalam direktori tempat project tersimpan. Pada pembuatan yang berhasil, Anda akan melihat pesan di bawah ini di layar.

... ... added 1011 packages from 1041 contributors and audited 19005 packages in 55.774s found 0 vulnerabilities

Successfully initialized git.

Menjalankan Aplikasi Angular Aplikasi Angular dasar Anda siap untuk dijalankan. Ubah ke direktori buku-alamat dan jalankan aplikasi Angular Anda menggunakan perintah ng serve.

cd buku-alamat ng serve

Anda dapat mengakses aplikasi angular Anda di localhost port 4200, Yang merupakan host dan port default yang digunakan oleh aplikasi Angular.

http://localhost:4200

Anda dapat mengubah host dan port untuk menjalankan aplikasi Angular dengan memberikan argumen –host dan –port pada command line.

ng serve --host 0.0.0.0 --port 8080 Alamat IP 0.0.0.0 listens pada semua interface dan dapat diakses secara publik.

Memasang Template

Secara default Angular tidak menyedikan template yang memungkinkan bagi pengembang untuk membuat desain user interface dengan mudah. Angular hanya menyediakan arsitektur utama. Namun pengembang dapat menggabungkan sistem Angular dengan beberapa framework user interface seperti Material Desain, Bootstrap, Uikit, maupun Onsen.

Pada poject kali ini kita akan menggunakan Material Desain sebagai framework UI. Material Desain (MD) merupakan framework UI yang dibangun oleh Google untuk memudahkan pengembang membuat desain UI. Pengembang tidak perlu lagi membuat CSS untuk membuat aspek-aspek dasar UI seperti Button, Card, Navbar, Dialog, dll.

ng add @angular/material

MD memberikan pilihan untuk tema yang akan digunakan. MD memberikan 4 pilihan tema yang dapat kita pilih. Selain pilihan tema, MD juga menyediakan pilihan untuk memasukkan library untuk animasi.

Menerapkan Template dalam Aplikasi Sekarang kita akan memasang beberapa komponen UI kedalam aplikasi dengan langkah berikut ini:

1.Memasukkan modul komponen Material Desain kedalam modul app.module.ts Buka file app.module.ts dan import modul maerial desain seperti pada kode program berikut:

2.Memasukkan komponen desain pada app.component.html Modul Toolbar sudah dimasukkan pada tahap pertama. Selanjutnya adalah memasukkan komponen MD kedalam file app.component.html. Hapus semua yang ada pada file tersebut dan ganti dengan komponen toolbar dibawah ini:

Gambar di atas adalah hasil setelah melakukan dua langkah penerapan komponen desain.Dua langkah tersebut merupakan posedur umum untuk memasukkan komponen kedalam desain aplikasi yang akan dibuat. Selebihnya Anda dapat memasukkan komponen sesuai dengan kebutuhan dengan melihat referensi di situs resmi Material Desain untuk Angular (http://material.angular.io).

Membuat Desain UI

Alur aktivitas yang akan kita buat adalah sebagai berikut:

1.Pengguna menekan tombol Tambah Alamat untuk membuat alamat baru kemudian sistem membuka dialog yang berisi formulir data alamat. 2.Setiap daftar alamat berisi 3 menu yaitu DETAIL, EDIT, dan DELETE. Menu detail akan membuka dialog detail alamat. Menu Edit akan membuka dialog edit data. Menu delete akan membuka dialog konfirmasi penghapusan data.

Membuat Toolbar

Modul komponen toolbar sudah dimasukkan pada tahap sebelum ini. Sekarang kita akan tambahkan tombol Buat Alamat yang diletakkan pada sisi kanan Toolbar. Untuk membuatnya ikuti langkah berikut:

1.Tambahkan CSS pada file app.component.css dengan kode berikut ini:

2.Tambahkan modul komponen Button pada app.module.ts

3.Tambahkan button pada app.component.html didalam Toolbar

8. Membuat Card Daftar Alamat

Card daftar alamat digunakan untuk menampilkan data alamat. Komponen yang dugunakan adalah Card, List, Icon, dan Button.

1.Memasukkan komponen Card, List, dan Icon kedalam app.module.ts

2.Membuat desain card pada app.component.html. Gambar pada matListAvatar mengarah pada folder src/assets. Oleh sebab itu Anda perlu menambahkan gambar dengan nama avatar.png agar gambar tersebut muncul sebagai avatar pada list yang dibuat.

3. Menambahkan CSS pada app.component.css. CSS .container akan membuat tampilan card memiliki batas 100px di kanan dan kiri serta batas 50px di atas dan bawah.

Membuat List Menu

List menu merupakan komponen Material Desain untuk menampilkan daftar menu dalam tampilan popup yang muncul setelah sebuah tombol ditekan. Daftar menu yang akan kita tampilkan adalah DETAIL, EDIT, dan DELETE. Untuk lebih detail, lihat referensi pada https://material.angular.io/components/menu/examples.

Tahap sebelumnya sudah memasukkan MatListModule kedalam app.module.ts. Maka untuk menambahkan menu pada list, kita tambahkan kode HTML pada file app.component.html yang sebelumnya sudah diberikan kode untuk menampilkan Card dan List. Tambahkan kode pada bagian berikut ini:

Pada app.module.ts

Pada app.component.html

9. Dialog Penambahan Alamat

Tambahkan modul MatDialog, MatFormField, dan MatInput pada app.module.ts

Membuat Component baru untuk membuat desain dialog. Melalui terminal,tuliskan perintah berikut.

ng generate component tambah-alamat

Pastikan terminal sudah mengarah pada project Angular. Perintah diatas akan membuat beberapa file secara otomatis seperti tampak pada gambar berikut:

Pada saat komponen baru dibuat, secara otomatis sistem Angular juga menambahkan kode baru pada app.module.ts. Kode baru tersebut adalah:

Membuat desain HTML untuk menambahkan alamat baru. Pada file tambah-alamat/tambah-alamat.component.html buatlah kode HTML berikut:

Menambahkan perintah untuk menampilkan dialog dengan cara menambahkan kode pada file app.component.ts

Perintah diatas memanggil halaman TambahAlamatComponent yang ditampilkan dalam dialog.

Menambahkan trigger pada tombol TAMBAH ALAMAT yang ada pada Toolbar. Tombol tersebut digunakan untuk memanggil fungsi buatAlamat() yang sudah dibuat pada proses sebelum ini. Tambahkan perintah (click)="tambahAlamat()" pada file app.component.html.

Perintah (click)="tambahAlamat() adalah trigger untuk memanggil fungsi tambahAlamat() pada saat tombol TAMBAH ALAMAT ditekan.

10. Dialog Detail Alamat

Dialog detail alamat digunakan untuk menampilkan data alamat secara detail. Proses untuk membuat dialog detail alamat ini sama seperti saat membuat dialog tambah alamat. Perbedaannya hanyalah pada kode HTML pada dialog yang dibuat. Ikuti langkah berikut:

Buatlah komponen baru dengan menuliskan perintah berikut ini pada terminal.

ng generate component detail-alamat

Tambahkan kode HTML berikut ini pada detail-alamat.component.html:

Tambahkan komponen DetailAlamatComponent pada EntryComponents dalam file app.module.ts. (Lihat langkah serupa pada bagian sebelum ini). Tambahkan juga komponen DetailAlamatComponent pada app.component.ts dan buat juga fungsi untuk membuka dialog.

Kemudian panggil fungsi detailAlamat() melalui tombol DETAIL pada list menu.

11. Membuat Dialog Edit Data

Dialog edit data para prinsipnya sama dengan dialog membuat data baru. Oleh sebab itu kita akan memanfaatkan desain UI membuat data baru untuk keperluan edit data. Langkah teknis untuk melakukan hal tersebut akan kita bahas secara spesifik pada bagian edit data. Oleh sebab itu, menu EDIT pada list alamat akan kita kerjakan pada tahap selanjutnya.

12. Komunikasi Angular dengan Server

Angular merupakan framework yang berorientasi pada perangkat klien seperti browser. Aplikasi angular dapat berjalan tanpa server, meskipun dapat juga berjalan pada server. Namun jika aplikasi yang kita buat memerlukan kemampuan untuk penyimpanan data secara online maka data-data tersebut harus tersedia pada server.

Angular menyediakan modul agar aplikasi dapat berkomunikasi dengan server melalui HTTP. Kali ini kita akan membuat koneksi sederhana antara aplikasi Angular dengan server yang akan kita buat menggunakan PHP.

13. Membuat API menggunakan Codeigniter

Pada tahap ini saya asumsikan Anda sudah memiliki Apache web service. Jika aplikasi tersebut belum terpasang pada perangkat Anda maka Anda dapat menggunakan aplikasi XAMPP yang dapat membantu Anda membuat web service dengan mudah. Bacalah panduan https://www.niagahoster.co.id/blog/cara-instal-xampp/ jika membutuhkan.

API (Application Programming Interface) ini digunakan untuk media komunikasi antara aplikasi Angular dengan database. Hal ini dilakukan karena Angular tidak dapat berkomunikasi secara langsung dengan SQL database yang ada pada server. API bertugas untuk mengambil, menyimpan, memperbarui, atau menghapus data dari database jika ada permintaan dari aplikasi angular untuk kemudian memberikan respon kepada aplikasi Angular tentang permintaan yang dikirim. (Lihat skema aplikasi pada bagian awal)

Instalasi Codeigniter Framework PHP yang akan kita gunakan untuk membuat API adalah Codeigniter. Hal ini dipilih untuk memangkas beberapa proses yang harus dibangun jika menggunakan PHP yang dibangun dari awal. Ikuti langkah berikut untuk membuat API menggunakan Codeigniter.

Saya sarankan Anda menggunakan Codeigniter yang sudah dikonfirgurasi agar dapat digunakan untuk keperluan pembuatan API. Unduh file dari repositori github https://github.com/faridsurya/restapi_codeigniter3. Ekstraksi file aplikasi dan pindahkan pada folder htdocs pada XAMPP. Ubah nama folder menjadi rest-api.

Mengatur Koneksi HTTP Angular Sekarang kita tinggalkan dulu aplikasi API Codeigniter. Kita akan membuat pengaturan pada aplikasi Angular agar terhubung dengan API Codeigniter. Ikuti langkah berikut untuk melakukan pengaturan koneksi HTTP pada angular.

Pertama, kita perlu untuk memasang modul HTTP pada app.module.ts seperti tampak pada kode berikut:

Berikutnya adalah membuat api.service.ts dengan menjalankan perintah berikut ini melalui terminal.

ng g service api

output: CREATE src/app/api.service.spec.ts (318 bytes) CREATE src/app/api.service.ts (132 bytes)

Perintah ng g service api akan menciptakan dua file yaitu api.service.spec.ts dan api.service.ts. Tuliskan kode berikut ini pada file api.service.ts.

import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class ApiService {

constructor(private http: HttpClient) { } }

Selanjutnya adalah membuat fungsi pada api.service.ts. Perhatikan kode berikut:

export class ApiService { constructor(private http: HttpClient) { } apiUrl:any='http://localhost/rest-api/index.php/api/'; status() { return this.http.get(this.apiUrl+'status'); } }

Setelah itu, memanggil data pada server melalui komponen app.component.ts. Tambahkan kode berikut ini pada file app.component.ts.

Terdapat tiga bagian kode yang harus ditambahkan pada file app.component.ts. Kode this.getData() akan dieksekusi ketika halaman tersebut ditampilkan. Kode this.getData() akan mengeksekusi fungsi getData(). Fungsi tersebut memanggil this.api yang sudah dibuat pada tahap 4. Service yang dipanggil pada fungsi tersebut adalah fungsi status() yang memanggil data dari server http://localhost/rest-api/index.php/api/status.

Jalankan aplikasi Angular dan periksa halaman console pada browser. Fokus pada bagian Network dan perhatikan gambar berikut:

Gambar diatas menunukkan bahwa permintaan data dari aplikasi Angular sudah berjalan dengan baik dan memperoleh response dari server sesuai dengan yang diharapkan.

14. Menampilkan Data Server

Menyediakan Data pada API Kita kembali pada aplikasi API Codeigniter. Skenario pada penyediaan data ini adalah sebagai berikut:

Pertama, Membuat Mysql database. Untuk melakukan hal ini, buatlah data dummy pada Mysql database. Buka aplikasi Phpmyadmin melalui browser dengan alamat localhost/phpmyadmin. Buatlah database baru dengan nama buku_alamat.

Buatlah data sample dengan mengeksekusi kode sql berikut ini:

INSERT INTO alamat (id, nama, hp, email, alamat, kota, propinsi,kodepos) VALUES (NULL, 'Hasanuddin', '0868393826', '[email protected]', 'Jl. Kenangan No. 66 Umbulharjo', 'Yogyakarta', 'DIY','23456');

Setelah itu, kita perlu menyediakan Data pada API Codeigniter agar API yang kita buat dapat membaca data yang tersimpan dalam Mysql database maka perlu dilakukan pengaturan koneksi database pada Codeigniter. Buka file pada application/config/database.php dan isikan buku_alamat pada atribut database sesuai dengan nama database yang sudah kita buat pada langkah pertama.

Berikutnya buka file application/controllers/Api.php yang ada pada aplikasi API Codeigniter.

Kode diatas merupakan contoh API yang siap kita gunakan. Nama fungsi setelah tanda underscore (_) adalah metode transmisi data via HTTP. Misalnya data_get() maka itu berarti fungsi tersebut dapat diakses melalui url http://localhost/rest-api/index.php/api/data dengan metode GET. Segmen api merupakan nama file pada controller (Api.php) dan segmen data adalah nama fungsi pada class Api. Pola yang sama berlaku untuk metode HTTP POST, PUT, dan DELETE.

Menampilkan Data pada Aplikasi Angular Pada tahap ini kita akan menampilkan data yang tersedia pada API pada daftar alamat yang sudah kita buat sebelumnya di aplikasi Angular. Ikuti langkah berikut:

Pertama, update file api.service.ts sehingga menjadi seperti kode berikut:

kedua, Update file app.component.ts.

Jalankan aplikasi Angular dan periksa apakah data alamat yang disediakan oleh API Codeigniter sudah tesedia dengan memeriksa Network pada Browser.

Gambar di atas adalah respon data yang dihasilkan oleh fungsi getData(). Selanjutnya, kita akan tampilkan hasil tersebut pada User Interface daftar alamat yang sudah dibuat sebelumnya.

Ketiga, update file app.component.html sehingga seperti pada kode berikut:

Kode *ngFor="let item of dataAlamat" yang ada pada tag list-item akan melakukan perulangan sepanjang data dataAlamat yang merupakan hasil dari pembacaan data pada server. Coba lakukan penambahan data pada server, maka secara otomatis data akan tampil pada list yang sudah dibuat.

Gambar di atas merupakan contoh tampilan data yang berhasil diambil dari server.

15. Menambahkan Data Baru

Pertama, buka kembali file api.service.ts dan sesuaikan kode sehingga menjadi seperti dibawah ini:

Fungsi simpan(data) akan mengirimkan data ke server dengan metode POST. Data tersebut akan diterima oleh aplikasi API Codeigniter melalui fungsi data_post() pada Class Api.php.

Kedua, buka file tambah-alamat.component.ts. Sesuaikan kode terhadap penambahan kode berikut:

ApiService digunakan untuk mengakses service yang menghubungkan aplikasi Angular dengan API Codeigniter yang terapat pada server. MatDialogRef digunakan untuk menutup dialog setelah data berhasil disimpan oleh fungsi simpan(data).

Parameter data pada fungsi simpan() diperoleh dari trigger tombol yang terdapat pada tambah-alamat.component.html. Parameter data tersebut merupakan objek yang berisi data-data formulir yang diisi oleh pengguna.

Ketiga, buka file tambah-alamat.component.html dan sesuaikan sehigga kode menjadi seperti berikut ini:

Pada contoh ini, kita menggunakan [(ngModel)] untuk mengambil data input. Ada cara lain yakni menggunakan FormBuilder tapi hal itu akan kita gunakan untuk mengelola data dalam bentuk file (akan dibahas dalam cookbook lainnya).

Trigger penyimpanan diletakkan pada tombol pada saat di klik yakni dengan menjalankan fungsi simpan(data).

Keempat, tambahkan modul Form pada app.module.ts. Buka file tersebut dan sesuaikan kode dengan tambahan berikut:

... import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ... . . . @NgModule({ ... imports: [ ... FormsModule, ... ], ... }) export class AppModule { }

Membuat List Daftar Alamat Otomatis Diperbarui Setelah dialog penambahan data ditampilkan dan pengguna sudah mengisi data lalu menyimpannya, dialog akan ditutup otomatis oleh perintah this.dialogRef.close(true); yang ada pada langkah ke-2. Tapi setelah dialog tertutup data baru tersebut belum masuk ke daftar alamat. Untuk membuat data secara otomatis diperbarui ketika terdapat pembaruan data, buka file app.component.ts dan sesuaikan kode menjadi seperti dibawah ini:

16. Menampilkan Data Tahap ini kita akan menampilkan detail data yang tersimpan. Pada tahap sebelumnya kita sudah membuat dialog untuk menampilkan data. Kita akan melakukan modifikasi kode agar data yang ditampilkan merupakan data yang sebenarnya. Ikuti langkah berikut:

Pertama, sesuaiakan trigger pada tombol yang membuka dialog detail data pada file app.component.html. Membuka detail alamat dieksekusi oleh perintah (click)="detailAlamat(item)". Parameter item merupakan object yang didalamnya terdapat data-data alamat (nama, email, hp, dll).

Kedua, buka file app.component.ts dan sesuaikan kode dengan kode berikut:

Atribut data:item pada object dialogRef akan mengirimkan data item ke komponen dialog detail data.

Ketiga, buka file detail-alamat.component.ts dan sesuaikan kode menjadi seperti berikut: Object data : any merupakan variabel yang dapat dibaca pada komponen HTML.

Keempat, buka file detail-alamat.component.html dan sesuaikan kode menjadi seperti berikut ini:

{{data.nama}} akan menampilkan variabel nama yang diperoleh dari list data. Nama atribut pada objek data merupakan nama atribut yang ada pada database.

17. Memperbarui Data Untuk memperbarui data, kita akan menggunakan desain UI yang sama dengan fungsi penambahan data. Kita akan melakukan modifikasi pada file tambah-alamat.component.ts sehingga dapat berfungsi juga untuk melakukan pembaruan data. Lakukan langkah berikut:

Pertama, buka file app.component.html dan pastikan tombol Edit Data sudah memuat perintah untuk membuka dialog, dilengkapi dengan parameter item (editAlamat(item)).

Kedua, sesuaikan kode pada app.component.ts sehingga fungsi untuk menampilkan dialog formulir menjadi seperti berikut:

Parameter data akan dikirimkan ke dialog sebagai data masukan yang ditampilkan pada formulir. Proses ini mirip dengan prosedur untuk menampilkan detail data yang sudah dibahas pada bagian sebelum ini.

Ketiga, sesuaikan file tambah-alamat.component.ts menjadi seperti di bawah ini:

Variabel data akan diisi oleh data detail alamat jika nilai variabel itemData bernilai null. Kita juga perlu melakukan modifikasi juga terhadap file app.component.ts untuk fungsi buatAlamat() agar fungsi simpan(data) memiliki dua fungsi yakni menambahkan data baru atau memperbarui data yang sudah ada. Sesuaikan kode pada app.component.ts menjadi seperti berikut ini:

Kondisional if(data.id == undefined) pada fungsi simpan(data) adalah untuk membedakan fungsu tambah baru atau pembaruan data. Jika variabel data tidak memiliki atribut id maka berarti formulir tersebut adalah formulir baru. Oleh sebab itu perintah yang diberikan adalah perintah penambahan data baru.

18. Menghapus Data Untuk menambahka fungsi penghapusan data, kita perlu untuk melakukan modifikasi pada app.component.ts. Sesuaikan kode sehigga menjadi seperti berikut:

Pastikan perintah hapus pada tombol sudah dilengkapi dengan paramter id data.

Semua fungsi CRUD pada aplikasi Angular sudah tersedia. Tahap terakhir adalah mendistribusikan aplikasi Angular agar dapat dijalankan pada browser. Jalankan perintah berikut ini: ng build --base-href ./