Aplikasi Buku Alamat - adysetyawan/tekweblanjut-1800016092 GitHub Wiki

1.Pertama install NodeJS dan Angular terlebih dahulu.

2.Membuat project baru Angular dilakukan menggunakan command line (cmd).ng new buku-alamat Perintah tersebut akan menghasilkan output Would you like to add Angular routing? (y/N). Ketik y untuk membuat Angular Routing yang berfungsi untuk mengatur navigasi halaman.

3.Selanjutnya akan muncul pertanyaan Which stylesheet format would you like to use?. Pilihlah CSS untuk membuat pengaturan style desain menggunakan CSS. Tampilan proses pembuatanya sebagai berikut:

4.Setelah terminal masuk kedalam folder aplikasi Angular tulislah perintah ng serve seperti pada gambar berikut:

5.Sebelum memulai lebih lanjut untuk membuat aplikasi, terlebih dahulu kita pahami Struktur file pada Angular adalah sebagai berikut:

6.Material desain dapat diakses melalui http://material.angular.io. Untuk mengintegrasikan MD kedalam project Angular tulis perintah berikut ini:

7.Sekarang kita akan memasang beberapa komponen UI kedalam aplikasi dengan langkah berikut ini:

• Memasukkan modul komponen Material Desain kedalam modul app.module.ts

• Selanjutnya adalah memasukkan komponen MD kedalam file app.component.html. Hapus semua yang ada pada file tersebut dan ganti dengan komponen toolbar dibawah ini:

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

• Tambahkan modul komponen Button pada app.module.ts :

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

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

• Menambahkan CSS pada app.component.css.

• Dialog Penambahan Alamat Untuk menambahkan dialog ikuti langkah berikut:

  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**

• Pada saat komponen baru dibuat, secara otomatis sistem Angular juga menambahkan kode baru pada app.module.ts.

import { TambahAlamatComponent } from './tambah-alamat/tambah-alamat.component';

Kode baru tersebut adalah:

• Karena komponen baru tersebut akan ditampilkan sebagai Dialog
  maka kita perlu menambahkan komponen tersebut pada atribut EntryComponents yang ada pada app.module.ts.

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

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

• 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 Tambahkan juga komponen DetailAlamatComponent pada app.component.ts dan buat juga fungsi untuk membuka dialog.

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

• membuat komponen dialog-konfirmasi menggunakan perintah berikut ini. Perintah ini adalah shortcut untuk membuat komponen baru pada Angular. ng g c dialog-konfirmasi

• Menambahkan DialogKonfirmasiComponent pada atribut entryComponents pada file app.module.ts. Import komponen DialogKonfirmasiComponent pada app.component.ts dan tambahkan fungsi untuk menampilkan dialog.

• tambahkan kode HTML pada file dialog-konfirmasi/dialog-konfirmasi.html

• menambahkan fungsi konfirmasi() pada dialog-konfirmasi/dialog-konfirmasi.ts untuk memberikan nilai true saat pengguna menekan tombol Ya, Hapus!.

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

• 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

• Perintah ng g service api akan menciptakan dua file yaitu api.service.spec.ts dan api.service.ts

• Selanjutnya adalah membuat fungsi pada api.service.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. 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:

• Pertama, Membuat Mysql database.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'); dalam gambar menyeseuaikan perintah di atas.

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

• Menampilkan Data pada Aplikasi Angular 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.

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

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

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

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

• Keempat, tambahkan modul Form pada app.module.ts

• Membuat List Daftar Alamat Otomatis Diperbarui

• Menampilkan Data

  `Pertama, sesuaiakan trigger pada tombol yang membuka dialog detail data pada file app.component.html. Kedua, buka file app.component.ts dan sesuaikan kode dengan kode berikut: Ketiga, buka file detail-alamat.component.ts dan sesuaikan kode menjadi seperti berikut: Keempat, buka file detail-alamat.component.html dan sesuaikan kode menjadi seperti berikut ini:

• Memperbarui Data

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: Ketiga, sesuaikan file tambah-alamat.component.ts menjadi seperti di bawah ini:

• Menghapus Data menambahka fungsi penghapusan data, kita perlu untuk melakukan modifikasi pada app.component.ts Pastikan perintah hapus pada tombol sudah dilengkapi dengan paramter id data.

• Mendistribusikan Aplikasi ke Website Jalankan perintah berikut ini:

ng build --base-href ./

Perintah tersebut akan menciptakan folder dist pada proyek Angular.

• Tambahan

TERIMAKASIH :)