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 :)
 
 

    Comments

    Post a Comment

    Popular posts from this blog

    Seri Belajar Ruby on Rails Bagian 9 - Membuat Autentikasi dengan Devise

    Image
    Setelah pada artikel sebelumya kita telah berhasil membuat validasi, relasi, dan menggunakan scope pada Rails, selanjutnya kita akan membuat fitur autentikasi  dengan menggunakan  Devise. Devise ? Untuk  apa  ? Devise  adalah salah satu gem pada  Rails yang berfungsi untuk menangani masalah autentika dengan mudah. Devise memiliki kelebihan sebagai  berikut. Rack based Lengkap dengan  Model, View, dan Cotroller Megizinkan suatu aplikasi untuk memiliki multiple model untuk melakukan  autentikasi Dibuat secara modularitas, sehingga memudahkan penggunaan gem ini dengan hanya menggunakan fitur/module yang dibutuhkan. Gem ?.  Apa itu gem ?. Pada Rails terdapat file konfigurasi yang digunakan untuk me-list gem mana saja yang diguakan. Gem ini seperti library atau perpustakaan yang biasanya dapat ditemukan di RubyGems.  Cara Menambahkan Gem Devise pada Rails Untuk menginstall devise ini dapat dilakukan dengan membuka Gemfile pada folde...
    Read more

    Seri Belajar Ruby on Rails Bagian 6 - Membuat Table & Dummy Data

    Image
    Setelah belajar membuat aplikasi tugas sederhana melalui scaffold, selanjutnya pada pembahasan kali ini adalah table dan dummy data. Untuk pembahasan kali ini gunakan project sebelumnya, karena kita akan melanjutkan aplikasi tersebut menjadi aplikasi yang lebih terpadu. A. Definisi Table di Database Kata database dan table sudah sering kita dengar. Database secara singkat dianalogikan seperti lemari arsip yang berfungsi untuk menyimpan data. Lalu table adalah arsip, dimana dalam arsip tersebut terdapat data-data tertentu.  B. Membuat Table di Rails Framework Rails menyediakan fitur untuk melakukan pembuatan table, penambahan kolom pada table, dsb dengan menggunakan migration. Migration di Rails disimpan dalam folder db/migrate . Untuk membuat file migrasi telah dijelaskan di Seri Belajar Ruby on Rails Bagian 5 - Membuat Aplikasi Rails Pertamamu dengan cara $ rails generate migration CreateCategories Yang akan dihasilkan oleh generator adalah file migration di folder db/migrate...
    Read more

    Seri Belajar Ruby on Rails Bagian 7 - Memahami ActiveRecord

    Image
    Setelah sebelumnya telah memahami penggunaan migration, seed, dan cara membuat dummy data, serta perbadaan data dummy dan data master. Pada kali ini kita akan memahami mengenai Active Record. Active Record adalah library-library ORM yang digunakan pada model di Rails Framework. Model ini yang merupakan M dari konsep MVC pada Rails. Ia bertugas sebagai model yang bertanggungjawab atas data bisnis dan logika. Contoh dari data bisnis ini seperti data orang, data tempat, atau data barang. Active Record ini jika diimplementasikan merupakan sistem ORM (Object Relational Mapping) pada Rails. A. Definisi ORM ORM (Object Relational Mapping) adalah suatu metode/teknik pemrograman yang digunakan untuk mengkonversi data dari lingkungan bahasa pemrograman berorientasi objek (OOP) dengan lingkungan database relasional.  Secara singkat ORM dapat dikatakan sebagai jembatan yang berfungsi untuk menghubungkan antara OOP dan database relasional. B. Apa yang Dapat Dilakukan Active Record ?...
    Read more