Rails - CRUD (Create) database

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!===