<h3>Pendahuluan</h3>
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 <a href="http://www.codepolitan.com">"Implementasi REST Sederhana dengan MongoDB dan Silex"</a>. 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.
<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 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" />

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>
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:
<pre><code>&lt;!DOCTYPE&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;My Trip&lt;/title&gt;
 &lt;link rel="stylesheet" href="assets/vendors/bootstrap/css/bootstrap.min.css" /&gt;
 &lt;link rel="stylesheet" href="assets/css/main.css" /&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div ng-app="tripApp"&gt;
 &lt;div ng-include="'partial/header.html'"&gt;&lt;/div&gt;
 &lt;div id="wrap"&gt;
 &lt;div ng-view&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;div ng-include="'partial/footer.html'"&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;script src="assets/vendors/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
 &lt;script src="assets/vendors/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
 &lt;script src="assets/vendors/angular/angular.min.js"&gt;&lt;/script&gt;
 &lt;script src="assets/vendors/angular/angular-route.min.js"&gt;&lt;/script&gt;
 &lt;script src="assets/vendors/angular/angular-resource.min.js"&gt;&lt;/script&gt;
 &lt;script src="assets/js/apps/main.js"&gt;&lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
Pada kode diatas, Anda dapat memperhatikan adanya sebuah atribut HTMl yang tidak biasa. Mereka adalah ng-app, ng-include, dan ng-view. Ketiga atribut tersebut memiliki fungsi sebagai berikut:
<ul>
	<li>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.</li>
	<li>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</li>
	<li>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</li>
</ul>
Untuk kode main.css sendiri, kode berikut merupakan kode bawaan dari template StartBootstrap:
<pre><code>/* 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 &gt; .container {
 padding: 60px 15px 0;
}
.container .credit {
 margin: 20px 0;
}

#footer &gt; .container {
 padding-left: 15px;
 padding-right: 15px;
}

code {
 font-size: 80%;
}
</code></pre>
Berikut adalah kode template untuk header.html:
<pre><code>&lt;div class="navbar navbar-default"&gt;
 &lt;div class="container"&gt;
 &lt;div class="navbar-header"&gt;
 &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
 &lt;span class="icon-bar"&gt;&lt;/span&gt;
 &lt;span class="icon-bar"&gt;&lt;/span&gt;
 &lt;span class="icon-bar"&gt;&lt;/span&gt;
 &lt;/button&gt;
 &lt;a class="navbar-brand" href="#/"&gt;My Trip&lt;/a&gt;
 &lt;/div&gt;
 &lt;div class="collapse navbar-collapse"&gt;
 &lt;ul class="nav navbar-nav"&gt;
 &lt;li class=""&gt;&lt;a href="#/"&gt;&lt;span class="glyphicon glyphicon-list"&gt;&lt;/span&gt; Katalog&lt;/a&gt;&lt;/li&gt;
 &lt;li class=""&gt;&lt;a href="#/trip/new"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt; Tambah baru&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>
Sedangkan berikut ini adalah kode template untuk footer.html:
<pre><code>&lt;div id="footer"&gt;
 &lt;div class="container"&gt;
 &lt;p class="text-muted credit"&gt;Website demo ini dibangun oleh &lt;a href="http://codepolitan.com"&gt;CodePolitan Team&lt;/a&gt;. Dibuat dengan jQuery, Silex, PHP, Twitter Bootstrap, MongoDB, and Angular.js.&lt;/p&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>
Berikut adalah screenshot hasil dari penulisan kode diatas:

<img class="size-large wp-image-7785 aligncenter" src="https://www.codepolitan.com/wp-content/uploads/2016/02/Selection_002-1-700x379.png" alt="Selection_002" width="700" height="379" />
<h3>Penutup</h3>
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.
<h3>Referensi</h3>
<ul>
	<li>Angular.js Official Documentation</li>
	<li>Twitter Bootstrap Documentation</li>
	<li>TutorialsPoint - Angular.js</li>
	<li>Start Bootstrap</li>
</ul>
(codepolitanteam)

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

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 1)

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