Melanjutkan tutorial kemarin tentang route, controller, view, tutorial kali ini akan membahas tentang membuat sebuah home page website pada Rails dengan menggunakan javascript
Oke yang pertama silahkan generate terlebih dahulu controller home, caranya dengan mengetikkan code pada terminal ubuntu seperti i
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 http://guides.rubyonrails.org/routing.html
# root 'application#hello'
get 'users' => 'users#index'
get '' => 'home#index'
end
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
end
end
Setelah itu edit 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">
<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>
</div>
</div>
</div>
<div class="isi">
<%= yield %>
</div>
<div class="footer">
COPYRIGHT © 2016 CODEDOCT.COM ALL RIGHTS RESERVED.
</div>
</body>
</html>
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: http://sass-lang.com/
body{
margin: 0;
padding: 0;
}
// Global css
.text-center{
text-align: center;
}
.header{
height: 50px;
line-height: 50px;
width: 100%;
background-color: #1da1f2;
position:fixed;
top: 0;
.content{
padding: 0 50px;
.button-header{
text-decoration: none;
padding: 15px 20px;
&:hover{
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);
a{
color: black;
padding: 6px 16px;
text-decoration: none;
display: block;
&:hover{
background-color: #f1f1f1
}
}
}
}
}
}
.isi{
padding: 10px 20px;
border: 1px solid #ddd;
border-radius: 3px;
width: 90%;
margin: 100px auto;
}
.footer {
position:fixed;
left:0px;
bottom:0px;
height:50px;
width:100%;
background:#fff;
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() {
$('.dropdown-content').toggle('slow');
}
$(document).mouseup(function (e)
{
var container = $('.dropdown-content');
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
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>
<br>
<p>
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.
</p>
Sehingga hasilnya akan tampak seperti ini,
===DONE!===
