Membuat CRUD Login dengan Angular dan Membuat Rest Api - adeliaputri/UASTEKWEBLANJUT_1800016056 GitHub Wiki

Assalamu’alaikum Warahmatullahi Wabarakaatuh.

Bismillahirrahmanirrahim...

Yuk Simak Bagaimana sih cara membuat CRUD + Login dengan angular. Dan cara membuat rest-api sendiri.

Saya akan membuat aplikasi CRUD + Login dengan Angular mengenai Data Mahasiswa. Login hanya bisa dilakukan oleh seorang admin.

Untuk Membuat CRUD + Login dengan Angular dan Membuat Rest – api . Pastikan terlebih dahulu memenuhi syaratnya :

  1. Pastikan PC / Laptop memiliki Text Editor
  2. Sudah memiliki node js dan npm. Jika lupa bisa mengeceknya dengan cara membuka cmd dan mengetikkan node – v (untuk mengecek versi dari node js) dan npm -v (untuk mengecek versi dari npm)
  3. Pastikan sudah menginstall Angular. Jika belum bisa melakukan install langsung di cmd dengan mengetikkan ng install @angular/cli.
  4. Download Codeigniter 3 atau 4, disesuaikan , diperlukan Untuk membuat rest-api
  5. Memiliki apk XAMPP

Membuat Rest Api

  1. Buatlah Database baru di mysql. Disesuaikan isinya dengan kebutuhan

1

  1. Kemudian Buka Project File Codeigniter yang telah didownload. Setelah itu lakukan modifikasi pada file config/database.php ini berfungsi untuk menampilkan atau memasukkan database yang telah dibuat sebelumnya kedalam project

2

  1. Kemudian pada file config/config.php lakukan penambahan syntax di baris 26 atau menjadi $config['base_url']= http://localhost/rest-api/index.php/api/. Alamat tersebut berfungsi untuk pemanggilan file pada api.service.ts yang terdapat dalam project angular di tahap berikutnya. Nama rest-api yang tertera pada alamat disesuaikan dengan nama folder rest-api yang dibuat.

3

  1. Buka file autoload.php . kemudian tambahkan syntax $autoload['libraries'] = array('database','session','encryption'); berfungsi untuk pemanggilan database yang telah dibuat

4

  1. Buka controllers/api.php. lakukan modifikasi atau penambahan syntax seperti dibawah ini. Syntax tersebut berfungsi agar Ketika kita melakukan perinta CRUD dapat berfungsi. Dan sinkronkan dengan nama table yang telah dibuat pada database

5

  1. Kemudian periksa apakah data tersebut berhasil dimasukkan. Caranya yaitu menjalankan localhost/rest-api. Jika berhasil maka statusnya “OK” dan data yang dimasukkan akan muncul

6

6(1)

6(2)

Membuat CRUD + Login dengan Angular

  1. Untuk membuat project baru pada angular gunakan perintah ng new namaproject. Contohnya ng new daftar-mahasiswa
  2. Kemudian tambahkan material pada project . Dengan mengetikkan perintah ng add @angular/material

crudno2

  1. Buatlah file yang diperlukan dengan perintah : ng g c namafile. Karena kita ingin membuat aplikasi CRUD + login maka buatlah file-file yang diperlukan seperti :
  • Detail-data
  • Tambah-data
  • Edit-data
  • Dialog-konfirmasi
  • Login Contohnya pada gambar dibawah ini

crudno3

  1. Kemudian buat file api service dengan perintag = ng g service api. File ini sebagai perantara / penghubung project angular dan rest-api . agar CRUD dapat dipakai atau pun pemasukkan database berhasil Jika telah dibuat maka lakukan penambahan syntax pada file api.service. ts seperti pada gambar dibawah ini

crudno4

Melakukan Edit tampilan CRUD dan Login

LOGIN

Ini merupakan tampilan dari login yang dibuat. Login ini jika berhasil akses / masuk maka akan mengarah ke halaman CRUD yang dibuat

login

CRUD

  1. Gambar ini merupakan tampilan dari halaman crud yang telah dibuat

crud1

Tampilan awal (Setelah dimasukkan database . jangan lupa untuk menyalakan xampp) tampilanwal

tampilanawal2

Tampilan Detail Data

tampilandetaildata

Tampilan Edit Data

tampilaneditdata

Tampilan Ketika ingin menghapus data. Atau alert hapus

tampilanalerthapus

Tampilan Tambah-data

tampilantambahdata

Berikut Codingan Yang diperlukan untuk membuat CRUD dan Login seperti contoh diatas

  1. Selanjutnya tambah atau modifikasi pada file-file berikut dibawah ini.

File tambah-data.component.html

File tambah-data component html

File tambah-data.component.ts

File tambah-data component ts

Login.component.html

Login component html

Login.component.ts

Login component

File dialog-konfirmasi.component.html

File dialog-konfirmasi componenthtml

File dialog-konfirmasi.component.ts

File dialog-konfirmasi componentts

File detail-data.component.html

file detail-datahtml

File detail-data.component.ts

File detail-data component

File edit-data.component.html

File edit-data component

  1. Buka file app.module.ts tambahkan segala syntax yang berelasi dengan folder2 yang telah dibuat seperti dialog-konfirmasi, detail-data, tambah-data, edit-data. Lakukan atau modifikasi seperti syntax yang terdapat pada gambar dibawah ini.

file app module ts

file app module ts 2

Buatlah folder baru dengan nama material. Dan buat file baru dengan nama material.ts. kemudian modifikasi seperti codingan dibawah ini.

material

material ts2

Selesaikan Codingan pada file app.component.ts

app component

app component ts

File app-routing-module.ts berfungsi untuk merouting pemanggilan file pertama dengan nama file login.component

app-routing-module ts

app-routing-module ts

ٱلْحَمْدُ لِلَّٰهِ رَبِّ ٱلْعَالَمِينَ

Sekian penjelasan mengenai angular dan rest-api. semoga bermanfaat. Maaf jika banyak kesalahan dalam penulisan. Terima Kasih

Wassalamu’alaikum Warahmatullahi Wabarakaatuh.