Membangun Aplikasi Web Sederhana dengan Angular.js dan REST (Bagian 3 - END)

Pendahuluan

DI tutorial sebelumnya Anda sudah mencoba untuk membuat objek Angular.js, membuat service, konfigurasi routing, dan melihat daftr trip. Di tutorial ini, Anda akan melakukan beberapa hal berikut:

• membuat controller untuk hapus, edit, detail, dan tambah trip
• membuat template untuk edit dan detail trip

Untuk 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 dan file 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

Sekarang mari kita lanjutkan dari tutorial sebelumnya untuk membuat TripDetailController. Controller ini membutuhkan modul seperti $scope, $routeParams, $http, dan sebuah service yang telah kita buat yaitu TripService. Di dalamnya terdapat function yang bernama deleteTrip() dan sebuah proses pengambilan detail trip melalui REST dengan metode GET. Silahkan ketik kode dibawah ini di dalam file main.js:

// ada kode lain sebelum kode ini
tripApp.controller('TripDetailController', ['$scope', '$routeParams', '$http', 'TripService', function($scope, $routeParams, $http, TripService){
$scope.tripId = $routeParams.tripId;
$http.get(base_url+'trip/'+$routeParams.tripId).success(function(data, status){
    $scope.trip = data.resp;
});

$scope.deleteTrip = function($id){
    var delete_this = confirm('Anda yakin mau menghapus trip ini?');
    if (delete_this) {
        TripService.delete({id:$routeParams.tripId}, function(data, status){
            console.log(data);
            window.document.location = '#/';
        });
    }
};

}]);
// ada kode lain sesudah kode ini

Anda dapat melihat bahwa hasil pengambilan detail trip disimpan ke dalam variabel trip yang ditautkan kepada $scope. Kemudian function deleteTrip() akan dipanggil melalui sebuah tombol di halaman detail trip. Kemudian sebuah dialog konfirmasi akan muncul sebelum proses hapus trip. Jika penghapusan trip terkonfirmasi, maka function delete() yang dimiliki TripService akan melakukan proses penghapusan trip.

Sekarang kita akan membuat sebuah template yang akan dipasangkan dengan TripDetailController yaitu trip-detail.html:

<div class="container">
    <div class="row">
        <div class="page-header">
            <h1>{{trip.name}}</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h4>Sebuah <b>{{ trip.category }}</b> di <b>{{ trip.city }}</b> </h4>
            {{ trip.description }}
            <div style="margin:20px;" class="pull-right">
                <a href="javascript:void(0);" ng-click="deleteTrip();" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Hapus Saja</a> 
                <a href="#/trip/{{trip._id.$id}}/edit" class="btn btn-success"><span class="glyphicon glyphicon-pencil"></span> Edit Trip Ini</a>
            </div>
        </div>
    </div>
</div>

Pada kode diatas, trip.name akan dicetak pada elemen h1, kemudian trip.category, trip.city, dan trip.description dicetak di dalam elemen col-md-12. Lalu kita menautkan function deleteTrip() kepada directive ng-click. Kemudian kita juga membuat sebuah tombol untuk mengarahkan kita ke halaman edit trip.

Yuk kita lanjut lagi, sekarang kita akan membuat sebuah controller yang bernama TripNewController. Controller tersebut hanya membutuhkan modul $scope dan $http. Di dalamnya kita mendefinisikan beberapa variabel yang terkait dengan form untuk tambah dan edit trip. Kita akan menggunakan variabel title, trip_category, trip_name, trip_city, trip_chosen_category, dan trip_description. Selain itu kita juga akan membuat sebuah function yang bernama submitTrip. Berikut adalah kode TripNewController yang harus Anda tambahkan di file main.js:

// ada kode lain sebelum kode ini

tripApp.controller('TripNewController', function($scope, $http){
    $scope.title = "Buat Trip Baru";
    $scope.trip_category = ['taman', 'pegunungan', 'laut', 'pantai', 'pulau', 'bukit', 'theme park', 'hutan', 'salju', 'museum'];
    $scope.trip_name = "";
    $scope.trip_city = "";
    $scope.trip_chosen_category = $scope.trip_category[0];
    $scope.trip_description = "";


    $scope.submitTrip = function(){
        console.log('add trip');

        $http({
            method:"POST",
            url: base_url+'trip', 
            data: $.param({
                'name':$scope.trip_name,
                'city':$scope.trip_city,
                'category':$scope.trip_chosen_category,
                'description':$scope.trip_description
            }),
            headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).success(function(data, status){
            window.document.location = '#/';
        });

        // nilainya direset
        $scope.trip_name = "";
        $scope.trip_city = "";
        $scope.trip_chosen_category = $scope.trip_category[0];
        $scope.trip_description = "";
    }
});

// ada kode lain sesudah kode ini

Pada kode diatas, Anda dapat melihat beberapa inisialisasi seperti pada trip_category. Isi array tersebut akan ditampilkan sebagai opsi dari elemen select. Kita juga memilih nilai pertama dari trip_category sebagai inisialisasi untuk trip_chosen_category. Kemudian di dalam submitTrip(), terdapat sebuah request HTTP yang menggunakan metode POST. Request HTTP tersebut akan melakukan proses pembuatan trip baru dengan parameter name, city, category, dan descriptio. Kita pun harus menyusun Content-Type dari header request tersebut menjadi application/x-www-form-urlencoded. Kemudian setelah proses request HTTP dieksekusi, variabel yang terkait dengan form akan dikosongkan atau direset.

Sekarang kita akan membuat template untuk TripNewController yaitu trip-edit.html:

<div class="container">
    <div class="row">
        <div class="page-header">
            <h1>{{ title }}</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h4>{{ trip.name }} </h4>
            <form id="form-add-trip" role="form">
              <div class="form-group">
                <label for="tripName">Nama Perjalanan:</label>
                <input ng-model="trip_name" type="text" class="form-control" id="tripName" placeholder="isi dengan nama perjalanan disini...">
              </div>
              <div class="form-group">
                <label for="tripCity">Kota Tujuan:</label>
                <input ng-model="trip_city" type="text" class="form-control" id="tripCity" placeholder="isi dengan kota tujuan sewaktu Anda berlibur...">
              </div>
              <div class="form-group">
                <label>Jenis Wisata:</label>
                <select class="form-control" ng-model="trip_chosen_category">
                    <option ng-repeat="trip in trip_category" value="{{ trip }}">
                        {{ trip }}
                    </option>
                </select>
              </div>
              <div class="form-group">
                <label>Ceritakan perjalanan Anda:</label>
                <textarea class="form-control" rows="10" ng-model="trip_description"></textarea>
              </div>
              <div style="margin:20px;">
                    <a href="#/" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Batal</a> 
                    <a href="javascript:void(0);" ng-click="submitTrip();" class="btn btn-primary"><span class="glyphicon glyphicon-pencil"></span> Simpan</a>
              </div>
            </form>
        </div>
    </div>
</div>

Pada kode template diatas, kita mempunyai sejumlah model yang terdiri dari trip_name, trip_city, trip_chosen_category, dan trip_description. Kemudian submitTrip() kita tautkan kepada ng-click di tombol "Simpan". Tombol "Batal" akan mengarahkan kita kembali ke halaman daftar trip.

Karena tidak berbeda jauh dengan TripNewController, template yang digunakan TripEditController sama dengan template yang digunakan TripNewController yaitu trip-edit.html. Sedangkan untuk perbedannya hanya terletak pada method yang digunakan untuk melakukan request HTTP yaitu metode PUT. Silahkan tambahkan TripEditController di file main.js:

// ada kode lain sebelum kode ini

tripApp.controller('TripEditController', function($scope, $routeParams, $http){
    $scope.title = "Edit Trip";
    $scope.trip_category = ['taman', 'pegunungan', 'laut', 'pantai', 'pulau', 'bukit', 'theme park', 'hutan', 'salju', 'museum'];
    $scope.trip_name = "";
    $scope.trip_city = "";
    $scope.trip_chosen_category = $scope.trip_category[0];
    $scope.trip_description = "";

    $http.get(base_url+'trip/'+$routeParams.tripId).success(function(data, status){
        var trip = data.resp;
        $scope.trip_name = trip.name;
        $scope.trip_city = trip.city;
        $scope.trip_chosen_category = trip.category;
        $scope.trip_description = trip.description;
    });

    $scope.submitTrip = function(){
        console.log('edit trip');

        $http({
            method:"PUT",
            url: base_url+'trip/'+$routeParams.tripId, 
            data: $.param({
                'name':$scope.trip_name,
                'city':$scope.trip_city,
                'category':$scope.trip_chosen_category,
                'description':$scope.trip_description
            }),
            headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).success(function(data, status){
            window.document.location = '#/';
        });

        // nilainya direset
        $scope.trip_name = "";
        $scope.trip_city = "";
        $scope.trip_chosen_category = $scope.trip_category[0];
        $scope.trip_description = "";
    }
});

Setelah melalui langkah yang panjang ini, berikut adalah screenshot dari halaman edit, tambah, dan detail trip:

[caption id="attachment_7793" align="alignnone" width="700"] halaman tambah trip[/caption]

 

[caption id="attachment_7794" align="alignnone" width="700"] halaman detail trip[/caption]

 

[caption id="attachment_7795" align="alignnone" width="700"] halaman edit trip[/caption]

 

[caption id="attachment_7796" align="alignnone" width="700"] proses hapus trip di halalman detail trip[/caption]

Penutup

Hingga bagian terakhir ini, Anda sudah dapat membuat sebuah aplikasi CRUD dengan menggunakan Angular.js dan REST yang dibangun menggunakan Silex dan MongoDB. Namun dalam tutorial ini tentu saja ada kekurangan. Halaman HTML yang terdapat Angular.js di dalamnya seharusnya di-render melalui server side scripting untuk melapisinya dengan authentication dan authorization. Jika plain HTML saja semua orang dapat melakukan akses tanpa proses authentication. Tidak hanya itu session pun tidak dapat digunakan jika Anda membutuhkan session.

Referensi

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

(codepolitanteam)