Sebelum kita membuat konfigurasi reverse proxy, ada baiknya kita membahas sekilas tentang proxy :).

Apa Itu Proxy Server ?

Proxy Server adalah sebuah server yang menyediakan layanan perantara antara client host dengan server lain.

Berikut adalah gambaran umum dari proxy server

Screenshot from 2016-01-03 17:07:12.png

Dari gambar diatas dapat dilihat bahwa sebenarnya user atau client melakukan akses terhadap proxy server, selanjutnya proxy server akan meneruskan akses ke server yang dituju. Biasanya proxy server digunakan sebagai cache, keamanan, load balancing dan lain sebagainya.

Apa Itu Reverse Proxy ?

Reverse Proxy adalah salah satu jenis dari proxy, biasanya reverse proxy digunakan sebagai perantara antara client dengan web server.

Berikut adalah arsitektur dari reverse proxy.

Screenshot from 2016-01-03 17:47:48.png

Dari gambar diatas dapat dilihat bahwa sebuah proxy dapat menghandle beberapa web server. Adapun cara kerjanya adalah client akan melakukan akses terhadap sebuah URL misalnya https://www.google.co.id maka secara otomatis client akan melakukan request terlebih dahulu ke proxy server akan tetapi seolah - olah client melakukan request langsung ke web server. Setelah menerima request dari client, maka proxy server akan meneruskan request tersebut ke web server yang dituju. Untuk mempermudah pemahaman langsung saja kita melakukan setting reverse proxy pada nginx :D.

Setup Vagrant

Pada artikel kali ini, penulis akan menggunakan vagrant. Bagi yang belum tau apa itu vagrant, silahkan lihat di Belajar Vagrant. Pada kesempatan kali ini, penulis menggunakan box ubuntu/trusty64 atau ubuntu 14.04 LTS.

Silahkan buat sebuah folder ubuntu-nginx-reverse-proxy kemudian jalankan perintah berikut di dalam folder tersebut.

vagrant init

Lalu buka file Vagrantfile lalu ubah codingannya menjadi seperti berikut.

Vagrant.configure(2) do |config|

    #konfigurasi box untuk sistem operasi ubuntu trusty 64 bit
    config.vm.box = "ubuntu/trusty64"

    config.vm.provider "virtualbox" do |vb|
    
        #konfigurasi virtual box dengan ram 1 GB
        vb.memory = "1024"
    end
    
    #konfigurasi provisioning
    config.vm.provision "shell", path: "install.sh"
    
    #konfigurasi network
    #port forwarding
    config.vm.network "forwarded_port", guest: 80, host: 8080
end

Membuat File Executable Shell

File ini dibuat berfungsi sebagai provisioning pada vagrant, silahkan buat sebuah file install.sh kemudian isikan codingan seperti berikut.

#! /bin/sh
#
# install.sh
# Copyright (C) 2016 Rizki Mufrizal <mufrizalrizki@gmail.com>
#
# Distributed under terms of the MIT license.
#

echo "mulai Provisioning"

echo "setup software source dan repository"
cp /vagrant/config/sources.list /etc/apt/sources.list
cp /vagrant/config/environment /etc/environment

add-apt-repository -y ppa:git-core/ppa
add-apt-repository -y ppa:nginx/stable

echo "memulai update"
apt-get update

echo "mulai upgrade"
apt-get upgrade -y

echo "mulai dist upgrade"
apt-get dist-upgrade -y

echo "instalasi build essential"
apt-get install -y build-essential libssl-dev

echo "instalasi git"
apt-get install -y git

echo "instalasi nginx"
apt-get install -y nginx

echo "Konfigurasi reverse proxy nginx"
cp /vagrant/config/nginx-proxy /etc/nginx/sites-available/reverseproxy
ln -s /etc/nginx/sites-available/reverseproxy /etc/nginx/sites-enabled/reverseproxy
rm /etc/nginx/sites-enabled/default
service nginx restart

echo "instalasi node js"
curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -
apt-get install -y nodejs

echo "instalasi coffeescript"
npm install -g coffee-script

echo "instalasi nodemon"
npm install -g nodemon

echo "buat folder untuk project node js"
mkdir Belajar-Reverse-Proxy

echo "ke folder Belajar-Reverse-Proxy"
cd Belajar-Reverse-Proxy

echo "copy app.js ke folder Belajar-Reverse-Proxy"
cp /vagrant/config/app.js /home/vagrant/Belajar-Reverse-Proxy/app.js

echo "jalankan server"
nodemon app.js

Membuat Konfigurasi Reverse Proxy Nginx

Langkah selanjutnya adalah silahkan anda buat sebuah folder config, di dalam folder tersebut silahkan buat sebuah file nginx-proxy. Kemudian isikan codingan berikut pada file tersebut.

server {
    listen 80;

    server_name ubuntu.nginx.com
    access_log /var/log/nginx/access.log;

    location / {
        proxy_pass http://127.0.0.1:3000;
    }

}

Konfigurasi Repository Dan Environment

Karena kita menggunakan ubuntu, maka tahap selanjutnya kita melakukan konfigurasi repository dan environment pada ubuntu. Untuk konfigurasi repository, kita akan menggunakan repository kambing ui. Silahkan buat sebuah file sources.list kemudian isikan codingan berikut.

#repository kambing ui
deb http://kambing.ui.ac.id/ubuntu trusty main universe multiverse
deb http://kambing.ui.ac.id/ubuntu trusty-updates main universe multiverse
deb http://security.ubuntu.com/ubuntu trusty-security main universe multiverse

Untuk konfigurasi environment, silahkan buat sebuah file environment dan berikut adalah isi codingannya.

PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games"
LC_CTYPE="en_US.UTF-8"
LC_ALL="en_US.UTF-8"

Membuat Aplikasi Web Node JS

Semua konfigurasi untuk bagian nginx telah disiapkan, langkah terakhir adalah membuat sebuah aplikasi web dengan node js yang berfungsi sebagai server side sedangkan nginx berfungsi sebagai reverse proxy. Silahkan buat sebuah file app.js di dalam folder config kemudian isikan codingan node js seperti berikut ini.

/*
 * Belajar-Reverse-Proxy.js
 * Copyright (C) 2016 Rizki Mufrizal <mufrizalrizki@gmail.com>
 *
 * Distributed under terms of the MIT license.
 */

var http = require('http');

http.createServer(function (req, res) {
    res.writeHead(200, {
        'Content-Type': 'text/plain'
    });
    res.end('Belajar Reverse Proxy Pada Nginx\n');
}).listen(3000, '127.0.0.1');

console.log('Server jalan di http://127.0.0.1:3000/');

Arsitektur Reverse Proxy

Arsitektur reverse proxy yang akan digunakan adalah sebagai berikut.

Screenshot from 2016-01-03 18:04:39.png

Dari gambar diatas, terdapat 2 teknologi yang kita gunakan diantaranya adalah.

  • Node js : sebagai server side
  • Nginx : sebagai reverse proxy

Node js berjalan pada port 3000 sedangkan nginx akan berjalan pada port 80. Agar nginx dapat dijadikan sebagai reverse proxy, kita harus melakukan beberapa konfigurasi pada nginx. Kongurasi tersebut sebenarnya telah kita buat pada file install.sh. Konfigurasi tersebut adalah pada bagian

#! /bin/sh
#
# install.sh
# Copyright (C) 2016 Rizki Mufrizal <mufrizalrizki@gmail.com>
#
# Distributed under terms of the MIT license.
#
echo "Konfigurasi reverse proxy nginx"
cp /vagrant/config/nginx-proxy /etc/nginx/sites-available/reverseproxy
ln -s /etc/nginx/sites-available/reverseproxy /etc/nginx/sites-enabled/reverseproxy
rm /etc/nginx/sites-enabled/default
service nginx restart

Dari codingan diatas dapat bahwa kita mencopy file nginx-proxy dari folder /vagrant/config/ ke dalam folder /etc/nginx/sites-available/. Kemudian tahap selanjutnya kita melakukan symlink dari file reverseproxy ke dalam folder /etc/nginx/sites-enabled/.

Testing Reverse Proxy

Tahap terakhir yaitu melakukan testing reverse proxy. Silahkan masuk ke folder ubuntu-nginx-reverse-proxy melalui terminal lalu jalankan perintah berikut.

vagrant up

Maka vagrant akan menjalankan sistem operasi ubuntu dan melakukan provisioning, berikut adalah outputnya.

Bringing machine 'default' up with 'virtualbox' provider...
==> default: Importing base box 'ubuntu/trusty64'...
==> default: Matching MAC address for NAT networking...
==> default: Checking if box 'ubuntu/trusty64' is up to date...
==> default: Setting the name of the VM: ubuntu-nginx-reverse-proxy_default_1452844055124_38807
==> default: Clearing any previously set forwarded ports...
==> default: Clearing any previously set network interfaces...
==> default: Preparing network interfaces based on configuration...
    default: Adapter 1: nat
==> default: Forwarding ports...
    default: 80 (guest) => 8080 (host) (adapter 1)
    default: 22 (guest) => 2222 (host) (adapter 1)
==> default: Running 'pre-boot' VM customizations...
==> default: Booting VM...
==> default: Waiting for machine to boot. This may take a few minutes...
    default: SSH address: 127.0.0.1:2222
    default: SSH username: vagrant
    default: SSH auth method: private key
    default: 
    default: Vagrant insecure key detected. Vagrant will automatically replace
    default: this with a newly generated keypair for better security.
    default: 
    default: Inserting generated public key within guest...
    default: Removing insecure key from the guest if it's present...
    default: Key inserted! Disconnecting and reconnecting using new SSH key...
==> default: Machine booted and ready!
==> default: Checking for guest additions in VM...
    default: The guest additions on this VM do not match the installed version of
    default: VirtualBox! In most cases this is fine, but in rare cases it can
    default: prevent things such as shared folders from working properly. If you see
    default: shared folder errors, please make sure the guest additions within the
    default: virtual machine match the version of VirtualBox you have installed on
    default: your host and reload your VM.
    default: 
    default: Guest Additions Version: 4.3.34
    default: VirtualBox Version: 5.0
==> default: Mounting shared folders...
    default: /vagrant => /home/rizki/Documents/vagrant/ubuntu-nginx-reverse-proxy
==> default: Running provisioner: shell...
    default: Running: /tmp/vagrant-shell20160115-17586-14nuj0k.sh

Jika semua instalasi telah selesai, maka anda dapat melihat outputnya seperti berikut ini.

==> default: jalankan server
==> default: [nodemon] 1.8.1
==> default: [nodemon] to restart at any time, enter `rs`
==> default: [nodemon] watching: *.*
==> default: [nodemon] starting `node app.js`
==> default: Server jalan di http://127.0.0.1:3000/

Output diatas dapat dikatakan bahwa aplikasi node js telah berjalan dengan baik. Kemudian silahkan akses http://127.0.0.1:8080/. Berikut adalah tampilan hasilnya :).

Screenshot from 2016-01-15 14:59:12.png

Untuk source code nya silahkan lihat di ubuntu nginx reverse proxy. Sekian artikel mengenai konfigurasi reverse proxy pada nginx dan terima kasih :)

Ketika kita melakukan development terhadap sebuah aplikasi terkadang kita membutuhkan tool - tool penting untuk membantu pada developer untuk membuat sebuah aplikasi. Ada beberapa masalah yang sering ditemui oleh seorang developer diantaranya adalah :

  • Kesulitan ketika antar developer menggunakan sistem operasi yang berbeda.
  • Kesulitan ketika server yang digunakan menggunakan sistem operasi yang berbeda.
  • Kesulitan ketika project yang sedang dikerjakan tidak dapat berjalan di PC yang lain.

Dari beberapa kesulitan tersebut kita dapat meminimalkannya dengan menggunakan vagrant. Apa itu vagrant ?

Vagrant adalah sebuah software yang menggunakan teknologi virtual machine dimana kita dapat membuat lingkungan development secara portable, konsisten dan lebih fleksible.

Dikarenakan vagrant menggunakan teknologi virtual machine maka kita membutuhkan software seperti virtual box dan VmWare. Tujuannya adalah kita ingin membuat sebuah lingkungan development secara portable, contohnya misalnya pada saat production kita akan menggunakan sistem operasi ubuntu maka pada saat development kita akan menggunakan ubuntu sebagai sistem operasi sehingga pada saat proses deploy ke production diharapkan tidak ada lagi permasalahan yang muncul.

Ketika ingin melakukan duplikasi atau dibagikan kepada team developer yang lain maka kita tinggal menggunakan perintah vagrant sehingga secara otomatis vagrant akan melakukan konfigurasi pada PC masing - masing team developer sehingga mempermudah dalam development sebuah aplikasi.

Instalasi Virtual Box

Pada artikel ini, penulis menggunakan virtual box dikarenakan virtual box merupakan software open source dan lebih mudah dikonfigurasikan. Silahkan buka file sources.list dengan menjalankan perintah.

sudo gedit /etc/apt/sources.list

kemudian tambahkan sintak berikut pada baris akhir

deb http://download.virtualbox.org/virtualbox/debian xenial contrib

Jangan lupa sesuiakan dengan sistem operasi anda, disini saya menggunakan ubuntu 16.04 yaitu xenial, Setelah selesai kemudian disimpan dan untuk memasukkan public key jalankan perintah berikut.

wget -q https://www.virtualbox.org/download/oracle_vbox_2016.asc -O- | sudo apt-key add -

Kemudian untuk melakukan instalasi virtual box jalankan perintah berikut.

sudo apt-get update
sudo apt-get install virtualbox-5.0

Instalasi Vagrant

Untuk melakukan instalasi vagrant silahkan download vagrant terlebih dahulu di vagrant download, disini penulis menggunakan ubuntu 16.04 64 bit maka penulis memilih versi debian 64 bit. Untuk melakukan instalasinya silahkan jalankan perintah.

sudo dpkg -i vagrant_1.8.1_x86_64.deb

jangan lupa sesuaikan dengan nama file anda. Kemudian lakukan pengecekan vagrant dengan perintah.

vagrant --version

Instalasi Box Vagrant

Box pada vagrant berfungsi sebagai virtual machine yang memuat sistem operasi dan disana juga terdapat seluruh konfigurasi yang kita lakukan. Dengan demikian maka secara tidak langsung sebenarnya kita menggunakan virtual machine maka oleh karena itu kita membutuhkan virtual box sebagai tempat virtual machine.

Mengapa kita menggunakan vagrant ? mengapa tidak menggunakan virtual box saja ?

Salah satu alasannya adalah ketika menggunakan vagrant maka vagrant akan melakukan semua konfigurasi hanya dengan satu perintah pada saat sistem operasi start up sedangkan jika kita menggunakan virtual box maka kita harus melakukan konfigurasi secara manual.

Repository box bisa dilihat di repository box. Berikut adalah bentuk umum untuk melakukan instalasi box.

vagrant box add user/box

bisa dilihat bahwa untuk melakukan instalasi box sangatlah mudah yaitu kita hanya menggunakan perintah diatas dan anda hanya perlu mengganti perintah user/box. Perintah user berarti adalah pembuat box sedangkan perintah box adalah box yang ingin kita gunakan. Disini penulis menggunakan box ubuntu/trusty64 maka jalankan perintah berikut.

vagrant box add ubuntu/trusty64

PERHATIAN !

Untuk melakukan instalasi box membutuhkan koneksi internet dan membutuhkan instalasi yang lama dikarenakan kita akan mendownload sebuah sistem operasi yang berkisar 1 GB > tergantung dari sistem operasi yang akan digunakan.

Membuat Project

Untuk membuat project, silahkan buat sebuah folder misalnya disini penulis membuat folder ubuntu-vagrant. Kemudian jalankan perintah berikut di dalam folder tersebut.

vagrant init

maka akan muncul output seperti berikut.

A `Vagrantfile` has been placed in this directory. You are now
ready to `vagrant up` your first virtual environment! Please read
the comments in the Vagrantfile as well as documentation on
`vagrantup.com` for more information on using Vagrant.

Kemudian buka file Vagrantfile ubah codingannya menjadi seperti berikut.

Vagrant.configure(2) do |config|
  
  #konfigurasi box untuk sistem operasi ubuntu trusty 64 bit
  config.vm.box = "ubuntu/trusty64"

  config.vm.provider "virtualbox" do |vb|
    
     # konfigurasi virtual box dengan ram 1 GB
     vb.memory = "1024"
   end
end

Setelah selesai untuk menjalankan silahkan jalankan perintah berikut.

vagrant up

dan berikut adalah output pada terminal.

Bringing machine 'default' up with 'virtualbox' provider...
==> default: Importing base box 'ubuntu/trusty64'...
==> default: Matching MAC address for NAT networking...
==> default: Checking if box 'ubuntu/trusty64' is up to date...
==> default: Setting the name of the VM: ubuntu-vagrant_default_1451702137384_76705
==> default: Clearing any previously set forwarded ports...
==> default: Clearing any previously set network interfaces...
==> default: Preparing network interfaces based on configuration...
    default: Adapter 1: nat
==> default: Forwarding ports...
    default: 22 (guest) => 2222 (host) (adapter 1)
==> default: Running 'pre-boot' VM customizations...
==> default: Booting VM...
==> default: Waiting for machine to boot. This may take a few minutes...
    default: SSH address: 127.0.0.1:2222
    default: SSH username: vagrant
    default: SSH auth method: private key
    default: 
    default: Vagrant insecure key detected. Vagrant will automatically replace
    default: this with a newly generated keypair for better security.
    default: 
    default: Inserting generated public key within guest...
    default: Removing insecure key from the guest if it's present...
    default: Key inserted! Disconnecting and reconnecting using new SSH key...
==> default: Machine booted and ready!
==> default: Checking for guest additions in VM...
    default: The guest additions on this VM do not match the installed version of
    default: VirtualBox! In most cases this is fine, but in rare cases it can
    default: prevent things such as shared folders from working properly. If you see
    default: shared folder errors, please make sure the guest additions within the
    default: virtual machine match the version of VirtualBox you have installed on
    default: your host and reload your VM.
    default: 
    default: Guest Additions Version: 4.3.34
    default: VirtualBox Version: 5.0
==> default: Mounting shared folders...
    default: /vagrant => /home/rizki/Documents/vagrant/ubuntu-vagrant

Jika box telah jalan, langkah selanjutnya adalah login ke dalam box yang telah kita jalankan. Untuk login ke dalam box silahkan jalankan perintah berikut.

vagrant ssh

Jika berhasil maka akan muncul output pada terminal seperti berikut.

Welcome to Ubuntu 14.04.3 LTS (GNU/Linux 3.13.0-74-generic x86_64)

 * Documentation:  https://help.ubuntu.com/

 System information disabled due to load higher than 1.0

  Get cloud support with Ubuntu Advantage Cloud Guest:
    http://www.ubuntu.com/business/services/cloud

0 packages can be updated.
0 updates are security updates.

dan secara otomatis terminal yang kita gunakan akan berubah menjadi seperti gambar berikut.

Screenshot from 2016-01-02 09:41:17.png

Perintah Vagrant

Di dalam vagrant terdapat beberapa perintah penting, berikut adalah beberapa perintah yang sering digunakan di dalam vagrant.

Destroy

Perintah ini biasanya digunakan untuk menghapus project dan konfigurasi box yang telah kita buat. Untuk menghapus project kita dapat masuk ke dalam folder project dan menjalankan perintah.

vagrant destroy

Halt

Perintah ini berfungsi untuk mematikan/shut down box sehingga konfigurasi yang telah kita kita buat di dalam box tidak akan hilang. Untuk mematikan box kita dapat masuk ke dalam folder project dan menjalankan perintah.

vagrant halt

Suspend

Perintah ini biasanya kita gunakan untuk suspend atau sleep box. Sama seperti halt, semua konfigurasi yang telah kita buat tidak akan hilang. Untuk melakukan suspend pada project, kita dapat masuk ke dalam folder project dan menjalankan perintah.

vagrant suspend

Provisioning

Provisioning adalah menginstall/mengkonfigurasi sistem yang terdapat di dalam sebuah box. Biasanya yang kita lakukan sehari - hari adalah melakukan instalasi apache, mysql dan sebagainya, akan tetapi hal - hal seperti ini akan merepotkan ketika kita diharuskan melakukan instalasi terus - menerus ketika kita melakukan vagrant up pada PC yang berbeda. Untuk mengoptimalkannya maka kita akan menggunakan fitur provisioning pada vagrant. Silahkan buat sebuah file install.sh di dalam folder ubuntu-vagrant kemudian isi dengan kodingan berikut.

#!/bin/sh

echo "mulai Provisioning"

echo "software source dan repository"
cp /vagrant/config/sources.list /etc/apt/sources.list
cp /vagrant/config/environment /etc/environment

echo "tambah repository nginx"
add-apt-repository -y ppa:nginx/stable

apt-get update
apt-get upgrade -y
apt-get dist-upgrade -y

echo "Instalasi nginx"
apt-get install -y nginx

silahkan buat folder config, kemudian buat file sources.list di dalam folder config. Isikan codingan berikut ini.

deb http://kambing.ui.ac.id/ubuntu trusty main universe multiverse
deb http://kambing.ui.ac.id/ubuntu trusty-updates main universe multiverse
deb http://security.ubuntu.com/ubuntu trusty-security main universe multiverse

Langkah selanjutnya silahkan buat file environment di dalam folder config kemudian masukkan codingan berikut ini.

PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games"
LC_CTYPE="en_US.UTF-8"
LC_ALL="en_US.UTF-8"

Setelah selesai, langkah selanjutnya adalah lakukan konfigurasi pada file Vagrantfile seperti berikut.

Vagrant.configure(2) do |config|
  #konfigurasi box untuk sistem operasi ubuntu trusty 64 bit
  config.vm.box = "ubuntu/trusty64"

  config.vm.provider "virtualbox" do |vb|
    
     # konfigurasi virtual box dengan ram 1 GB
     vb.memory = "1024"
  end

  #konfigurasi provisioning
  config.vm.provision "shell", path: "install.sh"
end

Untuk menjalankan provisioning silahkan jalankan perintah berikut.

vagrant provision

Konfigurasi Jaringan

Agar kita dapat melakukan akses terhadap jaringan yang terdapat di dalam box vagrant maka kita harus melakukan konfigurasi jaringan. Konfigurasi yang akan kita lakukan adalah port forwarding artinya jaringan yang ada di dalam box akan kita forward ke komputer local berdasarkan port. Misalnya kita ingin melakukan akses port 80 pada vagrant box dengan menggunakan port 8080 pada komputer local. Silahkan buka file Vagrantfile kemudian lakukan konfigurasi seperti berikut ini.

Vagrant.configure(2) do |config|
  #konfigurasi box untuk sistem operasi ubuntu trusty 64 bit
  config.vm.box = "ubuntu/trusty64"

  config.vm.provider "virtualbox" do |vb|
    
     # konfigurasi virtual box dengan ram 1 GB
     vb.memory = "1024"
  end

  #konfigurasi provisioning
  config.vm.provision "shell", path: "install.sh"
  
  #konfigurasi network
  #port forwarding
  config.vm.network "forwarded_port", guest: 80, host: 8080
end

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

Untuk source code nya silahkan lihat di Belajar Vagrant. Sekian artikel mengenai belajar vagrant dan terima kasih :).

Jika anda adalah seorang developert javascript terutama yang udah sering ngoding di node js pasti udah tidak asing lagi dengan yang namanya gulp :D.

Gulp adalah sebuah build tool yang biasanya digunakan untuk automated task atau bisa dibilang sebagai automator.

Biasanya gulp digunakan untuk melakukan serangkaian kerja seperti membuat minify terhadap file html, css, js, melakukan concat file js, dan sebagainya. Pada artikel kali ini, penulis ingin membahas bagaimana cara penggunaan gulp untuk setup development sebuah project :D.

Instalasi Gulp

Karena gulp basic nya menggunakan node js maka anda diharuskan melakukan instalasi node js, yang belum melakukan instalasi node js silahkan lihat di Instalasi Perlengkapan Coding NodeJS.

Untuk melakukan instalasi gulp silahkan jalankan perintah

npm install -g gulp

Membuat Project

Silahkan buat sebuah folder dimana saja, disini penulis membuat sebuah folder dengan nama Belajar-Gulp. Kemudian masuk ke folder tersebut dengan menggunakan terminal. Jalankan perintah berikut ini.

npm init

Kemudian isikan perintahnya sesuai dengan kebutuhan, jika sudah maka akan terbentuk file package.json dimana file ini nantinya akan berisi library yang kita butuhkan. Kemudian install library gulp untuk kebutuhan project dengan perintah.

npm install gulp --save-dev

Setelah selesai, tahap selanjutnya adalah kita menentukan list task yang akan kita lakukan. List task yang akan penulis lakukan adalah sebagai berikut.

  • Task Minify file css, js dan html
  • Task Server
  • Task Watch
  • Task LiveReload
  • Task Clean dan Build

Task Minify file css, js dan html

Silahkan anda membuat sebuah file di dalam folder tersebut dengan nama gulpfile.js. kemudian kita lakukan instalasi library gulp dengan perintah.

npm install gulp-htmlmin gulp-uglify gulp-minify-css gulp-concat --save-dev

Minifiy CSS

Sama seperti sebelumnya, hanya saja pada minify kita memasukkan plugin minify css.

var gulp = require('gulp');
var gulpMinifyCss = require('gulp-minify-css');

gulp.task('minify-css', function() {
  gulp.src('./src/index.css')
    .pipe(gulpMinifyCss({
      compatibility: 'ie8'
    }))
    .pipe(gulp.dest('./dist/'));
});

kemudian jalankan dengan perintah.

gulp minify-css

Minifiy JS

Sebelum diminify maka kita lakukan concat terlebih dahulu, berikut adalah codingan untuk concat dan minify

var gulp = require('gulp');
var gulpConcat = require('gulp-concat');
var gulpUglify = require('gulp-uglify');

gulp.task('minify-js', function() {
  gulp
    .src([
      './src/index1.js',
      './src/index2.js'
    ])
    .pipe(gulpConcat('bundle.js'))
    .pipe(gulpUglify())
    .pipe(gulp.dest('dist'));
});

kemudian jalankan dengan perintah.

gulp minify-js

Minifiy HTML

Yang terakhir adalah membuat agar file html menjadi lebih kecil yaitu dengan menggunakan plugin gulp-htmlmin, berikut adalah kodingannya.

var gulp = require('gulp');
var gulpHtmlmin = require('gulp-htmlmin');

gulp.task('minify-html', function() {
  gulp.src('src/*.html')
    .pipe(gulpHtmlmin({
      collapseWhitespace: true
    }))
    .pipe(gulp.dest('dist'))
});

kemudian jalankan dengan perintah.

gulp minify-html

Task Server

Gulp juga menyediakan plugin untuk membuat sebuah server sehingga kita bisa langsung mengubah kodingan html, css dan js tanpa server back end. Silahkan jalankan perintah berikut untuk instalasi librarynya.

npm install --save-dev gulp-connect

kemudian tambahkan kodingan berikut pada file gulpfile.js

var gulp = require('gulp');
var gulpConnect = require('gulp-connect');

gulp.task('server', function() {
  gulpConnect.server({
    root: 'src',
    livereload: true
  });
});

Codingan root berfungsi sebagai tempat folder aplikasi yang akan kita jalankan sedangkan livereload berfungsi agar server dapat melakukan hot reload. Silahkan jalankan dengan perintah.

gulp server

maka akan muncul log terminal seperti berikut.

[13:12:05] Using gulpfile ~/Documents/Github Page/Belajar-Gulp/gulpfile.js
[13:12:05] Starting 'server'...
[13:12:05] Finished 'server' after 11 ms
[13:12:05] Server started http://localhost:8080
[13:12:05] LiveReload started on port 35729

silahkan akses di browser pada http://localhost:8080.

Task Watch

Task yang satu ini berfungsi untuk melihat semua aktifitas yang anda kerjakan :D. Fungsi yaitu setiap kali kita melakukan edit sebuah file maka dia akan melakukan task yang lain, misalnya jika kita mengedit file css, js dan html maka dia akan concat dan minify file - file tersebut. Masukkan codingan berikut pada file gulpfile.js.

gulp.task('watch', function() {
  gulp.watch('./src/*.js', ['minify-js']);
  gulp.watch('./src/*.css', ['minify-css']);
  gulp.watch('./src/*.html', ['minify-html']);
});

kemudian jalankan dengan perintah

gulp watch

jika anda melakukan perubahan pada file js, css dan html maka dia akan melakukan compile ulang terhadap masing - masing file tersebut.

Task LiveReload

Task ini biasanya digunakan ketika kita ingin browser melakukan refresh setiap kali kita mengedit file - file css, js dan html. Silahkan ubah kodingan berikut ini.

gulp.task('minify-css', function() {
  gulp.src('./src/index.css')
    .pipe(gulpMinifyCss({
      compatibility: 'ie8'
    }))
    .pipe(gulp.dest('./dist/'))
    .pipe(gulpConnect.reload());
});

gulp.task('minify-js', function() {
  gulp
    .src([
      './src/index1.js',
      './src/index2.js'
    ])
    .pipe(gulpConcat('bundle.js'))
    .pipe(gulpUglify())
    .pipe(gulp.dest('dist'))
    .pipe(gulpConnect.reload());
});

gulp.task('minify-html', function() {
  gulp.src('src/*.html')
    .pipe(gulpHtmlmin({
      collapseWhitespace: true
    }))
    .pipe(gulp.dest('dist'))
    .pipe(gulpConnect.reload());
});

gulp.task('server', function() {
  gulpConnect.server({
    root: 'src',
    livereload: true
  });
});

gulp.task('watch', function() {
  gulp.watch('./src/*.js', ['minify-js']);
  gulp.watch('./src/*.css', ['minify-css']);
  gulp.watch('./src/*.html', ['minify-html']);
});

gulp.task('default', ['watch', 'server']);

kemudian jalankan dengan perintah

gulp

mengapa gulp aja ? dikarenakan kita telah melakukan deklarasi default sehingga gulp akan menjalankan perintah default tersebut. Kemudian akses http://localhost:8080/ pada browser, ubah salah satu file maka browser akan otomatis melakukan reload.

Task Clean dan Build

Yang terakhir adalah task clean dan build, biasanya kita gunakan jika kita ingin membuild semua file yang ada. Silahkan instal library seperti berikut.

npm install --save-dev gulp-clean gulp-sequence

kemudian masukkan kodingan seperti berikut.

var clean = require('gulp-clean');
var gulpSequence = require('gulp-sequence');

gulp.task('clean', function() {
  return gulp.src('dist', {
    read: false
  })
    .pipe(clean());
});

gulp.task('build', gulpSequence('clean', 'minify-css', 'minify-js', 'minify-html'));

untuk menjalankannya dengan perintah

gulp build

Untuk source code nya silahkan lihat di Belajar Gulp. Sekian artikel mengenai berkenalan dengan gulp dan terima kasih :).

Sebelum kita melakukan coding PHP pada linux, kita diharuskan untuk melakukan instalasi PHP untuk kebutuhan coding. Yang kita butuhkan adalah PHP, web server apache, composer dan database. Berikut adalah tahapan untuk instalasi pada linux :).

Instalasi Apache Web Server

Apache web server adalah server web yang dapat dijalankan di banyak sistem operasi (Unix, BSD, Linux, Microsoft Windows dan Novell Netware serta platform lainnya) yang berguna untuk melayani dan memfungsikan situs web. Protokol yang digunakan untuk melayani fasilitas web/www ini menggunakan HTTP.

Nah untuk menjalankan PHP kita dapat menggunakan web server apache ini, untuk melakukan instalasi apache silahkan jalankan perintah berikut ini.

sudo apt-add-repository ppa:ondrej/apache2
sudo apt-get update
sudo apt-get install apache2

Jika telah selesai, silahkan akses

http://127.0.0.1/

jika berhasil maka akan muncul halaman web tentang web server apache seperti berikut ini.

Screenshot from 2015-12-21 08:07:45.png

Instalasi PHP

PHP adalah singkatan dari “PHP: Hypertext Prepocessor”, yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML. PHP diciptakan oleh Rasmus Lerdorf pertama kali tahun 1994.

Langkah selanjutnya adalah melakukan instalasi PHP, karena PHP 7 udah release maka kita akan menggunakan PHP 7 :D. Untuk melakukan instalasi PHP silahkan jalankan perintah berikut ini.

sudo add-apt-repository ppa:ondrej/php
sudo apt-get update
sudo apt-get install php7.0-cli php7.0-mysql php7.0-fpm php7.0-gd php7.0 libapache2-mod-php7.0 php7.0-mcrypt php7.0-common php7.0-snmp snmp php7.0-curl php7.0-json php7.0-pgsql php7.0-mbstring php7.0-zip php7.0-xmlrpc php7.0-cgi php-pear php7.0-dev php7.0-imap

Setelah selesai, kita akan melakukan testing terlebih dahulu. Karena htdocs terdapat di dalam folder /var/www/html/ maka berikan hak akses terlebih dahulu dengan perintah

sudo chmod 777 -R /var/www/

Setelah selesai jalankan perintah nano /var/www/html/info.php kemudian masukkan codingan berikut ini.

<?php phpinfo();

kemudian save dengan perintah ctrl + o dan keluar dengan perintah ctrl + x. Jika sudah, akses http://127.0.0.1/info.php pada browser maka akan muncul versi php seperti berikut ini.

atau anda dapat juga mengecek PHP melalui terminal dengan perintah

php --version

maka akan muncul tulisan seperti berikut .

PHP 7.0.1-1+deb.sury.org~trusty+2 (cli) ( NTS )
Copyright (c) 1997-2015 The PHP Group
Zend Engine v3.0.0, Copyright (c) 1998-2015 Zend Technologies
    with Zend OPcache v7.0.6-dev, Copyright (c) 1999-2015, by Zend Technologies

Instalasi MariaDB

Mariadb adalah produk fork dari MySQL yang didukung langsung dari community. Sejak diakuisisinya MySQL oleh Oracle pada September 2010, Monty Program sebagai penulis awal kode sumber MySQL memisahkan diri dari pengembangan dan membuat versi yang lebih sendiri yakni MariaDB.

Dari definisi diatas dapat ditarik kesimpulan bahwa sebenarnya mariadb dengan mysql tidak memiliki perbedaan yang jauh sehingga tidak ada masalah jika kita menggunakan mariadb. Salah satu faktor memilih mariadb adalah disupport oleh community dan juga memiliki performance yang lebih baik dari mysql. Untuk melakukan instalasinya silahkan jalankan perintah berikut.

sudo apt-get install software-properties-common
sudo apt-key adv --recv-keys --keyserver hkp://keyserver.ubuntu.com:80 0xF1656F24C74CD1D8
sudo add-apt-repository 'deb [arch=amd64,i386] http://mariadb.biz.net.id/repo/10.1/ubuntu xenial main'
sudo apt-get update
sudo apt-get install mariadb-server mariadb-client

pada saat instalasi nantinya anda akan diminta memasukkan password seperti ini

silahkan masukkan password anda, lalu tekan tab atau space maka cursor akan ke bagian <oke> kemudian tekan enter.

Jika instalasi telah selesai, anda dapat mengakses mariadb dengan perintah

mysql -u root -p

Instalasi PhpMyAdmin

phpMyAdmin adalah perangkat lunak bebas yang ditulis dalam bahasa pemrograman PHP yang digunakan untuk menangani administrasi MySQL. phpMyAdmin mendukung berbagai operasi MySQL, diantaranya (mengelola basis data, tabel-tabel, bidang (fields), relasi (relations), indeks, pengguna (users), perijinan (permissions), dan lain-lain).

Untuk administrasi mysql kita dapat menggunakan phpMyAdmin, silahkan download di phpMyAdmin pilih yang phpMyAdmin-4.5.2-all-languages.tar.xz kemudian extrak dan rename foldernya dengan phpmyadmin, hasilnya ektraknya silahkan anda copy ke folder /var/www/html/ kemudian akses pada http://127.0.0.1/phpmyadmin/ maka akan muncul halaman phpmyadmin seperti berikut ini.

Screenshot from 2015-12-21 08:40:35.png

Jika terdapat error seperti ini

Screenshot from 2015-12-21 08:40:36.png

maka jalankan perintah

sudo systemctl restart apache2

kemudian akses kembali phpmyadmin anda :).

Instalasi Composer

Tahap selanjutnya kita akan melakukan instalasi Composer. apa itu composer ?

Composer merupakan sebuah build tool untuk dependency manager terhadap library yang dibutuhkan oleh project PHP.

Buka terminal pada folder yang akan dijadikan sebagai folder composer. Kemudian jalankan perintah berikut

curl -sS https://getcomposer.org/installer | php

Jika sudah, sekarang kita akan lakukan path, jalankan perintah sudo gedit /etc/environment kemudian sisipakan pada baris atas seperti berikut.

COMPOSER_HOME=/home/rizki/programming/build-tool/composer

ganti isian COMPOSER_HOME dengan directori tempat instalasi composer anda. Kemudian pada bagian PATH tambahkan seperti berikut.

PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/home/rizki/programming/build-tool/composer"

jangan lupa sesuaikan dengan folder tempat instalasi composer anda. Restart PC anda dan cek composer anda dengan perintah

composer.phar --version

Sekian artikel mengenai instalasi perlengkapan coding php di linux dan terima kasih :).

Akhir - akhir ini, linux sudah banyak digunakan terutama mahasiswa yang suka ngoprek hal baru. Akan tetapi terdapat kendala diantara user windows yang migrasi ke linux yaitu masalah instalasi software. Tidak hanya di kalangan orang awam, bahkan mahasiswa juga mengalami hal yang serupa. Jika pada windows kita hanya klik pada file setup lalu tinggal klik tombol next dan finish selesai, hal ini berbeda dengan linux, bagaimana caranya ? sebelum kita membahas cara instalasi linux, penulis akan terlebih dahulu membahas tentang management package di dalam linux karena management package merupakan hal dasar yang harus dimengerti oleh seorang linux user :D.

Package Management Pada Linux

Setiap distro linux memiliki package management yang berbeda - beda. Apa itu Distro linux ?

Distro Linux (singkatan dari distribusi Linux) adalah sebutan untuk sistem operasi komputer dan aplikasinya, merupakan keluarga Unix yang menggunakan kernel Linux. Distribusi Linux bisa berupa perangkat lunak bebas (open source) dan bisa juga berupa perangkat lunak komersial seperti Red Hat Enterprise, SuSE, dan lain-lain.

Dari pengertian diatas dapat kita simpulkan bahwa setiap yang menggunakan kernel linux maka dia termasuk salah satu distro linux. Berikut adalah contoh distro linux.

  • Ubuntu
  • Open Suse
  • Linux Mint
  • Fedora
  • Red Hat
  • Slackware
  • Centos
  • Elementary OS
  • Kali Linux
  • Dan lain - lain

Itu merupakan beberapa contoh dari distro linux, dan ada banyak sekali distro linux yang telah dikembangkan. Dari sekian banyak linux, yang menjadi induknya ada 3 distro yaitu debian, slackware dan red hat. Dari ketiga dsitro tersebut maka dikembangkan lah distro - distro lain seperti ubuntu, open suse, fedora dan lain sebagainya. Setiap distro yang merupakan turunan dari distro sebelumnya maka distro tersebut akan mengikuti package management pada distro sebelumnya, Apa itu Package Management ?

package management (atau package management system atau sistem manajemen paket) adalah kumpulan perangkat untuk mengotomatisasi proses instalasi, upgrade (perbaikan), konfigurasi, atau menghapus paket perangkat lunak dari sebuah komputer menggunakan cara tertentu.

Dari pengertian diatas dapat kita simpulkan bahwa package management setiap distro beda - beda. Pada artikel ini, penulis hanya membahas tentang package management pada keluarga debian. Berikut adalah contoh dari keluarga debian

  • Debian
    • Ubuntu
      • Ubuntu Mate
      • Kubuntu
      • Xubuntu
      • Elementary OS
    • Kali Linux

Bisa dilihat bahwa distro ubuntu merupakan turunan dari distro debian sehingga package management yang akan digunakan oleh ubuntu akan sama seperti pada debian. Begitu pula halnya seperti distro ubuntu mate, kubuntu dan lain sebagainya. Package management yang terdapat pada keluarga debian yaitu apt-get, apt-get merupakan package management yang terdapat pada keluarga debian, salah satu fungsinya adalah mempermudah user dalam mencari dependency yang dibutuhkan oleh sebuah aplikasi, misalnya penulis ingin melakukan instalasi aplikasi daftar barang, nah aplikasi ini membutuhkan aplikasi lain untuk bisa jalan misalnya dia membutuhkan gcc maka secara otomatis package management akan mencari dependency yang dibutuhkan oleh aplikasi tersebut. apt-get sebenarnya adalah sebuah front end sedangkan back end nya adalah dpkg yang akan melakukan instalasi software. Bedanya apa ? bedanya adalah apt-get dapat mencari dependency sebuah aplikasi sedangkan dpkg tidak dapat mencari dependency tetapi dpkg hanya bertugas untuk melakukan instalasi sebuah aplikasi.

Instalasi Software Dengan Package Management (apt-get)

Setelah mengetahui bagaimana package management pada keluarga debian, selanjutnya kita akan melakukan instalasi sebuah aplikasi. Misalnya disini penulis ingin melakukan instalasi software sticky notes pada ubuntu. Untuk melakukan instalasi sticky notes kita membutuhkan yang namanya PPA.

PPA (“Personal Package Archive”) adalah penyedia repositori buatan pihak ketiga di Launchpad yang dapat anda gunakan untuk menginstal (atau upgrade) paket yang tidak tersedia dalam repository Ubuntu resmi.

Mengapa menggunakan PPA ? dikarenakan di dalam repository ubuntu resmi tidak menyediakan software - software yang kita inginkan misalnya seperti java oracle dan sebagainya. Untuk menambahkan PPA berikut adalah bentuk umumnya :

sudo add-apt-repository ppa:Pembuat PPA/Nama PPA

Jika kita ingin melakukan instalasi sticky notes maka kita akan menambahkan PPA seperti berikut ini, jangan lupa bahwa perintah ini menggunakan terminal linux.

sudo add-apt-repository ppa:umang/indicator-stickynotes

Jika berhasil maka akan muncul gambar seperti berikut.

Screenshot from 2015-12-10 09:36:29.png

Setelah selesai, selanjutnya silahkan update repository di dalam komputer anda dengan perintah

sudo apt-get update

Jika telah selesai melakukan update maka hasilnya akan seperti ini.

Screenshot from 2015-12-10 09:40:25.png

Langkah selanjutnya adalah melakukan instalasi sticky notes nya sendiri, berikut adalah bentuk umum instalasi dengan apt-get.

sudo apt-get install Nama Software

maka untuk instalasi sticky notes jalankan perintah berikut

sudo apt-get install indicator-stickynotes

Jika berhasil maka sticky notes akan terinstall dan diterminal anda akan muncul seperti ini.

Screenshot from 2015-12-10 09:45:16.png

Instalasi Software Dengan dpkg (Debian Package Manager)

Sebelumnya kita melakukan instalasi dengan menggunakan apt-get nah kali ini kita akan menggunakan fungsi dpkg untuk melakukan instalasi software. Syarat yang dibutuhkan untuk instalasi software dengan menggunakan dpkg adalah kita diharuskan mendownload file executable dengan extensi .deb. Misalnya penulis ingin melakukan instalasi sofware mysql workbench, silahkan anda download terlebih dahulu di Mysql Workbench jangan lupa sesuaikan dengan versi ubuntu anda.

Berikut merupakan bentuk umum untuk melakukan instalasi dengan menggunakan dpkg

sudo dpkg -i File Executable.deb

Setelah selesai mendownload file executable mysql workbench langkah selanjutnya pindahkan file tersebut ke folder home. Kemudian jalankan perintah berikut.

sudo dpkg -i mysql-workbench-community-6.3.5-1ubu1404-amd64.deb

Beberapa software jika kita melakukan instalasi dengan dpkg akan mengeluarkan error, contohnya adalah ketika kita melakukan instalasi mysql workbench akan muncul pesan error seperti berikut ini.

Screenshot from 2015-12-10 10:03:06.png

Dari gambar diatas dapat dilihat bahwa software mysql workbench diinstall akan tetapi terdapat error sehingga software tidak dapat dibuka. Bagaimana cara mengatasinya ? silahkan scroll terminal anda ke atas maka terdapat tulisan seperti ini.

Screenshot from 2015-12-10 10:03:24.png

Artinya adalah bahwa mysql workbench membutuhkan beberapa dependency library akan tetapi library tersebut belum diinstall di dalam komputer anda. Untuk mengatasi dependency library ini maka kita harus menggunakan fungsi apt-get silahkan sambungkan internet anda lalu jalankan perintah berikut.

sudo apt-get install -f

Fungsi perintah diatas adalah dia akan mencarikan dependency library apa saja yang dibutuhkan oleh software mysql workbench sehingga akan muncul seperti ini.

Screenshot from 2015-12-10 10:14:01.png

Lalu ketik huruf y dan tekan enter maka dia akan mendownload dependency library dan melakukan instalasi software mysql workbench, Jika berhasil maka akan muncul seperti ini.

Screenshot from 2015-12-10 10:16:50.png

Uninstall Software

Setelah mengetahui bagaimana instalasi software, maka langkah selanjutnya adalah bagaimana cara uninstall software. Ada 2 cara, berikut adalah bentuk umumnya.

sudo apt-get remove Nama Sofware

dan

sudo apt-get purge Nama Sofware

Perbedaanya adalah ketika menggunakan remove maka software akan diunstall sedangkan dengan menggunakan purge maka software diuninstall berserta konfigurasi softwarenya. Penulis akan melakukan uninstall terhadap software sticky notes maka jalankan perintah berikut.

sudo apt-get purge indicator-stickynotes

maka hasil akhirnya adalah seperti berikut ini.

Screenshot from 2015-12-10 10:31:50.png

Membuat Shortcut Software

Bagaimana membuat shortcut pada ubuntu jika software tersebut tidak perlu diinstall seperti Eclipse, IntelliJ IDEA, Spring Tool Suite, dan Andoid Studio ? kita bisa menggunakan aplikasi lain untuk membuat shortcut aplikasi tersebut. Silahkan jalankan perintah berikut.

sudo apt-get install --no-install-recommends gnome-panel

Misalnya penulis ingin membuat shortcut untuk spring tool suite, silahkan download terlebih dahulu di Spring Tool Suite dan extrack. Setelah selesai buka terminal dan jalankan perintah.

sudo gnome-desktop-item-edit --create-new /usr/share/applications/

maka akan muncul sebuah windows create launcher silahkan isi sesuai dengan nama aplikasi, pada bagian command silahkan browser file executable. Setelah selesai lalu jalankan perintah berikut untuk memberikan hak akses.

sudo chmod a+x /usr/share/applications/Spring\ Tool\ Suite.desktop

Setelah selesai silahkan cari aplikasi tersebut di dashboard ubuntu anda :D. Sekian artikel mengenai belajar instalasi software di linux dan terima kasih :).