aldiunanto.com

CRUD – Laravel 5 dan AngularJS : Select Data

CRUD dengan Laravel 5 dan AngularJSHai. Siapa yang gatau Laravel? PHP Framework yang sudah sangat mendunia ini karena terkenal akan keindahan script-nya dan juga fitur-fitur yang sangat powerful yang ditawarkan.

Siapa yang gatau AngularJS? JavaScript Framework yang bisa bekerja secara real-time dengan menggunakan banyak directive dan fitur yang dimilikinya untuk dilakukan komunikasi ke server di belakang layar.

Then, what if we combine both of them? something magic will happen. really.

Nah, pada kesempatan kali ini, saya akan mencontohkan CRUD sederhana dengan menggunakan Laravel 5 dan AngularJS. okay, kita mainkan….

Create Project

So, saya asumsikan di sini kalian sudah memiliki pengetahuan dasar mengenai Laravel.
Pertama, yes, buat sebuah Laravel Project terlebih dahulu. Open your terminal and play with a composer. Type:

Press [enter] and wait till the end of process. Composer akan meng-create project bernama laravel_and_angular, create some dependencies, dan download system file dari server. (Pastikan anda terhubung ke internet :p)

Configure .env

Setelah 100%, pastikan permission project anda sudah readable, accessible, and writeable. Masuk ke folder tersebut, open the hidden files and folders, dan cari file bernama .env pada folder root. Buka file tersebut dan ubahlah beberapa konfigurasi seperti APP_URL, DB_DATABASE, DB_USERNAME, DB_PASSWORD, etc. Depending on what you need. Berikut contohnya:

Create a Table, and Give some Seeds.

Buatlah sebuah table. Untuk mempermudah, kita samakan saja ya.. buatlah sebuah table bernama ‘students‘. Anda bisa membuat table via PHPMyadmin, atau lewat php artisan di terminal. In my case, and yep, karena ini Laravel, ga seru dong bikin table di PHPMyadmin, terlalu biasa :p Yok kita buat via artisan. Open your terminal again and type:

Setelah itu, buka file migration yang sudah dibuat tadi (ada di folder ‘/database/migration/’). Buka file tersebut dan buat Schema::create() di method up(). Something like..

And after that, once again open your terminal and type:

dan boom! table baru sudah dibentuk, feel free to check in your PHPMyadmin. Dan oya, untuk yang membuat table di PHPMyadmin, sesuaikan ya.. :p

Seeding
Setelah table selesai dibuat, inputlah beberapa rows sebagai contoh saja untuk display nanti ketika pemanggilan. Sekali lagi, bisa lewat PHPMyadmin, atau buatlah sebuah seeder untuk melakukannya. Open your terminal and type:

File bernama ‘StudentsSeeder’ akan terbentuk di folder ‘/database/seeder/‘. Buka file tersebut dan ketikan DB::table()->insert() pada method run(). Something like…

Masih di folder yang sama, buka file ‘DatabaseSeeder.php‘ dan ketikan/tambahkan:

Fungsinya untuk menentukan atau memanggil seeder StudentsSeeder yang kita buat tadi agar ketika dieksekusi di terminal, seeder tersebut di-compile.
Open your terminal and type:

Configure Router

Selanjutnya buka file ‘/app/Http/routes.php‘. Ubah default location menjadi load file views bernama base.php (akan kita buat nanti). Dan satu buah route untuk memberikan akses AJAX di Angular ke controller Students (kita buat nanti).

factories.js

Sering kali pada AngularJS, module controller, factory, service, disatukan di sebuah file .js. Namun pada kasus ini saya ingin memisahkannya dengan tujuan mempermudah kita dalam hal segmentasi, lebih-lebih jika aplikasi yang dibangun sudah berskala besar.

Create new folder di ‘/public// bernama ‘js‘ and create new JavaScript file named ‘factories.js’ and save within it. Kita akan menaruh semua module berjenis factory di file ini. Open that file and type:

.module(‘factories’, [])
Beri nama pada module ini ‘factories’, dan tinggalkan sebuah object di parameter kedua. Let it empty because we don’t inject any module there.

.factory(‘Students’, function($http))
Buat sebuah factory dan beri nama ‘Students’ which is pada parameter pertama, dan sebuah callback function() berparameter $http. Variable $http ini merupakan variable bawaan dari library AngularJS Itu sendiri dan bisa kita manfaatkan untuk memanggil data ke server dengan konsep AJAX.

return{}
Yap, pada fungsinya memang factory mengembalikan ke dalam sebuah nilai, hampir sama dengan service. Namun service jika dilakukan pemanggilan maka akan mengembalikan ke service itu sendiri. Untuk lebih jelasnya anda bisa membaca post saya yang ini.

fetch: function()
Buat sebuah property bernama fetch()

return $http.get(options.siteUrl + ‘students/fetch’)
Beri sebuah pengembalian pada property fetch(). Yaitu pemanggilan data dari server dengan AJAX dengan method .get() yang sudah tersedia di variable $http tadi. Kemudian isi parameter dengan exact URL atau exact routes yang sudah dibuat di bagian Configure Router tadi. (/app/Http/routes.php). Sesuaikan isinya yaa..

 

controller.js

Create new flile named ‘controllers.js’ and save within folder ‘/public/js/‘. Kita taruh semua module berjenis controller di file ini. Open that file and type:

.controller(‘students’, function($scope, Students))
Buat sebuah controller named ‘students’ (pada parameter pertama), dan beri sebuah nilai callback pada parameter kedua yang juga memiliki dua buah parameter. Yang pertama yaitu $scope, variable ini merupakan variable bawaan AngularJS yang berfungsi memberikan kita akses terhadap semua directive yang ada di file HTML. Dan paramater kedua yaitu ‘Students’, adalah sebuah factory yang sudah kita buat tadi. Dengan ini kita bisa mengakses directive dan banyak property/method yang ada di factory ‘Students’.

Students.fetch().success(function(data))
Panggilah property .fetch() yang sudah dibuat tadi, maka akan dikembalikan ke variable ‘data‘, dan terakhir beri nilai $scope.students yang ada di view dengan ‘data’ tersebut. ‘data’ yang dimaksud di sini akan berisi semua data students(akan dibuat nanti di backend untuk pemanggilannya)

 

main.js

Untuk file yang satu ini, bertugas sebagai caller untuk semua module yang suda kita buat tadi baik itu controllers, maupun factories. Create new file within ‘/public/js/‘ and give it name ‘main.js’. Open that file and type:

 

Create View – base.php

Buat sebuah file bernama ‘base.php’ di folder ‘/resources/views/‘. Kemudian tentukan beberapa requirement sebagai berikut:

  1. Beri directive data-ng-app=”main” pada tag <html>
  2. Beri sedikit sentuhan CSS (optional, biar cakep aja.. hhe).
  3. Buatlah sebuah JavaScript object bernama ‘options‘ dan beri dua buah property bernama ‘baseUrl‘ dan ‘siteUrl‘. Ini digunakan untuk mendeklarasi base url dari aplikasi yang dibuat, dan implementasinya sudah kita pakai tadi di section ‘factories.js’. Getting confused? see below:
  4. Load semua file yang dibutuhkan mulai dari library AngularJS, factories.js, controllers.js, dan main.js.
  5. Beri directive data-ng-controller=”students” pada tag <body>
  6. Terakhir buatlah markup-nya. Biasanya kita gunakan <table> untuk menampilkan tabular data. Getting headache? see below:

Create Controller – Students.php

Buat sebuah controller benama ‘Students.php’ di folder ‘/app/Http/Controllers/‘. Via php artisan, open your terminal and type:

Open that file and load sebuah model bernama ‘Students’ menggunakan keyword use dan beri alias ‘Model’ untuk menghindari duplicated class name karena nama class model ini sama dengan nama controller. Buat sebuah method named fetch() dan return ke dalam fungsi response()->json() untuk mengembalikan dan meng-convert data ke dalam bentuk JSON. Terakhir panggil semua data dari table students dengan Eloquent. See below:

 

Create Model – Students.php

Buat sebuah model di folder ‘/app/‘ atau buat sebuah folder khusus untuk model di ‘/app/Models/‘ namun anda harus mengubah namespace dari model tersebut menjadi App\Models. Dalam kasus ini kita buat saja di folder ‘/app/‘.

Buatlah secara manual atau bisa dengan php artisan. Again, open your terminal and type:

Buat empat buah variable dengan visibility protected dan public. See code below:

 

Result

Berikut gambaran aplikasi yang sudah selesai dibuat.

CRUD Laravel 5 dan AngularJS

You are Done!

Sampai tahap ini kita sudah melakukan pengambilan data dari database dengan menggunakan Laravel5 dan AngularJS sebagai mesin yang sangat powerful. Dan yap, sesuai judul, posting ini batasannya adalah sampai select data. Dari mulai create project, folder structure, Angular Controller, factories, dan beberapa fungsi lainnya. Kedepannya akan dibuat lagi postingan tentang inserting, update, and deleting data dan masih menggunakan Laravel 5 + AngularJS as soon as possible, jadi ditunggu saja ya :p

Saya tahu mungkin banyak penjelasan yang masih kurang clear. If so, you can leave your question on comment box below. Dah dulu ah cape..

Semoga bermanfaat!

Leave a Reply

%d bloggers like this: