DOKUMENTASI MEMBUAT PROJECT ANGULAR REST API - MeidaSafira/RESTAPIdanDatabaseSQL GitHub Wiki

Nama : MEIDA SAFIRA
NIM : 1800016025
Kls Prak : Tekweb Lanjut A
Kls Teori: Tekweb Lanjut A

Link github project angular:https://github.com/MeidaSafira/ProjectAngular.git
Link github restapi dan database sql: https://github.com/MeidaSafira/RESTAPIdanDatabaseSQL.git

Mohon Maaf sebelumnya saya buat di 2 repository karena kemarin saya push 3 folder di github file yg project angularnya tidak bisa dibuka, jadi saya buat di 2 repository

* Ini tampilan login

• Tampilan utama
  

• Tampilan Edit data
  

• Tampilan buat data
  

• Tampilan Detai data
  

• Tampilan hapus data
  

1. Pertama kita ketikkan perintah npm install -g @angular/cli pada cmd kita
   

2. Ketikkan ng --version untuk melihat versinya
   

3. selanjutnya kita ketikkan perintah ng new AplikasiCRUD untuk membuat project baru angular bernama AplikasiCRUD
   
   

4. Maka akan terbentuk file angular seperti berikut ini
   

5. Setelah terminal masuk kedalam folder aplikasi Angular tulislah perintah ng serve seperti pada gambar berikut:Tanda proses ini berhasil adalah munculnya informasi Compiled successfully. Buka browser Anda dan arahkan ke alamat localhost:4200. Artinya sistem Angular membuat server portable yang dapat diakses pada alamat domain localhost dengan port 4200.
   

6. Selanjutnya kita tambahkan material design dengan mengetikkan ng add @angular/material
   

7. Membuat Toolbar untuk AplikasiCRUD
   

8. Import modul toolbar dan MatButton pada app.modulet.ts, seperti tampilan dibawah ini
   

9. tambahkan codingan pada app.component.css seperti dibawah ini:
   

10. lalu pada app.component.html ketikkan kodingan seperti dibawah ini
    

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

12. Masukkan image yang akan ditampilkan pada project di bagian bagian src/assets
    

13. Lalu pada app.component.html tambahkan kodingan seperti ini:
    

14. Tambahkan Button untuk detail, edit dan delete
    

15. Tambahkan code pada app.component.css
    

16. Tambah kode pada index.html seperti ini:
    

17. Tampilannya akan seperti ini
    

18. Buat halaman login yaitu ketikkan ng generate component login
    

19. Tambahkan module matFormField, MattInput dan MatTable pada app.component.ts
    

20. Ketikkan pada halaman login.component.html
    

21. pada login.component.css
    

22. Lalu routing module pada app.routing.ts seperti dibawah ini:
    

23. Tampilan Login seperti ini
    

24. nanti kita akan tambah pada login.component.ts seperti dibawah ini, untuk bisa masuk ke halaman maka kita harus mengetikkan username dan password yang benar yaitu username=admin dan passwor=admin
    

25. Selanjutnya buat halaman tambah data yaitu dengan mengetikkan perintah ng g c tambah-data, seperti berikut ini
    

26. import module tambah data pada app.module.ts
    

27. ketikkan pada tambah-data.component.html
    

28. pada tambah-data.component.css
    

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

30. serta tambahkan codingan pada app.component.ts seperti tampilan dibawah ini:
    

31. Tambahkan codingan pada button tambah data siswa
    

32. Ini adalah tampilan tambah data siswa baru
    

33. Selanjutnya kita buat halaman untuk detail data yaitu ketikkan perintah ng g c detail-data pada comand promt
    

34. Pada detail-data.component.html ketikklah seperti berikut ini:
    

35. Pada detail-data.component.css
    

36. Tambahkan module DetailDataComonent pada app.component.ts
    

37. Tambah function detail()
    

38. Pada app.component.html bagian button detail kita tambahkan function detail()
    

39. Berikut ini adalah tampilan untuk detail datanya
    

40. Selanjutnya kita membuat halaman dialog-konfirmasi ini untuk tampilan saat hapus data dengan perintah ng g c dialog-konfirmasi
    

41. Import DialogKonfirmasi Component ke app.module.ts serta tambahkan kode untuk function Konfirmasihapus()
    

42. ketikkan kode pada dialog-konfirmasi.component.ts
    

43. pada dialog-konfirmasi.component.css
    

44. pada dialog-konfirmasi.component.ts buat function knfirmasi()
    

45. Berikut adalah tampilan untuk dialog konfirmasi hapus data
    

46. sebelum menyambungkan dengan server kita buat REST-API dengan ci4 terlebih dahulu langkah - langkahnya seperti di bawah ini:
    

• kita download framewor CI4 terlebih dahulu, jika sudah selsai download kita ekstrak dan letakkan ile ci4 ke dalam folder xampp/htdocs
  
• lalu kita jalankan dengan perintah php spark serve, untuk mengetahui ci4 kita sudah berjalan
• kita ketikkan php spark migrate:create kontak
  

• sehingga terbentuk File 2020-07-26-164300_Kontak.php pada folder database/migration, lalu isilah dengan kodingan seperti tampilan dibawah ini
  

• Kita buka phpMyAdmin, dan buat database baru mykontak
  

• Kembali lagi ke CI4, buat file Kontak_model.php, lalu tulisalh kode seperti dibawah ini:
  

• Pada file app/config/validation.php buatlah validasinya
  

• Buat file baru pada Controller/Kontak.php, lalu isikan kode seperti ini:
  

• Kita isi table kontak kita terlebih dahulu
  

• Lalu kita tes dengan mengetikkan http://localhoost/Kontak/Create
  

• Atau bisa juga kita cek si aplikasi postman seperti ini
  

• Selanjutnya kita buat function show
  

• Lalu kita tes coba lihat data Kontak dengan id 1 dengan mengetikkan perintah http://localhoost/Kontak/show/1 maka akan muncul data dengan id 1
  

• Lalu kita tes coba lihat data Kontak dengan id 2 dengan mengetikkan perintah http://localhoost/Kontak/show/2 maka akan muncul data dengan id 2
  

• Selanjutnya buat function delete
  

• Coba kita cek, contoh kita delete id 3 dengan perintah http://localhoost/Kontak/delete/3
  

• Maka data dengan id 3 sudah terhapus
  

47. Untuk menyambungkan dengan rest api diatas ada masalah saat disambungkan dengan project angular AplikasiCRUD sehingga saya akhirnya menyambungkan dengan Codeigniter3 bukualamat kemarin sebagai rest apinya
    

48. . 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:
    

49. 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. Tuliskan kode berikut ini pada file api.service.ts.
    

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

51. Buka browser dan cek statusnya, maka akan muncul tampilan seperti ini
    

52. 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:
53. Pada app.components.ts

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

55. update file app.component.html sehingga seperti pada kode berikut: Kode *ngFor="let item of dataSiswa" yang ada pada tag list-item akan melakukan perulangan sepanjang data dataSiswa 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.
    

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

57. pada tambah-data.component.ts
58. Tambah module Formsmodul pada app.module.ts
    
59. Pada file tambah-data.component.html tambahkan kodingannya seperti ini
    

60. Membuat List Daftar siswa Otomatis Diperbarui, menampilkan data Pertama, sesuaiakan trigger pada tombol yang membuka dialog detail data pada file app.component.html.
    

61. pada app.component.ts sesuaikan dengan kodingan dibawah ini
    

62. pada detail-data.components.ts sesuaikan dengan dibawah ini:
    

63. tabahkan pada detail-data.component.html
    

64. ini tampilannya
    

65. Untuk memperbarui data atau mengatur bagian eedit, Pertama, buka file app.component.html dan pastikan tombol Edit Data sudah memuat perintah untuk membuka dialog, dilengkapi dengan parameter item (edit (item)).
    

66. pada app.component.ts sesuaikan dengan dibawah ini
    

67. pada tambah-data.component.ts
    

68. Pada api.services.ts
    

69 Tampilan edit data yang sudah tersambung dengan server

70. Selanjutnya menghapus data, Untuk menambahka fungsi penghapusan data, kita perlu untuk melakukan modifikasi pada app.component.ts. Sesuaikan kode sehigga menjadi seperti berikut:
    

71. Tambah pada api.servis.ts
    

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

73. Tampilan hapus