Review
Helo, kalo kemarin – kemarin kita sudah belajar tentang bagaimana cara membuat login page dengan angular 2 pake laravel api. Kali ini kita akan coba membuat aplikasi simple angular 2 yang menggunakan metode Create Read Update Delete. Oke tanpa basa basi lagi kita mulai saja tutorialnya.
Tutorial
Sebelum ke inti tutorial ini, buatlah sebuah database mysql super duper sederhana yang hanya dilengkapi dengan table t_murid yang sebatang kara seperti dibawah ini. Seperti biasa, database nya db_sekolah 😀
Kemudian jika sudah, kita akan membuat aplikasi API nya. Di tutorial ini saya membuat direktori bernama angular2crud di dalam nya ada direktori API yaitu tempat disimpannya web laravel api nya, dan ada juga direktori WEB yaitu tempat disimpannya web angular itu sendiri. Oke, kita langsung saja membuat web api nya.
Pertama, buka direktori angular2crud atau terserah nama direktorinya apa. Lalu buka command prompt disitu (shortcut : shift+klik kanan->pilih open command window here), lalu ketikan
composer create-project –prefer-dist laravel/laravel api
command prompt
Jika installasi laravel dari composer sudah selesai, selanjutnya kita install laravel CORS. Kenapa harus install laravel CORS? Karena, fitur ini memudahkan kita melakukan request dari luar aplikasi laravel tanpa harus memberikan token terlebih dahulu. Cara menginstall laravel CORS bisa kalian lihat di blog ini juga. Tutorialnya ada disini, tepatnya proses installasi ini ada di bagian awal tutorial sampai bagian update vendor. Jika sudah selesai, kita lanjutkan kembali tutorialnya disini, kita akan menyetting database nya.
Setelah itu, buka file routes/web.php. Buat menjadi seperti ini.
Kemudian, jika sudah lalu tambahkan model Sekolah (buat file Sekolah.php di folder app) isinya seperti ini.
Lalu tambahkan juga Sekolah Controller (disimpan di folder app/http/controllers) seperti ini.
Oke, kita sudah selesai di bagian API, selanjutnya kita lanjut membuat web angular nya.
Pertama, kita buat quick start angular 2 seperti di official website nya disini.
Maka, jika sudah selesai direktori web kita akan seperti ini. (note : tata letak penyimpanan file di tutorial ini telah diubah).
Note : untuk menjalankan aplikasi angular adalah dengan cara membuka command prompt di folder root aplikasi lalu ketik npm start dengan catatan kalian harus sudah menginstall nodejs + npm.
Setelah itu, mari kita setting file app.module.ts kita terlebih dahulu.
Di tutorial kali ini, kita akan membuat crud sekaligus menggunakan route angular. Di bagian atas file ini, kita import semua file – file module, component, service, dll. yang kita perlukan untuk menjalankan aplikasi ini. Setelah itu kita import semua module di dalam ngModule. Setting url – url page yang akan kita pakai nantinya dengan RouterModule.forRoot. Setelah itu kita declarasikan semua komponen yang kita buat. Lalu, tambahkan juga bootstrap dan providers nya.
Jika sudah selesai, pasti akan terlihat banyak error. Karena ada file – file yang belum kita buat. Yaitu list.component.ts, form.component.ts dan sekolah.service.ts, kita akan membuatnya. Tapi sebelum itu, buatlah sebuah file sekolah.ts yang berisi Class Sekolah di dalam folder app. Isinya hanya seperti ini.
Oke setelah itu barulah kita membuat file list.component.ts dan form.component.ts. Isinya seperti ini.
///—-list.component.ts—-///
///—-form.component.ts—-///
Oke jika sudah, buka kembali file app.component.ts. Ganti jenis template menjadi templateUrl, valuenya sesuaikan dengan tempat penyimpanan view nya.
Jika sudah, kita lanjut. Buat lah sebuah folder bernama service didalam folder app yang berisi file sekolah.service.ts seperti ini.
Oh iya, buat juga file rxjs-operators.ts di folder app, isinya seperti ini.
Sebenarnya file ini hanya opsional, hanya untuk memudahkan dalam menggunakan operator – operator rxjs saja. Jika kalian tidak ingin seperti itu, cukup ambil import yang map saja. Jika ingin menggunakan catch ambil juga yang catch.
Oke, jika sudah semua kita buat file view nya.
Pertama, buat file app.component.html. File ini akan akan kita jadikan template aplikasi kita atau template nya file app.component.ts. Kita simpan file ini di folder app/view/layout Isinya hanya seperti ini.
Tag router-outlet inilah yang akan berfungsi memindah – mindahkan kita. Oh ya, jangan lupa juga tambahkan tag base di file index.html nya.
Fungsi dari tag itu adalah untuk mengindikasikan kita sedang di url apa. Tag ini hanya digunakan jika kita memakai route angular.
Selanjutnya kita buat file list.component.html. File ini kita jadikan templateUrl nya file list.component.ts. Pada intinya view ini hanya menampilkan daftar siswanya, tampilannya akan seperti ini, terserah kalian jika kalian ada tampilan yang lebih baik.
///—-list.component.html—-///
Isinya pada intinya seperti ini.
*ngIf : ngIf ini digunakan seperti fungsi if pada umumnya.
Tanda ‘{{ }}’ : Tanda tersebut adalah untuk menampilkan variable yang ada pada file component pemanggil file ini, yaitu file list.component.ts.
routerLink : Attribut ini lah yang dipakai untuk pemindahan page kita. Valuenya harus sesuai dengan route yang kita setting di app.module.ts tadi.
Oke, selanjutnya kita buat view template form.component.html. Isinya adalah form untuk menambahkan maupun mengedit siswa. Pada intinya, tampilannya seperti ini. Dan lagi -lagi terserah kalian jika kalian memiliki tampilan yang lebih bagus lagi.
///—-form.component.html—-///
Isinya pada intinya seperti ini.
Jangan lupa membuat fungsi if, agar dalam satu form ini bisa memuat form add sekaligus form edit.
Oh iya, coding tampilan diatas merupakan coding tampilan form add nya ya, lain lagi dengan coding tampilan edit. Coding tampilannya seperti ini.
ngModel ini digunakan untuk meng singkron kan variable di form.component ts denga form component html, dengan begitu yang disubmit nantinya tidak seperti form add yang langsung mengambil value dari field nya. Melainkan dengan mengirimkan object student yang telah diedit.
Dan tadaaa!!! Aplikasi crud angular dengan api laravel siap dijalankan. Dan pada akhirnya direktori kita akan seperti ini.
Sekian tutorial crud angular 2 dengan api laravel. Projek tutorial ini bisa kalian download disini atau disini. Untuk menjalankannya, jalankan dulu npm install di folder web dan juga composer install di folder api. Selamat mencoba dan sampai jumpa lagi. 😀
