Membangun Aplikasi Web Sederhana dengan Angular.js dan REST (Bagian 2)

Pendahuluan

Di bagian pertama seri tutorial ini kita telah mempersiapkan kode index.html yang akan menjadi wadah dari aplikasi kita. Kali ini kita akan mencoba menulis kode Angular.js di main.js dan mencoba untuk membuat fungsional seperti lihat daftar trip. Di tutorial ini, Anda akan melakukan beberapa hal berikut:

• membuat sebuah objek Angular.js
• membuat sebuah service untuk proses request dengan metode DELETE
• membuat konfigurasi routing
• membuat controller untuk melihat daftar trip
• membuat pengurutan dan filter terhadap daftar trip

Untuk detail, hapus, edit dan tambah trip akan dipaparkan di tutorial bagian ke tiga.

Persiapan

Di tutorial ini kita membutuhkan beberapa alat sebagai berikut:

• Angular.js versi 1.4.x, kita tidak akan menggunakan Angular.js versi 2.x karena versi tersebut sudah menggunakan TypeScript dan Node.js
• Twitter Bootstrap 3.x, kita gunakan sedikit fitur yang dimiliki Twitter Bootstrap agar aplikasi yang kita bangun memiliki tampilan yang lebih menarik
• Silex, PHP, MongoDB dan Apache2, dapat Anda baca penjelasannya di tutorial "Implementasi REST Sederhana dengan MongoDB dan Silex"
• Text Editor, Anda dapat menggunakan apapun text editor favorit Anda untuk mengetikkan source code yang akan ada di sepanjang tutorial ini

Pastikan Anda mengikuti struktur *folder* seperti pada gambar berikut:

Untuk mengingatkan kembali, Anda wajib membuat beberapa file berikut di folder yang ditentukan:

• header.html, footer.html, trip-detail.html, trip-edit.html, dan trip-list.html berada di bawah folder partial
• main.js berada di bawah folder js/apps
• main.css berada di bawah folder css
• index.html berada di bawah folder client/angular

Kemudian Anda dapat menaruh folder client di htdocs (jika menggunakan XAMPP di Windows atau Linux) atau /var/www/html (jika menggunakan Apache di Linux) dan nanti silahkan akses file index.html* setelah tutorial ini diselesaikan.

Memulai Coding

Kita akan memulai membuat kode untuk main.js, kita akan menciptakan dulu objek Angular.js kemudian kita juga membutuhkan dua modul yaitu ngRoute untuk routing dan ngResource untuk konsumsi web service. Kemudian kita akan mengenal pembuatan service di Angular.js. Kita akan menamai objek Angular.js dengan nama tripApp. Berikut ini adalah kode main.js yang berisi kode untuk proses instansiasi objek Angular.js dan pembuatan service TripService:

var tripApp = angular.module('tripApp', ['ngRoute', 'ngResource']);
var base_url = 'http://localhost/mytrip/web/index.php/';
tripApp.factory('TripService', ['$resource', function($resource) {
return $resource(base_url+'trip/:id', null,
{
'delete': { method:'DELETE' },
});
}]);
// ada kode lain setelah kode ini

pada kode diatas, kita membuat sebuah variabel bernama base_url yang akan menyimpan base url dari REST yang telah dibangun menggunakan Silex. Kita membuat sebuah service melalui method factory() yang dimiliki oleh objek Angular.js, dalam hal ini adalah variabel tripApp. Kita mendefinisikan metode DELETE untuk setiap kali request ke trip/:id.

Sekarang kita akan menulis kode selanjutnya untuk mendefinisikan route di dalam aplikasi Angular.js kita. Di dalam kode tersebut akan ada route yang didefinisikan kemudian template apa yang akan digunakan dan controller yang akan dipasangkan dengan template tersebut. Berikut adalah kode lanjutan untuk main.js:

// ada kode sebelumnya

tripApp.config(['$routeProvider', function($routeProvider){
    $routeProvider.
                when('/', {
                    templateUrl:'partial/trip-list.html',
                    controller:'TripListController',
                }).
                when('/trip/new', {
                    templateUrl:'partial/trip-edit.html',
                    controller:'TripNewController',
                }).
                when('/trip/:tripId/edit', {
                    templateUrl:'partial/trip-edit.html',
                    controller:'TripEditController',
                }).
                when('/trip/:tripId', {
                    templateUrl:'partial/trip-detail.html',
                    controller:'TripDetailController',
                }).
                otherwise({
                    redirectTo: '/'
                });
}]);

// ada kode lain setelah kode ini

Pada kode diatas kita menggunakan tiga template yaitu trip-list.html, trip-edit.html, dan trip-detail.html. Kemudian kita juga akan menggunakan tiga controller yaitu TripListController, TripNewController, TripEditController, dan TripDetailController. Kita akan membahas satu controller dan satu template terlebih dahulu untuk tutorial ini, yaitu TripListController dan trip-detail.html.

Sekarang adalah bagian terpenting di tutorial ini yaitu TripListController. Kita akan menggunakan dua buah modul yaitu $scope dan $http. $scope adalah sebuah modul yang akan menyimpan variabel dan fungsi dalam suatu controller. Dia akan mengawasi perubahan yang terjadi pada variabel yang menempel padanya. Anda juga dapat memanggil function yang ditautkan kepada $scope dimanapun pada suatu template yang menggunakan controller tersebut. Kemudian kita juga menggunakan $http dengan metode GET untuk mengambil daftar trip yang ada di MongoDB melalui perantara REST yang dibangun menggunakan Silex pada tutorial sebelumnya. Dengan dua variabel yang dilewatkan yaitu data dan status, Anda dapat mengambil informasi yang cukup untuk melakukan proses setelah proses konsumsi REST dengan metode GET berhasil. Hasil pengambilan REST akan disimpan kepada variabel trips dan ditautkan kepada $scope untuk digunakan di template. Proses tersebut dilakukan di function success() karena function tersebut akan melakukan proses jika proses REST dengan metode GET berhasil.

Berikut adalah kode lanjutan untuk main.js yang mendefinisikan TripListController:

// ada kode sebelumnya
tripApp.controller('TripListController', function($scope, $http){
    $scope.titles = "Katalog Trip";
    $scope.orderProp = 'name';

    $http.get(base_url+'trip').success(function(data, status){
        console.log(status);
        $scope.trips = data.resp;
    });
});

// ada kode lain setelah kode ini

Terakhir di tutorial ini, kita akan membuat sebuah template yang akan dipasangkan dengan TripListController yaitu trip-list.html. Berikut adalah kode partial/trip-list.html:

<div class="container">
    <div class="row">
        <div class="page-header">
            <h1>{{titles}}</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            Search: <input ng-model="query" /> <br/><br/>
            Sort by: 
            <select ng-model="orderProp">
                <option value="name">A to Z</option>
                <option value="-name">Z to A</option>
            </select>
        </div>
        <div class="col-md-10">
            <p>Total trip yang telah Anda buat: {{trips.length}} item</p>
            <ul>
                <li ng-repeat="trip in trips | filter:query | orderBy:orderProp">
                    <a href="#/trip/{{trip._id.$id}}">{{trip.name}}</a>, {{ trip.city }}
                </li>
            </ul>
        </div>
    </div>
</div>

Anda dapat melihat terdapat sebuah sintaks {{titles}} pada kode diatas. Kode tersebut berfungsi untuk menampilkan isi variabel titles yang telah didefinsikan di TripListController kemudian ditautkan kepada $scope. Setelah itu kita juga menyertakan directive ng-model yang mendaftarkan sebuah variabel bernama query kepada $scope. Ketika kita mengetikkan huruf pada input tersebut maka nilai pada query akan selalu berubah. Kemudian ada select yang menyertakan directive ng-model orderProp. Model tersebut akan digunakan untuk proses pengurutan pada saat menampilkan daftar trip. Anda dapat melihat terdapat value yang bernilai name dan -name. Tanda minus pada suatu nilai mengartikan bahwa suatu object yang memiliki atribut name akan diurutkan secara descending jika tidak memiliki tanda minus maka akan diurutkan secara ascending.

Kemudian terdapat directive ng-repeat yang akan melakukan proses pengulangan berdasarkan jumlah objek yang terdapat pada $scope.trips. Pada proses pengulangan tersebut kita juga melewatkan sebuah filter yang menggunakan model query dan orderBy yang menggunakan model orderProp. Dan di dalam proses pengulangan tersebut, kita mencetak data yang dibawa trip yaitu id, name, dan city yang dibungkus dengan elemen hyperlink.

Agar lebih jelas, berikut adalah screenshot dari keseluruhan kode yang telah kita kerjakan di tutorial ini:

[caption id="attachment_7788" align="aligncenter" width="700"] menampilkan trip[/caption]

 

[caption id="attachment_7789" align="aligncenter" width="700"] pengurutan trip dengan orderBy[/caption]

 

[caption id="attachment_7790" align="aligncenter" width="700"] memilah trip dengan filter[/caption]

Penutup

Di tutorial bagian kedaua ini, Anda telah mempelajari bagaimana cara membuat sebuah objek Angular.js dan menyertakan modul yang dibutuhkanya. Anda juga sudah mengenal membuat service di Angular.js, Kemudian Anda juga mengenal cara membuat route, controller, dan pembuatan template. Anda pun telah mengenal beberapa directive baru seperti ng-model dan ng-repeat. Di bagian terakhir dari seri tutorial ini, Anda akan mencoba untuk membuat fitur untuk melihat detail trip, menghapus trip, dan melakukan edit trip.

Referensi

• Angular.js Official Documentation
• Twitter Bootstrap Official Documentation
• TutorialsPoint - Angular.js

(codepolitanteam)