Membuat Aplikasi POS dengan Ruby on Rails 4 part 1

September 18, 2014

Pengelolaan keuangan adalah salah satu hal pokok yang harus diperhatikan oleh usaha kecil dan menengah (UKM). Untuk membantu memantau kondisi bisnis, kita membutuhkan software Point of Sales ( POS) sederhana yang dapat membantu mencatat aktivitas transaksi. Berikut beberapa fitur yang akan di bangun :

Management Barang
Management Penjualan
Management User + Login

Persiapan

Pastikan di komputermu sudah terinstall:

Ruby versi 2.x
Rails versi 4.x
Database Mysql
Mozila Firefox

Kemudian berikut adalah Gems yang akan kita gunakan:

Devise
Cancan
Nested Form
Public Activity

Buat Project Baru

Membuat project baru dengan mysql

$ rails new sales -d mysql

$ cd sales

Edit gemfile tambahkan code baris berikut

  gem 'devise'   
  gem "cancancan"   
  gem "nested_form"    
  gem 'public_activity'

$ bundle install

Memasang Bootstraps

Buka url http://getbootstrap.com/getting-started/#download
Setelah download copy dan paste isinya ke dalam folder sales/app/assets
Semua file di folder css copy dan paste di sale/app/stylesheets
Semua file di folder js copy dan paste di sale/app/javascripts

Home

kita buat controller dan foldernya view lewat comand

rails g controller home

Buat file index di view/home
Isi dengan <p>welcome</p>
Edit config/routes.rb tambahkan kode berikut

 root to: 'home#index'

Memasang Devise

OK sampai sini bootstrap dan homenya sudah dibuat, sekarang kita akan buat login untuk user, berikut langkahnya

Generate devise

$ rake db:create

$ rails generate devise:install

$ rails generate devise User

$ rails generate model role name:string

$ rails g migration addRoleIdToUser role_id:integer

Setelah selesai lakukan migration database

$ rake db:migrate

Masuk ke folder app -> models kemudian Edit file model user dan role.rb

 class User < ActiveRecord::Base  
    belongs_to :role
    devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable
end

  
 class Role < ActiveRecord::Base  
    has_many :users  
 end

Edit seed.rb di folder db

 r1 = Role.create(:name => 'user')  
 r2 = Role.create(:name => 'admin')  
 us1 = User.create(:email => 'user@gmail.com' , :password => 'q1w2e3r4', :role_id => r1.id)   
 us2 = User.create(:email => 'admin@gmail.com' , :password => 'q1w2e3r4', :role_id => r2.id)

Untuk memasukan data jalankan perintah berikut
```
$ rake db:seed
```
Untuk membuat user yang sign_up defautlnya adalah role user tambahkan code berikut di model user.rb

  before_create :set_default_role  
  private  
  def set_default_role  
   self.role ||= Role.find_by_name('user')  
  end

Untuk menjalankan server ketikan code berikut di terminal

$ rails s

Buka browser ketikan http://localhost:3000/users/sign_in maka akan tampil halaman seperti berikut

Layout

Kita akan membuat desain utama aplikasi ini ,cukup mudah karena desainnya sangat sederhana

Edit file application.html.erb

  <!DOCTYPE html>   
  <html>   
  <head>   
    <title>Sale</title>   
    <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>   
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>   
    <%= csrf_meta_tags %>   
  </head>   
  <body>   
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">   
       <div class="container">   
         <div class="navbar-header">   
            <a class="navbar-brand" href="#">Sale</a>   
         </div>   
         <ul class="nav navbar-nav">    
         </ul>   
         <ul class="nav navbar-nav navbar-right">   
            <% if user_signed_in? %>   
            <li><%= link_to current_user.email, edit_user_registration_path %></li>   
            <li><%= link_to "Log Out" , destroy_user_session_path, method: :delete %></li>   
            <% else %>   
            <li><%= link_to "Sign In", user_session_path %></li>   
            <li><%= link_to "Register", new_user_registration_path %></li>   
            <% end %>   
         </ul>   
       </div>   
    </div>   
    <div class="container">   
       <% flash.each do |type, message| %>   
       <div class="alert <%= flash_class type %> alert-dismissable">   
         <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>   
         <p><%= message %></p>   
       </div>   
       <% end %>   
       <%= yield %>   
    </div>   
  </body>   
  </html>

Edit application_helper.rb

 def flash_class(type)  
  case type  
  when :alert  
    "alert-danger"  
  when :notice  
    "alert-success"  
   else  
    "" end  
 end

Edit file aplication.css di folder app/assets/stylesheet

 body {  
       padding-top: 70px;  
 }

Layoutnya nanti akan seperti gambar berikut

Generate Model dan Controller

Kita akan generate model dan controller, tujuannya agar tidak buat file satu persatu

Scaffold untuk generate view model dan controller

$ rails g scaffold product code:string name:string price:decimal user:belongs_to

$ rails g scaffold sale name:string total:decimal user:belongs_to

Model untuk generate model saja

$ rails g model item product:belongs_to sale:belongs_to quantity:decimal total:decimal

Setelah selesai databasenya di migrate atau di reset ulang

$ rake db:migrate

Masuk folder model pada file product tambahkan code berikut

 has_many :items

Masuk folder model pada file sale tambahkan code berikut

 has_many :items

Edit form partial _form.html.erb di folder view/products dan view/sales hapus baris code berikut

  <div class="field">  
   <%= f.label :user_id %><br>  
   <%= f.text_field :user_id %>  
  </div>

Edit file index.html.erb di folder view/products hapus baris code berikut

 <th>User</th>

 <td><%= product.user %></td>

Edit file index.html.erb di folder view/sales hapus baris code berikut

 <th>User</th>

 <td><%= sale.user %></td>

Untuk memasang tema bootstrap ke dalam tabel edit index.html.erb di folder products and sales perhatikan baris <table> dan tambahkan code berikut

 <table class="table table-striped">

Edit aplication.html.erb di folder layout tambahkan baris code setelah tag <ul class="nav navbar-nav"> </ul>

 <li><%= link_to "All Sales", sales_path %></li>  
 <li><%= link_to "All Products", products_path %></li>

View tablenya akan seperti berikut

Untuk selanjutnya silahkan cek link ini: Membuat Aplikasi POS dengan Ruby on Rails 4 Part 2

Search This Blog

Blogspot - Belajar Ruby