Project Aplikasi Buku Alamat - Indriisma/buku_alamat GitHub Wiki

Hal yang dibutuhkan dalam membuat aplikasinya :

1. Instalasi Angular
2. Memasang Template
3. Instalasi Codeigniter
4. Membuat Data Server

Langkah-langkah pembuatan aplikasi Buku Alamat

1. Membuat project baru Angular dilakukan dengan menggunakan command line (cmd) NodeJs jika menggunakan Windows atau aplikasi Terminal jika menggunakan Linux dengan memasukkan perintah ng new buku-alamat . Perintah ng new buku-alamat akan menghasilkan folder baru yang bernama buku-alamat.

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

3. Kemudian proses ini akan berhasil jika muncul informasi Compiled successfully. Lalu buka browser dan arahkan ke alamat localhost:4200. Dimana sistem Angular membuat server portable yang dapat diakses pada alamat domain localhost dengan port 4200.

4. Setelah membuat project baru di angular kita membangun aplikasi Buku Alamat. Sebelumnya ini adalah struktur file pada Angular. File utama pengembangan ada pada folder app. Folder tersebut berisi beberapa file diantaranya:

• app-routing-module.ts untuk mengatur navigasi.
• app.component.css untuk membuat style desain user interface
• app.component.html untuk membuat desain user interface.
• app.component.spec.ts
• app.component.ts untuk menuliskan perintah-perintah program termasuk algoritma.
• app.module.ts file utama aplikasi untuk mengatur library-libary yang digunakan termasuk mengatur routing dan component yang digunakan.

5. Selanjutnya kita akan memasang Template. Masukkan perintah ng add @angular/material .

6. Memasukkan modul komponen Material Desain kedalam app.module.ts di file app.module.ts.

7. Kemudian memasukkan komponen desain pada app.component.html . Berikut perintahnya :

Aplikasi Buku Alamat  Ini gambar tampilan runnya.

8. Selanjutnya membuat Desain User Interface (UI). Tampilan desainnya ada tambah alamat, detail, edit, dan hapus.

Dan menambahkan tombol Buat Alamat yang diletakkan pada sisi kanan Toolbar dengan menambahkan CSS pada file app.component.css.

.spacer { flex-grow: 1; }

9. Kemudian menambahkan komponen Button pada app.module.ts.

10. Dan button pada app.component.html didalam Toolbar

11. Selanjutnya Membuat Card Daftar Alamat. Adapun komponen yang digunakan adalah Card, List, Icon, dan Button. Pertama memasukkan komponen Card, List, dan Icon kedalam app.module.ts

12. Membuat desain card pada app.component.html. Kemudian kita mencari gambar lalu simpan di folder src/assets dengan diberi nama avatar.png supaya gambar tersebut muncul sebagai avatar pada list yang akan dibuat.

13. Kemudian menambahkan CSS pada app.component.css. CSS .container akan membuat tampilan card yang memiliki batas 100px di kanan dan kiri serta batas 50px di atas dan bawah. Perintah yang dimasukkan ke app.component.css yaitu :

.container{ padding: 50px 100px 50px 100px; }

14. Selanjutnya membuat List menu. List menu merupakan komponen Material Desain untuk menampilkan daftar menu dalam tampilan popup yang muncul setelah tombol ditekan. Yang terdiri dari : DETAIL, EDIT, dan DELETE. Setelah kita menambahkan menu pada list, kita tambahkan kode HTML pada file app.component.html dengan menambahkan kode pada app.module.ts.

15. Kemudian tambahkan pada app.component.html seperti gambar dibawah ini.

16. Selanjutnya membuat Dialog Penambahan Alamat, Seperti gambar dibawah.

17. Untuk menambahkan dialog, pertama tambahkan modul MatDialog, MatFormField, dan MatInput pada app.module.ts.

18. Kemudian membuat component baru untuk membuat desain dialog, melalui terminal yaitu

ng generate component tambah-alamat

19. Jika sudah membuat component baru dan mengarah pada project angular akan membuat beberapa file secara otomatis seperti gambar berikut.

20. Kemudian masukan kode baru ini pada app.module.ts

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

@NgModule({ ... entryComponents:[ TambahAlamatComponent ] ... })

22. Selanjutnya membuat desain HTML untuk menambahkan alamat baru pada file tambah-alamat/tambah-alamat.component.html.

23. Menambahkan perintah untuk menampilkan dialog dengan cara menambahkan kode pada file app.component.ts. Perintah ini untuk memanggil halaman TambahAlamatComponent yang akan ditampilkan dalam dialog.

24. Dan menambahkan trigger pada tombol TAMBAH ALAMAT yang ada pada Toolbar. Tombol tersebut digunakan untuk memanggil fungsi buatAlamat() yang sudah dibuat pada proses sebelumnya. kemudian tambahkan perintah (click)="tambahAlamat()" pada file app.component.html.

25. Selanjutnya membuat Dialog Detail Alamat yang akan digunakan untuk menampilkan data alamat secara detail. Seperti gambar berikut.

26. Pertama buat komponen baru dengan menuliskan perintah ng generate component detail-alamat ini pada terminal.

27. Kedua tambahkan kode HTML dibawah ini pada detail-alamat.component.html.

28. Ketiga tambahkan komponen DetailAlamatComponent pada EntryComponents dalam file app.module.ts. Dan menambahkan komponen DetailAlamatComponent pada app.component.ts dengan membuat fungsi untuk membuka dialog.

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

<mat-menu #menu="matMenu"> <button mat-menu-item (click)="detailAlamat()">Detail Edit Delete

30. Selanjutnya membuat Dialog Konfirmasi Hapus Data dimana fungsi Konfirmasi ini diperlukan ketika pengguna akan menghapus data.

31. Pertama membuat komponen dialog-konfirmasi menggunakan perintah ** ng g c dialog-konfirmasi** yang mana perintah ini adalah shortcut untuk membuat komponen baru pada Angular.

32. Kedua, menambahkan DialogKonfirmasiComponent di atribut entryComponents pada file app.module.ts. dan import komponen DialogKonfirmasiComponent di app.component.ts dengan menambahkan fungsi untuk menampilkan dialog.

33. Ketiga, menambahkan kode HTML pada file dialog-konfirmasi/dialog-konfirmasi.html.

34. Keempat, menambahkan fungsi konfirmasi() pada dialog-konfirmasi/dialog-konfirmasi.ts untuk memberikan nilai true saat pengguna menekan tombol Ya, Hapus!. ... import { MatDialogRef} from '@angular/material/dialog'; . . . konfirmasi() { this.dialogRef.close(true); }

Kondisional if(result == 'true') pada tahap ini adalah untuk mengeksekusi jika pengguna menyetujui konfirmasi penghapusan. Buka console (Ctrl+Shift+i) pada browser untuk memastikan bahwa semua berjalan benar.

35. Selanjutnya membuat Dialog Edit Data. Dialog Edit Data prinsipnya sama dengan membuat dialog data baru, oleh sebab itu kita akan memanfaatkan desain UI membuat data baru untuk keperluan edit data.

36. Kemudian kita melakukan komunikasi Angular dengan server, dimana angular merupakan framework yang berorientasi pada perangkat klien seperti browser. Dan kita membuat koneksi sederhana antara aplikasi Angular dengan server yang akan kita buat menggunakan PHP.

37. Kemudian kita membuat API menggunakan Codeigniter, API sendiri digunakan untuk media komunikasi antara aplikasi angular dengan database . Disini kita menggunakan bantuan aplikasi XAMPP agar membantu membuat web service lebih mudah. Karena Angular tidak dapat berkomunikasi secara langsung dengan SQL database yang ada pada server. API ini bertugas untuk mengambil, menyimpan, memperbarui, atau menghapus data dari database jika ada permintaan dari aplikasi angular kemudian memberikan respon kepada aplikasi Angular tentang permintaan yang dikirim.

38. Selanjutnya Unduh file dari repositori github https://github.com/faridsurya/restapi_codeigniter3. Ekstraksi file aplikasi lalu pindahkan pada folder htdocs di XAMPP. Ubah nama folder tersebut menjadi rest-api. seperti gambar dibawah.

39. Dan mengatur koneksi HTTP Angular agar terhubung dengan API Codeigniter yaitu Pertama memasang modul HTTP pada app.module.ts.

40. Kedua membuat api.service.ts dengan menjalankan perintah ng g service api. Perintah tersebut akan menciptakan dua file yaitu api.service.spec.ts dan api.service.ts.

41. Ketiga tuliskan kode dibawah ini ke file ** api.service.ts**.

42. Keempat membuat fungsi pada api.service.ts. dengan kode ini

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

43. Kelima memanggil data pada server melalui komponen app.component.ts. Dan tambahkan kode berikut ini pada file app.component.ts.

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

44. Jalankan aplikasi Angular dan periksa halaman console pada browser.

45. Gambar dibawah menunukkan bahwa permintaan data dari aplikasi Angular sudah berjalan dengan baik.

46. Kemudian menampilkan Data Server. Pertama kita menyediakan data pada API dan membuat Mysql database, sebelumnya buka aplikasi Phpmyadmin melalui browser dengan alamat localhost/phpmyadmin. Buatlah database baru dengan nama buku_alamat.

47. Buka file pada application/config/database.php dan isikan buku_alamat pada atribut database sesuai dengan nama database yang sudah kita buat.

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

49. Selanjutnya menampilkan Data pada Aplikasi Angular, pertama update file api.service.ts.

50. Kedua, Update file app.component.ts.

//Sebelum getData() { this.api.status().subscribe(res=>{ console.log(res); }) } //ganti menjadi dataAlamat:any=[]; getData() { this.api.baca().subscribe(res=>{ this.dataAlamat=res; }) }

51. Gambar di bawah adalah respon data yang dihasilkan oleh fungsi getData().

52. Ketiga, update file app.component.html. Terdapat 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.

53. Gambar dibawah merupakan contoh tampilan yang berhasil diambil dari server.

54. Selanjutnya menambahkan Data Baru, pertama buka kembali file api.service.ts.

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

55. Kedua, buka file tambah-alamat.component.ts dan ApiService digunakan untuk mengakses service yang menghubungkan aplikasi Angular dengan API Codeigniter yang terapat pada server.

56. Kemudian buka file tambah-alamat.component.html.

57. Selanjutnya menambahkan modul Form pada app.module.ts.

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

58. Kemudian membuat List Daftar Alamat Otomatis Diperbarui. Dialog akan ditutup otomatis oleh perintah this.dialogRef.close(true);. Untuk membuat data secara otomatis diperbarui ketika terdapat pembaruan data, buka file app.component.ts.

59. Selanjutnya menampilkan Data yang akan disimpan yaitu sesuaiakan trigger pada tombol yang membuka dialog detail data pada file app.component.html.

60. Dan buka file app.component.ts. Data:item pada object dialogRef akan mengirimkan data item ke komponen dialog detail data.

61. Selanjutnya buka file detail-alamat.component.ts.

62. Kemudian buka file detail-alamat.component.html. {{data.nama}} akan menampilkan variabel nama yang diperoleh dari list data.

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

64. Kedua menyesuaikan kode pada app.component.ts untuk menampilkan dialog formulir.

65. Ketiga menyesuaikan file tambah-alamat.component.ts.

66. Keempat menambahkan data baru atau memperbarui data yang sudah ada disesuaikan pada kode pada app.component.ts.

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.

67. Kemudian menghapus Data, untuk menambahka fungsi penghapusan data dan melakukan modifikasi di app.component.ts.

68. Pastikan perintah hapus pada tombol sudah dilengkapi dengan paramter id data di mat menu Delete.

<button mat-menu-item (click)="konfirmasiHapus(item.id)">Delete

69. Mendistribusikan Aplikasi ke Website dengan memasukan perintah ini di cmd ng build --base-href ./

70. Kemudian pindahkan isi folder tersebut pada folder htdocs pada Xampp. Pastikan nama folder pada htdocs adalah buku-alamat. Akses melalui browser dengan alamat localhost/buku-alamat.

71. Dan inilah tampilan aplikasi Angular pertama yang kita buat dan berhasil didistribusikan dalam situs web.