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
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 --installKhusus 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 --systemLagi-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/libxml2Setelah 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 bundlerMicrosoft 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:
- Install Ruby dengan mengunduh/men-download dan menjalankan installer RubyInstaller. Pastikan opsi "Add Ruby executables to your PATH" dicentang pada saat proses instalasi
- Install MSYS2 dari http://www.msys2.org/, karena Rails akan membutuhkan library native Ruby yang dikompilasi dengan compiler C
- Unduh/download NodeJS dan jalankan installer-nya dari https://nodejs.org
- Buka/cari aplikasi "Start Command Prompt with Ruby" dari RubyInstaller yang terdapat pada menu utama Windows
- Pada Command Prompt Ruby ketikkan perintah:
gem install rails gem install bundler
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
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 indexapp/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.
app/controllers/home_controller.rb
class HomeController < ApplicationController
def index
@judul = 'Aplikasi Web Rails'
@isi = 'Halo Rails!'
end
endapp/views/home/index.html.erb
<h1><%= @judul %></h1>
<hr/>
<p><%= @isi %></p><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
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"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>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
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:
- Matikan server Rails yang sedang berjalan pada Terminal/console/command prompt dengan menekan "Ctrl+C"
- Buka file
Gemfile(bukanGemfile.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' - 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 - Buka file
app/assets/stylesheets/application.scssdengan editor teks dan kemudian pada baris akhir tambahkan:app/assets/stylesheets/application.scss@import "bootstrap"; - Buka file
app/assets/javascripts/application.jsdengan editor teks dan kemudian pada baris akhir tambahkan:app/assets/javascripts/application.js//= require jquery3 //= require popper //= require bootstrap - 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>
_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>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="Ari Nugraha" />
<%= 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>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 :).
Komentar