Ruby 程式語言和 Ruby on Rails 入門課程 (KaLUG 社群技術分享工作坊 2009/9/20)

開始 Rails 課程前，可以先閱讀 A List apart 的Rails 入門介紹。

下載投影片：Ruby 程式語言入門導覽、Rails 簡介與入門、RESTful Rails，以及最後的Ruby 生態圈一覽。

過往課程

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

參考快速安裝 Rails 開發環境 Ubuntu 9.04這篇文章，執行安裝指令。

2. 使用 irb 練習 Ruby 程式語言

練習 String 操作： API 參考
練習 Array 操作：API 參考
練習 Hash 操作：API參考

3. 建立一個 Hello World! Rails Project

rails myproject
cd myproject
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>

瀏覽 http://localhost:3000/welcome/say，將看到 Hola! 及 hello 超連結。

3. 修改 Rails 的預設首頁

修改 /config/route.rb 加上 map.root :controller => "welcome"
刪除 /public/index.html

新增一個 Model 並使用 Console 練習

script/generate model event name:string description:text
rake db:migrate
script/console
- event = Event.new
- event.name = "Ruby course"
- event.description = "fooobarrrrr"
- event.save
- event.id # 輸出 1
- e = Event.find(1)
- e.name # 輸出 Ruby course

實做一個基本的 CRUD 應用程式

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

3-1. 加入 Layout

新增 /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" />
  <title>Posts: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'scaffold' %>
</head>
<body style="background: #EEEEEE;">

<p style="color: green"><%= flash[:notice] %></p>

<%= yield %>

</body>
</html>

3-2. flash

在 create action 中加入 flash[:notice] = "新增成功"
在 update action 中加入 flash[:notice] = "修改成功"
在 destroy action 中加入 flash[:notice] = "刪除成功"

3-3. DRY: partial template

將 new.html.erb 和 edit.html.erb 的表單程式移往 _form.html.erb，內容如下

	<%= f.label :name, "Name" %>
    <%= f.text_field :name %>
    
    <%= f.label :description, "Description" %>
    <%= f.text_area :description %>

在 new.html.erb 和 edit.html.erb 的表單內加回

			<%= render :partial => 'form', :locals => { :f => f } %>

3-4. DRY: before_filter

在 events_controller.rb 中新增

 	before_filter :find_event, :only => [ :show, :edit, :update, :destroy]

新增函式如下：

 	protected
 	
 	def find_event
 		@event = Event.find(params[:id])
 	end

刪除 show, edit, update, destroy 函式中的 @event = Event.find(params[:id])

3-4. 加入 Model validation

編輯 /app/models/event.rb 加入
```
 		validates_presence_of :name
 	
```
編輯 new.html.erb 及 edit.html.erb 加入
```
  <%= error_messages_for :event %>
 
```

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

6. 使用 RESTful 版的 Scaffold

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

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

編輯 /app/views/layouts/application.html.erb 加入

	    <%= javascript_include_tag :defaults %>

編輯 /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

8. 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

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

下載 http://github.com/technoweenie/restful-authentication 到 /vendor/plugins/，命名為 restful-authentication
執行 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/ 將導到登入頁面

10. 分頁 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/

Ruby 程式語言 和 Ruby on Rails 入門課程 (KaLUG 社群技術分享工作坊 2009/9/20)