Senin, 03 Desember 2012

Instalasi Twitter Bootstrap untuk Rails 3

Bootstrap adalah sebuah toolkit dari Twitter yang dirancang sebagai kerangka layout sebuah web sehingga memudahkan Anda dalam mengatur tampilan aplikasi yang Anda buat.

Ada 4 langkah yang perlu dilakukan untuk memasang Bootstrap ini pada aplikasi Anda :
  • Tambahkan pada Gemfile dan pastikan gem tersebut dipasang pada group assets

group :assets do
  gem 'bootstrap-sass'
end


    Lalu jalankan di console

bundle install

  • Tambahkan juga tag Bootstrap javascript pada file app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree

  • Buat sebuah file scss pada folder app/assets/stylesheets Anda dengan nama bootstrap_and_overrides.css.scss dan isi file tersebut dengan 
@import "bootstrap";
body { padding-top: 60px; }
@import "bootstrap-responsive";


     Lalu tambahkan ini pada file application.css 

.content {
  background-color: #eee;
  padding: 20px;
  margin: 0 -20px;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);

}


      Dan ubah nama application.css menjadi application.css.scss


  • Ubah layout aplikasi Anda pada file app/views/layouts/application.html.erb menjadi seperti ini :
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0">
    <title><%= content_for?(:title) ? 
    yield(:title) : "Myapp" %></title>
    <meta name="description" content="">
    <meta name="author" content="">
    <%= stylesheet_link_tag    "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
    <%= yield(:head) %>
  </head>
  <body>
    <header class="navbar navbar-fixed-top">
      <nav class="navbar-inner">
        <div class="container">
          <%= render 'layouts/navigation' %>
        </div>
      </nav>
    </header>
    <div id="main" role="main">
      <div class="container">
        <div class="content">
           <div class="row">
            <div class="span12">
              <%= render 'layouts/messages' %>
              <%= yield %>
            </div>
          </div>
          <footer>
          </footer>
        </div>
      </div> <!--! end of .container -->
    </div> <!--! end of #main -->
  </body>
</html>

Jangan lupa untuk menambahkan halaman partial navigation dan messages pada folder app/views/layouts Anda. Masing-masing halaman partial tersebut berfungsi untuk menampilkan link navigasi dan flash message pada aplikasi web Anda.
Isi masing-masing halaman partial tersebut sesuai dengan kebutuhan aplikasi web Anda

Contoh isi partial app/views/layouts/_navigation.html.erb :


<%= link_to "Home", root_path, :class => 'brand' %>
<ul class="nav">
  <% if user_signed_in? %>
    <li>
    <%= link_to('Logout', destroy_user_session_path, 
    :method=>'delete') %>        
    </li>
  <% else %>
    <li>
    <%= link_to('Login', new_user_session_path)  %>  
    </li>
  <% end %>
  <% if user_signed_in? %>
    <li>
    <%= link_to('Edit account', edit_user_registration_path) %>
    </li>
  <% else %>
    <li>
    <%= link_to('Sign up', new_user_registration_path)  %>
    </li>
  <% end %>
</ul>
 
Contoh isi partial app/views/layouts/_messages.html.erb :


<% flash.each do |name, msg| %>
  <% if msg.is_a?(String) %>
    <div class="alert alert-<%= name == :notice ? 
     "success" : "error" %>">
      <a class="close" data-dismiss="alert">&#215;</a>
      <%= content_tag :div, msg, :id => "flash_#{name}" %>
    </div>
  <% end %>
<% end %>
 
 
Untuk membuat tabel pada aplikasi Anda cukup menambahkan class "table table-striped" pada element table

Contoh : 


<table class="table table-striped">
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th></th>
    </tr>
  </tbody>
</table>


Berikut ini adalah contoh tampilan aplikasi Rails yang menggunakan Bootstrap :
 
 
 
 
 Selamat mencoba dan Happy Coding :)
 
 


Minggu, 02 Desember 2012

Membuat Aplikasi Ruby on Rails Pertamamu - Halo Indonesia

Pada tutorial ini, kami akan memperlihatkan cara membuat aplikasi sederhana dengan Ruby on Rails.
Sebelum melanjutkan pastikan Anda memilik koneksi internet dan komputer Anda sudah terinstall:

  • Ruby 2.2.x
  • RubyGem
  • Rails 4.x
  • Bundler
Jika Anda belum memiliki Ruby on Rails pada komputer Anda, silakan cek link berikut ini:


Ok, sekarang silakan ikuti langkah berikut ini:
  • Buka Terminal untuk pengguna Linux & OS X / Window Prompt untuk pengguna Windows
  • Arahkan cursor ke tempat yang ingin anda jadikan tempat penyimpanan Aplikasi Rails Anda atau bisa langsung saja ke langkah berikutnya.
  • Jalankan command seperti pada gambar di bawah ini

    Perintah tersebut akan membuat aplikasi Ruby on Rails dengan nama "Hello App".
    Kemudian Tekan enter dan akan muncul informasi seperti berikut:



    2 gambar diatas memperlihatkan pembuatan struktur aplikasi Ruby on Rails dan melakukan 
    installasi Gem secara online. Karena itu pastikan komputer Anda terkoneksi dengan Internet.

  • Langkah Berikutnya adalah masuk ke directory aplikasi rails anda dan menjalankan perintah menjalankan server seperti berikut:


    Perintah di atas akan menjalankan aplikasi Ruby on Rails anda pada port 3000.
    Silakan buka browser dan ketikan : http://localhost:3000

    Anda akan melihat tampilan seperti berikut ini:

    
  •  Kemudian Bukalah Aplikasi Ruby on Rails Anda dengan Text Editor kesayangan Anda.
          Jika Anda masih bingung Text Editor yang dapat Anda pakai, silakan buka link berikut ini:


  • Buatlah file conotroller baru dengan nama home_controller.rb dan simpan pada folder app/controllers, seperti pada gambar di bawah ini:


    Edit isi file home_controller seperti ini:

    
  • Buat Folder dengan nama home pada app/views seperti gambar di bawah ini:

  • Buat file view dengan nama index.html.erb pada app/views/home dan edit isinya seperti gambar berikut:

  • Berikutnya hapus file index.html di folder public.
  • Kemudian atur routes "root" aplikasi anda ke home_controller yang anda buat dengan cara edit file routes.rb di folder config seperti berikut:

  • Buka kembali browser Anda dan refresh http://localhost:3000, anda akan melihat tampilan seperti berikut:

  • Selanjutnya kita akan menampilkan waktu dengan memanggil variable yang diisi di contoller kemudian di tampilkan di view. Edit home_controller.rb seperti ini:


  • Edit file view app/views/index.html.erb seperti berikut ini:



  • Buka Kembali Browser Anda dan Refresh, Anda akan melihat tampilan seperti berikut:


Happy Coding !!