menu

Rails - Authentification (login)


Melanjutkan tutorial sebelumnya kita sudah menyiapkan database untuk keperluan login. Tutorial kali ini kita akan membuat sistem login yang akan menyimpan session pada Ruby on Rails.

Oke, langsung saja kita mulai prakteknya,

Pertama, buat terlebih dahulu route untuk loginnya dengan mengedit file routes.rb pada path config/ menjadi seperti ini,
Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  # root 'application#hello'
  get 'users' => 'users#index'

  get '' => 'home#index'

  get 'signup' => 'users#_signup'
  post 'signup' => 'users#_addUser'

  get 'login' => 'auth#index'
  post 'login' => 'auth#create'

  get 'edit/:id' => 'users#_show', as: :user
  post 'edit/:id' => 'users#_edit'

  delete 'delete/:id' => 'users#_delete'
end

Selanjutnya, buat file controller baru dengan nama auth_controller.rb pada path app/controllers/ dan ketikkan code berikut,
class AuthController < ApplicationController
 def index
 end

 def create
  @user = User.find_by_email(params[:session][:email])
  if @user && @user.authenticate(params[:session][:password])
   session[:user_id] = @user.id
   redirect_to '/'
  else
   redirect_to 'login'
  end
 end
end

Kemudian buat file view baru pada folder baru juga, dengan nama file index.html.erb pada path app/views/auth/ ketikkan code berikut,
<%= provide(:title, "Login") %>
<div class="text-center">
 <h1>Login</h1>
 <br><br>
 <div class="form-group">
  <%= form_for(:session, url: login_path) do |f| %>
     <%= f.email_field :email, :placeholder => "Email", class: 'form-input', required: true %><br>
     <%= f.password_field :password, :placeholder => "Password", class: 'form-input', required: true %><br>
   <div class="left-float">
    <%= f.submit "Login", class: "btn-submit" %>
    OR <a href="/signup">Sign Up</a>
   </div>
  <% end %>
 </div>
</div>
<br>

Setelah itu tambahkan penanda jika sudah login, dengan mengedit file application.html.erb pada path app/views/layouts/ menjadi seperti ini,
<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %> | Page</title>
    <%= csrf_meta_tags %>

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

  <body>
    <div class="header">
     <div class="content">
      <div class="left-float">
       <a href="/" class="button-header">Home</a>
       <div class="dropdown">
        <a class="button-header dropbtn" onclick="myFunction()">Table</a>
        <div id="myDropdown" class="dropdown-content">
         <a href="/users">User</a>
         <a href="#">Link 2</a>
         <a href="#">Link 3</a>
        </div>
       </div> 
      </div>
      <div class="right-float">
       <% if current_user %>
        <a href="/" class="button-header"><%= current_user.email %></a>
       <% else %>
        <a href="/login" class="button-header">Login</a>
       <% end %>
      </div>
     </div>
    </div>
    <div class="isi">
     <%= yield %>
    </div>
    <div class="footer">
  COPYRIGHT © 2016 CODEDOCT.COM ALL RIGHTS RESERVED.
 </div>
  </body>
</html>

Terakhir, tambahkan method current_user jika user sudah login, dengan mengedit file application_controller.rb pada path app/controllers/ menjadi seperti ini,
class ApplicationController < ActionController::Base
   protect_from_forgery with: :exception
   helper_method :current_user
  def hello
  render html: "hallo, dunia"
   end

 def current_user
  @current_user ||= User.find(session[:user_id]) if session[:user_id]
 end

 def require_user
  redirect_to '/login' unless current_user
 end
end

Penambahan method current_user ini diletakkan pada application_controller.rb karena file tersebut akan selalu dipanggil pada saat mengakses controller manapun, jadi di controller manapun kita dapat mengakses siapa yang sedang login.

Sehingga tampilan akhirnya akan tampak seperti ini,

  • Pada saat sebelum login tulisan  disudut kanan atas awalnya akan bertuliskan login dan linknya akan menuju pada halaman login,


  • Sedangkan saat sudah login tulisan disudut kanan atas akan bertuliskan email yang sedang login,



===DONE!===