Aplikasi Buku Alamat - Ghinaa/buku-alamat GitHub Wiki

  1. Persyaratan utama sebelum melakukan instalasi Angular adalah NodeJS. Membuat project baru Angular dilakukan menggunakan command line (cmd) NodeJs jika menggunakan Windows atau aplikasi Terminal jika menggunakan Linux. Yang pertama buka cmd kemudian masukkan ng new buku-alamat. Perintah tersebut akan menghasilkan output seperti dibawah ini. Pilihlah CSS untuk membuat pengaturan style desain menggunakan CSS. Perintah ng new buku-alamat akan menghasilkan folder baru bernama buku-alamat. 1

  2. Setelah terminal masuk kedalam folder aplikasi Angular tulislah perintah ng serve. 2

  3. Tanda proses ini berhasil adalah munculnya informasi Compiled successfully. 3

  4. Buka browser Anda dan arahkan ke alamat localhost:4200 4

  5. Memasang Template Menggunakan Material Desain sebagai framework UI. Material Desain (MD) merupakan framework UI yang dibangun oleh Google untuk memudahkan pengembang membuat desain UI. Untuk mengintegrasikan MD kedalam project Angular, masukkan perintah seperti dibawah ini: 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. Saya memilih tema Indigo/Pink. 5

  6. Menerapkan Template pada Aplikasi Memasukkan komponen Material Desain kedalam app.module.ts seperti dibawah ini: 6

  7. Memasukkan komponen desain pada app.component.html Hapus semua yang ada pada file tersebut dan ganti dengan file dibawah ini: 7

Membuat Toolbar 8. Tambahkan CSS pada file app.component.css 8

  1. Menambahkan komponen Button pada app.module.ts 9

  2. Menambahkan button pada app.component.html didalam Toolbar. 10

Membuat Card Daftar Alamat 11. Card daftar alamat digunakan untuk menampilkan data alamat. Masukkan komponen Card, List, dan Icon kedalam app.module.ts 11

  1. Membuat desain card pada app.component.html 12

  2. Tambahkan gambar dengan nama avatar.png, matListAvatar mengarah pada folder src/assets. 13

  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. 14

Membuat list menu 15. Menambah kode pada app.module.ts, list menu merupakan komponen Material Desain untuk menampilkan daftar menu dalam tampilan popup yang muncul setelah sebuah tombol ditekan. 15

  1. Kemudian tambahkan app.component.html 16

Dialog penambahan alamat 17. Aplikasi ini menggunakan MatDialog untuk menambahkan data baru. Untuk menambahkan dialog, menambahkan modul MatDialog, MatFormField, dan MatInput pada app.module.ts 17

  1. Membuat Component baru untuk membuat desain dialog. Ketik ng generate component tambah-alamat pada cmd. 18

  2. Menambahkan komponen pada atribut EntryComponents yang ada pada app.module.ts. TambahAlamatComponent. Membuat desain HTML untuk menambahkan alamat baru. Pada file tambah-alamat.component.html 19 19(1)

  3. Menambahkan perintah untuk menampilkan dialog pada file app.component.ts, Perintah ini memanggil halaman TambahAlamatComponent yang ditampilkan dalam dialog. 20

  4. 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. 21

Dialong Detail Alamat 22. 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. Membuat komponen baru, masukkan perintah ng generate component detail-alamat. 22

  1. Menambahkan kode HTML pada detail-alamat.component.html 23

  2. Menambahkan komponen DetailAlamatComponent pada app.component.ts dan membuat fungsi untuk membuka dialog. 24

  3. Membuat Dialog Konfirmasi Hapus Data, membuat komponen baru dialog-konfirmasi menggunakan perintah ng g c dialog-konfirmasi. 25

  4. Menambahkan DialogKonfirmasiComponent pada atribut entryComponents pada file app.module.ts.Import komponen DialogKonfirmasiComponent pada app.component.ts dan tambahkan fungsi untuk menampilkan dialog. Menambahkan fungsi konfirmasi() pada dialog-konfirmasi/dialog-konfirmasi.ts untuk memberikan nilai true saat pengguna menekan tombol Ya, Hapus!. Ekstraksi file aplikasi dan pindahkan pada folder htdocs pada XAMPP. Ubah nama folder menjadi rest-api. 26

  5. Berikutnya adalah membuat api.service.ts dengan menjalankan perintah ng g service api. Perintah ng g service api akan menciptakan dua file yaitu api.service.spec.ts dan api.service.ts. 27

  6. Menambahkan komponen pada file api.service.ts 28

  7. Membuat fungsi api.serice.ts 29

  8. Menjalankan aplikasi Angular dan periksa halaman console pada browser. Fokus pada bagian Network. 30

Menampilkan Data Server 31. Menyediakan Data pada API, 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. 31 31(1) 31(2) 31(3) 31(4) 31(5)

  1. Membuatlah data sample dengan mengeksekusi kode SQL. Masukkan INSERT INTO ‘alamat’(‘id’,’nama’,’hp’,’email’,’alamat,’,kota’,’propinsi,’,kodepos’)VALUES(NULL,’Haanudding,’0868393826’,’[email protected]’,’Jl. Kenangan No. 66 Umbulharjo’,’Yogyakarta’,’DIY’,’23456’); 32

  2. Buka file pada application/config/database.php dan isikan buku_alamat pada atribut database sesuai dengan nama database yang sudah di buat pada langkah pertama. 33

  3. Berikutnya buka file application/controllers/Api.php yang ada pada aplikasi API Codeigniter. 34 34(1)

Menampilkan Data pada Aplikasi Angular 35. Menampilkan data yang tersedia pada API pada daftar alamat yang sudah kita buat sebelumnya di aplikasi Angular. Update file api.service.ts 35

  1. Update file app.component.ts.

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

  3. Update file app.component.html

  4. 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. 39

  5. Tampilan data yang berhasil diambil dari server. 40

  6. Terjadi beberapa kesalahan di bagian app.component.html dan app.component.ts 41

Menambahkan Data Baru 42. Buka kembali api.service.ts 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. 42

  1. Buka file tambah-alamat.component.ts 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. 43

  2. Buka file tambah-alamat.component.html Menggunakan [(ngModel)] untuk mengambil data input. Trigger penyimpanan diletakkan pada tombol pada saat di klik yakni dengan menjalankan fungsi simpan(data). 44

  3. Tambahkan modul Form pada app.module.ts 45 45(1)

Membuat List Daftar Alamat Otomatis Diperbarui 46. Buka file app.component.ts 46

Menampilkan Data 47. Mesuaiakan 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). 47

  1. Buka file app.component.ts Atribut data:item pada object dialogRef akan mengirimkan data item ke komponen dialog detail data. 48

  2. Buka file detail-alamat.component.ts Object data : any merupakan variabel yang dapat dibaca pada komponen HTML. 49

  3. Terjadi kesalahan pada detail-alamat.component.ts 50

  4. Buka file detail-alamat.component.html {{data.nama}} akan menampilkan variabel nama yang diperoleh dari list data. Nama atribut pada objek data merupakan nama atribut yang ada pada database. 51

Memperbarui Data 52. Untuk memperbarui data, menggunakan desain UI yang sama dengan fungsi penambahan data. Melakukan modifikasi pada file tambah-alamat.component.ts sehingga dapat berfungsi juga untuk melakukan pembaruan data. Buka file app.component.html dan pastikan tombol Edit Data sudah memuat perintah untuk membuka dialog, dilengkapi dengan parameter item (editAlamat(item)). 52

  1. Menyesuaikan kode pada app.component.ts Parameter data akan dikirimkan ke dialog sebagai data masukan yang ditampilkan pada formulir. 53

  2. Menyesuaikan file tambah-alamat.component.ts Variabel data akan diisi oleh data detail alamat jika nilai variabel itemData bernilai null. 54

  3. Melakukan modifikasi 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. Kondisional if(data.id == undefined) pada fungsi simpan(data) adalah untuk membedakan fungsi 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. 55

Menghapus data 56. Untuk menambahka fungsi penghapusan data, perlu melakukan modifikasi pada app.component.ts 56

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

PERBAIKAN 58. App.component.ts 58 58(1) 58(2)

  1. Detai-alamat.component.ts 59 59(1)

  2. Tambah-alamat.component.ts 60 60(1)

  3. Api.service.ts 61 61(1)

  4. Mendistribusikan Aplikasi ke Website Semua fungsi CRUD pada aplikasi Angular sudah tersedia. Tahap terakhir adalah mendistribusikan aplikasi Angular agar dapat dijalankan pada browser. 62

  5. Perintah tersebut akan menciptakan folder dist pada proyek Angular. File-file ini merupakan file hasil deployment Angular yang dapat dijalankan di berbagai lingkungan misalnya web, ekstensi Chrome, aplikasi desktop, maupun aplikasi mobile. 63

  6. Pindahkan isi folder tersebut pada folder htdocs pada Xampp. 64

  7. Tambah Alamat Baru. 65 65(1) 65(2)

  8. Menambah akun. 66