使用scaffold建立資料表時，程式會自動將顯示、新增、修改、刪除的功能頁面都做好，但畫面非常簡單，而最方便的美化方式就是套上bootstrap
先使用scaffold建立一個資料表
rails g scaffold namecard name tel address company
rake db:migrate
如何套用bootstrap？
在Gemfile中加上gem 'bootstrap-sass', '~> 3.3.4'，並在終端機執行bundle update
按照網頁的步驟將程式補上
bootstrap-sass github
bootstrap-sass github
- app/assets/stylesheets/application.css 副檔名改為.scss，並加上@import "bootstrap-sprockets";和@import "bootstrap";
- app/assets/javascripts/application.js ，加上//= require_tree .和//= require bootstrap-sprockets
補上後，就來修改
- app/views/layouts/application.html.erb
在app/views/namecards/內像是index.html.erb 等檔案，程式都沒有像是我們以前所熟知的<title><body>之類的標籤，這是因為那些標籤都寫在application.html.erb 中，透過<%= yield %>將index.html.erb之類的檔案帶入
我們將application.html.erb中<%= yield %>用<div>包起來並加上class='container' - app/views/namecards/index.html.erb，幫table加上class:'table table-hover'
- app/views/namecards/index.html.erb，幫link加上class:'btn btn-success btn-sm'
雖然使用scaffold來新增資料表非常方便，但要怎麼新增欄位？
除了像之前使用rails g migration和rake db:migrate
還要對controller和view做修改，因為migrate只有針對資料表去修改，controller和view不會自動更改
假設資料表中已經新增了email這個欄位
假設資料表中已經新增了email這個欄位
- app/controllers/namecards_controller.rb要修改的地方是在namecard_params，將允許新增的欄位增加email，params.require(:namecard).permit(:name, :tel, :address, :company, :email)，不然新增資料時email欄位寫不進資料表中
- app/views/namecards/_form.html.erb，新增、修改所需要的表單都是在這個檔案中，而在new.html.erb和edit.html.erb中是使用<%= render 'form' %>將表單代入，所以將輸入email的文字輸入框加上
- app/views/namecards/index.html.erb，顯示所有資料的table也要加上email的資料
- app/views/namecards/show.html.eb，新增完資料，顯示剛剛新增的那筆資料的地方也要加上email
當表單資料很多，全部放在同一頁並不好看，這時就需要用到分頁，但如果要自己寫的話十分麻煩， github上已經有人將分頁功能寫好了
kaminari github
kaminari github
- 在Gemfile中加上gem 'kaminari'，在終端機執行bundle update
- 在controller之中修改index，將 Namecard.all修改
def index
@namecards = Namecard.page(params[:page]).per(3)
end - 在index.html.erb中想加分頁的地方加上<%= paginate @namecards>
但這個分頁醜醜的怎麼辦？github上一樣有人幫你寫好了分頁樣式
bootstrap-kaminari-views github
bootstrap-kaminari-views github
- 一樣在Gemfile中加上gem 'bootstrap-kaminari-views'，並在終端機執行bundle update
- 在index.html.erb中修改paginate
<%= paginate @namecards, :theme => 'twitter-bootstrap-3'%>
