Scribd
Unggah
69 tayangan

Tutorial Dasar Membuat Crud Angular 8

Dokumen tersebut memberikan instruksi langkah-langkah untuk membuat CRUD (create, read, update, delete) data plat motor menggunakan Angular dan backend Node.js, meliputi penjelasan tentang menjalankan frontend dan backend, membuat komponen untuk tampilan data dan form input, menghubungkan komponen ke modul, menambahkan kodingan untuk mengambil, mengedit dan menghapus data di frontend dan backend, serta menampilkan hasil akhirnya di browser.

Diunggah oleh

Aziz
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
69 tayangan

Tutorial Dasar Membuat Crud Angular 8

Dokumen tersebut memberikan instruksi langkah-langkah untuk membuat CRUD (create, read, update, delete) data plat motor menggunakan Angular dan backend Node.js, meliputi penjelasan tentang menjalankan frontend dan backend, membuat komponen untuk tampilan data dan form input, menghubungkan komponen ke modul, menambahkan kodingan untuk mengambil, mengedit dan menghapus data di frontend dan backend, serta menampilkan hasil akhirnya di browser.

Diunggah oleh

Aziz
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 11

Nama : Tammim Ibnu Aziz

Prodi : IK592 – Informatika Komputer


Tugas : Angular

1. Step pertama yaitu menjalankan frontend dan backend, dengan cara


masuk dalam folder project frontend dan backend lalu klik dan tahan tombol
shift lalu klik tombol kanan mouse lalu pilih terminal yang digunakan. Disini
penulis menggunakan PowershellWindow.
2. Jika terminal sudah dibuka jalankan untuk masuk ke localhost:4200 untuk
frontend dan localhost:3000 untuk backend dengan menulis kode ng serve –
open di terminal frontend dan node. \app. js untuk lebih jelasnya seperti
gambar dibawah ini, setelah itu akan masuk ke browser secara otomatis.

3. Lalu sebagai contoh penulis akan buat CRUD data plat motor, seperti biasa
buat terlebih dahulu databasenya di mysql.

4. Setelah itu buat component yang ingin dibuat, disini penulis buat untuk
tampilan list data platnya terlebih dahulu, untuk membuat component dengan
cara ng g component inputplat, saya menamakan untuk data listplat.

5. Setelah itu buat lagi component untuk form inputnya dengan cara sama seperti
di atas, disini penulis namakan input.
6. supaya dapat digunakan, setelah file berhasil digenerate, class tersebut
haruslah didaftar pada module, pada kali ini file inputplat.component dan
input.component akan penulis daftarkan di app.module.ts.

7. Lalu masuk ke inputplat.component.ts dan masukan kodingan seperti


dibawah ini, untuk get data, edit dan delete.
8. Lalu tambahkan juga di backend.service.ts nya seperti dibawah ini.

9. Dan untuk di backendnya silahkan masu ke dalam folder backend lalu masuk
folder models dan masukan ke connector.js untuk input, delete dan tampilnya
seperti dibawah ini.
10. Dan untuk input.component.ts silahkan masukan kodingan ini.

11. Dan juga di backendservice


12. Untuk kodingan html inputplat dan input formnya masukan seperti di bawah ini.
13. Untuk tampilan di browser seperti ini.

Anda mungkin juga menyukai