Rails - Make UI (landing page home) with javascript, erb, and sass

Melanjutkan tutorial kemarin tentang route, controller, view, tutorial kali ini akan membahas tentang membuat sebuah home page website pada Rails dengan menggunakan javascript, erb, dan sass.

Oke yang pertama silahkan generate terlebih dahulu controller home, caranya dengan mengetikkan code pada terminal ubuntu seperti ini,

Selanjutnya buat route baru untuk halaman home 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
  # root 'application#hello'
  get 'users' => 'users#index'
  get '' => 'home#index'

Kemudian, buat controller baru untuk menampilkan halaman index home dengan mengedit file home_controller.rb pada path app/controllers/ menjadi seperti ini,
class HomeController < ApplicationController
 def index


Setelah itu edit file application.html.erb pada path app/views/layouts/ menjadi seperti ini,
<!DOCTYPE html>
    <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' %>

    <div class="header">
      <div class="content">
        <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="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
    <div class="isi">
      <%= yield %>
    <div class="footer">

Selanjutnya, edit file home.scss pada path app/assets/stylesheets/ menjadi seperti ini,
// Place all the styles related to the home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here:
 margin: 0;
 padding: 0;

// Global css
 text-align: center;

 height: 50px;
 line-height: 50px;
 width: 100%;
 background-color: #1da1f2;
 top: 0;
  padding: 0 50px;
   text-decoration: none;
   padding: 15px 20px;
    opacity: 0.1;
    cursor: pointer;
  .dropdown {
      position: relative;
      display: inline-block;
      .dropdown-content {
       display: none;
       position: absolute;
       background-color: #f9f9f9;
       min-width: 160px;
       overflow: auto;
       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        color: black;
        padding: 6px 16px;
        text-decoration: none;
        display: block;
         background-color: #f1f1f1
 padding: 10px 20px;
 border: 1px solid #ddd;
 border-radius: 3px;
 width: 90%;
 margin: 100px auto; 
.footer {
 line-height: 50px;
 text-align: center;
 border-top: 1px solid #ddd;

Edit pula file home.js pada path app/assets/javascripts/ menjadi seperti ini,
// Place all the behaviors and hooks related to the matching controller here.
// All this logic will automatically be available in application.js.
function myFunction() {

$(document).mouseup(function (e)
    var container = $('.dropdown-content');

    if (! // if the target of the click isn't the container...
        && container.has( === 0) // ... nor a descendant of the container

Terakhir buat file index.html.erb pada path app/views/home/ kemudian isikan code berikut ini,
<%= provide(:title, "Home") %>
<h1 class="text-center">Welcome to my ruby website</h1>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sehingga hasilnya akan tampak seperti ini,