Membuat aplikasi dan login menggunakan Angular dan CI - Wahyu17-lab/Tekweb1800016079_UAS_Guest-app GitHub Wiki

Aplikasi yang akan kita buat adalah aplikasi Guest-app yang memenuhi fungsional dasar CRUD (Create, Read, Update, Delete) data.Adapun yang dibutuhkan adalah Node Js, Angular CLI, Material for design , dan xampp.

Langkah - langkah pembuatan antara lain sebagai berikut :

  1. Membuat project baru pada Angular , hal ini dapat dilakukan melalui cmd(command line). yaitu dengan memasukkan perintah ng new guest-app, setelah itu membuat component login dan admin. lakukan langkahya dengan menggunakan perintah ng g c login dan ng g c admin didalam cmd. seperti di bawah ini :

1 b (2)

  1. Kemudian instal material design nya dengan perintah ng add @angular/material, setelah itu kita membuat folder material yang berisikan material.ts, kemudian masukkan beberapa komponen material angular.

2

a

b

  1. Kemudian buka app.module.ts dan tambahkan module material desain yang sudah kita buat.

2a

  1. Buka app-routing.module.ts kemudian import LoginComponent dan adminComponent lalu tambahkan objek route di dalam Routes seperti dibawah ini :

3

  1. Kemudian membuat desain halaman utama, didalam file app.component.html. masukkan kode seperti dibawah ini :

c

  1. Kemudian membuat desain untuk halaman login, dengan cara buka login.component.html nya untuk membuat tampilan login form. Masukkan kode seperti dibawah ini :

d

dan untuk mengaturnya style nya jangan lupa untuk masukkan kode nya didalam css nya seperti dibawah ini :

e

  1. Setelah itu sesuaikan lagi kode yang berada di app.module.ts seperti kode dibawah ini

4d

  1. Selanjutnya buka file login.component.ts untuk menambahkan navigasi agar bisa terhubung ke halaman admin. Sesuaikan seperti dibawah ini

4e

  1. Setelah itu membuat desain untuk halaman admin, dengan masuk ke admin.component.html seperti dibawah ini : 4f

lalu untuk mengatur style dengan mengaturnya melalui admin.component.css seperti di bawah ini :

4g

  1. Selanjutnya membuat componen untuk tambah-data. Lakukan dengan perintah ng g c tambah-data, lalu buka file tambah-data.component.html dan tambahkan kode seperti dibawah ini :

4h

f

  1. Setelah itu update kode yang ada di app.module.ts seperti dibawah ini

g

  1. Setelah itu kita buat database seperti yang kita butuhkan untuk aplikasi yang kita buat
    h

  2. kita letakkan file CI yang kita unduh ke htdocs didalam xampp, selanjutnya mengatur Koneksi HTTP Angular pada app.module.ts . masukkan kodenya seperti dibawah ini :

i

  1. Berikutnya adalah membuat api.service.ts dengan menjalankan perintah ng g service api melalui terminal.Perintah ini akan menciptakan dua file yaitu api.service.spec.ts dan api.service.ts.

  2. Kemudian update kode pada file api.service.ts menjadi seperti berikut ini :

j

  1. Setelah itu, memanggil data pada server kita update kode pada file admin.component.ts menjadi seperti berikut :

k

l

  1. Setelah itu hubungkan database dengan aplikasi dengan masuk ke config lalu database.php

m

  1. Berikutnya buka file application/controllers/Api.php yang ada pada aplikasi API Codeigniter.

n

  1. Selanjutnya update file api.service.ts seperti sebagai berikut :

o

  1. Kemudian kita update tambah-data.component.html menjadi sebagai berikut :

p

Setelah itu kita tambahkan fungsi simpan data pada tambah-data.component.ts

q

lalu kita tambahkan fungsi edit data pada admin.component.ts

r

untuk konfirmasi hapus , kita harus melakukan perintah ng g c dialog-konfirmasi. buka file yang sudah dibuat dan update kode seperti dibawah ini

s

Selesai membuat maka lakukan percobaan dengan menggunakan cmd dan masuk ke dalam folder guest-app dan lakukan perintah ng serve.

Tampilan Login

login

Tampilan berhasil login

tampilan sukses

Tampilan ketika tambah

tambah

Tampilan berhasil tambah

brhasil tambah

Tampilan berhasil edit

setelah edit

Tampilan Hapus

tampilan hapus

Tampilan berhasil hapus

berhasil hapus