Login with CRUD (AngularJs & CodeIgniter 4) - Andrey1601/uas_tekweb_1800016108 GitHub Wiki

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 1

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

5

  1. setelah itu pada app.module.ts masukan code seperti berikut

6

  1. atur routingnya seperti berikut

7

  1. pada app.component.html ubah jadi seperti ini

8

  1. codingan untuk login.component.html

9

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

10

  1. codingan untuk login.component.css

11

  1. tampilan halaman login

12

  1. codingan untuk home.component.html

13

  1. codingan untuk home.component.css

14

  1. codingn untuk home.component.ts

15

16

  1. dan beginilah tampilan home

17 tampilan

  1. berikutnya kita ubah codingan tambah.component.html menjadi seperti berikut

18

  1. tambah.component.css

19

  1. tambah.component.ts

20

  1. tampilan dialog tambah

21 tampilan

  1. berikutnya kita ubah hapus.component.html menjadi seperti ini

22

  1. hapus.component.css

23

  1. hapus.component.ts

24

  1. tampilan dialog hapus komik

25

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

26 php

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

27

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

28

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

29

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

30

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

ng serve

31

  1. dan inilah testing web aplikasi kita

32

Fungsi CRUD

  • Create

33

  • Read

34

  • Update

35

  • Delete

36