Membuat Controller untuk user

Sebelumnya kita telah membuat database dengan salah satu tabel user yang ada di dalamnya, artinya kita sudah mempersiapkan tempat untuk menyimpan apabila ada user yang melakukan register, tapi bagaimana caranya user dapat berinteraksi dengan tabel tersebut, maka pada praktek ini akan mulai dijelaskan tentang controller yang akan mengatur bagaimana data dapat dibuat, dilihat isinya, diupdate dan dihapus.

Membuat Controller

Instalasi program node.js

  • node.js adalah suatu framework javascript yang dibutuhkan untuk mengatur tampilan aplikasi web
  • karena aplikasi kita nantinya akan langsung menggunakan program getbootstrap, dimana program getbootstrap tersebut membutuhkan program node.js supaya bisa berjalan , maka lakukan download dan instalasi aplikasinya
  • klik pada link ini Node.js
    • klik pada pilihan windows installer, kemudian download filenya
  • setelah selesai di download jalankan programnya dengan melakukan double klik
  • Perlu diingat!, jangan lupa setelah melakukan instalasi ini anda harus melakukan restart komputer anda.

Membuat controller user

  • klik start, ketik command , klik command prompt with ruby
  • cd intomyidea
  • membuat controller user, ketik
    rails generate controller users new create index show edit update destroy
  • perlu diingat nama controller gunakan huruf kecil
  • dan harus dalam bentuk jamak dalam bahasa inggris
  • jadi misalnya user menjadi users atau match menjadi matches

penjelasan masing-masing controller

  • suatu data pada umumnya dilakukan 4 proses berikut
    • diciptakan (Create)
    • dilihat isinya (Read)
    • diubah isinya(Update)
    • dihapus (Delete)
  • keempat proses diatas dalam bahasa inggris dapat kita singkat menjadi CRUD
  • apabila dihubungkan dengan perintah diatas, sewaktu kita membuat controller maka
    • perintah Create diwakili oleh modul New dan Create
    • perintah Read diwakili oleh modul Index dan Show
    • perintah Update diwakili oleh modul Edit dan Update
    • perintah Delete diwakili oleh modul Destroy
  • new dan create
    • new dan create adalah pasangan program untuk membuat data baru
    • jadi misalnya ada orang bernama jenny melakukan register/mendaftarkan
    • saat jenny melakukan klik pada tombol register maka yang akan dipanggil adalah perintah-perintah dalam program new
    • selanjutnya jenny mengisi datanya
    • saat jenny melakukan klik pada tombol save maka yang akan dipanggil adalah kumpulan perintah dalam program create
  • edit dan update
    • edit dan update adalah pasangan program saat user melakukan koreksi data
    • misalnya saat jenny sudah terdaftar sebagai user dan terdaftar dengan alamat email jenny@yahoo.com, kemudian dia ingin mengganti data emailnya dengan email yang lain misalnya jennytanu@gmail.com, maka saat jenny melakukan klik pada tombol edit pada data miliknya, yang akan dipanggil adalah perintah dalam blok edit
    • setelah jenny melakukan perubahan data dan mengganti tulisan jenny@yahoo.com dengan jennytanu@gmail.com dan dia melakukan klik pada tombol update, maka komputer akan memanggil blok program update
  • index dan show
    • kedua blok ini walaupun bukan program yang berpasangan tapi kegunaannya hampir sama dimana keduanya bertugas menampilkan data ke layar
    • index bertugas untuk menampilkan data seluruh user yang ada
    • sedangkan show bertugas untuk menampilkan data milik satu user saja
  • destroy
    • sesuai dengan namanya destroy adalah bagian dari program yang digunakan untuk menghapus

Membuat program di dalam user controller

  • Perlu diingat!
    • saat kita menulis perintah diatas, maka secara otomatis rails akan membuatkan 1 file kosong di lokasi app/controllers/users_controller.rb
  • jalankan program sublime.
    • pilih menu file, open folder dan pilih c:\sites\intomyidea
    • buka file app/controllers/users_controller.rb
    • hapus seluruh isinya dan lakukan copy-paste blok program dibawah ini
    class UsersController < ApplicationController

      def new
        @user = User.new
      end

      def create
        @user = User.new(user_params)
        @user.role = 'guest'
        if @user.save
          flash[:success] = 'Proses pendaftaran sukses'
          redirect_to users_path
        else
          render 'new'
        end
      end

      def show
        @user = User.find(params[:id])
      end

      def index
        @search = User.search(params[:q])
        @users = @search.result.order('created_at DESC').paginate(page:params[:page],per_page:10)
      end

      def edit
        @user = User.find(params[:id])
      end

      def update
        @user = User.find(params[:id])
        if @user.update_attributes(user_params)
          flash[:success] = 'Perubahaan anda berhasil disimpan'
          redirect_to users_path
        else
          flash[:error] = @user.errors.full_messages[0]
          redirect_to edit_user_path
        end
      end

      def destroy
        @user = User.find(params[:id])
        @user.destroy
        flash[:success] = 'Data berhasil dihapus'
        redirect_to users_path    
      end

    private

      def user_params
        params.require(:user).permit(
          :username, 
          :password, 
          :password_confirmation, 
          :email, 
          :role
          )
      end

    end

Membuat file rute program di config/routes.rb

  • selanjutnya buka file config/routes.rb
    • hapus isinya dan ganti dengan ketikan berikut
    Rails.application.routes.draw do

      root to: 'users#index'

      # for object users
      resources :users

    end
  • Penjelasan dari perintah diatas.
    • program anda telah memiliki satu controller dengan nama user, maka anda akan memiliki beberapa hyperlink berikut:
    • localhost:3000/users/new , link ini untuk memanggil fungsi new, yang artinya untuk membuat user baru
    • localhost:3000/users , link ini untuk memanggil fungsi index, yang artinya untuk menampilkan daftar semua user
  • setelah selesai, kembali ke command prompt dan jalankan server dengan mengetik
    • rails server
  • buka browser dan ketik localhost:3000 pada urlnya
    • apabila tampil tulisan Users#index
    • berarti langkah anda sukses

Membuat Form New User

  • pada sublime, buka file app/views/users/new.html.erb
    • hapus isinya dan ganti dengan ketikan berikut
    <% provide(:title, 'Membuat user baru') %>
    <%= render 'user_form' %>
  • pada program diatas arti kata-kata render, adalah memanggil file lain yang diberi nama _user_form.html.erb
  • karena itu tekan Ctrl + N untuk membuat dokumen baru,
    • tekan Ctrl + S, simpan di folder app/views/users/ _user_form.html.erb
    • (awas jangan lupa tanda underscore yang ada di awal)
  • lakukan copy, paste pada ketikan dibawah ini.
  <h2>New Account</h2>
  <%= form_for @user do |f| %>
    <%= render 'common/form_errors', object: @user %>

    <h3>
      <%= f.label :username, "User name"%><br>
      <%= f.text_field :username %>
    </h3>

    <h3>
      <%= f.label :email, "Email"%><br>
      <%= f.text_field :email %>
    </h3>

    <h3>
      <%= f.label :password, "Password"%><br>
      <%= f.password_field :password %>
    </h3>

    <h3>
      <%= f.label :password_confirmation, "Password Konfirmasi"%><br>
      <%= f.password_field :password_confirmation %>
    </h3>

    <%= f.submit "Submit", class: "btn btn-info login-box-button" %>
  <% end %>

Membuat Form yang akan dipanggil bila ada error

  • Tujuan dari file ini apabila nanti saat memasukkan data, user ada error, maka error message bisa ditampilkan dibawahnya
  • Tekan Ctrl + N untuk membuat file, baru
    • tekan Ctrl + S , dan simpan di lokasi \App\views\common\ _form_errors.html.erb
    • khusus untuk common, buat nama foldernya secara manual, dengan klik pada tombol new folder
  <% if object.errors.any? %>
    <% object.errors.full_messages.each do |pesan| %>
      <div class="alert alert-danger">
        <a class="close" data-dismiss="alert">×</a> 
        <p class="text-danger"><strong><%= pesan %></strong></p>
      </div>
    <% end %>
 <% end %>
  • tekan ctrl + s untuk menyimpan
  • pastikan server rails tetap berjalan, bila belum, jalankan dengan rails server
  • buka browser dan ketik localhost:3000/users/new
    • hasilnya bila sukses di layar anda bisa memulai memasukkan data user
    • cobalah untuk memasukkan data 3 orang user

Membuat Form untuk menampilkan data seluruh users

  • pada sublime, buka file app/views/users/index.html.erb
    • hapus isinya dan ganti dengan ketikan berikut
  <% if @users.any? %>
       <table class="table table-striped">
        <thead>
          <tr>
            <th>User Name</th>
            <th>Role</th>
            <th>Email</th>
            <th> </th>
          </tr>
        </thead>
        <tbody>
            <%= render @users %>
        </tbody>
      </table>
    <div  class="digg_pagination">
        <%= will_paginate %>
    </div>
  <% else %>
    <p>Maaf, Tidak ada data user yang terdaftar</p>
  <% end %>
  • pada program diatas arti kata-kata render @users
  • karena itu tekan Ctrl + N untuk membuat dokumen baru,
    • tekan Ctrl + S, simpan di folder app/views/users/ _user.html.erb
    • (awas jangan lupa tanda underscore yang ada di awal)
  • lakukan copy, paste pada ketikan dibawah ini.
  <tr>
    <td><%= user.username %></td>
    <td><%= user.role %></td>
    <td><%= user.email %></td>
  </tr>
  • simpan dengan Ctrl + S, dan buka browser, serta ketik localhost:3000