Membangun Aplikasi Web dengan Platform MVC Rails (Ruby)

Ruby dikenal sebagai salah satu bahasa pemrograman yang relatif mudah dipelajari. Salah satu framework Model-View-Controller yang cukup populer berbasis Ruby adalah Rails. Kali ini saya tertarik untuk mendokumentasikan pengembangan aplikasi web dengan menggunakan framework Rails. Untuk menggunakan Rails tentunya kita harus memastikan bahwa Ruby sudah terinstall pada Komputer/PC kita. Ruby pada sistem operasi GNU/Linux, macOS dan beberapa varian UNIX lain biasanya sudah terinstall secara default, sedangkan bagi pengguna sistem operasi Windows harus menginstall Ruby terlebih dahulu melalui RubyInstaller. Bagi pengguna macOS seperti saya ada baiknya menginstall Homebrew terlebih dahulu, untuk memudahkan instalasi perangkat lunak tambahan pihak ketiga seperti Rails. Ada beberapa persyaratan perangkat lunak yang harus tersedia sebelum kita mulai menggunakan Rails yang instalasinya akan saya jelaskan pada paragraf-paragraf berikutnya. Pastikan komputer/PC kita terkoneksi dengan jaringan Internet untuk melalui tahapan proses instalasi Rails.

Instalasi

GNU/Linux

Pengguna GNU/Linux dengan distro-distro populer seperti Ubuntu, Debian, CentOS, SuSe, RedHat, dsb. dapat menginstall Rails dengan mudah menggunakan aplikasi package-manager bawaan. Seperti pada Ubuntu 16.04 kita jalankan perintah-perintah berikut ini secara berurutan pada aplikasi console/terminal:

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update
sudo apt-get install git-core zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev python-software-properties libffi-dev nodejs yarn
git clone https://github.com/rbenv/rbenv.git ~/.rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
exec $SHELL
git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc
exec $SHELL
rbenv install 2.4.2
rbenv global 2.4.2
gem install bundler
gem install rails
rbenv rehash

Wwweeeeww panjang yak! 😂😂😂. Kalau tidak ada masalah dalam proses perjalanan instalasinya maka Rails siap digunakan.

Apple macOS

Tahapan paling pertama adalah pastikan bahwa kita sudah menginstall Xcode dan command-line toolsnya (bisa didownload gratis melalui laman resmi Apple di https://developer.apple.com/xcode/ (ukuran file instalasi Xcode besar, pastikan mengunduh dengan menggunakan jaringan WiFi atau LAN, kecuali paket data 4G Anda unlimited FUP-nya :D ). Apabila Xcode sudah terinstall berikutnya buka Terminal dan jalankan:

xcode-select --install

Akan muncul dialog terkait dengan lisensi yang harus kita setujui. Pengguna GNU/Linux, UNIX, ataupun Windows tidak perlu melakukan tahap ini.

Khusus pengguna Apple macOS jangan lupa meng-install Homebrew pada macOS dengan membuka aplikasi Terminal dan jalankan perintah berikut:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Berikutnya jangan lupa mengupdate "gem" (package manager khusus library Ruby) ke versi terbaru:

sudo gem update --system

Lagi-lagi Khusus pengguna Apple macOS, tahap berikutnya kita perlu menginstall library libxml2 dari Homebrew, karena entah kenapa di macOS High Sierra (11.13.1) dengan Xcode versi teranyar selalu gagal di proses kompilasi library Nokogiri (parser HTML dan XML) karena libxml2 yang tidak cocok.

brew install libxml2
sudo gem install -n /usr/local/bin nokogiri -- --use-system-libraries --with-xml2-include=$(brew --prefix libxml2)/include/libxml2

Setelah semua sukses diinstall baru kemudian kita install Rails dan Bundler dengan perintah:

sudo gem install -n /usr/local/bin rails
sudo gem install -n /usr/local/bin bundler

Tunggu proses hingga selesai. Apabila tidak muncul galat/error selama prosesnya makan Rails berhasil terinstall di Komputer/PC kita. Kemungkinan besar Anda akan bertanya apa itu "Bundler"? Bundler adalah dependancy manager semua gems (library Ruby) untuk project aplikasi yang dibangun dengan Rails. Dengan menggunakan bundle kita memastikan bahwa requirement gems aplikasi web kita terpenuhi.

Microsoft Windows ( versi >= 7)

Instalasi Rails di sistem operasi Windows, bisa dibilang gampang-gampang susah (sebenarnya instalasi di GNU/Linux dan Apple macOS juga tidak bisa dibilang gampang 😂😂😂), karena ada beberapa perangkat lunak pendukung yang harus ada. Berikut langkah-langkahnya:

1. Install Ruby dengan mengunduh/men-download dan menjalankan installer RubyInstaller. Pastikan opsi "Add Ruby executables to your PATH" dicentang pada saat proses instalasi


2. Install MSYS2 dari http://www.msys2.org/, karena Rails akan membutuhkan library native Ruby yang dikompilasi dengan compiler C


3. Unduh/download NodeJS dan jalankan installer-nya dari https://nodejs.org


4. Buka/cari aplikasi "Start Command Prompt with Ruby" dari RubyInstaller yang terdapat pada menu utama Windows


5. Pada Command Prompt Ruby ketikkan perintah:

   gem install rails
   gem install bundler

Apabila tidak ada masalah dalam proses perjalanan instalasinya maka Rails siap digunakan.

Membangun Aplikasi Web

Hampir serupa dengan model framework fullstack seperti Meteor yang saya tulis pada artikel sebelumnya, apabila kita akan membuat aplikasi web dengan Rails maka Rails akan membuatkan skeleton/kerangka dari aplikasi kita. Untuk membuat aplikasi web baru dengan Rails, maka pada Terminal jalankan perintah berikut:

rails new aplikasiweb -d sqlite3 -B
cd aplikasiweb/
bundle install

Tunggu sampai proses selesai. Perintah diatas membuat sebuah direktori aplikasi web baru bernama "aplikasiweb" beserta dengan skeleton/kerangka dan semua requirement yang dibutuhkan dan secara default menggunakan database sqlite3 sebagai backend penyimpanan datanya, bagi penggemar MySQL bisa diganti dengan mysql, bagi penggemar PostgreSQL bisa diganti dengan postgresql. SQLite3 dipilih karena dia sangat sederhana, hanya berbasis file dan tidak membutuhkan instalasi perangkat lunak tambahan, cocok untuk aplikasi web sederhana untuk belajar.

Controller dan Views

Ketika membangun aplikasi web berbasis MVC, biasanya saya membuat "Controller" terlebih dahulu, ada juga dengan yang mulai dengan membangun "Model" terlebih dahulu, ini masalah selera dan kebiasaan kalau menurut saya. Controller bisa kita anggap sebagai logika bisnis dari sebuah aplikasi, yang mengatur proses/flow aplikasi berjalan. Untuk membuat controller bernama "Home" dengan sebuah metode bernama "index" kita akan menjalankan perintah berikut:

rails generate controller home index

Setelah menjalankan perintah ini kita akan melihat bahwa rails membuat beberapa file, tetapi yang paling penting adalah file app/controllers/home_controller.rb dan app/views/home/index.html.erb, kedua file ini yang akan kita modifikasi isinya alias coding. Buka file explorer dan kemudian arahkan ke dalam direktori/folder aplikasiweb dan bukalah kedua file tersebut dengan editor teks favorit masing-masing.

Isikan kedua file tersebut dengan kode-kode seperti berikut ini:

app/controllers/home_controller.rb

class HomeController < ApplicationController
  def index
    @judul = 'Aplikasi Web Rails'
    @isi = 'Halo Rails!'
  end
end

app/views/home/index.html.erb

<h1><%= @judul %></h1>
<hr/>
<p><%= @isi %></p><

Fungsi dari file app/views/home/index.html.erb adalah sebagai "views" atau "tampilan" bagi controller "Home" dan metode "index".

Untuk melihat bagaimana aplikasi web sederhana ini berjalan, maka pada Terminal/console, pastikan kita berada di dalam direktori aplikasiweb, jalankan perintah berikut:

rails server -p 9000

Kemudian bukalah browser favorit masing-masing dan arahkan ke URL: http://localhost:9000/home/index dan kita akan melihat hasil seperti gambar berikut:

Apabila pada browser terlihat seperti tampilan di atas maka, selamat! kita sudah berhasil membuat aplikasi web dengan Rails pertama kita!

Sekarang kita ubah coding controller "Home" kita:

app/controllers/home_controller.rb

class HomeController < ApplicationController
  # metode index
  def index
    @judul = 'Aplikasi Web Rails'
    @isi = 'Halo Rails!'
  end
  
  # metode informasi
  def informasi
    @judul = 'Halaman Informasi'
    @isi = 'Ini adalah halaman informasi terkait dengan aplikasi web yang dibangun dengan Rails. '
    @isi << 'Rails adalah framework MVC berbasis Ruby yang banyak digunakan oleh pengembang aplikasi web '
    @isi << 'di Internet'
    
    # array daftar framework
    @framework = [{:url => 'http://rubyonrails.org/', :text => 'Ruby on Rails'},
      {:url => 'https://codeigniter.com/', :text => 'Codeigniter'},
      {:url => 'http://www.web2py.com/init/default/index', :text => 'Web2py'}
    ]
  end
end

Kita mendefinisikan metode baru bernama "informasi" yang nantinya akan diakses melalui URL http://localhost:9000/home/informasi. Tetapi sebelum bisa diakses kita perlu membuat sebuah file "views" yang akan menampilkan isi dari metode "informasi". Buatlah file app/views/home/informasi.html.erb dan isikan dengan kode berikut:

app/views/home/informasi.html.erb

<h1><%= @judul %></h1>
<hr/>
<p><%= @isi %></p>
<p>Framework MVC populer antara lain:
<ul>
<% @framework.each do |mv| %>
  <li><a href="<%= mv[:url] %>"><%= mv[:text] %></a></li>
<% end %>    
</ul>
</p>

Kemudian bukalah file config/routes.rb dan ubahlah isi file tersebut menjadi seperti berikut:

config/routes.rb

Rails.application.routes.draw do
  root 'home#index'
  get 'home/index'
  get 'home/informasi'
  
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

Buka browser kemudian arahkan ke URL: http://localhost:9000/home/informasi dan kita akan melihat hasil seperti gambar berikut:

Jangan lupa menambahkan daftar "route" pad file config/routes.rb, setiap kali kita menambahkan metode pada controller agar bisa diakses melalui browser.

Integrasi dengan framework UI (Bootstrap)

Sejauh ini contoh aplikasi yang kita buat tampilannya sangat sederhana, karena kita belum menambahkan CSS di aplikasi kita. Framework seperti Rails menyediakan cara mengintegrasikan framework UI seperti Bootstrap tanpa harus men-setup secara manual. Caranya adalah seperti ini:

1. Matikan server Rails yang sedang berjalan pada Terminal/console/command prompt dengan menekan "Ctrl+C"


2. Buka file Gemfile (bukan Gemfile.lock) yang terdapat pada root direktori aplikasi web Rails kita dengan editor teks dan kemudian pada baris akhir tambahkan:
   

   Gemfile

   
   

   # Bootstrap
   gem 'bootstrap', '~> 4.0.0.beta'
   gem 'jquery-rails'



3. Kembali ke Terminal/console/command prompt, masuk ke direktori aplikasi web kita dan jalankan perintah:
   

   bundle install
   mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss



4. Buka file app/assets/stylesheets/application.scss dengan editor teks dan kemudian pada baris akhir tambahkan:
   

   app/assets/stylesheets/application.scss

   
   

   @import "bootstrap";



5. Buka file app/assets/javascripts/application.js dengan editor teks dan kemudian pada baris akhir tambahkan:
   

   app/assets/javascripts/application.js

   
   

   //= require jquery3
   //= require popper
   //= require bootstrap



6. Hidupkan kembali server Rails dengan perintah:
   

   rails server -p 9000

Sebelum kita lihat efek perubahan halaman web kita dengan terinstallnya Bootstrap, mari kita ubah dulu kode di beberapa file views kita menjadi seperti berikut ini:

app/views/home/index.html.erb

<div class="jumbotron jumbotron-fluid" style="background-image: url('/bg.jpg'); background-size: cover;">
  <div class="container">
    <h1 class="display-3">Selamat Datang</h1>
    <p class="lead">Ruby on Rails!</p>
  </div>
</div>
<div class="container">
<h1><%= @judul %></h1>
<hr/>
<p><%= @isi %></p>
</div>

app/views/home/informasi.html.erb

<div class="container">
<h1 class="text-center"><%= @judul %></h1>
<hr/>
<p><%= @isi %></p>
<p>Framework MVC populer antara lain:
<ul>
<% @framework.each do |mv| %>
  <li><a href="<%= mv[:url] %>"><%= mv[:text] %></a></li>
<% end %>    
</ul>
</p>
</div>

Buatlah dua file views baru, masing-masing bernama _main_menu.html.erb dan _footer.html.erb, dan letakkan kedua file ini pada direktori app/views/layouts/ dan isikan masing-masing dengan kode berikut:

app/views/layouts/_main_menu.html.erb

<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="/">Aplikasi Web Rails</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainMenu" aria-controls="mainMenu" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="mainMenu">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item"><a class="nav-link" href="/">Beranda</a></li>
    <li class="nav-item"><a class="nav-link" href="/home/informasi">Informasi</a></li>
  </ul>
</div>
</nav>

app/views/layouts/_footer.html.erb

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-3">Selamat Datang</h1>
    <p class="lead">Ruby on Rails!</p>
  </div>
</div>
<div class="container">
<h1><%= @judul %></h1>
<hr/>
<p><%= @isi %></p>
</div>

Kemudian bukalah file app/views/layouts/application.html.erb yang merupakan file views layout utama aplikasi Rails dan isikan dengan kode berikut:

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Aplikasi Web Rails</title>
    <meta name="dc.creator" content="Aditya Dees" />
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= render "layouts/main_menu" %>
    <%= yield %>
    <%= render "layouts/footer" %>
  </body>
</html>

File views app/views/layouts/_main_menu.html.erb dan app/views/layouts/_footer.html.erb dalam terminologi Rails disebut sebagai "partial views", yaitu file views yang merupakan potongan-potongan untuk dimasukkan ke dalam file views lain, dalam hal ini kedua file tersebut kita masukkan ke dalam file views app/views/layouts/application.html.erb dengan menggunakan perintah render. Tanda underscore ditiadakan ketika kita meng-include "partial views" dengan perintah render. Apabila semua kode telah kita tuliskan dengan benar maka kita akan melihat hasil aplikasi web kita menjadi seperti berikut ini:

 

Bisa kita lihat setelah diintegrasikan dengan Bootstrap, tampilan aplikasi web kita menjadi lebih bagus dan tentunya menjadi responsive secara otomatis.

Model

Kita sudah melihat bagaimana cara kerja controller dan views pada Rails, dan tentunya aplikasi web yang dinamis akan memiliki konten yang dibuat secara dinamis juga, dimana konten-konten dinamis ini biasanya disimpan dan diambil dari database. Model dalam hal ini mendefinisikan bagaimana data dari sebuah aplikasi dibuat, diambil/dibaca, diubah dan dihapus atau bahasa kerennya operasi CRUD (Create, Read, Update, Delete). Untuk lebih jelasnya mengenai bagaimana pemanfaatan Model di Rails akan saya tuliskan pada artikel berikutnya :).