<h3>Pendahuluan</h3>
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:
<ul>
	<li>membuat controller untuk hapus, edit, detail, dan tambah trip</li>
	<li>membuat template untuk edit dan detail trip</li>
</ul>
Untuk edit dan tambah trip akan dipaparkan di tutorial bagian ke tiga.
<h3>Persiapan</h3>
Di tutorial ini kita membutuhkan beberapa alat sebagai berikut:
<ul>
	<li>Angular.js versi 1.4.x, kita tidak akan menggunakan Angular.js versi 2.x karena versi tersebut sudah menggunakan TypeScript dan Node.js</li>
	<li>Twitter Bootstrap 3.x, kita gunakan sedikit fitur yang dimiliki Twitter Bootstrap agar aplikasi yang kita bangun memiliki tampilan yang lebih menarik</li>
	<li>Silex, PHP, MongoDB dan Apache2, dapat Anda baca penjelasannya di tutorial <a href="http://www.codepolitan.com">"Implementasi REST Sederhana dengan MongoDB dan Silex"</a></li>
	<li>Text Editor, Anda dapat menggunakan apapun text editor favorit Anda untuk mengetikkan source code yang akan ada di sepanjang tutorial ini</li>
</ul>
Pastikan Anda mengikuti struktur folder dan file seperti pada gambar berikut:

<img class="size-full wp-image-7786 aligncenter" src="https://www.codepolitan.com/wp-content/uploads/2016/02/Selection_006-1.png" alt="Selection_006" width="214" height="385" />

Untuk mengingatkan kembali, Anda wajib membuat beberapa file berikut di folder yang ditentukan:
<ul>
	<li>header.html, footer.html, trip-detail.html, trip-edit.html, dan trip-list.html berada di bawah folder partial</li>
	<li>main.js berada di bawah folder js/apps</li>
	<li>main.css berada di bawah folder css</li>
	<li>index.html berada di bawah folder client/angular</li>
</ul>
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.
<h3>Memulai Coding</h3>
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:
<pre><code>// 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
</code></pre>
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:
<pre><code>&lt;div class="container"&gt;
 &lt;div class="row"&gt;
 &lt;div class="page-header"&gt;
 &lt;h1&gt;{{trip.name}}&lt;/h1&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class="row"&gt;
 &lt;div class="col-md-12"&gt;
 &lt;h4&gt;Sebuah &lt;b&gt;{{ trip.category }}&lt;/b&gt; di &lt;b&gt;{{ trip.city }}&lt;/b&gt; &lt;/h4&gt;
 {{ trip.description }}
 &lt;div style="margin:20px;" class="pull-right"&gt;
 &lt;a href="javascript:void(0);" ng-click="deleteTrip();" class="btn btn-danger"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt; Hapus Saja&lt;/a&gt; 
 &lt;a href="#/trip/{{trip._id.$id}}/edit" class="btn btn-success"&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt; Edit Trip Ini&lt;/a&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>
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:
<pre><code>// 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
</code></pre>
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:
<pre><code>&lt;div class="container"&gt;
 &lt;div class="row"&gt;
 &lt;div class="page-header"&gt;
 &lt;h1&gt;{{ title }}&lt;/h1&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class="row"&gt;
 &lt;div class="col-md-12"&gt;
 &lt;h4&gt;{{ trip.name }} &lt;/h4&gt;
 &lt;form id="form-add-trip" role="form"&gt;
 &lt;div class="form-group"&gt;
 &lt;label for="tripName"&gt;Nama Perjalanan:&lt;/label&gt;
 &lt;input ng-model="trip_name" type="text" class="form-control" id="tripName" placeholder="isi dengan nama perjalanan disini..."&gt;
 &lt;/div&gt;
 &lt;div class="form-group"&gt;
 &lt;label for="tripCity"&gt;Kota Tujuan:&lt;/label&gt;
 &lt;input ng-model="trip_city" type="text" class="form-control" id="tripCity" placeholder="isi dengan kota tujuan sewaktu Anda berlibur..."&gt;
 &lt;/div&gt;
 &lt;div class="form-group"&gt;
 &lt;label&gt;Jenis Wisata:&lt;/label&gt;
 &lt;select class="form-control" ng-model="trip_chosen_category"&gt;
 &lt;option ng-repeat="trip in trip_category" value="{{ trip }}"&gt;
 {{ trip }}
 &lt;/option&gt;
 &lt;/select&gt;
 &lt;/div&gt;
 &lt;div class="form-group"&gt;
 &lt;label&gt;Ceritakan perjalanan Anda:&lt;/label&gt;
 &lt;textarea class="form-control" rows="10" ng-model="trip_description"&gt;&lt;/textarea&gt;
 &lt;/div&gt;
 &lt;div style="margin:20px;"&gt;
 &lt;a href="#/" class="btn btn-danger"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt; Batal&lt;/a&gt; 
 &lt;a href="javascript:void(0);" ng-click="submitTrip();" class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt; Simpan&lt;/a&gt;
 &lt;/div&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>
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:
<pre><code>// 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 = "";
 }
});
</code></pre>
Setelah melalui langkah yang panjang ini, berikut adalah screenshot dari halaman edit, tambah, dan detail trip:

[caption id="attachment_7793" align="alignnone" width="700"]<img class="size-large wp-image-7793" src="https://www.codepolitan.com/wp-content/uploads/2016/02/Selection_001-1-700x382.png" alt="halaman tambah trip" width="700" height="382" /> halaman tambah trip[/caption]

&nbsp;

[caption id="attachment_7794" align="alignnone" width="700"]<img class="size-large wp-image-7794" src="https://www.codepolitan.com/wp-content/uploads/2016/02/Selection_002-2-700x378.png" alt="halaman detail trip" width="700" height="378" /> halaman detail trip[/caption]

&nbsp;

[caption id="attachment_7795" align="alignnone" width="700"]<img class="size-large wp-image-7795" src="https://www.codepolitan.com/wp-content/uploads/2016/02/Selection_003-3-700x381.png" alt="halaman edit trip" width="700" height="381" /> halaman edit trip[/caption]

&nbsp;

[caption id="attachment_7796" align="alignnone" width="700"]<img class="size-large wp-image-7796" src="https://www.codepolitan.com/wp-content/uploads/2016/02/Selection_004-3-700x376.png" alt="proses hapus trip di halalman detail trip" width="700" height="376" /> proses hapus trip di halalman detail trip[/caption]
<h3>Penutup</h3>
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.
<h3>Referensi</h3>
<ul>
	<li>Angular.js Official Documentation</li>
	<li>Twitter Bootstrap Official Documentation</li>
	<li>TutorialsPoint - Angular.js</li>
</ul>
(codepolitanteam)

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

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

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

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

PDKT dengan MongoDB

Implementasi REST sederhana dengan MongoDB dan Silex

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

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

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

Memulai Pembuatan Aplikasi Web dengan Yii2 (1): Instalasi