Minggu, 03 September 2017

Tutorial RESTFul Web Service Menggunakan Lumen Laravel Dan AngularJs (Client)

By Berbagi Ilmu • September 03, 2017 • 0 Comments

Tutorial RESTFul Web Service Menggunakan Lumen Laravel Dan AngularJs (Client)

Setelah postingan sebelumnya (baca : http://nasrullah95wildan.blogspot.co.id/2017/09/tutorial-restful-web-service_3.html) kita telah membuat server dengan lumen laravel, sekarang kita akan membuat area client dengan AngularJS.


1.  Kita telah membuat server untuk operasi CRUD. Sekarang kta akan membuat area client yang akan ditampilkan dalam bentuk html.
2.      Langkah awal, kita harus menginstal CORS pada composer Laravel.
3.      Buka cmd, lalu ketikan : composer required “palanik/lumen-cors:dev-master”. Enter.
CORS (Cross-Origin Resource Sharing) adalah protokol yang dibangun di atas HTTP untuk memungkinkan Javascript pada halaman yang berasal dari satu situs untuk mengakses metode di situs lain. CORS merupakan protokol penghubung antara browser dan web-service yang memberitahu browser bahwa itu adalah "OK" untuk mengeksekusi kode Javascript dari panggilan lintas domain.
  4. Kemudian, kita harus download boostrap (http://getbootstrap.com/) dan jquery.min.js (https://code.jquery.com/jquery-3.2.1.min.js) . kedua hal ini digunakan untuk kita mendesain tampilan interface client.
       5.    Selain itu kita juga harus download AngularJS (https://angularjs.org/).
Angular adalah client framework. Secara konsep Angular tidak bisa berdiri sendiri. Angular membutuhkan aplikasi lain untuk memasukkan ke database seperti lumen.
6.   Setelah itu, kita buat folder baru di dalam htdocs (xampp/htdocs/) sebagai tampilan. Beri nama folder sister_angular. Dalam hal ini, kita telah menginstal XAMPP.

7.      Unzip file Bootstrap yang kita download serta pindahkan folder css dan js dari ke folder sister_angular. Dan pindahkan pula file jquery.min.js kedalamnya.
8.      Buat tingkatan folder baru dengan nama app > lib > angular. Kemudian pindahkan isi dari angular.zip ke dalam folder angular.
9.      Sehingga folder akan tersusun seperti berikut.

10.  Dan didalam folder sister_angular, akan terdapat 3 folder.

11.  Setelah kita mengatur struktur angular seperti diatas, langkah selanjutnya adalah membuat kode program untuk menampilkan data di halaman client.
12.  Buat file baru dengan nama app.js. Dan simpan di dalam folder app/ . Isikan file tersebut dengan kode program berikut :
var app = angular.module('employeeRecords', [])
        .constant('API_URL', 'http://localhost:8100/');

·   var app = angular.module('employeeRecords', []) = membuat modul AngularJS dan menugaskan objek variabel ke aplikasi. Semua file AngularJS akan menjadi referensi aplikasi.
·        .constant('API_URL', 'http://localhost:8100/'); Mendefinisikan variabel konstan dengan URL API.
·   http://localhost:8100/ merupakan url dan port yang sebelumnya telah kita atur ketika pembuatan server.
 13.  Kemudian kita akan membuat file controller. File ini yang akan bertanggung jawab untuk berinteraksi dengan API kita.
14.  Buat file baru /sister_angular/app/controllers/employees.js
Isikan kode program berikut pada file tersebut :
app.controller('employeesController', function($scope, $http, API_URL) {
    //Ambil daftar karyawan dari API
    $http.get(API_URL + "api/wildan")
            .then(function(response) {
                $scope.employees = response.data;
            });
   
    //menampilkan model form
    $scope.toggle = function(modalstate, id) {
        $scope.modalstate = modalstate;

        switch (modalstate) {
            case 'add':
                $scope.form_title = "Tambah Pegawai";
                break;
            case 'edit':
                $scope.form_title = "Detail Pegawai";
                $scope.id = id;
                $http.get(API_URL + 'api/wildan/' + id)
                        .then(function(response) {
                            console.log(response);
                            $scope.employee = response.data;
                        });
                break;
            default:
                break;
        }
        console.log(id);
        $('#myModal').modal('show');
    }

    //menyimpan data baru / update data
    $scope.save = function(modalstate, id) {
        var url = API_URL + "api/wildan";
       
        //Tambahkan id pegawai ke URL jika form edit
        if (modalstate === 'edit'){
            url += "/" + id;
                                    $http({
            method: 'PUT',
            url: url,
            data: $.param($scope.employee),
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function(response) {
            console.log(response);
            location.reload();
        }).error(function(response) {
            console.log(response);
            alert('This is embarassing. An error has occured. Please check the log for details');
        });
        }
       
        $http({
            method: 'POST',
            url: url,
            data: $.param($scope.employee),
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function(response) {
            console.log(response);
            location.reload();
        }).error(function(response) {
            console.log(response);
            alert('This is embarassing. An error has occured. Please check the log for details');
        });
    }

    //delete data
    $scope.confirmDelete = function(id) {
        var isConfirmDelete = confirm('Apakah anda yakin untuk menghapus?');
        if (isConfirmDelete) {
            $http({
                method: 'DELETE',
                url: API_URL + 'api/wildan/' + id
            }).
                    then(function(data) {
                        console.log(data);
                        location.reload();
                    }).
                    error(function(data) {
                        console.log(data);
                        alert('Unable to delete');
                    });
        } else {
            return false;
        }
    }
});
15.  Langkah selanjutnya adalah menampilkan data dari api rest menggunakan angularjs.
16.  Buat file baru di dalam foler app/. Beri nama index.html.
 Isikan kode program berikut :
<!DOCTYPE html>
<html lang="en-US" ng-app="employeeRecords">
    <head>
        <title>Data Pegawai</title>

        <!-- Load Bootstrap CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <h2 align='center'>Daftar Pegawai</h2>
        <div  ng-controller="employeesController">

            <!-- Table-to-load-the-data Part -->
            <table class="table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Title</th>
                        <th>Content</th>
                        <th><button id="btn-add" class="btn btn-primary btn-xs" ng-click="toggle('add', 0)">Tambah Pegawai</button></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="employee in employees">
                        <td>{{  employee.id }}</td>
                        <td>{{ employee.title }}</td>
                        <td>{{ employee.content }}</td>
                        <td>
                            <button class="btn btn-default btn-xs btn-detail" ng-click="toggle('edit', employee.id)">Edit</button>
                            <button class="btn btn-danger btn-xs btn-delete" ng-click="confirmDelete(employee.id)">Delete</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- End of Table-to-load-the-data Part -->
            <!-- Modal (Pop up when detail button clicked) -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
                            <h4 class="modal-title" id="myModalLabel">{{form_title}}</h4>
                        </div>
                        <div class="modal-body">
                            <form name="frmEmployees" class="form-horizontal" novalidate="">

                                <div class="form-group error">
                                    <label for="inputEmail3" class="col-sm-3 control-label">Title</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control has-error" id="title" name="title" placeholder="Fulltitle" value="{{title}}"
                                        ng-model="employee.title" ng-required="true">
                                        <span class="help-inline"
                                        ng-show="frmEmployees.title.$invalid && frmEmployees.title.$touched">Title field is required</span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-3 control-label">Content</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="content" name="content" placeholder="Content" value="{{content}}"
                                        ng-model="employee.content" ng-required="true">
                                        <span class="help-inline"
                                        ng-show="frmEmployees.content.$invalid && frmEmployees.content.$touched">Valid Content field is required</span>
                                    </div>
                                </div>

                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" id="btn-save" ng-click="save(modalstate, id)" ng-disabled="frmEmployees.$invalid">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Load Javascript Libraries (AngularJS, JQuery, Bootstrap) -->
        <script src="app/lib/angular/angular.min.js"></script>
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
       
        <!-- AngularJS Application Scripts -->
        <script src="app/app.js"></script>
        <script src="app/controllers/employee.js"></script>
    </body>
</html>

·     Kode program diatas, kita gunakan untuk membuat sebuah tampilan HTML di halaman client.
·  Kode tersebut digunakan pula untuk menampilkan isi dari database dan memberikan hak kepada client untuk melakukan operasi CRUD.
 17.  Langkah terakhir adalah menjalankannya. Buka broswser, ketikan di kolom url http://localhost/sister_angular . Sehingga akan ditampilkan seperti berikut ini.
READ

CREATE


UPDATE


DELETE


Selesai J Alhamdulillah

Karya    : Wildan A Nasrullah
Ref.       : https://tutorials.kode-blog.com/laravel-5-angularjs-tutorial

0 komentar:

Posting Komentar