UAS TekWeb 1800016131 AHMAD NURHADI - Nurhadi-27/Uas-tekweb-1800016131-Ahmad-nurhadi GitHub Wiki

  1. buat program dahulu pada angular cmd ng new project-uas dan hasilnya kurang lebih seperti ini 1

  2. install material design pada projek angular kita dengan perintah

ng add @angular/material 2

  1. buat component baru hapus, home, login, tambah dengan perintah

ng g c login // untuk halaman login ng g c home // untuk halaman home ng g c tambah // untuk dialog tambah data ng g c hapus // untuk dialog hapus

dan hasil foldernya akan seperti ini: 3

  1. buat file material.ts pada folder app lalu masukan code berikut 4 4a

  2. setelah itu pada app.module.ts masukan code seperti berikut 5

  3. atur routingnya seperti berikut 6

  4. pada app.component.html ubah jadi seperti ini 7

  5. codingan untuk login.component.html 8

  6. tambahkan fungsi masuk pada login.component.ts seperti gambar berikut, ketika usernamenya azhar dan passwordnya 1 maka akan masuk ke halaman home tetapi jika username dan password salah maka akan tetap berada pada halaman login 9

  7. codingan untuk login.component.css 10

  8. tampilan halaman login 11

  9. codingan untuk home.component.html 12

  10. codingan untuk home.component.css 13

  11. codingan untuk home.component.ts 14 14a

  12. dan beginilah tampilan home 15

  13. berikutnya kita ubah codingan tambah.component.html menjadi seperti berikut 16

  14. tambah.component.css 17

  15. tambah.component.ts 18

  16. tampilan dialog tambah 19

  17. berikutnya kita ubah hapus.component.html menjadi seperti ini 20

  18. hapus.component.css 21

  19. hapus.component.ts 22

  20. tampilan dialog hapus komik 23

  21. setelah itu kita mulai membuat rest-api dengan framework codeIgniter, pertama kita buat database project_uas dengan nama tabel komik dan sesuaikan kolomnya seperti dibawah ini 24

  22. selanjutnya config/database.php configurasikan menjadi seperti ini agar dapat membaca database project_uas 25

  23. kita buat controller baru bernama komik.php dan masukan codingan fungsi CRUD seperti berikut 26

  24. jika sudah pada config/config.php ubah link base_url menjadi seperti ini 27

  25. setelah itu kita integrasikan project angular yang sudah kita buat dengan rest-api yang sudah kita konfigurasi. pada project daftar komik kita buat services api dengan perintah

ng g service api jika sudah tambah fungsi" berikut 28

  1. sebelumnya pastikan dulu mysql dan apache pada xampp sudah nyala lalu coba kita jalankan project_uas kita dengan perintah

ng serve 29