Happy Code,,
Pada tutorial
kemarin kita sudah belajar membuat salah satu dari sistem CRUD yaitu read,,
Tutorial kali ini, kita akan kembali membuat salah satu sistem CRUD yaitu create. sistem create ini merupakan sebuah sistem yang digunakan untuk menambahkan suatu field pada tabel database.
Oke, langsung saja kita praktekkan tutorialnya,,
Pertama, buat dulu route yang akan menampilkan halaman dari sistem create ini, 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'
end
Selanjutnya, tambahkan method _signup dan _addUser pada users_controller.rb yang terletak pada path app/controller/ dengan mengedit menjadi seperti ini,
class UsersController < ApplicationController
def index
@users = User.all
end
def _signup
@user = User.new
end
def _addUser
@user = User.new(user_params)
if @user.save
redirect_to '/users'
else
redirect_to '/'
end
end
private
def user_params
params.require(:user).permit(:first_name, :last_name, :nick_name, :address, :phone)
end
end
Kemudian, ubah sedikit code application.html.erb pada path app/views/layouts/ dengan menambahkan code pada header seperti ini,
.
.
.
<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">
<a href="/signup" class="button-header">SignUp</a>
</div>
</div>
</div>
.
.
.
Setelah itu, buat file html baru dengan nama _signup.html.erb pada path app/views/users/ dan tambahkan code berikut,
<%= provide(:title, "Sign Up") %>
<div class="text-center">
<h1>Sign up</h1>
<br><br>
<div class="form-group">
<%= form_for(@user, url: {action: "_addUser"}, method: "post") do |f| %>
<%= f.text_field :first_name, :placeholder => "First name", class: 'form-input', required: true %><br>
<%= f.text_field :last_name, :placeholder => "Last name", class: 'form-input', required: true %><br>
<%= f.text_field :nick_name, :placeholder => "Nick name", class: 'form-input', required: true %><br>
<%= f.text_area :address, :placeholder => "Address", class: 'form-input-textarea', required: true %><br>
<%= f.number_field :phone, :placeholder => "Phone number", class: 'form-input', required: true %><br>
<div class="left-float">
<%= f.submit "Create an account", class: "btn-submit" %>
</div>
<div class="right-float">
<!--input type="button" name="login" value="Login" class="btn-submit"-->
</div>
<% end %>
</div>
</div>
<br>
Terakhir edit file users.scss dan home.scss pada path app/assets/stylesheets/ seperti ini,
users.scss
// Place all the styles related to the users controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
.form-group{
width: 600px;
display: inline-block;
.form-input{
padding:20px;
width: 100%;
margin-bottom: 10px;
margin-top: 5px;
border-radius: 4px;
border: 1px solid #ddd;
}
.form-input-textarea{
padding:20px;
width: 100%;
margin-bottom: 10px;
margin-top: 5px;
height: 100px;
border-radius: 4px;
border: 1px solid #ddd;
}
.btn-submit{
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
&:hover{
background-color: #45a049;
}
}
}
home.scss
// 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;
}
.left-float{
float: left;
}
.right-float{
float: right;
}
.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;
}
Sehingga hasilnya akan tampak seperti ini,
Jika butuh sintax ruby yang lain bisa lihat
disini, sintax rails lihat
disini.
===DONE!===
