Login with CRUD (AngularJs & CodeIgniter 4)

Muhammad azhar rizki / 1800016137 / Tekweb Lanjut B

Pada kesempatan kali ini saya akan membuat sebuah web aplikasi menggunakan AngularJs (front-end) dan CodeIgniter (back-end) dengan tema Daftar Komik yang didalamnya terdapat halaman login sebagai tampilan awal dan halaman home sebagai tampilan utama, jadi ketika user melakukan pengisian username & password pada halaman login jika sesuai maka akan masuk kedalam halaman home, tetapi jika salah user akan tetap berada dihalaman login.

1. buat projek angular terlebih dahulu pada local disk C dengan peritnah

ng new project-uas

dan hasilnya kurang lebih seperti ini 2. install material design pada projek angular kita dengan perintah

ng add @angular/material

3. 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 4. buat file material.ts pada folder app lalu masukan code berikut 5. setelah itu pada app.module.ts masukan code seperti berikut 6. atur routingnya seperti berikut 7. pada app.component.html ubah jadi seperti ini 8. codingan untuk login.component.html 9. tambahkan fungsi masuk pada login.component.ts seperti gambar berikut, ketika usernamenya azhar dan passwordnya 1 maka akn direct ke halaman home tetapi jika username dan password salah maka akan tetap berada pada halaman login 10. codingan untuk login.component.css 11. tampilan halaman login 12. codingan untuk home.component.html 13. codingan untuk home.component.css 14. codingn untuk home.component.ts 15. dan beginilah tampilan home 16. berikutnya kita ubah codingan tambah.component.html menjadi seperti berikut 17. tambah.component.css 18. tambah.component.ts 19. tampilan dialog tambah 20. berikutnya kita ubah hapus.component.html menjadi seperti ini 21. hapus.component.css 22. hapus.component.ts 23. tampilan dialog hapus komik 24. 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 25. selanjutnya config/database.php configurasikan menjadi seperti ini agar dapat membaca database project_uas 26. kita buat controller baru bernama komik.php dan masukan codingan fungsi CRUD seperti berikut 27. jika sudah pada config/config.php ubah link base_url menjadi seperti ini 28. 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 29. sebelumnya pastikan dulu mysql dan apache pada xampp sudah nyala lalu coba kita jalankan project_uas kita dengan perintah

ng serve

30. dan inilah testing web aplikasi kita

---

Fungsi CRUD

• Create
• Read
• Update
• Delete