bootstrap-css

Ada beberapa cara untuk mengintegrasikan twitter-bootstrap dengan ruby on rails, lengkapnya bisa dibaca dari sini. Yang akan dibuat sekarang adalah untuk stylesheet css tanpa less / sass, jadi benar-benar ibarat download css nya twitter-bootstrap trus di integrasikan ke rails. Mengintegrasikan ke rails ini melalui gem twitter-bootstrap-rails. Lengkapnya bisa dibaca dari https://github.com/seyhunak/twitter-bootstrap-rails, saya bikin summary saja biar tidak lupa.

1. buat project rails baru

$ rails new bootstrap-css
      create  
      create  README.rdoc
      create  Rakefile
      create  config.ru
      create  .gitignore
      create  Gemfile
      create  app
      create  app/assets/javascripts/application.js
      create  app/assets/stylesheets/application.css
      create  app/controllers/application_controller.rb
      create  app/helpers/application_helper.rb
      create  app/views/layouts/application.html.erb
      create  app/assets/images/.keep
      create  app/mailers/.keep
      create  app/models/.keep
      create  app/controllers/concerns/.keep
      create  app/models/concerns/.keep
      create  bin
      create  bin/bundle
      create  bin/rails
      create  bin/rake
      create  config
      create  config/routes.rb
      create  config/application.rb
      create  config/environment.rb
      create  config/environments
      create  config/environments/development.rb
      create  config/environments/production.rb
      create  config/environments/test.rb
      create  config/initializers
      create  config/initializers/backtrace_silencers.rb
      create  config/initializers/filter_parameter_logging.rb
      create  config/initializers/inflections.rb
      create  config/initializers/mime_types.rb
      create  config/initializers/secret_token.rb
      create  config/initializers/session_store.rb
      create  config/initializers/wrap_parameters.rb
      create  config/locales
      create  config/locales/en.yml
      create  config/boot.rb
      create  config/database.yml
      create  db
      create  db/seeds.rb
      create  lib
      create  lib/tasks
      create  lib/tasks/.keep
      create  lib/assets
      create  lib/assets/.keep
      create  log
      create  log/.keep
      create  public
      create  public/404.html
      create  public/422.html
      create  public/500.html
      create  public/favicon.ico
      create  public/robots.txt
      create  test/fixtures
      create  test/fixtures/.keep
      create  test/controllers
      create  test/controllers/.keep
      create  test/mailers
      create  test/mailers/.keep
      create  test/models
      create  test/models/.keep
      create  test/helpers
      create  test/helpers/.keep
      create  test/integration
      create  test/integration/.keep
      create  test/test_helper.rb
      create  tmp/cache
      create  tmp/cache/assets
      create  vendor/assets/javascripts
      create  vendor/assets/javascripts/.keep
      create  vendor/assets/stylesheets
      create  vendor/assets/stylesheets/.keep
         run  bundle install
Fetching gem metadata from https://rubygems.org/..........
Fetching gem metadata from https://rubygems.org/..
Resolving dependencies...
Using rake (10.1.0) 
Using i18n (0.6.5) 
Using minitest (4.7.5) 
Using multi_json (1.8.0) 
Using atomic (1.1.14) 
Using thread_safe (0.1.3) 
Using tzinfo (0.3.37) 
Using activesupport (4.0.0) 
Using builder (3.1.4) 
Using erubis (2.7.0) 
Using rack (1.5.2) 
Using rack-test (0.6.2) 
Using actionpack (4.0.0) 
Using mime-types (1.25) 
Using polyglot (0.3.3) 
Using treetop (1.4.15) 
Using mail (2.5.4) 
Using actionmailer (4.0.0) 
Using activemodel (4.0.0) 
Using activerecord-deprecated_finders (1.0.3) 
Using arel (4.0.0) 
Using activerecord (4.0.0) 
Using bundler (1.3.5) 
Using coffee-script-source (1.6.3) 
Using execjs (2.0.2) 
Using coffee-script (2.2.0) 
Using thor (0.18.1) 
Using railties (4.0.0) 
Using coffee-rails (4.0.0) 
Using hike (1.2.3) 
Using jbuilder (1.5.1) 
Using jquery-rails (3.0.4) 
Using json (1.8.0) 
Using tilt (1.4.1) 
Using sprockets (2.10.0) 
Using sprockets-rails (2.0.0) 
Using rails (4.0.0) 
Using rdoc (3.12.2) 
Using sass (3.2.11) 
Using sass-rails (4.0.0) 
Using sdoc (0.3.20) 
Using sqlite3 (1.3.8) 
Using turbolinks (1.3.0) 
Using uglifier (2.2.1) 
Your bundle is complete!
Use `bundle show [gemname]` to see where a bundled gem is installed.

2. masuk ke direktori project baru, dan tambahkan gem twitter-bootstrap-rails

gem twitter-bootstrap-rails

3. bundle install

$ bundle install
Resolving dependencies...
Using rake (10.1.0) 
Using i18n (0.6.5) 
Using minitest (4.7.5) 
Using multi_json (1.8.0) 
Using atomic (1.1.14) 
Using thread_safe (0.1.3) 
Using tzinfo (0.3.37) 
Using activesupport (4.0.0) 
Using builder (3.1.4) 
Using erubis (2.7.0) 
Using rack (1.5.2) 
Using rack-test (0.6.2) 
Using actionpack (4.0.0) 
Using mime-types (1.25) 
Using polyglot (0.3.3) 
Using treetop (1.4.15) 
Using mail (2.5.4) 
Using actionmailer (4.0.0) 
Using activemodel (4.0.0) 
Using activerecord-deprecated_finders (1.0.3) 
Using arel (4.0.0) 
Using activerecord (4.0.0) 
Using bundler (1.3.5) 
Using coffee-script-source (1.6.3) 
Using execjs (2.0.2) 
Using coffee-script (2.2.0) 
Using thor (0.18.1) 
Using railties (4.0.0) 
Using coffee-rails (4.0.0) 
Using hike (1.2.3) 
Using jbuilder (1.5.1) 
Using jquery-rails (3.0.4) 
Using json (1.8.0) 
Using tilt (1.4.1) 
Using sprockets (2.10.0) 
Using sprockets-rails (2.0.0) 
Using rails (4.0.0) 
Using rdoc (3.12.2) 
Using sass (3.2.11) 
Using sass-rails (4.0.0) 
Using sdoc (0.3.20) 
Using sqlite3 (1.3.8) 
Using turbolinks (1.3.0) 
Using twitter-bootstrap-rails (2.2.8) 
Using uglifier (2.2.1) 
Your bundle is complete!
Use `bundle show [gemname]` to see where a bundled gem is installed.

4. install bootstrap

$ rails generate bootstrap:install static
      insert  app/assets/javascripts/application.js
      create  app/assets/javascripts/bootstrap.js.coffee
      create  app/assets/stylesheets/bootstrap_and_overrides.css
      create  config/locales/en.bootstrap.yml
        gsub  app/assets/stylesheets/application.css
        gsub  app/assets/stylesheets/application.css

5. generate scaffold untuk object katakanlah Post yang memiliki 2 attribute: tittle dan description.

$ rails g scaffold Post title:string description:text
      invoke  active_record
      create    db/migrate/20130928200405_create_posts.rb
      create    app/models/post.rb
      invoke    test_unit
      create      test/models/post_test.rb
      create      test/fixtures/posts.yml
      invoke  resource_route
       route    resources :posts
      invoke  scaffold_controller
      create    app/controllers/posts_controller.rb
      invoke    erb
      create      app/views/posts
      create      app/views/posts/index.html.erb
      create      app/views/posts/edit.html.erb
      create      app/views/posts/show.html.erb
      create      app/views/posts/new.html.erb
      create      app/views/posts/_form.html.erb
      invoke    test_unit
      create      test/controllers/posts_controller_test.rb
      invoke    helper
      create      app/helpers/posts_helper.rb
      invoke      test_unit
      create        test/helpers/posts_helper_test.rb
      invoke    jbuilder
      create      app/views/posts/index.json.jbuilder
      create      app/views/posts/show.json.jbuilder
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/posts.js.coffee
      invoke    scss
      create      app/assets/stylesheets/posts.css.scss
      invoke  scss
      create    app/assets/stylesheets/scaffolds.css.scss

6. migrate

$ rake db:migrate
==  CreatePosts: migrating ====================================================
-- create_table(:posts)
   -> 0.0012s
==  CreatePosts: migrated (0.0013s) ===========================================

7. generate twitter bootstrap compatible scaffold views

$ rails g bootstrap:themed Posts -f
       force  app/views/posts/index.html.erb
       force  app/views/posts/new.html.erb
       force  app/views/posts/edit.html.erb
       force  app/views/posts/_form.html.erb
       force  app/views/posts/show.html.erb

8. jalanin server dengan ‘rails s’

———–

Hasilnya cukup mengasyikan, terutama kalau baru saja membaca hingga tuntas official guide ruby on rails bagi pemula: http://guides.rubyonrails.org/getting_started.html.

Blog Post Sample

Apabila dilihat dari source htmlnya terlihat jelas bahwa cssnya twitter-bootstrap digunakan

Screen Shot 2013-09-28 at 11.35.14 PM

Dengan bootstrap programmer bisa lebih fokus dengan backend / core dari webapps tersebut.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s