RESTful Rails 上機實做步驟 (自由軟體技術教學工作坊 2008/12/12)

新版教材請前往 Ruby on Rails 由淺入深

1. 安裝 Ruby on Rails 基本環境 (windows)

下載安裝 1-Click Rails Installer
下載安裝 E-TextEditor ，安裝過程會出現錯誤，按下略過即可。啟動時會問你使否安裝 cygwin，請點手動不要安裝。
啟動 -> cmd -> cd \
rails my_event
cd my_event
ruby script/server
開啟瀏覽器 http://localhost:3000 ，將會看到 Rails 的預設首頁

2. 建立一個 non-RESTful 的 Hello World! Rails Project

ruby script/generate controller welcome

編輯 /app/controllers/welcome_controller.rb，加入

		def say
		 render :text => "Hello world!"
		end

瀏覽 http://localhost:3000/welcome/say，將看到 Hello world!
編輯 /app/controllers/welcome_controller.rb，加入
```
		def index
		end
	
```

新增 /app/views/welcome/index.html.erb，內容是

		<p>Hola!</p>
		<p><%= link_to 'hello world', :controller => 'welcome', :action => 'say' %><p>

修改 /config/route.rb 加上 map.root :controller => "welcome"
刪除 /public/index.html
瀏覽 http://localhost:3000/welcome/say，將看到 Hola! 及 hello 超連結。

3. 實做一個 non-RESTful 的 CRUD

ruby script/generate model event name:string description:text
rake db:migrate
ruby script/generate controller events

編輯 /app/controllers/events_controller.rb 加入

  def index
    @events = Event.find(:all)
  end

  def show
    @event = Event.find(params[:id])
  end
  
  def new
    @event = Event.new
  end
  
  def create
    @event = Event.new(params[:event])
    @event.save
    
    redirect_to :action => :index
  end
  
  def edit
    @event = Event.find(params[:id])
  end
  
  def update
    @event = Event.find(params[:id])
    @event.update_attributes(params[:event])
    
    redirect_to :action => :show, :id => @event
  end
  
  def destroy
    @event = Event.find(params[:id])
    @event.destroy
    
    redirect_to :action => :index
  end

新增 /app/views/events/index.html.erb，內容如下:

<ul>
<% @events.each do |event| %>
  <li>
    <%= link_to event.name, :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' %>

新增 /app/views/events/show.html.erb，內容如下:

<%=h @event.name %>
<%=h @event.description %>

<p><%= link_to 'back to index', :controller => 'events', :action => 'index' %></p>

新增 /app/views/events/new.html.erb，內容如下:

<% 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 %>

新增 /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 %>

連往 http://localhost:3000/events

4. 修改成一個 RESTful 版本的 CRUD

編輯 /config/routes.rb，加入

map.resources :events

編輯 /app/views/events/index.html.erb，內容如下：


<% @events.each do |event| %>
  <li>
    <%= link_to event.name, event_path(event) %>
    <%= link_to 'edit', edit_event_path(event) %>
    <%= link_to 'delete', event_path(event), :method => :delete %>
  
<% end -%>
</ul>

<%= link_to 'new event', new_event_path %>

編輯 /app/views/events/show.html.erb，內容如下：

<%=h @event.name %>
<%=h @event.description %>

<p><%= link_to 'back to index', events_path %>

編輯 /app/views/events/new.html.erb，內容如下：

<% form_for @event, :url => events_path do |f| %>
    <%= f.label :name, "Name" %>
    <%= f.text_field :name %>
    
    <%= f.label :description, "Description" %>
    <%= f.text_area :description %>
    
    <%= f.submit "Create" %>
<% end %>

編輯 /app/views/events/edit.html.erb，內容如下：

<% form_for @event, :url => event_path(@event), :html => { :method => :put } do |f| %>
    <%= f.label :name, "Name" %>
    <%= f.text_field :name %>
    
    <%= f.label :description, "Description" %>
    <%= f.text_area :description %>
    
    <%= f.submit "Update" %>
<% end %>

5. 使用 RESTful 版的 Scaffold

ruby script/generate scaffold person name:string bio:text birthday:datetime
rake db:migrate
Ctrl+C 關閉 Server，重新啟動 script/server
瀏覽 http://localhost:3000/people 並操作 CRUD

6. Ajax 實做練習1 (傳回HTML更新)

新增 /app/views/layout/application.html.erb，內容如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <%= javascript_include_tag :defaults %>
</head>
<body>

<%= yield  %>

</body>
</html>

編輯 /app/views/welcome/index.html.erb，加入

	  
<p><%= link_to_remote 'Ajax hello', :url => { :controller => 'welcome', :action => 'say' }, :update => 'foobar' %></p>


<div id="foobar">
</div>

瀏覽http://localhost:3000

7. Ajax 實做練習2 (使用RJS)

編輯 /app/views/events/index.html.erb，在迴圈中間和文件最後加入

<%= link_to_remote 'ajax show', :url => event_path(event), :method => :get %>

	
<div id="content">
</div>

編輯 /app/controllers/events_controller.rb，在 show action 中加入

    respond_to do |format|
      format.html
      format.js
    end

新增 /app/views/events/_event.html.erb，內容與 show.html.erb 相同

新增 /app/views/events/show.js.rjs，內容如下

page.replace_html 'content', :partial =>'event'
page.visual_effect :highlight, 'content'

瀏覽http://localhost:3000/events

8. 使用者註冊登入 Generator 產生器

下載 http://github.com/technoweenie/restful-authentication 到 /vendor/plugins/，命名為 restful-authentication
執行 ruby script/generate authenticated user sessions --old-passwords
rake db:migrate
Ctrl+C 關閉 Server，重新啟動 script/server
連往 http://localhost:3000/users/new 註冊頁面
編輯 /app/controllers/application.rb，加入
```
include AuthenticatedSystem  
```
編輯 /app/views/layout/application.html.erb，加入
```
<%= render :partial => "users/user_bar" %>
```
編輯 /app/controllers/events_controller.rb，加入
```
before_filter :login_required	
```
點選 Log out，再連往 http://localhost:3000/events/ 將導到登入頁面

9. 分頁 Plugin

下載 http://github.com/mislav/will_paginate 到 /vendor/plugins/，命名為 will_paginate

修改 /app/controllers/events_controller.rb 的 index action 如下

def index
 @events = Event.paginate(:page => params[:page], :per_page => 3, :order => "id DESC")
end

編輯 /app/views/events/index.html.erb，加入
```
<%= will_paginate @events %>
```
連往 http://localhost:3000/events/