Kamis, 31 Agustus 2017

Cara Membuat Login Dengan Gem Devise

Apa itu devise?


Devise adalah gem service yang dibuat untuk membuat login logout suatu aplikasi menjadi lebih mudah.


Langkah - langkah implementasi

1.Buat rails project baru dan generate database:
$ rails new devise
$ rake db:create

2. Tambahkan gem devise pada gemfile

 gem 'devise'


3. Install devise
$ bundle install
$ rails generate devise:install

4. Buat devise model "user"
$ rails generate devise User

5. Run migration
$ rake db:migrate

6. Generate view untuk login dan registrasi
$ rails generate devise:views users

7. Generate controller devise users
$ rails generate devise:controllers users
8. Konfigurasi routes untuk login dan registrasi

 #config/routes.rb
  devise_for :users, controllers: { sessions: 'users/sessions' }   
  devise_scope :user do
    get 'sign_in', to: 'devise/sessions#new'
    get '/users/sign_out' => 'devise/sessions#destroy'
  end
  resources :homes
  root to: 'homes#index'

9. Generate controller home dan tambahkan code dibawah
$ rails g controller homes
 #controllers/homes_controller.rb
  class HomesController < ActionController::Base
    before_action :authenticate_user!
    def index
    end
  end

buat file homes pada folder views lalu tambahkan file index.html.erb


 #views/homes/index.html.erb
 <h3>Hello World</h3>
 <%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link'  %>

10.Jalankan server
$ rails s
11. Buka url
      http://localhost:3000/users/sign_up
      http://localhost:3000/users/sign_in

kurang lebih hasilnya akan seperti ini:

form sign up:

form login:


untuk selebihnya mengenai gem devise bisa klik link dibawah ini:


selamat mencoba & happy coding :)
ersad@doterb.com | Web Developer at doterb solution
FA edited

Rabu, 30 Agustus 2017

Setup SMTP Dengan Gem Figaro



Setup SMTP Dengan Gem Figaro

Apa itu figaro?
Figaro adalah gem pada ruby on rails yang digunakan untuk menyembunyikan nilai di environment dan membuat aplikasi lebih aman.

Seberapa penting figaro?
Tentu sangat penting, dikarenakan banyak kasus mengupload password  ke repository github secara public, contoh kasus:commit remove password.
Agar aplikasi kita lebih aman dan tidak seperti kasus diatas alangkah baiknya untuk menggunakan gem figaro ini, agar file application.yml otomatis tidak akan terupload ke repository.

Install Figaro


1.Buat rails project baru
$ rails new figaro

2.Lalu tambahkan gem figaro pada gemfile

 gem 'figaro'


3.Jalankan commend dibawah ini untuk install figaro
$ bundle exec figaro install

4.Buka folder aplikasi & masukan kode dibawah ini pada file figaro/config/application.yml

Di file ini kita bisa setting smtp dll.
Saya akan contohkan untuk setting smtp menggunakan figaro.

smtp_domain: gmail.com
smtp_authentication: plain
smtp_username: email anda
smtp_password: password email anda

5.Ketikan kode dibawah ini pada file figaro/environments/development.rb

 config.action_mailer.smtp_settings = {
      :address => ENV["smtp_address"],
      :port => 587,
      :domain => ENV["smtp_domain"],
      :authentication => ENV["smtp_authentication"],
      :enable_starttls_auto => true,
      :user_name => ENV["smtp_username"],
      :password => ENV["smtp_password"]'
}


untuk selebihnya mengenai gem figaro bisa klik link dibawah ini:
Selamat mencoba & happy coding :)
ersad@doterb.com | Web Developer at doterb solution
FA edited

Rabu, 31 Mei 2017

Menambahkan Chart ke Projek Rails dengan Canvasjs

Chart (grafik) adalah suatu objek graifk 2D atau 3D yang mempresentasikan suatu nilai atau hasil perhitungan ke dalam bentuk batang, kolom, garis, dan sebagainya. Chart biasanya digunakan untuk data dukungan ketika proses presentasi dan memberikan gambaran atau perkembangan dari suatu hasil perhitungan yang sudah ditetapkan sebelumnya, mencakup ke perkembangan dari masa lalu atau masa yang akan datang.

Buat Project Baru 

  1. Membuat project baru
    $ rails new Chart
    $ cd Chart
  2. $ bundle install

Membuat CRUD untuk User

  1. Buat CRUD untuk User dengan menggunakan fungsi Scaffold
    $ rails generate scaffold Siswa nama:string kelas:string skor_uts:integer skor_uas:integer rata_rata:float
  2. Buat database baru lalu migrate untuk generate table Siswa
    $ rake db:create
    $ rake db:migrate
    $ rails s 
  3. Silahkan cek localhost:3000/siswas, untuk memastikan kalau aplikasi kita bisa dibuka
  4. Sebelum membuat beberapa data silahkan tambahkan kode berikut di, views/siswas/_form.html.erb agar field rata-rata bisa terisi otomatis setelah skor UAS diinputkan
  5. <script>
      $(document).ready(function(){
        $("#siswa_skor_uas").change(function(){
          var_skor_uts = parseInt($("#siswa_skor_uts").val());
          var_skor_uas = parseInt($("#siswa_skor_uas").val());
          $("#siswa_rata_rata").val((var_skor_uts * 0.3) +( var_skor_uas * 0.7));
        });
      });
    </script>
  6. Buat beberapa data untuk nanti di implementasikan ke dalam Chart

Implementasi Chart Dengan Canvasjs

  1. Kita akan membuat chart pada halaman, views/siswas/show.html.erb
  2. Pertama - tama buat file dengan nama "canvasjs.min.js" pada folder assets/javascripts, lalu copy kan kode yang ada pada link ini canvasjs.min.js
  3. Lalu edit assets/javascripts/application.js, tambahkan kode berikut sebelum "//= require_tree ."
    //= require canvasjs.min
    //= require Chart
    //= require_tree .
  4. Untuk menampilkan grafik nya edit file views/siswas/show.html.erb, dan tambahkan kode berikut di baris paling bawah
    <div id="grafik_siswa" style="height:400px;width:50%;"></div>
    <script>
      $(function () {
        var graph = {
          title: {
            text: "Grafik Nilai <%= @siswa.nama %>"
          },
          animationEnabled: true,
          data: [
          {
            type: "splineArea",
            dataPoints: [
              { y: parseInt("<%= @siswa.skor_uts %>"), label: "UAS"},
              { y: parseInt("<%= @siswa.skor_uas %>"), label: "UTS"},
              { y: parseInt("<%= @siswa.rata_rata %>"), label: "Rata-rata"}
            ]
          }
          ]
        };
        $("#grafik_siswa").CanvasJSChart(graph);
      });
    </script>
  5. Berikut tampilan dari grafik yang muncul pada halaman show 

Implementasi Chart Dengan Chartjs

  1. Kita akan membuat chart pada halaman, views/siswas/show.html.erb dengan menggunakan chartjs
  2. Pertama - tama buat file dengan nama "Chart.js" pada folder assets/javascripts, lalu copy kan kode yang ada pada link ini Chart.js
  3. Untuk menampilkan grafik nya edit file views/siswas/show.html.erb, dan tambahkan kode berikut
    <div id="grafik_siswa" style="height:400px;width:50%;"></div>
    <br><br>
    <div><canvas id="grafik_siswa2" style="height:500px;width:100%;"></canvas></div>
    
    <script>
      $(function () {
        var graph = {
          title: {
            text: "Grafik Nilai <%= @siswa.nama %>"
          },
          animationEnabled: true,
          data: [
          {
            type: "splineArea",
            dataPoints: [
              { y: parseInt("<%= @siswa.skor_uts %>"), label: "UAS"},
              { y: parseInt("<%= @siswa.skor_uas %>"), label: "UTS"},
              { y: parseInt("<%= @siswa.rata_rata %>"), label: "Rata-rata"}
            ]
          }
          ]
        };
        $("#grafik_siswa").CanvasJSChart(graph);
      });
    
      $(function() {
        var ctx = document.getElementById("grafik_siswa2");
        var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: ["UAS", "UTS", "Rata-rata"],
            datasets: [{
              label: '# Nilai ',
              data: [parseInt("<%= @siswa.skor_uts %>"), parseInt("<%= @siswa.skor_uas %>"), parseInt("<%= @siswa.rata_rata %>")],
              backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)'
                ],
              borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)'
                ],
              borderWidth: 1
            }]
          },
          options: {
            scales: {
              yAxes: [{
                ticks: {
                  beginAtZero:true
                }
              }]
            },
            title: {
              display: true,
              text: 'Grafik Nilai <%= @siswa.nama %>',
              fontSize: 24
            },
            tooltips: {
              enabled: true,
              mode: 'single',
              callbacks: {
                label: function(tooltipItems, data) {
                  var ylabel = tooltipItems.yLabel;
                  return " # Nilai : " + ylabel;
                }
              }
            }
          }
        });
      });
    </script>
  4. Berikut tampilan dari grafik yang muncul pada halaman show 

Untuk dokumentasi Chartjs : Chartjs
My project source code Chart

Happy Coding! :)

muhammad.romadhan@doterb.com | Developer at Doterb Solution

Selasa, 30 Mei 2017

Cara Penggunaan Memcached pada Aplikasi Rails

Apa itu Memcached ? 

Memcached adalah sebuah technologi yang digunakan sebagai suatu sistem penyimpanan dan pendistribusian data didalam memory server (RAM). Contoh website yang memakai memcached adalah detik.com. Search enginenya yg sangat cepat itu di code dengan memcached. Cara kerja memcached sangatlah simple karena fungsinya hanya cache server dan mengurangi load ke database server dan data yang di simpan oleh memcached disimpan di memory sehingga akses kedata tersebut akan jauh lebih cepat daripada akses ke database server.

Install Memcached di Ubuntu

Update Package
$ sudo apt-get update
Kemudian menginstal Memcached dan paket terkait
$ sudo apt-get install memcached

Configuration of the Memcached Installation

Gunakan perintah berikut untuk melihat informasi mengenai perintah memcached:
$ memcached -h
File konfigurasi default dapat ditemukan di:
$ vi /etc/memcached.conf
Saat start, Memcached akan start pada port 11211 secara default sesuai dengan file konfigurasi default. Untuk mengganti port, cukup ubah nomor di file konfigurasi. Jika singin menjalankan Memcached pada port 1337, dengan memori 4GB, dan memungkinkan maksimal 2.000 koneksi, Ubahlah sesuai code berikut:
-p 1337
-m 4096
-c 2000 
Keluar dan simpan file konfigurasi, lalu restart Memcached
$ sudo service memcached restart

Implementasi Pada ROR

Mulai dari awal buat project baru
$ rails new memcached_coba -d postgresql
$ cd memcached_coba
$ rails g scaffold post title:string description:text
$ rake db:create
$ rake db:migrate
Mulai setup memcache

Tambahkan gem 'dalli' pada file Gemfile lalu bundle install

Edit File  config/environments/development.rb tambahkan atau rubah:
    config.cache_store = :dalli_store
Buat file 'memcached.rb' pada folder config/initializers/memcached.rb isi file seperti berikut:
CACHE = Dalli::Client.new('127.0.0.1', { :namespace => 'memcached_coba', :expires_in => 3600, :socket_timeout => 3, :compress => true })
Dasar Penggunaan memcached

# Menyimpan memcached
 CACHE.set(key, value)
# Mengatur waktu expire
 CACHE.set(key, value, time_expire)
# Menggunakan memcached
 CACHE.get(key, value)
 # Menghapus memcached
 CACHE.delete(key)
# Menghapus semua memcached
 CACHE.flush_all
Berikut adalah sreenshoot hasil percobaan saya di rails console:



Selanjutnya kita akan mencoba menyimpan data post menggunakan memcached

Sebelum menggunakan memcached buatlah data post terlebih dahulu http://localhost:3000/posts/

Mari kita lihat log server sebelum penggunaan memcached berikut screenshootnya


Gambar Sebelum menggunakan memcached

Sekarang kita pasang memcached pada detil posts

Ubah code method set_post pada file app/controllers/posts_controller.rb
    def set_post
      @post = CACHE.get("post-#{params[:id]}")
      if @post.nil?
         @post = Post.find(params[:id])
         CACHE.set("post-#{params[:id]}", @post)
       end
    end
Mari kita lihat log server setelah penggunaan memcached berikut screenshootnya


Gambar setelah menggunakan memcached


Dari kedua gambar diatas kita bisa lihat perbedaanya bila menggunakan memcached saat pergi ke halaman detil post untuk kedua kalinya server tidak meload ke database terbukti dengan tidak adanya baris info load 'Post Load (2.4ms)  SELECT "posts".* FROM "posts" '

Dengan memanfaatkan memcached kita bisa membuat web kita menjadi lebih cepat . Sekian dulu postingan kali ini bila ada yang bertanya atau menambahkan yang kurang  silahkan comment dibawah.

Rabu, 22 Maret 2017

Cara Export PDF di Aplikasi Rails

Pada post kali ini saya akan membahas dasar-dasar penggunaan gem prawn untuk Ruby on Rails.

Prawn adalah sebuah gem untuk Ruby on Rails yang digunakan untuk memudahkan kita membuat / generate file PDF.

  1. Pertama-tama buat project baru menggunakan PostgreSQL
    $ rails new namaproject -d postgresql
    $ cd namaproject
  2. Buka project menggunakan text editor dan tambahkan gem pada Gemfile nya

     gem 'prawn', :git => 'git://github.com/prawnpdf/prawn.git'
    gem 'prawn_rails'
    gem 'prawn-table'
    

  3.  Lalu ketik kode di bawah ini pada terminal
    $ bundle install
  4. Setelah itu kita buat CRUD sebagai contoh table yang akan di export menjadi file PDF
    $ rails generate model Product name:string category:string quantity:integer
    $ rake db:create 
    $ rake db:migrate 
  5. Buat root untuk show-nya, buka routes.rb (config/routes.rb)
  6. Rails.application.routes.draw do
      resources :products do 
        member do
          get 'print'
          get 'print_all'
        end  
      end
      root :to => "products#index"
    end
  7. Lanjut buka controller products (app/controllers/products_controller.rb) tambahkan:

     class ProductsController < ApplicationController
      def print_all
        @products = Product.all
        render 'print'
      end
     end

  8. Pada text editor anda cari file (app/views/products) dan tambahkan file print_all.pdf.prawn 

  9. Cari file (app/views/products/print_all.pdf.prawn) dan tambahkan:

    prawn_document(:margin => 15, :page_size => [612, 936]) do |pdf|
      pdf.move_down (20)
      pdf.text "LIST PRODUK", :size => 15, :style => :bold, align: :center
      pdf.move_down(10)
      pdf.stroke_horizontal_line(2, pdf.bounds.width)
      pdf.move_down(20)
      products = [ ]
      products << [
        {:content => "Nama Barang" , :align => :center, :background_color => "000000", :text_color => "ffffff" },
        {:content => "Kategori", :align => :center, :background_color => "000000", :text_color => "ffffff" },
        {:content => "Stock Barang", :align => :center, :background_color => "000000", :text_color => "ffffff" },
      ]
      @products.each do |product|
        products << [
          {:content => "#{product.name}", :align => :center},
          {:content => "#{product.category}", :align => :center },
          {:content => "#{product.quantity}", :align => :center },
        ] 
      end
      pdf.table products, :cell_style => { :border_style => :grid}, :position => :left
    end
    
  10. Buka project menggunakan text editor dan tambahkan gem pada Gemfile nya
     <%= link_to 'New Product', new_product_path %>
    <%= link_to "Print", print_all_product_path(@products, format: "pdf") %>
    

  11. Jalankan server
    $ rails s


kurang lebih seperti ini:


klik tombol print:




Untuk lebih jelasnya silahkan baca dokumentasi di:


Sekian post kali ini tentang tutorial print pdf menggunakan gem prawn pada Ruby on Rails, nantikan postingan lain yang lebih menarik lagi, stay on belajarrubyonrails.com

Bye