Membuat User Autentikasi di Ruby on Rails dengan Devise

Sekarang ane mau ngenalin gem devise. Siapa tahu setelah kenal jadi jatuh cinta. Hehehe. Gem devise ini mempermudah kerjaan dalam hal autentikasi user di Rails. Semuanya begitu simpel, jadi kita ga perlu repot lagi nanganin yang namanya login, logout, register, change password dll. Hebatkan ya.

Biar kenal lebih jauh bisa dibaca dokumentasi disini.

Nah langsung aja buka file Gemfile. Input kode dibawah

gem 'devise'

Lalu  di terminal (ctrl+alt+t) karena ane pake linux. Kalo windows di cmd nya ya.

bundle install

rails generate devise:install

Nah tambahin kode dikit di config/environments/development.rb

config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

Ke terminal lagi . ubah MODEL jadi nama model yang mau dibuat(bisa admin, user, dll asal belum ada aja di routenya)

rails generate devise MODEL

ane pake model user jadi

rails generate devise User

Lalu jangan lupa run migrate

rails db:migrate

Untuk generate view devisenya :

rails generate devise:views

Setelah generate, devise lengkap membuat tampilan loginnya seperti dibawah ini. Ketik localhost:3000/users/sign_in di Url link.

 

Sebelum login kita signup dulu, isi email dan passwordnya  

 

Dan Selamat anda berhasil masuk. 

 

Untuk logout ane tambahin sedikit kode di app/views/layouts/application.html.erb

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <% if user_signed_in? %>
       <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
       <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Blog</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Teknologi</a>
            <a class="dropdown-item" href="#">Contoh</a>
              <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="<%= destroy_user_session_path %>" data-method="delete">Logout</a>
        <% else %>
               <a class="dropdown-item" href="<%= new_user_session_path %>">Login</a>
              </div>
        <% end %>
     </li>
   </ul>
 </div>

 Dan kurang lebih tampilannya seperti ini

Saat klik Logout , flash alert signed out successfully muncul tandanya user telah logout.

 

Dan itulah kemudahan user autentikasi dengan gem devise. Sepertinya tidak membutuhkan waktu 5 menit untuk membuat login, logout, dll.

  

Read More

Bagaimana caranya agar URL lebih humanis (Ruby on Rails - FriendlyId)

Bagaimana ya caranya biar url kita lebih terlihat cantik, daripada punya url kaya gini:

http://contoh.com/post/54321

Kan lebih enak kalo kaya gini :

http://contoh.com/post/cara-url-lebih-humanis

Jadi lebih terlihat friendly dan enak dilihat. Nah ada plugin slug untuk Active Record Rails namanya FriendlyId. Membantu kita membuat URL cantik sob. Bisa dibaca buat penjelasannya disini FriendlyId Github .

Langkah menerapkannya sama seperti instalasi gem lain.
Di gemfile

gem 'friendly_id', '~> 5.2.4'

Lalu eksekusi di terminal (ctrl+alt+t) (saya pake linux) kalo di windows ya di cmd

bundle install

masih di terminal eksekusi ini

rails generate friendly_id

Disini saya mau membuat crud dari Post jadi pake generate scaffold agar otomatis dibuatkan MVC nya sekalian.

rails g scaffold post title:string body:text description:text slug:string:uniq

Jangan lupa kita migrate

rails db:migrate

Lalu buka file app/model/post.rb. Dan tambahkan kode ini

class Post < ApplicationRecord
 extend FriendlyId
 friendly_id :title, use: :slugged

 def should_generate_new_friendly_id?
  title_changed?
 end
end

dan app/controllers/posts_controller.rb

class PostsController < ApplicationController
  private
    # Use callbacks to share common setup or constraints between actions.
    def set_post
      @post = Post.friendly.find(params[:id])
    end

app/config/routes.rb

Rails.application.routes.draw do
  root to: 'posts#index'
  resources :posts
end

lalu kita running server, buka terminal lagi

rails s

Lalu kita buka browser dan kita inputkan post title, body dan description (slug biarkan kosong)

 

Dan otomatis url sesuai dengan title kita.

Terlihat humanis kan

Itulah cara agar url kita terlihat lebih friendly.

Bonus :
Ubah title app jadi ada title post sesuai page yang dibuka.
app/views/layouts/application.html.erb

<title><%= yield(:page_title) %> | Post </title>

app/views/posts/show.html.erb

<% provide(:page_title, @post.title) %>

Referensi :

• Github-FriendlyId 
• youtube-How to build a blog with Rails 5 and Bootstrap 4 - Part 1

Read More

Bagaimana cara install Mockup Pencil di Ubuntu

Aplikasi Pencil Mockup merupakan tools yang membantu kita membuat design UI (User Interface). Jadi misalnya mau ngebangun aplikasi sosmed kita rancang dulu prototype nya. Di beranda bakal ada image user, informasi user, kolom komentar, kolom status, tanggal post, status teman dll. Nah, terus kita atur shapenya mau gimana, layout atau tata letaknya, bentuknya kolom apa tabel, buttonnya. Itu cuma sebagian fungsi dari pencil. 

Pencil bisa juga digunakan untuk menggambar diagram seperti flowchart. Pencil sangat dibutuhkan karena tools ini berguna sebagai komunikasi antara si develop dengan user atau client, jadi si client bisa ngasih kritik pada rancangan kalo misal aplikasi yang dia inginkan kurang atau tidak sesuai. Dan perlu diingat aplikasi ini open source alias gratis tis tis tis.

Langsung aja ke proses instalasi. Ini dikhususkan buat pengguna os linux Ubuntu ya.

Pertama download dulu disini aplikasi mockup . Lalu pilih Download for Ubuntu.

Kemudian buka directory Downloads di terminal (Ctrl+alt+t)

cd Downloads 

Ketikkan

ls *.deb

sudo dpkg -i <nama file dari pencil.deb> 

Seperti pada gambar

Tunggu hingga selesai. Dan search pencil. Klik dan tadaa

Semoga membantu ya

Read More

Cara Install Xampp di Linux Ubuntu

Xampp di dunia web kayanya udah ga aneh lagi, xampp adalah server localhost yang terdiri dari beberapa program yaitu Apache HTTP Server, MySQL database, dan bahasa pemrograman PHP dan Perl (Singkatan dari XAMPP (X, Apache, MySQL, PHP, Perl). Xampp sifatnya open source jadi free software alias gratis diunduh siapapun hehe. Seneng aja gratisan mah.

Oke langsung aja ini langkah instalasinya .

1. Download dulu xamppnya di websitenya untuk download xampp. Nah pilih yang Xampp for linux. 
2. Kemudian kita masuk ke directory Downloads. Buka terminal (Ctrl+alt+t). Lalu ketik

   cd ~/Downloads
   

3.  Lalu ketik (sesuai dengan nama installer.run)
   

   chmod 755 xampp-linux-x64-7.2.12-0-installer.run
   

4.  Dan terakhir

   sudo ./xampp-linux-x64-7.2.12.0-installer.run
   

Setelah instalasi, kita running melalui terminal. ketikkan :

sudo /opt/lampp/lampp start

Dan jika seperti ini

Oke Xampp server sudah bisa dijalankan.
Untuk uninstall cukup ketikan

sudo /opt/lampp/uninstall

Read More

Cara Menyimpan Video Youtube di Linux Ubuntu (Aplikasi Clipgrab)

Kadang bingung kalo di linux pake aplikasi apa yang cocok untuk download video youtube. Ane merekomendasikan aplikasi Clipgrab karena aplikasi ini juga langsung terhubung sama youtube, vimeo, metacafe dan situs video lain. Aplikasi Clipgrab adalah aplikasi yang memudahkan kita untuk mendownload video di dalam os linux.  Jadi misal mau download video tutorial kita tinggal copy aja linknya di aplikasi dan tinggal pilih mana yang mau kita download, bahkan sistem pencarian (seperti pada youtube) juga ada. Ini langsung aja dah langkah-langkah bagaimana install aplikasi Clipgrab di linux.

1.  Buka terminal atau shortcutnya ctrl+alt+t
2.  Ketikan perintah berikut 

sudo apt-add-repository ppa:clipgrab-team/ppa
sudo apt-get update

3. Lalu perintah

   sudo apt-get install clipgrab

4. Tunggu sampai selesai. Dan inilah tampilan setelah di install.
   

Selamat aplikasi sudah bisa digunakan. misal kita mau download video blackpink, tinggal pilih tab search lalu ketik blackpink dan langsung pilih videonya mau yang mana.

Nah setelah itu ane pilih video yang pertama, maka dia bakal nampilin alamat situsnya. keren kan. langsung klik grab this clip! pilih penyimpanannya mau dimana, otomatis dah ke download.

Selamat mencoba.

Read More