Membangun Aplikasi Web Sederhana dengan Angular.js dan REST (Bagian 1)
Muhammad Arslan 20 Februari 2016
Pendahuluan
Aplikasi berbasis AJAX sudah dikembangkan sejak dahulu. Google mulai menaruh perhatian dengan menambahkan kemampuan AJAX pada GMail. Sehingga setiap e-mail yang datang dapat langsung diketahui user tanpa harus me-refresh halaman inbox terlebih dahulu. AJAX sendiri dapat dikembangkan tanpa bantuan atau menggunakan library. Hampir semua web browser mendukung AJAX, sehingga Anda dapat membuat aplikasi web berbasis AJAX. Kehadiran jQuery, MochiKit, YUI, dan library clientside Javascript lainnya kemudian memudahkan pembuatan aplikasi web berbasis AJAX.Kini Google pun memberikan solusi berbasis AJAX yang dapat memudahkan Anda untuk membuat aplikasi berbasis AJAX dan Javascript. Solusi tersebut adalah sebuah framework yang bernama Angular.js. Bukan hanya untuk mengakomodasi masalah AJAX, Angular.js juga merupakan sebuah framework berbasis MVC yang kemudian punya istilah sendiri yaitu MVVM (Model View ViewModel). Angular.js sendiri merupakan sekumpulan library yang dapat mengakomodasi Anda untuk melakukan sejumlah hal seperti rendering data berupa JSON terhadap sebuah template, melakukan routing untuk "berpindah halaman", mempunyai dukungan history sehingga dapat kembali ke halaman sebelumnya, dapat melakukan proses untuk mengkonsumsi web service seperti REST, dan masih banyak fitur lainnya.
Kali ini, kita akan memanfaatkan REST mytrip yang telah dijelaskan di tutorial "Implementasi REST Sederhana dengan MongoDB dan Silex". Dengan memanfaatkan REST tersebut kita akan mencoba membangun sebuah aplikasi CRUD (create, read, update, delete) yang akan dibangun menggunakan Angular.js dan Twitter Bootstrap. Tutorial ini akan dibagi menjadi tiga bagian agar pembahasan menjadi lebih nyaman dibaca.
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
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
Memulai Coding
Mari kita mulai dengan menulis kode HTML di file index.html. Di dalam kode tersebut akan ada bagian kode yang akan menyertakan file CSS dan Javascript yang dibutuhkan. Kode Angular.js sendiri akan dipisahkan ke dalam file main.js. Library Javascript seperti jQuery, Angular.js dan Twitter Bootstrap akan disimpan di folder vendors. Berikut ini adalah kode HTML di dalam file index.html:<!DOCTYPE>
<html>
<head>
<title>My Trip</title>
<link rel="stylesheet" href="assets/vendors/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<div ng-app="tripApp">
<div ng-include="'partial/header.html'"></div>
<div id="wrap">
<div ng-view></div>
</div>
<div ng-include="'partial/footer.html'"></div>
</div>
<script src="assets/vendors/jquery-1.9.1.min.js"></script>
<script src="assets/vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/vendors/angular/angular.min.js"></script>
<script src="assets/vendors/angular/angular-route.min.js"></script>
<script src="assets/vendors/angular/angular-resource.min.js"></script>
<script src="assets/js/apps/main.js"></script>
</body>
</html>
- ng-app, adalah sebuah directive yang akan membuat elemen tersebut dan anaknya dianggap sebagai aplikasi Angular.js, semua controller dan scope yang didefinisikan dalam kode Javascript akan hanya berjalan di dalam div yang memuat directive ng-app.
- ng-include, adalah directive yang akan menyertakan potongan HTML (template) yang selalu muncul di setiap halaman, oleh karena itu kita dapat memisahkan bagian tertentu dari suatu halaman untuk dipisahkan menjadi template
- ng-view, adalah directive yang akan mewadahi template hasil render dari routing Angular.js. Karena Angular.js memiliki routing tersendiri, dia melakukan routing terhadap halamannya sendiri bukan kepada server. Misal ketika kita memanggil URL http://localhost/mytrip/#/trip/12345 maka kita akan memanggil route dengan segmen trip yang berparameter 12345, kemudian Angular.js akan menampilkan template yang bersesuaian dengan route tersebut dan memasangkan controller kepada template tersebut
Berikut adalah kode template untuk header.html:/* Sticky footer styles -------------------------------------------------- */html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ }
/* Wrapper for page content to push down footer / #wrap { min-height: 100%; height: auto !important; height: 100%; / Negative indent footer by its height / margin: 0 auto -60px; / Pad bottom by footer height */ padding: 0 0 60px; }
/* Set the fixed height of the footer here */ #footer { height: 60px; background-color: #f5f5f5; }
/* Custom page CSS -------------------------------------------------- / / Not required for template or sticky footer method. */
#wrap > .container { padding: 60px 15px 0; } .container .credit { margin: 20px 0; }
#footer > .container { padding-left: 15px; padding-right: 15px; }
code { font-size: 80%; }
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/">My Trip</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class=""><a href="#/"><span class="glyphicon glyphicon-list"></span> Katalog</a></li>
<li class=""><a href="#/trip/new"><span class="glyphicon glyphicon-plus"></span> Tambah baru</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Sedangkan berikut ini adalah kode template untuk footer.html:
<div id="footer">
<div class="container">
<p class="text-muted credit">Website demo ini dibangun oleh <a href="http://codepolitan.com">CodePolitan Team</a>. Dibuat dengan jQuery, Silex, PHP, Twitter Bootstrap, MongoDB, and Angular.js.</p>
</div>
</div>
Berikut adalah screenshot hasil dari penulisan kode diatas:
Penutup
Seperti Anda lihat pada kode index.html, kita sudah mulai menggunakan fitur Angular.js yang berperan dalam proses templating. Kita menggunakan tiga directive yaitu ng-include, ng-view, dan ng-app. Di Angular.js sendiri umumnya tampilan yang jarang berubah akan digunakan sebagai wadah yang reusable untuk bagian lain. Berikutnya Anda akan mulai membuat kode Angular.js yang akan berperan besar dalam menjalankan aplikasi MyTrip ini.Referensi
- Angular.js Official Documentation
- Twitter Bootstrap Documentation
- TutorialsPoint - Angular.js
- Start Bootstrap