> Much of the essence of building a program is in fact the debugging of the specification. - Fred Brooks, The Mythical Man-Month 作者
> 請注意本章內容銜接後一章，請與後一章一起完成。
初入門像Rails這樣的功能豐富的開發框架，難處就像雞生蛋、蛋生雞的問題：要了解運作的原理，你必須了解其中的元件，但是如果個別學習其中的元件，又將耗費許多的時間而見樹不見林。因此，為了能夠讓各位讀者能夠儘快建構出一個基本的應用程式，有個大局觀。我們將從一個CRUD程式開始。所謂的CRUD即為Create、Read、Update、Delete等四項基本資料庫操作，本章將示範如何做出這個基本的應用程式，以及幾項Rails常用功能。細節的原理說明則待Part 2後續章節。
## Rails的MVC元件
我們在第一章Ruby on Rails簡介有介紹了什麼是MVC架構，而在Rails中分成幾個不同元件來對應：
* ActiveRecord是Rails的Model元件
* ActionPack包含了ActionDispatch、ActionController和ActionView，分別是Rails的Routing、Controller和View元件
這張圖示中的執行步驟是：
1. 瀏覽器發出HTTP request請求給Rails
2. 路由(Routing)根據規則決定派往哪一個Controller的Action
3. 負責處理的Controller Action操作Model資料
4. Model存取資料庫或資料處理
5. Controller Action將得到的資料餵給View樣板
6. 回傳最後的HTML成品給瀏覽器
其中，路由主要是根據HTTP Method方法(GET、POST或是PATCH、DELETE等)以及網址來決定派往到哪一個Controller的Action。例如，我們在「Rails起步走」一章中的`get "welcome/say_hello" => "welcome#say"`意思就是，將GET welcome/say_hello的這個HTTP request請求，派往到welcome controller的say action。
## 認識ActiveRecord操作資料庫
ActiveRecord是Rails的ORM(Object-relational mapping)元件，負責與資料庫溝通，讓你可以使用物件導向語法來操作關聯式資料庫，它的對應概念如下：
* 將資料庫表格(table)對應到一個類別(class)
* 類別方法就是操作這個表格(table)，例如新增資料、多筆資料更新或多筆資料刪除
* 資料表中的一筆資料(row)對應到一個物件(object)
* 物件方法就是操作這筆資料，例如更新或刪除這筆資料
* 資料表的欄位(column)就是物件的屬性(object attribute)
所以說資料庫裡面的資料表，我們用一個Model類別表示。而其中的一筆資料，就是一個Model物件。
> 不了解關聯式資料庫的讀者，推薦閱讀[MySQL 超新手入門](http://www.codedata.com.tw/database/mysql-tutorial-getting-started)從第0章至第5章CRUD與資料維護。
> ActiveRecord 這個名稱的由來是它使用了 Martin Fowler 的[Active Record](http://martinfowler.com/eaaCatalog/activeRecord.html)設計模式。
第三章「Rails起步走」我們提到了Scaffold鷹架功能，有經驗的Rails程式設計師雖然不用鷹架產生程式碼，不過還是會使用Rails的generator功能來分別產生Model和Controller檔案。這裡讓我們來產生一個Model：
~~~
$ rails g model event name:string description:text is_public:boolean capacity:integer
~~~
> 這些指令必須要在Rails專案目錄下執行，承第三章也就是demo目錄下。
接著執行以下指令就會建立資料表(如果是使用SQLite3資料庫話，會產生db/development.sqlite3這個檔案)：
~~~
$ bin/rake db:migrate
~~~
接著，讓我們使用`rails console`(可以簡寫為`rails c`) 進入主控台模式做練習：
~~~
# 新增
> event = Event.new
> event.name = "Ruby course"
> event.description = "fooobarrr"
> event.capacity = 20
> event.save # 儲存進資料庫，讀者可以觀察另一個指令視窗
> event.id # 輸出主鍵 1，在 Rails 中的主鍵皆為自動遞增的整數 ID
> event = Event.new( :name => "another ruby course", :capacity => 30)
> event.save
> event.id # 輸出主鍵 2，這是第二筆資料
# 查詢
> event = Event.where( :capacity => 20 ).first
> events = Event.where( ["capacity >= ?", 20 ] ).limit(3).order("id desc")
# 更新
> e = Event.find(1) # 找到主鍵為 1 的資料
> e.name # 輸出 Ruby course
> e.update( :name => 'abc', :is_public => false )
# 刪除
> e.destroy
~~~
和irb一樣，要離開rails console請輸入`exit`。如果輸入的程式亂掉沒作用時，直接`Ctrl+Z`離開也沒關係。
> 對資料庫好奇的朋友，可以安裝[DB Browser for SQlite](http://sqlitebrowser.org/)這套工具，實際打開db/development.sqlite3這個檔案觀察看看。
## 認識Migration建立資料表
Rails使用了Migration資料庫遷移機制來定義資料庫結構(Schema)，檔案位於db/migrate/目錄下。它的目的在於:
* 讓資料庫的修改也可以納入版本控制系統，所有的變更都透過撰寫Migration檔案執行
* 方便應用程式更新升級，例如讓軟體從第三版更新到第五版，資料庫更新只需要執行`rake db:migrate`
* 跨資料庫通用，不需修改程式就可以用在SQLite3、MySQL、Postgres等不同資料庫
在上一節產生Model程式時，Rails就會自動幫你產生對應的Migration檔案，也就是如db/migrate/20110519123430_create_events.rb的檔案。Rails會用時間戳章來命名檔案，所以每次產生檔名都不同，這樣可以避免多人開發時的衝突。其內容如下：
~~~
# db/migrate/20110519123430_create_events.rb
class CreateEvents < ActiveRecord::Migration
def change
create_table :events do |t|
t.string :name
t.text :description
t.boolean :is_public
t.integer :capacity
t.timestamps
end
end
end
~~~
其中的create_table區塊就是定義資料表結構的程式。上一節中我們已經執行過`bin/rake db:migrate`來建立此資料表。
Migration檔案不需要和Model一一對應，像我們來新增一個Migration檔案來新增一個資料庫欄位，請執行:
~~~
$ rails g migration add_status_to_events
~~~
如此就會產生一個空的 migration 檔案在 db/migrate 目錄下。Migration 有提供 API 讓我們可以變更資料庫結構。例如，我們可以新增一個欄位。輸入`rails g migration add_status_to_events`然後編輯這個Migration檔案：
~~~
# db/migrate/20110519123819_add_status_to_events.rb
class AddStatusToEvents < ActiveRecord::Migration
def change
add_column :events, :status, :string
end
end
~~~
接著執行`bin/rake db:migrate`就會在events表格中新增一個status的欄位，欄位型別是string。Rails會記錄你已經對資料庫操作過哪些Migrations，像此例中就只會跑這個Migration而已，就算你多執行幾次`bin/rake db:migrate`也只會對資料庫操作一次。
> Rails透過資料庫中的schema_migrations這張table來記錄已經跑過哪些Migrations。
## 認識ActiveRecord資料驗證(Validation)
ActiveRecord的資料驗證(Validation)功能，可以幫助我們檢查資料的正確性。如果驗證失敗，就會無法存進資料庫。
編輯app/models/event.rb加入
~~~
class Event < ActiveRecord::Base
validates_presence_of :name
end
~~~
其中的validates_presence_of宣告了name這個屬性是必填。我們按Ctrl+Z離開主控台重新進入，或是輸入 reload!，這樣才會重新載入。
~~~
> e = Event.new
> e.save # 回傳 false
> e.errors.full_messages # 列出驗證失敗的原因
> e.name = 'ihower'
> e.save
> e.errors.full_messages # 儲存成功，變回空陣列 []
~~~
呼叫save時，ActiveRecord就會驗證資料的正確性。而這裡因為沒有填入name，所以回傳false表示儲存失敗。
## 實做基本的CRUD應用程式
有了Event model，將下來讓我們實作出完整的CRUD使用者介面流程吧，這包含了列表頁面、新增頁面、編輯頁面以及個別資料頁面。
### 外卡路由
我們在「Rails起步走」一章分別為welcome/say_hello和welcome設定路由，也就如何將網址對應到Controller和Action。但是如果每個路徑都需要一條條設定會太麻煩了。這一章我們使用一種外卡路由的設定，編輯config/routes.rb在最後插入一行：
~~~
# ....
match ':controller(/:action(/:id(.:format)))', :via => :all
end
~~~
外卡路由很容易理解，它會將/foo/bar這樣的網址自動對應到Controller foo的bar Action、如果是/foo這樣的網址，則預設對應到index action。我們再下一章中我們會再改用另一種稱作RESTful路由方式。
### 列出所有資料
執行rails g controller events，首先編輯app/controllers/events_controller.rb加入
~~~
def index
@events = Event.all
end
~~~
`Event.all`會抓出所有的資料，回傳一個陣列給實例變數(instance variables)指派給`@events`。在Rails會讓Action裡的實例變數(也就是有`@`開頭的變數)通通傳到View樣板裡面可以使用。這個Action預設使用的樣板是app/views/events/目錄下與Action同名的檔案，也就是接下來要編輯的app/views/events/index.html.erb，內容如下:
~~~
<ul>
<% @events.each do |event| %>
<li>
<%= event.name %>
<%= link_to 'Show', :controller => 'events', :action => 'show', :id => event %>
<%= link_to 'Edit', :controller => 'events', :action => 'edit', :id => event %>
<%= link_to 'Delete', :controller => 'events', :action => 'destroy', :id => event %>
</li>
<% end %>
</ul>
<%= link_to 'New Event', :controller => 'events', :action => 'new' %>
~~~
這個View迭代了`@events`陣列並顯示內容跟超連結，有幾件值得注意的事情：
`<%`和`<%=`不太一樣，前者只執行不輸出，像用來迭代的`each`和`end`這兩行就不需要輸出。而後者`<%=` 裡的結果會輸出給瀏覽器。
`link_to`建立超連結到一個特定的位置，這裡為瀏覽、編輯和刪除都提供了超連結。
連往http://localhost:3000/events就會看到這一頁。目前還沒有任何資料，讓我們繼續實作點擊New Event超連結之後的動作。
### 新增資料
建立一篇新的活動需要兩個Actions。第一個是new Action，它用來實例化一個空的`Event`物件，編輯app/controllers/events_controller.rb加入
~~~
def new
@event = Event.new
end
~~~
這個app/views/events/new.html.erb會顯示空的`Event`給使用者：
~~~
<%= form_for @event, :url => { :controller => 'events', :action => 'create' } do |f| %>
<%= f.label :name, "Name" %>
<%= f.text_field :name %>
<%= f.label :description, "Description" %>
<%= f.text_area :description %>
<%= f.submit "Create" %>
<% end %>
~~~
這個`form_for`的程式碼區塊(Code block)被用來建立HTML表單。在區塊中，你可以使用各種函式來建構表單。例如`f.text_field :name`建立出一個文字輸入框，並填入`@event`的name屬性資料。但這個表單只能基於這個Model有的屬性(在這個例子是name跟description)。Rails偏好使用`form_for`而不是讓你手寫表單HTML，這是因為程式碼可以更加簡潔，而且可以明確地連結在Model物件上。
`form_for`區塊也很聰明，New Event的表單跟Edit Event的表單，其中的送出網址跟按鈕文字會不同的(根據`@event`的不同，前者是新建的，後者是已經建立過的)。
> 如果你需要建立任意欄位的HTML表單，而不綁在某一個Model上，你可以使用`form_tag`函式。它也提供了建構表單的函式而不需要綁在Model實例上。我們會在Action View: Helpers一章介紹。
當一個使用者點擊表單的Create按鈕時，瀏覽器就會送出資料到Controller的create Action。也是一樣編輯app/controllers/events_controller.rb加入：
~~~
def create
@event = Event.new(params[:event])
@event.save
redirect_to :action => :index
end
~~~
create Action會透過從表單傳進來的資料，也就是Rails提供的`params`參數(這是一個Hash)，來實例化一個新的`@event`物件。成功儲存之後，便將使用者重導(redirect)至index Action顯示活動列表。
讓我們來實際測試看看，在瀏覽器中實際按下表單的Create按鈕後，出現了`ActiveModel::ForbiddenAttributesError in EventsController#create`的錯誤訊息，這是因為Rails會檢查使用者傳進來的參數必須經過一個過濾的安全步驟，這個機制叫做Strong Parameters，讓我們回頭修改app/controllers/events_controller.rb
~~~
def create
@event = Event.new(event_params)
@event.save
redirect_to :action => :index
end
private
def event_params
params.require(:event).permit(:name, :description)
end
~~~
我們新加了一個`event_params`方法，其中透過`require`和`permit`將`params`這個Hash過濾出`params[:event][:name]`和`params[:event][:description]`。
> `private`以下的所有方法都會變成private方法，所以記得放在檔案的最底下。
再次測試看看，應該就可以順利新增資料了。
### 顯示個別資料
當你在index頁面點擊show的活動連結，就會前往http://localhost:3000/events/show/1這個網址。Rails會呼叫show action並設定`params[:id]`為`1`。以下是show Action：
編輯app/controllers/events_controller.rb加入
~~~
def show
@event = Event.find(params[:id])
end
~~~
這個show Action用`find`方法從資料庫中找出該篇活動。找到資料之後，Rails用show.html.erb樣板顯示出來。新增app/views/events/show.html.erb，內容如下:
~~~
<%= @event.name %>
<%= simple_format(@event.description) %>
<p><%= link_to 'Back to index', :controller => 'events', :action => 'index' %></p>
~~~
其中`simple_format`是一個內建的View Helper，它的作用是可以將換行字元`\n`置換成`<br />`，有基本的HTML換行效果。
### 編輯資料
如同建立新活動，編輯活動也有兩個步驟。第一個是請求特定一篇活動的edit頁面。這會呼叫Controller的edit Action，編輯app/controllers/events_controller.rb加入
~~~
def edit
@event = Event.find(params[:id])
end
~~~
找到要編輯的活動之後，Rails接著顯示edit.html.erb頁面，新增app/views/events/edit.html.erb檔案，內容如下:
~~~
<%= form_for @event, :url => { :controller => 'events', :action => 'update', :id => @event } do |f| %>
<%= f.label :name, "Name" %>
<%= f.text_field :name %>
<%= f.label :description, "Description" %>
<%= f.text_area :description %>
<%= f.submit "Update" %>
<% end %>
~~~
這裡跟new Action很像，只是送出表單後，是前往Controller的update Action：
~~~
def update
@event = Event.find(params[:id])
@event.update(event_params)
redirect_to :action => :show, :id => @event
end
~~~
在update Action裡，Rails一樣透過`params[:id]`參數找到要編輯的資料。接著`update`方法會根據表單傳進來的參數修改到資料上，這裡我們沿用`event_params`這個方法過濾使用者傳進來的資料。如果一切正常，使用者會被導向到活動的show頁面。
### 刪除資料
最後，點擊Destroy超連結會前往destroy Action，編輯app/controllers/events_controller.rb加入
~~~
def destroy
@event = Event.find(params[:id])
@event.destroy
redirect_to :action => :index
end
~~~
`destroy`方法會刪除對應的資料庫資料。完成之後，將使用者導向index頁面。
> Rails的程式風格非常注重變數命名的單數複數，像上述的index Action中是用`@events`複數命名，代表這是一個群集陣列。其他則是用`@event`單數命名。
## 認識版型(Layout)
Layout可以用來包裹樣板，讓不同樣板共用相同的HTML開頭和結尾部分。當Rails要顯示一個樣板給瀏覽器時，它會將樣板的HTML放到Layout的HTML之中。預設的Layout檔案是app/views/layouts/application.html.erb，其中`yield`就是會被替換成樣板的地方。所有的樣版預設都會套這個Layout。我們會再 Action View一章中介紹如何更換不同Layout。
現在，讓我們修改Layout中的`<title>`：
~~~
<!DOCTYPE html>
<html>
<head>
<title><%= @page_title || "Event application" %></title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
~~~
如此我們可以在show Action中設定`@page_title`的值：
~~~
def show
@event = Event.find(params[:id])
@page_title = @event.name
end
~~~
這樣的話，進去show頁面的title就會是活動名稱。其他頁面因為沒有設定`@page_title`，就會是”Event application”。
## 認識局部樣板(Partial Template)
利用局部樣板(Partial)機制，我們可以將重複的樣板獨立出一個單獨的檔案，來讓其他樣板共享引用。例如new.html.erb和edit.html.erb都有以下相同的樣板程式：
~~~
<%= f.label :name, "Name" %>
<%= f.text_field :name %>
<%= f.label :description, "Description" %>
<%= f.text_area :description %>
~~~
一般來說，新增和編輯時的表單欄位都是相同的，所以讓我們將這段樣板程式獨立出一個局部樣板，這樣要修改欄位的時候，只要修改一個檔案即可。局部樣板的命名都是底線`_`開頭，新增一個檔案叫做`_form.html.erb`，內容就如上。如此new.html.erb就可以變成：
~~~
<%= form_for @event, :url => { :controller => 'events', :action => 'create' } do |f| %>
<%= render :partial => 'form', :locals => { :f => f } %>
<%= f.submit "Create" %>
<% end %>
~~~
而edit.html.erb則是：
~~~
<%= form_for @event, :url => { :controller => 'events', :action => 'update', :id => @event } do |f| %>
<%= render :partial => 'form', :locals => { :f => f } %>
<%= f.submit "Update" %>
<% end %>
~~~
透過`<%= render :partial => 'form', :locals => { :f => f } %>`會引用`_form.html.erb`這個局部樣板，並將變數`f`傳遞進去變成區域變數。
## `before_action`方法
透過`before_action`，我們可以將Controller中重複的程式獨立出來。
在events_controller.rb上方新增
~~~
before_action :set_event, :only => [ :show, :edit, :update, :destroy]
~~~
在下方`private`後面新增一個方法如下：
~~~
def set_event
@event = Event.find(params[:id])
end
~~~
> Controller中的公開(public)方法都是Action，也就是可以讓瀏覽器呼叫使用的動作。使用`protected`或`private`可以避免內部方法被當做Action使用。
刪除show、edit、update、destroy方法中的
~~~
@event = Event.find(params[:id])
~~~
## 加入資料驗證
我們在資料驗證一節中，已經加入了name的必填驗證，因此當使用者送出沒有name的表單，就會無法儲存進資料庫。我們希望目前的程式能夠在驗證失敗後，提示使用者儲存失敗，並讓使用者有機會可以修改再送出。
修改app/controllers/events_controller.rb的create和update Action
~~~
def create
@event = Event.new(event_params)
if @event.save
redirect_to :action => :index
else
render :action => :new
end
end
~~~
如果活動因為驗證錯誤而儲存失敗，這裡會回傳給使用者帶有錯誤訊息的new Action，好讓使用者可以修正問題再試一次。實際上，`render :action => "new"`會回傳new Action所使用的樣板，而不是執行new action這個方法。如果改成使用`redirect_to`會讓瀏覽器重新導向到new Action，但是如此一來`@event`就被重新建立而失去使用者剛輸入的資料。
~~~
def update
if @event.update(event_params)
redirect_to :action => :show, :id => @event
else
render :action => :edit
end
end
~~~
更新時也是一樣，如果驗證有任何問題，它會顯示edit頁面好讓使用者可以修正資料。
而為了可以在儲存失敗時顯示錯誤訊息，接著編輯`_form.html.erb`中加入
~~~
<% if @event.errors.any? %>
<ul>
<% @event.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
<% end %>
~~~
## 認識Flash訊息
請在app/views/layouts/application.html.erb Layout檔案之中，`yield`之前加入：
~~~
<p style="color: green"><%= flash[:notice] %></p>
<p style="color: red"><%= flash[:alert] %></p>
~~~
接著讓我們回到app/controllers/events_controller.rb，在create Action中加入
~~~
flash[:notice] = "event was successfully created"
~~~
在update Action中加入
~~~
flash[:notice] = "event was successfully updated"
~~~
在destroy Action中加入
~~~
flash[:alert] = "event was successfully deleted"
~~~
「event was successfully created」訊息會被儲存在Rails的特殊flash變數中，好讓訊息可以被帶到另一個 action，它提供使用者一些有用的資訊。在這個create Action中，使用者並沒有真的看到任何頁面，因為它馬上就被導向到新的活動頁面。而這個flash變數就帶著訊息到下一個Action，好讓使用者可以在show Action頁面看到 「event was successfully created.」這個訊息。
## 分頁外掛
上述的程式用`Event.all`一次抓出所有活動，這在資料量一大的時候非常浪費效能和記憶體。通常會用分頁機制來限制抓取資料的筆數。
編輯Gemfile加入以下程式，這個檔案設定了此應用程式使用哪些套件。這裡我們使用[kaminari](https://github.com/amatsuda/kaminari)這個分頁套件：
~~~
gem "kaminari"
~~~
執行`bundle install`就會安裝。裝好後需要重新啟動伺服器才會載入。
修改app/controllers/events_controller.rb的index Action如下
~~~
def index
@events = Event.page(params[:page]).per(5)
end
~~~
編輯app/views/events/index.html.erb，加入
~~~
<%= paginate @events %>
~~~
連往http://localhost:3000/events/，你可能需要多加幾筆資料就會看到分頁連結了。
