Apa Itu Load Balancing ?

Load Balancing adalah sebuah teknik untuk melakukan distribusi beban trafik pada dua atau lebih jalur koneksi secara seimbang sehingga setiap jalur koneksi akan menerima beban trafik yang sama.

Load balancing ini sangat banyak digunakan oleh perusahaan - perusahaan skala besar. Load balancing biasanya sering digunakan untuk kebutuhan trafik web yang sangat tinggi seperti web e-commerce. Load balancing biasanya digunakan pada saat sebuah server jika user yang melakukan akses server tersebut telah melebihi jumlah maksimal. Ketika user yang mengakses melebihi kapasitas maka dengan menggunakan teknik load balancing, beban trafik tersebut akan dialihkan ke server yang lain.

Mengapa web Menggunakan Load Balancing ?

Berikut adalah alasan mengapa web menggunakan load balancing :

  • Untuk mempercepat waktu reponse sebuah web. Dengan menggunakan teknik load balancing maka yang akan menerima request tidak hanya 1 server, sehingga mempercepat waktu response sebuah web. 1 web server dapat menerima banyak request, sedangkan 1 server biasanya kita memiliki 1 web server, bayangkan saja jika kita mempunyai 5 dan masing - masing server mempunyai 1 web server maka waktu response sebuah web akan meningkat sangat pesat.

  • Dengan menggunakan load balancing kita akan mengurangi error pada system, misalnya jika kita mempunyai 5 server, lalu masing - masing server tersebut mempunyai web server yang menjalankan web yang telah kita deploy, karena kita menggunakan load balancing, jika salah satu server mati maka web kita akan tetap berjalan karena server lain akan menghandle request web tersebut.

Apa Itu HAProxy ?

HAProxy adalah salah satu software yang mendukung load balancing dan proxy untuk protokol TCP dan HTTP.

Pada artikel ini, penulis akan mencoba menggunakan teknologi HAProxy, salah satu keunggulan HAProxy adalah dapat melayani semua port TCP seperti 8080, 3000, 9000 dan lain - lain. Berikut adalah fitur - fitur dari HAProxy :

  • Dapat melakukan load balancing untuk banyak server
  • Dapat membuat load balancing master - slave sehingga apabila load balancing yang master mati maka akan digantikan oleh slave
  • Dapat digunakan oleh banyak service seperti email, database, web server dan lain - lain.
  • Terdapat statistik load balancing sehingga mempermudah kita memantau beban trafik
  • Jika salah satu server mati, maka beban trafik ke server tersebut akan dihentikan.

Berikut adalah gambar dari arsitektur HAProxy

arsitektur-haproxy.png

Membuat Load Balancing Dengan HAProxy Dan Docker

Bagi anda yang belum mengerti docker, silahkan baca artikel Belajar Docker. Karena kita tidak memiliki server beneran maka kita akan mencoba menggunakan docker sebagai visualisasi server. Untuk melakukan uji terhadap aplikasi web, maka penulis telah membuat contoh aplikasi web java, silahkan download di Belajar Load Balancing, Karena aplikasi ini adalah aplikasi java web maka anda perlu melakukan instalasi java untuk melakukan build web java tersebut, bagi anda yang belum melakukan instalasi java, silakan lihat di artikel Instalasi Perlengkapan Coding Java. Berikut adalah beberapa teknologi yang akan kita gunakan untuk load balancing :

  • Web Server : jetty web server
  • Framework Aplikasi Web : Spring Boot, Spring Data JPA
  • database : MariaDB
  • Pooling Database : HikariCP
  • Visualisasi Server : Docker
  • Sistem Operasi : Ubuntu, Debian
  • Load Balancing : HAProxy

Dan berikut adalah arsitektur yang akan kita gunakan untuk membuat load balancing.

Arsitektur Haproxy Load Balancing.svg

Dari gambar diatas dapat kita lihat bahwa kita menggunakan 4 server, dimana 1 server menghadle database, 2 server menghadle web dan 1 server lagi khusus untuk load balancing dengan menggunakan HAProxy. User akan melakukan akses terhadap server load balancing, lalu HAProxy secara otomatis akan meneruskan request tersebut ke server selanjutnya, sebelumnya meneruskan request, HAProxy akan melakukan pengecekan terlebih dahulu dengan menggunakan algoritma load balancing, biasanya yang paling sering digunakan adalah algoritma Round Robin, algoritma ini biasanya akan membagikan beban trafik secara bergiliran ke setiap server.

Jika project Belajar Load Balancing telah anda download, kemudian jalankan perintah.

mvn clean package docker:build

Tunggu hingga proses selesai, nantinya akan terbentuk sebuah image dengan nama rizki.mufrizal/belajar.spring.boot.load.balancing, konfigurasi docker tersebut berada pada folder src/main/docker. Disana terdapat 2 file yaitu Dockerfile. File Dockerfile berisi konfigurasi server untuk menjalankan aplikasi web java. Langkah selanjutnya, silahkan buat sebuah file docker-compose.yml di root project anda, lalu masukkan codingan seperti berikut.

mariadb:
  container_name: mariadb-server
  image: mariadb:10.1.16
  environment:
    - MYSQL_ROOT_PASSWORD=root
    - MYSQL_DATABASE=microservicespringboot
    - MYSQL_USER=rizki
    - MYSQL_PASSWORD=mufrizal

server1-belajar-load-balancing:
  container_name: server1-belajar-load-balancing
  image: rizki.mufrizal/belajar.spring.boot.load.balancing
  links:
    - mariadb
  ports:
    - 8081:8080

server2-belajar-load-balancing:
  container_name: server2-belajar-load-balancing
  image: rizki.mufrizal/belajar.spring.boot.load.balancing
  links:
    - mariadb
  ports:
    - 8082:8080

Konfigurasi diatas berfungsi untuk membuat 3 container secara sekaligus, dimana container pertama bernama mariadb yang dikhususkan untuk server database, 2 container lagi berisi aplikasi java, dimana kedua server ini memiliki link ke server database mariadb. Untuk menjalankan ketiga container tersebut, silahkan akses folder root project dengan terminal anda, lalu jalankan perintah berikut.

docker-compose up

Kemudian silahkan cek apakah 3 container tersebut telah berjalan atau tidak dengan perintah.

docker ps

Pada saat penulis menjalankan perintah diatas, penulis berhasil menjalankan 2 container, sedangkan 1 container lagi tidak jalan, mengapa demikian ? biasanya ini sering terjadi karena start up database mariadb yang lebih lambat dari pada start up aplikasi web java. Untuk mengatasi hal ini, silahkan hentikan container yang sedang jalan dengan perintah CTRL + c lalu jalankan kembali dengan perintah docker-compose up. Jika telah berjalan ketiga container tersebut, silahkan cek web tersebut melalui browser anda, anda dapat melakukan pengecekan pada localhost:8081 dan localhost:8082.

Langkah selanjutnya kita akan membuat 1 container lagi yang berfungsi sebagai load balancing. Silahkan jalankan perintah berikut untuk menjalankan container untuk load balancing.

docker run --link server1-belajar-load-balancing --link server2-belajar-load-balancing --name server3-belajar-load-balancing -p 8083:80 -p 9001:9000 -it ubuntu:latest

Maka anda dapat melakukan akses CLI container tersebut, silahkan jalankan perintah berikut untuk melakukan update, upgrade, instalasi HAProxy dan editor nano.

apt update && apt dist-upgrade -y && apt install haproxy nano -y

Nah setelah selesai, tahap selanjutnya kita akan memulai konfigurasi HAProxy, silahkan jalankan perintah berikut untuk mengetahui environment variabel yang ada di dalam server untuk load balancing, environment variabel ini berfungsi agar kita dapat mengetahui IP dari server yang akan menangani request web.

printenv | grep SERVER

mengapa kita menggunakan key SERVER ? ini dikarenakan kita menggunakan kata - kata server pada saat membuat nama container. Jika berhasil maka akan muncul output seperti berikut.

Screenshot from 2016-08-12 23-03-33.png

Kita akan menggunakan environment berikut untuk konfigurasi IP dan PORT.

  • SERVER1_BELAJAR_LOAD_BALANCING_PORT_8080_TCP_ADDR
  • SERVER2_BELAJAR_LOAD_BALANCING_PORT_8080_TCP_ADDR
  • SERVER1_BELAJAR_LOAD_BALANCING_PORT_8080_TCP_PORT
  • SERVER2_BELAJAR_LOAD_BALANCING_PORT_8080_TCP_PORT

Setelah mengetahui environment variabel nya, langkah selanjutnya silahkan jalankan perintah berikut untuk menghapus konfigurasi haproxy.

rm /etc/haproxy/haproxy.cfg

Kemudian jalankan perintah berikut untuk membuat dan mengedit konfigurasi haproxy.

nano /etc/haproxy/haproxy.cfg

Kemudian masukkan codingan seperti berikut.

global
    user daemon
    group daemon
    daemon
    log 127.0.0.1 daemon
    maxconn 4096
    chroot /var/lib/haproxy

defaults
    log global
    retries 2
    timeout connect 3000
    timeout server 5000
    timeout client 5000

listen http
    bind 0.0.0.0:80
    mode http
    option tcplog
    log global
    mode http
    option httplog
    option dontlognull
    balance roundrobin
    retries 3
    option redispatch
    maxconn 2000
    timeout connect 5000
    timeout client 50000
    timeout server 50000
    server web1 ${SERVER1_BELAJAR_LOAD_BALANCING_PORT_8080_TCP_ADDR}:${SERVER1_BELAJAR_LOAD_BALANCING_PORT_8080_TCP_PORT} check
    server web2 ${SERVER2_BELAJAR_LOAD_BALANCING_PORT_8080_TCP_ADDR}:${SERVER2_BELAJAR_LOAD_BALANCING_PORT_8080_TCP_PORT} check
    cookie web1 insert nocache
    cookie web2 insert nocache

listen stats
    bind 0.0.0.0:9000
    mode http
    stats enable
    stats hide-version
    balance
    timeout client 5000
    timeout connect 4000
    timeout server 30000
    stats uri /haproxy_stats
    stats realm HAProxy\ Statistics
    stats refresh 10s
    stats auth admin:admin

Dari konfigurasi diatas dapat dilihat bahwa kita membuat 2 konfigurasi untuk 2 server yaitu pada bagian server web1 dan server web2. Pada bagian tersebut kita akan mendeklarasikan IP dan PORT dari server yang akan kita buat load balancing. Untuk mempermudah monitoring load balancing, kita menggunakan monitor status dari HAProxy, konfigurasinya terdapat pada listen stats. Kemudian silahkan restart HAProxy dengan perintah.

/etc/init.d/haproxy restart

Jika berhasil akan muncul output seperti berikut.

Restarting haproxy haproxy                                                  [ OK ]

Uji Coba Load Balancing

Akhirnya selesai juga konfigurasinya, tahap terakhir adalah melakukan uji coba :D. Untuk melakukan uji coba, silahkan akses localhost:8083 maka jika berhasil akan muncul output seperti berikut.

Screenshot from 2016-08-13 15-35-33.png

Jika anda sering melakukan reload, maka sebanarnya load balancing tersebut akan berjalan, anda dapat melihatnya melalui output docker pada terminal, berikut adalah contohnya.

Screenshot from 2016-08-13 15-38-04.png

Dari gambar diatas dapat kita lihat bahwa terdapat 2 server yang menghandle request secara bergantian, yaitu server 1 dengan warna hijau dan server 2 dengan warna kuning. Anda juga dapat melakukan monitoring melalui url localhost:9001/haproxy_stats, jika diminta password silahkan masukkan username admin dan password admin, dan jika berhasil maka akan muncul output seperti berikut.

Screenshot from 2016-08-13 15-41-05.png

Uji Coba Load Balancing Dengan JMeter

Untuk melakukan uji coba kehandalan atau uji coba performance sebuah aplikasi, kita dapat menggunakan aplikasi JMeter. Silahkan download aplikasi tersebut lalu jalankan file ApacheJMeter.jar di dalam folder bin. Jika berhasil maka akan muncul output seperti berikut.

Screenshot from 2016-08-13 15-46-25.png

Lalu klik kanan pada test plan, pilih menu add lalu pilih threads(users) dan pilih menu thread. Pada bagian number of thread silahkan isikan angka 1000 seperti gambar berikut.

Screenshot from 2016-08-13 15-48-05.png

Kemudian pilih Thread Group lalu pilih menu add, pilih menu sampler dan pilih menu HTTP Request. Pada kolom Server Name or IP isikan localhost, pada port number isikan 8083 dan pada kolom path isikan / seperti gambar berikut.

Screenshot from 2016-08-13 15-51-13.png

Kemudian pilih kembali thread Group lalu pilih menu add, pilih menu listener dan pilih menu view results in table. Lalu silahkan pilih menu run dan pilih start maka secara otomatis JMeter akan melakukan request sebanyak 1000 request dalam 1 second, jika load balancing bekerja sesuai dengan harapan, beban bekerja secara merata pada tiap server dan spesifikasi perangkat komputer telah sesuai maka anda akan mendapatkan semua status request menjadi success. Berikut adalah output pada JMeter setelah melakukan test request.

Screenshot from 2016-08-13 15-57-22.png

Bagi anda yang ingin melihat source code codingan, silahkan lihat di Belajar Load Balancing. Sekian artikel mengenai belajar load balancing dan terima kasih :)

Pada artikel kali ini, penulis akan membahas mengenai pengalaman penulis ketika mengikuti sidang komprehensif paket 1 teknik informatika di universitas gunadarma. Paket 1 terdiri dari mata kuliah yang bisa dibilang sedikit agak susah, mengapa demikian ? dikarenakan terdapat pemrograman web yang katanya sering disuruh ngoding di tempat tapi sebenarnya itu kembali ke pengujinya.

Penulis mendapatkan surat sidang, disana dicantumkan bahwa penulis sidang pada tanggal 1 september 2016. Penulis berangkat bersama teman - teman seperjuangan yaitu adhib dan aviv. Kami berangkat dari stasiun pondok cina sekitar jam 05:30 pagi, dan Alhamdulillah sampai di cikini jam 6:15. Sesampai disana, kami makan terlebih dahulu dan melalukan persiapan untuk menghadapi sidang.

Briefing dimulai pada jam 07:00, biasanya skripsi naik ke lantai 2 sedangkan bagi mereka yang komprehensif naik ke lantai 5. Setelah diberikan arahan, tiba waktunya pembagian sk dan kartu sidang. Penulis dipanggil dan maju ke depan untuk mengambil sk. Disana telah tertera dosen penguji dari masing - masing mata kuliah yang akan diujikan. Berikut adalah dosen penguji penulis.

Nama Dosen Mata Kuliah
Suryadi SIS, Drs., MSc Teori Bahasa Dan Automata
Haryanto, SSi., MM Pemrograman Web
Maukar, Dr Rekayasa Perangkat Lunak

Ketiga dosen tersebut teryata berada pada lantai 6, akhirnya penulis menuju ke lantai 6. Disana terdapat panitia sidang, penulis langsung lapor ke bagian panitia sidang, lalu kita tunggu hingga dipanggil oleh bagian sidang. Kira -kira sekitar 20 menit, akhirnya penulis dipanggil oleh panitia sidang dan mempersilahkan masuk ke ruangan. Di dalam ruangan tersebut ketiga dosen tersebut telah hadir dan mereka duduk berseblahan. Berikut adalah percakapan pada saat sidang pemrograman web.

  • Pak Haryanto : ya rizki, apa perbedaan antara pemrograman biasa dan pemrograman web ?
  • Penulis : pemrograman biasa digunakan untuk membuat aplikasi pak, bisa aplikasi desktop, web dan mobile sedangkan pemrograman web biasanya untuk membuat sebuah aplikasi web pak.
  • Pak Haryanto : kenapa tampilan web di hp dan di komputer berbeda ?
  • Penulis : karena mereka menggunakan responsive design pak, biasanya menggunakan css
  • Pak Haryanto : css itu bukan sesuatu yang sakti, bagaimana dia bisa tahu bahwa kita menggunakan android untuk mengakses web tersebut ?
  • Penulis : nah disini nih mulai susah, penulis mulai mikir - mikir, sebenarnya yang bapak nya maksud mungkin gimana sih cara nya si server tau kalau yang ngakses web itu adalah perangkat android ? atau yang akses web itu adalah perangkat laptop. Akhirnya penulis menjawab user agent pak, nantinya di user agent akan disisipkan pada bagian header http.
  • Pak Haryanto : user agent itu juga bukan sesuatu yang sakti loh
  • Penulis : mencoba menjawab walaupun sedikit tidak yakin, sebenarnya kita bisa menggunakan meta yang ada di tag html pak, disana kita bisa mendeklarasikan berapa lebar dari device tersebut.
  • Pak Haryanto : kalau kamu bilang meta berarti kamu harus tau dong tentang struktur data meta, struktur data pada meta apa ?
  • Penulis : nah disini nih udah stack banget, penulis tidak bisa menjawab, akhirnya penulis bilang “saya tidak tahu pak”
  • Pak Haryanto : oke lanjut ya, perbedaan html dan php apa ?
  • html biasanya digunakan untuk antarmuka web pak, sedangkan php biasanya digunakan untuk melakukan sebuah proses misalnya perhitungan, koneksi ke database dan lain - lain pak.
  • Pak Haryanto : IP dari localhost apa ?
  • Penulis : 127.0.0.1 pak
  • Pak Haryanto : oke lanjut ke sebelah, sambil nunjuk ke pak Suryadi

Nah kali ini penulis disidang oleh pak Suryadi untuk mata kuliah teori bahasa dan automata.

  • Pak Suryadi : coba sebutkan grammer pada noam chomsky ?
  • Penulis : ada UG, CSG, CFG dan RG pak
  • Pak Suryadi : mesin nya ada apa aja ?
  • Penulis : UG -> Mesin turing, CSG -> linear bounded automata (LBA), CFG -> automata pushdown, RG -> Automata Hingga
  • Pak Suryadi : coba sebutkan dan jelaskan tuple pada RG ?
  • Penulis : S -> stata awal, M -> transisi, Vt -> himpunan input simbol, K -> himpunan input stata, Z -> stata penerima
  • Pak Suryadi : mengapa dikatakan stata penerima ?
  • Penulis : dikatakan stata penerima dikarena jika terdapat sebuah kalimat dan kalimat tersebut berakhir pada stata penerima maka kalimat tersebut diterima oleh mesin tersebut pak.
  • Pak Suryadi : kenapa diterima oleh mesin tersebut ?
  • Penulis : ya karena bahasa tersebut sesuai dengan grammer nya pak
  • Pak Suryadi : yap, mantap, saya kira kamu bakal bingung sama jawabannya, biasanya mahasiswa banyak yang kurang mengerti dibagian ini, sambil ketawa. Apa sih perbedaan nondeterministik dan deterministik ?
  • Penulis : kalau AHN (deterministik) dimana 1 input simbol hanya mempunyai 1 transisi sedangkan pada AHN (nondeterministik) dimana 1 input simbol bisa mempunyai banyak transisi.
  • Pak Suryadi : apakah Automata Hingga punya output ?
  • Penulis : nah ini emang gx ada di materi, akhirnya penulis jawab “tidak ada pak” dan teryata benar
  • Pak Suryadi : iya benar, bagaimana kita tahu kalau terjadi sebuah transisi ?
  • Penulis : terjadi sebuah transisi jika sebuah stata menerima input simbol pak, nah nantinya akan ada transisi antar stata, dimana transisi ini nantinya akan ada tabel yang mendefiniskan perpindahan antar state berdasarkan simbol pak.
  • Pak Suryadi : oke cukup, silahkan pindah ke samping, sambil nunjuk ke pak maukar.

Nah kali ini penulis disidang oleh pak Maukar untuk mata kuliah rekayasa perangkat lunak.

  • Pak Maukar : Apa yang kamu pelajari ?
  • Penulis : saya belajar mengenai tahapan pembuatan aplikasi pak
  • Pak Maukar : oke coba sebutkan model - model pada tahapan pembuatan aplikasi, saya kasih kata kunci yaitu spiral
  • Penulis : spiral, waterfall, incremental, v-model, prototype pak
  • Pak Maukar : coba jelasin tentang waterfall
  • Penulis : nah disini penulis jelasin panjang lebar sesuai dengan teori :D
  • Pak Maukar : oke, coba sebutkan macam - macam testing ?
  • Penulis : unit test, integrated test, system test, validated test dan disini penulis juga menjelaskan seluruh test tersebut.
  • Pak Maukar : kamu tau kan top down test dan bottom up test ? nah disini bapaknya bikin model kira - kira seperti berikut.

sidang.svg

Nah menurut kamu, mana yang lebih optimal, top down test atau bottom up test ? jika benar, saya kasih nilai plus buat kamu

  • Penulis : nah jadi tambah semangat buat nih buat sidang, hehehe. Disini penulis berfikir sebentar lalu penulis menjawab bottom up test pak
  • Pak Maukar : alasannya ?
  • Karena kita akan melakukan test module yang paling bawah terlebih dahulu pak, nah setelah module dibawah dilakukan test, baru module diatas nya kita lakukan test, dimana module diatasnya ini membutuhkan dependency dari module sebelumnya pak, Kemudian penulis membuat contoh seperti berikut.

sidang2.svg

Nah bisa dilihat pak, dari model diatas, kita akan melakukan test terhadap module 1, 2, 3 dan 4 terlebih dahulu pak, nah module 5 itu butuh module 1 dan 2 pak, jika kita tidak test module 1 dan 2 terlebih dahulu maka besar kemungkinan akan terjadi kesalahan pak apalagi module 5 membutuhkan module 1 dan 2 pak.

  • Pak Maukar : oke siip, boleh keluar

Dari dosen penguji diatas, penulis hanya mendapatkan kendala pada pweb saja tapi Alhamdulillah mendapatkan bantuan nilai plus pada saat sidang mata kuliah rekayasa perangkat lunak. Setelah selesai sidang, maka kita akan menunggu hasil sidang dan akan diumumkan hari itu juga. Pengumuman biasanya akan diumumkan sekitar pukul 14:00 atau 15:00. Pada saat Pengumuman, penulis dipanggil ke lantai 2 sebagai gelombang pertama, nah disana nantinya akan dibagi lagi menjadi kelompok - kelompok dan penulis termasuk ke dalam kelompok 2. Di gelombang 1 terdapat 3 kelompok dan Alhamdulillah ketiga kelompok tersebut lulus semua.

Yang harus dipersiapkan adalah materi dan kepahaman anda terhadap materi yang akan diujikan. Teori memang wajib anda kuasai tapi anda wajib paham akan materi tersebut karena terkadang mereka ingin tahu apakah anda telah paham tentang materi yang telah anda pelajari. Sekian mengenai pengalaman sidang komprehensif paket 1 teknik informatika universitas gunadarma 2016 dan terima kasih :D.

Pada artikel Belajar Vagrant, penulis sudah menulis sedikit mengenai tool - tool yang mempermudah kita dalam development sebuah aplikasi. Salah satu tool tersebut adalah vagrant, pada artikel sebelumnya penulis telah membahas mengenai berbagai masalah yang terjadi pada saat development sebuah aplikasi. Pada artikel ini, penulis akan mencoba membahas mengenai teknologi baru yang patut dicoba karena teknologi ini merupakan salah satu teknologi yang akan digunakan pada masa depan :D, teknologi itu adalah docker.

Apa Itu Docker ?

Docker adalah sebuah project open source yang ditujukan untuk developer atau sysadmin untuk membangun, mengemas dan menjalankan aplikasi dimana pun di dalam sebuah container.

Mungkin anda sedikit bingung dengan pengertian diatas dikarenakan terlalu sulit untuk membayangkan bagaimana pengembangan aplikasi yang sebenarnya. Docker berfungsi sebagai virtualisasi sebuah sistem operasi atau sebuah server atau sebuah web server atau bahkan sebuah database server, dimana dengan menggunakan virtualisasi ini, diharapkan developer dapat mengembangkan aplikasi sesuai dengan spesifikasi server atau dengan kata lain, jika kita mengembangkan sebuah aplikasi lalu kita jalankan pada komputer kita sendiri maka secara otomatis aplikasi akan berjalan dengan baik, nah bagaimana jika server yang akan menjalankan aplikasi kita memiliki banyak perbedaan dengan komputer kita seperti perbedaan sistem operasi, arsitektur processor dan sebagainya. Dengan menggunakan virtualisasi ini maka para developer lebih mudah untuk mengatur mengenai deployment atau menjalankan aplikasi di server production.

Sebelum kita membahas mengenai docker lebih lanjut, kita akan mencoba membahas sedikit mengenai docker dan vagrant. Docker dan vagrant merupakan tool yang sama atau dapat dikatakan merupakan tool developer yang mempunyai fungsi yang sama, akan tetapi meski memiliki fungsi yang sama terdapat beberapa perbedaan sehingga kita perlu menentukan tool yang terbaik untuk melakukan development sebuah aplikasi. Beberapa perbedaan dapat dilihat melalui tabel berikut.

comparefeat-dock-vagrant.png

gambar diatas dapat anda lihat disini. Dari gambar dapat dilihat bahwa terdapat banyak sekali perbedaan antara docker dan vagrant. Perbedaan yang sangat mencolok adalah docker menggunakan resource atau memory yang lebih sedikit ketimbang vagrant, ini dapat dilihat dari penggunaaan RAM, penggunaan images sistem operasi dan juga dapat dilihat perbedaannya, jika menggunakan vagrant maka kita wajib melakukan instalasi virtual machine seperti virtual box atau vmware, berbeda dengan docker menggunakan linux container sehingga kita tidak perlu melakukan instalasi virtual machine.

Arsitektur Docker

architecture-docker.svg

Gambar diatas merupakan arsitektur docker, dimana docker terdiri dari beberapa element yaitu docker client, docker daemon, docker container, docker images dan docker registry. Docker menggunakan teknologi client server untuk menghubungkan antara docker client dan docker daemon. Penulis akan menjelaskan sedikit mengenai istilah - istilah penting pada docker.

Docker Daemon

Docker daemon berfungsi untuk membangun, mendistribusikan dan menjalankan container docker. User tidak dapat langsung menggunakan docker daemon, akan tetapi untuk menggunakan docker daemon maka user menggunakan docker client sebagai perantara atau cli.

Docker Images

Docker images adalah sebuah template yang bersifat read only. Template ini sebenarnya adalah sebuah OS atau OS yang telah diinstall berbagai aplikasi. Docker images berfungsi untuk membuat docker container, dengan hanya 1 docker images kita dapat membuat banyak docker container.

Docker Container

Docker container bisa dikatakan sebagai sebuah folder, dimana docker container ini dibuat dengan menggunakan docker daemon. Setiap docker container disimpan maka akan terbentuk layer baru tepat diatas docker images atau base image diatasnya. Contohnya misalkan kita menggunakan image ubuntu, kemudian kita membuat sebuah container dari image ubuntu tersebut dengan nama ubuntuku, kemudian kita lakukan instalasi sebuah software misalnya nginx maka secara otomatis container ubuntuku akan berada diatas layer image atau base image ubuntu. Anda dapat membuat banyak docker container dari 1 docker images. Docker container ini nantinya dapat dibuild sehingga akan menghasilkan sebuah docker images, dan docker images yang dihasilkan dari docker container ini dapat kita gunakan kembali untuk membuat docker container yang baru.

Docker Registry

Docker registry adalah kumpulan docker image yang bersifat private maupun public yang dapat anda akses di docker hub. Dengan menggunakan docker registry, anda dapat menggunakan docker image yang telah dibuat oleh developer yang lain, sehingga mempermudahkan kita dalam pengembangan aplikasi.

Instalasi Docker

Untuk melakukan instalasi docker, silahkan update terlebih dahulu repository ubuntu anda dengan perintah.

sudo apt update

Kemudian lakukan update CA certificates dengan perintah.

sudo apt install apt-transport-https ca-certificates curl software-properties-common

Kemudian tambahkan GPG key dengan perintah.

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

Lalu silahkan lakukan verifikasi fingerprint dengan perintah

sudo apt-key fingerprint 0EBFCD88

Jika berhasil maka akan muncul output seperti berikut

pub   4096R/0EBFCD88 2017-02-22
      Key fingerprint = 9DC8 5822 9FC7 DD38 854A  E2D8 8D81 803C 0EBF CD88
uid                  Docker Release (CE deb) <docker@docker.com>
sub   4096R/F273FCD8 2017-02-22

Lalu tambahan repo docker seperti berikut

sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

Kemudian silahkan lakukan update kembali dengan perintah.

sudo apt update

Kemudian silahkan hapus docker yang lama jika anda pernah melakukan instalasi docker versi lama dengan perintah.

sudo apt purge lxc-docker

Lalu silahkan jalankan perintah berikut untuk melakukan instalasi docker.

sudo apt install docker-ce

lalu lakukan pengecekan status service docker dengan perintah.

sudo systemctl status docker

jika berhasil maka akan muncul output seperti berikut.

Screenshot from 2016-07-29 10-25-59.png

Agar kita dapat menggunakan docker tanpa sudo maka kita harus melakukan beberapa konfigurasi. Silahkan buat docker group dengan perintah berikut.

sudo groupadd docker

kemudian tambahkan user ke docker group dengan perintah.

sudo usermod -aG docker rizki

silahkan ganti rizki dengan user linux anda. Lalu silahkan restart komputer anda. Kita akan melakukan test docker dengan perintah.

docker run hello-world

Jika berhasil maka anda akan melihat output seperti gambar berikut.

Screenshot from 2016-07-30 09-38-04.png

Instalasi Docker Compose

Setelah melakukan instalasi docker engine atau core docker, langkah selanjutnya kita akan melakukan instalasi docker compose, apa itu docker compose ?

Docker compose berfungsi untuk menjalankan container docker secara bersamaan.

docker compose ini sangat berguna ketika aplikasi kita terpisah - pisah pada komputer yang berbeda, contohnya adalah aplikasi yang dibuat berada pada 1 container sedangkan database yang akan digunakan oleh aplikasi tersebut berada pada container yang lain. Ketika menggunakan docker compose maka kita dapat menjalankan kedua container tersebut secara bersamaan dan bahkan kita dapat melakukan link ke container yang kita inginkan.

Untuk melakukan instalasi docker compose silahkan jalankan perintah berikut untuk melakukan akses root.

sudo -s

kemudian jalankan perintah berikut.

curl -L https://github.com/docker/compose/releases/download/1.22.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose

Setelah selesai lalu beri hak akses eksekusi dengan perintah.

chmod +x /usr/local/bin/docker-compose

Lalu agar docker compose dapat diakses tanpa root, silahkan jalankan perintah berikut.

sudo chmod -R 777 /usr/local/bin/docker-compose

Kemudian lakukan pengecekan docker compose dengan perintah

docker-compose -version

Jika berhasil maka akan muncul output seperti berikut.

docker-compose version 1.22.0, build 9e633ef

Latihan Sails JS dengan Docker

Untuk mempercepat latihan, kita akan mencoba menggunakan Sails JS, apa itu Sails JS ?

Sails JS adalah salah satu framework mvc untuk node js.

Sails JS merupakan framework yang dikembangkan dari framework express js, dengan menggunakan scaffolding dari Sails JS maka Sails JS akan secara otomatis membuat project tanpa perlu membuat project dari awal. Sails JS telah menggunakan salah satu framework orm node js yaitu waterline sehingga mempermudah kita untuk melakukan migrasi antar database. Dan salah satu keunggulan dari Sails JS adalah mudahnya membuat API dengan menggunakan arsitektur REST.

Pada artikel ini, kita hanya akan membuat sebuah REST API dengan menggunakan Sails JS, dimana kita akan menggunakan database mariadb. Antara aplikasi dan database akan dibuatkan dua container yang berbeda, berikut adalah gambar arsitektur yang akan kita gunakan.

Arsitektur Docker Sails.svg

Setelah mengetahui arsitektur yang akan kita gunakan, hal yang pertama kali kita lakukan sekarang adalah melakukan instalasi Sails JS pada pc kita terlebih dahulu, karena Sails JS merupakan framework node js maka kita membutuhkan instalasi node js, bagi anda yang belum melakukan instalasi node js, silahkan lihat artikel instalasi perlengkapan coding node js . Untuk melakukan instalasi Sails JS silahkan jalankan perintah berikut.

npm -g install sails

Setelah selesai, kita akan membuat sebuah project dengan perintah.

sails new Belajar-Docker-SailsJS

Jika sudah, maka sails akan secara otomatis membuat sebuah project dengan nama Belajar-Docker-SailsJS. Kemudian silahkan buka dengan editor anda. Berikut adalah struktur folder projectnya.

Screenshot from 2016-07-31 11-39-03.png

Secara default, Sails JS menggunakan database local atau embedded database, karena kita ingin menggunakan database mariadb maka kita perlu melakukan instalasi module sails-mysql dengan perintah.

npm install sails-mysql --save

Kemudian silahkan buka file connections.js yang ada di dalam folder config lalu kita akan melakukan konfigurasi untuk koneksi ke database mariadb pada bagian berikut.

// someMysqlServer: {
//   adapter: 'sails-mysql',
//   host: 'YOUR_MYSQL_SERVER_HOSTNAME_OR_IP_ADDRESS',
//   user: 'YOUR_MYSQL_USER', //optional
//   password: 'YOUR_MYSQL_PASSWORD', //optional
//   database: 'YOUR_MYSQL_DB' //optional
// }

Karena kita belum mengetahui variabel apa saja yang dapat kita gunakan untuk melakukan koneksi database ke mariadb maka kita terlebih dahulu akan melakukan testing membuat container baru untuk mengetahui variabel environment dari database mariadb. Untuk membuat sebuah container silahkan jalankan perintah berikut.

docker run -d \
    --name latihan-container-mariadb \
    -e MYSQL_ROOT_PASSWORD=root \
    -e MYSQL_DATABASE=latihan \
    -e MYSQL_USER=rizki \
    -e MYSQL_PASSWORD=mufrizal \
    mariadb:10.1.16

Perintah diatas berfungsi untuk membuat sebuah container baru dengan nama latihan-container-mariadb, dimana container ini kita buat berdasarkan image mariadb dengan versi 10.1.16 dan pada saat pembuatan container ini, kita dapat melakukan set environment seperti database, password user dan lain sebagainya. Jika anda belum memiliki image mariadb maka secara otomatis, docker akan melakukan pull images mariadb yang berasal dari docker hub.

Jika telah berhasil, silahkan lakukan pengecekan docker image dengan perintah.

docker images

Jika berhasil maka akan muncul output seperti berikut.

REPOSITORY    TAG        IMAGE ID        CREATED         SIZE
mariadb       10.1.16    9a0138c02438    38 hours ago    391.6 MB

kemudian lakukan pengecekan container dengan perintah.

docker ps

Jika berhasil maka akan muncul output seperti berikut.

CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS               NAMES
01444c38b227        mariadb:10.1.16     "docker-entrypoint.sh"   4 hours ago         Up 4 hours          3306/tcp            latihan-container-mariadb

Anda juga dapat mengecek container mana saja yang sedang jalan dengan menggunakan perintah.

docker ps -a

Langkah selanjutnya kita akan membuat sebuah container untuk aplikasi, dimana nantinya aplikasi ini akan melakukan koneksi ke mariadb yang berada pada container sebelumnya. Silahkan jalankan perintah berikut untuk membuat container aplikasi.

docker run --link latihan-container-mariadb:mariadb --name latihan-container-aplikasi -it node:6.3.1 bash

Perintah diatas berfungsi untuk membuat container dengan nama latihan-container-aplikasi, dimana container ini melakukan link ke container latihan-container-mariadb, container ini menggunakan image node:6.3.1. Setelah jalan, maka anda dapat melakukan akses container melalui terminal anda, lalu silahkan lakukan pengecekan environment mariadb dengan perintah.

printenv | grep MARIADB

Jika berhasil maka akan muncul output seperti berikut.

Screenshot from 2016-07-31 21-49-33.png

Setelah mengetahui variabel environment nya, kita balik lagi ke aplikasinya. Silahkan ubah codingan yang ada di dalam file connections.js seperti berikut.

MariadbServer: {
  adapter: 'sails-mysql',
  host: process.env.MARIADB_PORT_3306_TCP_ADDR,
  user: process.env.MARIADB_ENV_MYSQL_USER,
  password: process.env.MARIADB_ENV_MYSQL_PASSWORD,
  database: process.env.MARIADB_ENV_MYSQL_DATABASE
},

Selanjutnya silahkan buka file models.js di dalam folder config lalu ubah codingannya menjadi seperti berikut.

module.exports.models = {
  connection: 'MariadbServer',
  migrate: 'safe'
};

Setelah selesai melakukan semua konfigurasi tersebut, langkah selanjutnya adalah kita akan mencoba membuat API, untuk membuat API dengan menggunakan sails, silahkan jalankan perintah berikut.

sails generate api barang

maka secara otomatis sails akan membuat controller dan model, silahkan buka file Barang.js di dalam folder models kemudian ubah codingannya menjadi seperti berikut.

/**
 * Barang.js
 *
 * @description :: TODO: You might write a short summary of how this model works and what it represents here.
 * @docs        :: http://sailsjs.org/documentation/concepts/models-and-orm/models
 */

module.exports = {
  attributes: {
    idBarang: {
      type: 'integer',
      required: true,
      primaryKey: true,
      autoIncrement: true,
      columnName: 'id_barang'
    },
    namaBarang: {
      type: 'string',
      required: true,
      size: 50,
      columnName: 'nama_barang'
    },
    jenisBarang: {
      type: 'string',
      enum: ['cair', 'gas', 'padat'],
      required: true,
      columnName: 'jenis_barang'
    },
    hargaBarang: {
      type: 'integer',
      required: true,
      columnName: 'harga_barang'
    },
    tanggalKadaluarsa: {
      type: 'date',
      required: true,
      columnName: 'tanggal_kadaluarsa'
    }
  }
};

Codingan diatas tidak akan penulis bahas dikarenkan nanti akan penulis jelaskan pada artikel berikutnya :). Langkah selanjutnya silahkan buat sebuah file Dockerfile di dalam root folder, kemudian isikan codingan seperti berikut.

FROM node:alpine

RUN apk update && apk add ca-certificates wget openssl && update-ca-certificates
ENV DOCKERIZE_VERSION v0.6.0
RUN wget https://github.com/jwilder/dockerize/releases/download/$DOCKERIZE_VERSION/dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz \
    && tar -C /usr/local/bin -xzvf dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz
RUN npm cache clean --force
RUN npm install -g npm
RUN npm install -g sails
RUN mkdir /belajar-sailsjs-docker
WORKDIR /belajar-sailsjs-docker
ADD . /belajar-sailsjs-docker
RUN rm -rf node_modules
RUN npm install

Untuk dockerfile terdapat beberapa perintah yaitu.

  • ADD : biasanya digunakan untuk melakukan copy file atau folder ke suatu direktory
  • CMD : berfungsi untuk menjalankan sebuah perintah yang spesifik
  • ENV : berfungsi untuk mendeklarasikan environment variabel
  • FROM : berfungsi untuk mendeklarasikan base image yang akan digunakan.
  • WORKDIR : berfungsi untuk mendefinisikan folder yang akan kita gunakan.
  • MAINTAINER : berfungsi untuk mendeklarasikan nama author
  • RUN : berfungsi untuk menjalankan perintah - perintah bash

Nah dari perintah - perintah diatas, penulis akan mendefinisikan arti dari codingan diatas.

  • baris 1 : berfungsi untuk mendeklarasikan bahwa kita menggunakan image node dengan versi 6.3.1
  • baris 2 : berfungsi untuk melakukan update dan instalasi software wget
  • baris 3 : berfungsi untuk mendeklarasikan environment dockerize
  • baris 4 : berfungsi untuk menjalankan perintah wget
  • baris 5 : berfungsi untuk melakukan instalasi sails
  • baris 6 : berfungsi untuk membuat folder/direktory untuk project
  • baris 7 : berfungsi untuk mendefiniskan folder yang akan kita gunakan
  • baris 8 : berfungsi untuk mengcopy seluruh file ke dalam folder belajar-sailsjs-docker
  • baris 9 : berfungsi untuk menghapus folder node_modules
  • baris 19 : berfungsi untuk melakukan instal dependency yang diperlukan oleh project

Karena kita tidak ingin file - file node_modules, .tmp dicopy ke docker maka kita perlu membuat file dockerignore. Silahkan buat sebuah file .dockerignore lalu isikan codingan seperti berikut.

.tmp
*.md
.editorconfig

Setelah selesai, langkah selanjutnya kita akan membuat konfigurasi docker-compose, untuk membuat konfigurasi docker-compose silahkan buat sebuah file docker-compose.yml pada root project lalu isikan dengan codingan berikut.

mariadb:
  image: mariadb:10.1.16
  environment:
    - MYSQL_ROOT_PASSWORD=root
    - MYSQL_DATABASE=microservicesailsjs
    - MYSQL_USER=rizki
    - MYSQL_PASSWORD=mufrizal

belajar-sailsjs-docker:
  image: rizki.mufrizal/belajar-docker-sailsjs
  ports:
    - "1337:1337"
  volumes:
    - .:/belajar-sailsjs-docker
  working_dir: /belajar-sailsjs-docker
  command: sh ./install.sh
  links:
    - mariadb

Bisa dilihat bahwa kita menggunakan konfigurasi docker compose versi 1, di dalam konfigurasi tersebut terdapat dua service/container yang akan dijalankan yaitu mariadb dan belajar-sailsjs-docker. Container belajar-sailsjs-docker mempunyai link terhadap container mariadb, sehingga container mariadb wajib dijalankan terlebih dahulu. Agar container mariadb dapat dijalankan terlebih dahulu maka kita dapat menggunakan dockeriza, aplikasi sails harus dijalankan dengan perintah sails lift maka di dalam command kita menggunakan perintah sails lift. Pada codingan diatas kita menggunakan perintah sh ./install.sh karena kita membutuhkan beberapa command bash, maka silahkan anda buat sebuah file install.sh di dalam root project, lalu masukkan codingan seperti berikut.

dockerize -wait tcp://db:3306
npm cache clean --force
npm install -g npm
npm install
sails lift

Setelah selesai, langkah selanjutnya kita akan melakukan build image terlebih dahulu dengan perintah.

docker build -t rizki.mufrizal/belajar-docker-sailsjs .

perintah diatas akan membuat sebuah image dengan nama rizki.mufrizal/belajar-docker-sailsjs dimana image ini dibuild berdasarkan konfigurasi dari file Dockerfile. Lalu selanjutnya kita akan menjalankan 2 container secara sekaligus dengan menggunakan docker compose, silahkan jalankan perintah berikut.

docker-compose up

Silahkan tunggu hingga aplikasi berjalan, jika berhasil maka akan muncul output seperti berikut.

Screenshot from 2016-07-31 23-52-13.png

NOTE : jika masih terdapat error pada saat docker compose dijalankan, silahkan matikan kedua container tersebut dengan perintah ctrl + c kemudian jalankan kembali docker tersebut, hal ini disebabkan karena konfigurasi mariadb pada saat pertama kali dijalankan memerlukan waktu yang lebih lama dibandingkan dengan start up aplikasi sails.

Menghapus Image Dan Container

Jika anda tidak memerlukan lagi docker image, anda dapat menghapusnya berdasarkan ID image, misalnya penulis menjalankan perintah.

docker images

Jika berhasil maka akan muncul output seperti berikut.

REPOSITORY    TAG        IMAGE ID        CREATED         SIZE
mariadb       10.1.16    9a0138c02438    38 hours ago    391.6 MB

untuk menghapus image tersebut, anda dapat menggunakan perintah.

docker rmi 9a0138c02438

untuk menghapus seluruh image, anda dapat menggunakan perintah.

docker rmi $(docker images -q)

Untuk container juga sama, hanya saja container menggunakan sintak yang berbeda, jika image menggunakan perintah rmi maka container menggunakan perintah rm, akan tetapi jika container masih aktif maka anda perlu mematikan container terlebih dahulu dengan perintah stop. Comtohnya jika penulis menjalankan perintah.

docker ps -a

maka akan muncul output

CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS               NAMES
01444c38b227        mariadb:10.1.16     "docker-entrypoint.sh"   4 hours ago         Up 4 hours          3306/tcp            latihan-container-mariadb

anda dapat mematikannya dengan perintah.

docker stop 01444c38b227

lalu menghapus container tersebut dengan perintah

docker rm 01444c38b227

untuk mematikan seluruh container, anda dapat menggunakan perintah.

docker stop $(docker ps -a -q)

untuk menghapus seluruh container, anda dapat menggunakan perintah.

docker rm $(docker ps -a -q)

Uji Coba Aplikasi

Setelah panjang nulis artikel, akhirnya kita dapat melakukan uji coba :D. Untuk melakukan uji coba aplikasi, silahkan akses http://localhost:1337 pada browser anda, jika berhasil maka akan muncul output seperti gambar berikut.

Screenshot from 2016-07-31 23-57-07.png

Ini artinya, aplikasi yang telah kita buat telah berjalan dengan baik. Langkah selanjutnya kita akan melakukan uji coba REST API nya, silahkan buka postman, lalu konfigurasikan seperti berikut.

Screenshot from 2016-08-01 00-04-30.png

Lalu tekan tombol send, maka data akan tersimpan, untuk mengetahui apakah data telah disimpan atau tidak silahkan akses http://localhost:1337/barang pada browser anda, jika berhasil maka akan muncul output seperti gambar berikut.

Screenshot from 2016-08-01 00-08-24.png

Bagi anda yang ingin melihat contoh project docker yang lain, silahkan lihat di Belajar Docker. Sekian artikel mengenai belajar docker dan terima kasih :)

Beberapa hari yang lalu, penulis iseng - iseng lihat sebuah framework node js yang katanya sedang naik daun. Awalnya penulis agak bingung karena di tutorialnya dijelaskan mulai dari server dan client bisa dijadikan menjadi 1 project tanpa perlu bantuan API. Selama ini, penulis biasanya akan membuat API terlebih dahulu lalu membuat client untuk dapat melakukan akses API tersebut, biasanya client yang digunakan adalah angular js atau vue js. Berbeda dengan meteor, dimana client yang terdapat di dalam project meteor dapat langsung memanggil method yang berada pada server.

Apa Itu Meteor ?

Meteor adalah sebuah platform yang dibangun di atas Node JS untuk membuat aplikasi web real-time.

Karena meteor dibangun diatas node js maka kita dapat membuat aplikasi server dan client. Meteor js mendukung beberapa templating yang dapat kita gunakan yaitu Blaze, Angular js (1), Angular 2 dan React. Pada artikel kali ini, penulis akan mencoba membahas mengenai templating blaze, mengapa demikian ? dikarenakan jika anda menggunakan templating seperti angular js maka anda wajib mengerti terlebih dahulu cara kerja angular js :D. Mulai dari server hingga client, kita akan menggunakan bahasa pemrograman javascript, dan javascript yang akan kita gunakan adalah ES6, tapi browser kita masih menggunakan ES5 gimana dong ? tidak perlu khawatir karena meteor akan secara otomatis melakukan convert dari ES6 menjadi ES5.

Instalasi Meteor Dan Setup Project

Jika anda penggunakan keluarga GNU/Linux maka bersyukurlah karena instalasi meteor sangatlah mudah, silahkan jalankan perintah berikut untuk melakukan instalasi meteor.

curl https://install.meteor.com/ | sh

Bagi anda pengguna windows silahkan download installernya di install meteor. Jika berhasil, maka akan muncul output seperti berikut.

Screenshot from 2016-07-11 21-30-30.png

Oke, tahap selanjutnya kita akan mencoba membuat project sederhana dengan menggunakan meteor. Project yang akan kita buat adalah aplikasi chatting sederhan dengan menggunakan meteor, template yang akan kita gunakan adalah blaze. Silahkan jalankan perintah berikut untuk membuat project dengan menggunakan meteor.

meteor create Belajar-Meteor

Maka secara otomatis, meteor akan membuat sebuah project dengan nama Belajar-Meteor. Lalu akses folder project dengan menggunakan terminal anda. Lalu jalankan perintah berikut untuk menjalankan project yang telah kita buat.

meteor

Maka akan muncul output berikut pada terminal anda.

[[[[[ ~/Documents/Meteor-Project/Belajar-Meteor ]]]]]

=> Started proxy.                             
=> Started MongoDB.                           
=> Started your app.                          

=> App running at: http://localhost:3000/

Silahkan akses http://localhost:3000/ pada browser anda, jika berhasil maka akan muncul output seperti berikut.

Screenshot from 2016-07-11 21-40-34.png

Menambah Package Dan Mengatur Tampilan

Meteor telah menyediakan banyak package, package yang anda perlukan dapat anda temukan di Atmosphere. Pada artikel kali ini, kita akan mencoba menggunakan bootstrap 4 untuk memperindah tampilannya, karena bootstrap 4 masih alpha maka mereka masih banyak menggunakan scss sebagai css preprocessor mereka. Untuk dapat menggunakan package sass, silahkan akses folder project anda kembali lalu jalankan perintah berikut untuk menghapus standard minifier css.

meteor remove standard-minifier-css

Lalu jalankan tambahkan package minifier autoprefixer dengan perintah.

meteor add seba:minifiers-autoprefixer

Tahap selanjutnya, tambahkan package sass yang kita butuhkan dengan perintah.

meteor add fourseven:scss

Silahkan rename file main.css menjadi main.scss yang terdapat di dalam folder client, lalu masukkan codingan seperti berikut.

@import "{}/node_modules/bootstrap/scss/bootstrap.scss";

Codingan diatas berfungsi untuk melakukan import bootstrap ke project meteor yang telah kita buat. Kemudian silahkan buka file main.js yang ada di folder client, dan ubah codingannya menjadi seperti berikut.

import '../imports/ui/chat';
import 'bootstrap';

Jika tadi kita telah melakukan import library bootstrap dengan extensi scss, maka untuk melakukan import bootstrap dengan extensi js cukup dengan melakukan import pada file main.js. Lalu buka file main.html dan ubah codingan htmlnya menjadi seperti berikut.

<head>
    <title>Belajar Meteor</title>
</head>

Langkah selanjutnya, silahkan buat folder imports/ui/ kemudian buatlah 2 file di dalam folder tersebut yaitu chat.js dan chat.html. Meteor tidak memiliki suatu struktur folder yang disepakati maka oleh karena itu, anda dapat membuat struktur project berdasarkan keinginan anda. Folder imports/ui adalah folder untuk semua codingan bagian client, dimana nantinya file - file yang ada disini akan kita import ke file main.js yang berada pada folder client. Buka file chat.js kemudian masukkan codingan seperti berikut.

import './chat.html';

Kemudian untuk file chat.html silahkan isikan codingan seperti berikut.

<body>
    <h1>Welcome to Meteor!</h1>

    {{> hello}}
</body>

<template name="hello">
    <div class="jumbotron">
        <h1 class="display-3">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="m-y-md">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <p class="lead">
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
        </p>
    </div>
</template>

Kemudian silahkan akses browser anda, dan hasilnya akan muncul seperti berikut :D.

Screenshot from 2016-07-11 22-18-58.png

Membuat Collections

Secara default, meteor menggunakan database mongodb. Apakah kita diharuskan melakukan instalasi mongodb ? jawabannya adalah tidak, dikarenakan secara default meteor telah membuat database mongodb di dalam folder project anda. Jika anda buka folder .meteor yang di hidden maka anda dapat melihat bahwa database mongodb terdapat di dalam folder local/db seperti gambar berikut.

Screenshot from 2016-07-11 22-53-52.png

Collection disini sebenarnya adalah sesuatu yang sederhana, dimana collection ini sama seperti tabel jika kita berada pada database yang berbasis RDBMS, hanya saja collection disini berbeda dengan pada tabel biasa dimana collection ini dapat kita gunakan tanpa perlu mendefinisikan column apa saja yang akan kita gunakan. Pada tutorial ini, kita akan menggunakan 4 column yang berada pada collection chats diantaranya adalah:

  • id : string
  • nama : string
  • pesan : string
  • waktu : date

Langkah selanjutnya silahkan buat folder imports/api kemudian buat sebuah file chats.js lalu tambahkan codingan seperti berikut.

import { Mongo } from 'meteor/mongo';

export const Chats = new Mongo.Collection('chats');

Codingan diatas berfungsi untuk membuat sebuah collection chats, kemudian kita lakukan export agar dapat digunakan oleh file javascript yang lain. Lalu silahkan buka file main.js yang berada pada folder server lalu ubah codingannya menjadi seperti berikut.

import { Meteor } from 'meteor/meteor';
import { Chats } from '../imports/api/chats';

Meteor.startup(() => {
  Chats.remove({});
  if (Chats.find().count() === 0) {
    const chats = [{
      'nama': 'rizki',
      'pesan': 'hy...',
      'waktu': new Date()
    }, {
      'nama': 'mufrizal',
      'pesan': 'hy juga...',
      'waktu': new Date("October 13, 2015 11:13:00")
    }];

    chats.forEach((chat) => {
      Chats.insert(chat)
    });
  }

});

Codingan diatas berfungsi untuk melakukan insert data jika data yang terdapat di dalam collection chat tidak tersedia. Hal ini kita lakukan untuk melihat data yang akan kita tampilkan nantinya. Lalu buka kembali file chat.js dan ubah codingannya menjadi seperti berikut.

import { Template } from 'meteor/templating';
import { Chats } from '../api/chats';

import './chat.html';

Template.body.helpers({
  chats() {
    return Chats.find({}, {
      sort: {
        waktu: -1
      }
    });
  }
});

Codingan diatas berfungsi untuk mengambil data chat, dimana data chat ini akan bersifat realtime, mengapa demikian ? dikarenakan kita melalukan akses data tersebut berada di dalam method helpers milik meteor, data tersebut akan tersimpan di dalam variabel chats. Kemudian silahkan buka file chat.html lalu ubah codingannya menjadi seperti berikut.

<body>
  <h1 style="text-align: center">Aplikasi Chat Sederhana</h1>
    <div class="container">
        {{#each chats}}
            {{> tabelchat}}
        {{/each}}
    </div>
</body>

<template name="tabelchat">
    <div class="card card-block">
        <h4 class="card-title">{{nama}} | {{waktu}}</h4>
        <p class="card-text">{{pesan}}</p>
    </div>
</template>

Jika berhasil, maka outputnya akan seperti berikut.

Screenshot from 2016-07-11 23-37-54.png

Membuat Forms Dan Events

Untuk membuat form sama seperti membuat form biasa, kita dapat melakukan submit, click dan sebagainya. Pada tutorial kali ini, penulis ingin menggunakan fungsi submit pada form untuk mengirim pesan. Untuk mendeteksi adanya event submit dari user maka kita harus menggunakan attribut id atau class yang ada pada html, penulis akan menggunakan attribut id untuk membuat event submit. Silakan buka file chat.html yang berada di dalam folder imports/ui kemudian ubah codingannya menjadi seperti berikut.

<body>
    <h1 style="text-align: center">Aplikasi Chat Sederhana</h1>
    <div class="container">
        {{#each chats}}
            {{> tabelchat}}
        {{/each}}

        <form id="form-kirim-pesan" class="form-inline">
            <div class="form-group">
                <input type="text" class="form-control" name="nama" placeholder="Masukkan Nama Anda">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" name="pesan" placeholder="Masukkan Pesan Anda">
            </div>
            <button type="submit" class="btn btn-primary">Kirim</button>
        </form>
    </div>
</body>

<template name="tabelchat">
    <div class="card card-block">
        <h4 class="card-title">{{nama}} | {{waktu}}</h4>
        <p class="card-text">{{pesan}}</p>
    </div>
</template>

Bisa kita lihat bahwa codingan diatas terdapat id form-kirim-pesan yang nantinya akan kita gunakan untuk mendeteksi event submit sebuah form, dan deklarasikan nama setiap text input agar kita dapat mengambil data dari inputan tersebut. Langkah selanjutnya silahkan buka file chat.js yang berada di dalam folder imports/ui lalu ubah codingannya menjadi seperti berikut.

import { Template } from 'meteor/templating';
import { Chats } from '../api/chats';

import './chat.html';

Template.body.helpers({
  chats() {
    return Chats.find({}, {
      sort: {
        waktu: -1
      }
    });
  }
});

Template.body.events({
  'submit #form-kirim-pesan'(event) {
    event.preventDefault();

    Chats.insert({
      'nama': event.target.nama.value,
      'pesan': event.target.pesan.value,
      'waktu': new Date()
    });

    event.target.nama.value = '';
    event.target.pesan.value = '';
  }
});

Nah disini kita mendeklarasikan event submit untuk id form-kirim-pesan, kemudian untuk mengambil inputan dari user, kita dapat menggunakan variabel event.target, setelah mendapatkan valuenya, value tersebut kita simpan ke dalam collection yang telah kita buat. Silahkan anda jalankan kembali project yang telah anda buat, jika berhasil silahkan jalankan di 2 browser, misalnya disini penulis menjalankan di 2 browser yang berbeda yaitu di chromium dan firefox developer berikut adalah hasilnya.

Screenshot from 2016-07-12 00-13-06.png

Deploy Aplikasi Meteor Ke OpenShift

Melakukan deploy aplikasi meteor merupakan sesuatu yang lumayan susah, mengapa demikian ? dikarenakan beberapa hosting tidak menyediakan support untuk meteor. Penulis beberapa kali mencari referensi, termasuk ke heroku akan tetapi repository yang dapat kita gunakan rata - rata masih belum mendukung meteor 1.3, ada yang mendukung tapi kita diwajibkan untuk melakukan verifikasi kartu kredit. Akhirnya, setelah lama mencari referensi, OpenShift merupakan pilihan yang tepat karena didukung oleh repository dan ketersediaan database mongodb :D. Bagi anda yang belum melakukan konfigurasi OpenShift bisa dilihat di artikel belajar membuat cloud storage dengan owncloud.

Untuk melakukan deploy project meteor ke OpenShift, kita akan menggunakan repository meteor-openshift milik om jeeeyul. Tahap pertama adalah, kita akan membuat cartridge baru pada OpenShift dengan perintah.

rhc app create belajarmeteor \
  nodejs-0.10 \
  https://raw.githubusercontent.com/icflorescu/openshift-cartridge-mongodb/master/metadata/manifest.yml

Jika berhasil maka akan muncul output seperti berikut.

The cartridge
'https://raw.githubusercontent.com/icflorescu/openshift-cartridge-mongodb/master/metadata/manifest.yml'
will be downloaded and installed

Application Options
-------------------
Domain:     mufrizal
Cartridges: nodejs-0.10, https://raw.githubusercontent.com/icflorescu/openshift-cartridge-mongodb/master/metadata/manifest.yml
Gear Size:  default
Scaling:    no

Creating application 'belajarmeteor' ... Starting MongoDB...
done

  MongoDB 3.2.7 installed - use $MONGODB_URL environment variable to connect your application.
MongoDB started.

Waiting for your DNS name to be available ... done

Cloning into 'belajarmeteor'...
The authenticity of host 'belajarmeteor-mufrizal.rhcloud.com (54.175.169.24)' can't be established.
RSA key fingerprint is SHA256:FeJCkIUL7D41FMGNtM5NYM4XoboxZGYEqH0WcAmOX+I.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'belajarmeteor-mufrizal.rhcloud.com,54.175.169.24' (RSA) to the list of known hosts.

Your application 'belajarmeteor' is now available.

  URL:        http://belajarmeteor-mufrizal.rhcloud.com/
  SSH to:     5783f2817628e1c1be0000b7@belajarmeteor-mufrizal.rhcloud.com
  Git remote: ssh://5783f2817628e1c1be0000b7@belajarmeteor-mufrizal.rhcloud.com/~/git/belajarmeteor.git/
  Cloned to:  /home/rizki/belajarmeteor

Run 'rhc show-app belajarmeteor' for more details about your app.

Lalu silahkan akses folder belajarmeteor lalu jalankan perintah berikut untuk menghapus konfigurasi openshift.

git rm -rf * .openshift

Kemudian jalankan perintah berikut untuk fetch meteor bundle.

git remote add meteor-openshift -m master git@github.com:jeeeyul/meteor-openshift.git
git pull -s recursive -X theirs meteor-openshift master

Jika terjadi warning seperti ini.

warning: no common commits
remote: Counting objects: 72, done.
remote: Total 72 (delta 0), reused 0 (delta 0), pack-reused 72
Unpacking objects: 100% (72/72), done.
From github.com:jeeeyul/meteor-openshift
 * branch            master     -> FETCH_HEAD
 * [new branch]      master     -> meteor-openshift/master
fatal: refusing to merge unrelated histories

Maka jalankan perintah pull seperti berikut.

git pull -s recursive -X theirs meteor-openshift master --allow-unrelated-histories

Jika sudah, silahkan akses kembali directori folder project meteor anda, lalu jalankan perintah

meteor build path/to/your/openshift-appname --directory --server-only

Berikut adalah contoh jika penulis menggunakan perintah diatas.

meteor build /home/rizki/belajarmeteor --directory --server-only

Langkah selanjutnya silahkan akses lagi folder repository openshift anda, lalu jalankan perintah berikut untuk melakukan deploy ke openshift.

git add --all && git commit -m "deploy meteor ke openshift" && git push

Jika sukses maka akan muncul output seperti berikut di terminal anda.

remote: Starting NodeJS cartridge
remote: Mon Jul 11 2016 15:40:13 GMT-0400 (EDT): Starting application 'belajarmeteor' ...
remote: Waiting for application port (8080) become available ...
remote: Found 127.9.223.1:8080 listening port
remote: 
remote: [meteor-openshift] Node.js version: 0.10.43
remote: [meteor-openshift] http://belajarmeteor-mufrizal.rhcloud.com/ is ready!
remote: -------------------------
remote: Git Post-Receive Result: success
remote: Activation status: success
remote: Deployment completed with status: success
To ssh://5783f2817628e1c1be0000b7@belajarmeteor-mufrizal.rhcloud.com/~/git/belajarmeteor.git/
   77dc3eb..ae4f2d6  master -> master

Berikut adalah output dari aplikasinya.

Screenshot from 2016-07-12 02-42-28.png

Aplikasi chat sederhana dapat anda akses di https://belajarmeteor-mufrizal.rhcloud.com/. Untuk source code nya silahkan lihat di belajar meteor. Sekian artikel mengenai belajar meteor dan terima kasih :)

Apa Itu Vue JS ?

Vue js adalah salah satu framework javascript. Vue Js merupakan framework untuk kebutuhan front end dari sebuah project.

Vue js merupakan salah satu framework yang banyak digunakan. Jika anda telah terbiasa dengan menggunakan angular js, maka untuk melakukan migrasi ke vue js tidak lah terlalu susah karena mereka mempunyai kemiripan di bagian sintak, hanya saja angular js memiliki development stack yang lebih rumit dibandingkan dengan vue js :). Bagi anda yang penasaran dengan angular js, silahkan lihat di artikel belajar angular js. Vue js juga menggunakan fitur data binding sama seperti angular js. Jika di angular js kita menggunakan fungsi controller, maka di vue js kita akan menggunakan pendekatan dom yaitu kita akan menggunakan id, name atau class dari suatu component html. Vue js juga memiliki component routing yaitu vue-router, akan tetapi bagian router akan dibahas pada artikel selanjutnya :). Pada artikel ini, penulis hanya akan memberikan contoh sederhana vue js dengan menggunakan ecmascript 5 (ES5).

Membuat Hello Word Dengan Vue JS

Seperti biasa, sebelum menggunakan sebuah framework, kita akan melakukan test hello word terlebih dahulu untuk mempermudah pemahaman tentang alur kerja dari sebuah framework yang akan kita gunakan :D. Untuk mendownload dependency, kita akan menggunakan bower. Bagi anda yang masing bingung dengan bower, silahkan baca di artikel Instalasi Perlengkapan Coding Node JS. Silahkan buat sebuah folder dengan nama Belajar-VueJS kemudian akses folder tersebut dengan menggunakan terminal lalu jalankan perintah berikut.

bower init

Kemudian silahkan isi konfigurasinya seperti berikut.

Screenshot from 2016-07-01 08-01-54.png

Lalu silahkan jalankan perintah berikut untuk mendownload dependency yang kita butuhkan seperti vue js dan bootstrap.

bower install bootstrap vue --save

Setelah selesai, silahkan buat sebuah file index.html di dalam folder Belajar-VueJS kemudian isikan codingan seperti berikut.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Belajar Vue JS</title>

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
        <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css" type="text/css">
    </head>
    <body>

        <div class="container" id="belajar">
            <div class="row">
                <div class="col-lg-3">
                    <div class="form-group">
                        <label>Nama</label>
                        <input type="text" class="form-control" placeholder="Masukkan Nama Anda" v-model="nama"/>
                    </div>

                    <h2>Hello {{ nama }}</h2>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="./bower_components/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="./bower_components/vue/dist/vue.min.js"></script>
        <script type="text/javascript" src="./app.js"></script>
    </body>
</html>

Dari codingan diatas dapat kita lihat, kita melakukan inisialisasi project vue dengan menggunakan id pada html. Disini penulis menggunakan id belajar sebagai root dari project. Jika pada angular kita mengenal dengan ng-model maka pada vue js kita mengenal dengan yang namanya v-model, fungsinya sama yaitu sebagai model. Pada v-model, terdapat variabel nama, dimana variabel nama ini dapat kita tampilkan dengan menggunakan sintak double kurung kurawal {{ }} .

Setelah selesai, silahkan buat sebuah file app.js kemudian isikan codingan seperti berikut.

'use strict';

new Vue({
  el: '#belajar'
});

Nah cukup sederhana, kita bisa melihat bahwa codingan diatas melakukan inisialisasi element dengan menggunakan variabel id belajar, sehingga view yang tadi akan dikenali sebagai project vue js. Setelah selesai, seperti biasa kita akan menggunakan bantuan http-server untuk menjalankan file index.html. Bagi anda yang belum melakukan instalasi http-server, silahkan jalankan perintah berikut.

 npm install -g http-server

Setelah selesai, jalankan perintah berikut pada root project untuk menjalankan http-server.

http-server

Jika berhasil, maka di terminal akan muncul output seperti berikut.

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
Hit CTRL-C to stop the server

Kemudian silahkan akses http://127.0.0.1:8080 pada browser anda.

Screenshot from 2016-07-01 08-01-55.png

Membuat CRUD Sederhana Dengan Vue JS

Untuk membuat crud, kita akan menggunakan data array pada javascript sehingga data ini hanya bersifat sementara. Untuk mempersingkat artikel, silahkan ubah codingan yang berada pada file index.html seperti berikut.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Belajar Vue JS</title>

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
        <link rel="stylesheet" href="./dist/css/bootstrap.min.css" type="text/css">
    </head>
    <body id="belajar">

        <div class="container">
            <div class="row">
                <div class="col-lg-2">
                    <div class="form-group">
                        <label>Nama</label>
                        <input type="text" class="form-control" placeholder="Masukkan Nama Anda" v-model="nama"/>
                    </div>

                    <h2>Hello {{ nama }}</h2>
                </div>
                <div class="col-lg-10">

                    <p></p>

                    <button @click="tambahBarang" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
                        Tambah Barang
                    </button>

                    <p></p>

                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th class="text-center">ID Barang</th>
                                <th class="text-center">Nama Barang</th>
                                <th class="text-center">Jenis Barang</th>
                                <th class="text-center">Tanggal Kadaluarsa</th>
                                <th class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="b in dataBarang">
                                <td>{{ b.idBarang }}</td>
                                <td>{{ b.namaBarang }}</td>
                                <td>{{ b.jenisBarang }}</td>
                                <td>{{ b.tanggalKadaluarsa }}</td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal" @click="editBarang(b)">
                                        <i class="glyphicon glyphicon-pencil"></i>
                                    </button>
                                    <button type="button" class="btn btn-danger" @click="hapusBarang(b)">
                                        <i class="glyphicon glyphicon-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 v-if="enable" class="modal-title">Tambah Barang</h4>
                        <h4 v-else="enable" class="modal-title">Edit Barang</h4>
                    </div>
                    <div class="modal-body">
                        <form v-if="enable">
                            <div class="form-group">
                                <label>Nama Barang</label>
                                <input type="text" class="form-control" placeholder="Masukkan Nama Barang" v-model="inputDataBarang.namaBarang"/>
                            </div>
                            <div class="form-group">
                                <label>Jenis Barang</label>
                                <select class="form-control" v-model="inputDataBarang.jenisBarang">
                                    <option value="" disabled>Pilih Jenis Barang</option>
                                    <option value="gas">Gas</option>
                                    <option value="padat">Padat</option>
                                    <option value="cair">Cair</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Tanggal Kadaluarsa</label>
                                <input type="date" class="form-control" placeholder="Masukkan Tanggal Kadaluarsa" v-model="inputDataBarang.tanggalKadaluarsa"/>
                            </div>
                        </form>
                        <form v-else="enable">
                            <div class="form-group">
                                <label>ID Barang</label>
                                <input type="text" class="form-control" v-model="inputDataBarang.idBarang" disabled/>
                            </div>
                            <div class="form-group">
                                <label>Nama Barang</label>
                                <input type="text" class="form-control" placeholder="Masukkan Nama Barang" v-model="inputDataBarang.namaBarang"/>
                            </div>
                            <div class="form-group">
                                <label>Jenis Barang</label>
                                <select class="form-control" placeholder="Pilih Jenis Barang" v-model="inputDataBarang.jenisBarang">
                                    <option value="" disabled>Pilih Jenis Barang</option>
                                    <option value="gas">Gas</option>
                                    <option value="padat">Padat</option>
                                    <option value="cair">Cair</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Tanggal Kadaluarsa</label>
                                <input type="date" class="form-control" placeholder="Masukkan Tanggal Kadaluarsa" v-model="inputDataBarang.tanggalKadaluarsa"/>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-warning" data-dismiss="modal">Batal</button>
                        <button v-if="enable" type="button" class="btn btn-primary" data-dismiss="modal" @click="simpanBarang(inputDataBarang)">Simpan</button>
                        <button v-else="enable" type="button" class="btn btn-success" data-dismiss="modal" @click="updateBarang(inputDataBarang)">Update</button>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="./dist/js/jquery.min.js"></script>
        <script type="text/javascript" src="./dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="./dist/js/vue.min.js"></script>
        <script type="text/javascript" src="./app.js"></script>
    </body>
</html>

Dari codingan diatas bisa kita lihat, terdapat sedikit perbedaan diantaranya adalah jika pada angular biasanya kita menggunakan perintah ng-click sedangkan pada vue js kita menggunakan perintah @click. Jika pada angular, untuk menampilkan data yang berbentuk array kita akan menggunakan perintah ng-repeat sedangkan jika pada vue js kita akan menggunakan perintah v-for. Sedangkan pada perintah - perintah yang lain adalah sama.

Selanjutnya silahkan buka file app.js kemudian ubah codingannya menjadi seperti berikut.

'use strict';

new Vue({
  el: '#belajar',
  data: function() {
    return {
      dataBarang: [],
      inputDataBarang: {},
      enable: false
    }
  },
  methods: {
    generateUUID: function() {
      var d = new Date().getTime();
      if (window.performance && typeof window.performance.now === "function") {
        d += performance.now();
      }
      var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
      });
      return uuid;
    },
    tambahBarang: function() {
      this.enable = true;
      this.inputDataBarang = {};
    },
    simpanBarang: function(barang) {
      this.dataBarang.push({
        'idBarang': this.generateUUID(),
        'namaBarang': barang.namaBarang,
        'jenisBarang': barang.jenisBarang,
        'tanggalKadaluarsa': barang.tanggalKadaluarsa
      });
    },
    editBarang: function(barang) {
      this.enable = false;
      this.index = this.dataBarang.indexOf(barang);
      this.inputDataBarang.idBarang = barang.idBarang;
      this.inputDataBarang.namaBarang = barang.namaBarang;
      this.inputDataBarang.jenisBarang = barang.jenisBarang;
      this.inputDataBarang.tanggalKadaluarsa = barang.tanggalKadaluarsa;
    },
    updateBarang: function(barang) {
      this.dataBarang[this.index].idBarang = barang.idBarang;
      this.dataBarang[this.index].namaBarang = barang.namaBarang;
      this.dataBarang[this.index].jenisBarang = barang.jenisBarang;
      this.dataBarang[this.index].tanggalKadaluarsa = barang.tanggalKadaluarsa;
      this.inputDataBarang = {};
    },
    hapusBarang: function(barang) {
      var result = confirm('Anda ingin menghapus data barang ?');
      if (result) {
        this.index = this.dataBarang.indexOf(barang);
        this.dataBarang.splice(this.index, 1);
      }
    }
  }
});

Dari codingan diatas, terdapat perbedaan antara angular js dan vue js. Dimana pada vue js, antara data dan method akan dibagi berdasarkan section, sehingga kita akan melakukan deklarasi data dan method di section yang berbeda. Setiap variabel yang terdapat di dalam section data dapat kita panggil dengan menggunakan perintah this.nama variabel. Semua function yang terdapat di dalam section method juga dapat kita panggil melalui function lain yang berada di dalam section method tersebut, contohnya adalah function generateUUID.

Setelah selesai, silahkan akses kembali http://127.0.0.1:8080 berikut adalah output ketika anda melakukan insert.

Screenshot from 2016-07-01 08-02-11.png

berikut adalah output ketika anda melakukan select data.

Screenshot from 2016-07-01 08-02-25.png

berikut adalah output ketika anda melakukan update data.

Screenshot from 2016-07-01 08-02-35.png

berikut adalah output ketika anda melakukan delete data.

Screenshot from 2016-07-01 08-02-46.png

Sekian tutorial belajar vue js dan Terima kasih :)