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 :
- Pastikan PC / Laptop memiliki Text Editor
- 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)
- Pastikan sudah menginstall Angular. Jika belum bisa melakukan install langsung di cmd dengan mengetikkan
ng install @angular/cli.
- Download Codeigniter 3 atau 4, disesuaikan , diperlukan Untuk membuat rest-api
- Memiliki apk XAMPP
Membuat Rest Api
- Buatlah Database baru di mysql. Disesuaikan isinya dengan kebutuhan
- 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
- 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.
- Buka file autoload.php . kemudian tambahkan syntax
$autoload['libraries'] = array('database','session','encryption');
berfungsi untuk pemanggilan database yang telah dibuat
- 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
- Kemudian periksa apakah data tersebut berhasil dimasukkan. Caranya yaitu menjalankan localhost/rest-api. Jika berhasil maka statusnya “OK” dan data yang dimasukkan akan muncul
Membuat CRUD + Login dengan Angular
- Untuk membuat project baru pada angular gunakan perintah
ng new namaproject. Contohnya
ng new daftar-mahasiswa
- Kemudian tambahkan material pada project . Dengan mengetikkan perintah
ng add @angular/material
- 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
- 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
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
CRUD
- Gambar ini merupakan tampilan dari halaman crud yang telah dibuat
Tampilan awal (Setelah dimasukkan database . jangan lupa untuk menyalakan xampp)
Tampilan Detail Data
Tampilan Edit Data
Tampilan Ketika ingin menghapus data. Atau alert hapus
Tampilan Tambah-data
Berikut Codingan Yang diperlukan untuk membuat CRUD dan Login seperti contoh diatas
- Selanjutnya tambah atau modifikasi pada file-file berikut dibawah ini.
File tambah-data.component.html
File tambah-data.component.ts
Login.component.html
Login.component.ts
File dialog-konfirmasi.component.html
File dialog-konfirmasi.component.ts
File detail-data.component.html
File detail-data.component.ts
File edit-data.component.html
- 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.
Buatlah folder baru dengan nama material. Dan buat file baru dengan nama material.ts. kemudian modifikasi seperti codingan dibawah ini.
Selesaikan Codingan pada file app.component.ts
File app-routing-module.ts berfungsi untuk merouting pemanggilan file pertama dengan nama file login.component
ٱلْحَمْدُ لِلَّٰهِ رَبِّ ٱلْعَالَمِينَ
Sekian penjelasan mengenai angular dan rest-api. semoga bermanfaat. Maaf jika banyak kesalahan dalam penulisan. Terima Kasih
Wassalamu’alaikum Warahmatullahi Wabarakaatuh.