Membuat Aplikasi Sederhana User Profile dengan Ruby on Rails

Tak terasa hampir tiga bulan saya kuliah Web Application and Engineering, dan kini saatnya penghakimannya, final exam. Soalnya lumayan sederhana, tetapi pertanyaan membutuhkan wawasan yang luas terhadap dunia web.

Soal: Anda diminta membuat sebuah welcome page sederhana yang harus login terlebih dahulu untuk masuk ke page tersebut dengan autentikasi devise (lihat tulisan sebelumnya). Setelah login Anda dapat melihat profil Anda dan bisa melakukan editing pada profile tersebut. Ada beberapa pertanyaan yang menurut saya levelnya masuk kategori expert, seperti melakukan checking dengan java baik dari sisi client maupun server, hingga integration test dan pengembangan ke arah RESTful. Oke, kita jawab dulu pertanyaan yang mudahnya. Kira-kira tampilan sederhananya seperti ini:

Jawab: Pertama-tama siapkan folder beserta databasenya (saya menggunakan database postgresql saat ujian dengan sistem operasi UBUNTU, tetapi untuk lebih sederhana, kita gunakan saja bawaan dari RoR yaitu SQLite3).

rails new final

Masuk ke folder final, untuk membuat aplikasi welcome page. Kita akan membuat tiga scaffold yaitu user, utama, dan tabel. Utama adalah page sederhana bertuliskan “Welcome” yang berisi link untuk melakukan setting profile.

Buat model user dengan atribut nama dan alamat.

rails g scaffold user nama panggilan

Kode di atas menghasilkan model user dengan atribut nama dan alamat, dan operasi diberikan oleh Scaffold (New, Show, Update, dan Delete). Bisa juga ditulis rails g scaffold user nama:string panggilan:string. Tetapi secara default, RoR akan memberikan struktur data string. Di sini sengaja tidak ditambahkan alamat karena di soal, alamat (address) disisipkan lewat mekanisme migrasi database.

Migrasikan menjadi tabel:

rake db:migrate

Arahkan folder ke project. Jalankan server.

rails server

Buka http://localhost:3000/users dan masukan satu data baru.

Buka kembali program Devise yang telah kita buat sebelumnya. Kita akan mengarahkan user ke menu utama ketika selesai login. Buat kontroller dengan nama utama.

rails g controller utama index

Di sini index merupakan method yang akan mengarahkan ke profil user tersebut, nama, email, alamat dan lain sebagainya. Tambahkan pada \app\config\routes.rb.

resources :tabel

tabel di sini maksudnya page profil yang bersangkutan. Buat juga lengkap dengan controller dan view

rails g controller tabel index

lakukan Migrasi

rake db:migrate

Berikutnya buka file \app\views\utama\index.html.erb dan isi dengan kode berikut (pahami maksudnya):

<h1>Welcome</h1>

<%= link_to ‘Lihat Profile-ku’, tabel_index_path %>

Sisipkan satu field baru (alamat) ke tabel users.

rails g migration add_alamat_to_users alamat:string

Migrasikan ke database:

rake db:migrate

Berikutnya pada file \app\views\tabel\index.html.erb tambahkan juga kode berikut:

<h1>USER PROFILE</h1>

<p>

<strong>Nama:</strong>

<%= current_user.nama %>

</p>

<p>

<strong>Email:</strong>

<%= current_user.email %>

</p>

<p>

<strong>Panggilan:</strong>

<%= current_user.panggilan %>

</p>

<p>

<strong>Alamat:</strong>

<%= current_user.alamat %>

</p>

<td><%= link_to ‘Edit’, edit_user_path(current_user) %></td>

Arahkan routes ke utama#index

root :to => ‘utama#index’

Sedikit ada yang diutak-atik pada \app\views\users\_form.html.erb karena kita menambahkan satu field baru yaitu alamat. Tambahkan satu field terakhir sebelum <action>:

<div class=”field”>

<%= f.label :alamat %><br>

<%= f.text_field :alamat %>

</div>

Agar field alamat yang baru dapat diakses, pada users_controller.erb tambahkan ‘:alamat’:

def user_params

params.require(:user).permit(:nama, :panggilan, :alamat)

end

Terakhir, setelah edit profile link ke lihat profile pada \app\views\users\show.html.erb:

<%= link_to ‘Kembali ke Profile’, tabel_index_path %>

Berikutnya adalah membuat sistem autentikasi terhadap user dengan devise. Pertama-tama sisipkan pada Gemfile

gem ‘devise’

Lakukan instalasi

bundle install

Install devise yang baru ditambahkan pada Gemfile

rails generate devise:install

Setelah terinstall anda bebas membuat devise terhadap model Anda. Misalnya, user:

rails generate devise User

Perhatikan routes.rb dan user.rb jika Anda ingin menelusuri sistem devise bawaan Gem ‘devise’. Migrasikan:

rake db:migrate

Sedikit kelemahan dari devise adalah, kita tidak bisa sign out. Oleh karena itu, sisipkan kode di bawah ini pada body di \app\views\layout\application.html.erb. Note: sisipkan, jangan di replace semua !

<p class=”notice”><%= notice %></p>

<p class=”alert”><%= alert %></p>

<% if flash[:error] %>

<div id=”error”>

<%= flash[:error] %>

</div>

<% end %>

<div id=”container”>

<div id=”user_status”>

<% if user_signed_in? %>

Welcome <%= current_user.email %>! Not you?

<%= link_to “Sign out”, destroy_user_session_path, :method => :delete %>

<% else %>

<%= link_to “Sign up”, new_user_registration_path %> or

<%= link_to “Sign in”, new_user_session_path %>.

<% end %>

</div>

Terakhir, tambahkan pada app\controllers\utama_controller.erb di bagian atas (juga pada users_controller agar terjaga dari aksi hacking):

before_filter :authenticate_user!

Agar ketika user akan melihat profil dirinya, harus login terlebih dahulu. Arahkan route ke menu utama:

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s