Project Buku Alamat - ruifaq/buku-alamat GitHub Wiki

---

Kali ini kita akan membuat sebuah project baru dengan menggunakan template angular dengan nama buku-alamat.Sebelum memulai project pastikan kebutuhan sudah terpenuhi, seperti NodeJS dan NPM sudah terinstall di komputer, dan pastinya Angular sudah ada di komputer kita. Berikut adalah langkah - langkah membuat project buku-alamat dengan Angular :

1. Pertama kita masuk ke dalam cmd, setelah itu kita buat projek baru dengan memasukkan perintah ng new buku-alamat. Pastikan perangkat kita terhubung internet saat membuat proyek Angular baru. Ada beberapa paket yang mengharuskan perangkat terhubung dengan internet.

2. Setelah pembuatan projek selesai, kita masuk ke dalam projek tersebut dengan menggunakan perintah cd buku-alamat. Lalu kita hubungkan projek tersebut dengan server masukkan perintah ng serve, tunggu sampai selesai dan buka browser, masukkan localhost:4200.

3. Kemudian kita buka projek buku-alamat dengan menggunakan reading code, disini saya menggunakan Visual Studio Code. Gambar kanan adalah projek yang kita buat dengan template bawaan Angular.

4. Langkah selanjutnya adalah memasang template, material template bisa kita dapatkan melalui http://material.angular.io. Masuk ke dalam cdm/buku-alamat, Pastikan terminal sudah mengarah pada folder project Angular yang sebelumnya sudah dibuat. Jika server sebelumnya masih berjalan, tekan Ctrl + C untuk menghentikan server Angular yang berjalan. Nantinya kita akan diberikan pilihan beberapa tema warna template, pilih salah satu dan tunggu prosesnya sampai selesai.

5. Kemudian menerapkan template tersebut ke dalam projek yang kita buat, dengan mengimport komponen material ke dalam modul app.module.ts.

6. Kemudian kita jalankan web browser dan hasilnya adalah seperti gambar dibawah.

7. Setelah itu kita akan membuat tampilan UI. Komponen yang digunakan adalah material desain. Pertama kita akan membuat toolbar, tambahkan css .spacer pada app.component.css.

8. Tambahkan button “Tambah Alamat” pada app.component.html didalam toolbar yang dibuat.

9. Selanjutnya kita tambahkan komponen card, list, dan icon pada app.module.ts.

10. Kemudian Membuat desain card pada app.component.html. Gambar pada matListAvatar mengarah pada folder src/assets, jika gambar tidak muncul tambahkan gambar terlebih dahulu pada folder assets atau menambahkan “/” dibagian depan “…assets/avatar.png" alt="...">.

11. Setelah itu tambahkan css baru pada app.component.css, css yang ditambahkan yaitu container yang nantinya akan digunakan untuk mengatur ukuran card.

12. Selanjutnya kita akan membuat list menu, list menu merupakan komponen Material Desain untuk menampilkan daftar menu dalam tampilan popup yang muncul setelah sebuah tombol ditekan. List menu yang akan kita buat adalah DETAIL, EDIT, dan DELETE. Pertama kita import komponen yang diperlukan pada app.module.ts.

13. Kemudian kita buat button yang akan menampilkan list menu tersebut di dalam app.component.html.

14. Selanjutnya kita akan membuat dialog penambahan alamat, Aplikasi ini menggunakan MatDialog untuk menambahkan data baru. Hal pertama yang harus kita lakukan adalah menambahkan komponen MatDialog, MatFormField, dan MatInput pada app.module.ts.

15. Kemudian kita akan menambahkan komponen baru untuk membuat desain dialog, caranya adalah masuk ke dalam cmd dan masukkan perintah ng generate component tambah-alamat.

16. Selanjutnya menambahkan komponen baru pada atribut EntryComponents.

17. Setelah itu kita masuk ke dalam tambah-alamat/tambah-alamat.component.html dan masukkan kode HTML yang ada, nantinya kode HTML itu akan keluar Ketika kita hendak menambahkan alamat baru.

18. Kemudian menambahkan perintah untuk kenampilkan dialog tersebut dengan menambahkan beberapa kode ke dalam app.component.ts, perintah tersebut akan memanggil halaman TambahAlamatComponent.

19. Setelah itu kita tambahkan trigger pada button “Tambah Alamat” yang nantinya akan memanggil fungsi buatAlamat() Ketika kita klik.

20. Selanjutnya kita akan membuat komponen baru dengan nama detail-alamat, dengan memasukkan perintah ‘ng generate component detail-alamat’ pada cmd. Nantinya detail-alamat akan menampilkan detail dari data orang pada projek tersebut.

21. Kemudian menambahkan kode HTML pada detail-alamat.component.ts, kode HTML inilah yang akan keluar nantinya Ketika kita klik detail.

22. Kita lanjutkan dengan menambahkan komponen DetaiAlamatComponent pada EntryComponents dalam file app.module.ts dan jangan lupa tamabahkan komponen DetailAlamatComponent pada app.component.ts dan buat juga fungsi untuk membuka dialog.

23. Kemudian masuk ke dalam file app.compnent.html dan tambahkan “detailAlamat()” pada menu Detail, tujuannya adalah Ketika kita klik Detail maka system akan memanggil data yang terdapat pada detail-alamat.component.html. Lalu kita lanjutkan dengan membuat dialog konfirmasi hapus data.

24. Pertama membuat komponen dialog-konfirmasi menggunakan perintah “ng g c dialog-konfirmasi”. Perintah ini adalah shortcut untuk membuat komponen baru pada Angular.

25. Kemudian tambahkan kode HTML pada file dialog-konfirmasi/dialog-konfirmasi.html. Nantinya kode tersebut akan muncul sebagai pop up Ketika kita hendak menghapus sebuah data.

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

27. Langkah selanjutnya adalah kita akan membuat API menggunakan Codeigniter. Pertama, pastikan Apache aktif, selanjutnya menginstal Codeigniter dan gunakan Codeigniter yang sudah dikonfirgurasi agar dapat digunakan untuk keperluan pembuatan API. Sebelum itu kita download file dari repositori github https://github.com/faridsurya/restapi_codeigniter3, lalu pindahkan ke dalam folder htdocs pada XAMPP dan ubah Namanya menjadi rest-api. Jika semua bahan sudah siap kita lanjutkan pengerjaanya, Pertama mengatur koneksi HTTP Angular, kita perlu untuk memasang modul HTTP pada app.module.ts.

28. Kemudian membuat api.service.ts dengan perintah “ng g service api” pada cmd/terminal, perintah tersebut akan menciptakan dua file yaitu api.service.spec.ts dan api.service.ts.

29. Selanjutnya memasukkan kode “import { HttpClient } from '@angular/common/http';” pada api.sercvice.ts.

30. Setelah itu buatlah fungsi “export class ApiService” pada api.service.ts.

31. Selanjutnya menambahkan kode pada app.component.ts yang nantinya akan digunakan untuk memanggil data pada server melalui komponen app.component.ts. Terdapat tiga bagian kode yang harus ditambahkan pada file app.component.ts yaitu this.getData(), this.api, status().

32. Kemudian kita acoba jalankan aplikasi angular pada browser, lalu kita buka element aplikasi tersebut dengan cara Ctrl + shift +I atau dengan klik kanan pada jendela browser dan pilih Inspect element, lalu kita lihat pada bagian Network. Untuk hasil dibawah masih salah yang mana harusnya hasil previewnya adalah ”OK”, hal ini karena XAMPP saya bermasalah pada konfigurasi dan penjelasannya dilangkah berikutnya.

33. Selanjutnya kita akan menampilkan data yang bersumber dari server dan menampilkannya pada aplikasi angular. Pertama membuat Mysql database yang akan dibuat di aplikasi Phpmyadmin melalui browser dengan alamat localhost/phpmyadmin. Buatlah database baru dengan nama buku_alamat. Masalah yang saya temukan disini adalah, pertama Phpmyadmin memerlukan login jika ingin mengakses aplikasinya padahal jika dalam keadaan default, tidak menggunakn login. Dikarenakan tidak mengetahui passwordnya saya tidak bisa masuk ke dalam aplikasi tersebut. Jadi solusinya adalah memperbaharui user dengan cara masuk ke dalam cmd  mysql -u root -p (login kedalam mysql)  MariaBD  mysql  dan masukkan perintah “ALTER USER 'root'@'localhost' IDENTIFIED BY '1234';”, mengapa menggunakan perintah Alter User tidak Update user, hal ini karena kita akan mengupdate atau merubah user root bukan user biasa. Setelah kita dapatkan username : root dan password : 1234, coba login dan berhasil masuk ke dalam aplikasi Phpmyadmin.

34. Kemudian dalam phpMyAdmin kita buat database dengan nama buku_alamat, setelah itu kita buat tabel dengan nama alamat dan buat kolom sebanyak 8 buah. Lalu masukkan nama kolom yang terdiri dari (id, nama, hp, email, alamat, kota, propinsi,kodepos) dan simpan.

35. Selanjutnya adalah mengisi kolom tersebut, caranya adalah masuk ke dalam menu SQL dan masukkan perintah 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'); , lalu klik go/kirim maka data otomatis akan masuk ke dalam tabel alamat tadi.

36. Kemudian 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”.

37. Setelah itu buka file “application/controllers/Api.php” yang ada pada aplikasi API Codeigniter. Disini saya menemukan masalah dimana Ketika mencoba menjalankan aplikasi, tidak berhasil padahal semua step sudah diikuti dengan benar. Teryata setelah di cek lagi ada satu penulisan yang salah pada file Api.php yaitu “publick” yang seharusnya adalah “public”.

38. Tahap selanjutnya adalah kita akan menampilkan data yang tersedia pada API pada daftar alamat yang sudah kita buat sebelumnya di aplikasi Angular. Pertama, update file api.service.ts.

39. Yang kedua adalah Update file app.component.ts

40. Dan kita jalankan aplikasi Angular dan periksa apakah data alamat yang disediakan oleh API Codeigniter sudah tesedia dengan memeriksa Network pada Browser. Apabila data alamat tidak keluar bisa kita cek Kembali di Langkah sebelumnya atau bisa kita lihat bagian mana yang masih error di cmd. Disini saya mendapatkan masalah dimana fungsi getData() tersebut tidak bisa dipanggil atau tidak muncul dan mengalami kendala seperti gambar di no 32. Disitu tertera bawasannya yang paling fatal adalah akses untuk database ditolak oleh XAMPP terutama dibagian mysql database. Dan cara untuk mengatasinya adalah dengan konfigurasi ulang mysql pada aplikasi XAMPP dan pilih file my.ini, tambahkan kode “skip-grant-tables”. Lalu jalankan ulang mysql dan coba buka Kembali aplikasi angular pada web browser.

41. Selanjutnya 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 sebelumnya.

42. Dan ini adalah tampilan aplikasi yang kita buat beserta data yang telah kita buat dalam database dengan menggunakan phpMyAdmin.

43. Kemudian kita akan memanfaatkan desain UI dialog tambah data baru untuk menyimpan data ke database. Pertama, buka kembali file api.service.ts dan tambahkan kode yang ada.

44. Kedua, buka file tambah-alamat.component.ts dam tambahkan kodenya.

45. Ketiga, buka file tambah-alamat.component.html dan sesuaikan kodenya, karena nantinya penambahan alamat beru tersebut akan langsung terhubung ke dalam database.

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

47. Selanjutnya kita akan 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 masukkan kodenya.

48. Tahap selanjutnya kita akan menampilkan detail data yang tersimpan, dengan memodifikasi alamat mat-menu pada app.component.html. Pertama, sesuaiakan trigger pada tombol yang membuka dialog detail data pada file app.component.html. Perintah (click)="detailAlamat(item)". Parameter item merupakan object yang didalamnya terdapat data-data alamat (nama, email, hp, dll).

49. Kedua, buka file app.component.ts dan sesuaikan kodenya. Atribut data:item pada object dialogRef akan mengirimkan data item ke komponen dialog detail data.

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

51. Keempat, buka file detail-alamat.component.html dan sesuaikan kodenya, nantinya detail alamat akan menampilkan data user, yang mana user tersebut datanya sudah tersimpan didalam database.

52. Selanjutnya kita akan membuat sebuah system dimana data Ketika diedit maka akan berubah, caranya adalah 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. Pertama, buka file app.component.html dan pastikan tombol Edit Data sudah memuat perintah untuk membuka dialog, dilengkapi dengan parameter item (editAlamat(item)).

53. Kedua, sesuaikan kode pada app.component.ts untuk fungsi menampilkan dialog formulir, Parameter data akan dikirimkan ke dialog sebagai data masukan yang ditampilkan pada formulir. Proses ini mirip dengan prosedur untuk menampilkan detail alamat.

54. Ketiga, sesuaikan file tambah-alamat.component.ts. 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. Selanjutnya esuaikan kode pada app.component.ts. Kondisional if(data.id == undefined) pada fungsi simpan(data) adalah untuk membedakan fungsi tambah baru atau pembaruan data.

55. Memasuki Langkah berikutnya adalah menambahkan fungsi penghapusan data, kita perlu untuk melakukan modifikasi pada app.component.ts dan sesuaikan kodenya

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

57. Selanjutnya karena semua fungsi CRUD pada aplikasi Angular sudah tersedia. Langkah terakhir adalah mendistribusikan aplikasi Angular agar dapat dijalankan pada browser, caranya adalah memasukkan perintah “ng build --base-href ./” pada cmd. Perintah tersebut nantinya akan menciptakan folder dist pada proyek Angular. Ini dari folder tersebut adalah file hasil deployment Angular yang dapat dijalankan di berbagai lingkungan misalnya web, ekstensi Chrome, aplikasi desktop, maupun aplikasi mobile.

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

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