Basic CRUD Laravel 5.1 dengan AngularJS dan PosgtreSQL

Paling awal ketika belajar salah satu teknologi adalah dengan membuat basic proses sederhana dari proses simpan data, abil data, ubah data dan hapus data yang dikenal di kalangan programmer adalah CRUD. Berikut ini saya coba membuat basic CRUD Laravel 5.1 dengan AngularJS dan database PostgreSQL.

Sebelum memulainya, baiknya saya sampaikan dulu disini spesifikasi yang saya gunakan untuk proses CRUD ini:

1. Laravel 5.1.23
2. PostgreSQL 9.3
3. AngularJS 1.3.12
4. Twitter Bootstrap 3.3.2
5. Ubuntu Desktop 14.04

Yang pertama dilakukan ada proses install Laravel di mesin Ubuntu. Saya skip proses install disini karena saya yakin sudah bisa install sendiri laravelnya. Saya hanya membuat virtual host di apache seperti proses di artikel https://www.adiputra.web.id/membuat-virtualhost-apache-untuk-laravel-5-1-di-ubuntu-14-04/.

Laravel yang terinstall di laptop saya ini dengan posisi folder /var/www/html/todoApp/

Setting database terlebih dahulu di folder /todoApp/config/database.php seperti kode dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
    'default' => env('DB_CONNECTION', 'pgsql'),

    /*
    |--------------------------------------------------------------------------
    | Database Connections
    |--------------------------------------------------------------------------
    |
    | Here are each of the database connections setup for your application.
    | Of course, examples of configuring each database platform that is
    | supported by Laravel is shown below to make development simple.
    |
    |
    | All database work in Laravel is done through the PHP PDO facilities
    | so make sure you have the driver for your particular database of
    | choice installed on your machine before you begin development.
    |
    */

    'connections' => [

        'sqlite' => [
            'driver'   => 'sqlite',
            'database' => storage_path('database.sqlite'),
            'prefix'   => '',
        ],

        'mysql' => [
            'driver'    => 'mysql',
            'host'      => env('DB_HOST', 'localhost'),
            'database'  => env('DB_DATABASE', 'todoapp'),
            'username'  => env('DB_USERNAME', 'root'),
            'password'  => env('DB_PASSWORD', 'admindddddd'),
            'charset'   => 'utf8',
            'collation' => 'utf8_unicode_ci',
            'prefix'    => '',
            'strict'    => false,
        ],

        'pgsql' => [
            'driver'   => 'pgsql',
            'host'     => env('DB_HOST', 'localhost'),
            'database' => env('DB_DATABASE', 'todoApp'),
            'username' => env('DB_USERNAME', 'postgres'),
            'password' => env('DB_PASSWORD', 'admin'),
            'charset'  => 'utf8',
            'prefix'   => '',
            'schema'   => 'public',
        ],

        'sqlsrv' => [
            'driver'   => 'sqlsrv',
            'host'     => env('DB_HOST', 'localhost'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'charset'  => 'utf8',
            'prefix'   => '',
        ],

    ],

Lalu pada file .env pada folder /todoApp/.env seperti kode dibawah ini.

1
2
3
4
DB_HOST=localhost
DB_DATABASE=todoApp
DB_USERNAME=postgres
DB_PASSWORD=admin

Jika sudah, mari kita buat migration nya 🙂

Ketik pada terminal ada dan posisi pada folder todoApp dengan perintah kode ini.

1
$ php artisan make:migration create_todo_table --table=todos

Jika sudah akan terbuat file migration pada folder /todoApp/database/migrations/xxxx_create_todo_table.php

Ubah kode file tersebut seperti kode dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateTodoTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('todos', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->boolean('done')->default('false');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('todos');
    }
}

Pada kode migration diatas, saya hanya membuat table ‘todos’ dengan kolom id, title, done, dan timestamp laravel. Title disini menyimpan judul todo dan done disini menyimpan status todo sudah selesai atau belum, default nya false.

Jika sudah. Lakukan proses migration pada terminal anda dengan mengetikan.

1
$php artisan migrate

Jika selesai, lihat pada tool postgresql gui anda atau dengan pgAdmin3 struktur table todos.

Jika terdapat error “driver not found” berarti anda mesti install php5-pgsql, ubah config php.ini dengan mengaktifkan pgsql nya, lalu restart apache-nya.

Selanjutnya setelah itu kita buat model Todo dengan mengetikkan pada terminal dengan perintah

1
$php artisan make:model Todo

File model Todo.php yang terletak di /todoApp/app/Todo.php diubah seperti kode dibawah ini.

1
2
3
4
5
6
7
8
9
10
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Todo extends Model
{
    protected $fillable = array('title', 'done');
}

Pada kode diatas, $fillable digunakan untuk proses insert secara menyeluruh atau “mass assignment”.

Selanjutnya, kita akan membuat resources pada routes.php di folder /todoApp/app/Http/routes.php dengan kode dibawah ini.

1
Route::resource('api/todos','TodosController');

Dengan kode diatas tersebut, kita akan mengenerate routing pada aplikasi kita. Routing disini bisa kita lihat dengan perintah pada terminal kita

1
$php artisan route:list

Akan terlihat routing yang disediakan pada laravel cukup dengan sebaris kode resources diatas. Pada laptop saya terlihat seperti ini.

route.list.laravel.todo

Pada kode resource tersebut juga, akan diarahkan ke controller TodosController. Mari kita buat controller tersebut dengan mengetikan pada terminal perintah.

1
$php artisan make:controller TodosController

Jika berhasil terdapat file di folder /todoApp/app/Http/Controllers/TodosController.php lalu ubah saja kode yang telah ada menjadi seperti kode dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<?php

namespace App\Http\Controllers;

use Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\Todo;

class TodosController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $todos = Todo::all();
        return $todos;
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $todo = Todo::create($request::all());
        return $todo;
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $todo = Todo::find($id);
        $todo->done = Request::input('done');
        $todo->save();

        return $todo;
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        Todo::destroy($id);
    }
}

Ada beberapa fungsi yang dihapus seperti create, edit. Kenapa fungsi itu dihapus? karena kita tidak menampilkan banyak view nanti dan kita akan pakai angularJs sebagai 1 view saja (SPA).

Setelah kita membuat bagian belakang atau API nya. Kita akan buat bagian depan nya. Untuk membuat bagian depan-nya seperti yang kita sebut diatas, hanya 1 view saja. Jadi kita buat 1 Route, 1 Controller dan 1 View dengan tambahan Angularjs di view pastinya 🙂

Baik, kita buat 1 Route. Kita buka kembali file routes.php. Lalu tambahkan kode berikut sehingga seperti kode dibawah ini.

1
2
Route::get('/', 'TodoAppController@index');
Route::resource('api/todos','TodosController');

Yup, kita buat route slash yang artinya ketika project kita dipanggil diawal maka ada controller yang menanganinya yaitu TodoAppController.

Sekarang kita buat controller TodoAppController pada terminal kita dengan mengetikkan

1
$php artisan make:controller TodoAppController

Jika selesai, buka file controller yang baru saja kita buat di folder /todoApp/app/Http/controllers/TodoAppController.php lalu ubah saja seperti kode dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Http\Controllers\Controller;

class TodoAppController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('TodoApp/index');
    }
}

Jika selesai, terlihat ya pada fungsi index() kita panggil view ‘TodoApp/index’. Jadi kita buat 1 view di folder /todoApp/resources/views/TodoApp/index.blade.php dengan kode seperti dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@extends('app')
@section('content')
<div class="container" ng-app="todoApp" ng-controller="todoController">
  <h1>TodoApp index view</h1>
  <div class="row">
    <div class="col-md-4">
      <input type='text' ng-model="todo.title">
      <button class="btn btn-primary btn-md"  ng-click="addTodo()">Add</button>
      <i ng-show="loading" class="fa fa-spinner fa-spin">Loading...</i>
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col-md-4">
      <table class="table table-striped">
        <tr ng-repeat='todo in todos'>
          <td>
            <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="todo.done" ng-change="updateTodo(todo)">
          </td>
          <td>
            <% todo.title %>
          </td>
          <td>
            <button class="btn btn-danger btn-xs" ng-click="deleteTodo($index)">  <span class="glyphicon glyphicon-trash" ></span></button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>
@endsection

Terlihat diatas kita ada include app.blade.php pada folder /todoApp/resources/views/app.blade.php. Ubah saja seperti kode dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>TodoApp</title>

        <!-- CSS And JavaScript -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

        <!--AngularJS-->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
        <script src="/js/app.js"></script>
    </head>

    <body>
        @yield('content')
    </body>
</html>

Jika kita lihat di file app.blade.php, kita menambahkan file css bootsrap, angularjs dan app.js. Bootstrap dan Angularjs itu langsung diambil melalui CDN. Sedangkan app.js ini yang kita buat sendiri yang kita simpan di folder /todoApp/public/js/app.js

Kode app.js seperti kode dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
var app = angular.module('todoApp', [], function($interpolateProvider) {
  $interpolateProvider.startSymbol('<%');
  $interpolateProvider.endSymbol('%>');
});
 
app.controller('todoController', function($scope, $http) {
 
  $scope.todos = [];
  $scope.loading = false;
 
  $scope.init = function() {
    $scope.loading = true;

    $http.get('/api/todos').
    success(function(data, status, headers, config) {
      $scope.todos = data;
      $scope.loading = false;
    });
  }
 
  $scope.addTodo = function() {
    $scope.loading = true;
 
    $http.post('/api/todos', {
      title: $scope.todo.title,
      done: false
    }).success(function(data, status, headers, config) {
      $scope.todos.push(data);
      $scope.todo = '';
      $scope.loading = false;
    });
  };
 
  $scope.updateTodo = function(todo) {
    $scope.loading = true;
 
    $http.put('/api/todos/' + todo.id, {
      title: todo.title,
      done: todo.done
    }).success(function(data, status, headers, config) {
      todo = data;
      $scope.loading = false;
    });;
  };
 
  $scope.deleteTodo = function(index) {
    $scope.loading = true;
   
    var todo = $scope.todos[index];
   
    $http.delete('/api/todos/' + todo.id)
    .success(function() {
      $scope.todos.splice(index, 1);
      $scope.loading = false;
    });
  };
 
 
  $scope.init();

});

Saya coba pecah-pecah kode nya biar dimengerti.

1
2
3
4
var app = angular.module('todoApp', [], function($interpolateProvider) {
  $interpolateProvider.startSymbol('<%');
  $interpolateProvider.endSymbol('%>');
});

Kode ini untuk mendefine nama module yang ada di index.blade.php folder TodoApp diatas. Terlihat module ‘todoApp’ kita set disini.

Kode ini pula untuk menghindari penulisan kode yang sama karena blade nya laravel dan view nya angularjs itu sama yaitu pakai double curly brances. Nah kode $interpolateProvider ini untuk mengganti view angularjs. Terlihat startSymbol dan endSymbol yang terset dan pada index.blade.php juga terlihat saat looping data todo ini.

1
2
3
4
5
6
7
8
9
10
11
<tr ng-repeat='todo in todos'>
          <td>
            <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="todo.done" ng-change="updateTodo(todo)">
          </td>
          <td>
            <% todo.title %>
          </td>
          <td>
            <button class="btn btn-danger btn-xs" ng-click="deleteTodo($index)">  <span class="glyphicon glyphicon-trash" ></span></button>
          </td>
        </tr>

Jadi seperti itu ya 🙂

Lalu kode dibawah ini

1
app.controller('todoController', function($scope, $http) {

Kode ini untuk define controller yang menghandle view. Kalau kita buka lagi si index.blade.php akan terlihat kode

1
<div class="container" ng-app="todoApp" ng-controller="todoController">

dengan 2 parameter $scope dan $http untuk service atau get res atau ajax-nya angularjs.

1
2
$scope.todos = [];
$scope.loading = false;

Kode ini untuk mendefine awal variable todos adalah sebuah array kosong dan variable loading bernilai false hanya untuk notify jika ada proses ajax yang sedang berjalan.

1
2
3
4
5
6
7
8
9
$scope.init = function() {
    $scope.loading = true;

    $http.get('/api/todos').
    success(function(data, status, headers, config) {
      $scope.todos = data;
      $scope.loading = false;
    });
  }

Kode init ini adalah fungsi yang dipanggil untuk mendapatkan todo yang tersimpan di postgres (READ DATA). terlihat $http.get dengan parameter URL tujuan tembak lalu terdapat pula method chain .success ketika data berhasil didapat dari hasil response dari URL tujuan tersebut.

Pada angularjs, terdapat $http.get, $http.post, $http.delete, $http.put dengan fungsi masing-masing. Lengkapnya bisa baca-baca disini [https://docs.angularjs.org/api/ng/service/$http]

Fungsi-fungsi lain dalam app.js hampir sama. Ambil data dari view, tembak ke url tujuan dan manipulasi hasil response dan sebaliknya. Yang mesti diperhatikan adalah URL untuk tembak-nya harus sesuai dengan route yang kita liat di route:list tadi. Serta hasil response dari tiap method di controller yang diarahkan oleh route saat proses tembak ke belakang / tembak ke URL.

Sampai disini, kalau di jalanin insyallah jalan 😀 kalau ada error bisa ngobrol-ngobrol di kolom komentar.

final-laravel-angular

Semoga bermanfaat 🙂


Artikel ini sebenarnya diambil dari artikel dari link berikut [https://www.codetutorial.io/laravel-5-angularjs-tutorial/]. Hanya saja ada sedikit perubahan agar bisa jalan. *soalnya gw coba banyak yang kepotong-potong prosesnya*

Artikel lainnya

3 comments

  1. pak, saya ingin belajar membuat web responsive tentang membuat aplikasi CRUD dengan PHP & PostgreSQL. bisa buatkan saya TUTOR lengkap dasar-lanjut, jika cocok saya bersedia membeli TUTOR nya.

    Thz, Eddy – 0823 020 73513

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: