Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular

Membangun Shopping Cart Sederhana Menggunakan AngularJS: Bagian 1

by
Read Time:7 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Amri Shodiq (you can also view the original English article)

Dalam beberapa seri tutorial ini, kita akan melihat bagaimana membuat shopping cart sederhana menggunakan AngularJS. Seri tutorial ini akan fokus pada penggunaan directive AngularJS. Directive-directive di AngularJS adalah bagian utama dan mereka memberi perilaku yang spesial kepada HTML. Dari dokumentasi resmi:

Di level atas, directive-directive adalah penanda di elemen DOM (seperti atribut, nama elemen, comment atau class CSS) yang memberitahu compiler HTML AngularJS ($compile) agar menempelkan perilaku tertentu ke elemen DOM atau bahkan mengubah elemen DOM dan anak-anaknya.

Mendesain Sebuah Halaman Cart

Kita akan menggunakan Bootstrap untuk mendesain halaman kita. Begitu kita selesai mendesain dengan Bootstrap, kita akan mengintegrasikannya dengan aplikasi AngularJS kita. Selagi mendesain halaman ini, kita tidak akan terlalu detil membahas tentang Bootstrap, tapi kita hanya akan fokus pada hal-hal penting saja.

Buat sebuah halaman bernama index.html. Download dan include file Bootstrap ke index.html.

Di dalam div .container, buat div .row.

Di dalam halaman index.html, kita akan punya dua kolom. Satu akan memiliki list item-item berikut harganya, dan satu kolom lagi akan memiliki div Total. Yuk kita buat dua kolom tersebut.

Sekarang, di kolom pertama kita tambahkan beberapa item dan opsi.

Salin kode HTML di atas beberapa kali di kolom pertama untuk mendapatkan beberapa item lagi. Di kolom kedua, tambahkan kode HTML berikut untuk menampilkan jumlah harga seluruh item yang dipilih.

Simpan perubahan itu, kemudian browse ke index.html. Tampilannya kurang lebih seperti ini:

Simple Shopping CartSimple Shopping CartSimple Shopping Cart

Terlihat cukup bagus. Tapi satu yang perlu kita perbaiki adalah untuk membuat posisi div Total tetap, tidak bergerak ketika kita scroll browser kita. Untuk memperbaikinya, kita akan gunakan komponen Javascript Bootstrap, Affix.

Pertama, pastikan Anda masukkan file Javascript Bootstrap. Untuk menambahkan perilaku affix, tambahkan atribut data-spy="affix" ke div Total. Kita juga boleh menentukan posisi yang kita inginkan fi affix. Yuk kita pastikan affix-nnya pada posisi tertentu dari atas halaman dengan menambahkan data-offset-top="20". Sekarang, jika Anda browse index.html dan coba scroll browsernya, total akan tetap berada di atas dan tetap terlihat.

Membuat Aplikasi Shopping Cart

Membuat Bagian Server

Selagi membuat aplikasi AngularJS, kita akan menggunakan direktiv ngView untuk menukar-nukar view. Maka kita perlu menjalankan AngularJS menggunakan server. Di sini kita akan menggunakan server Node.js.

Mari mulai membuat direktori untuk proyek kita. Kita namakan ShoppingCart. Di dalam ShoppingCart buat sebuah file bernama server.js. Kita akan menggunakan Express, sebuah framework aplikasi NodeJS untuk me-render halaman-halaman web. Kita install express menggunakan npm.

Setelah express terinstall, bukan server.js, tambahkan express dan buat sebuah aplikasi.

Kita akan menyimpan file-file AngularJS terpisah dalam folder public. Buat sebuah folder bernama public. Di dalam server.js tentukan path /public dan /node_modules.

Selanjutnya, tentukan port untuk aplikasi kita.

Sekarang, jalankan server Node.js dan Anda akan lihat pesan bahwa server sudah berjalan di terminal.

Tapi, jika Anda coba browser http://localhost:3000 yang akan tampil adalah pesan error Cannot GET / karena kita belum menentukan route.

Membuat Aplikasi AngularJS

Di dalam folder public, buat sebuah halaman html bernama main.html. Ini akan kita gunakan sebagai template utama. Salin isi file index.html yang kita buat sebelumnya ke main.html. Dari main.html, hapus isi di dalam body.

Download AngularrJS dan includ di main.html. Tambahkan direktiv ngApp di tag HTML.

Di body dalam main.html, tambahkan div dengan direktiv ngView. Setelah membuat perubahan di atas, beginilah tampilan main.html sekarang:

Sekarang, mari kita tentukan halaman default jika server node dinyalakan. Bukan file ShoppingCart/server.js dan tambahkan route aplikasi berikut supaya di redirect ke halaman main.html.

Simpan perubahan kemudian restart server node. Arahkan browser ke http://localhost:3000 dan Anda bisa melihat halaman kosong, tidak seperti percobaan terakhir kita.

Membuat Cart View dan Route

Berikutnya, mari kita integrasikan desain shopping cart ke aplikasi AngularJS. Di dalam folder public, buat sebuah folder bernama cart. Di dalam cart buat dua file yaitu cart.html dan cart.js. Dari halaman Bootstrap yang kita desain di index.html, copy isi di dalam body dan paste ke cart.html.

Kita akan membutuhkan ngRoute, maka install dengan npm.

Setelah terinstall, tambahkan referensi ke angular-route di main.html.

Buka cart.js dan tentukan modul cart.

Seperti tampak di kode di atas, kita telah memasukkan modul ngRoute, yang akan kita gunakan untuk menentukan route.

Menggunakan modul ngRoute, kita telah tentukan route /cart dengan template dan controller nya masing-masing. Juga tentukan controller CartCtrl di dalam cart.js. Beginilah isi cart.js.

Kita juga membutuhkan file utama untuk menyuntukkan semua modul ke aplikasi AngularJS. Maka di dalam folder public buat sebuah file bernama app.js. Ini akan berfungsi sebagai file utama aplikasi AngularJS-nya. Buat sebuah modul bernama shoppingCart di dalam app.js dan tambahkan modul cart ke dalamnya.

Tentukan route default untuk aplikasi AngularJS ke /cart di dalam app.js.

Tambahkan referensi ke cart.js dan app.js di halaman main.html.

Simpan semua perubahan dan restart servernya. Arahkan browser Anda ke http://localhost:3000 dan Anda mestinya bisa melihat cart Anda tampil.

Shopping Cart Page Inside AngularJS AppShopping Cart Page Inside AngularJS AppShopping Cart Page Inside AngularJS App

Sekarang, jika Anda scroll halaman, div Total tidak dalam posisi tetap. Catat masalah ini -- kita akan betulkan nanti di seri berikutnya.

Buat Checkout View dan Route

Di dalam folder public, buat folder bernama checkout. Di dalam folder checkout, buat dua file bernama checkout.html dan checkout.js. Buka checkout.html dan tambahkan kode HTML berikut:

Bukan checkout.js dan buat modul checkout. Tambahkan modul ngRoute dan tentukan template default dan controller logic-nya. Beginilah isi checkout.js:

Tambahkan referensi ke checkout.js di dalam file main.html.

Masukkan modul checkout ke dalam app.js sehingga aplikasi AngularJS shoppingCart tahu adanya module ini.

Simpan perubahan dan restart servernya. Arahkan browser Anda ke http://localhost:3000/#/checkout dan Anda bisa lihat halaman checkout.

Shopping Cart App Checkout PageShopping Cart App Checkout PageShopping Cart App Checkout Page

Kesimpulan

Dalam tutorial ini kita telah mendesain dan mengintegrasikan design shopping cart sederhana ke dalam aplikasi AngularJS. Di seri berikutnya, kita akan lihat bagaimana membuat direktiv custom untuk mengimplementasikan fungsi yang diperlukan.

Kode sumber tutorial ini tersedia di GitHub. Sampaikan pemikiran, koreksi atau saran Anda di kotak komentar di bawah!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.