--
CharinyaKlakhang - 22 May 2012 - 13:35
การเขียนโปรแกรมบน Rails
สิ่งที่ได้ศึกษาจาก Ruby On Rails
- การสร้าง application อย่างง่าย เพื่อศึกษาการทำงานระหว่าง Model-View-Controller
- การสร้าง RSS reader application
- การสร้าง template
- การสร้าง application อย่างง่าย เพื่อศึกษา Ajax (ระหว่างการดำเนินการศึกษา)
1.การสร้าง application ศึกษา Model-View-Controller
- สร้าง Database และ ตาราง
- config rails application ไฟล์ที่เกี่ยวข้องกับ database (database.yml)
- เตรียม rails application
ขั้นตอนที่ 1: สร้าง rails application
> rails depot
> dir
เข้าไปดูโฟลเดอร์ที่้เกิดขึ้น (depot) จะพบโฟลเดอร์อีกเป็นจำนวนมาก
> cd depot
> dir
ขั้นตอนที่ 2: สร้าง Database
- ใช้ MySQL? database
- ใน Ruby จะมีการใช้ database 3 ระดับ ได้แก่
- _development
- _test
- _production
- ในที่นี้จะสร้าง Database ชื่อว่า depot_development
- และสร้างตาราง ชื่อ products (มี "s" เสมอ)
ขั้นตอนที่ 3: Config ไฟล์ที่เกี่ยวกับ Database
- เข้าไปยังไดเรกทอรี /depot/config/
- แก้ไขไฟล์ database.yml
- ใส่ชื่อ user,password,database ที่ใช้
ขั้นตอนที่ 4: สร้าง application
- เข้าไปยังไดเรกทอรี /depot/script
- สร้าง application scaffold
- Model => product
- Controller => admin
> cd /depot/script
> generate scaffold Product Admin
ขั้นตอนที่ 5: Run web server
- ในที่นี่ใช้ WEBrick เป็น web server ที่อยู่ใน rails เพื่อใช้สำหรับทดสอบระบบที่สร้างขึ้นมา
- จะใช้ port 3000 ในการทำงาน
ขั้นตอนที่ 6: การแสดงผล
- พิมพ์ URL : "http://127.0.0.1:3000/admin"
- เป็นการเรียกไปยังชื่อ controller admin เพื่อเริ่มต้นการทำงาน
- กด new เพื่อต้องการใส่ข้อมูลใหม่ลงในฐานข้อมูล
- ใส่ข้อมูลใน textbox แล้วกด create
- ผลลัพธ์ที่ได้ เป็นการใส่ข้อมูลในฐานข้อมูล
- หลังจากกด create จะแสดงผลออกมา ดังภาพด้านล่าง
- เราสามารถ เพิ่ม แก้ไข ลบ ข้อมูลได้ (จัดการกับข้อมูลในฐานข้อมูล)
- ถ้าต้องการลบข้อมูล ให้เลือก destroy
สรุปผลการศึกษา
1. การทำงานระหว่าง Controller-Model-View มีความสัมพันธ์กัน
- การสร้าง controller admin ขึ้นมา จะเกิดไฟล์ต่างๆดังนี้
- ใน /controller => จะสร้างไฟล์ admin_controller.rb ขึ้นมา
- ใน /view => จะสร้างไดเรกทอรี admin ขึ้นมา
- การสร้าง model product
- ใน /model => จะสร้างไฟล์ product.rb
2. เริ่มต้นการทำงาน
- สร้าง method ในไฟล์ admin_controller.rb เพื่อเรียกใช้งาน ถ้าไม่มีการสร้างเวลาเริ่มต้นทำงาน จะทำงานไปยังส่วนของ method index ในกรณีนี้จะแสดง method create ในไฟล์ /controller/admin_controller.rb
- ใน method create ทำงานเมื่อมีการกรอกข้อมูลใส่ textbox แล้วกด create เพื่อเก็บลงฐานข้อมูลต่อไป
def create
@product = Product.new(params[:product])
if @product.save
flash[:notice] = 'Product was successfully created.'
redirect_to :action => 'list'
else
render :action => 'new'
end
end
- จาก source code จะอธิบายว่าหลังจากมีการเก็บข้อมูลลงฐานข้อมูลแล้ว จะ link การทำงานไปยังส่วนของ list ซึ่งทำหน้าที่ในการแสดงผลข้อความว่า " Product was successfully created." ออกมา พร้อมกับการแสดงข้อมูลที่ใส่ออกมา (จาก method list)
- จะเห็นว่า method list นี้ ต้องมีการแสดงผลออกทาง browser ดังนั้น /view ต้องมีไฟล์ list.rhtml เพื่อจัดการด้านการแสดงผลข้อมูล ดังนี้
<% for product in @products %>
<tr>
<% for column in Product.content_columns %>
<td><%=h product.send(column.name) %></td>
<% end %>
<td><%= link_to 'Show', :action => 'show', :id => product %></td>
<td><%= link_to 'Edit', :action => 'edit', :id => product %></td>
<td><%= link_to 'Destroy', { :action => 'destroy', :id => product }, :confirm => 'Are you sure?', :post => true %></td>
</tr>
<% end %>
3. การลบข้อมูล
- ในหน้าของ list (/view/list.rhtml) ที่แสดงข้อมูลออกมาทาง browser เราสามารถลบได้ จากการเลือกที่ "destroy" ดังภาพก่อนหน้านี้

สังเกต source code "list.rhtml" ด้านบน เมื่อมีการเลือก "destroy" จะเรียกไปยัง method "destroy" ต่อไป เพื่อทำหน้าที่ลบข้อมูลในฐานข้อมูล
- กลับมาดูที่ /controller/admin_controller.rhtml จะมี method "destroy" ดังนี้
def destroy
Product.find(params[:id]).destroy
redirect_to :action => 'list'
end
- การทำงานก็คือ "Product" ซึ่งเป็น model จะติดต่อกับฐานข้อมูล โดยส่งพารามิเตอร์ id ของข้อมูลที่จะลบผ่านฟังก์ชั่น .destroy เพื่อลบข้อมูลในฐานข้อมูลได้เลย

สังเกตว่าเราไม่ต้องใช้ sql command จัดการข้อมูลในฐานข้อมูลเลย แต่เราใช้ model (Product) ที่ทำงานด้วย
ActiveRecord? แทน
- ภายใน /model/product.rb จะการเขียน code ดังนี้
class Product < ActiveRecord::Base
end
back to top
RSS Reader"> 2.การสร้าง RSS Reader
ติดตั้ง library
- เราต้องติดตั้ง library ของ Ruby ที่ชื่อ simple-rss ซึ่งสามารถดาวน์โหลดได้ --> ที่นี่
- หรือติดตั้งผ่านทาง Rubygem ได้ โดยการพิมพ์
> gem install simple-rss-1.1
การเขียน code
- จะอธิบาย ตามลำดับการแสดงผล ตาม web browser
- การเขียน Code สำหรับ RSS ใน /views/show.rhtml ดังนี้
<h1>Show RSS reader from </h1>
<%= start_form_tag :action => 'show3'%>
<b>Input url :</b><br/>
<%= text_field("input","url_2",:size => 50) %>
<input type="submit" value="read RSS"/>
<%= end_form_tag %>
- ภายใน code จะมี form ที่มี textbox ให้ผู้ใช้ใส่ RSS URL เพื่อกด submit แล้วได้ข้อมูลจากแหล่ง RSS นั้นๆมาแสดงที่นี่

สังเกตว่า เมื่อมีการ submit แล้ว จะเรียกการทำงานต่อไปยังส่วนของ method show3 (อยู่ใน /controller/controller_mysite.rb)
- การเขียน code ใน /controller/controller_mysite.rb
def show
end
def show3
require 'rubygems'
require 'simple-rss'
require 'open-uri'
@url_2 = @params["input"]["url_2"]
rss = SimpleRSS.parse(
open(@url_2)
)
puts rss.channel.title
rss.channel.link
@num = 0
@aa = Array.new
@bb = Array.new
rss.items.each do |item|
puts @aa[@num] = item.title
puts @bb[@num] = item.link
@num = @num +1
puts @num
end
end

สังเกต ใน code จะ require 3 บรรทัดแรก เพื่อเรียก libreary Ruby มาอ่าน
RSS
require 'rubygems'
require 'simple-rss'
require 'open-uri'
- controller จะเป็นส่วนของการทำงานหลักอยู่แล้ว ดังนั้นภายใน code นี้ จะรับ URL ที่ส่งมาจาก /views/show.rhtml
- หลังจากนั้น จะใช้ SimpleRSS?.parse ในการดึงข้อมูลตาม URL นั้นๆออกมา
- แล้วเก็บส่วนของ title และ link ไว้สำหรับแสดงผลออกมา ในส่วนของ /views/show3.rhtml
- ดังนั้น เราต้องเขียน code ใน /views/show3.rhtml เพื่อแสดงผลที่ได้จาก method show3 นี้
<%= @url_2%>
<% a = @aa %>
<% b = @bb%>
<% i = 0 %>
<% for i in 0..@num-1 %>
<%= i+1%>
<%= link_to(@aa[i],@bb[i]) %>
<br/>
<% end %>
- ใน source code นี้ จะเป็นการแสดงผลที่ได้มาจาก method show (ในไฟล์ /controllers/controller_mysite.rhtml)

สังเกต ว่ามีการแสดง URL และลนลูปอ่านผลที่ได้จาก array มาแสดงผลและลิงค์ออกมา
- ภาพด้านล่าง ผู้ใช้จะใส่ URL RSS แล้วกด submit
- แสดงผลออกมา โดยสามารถลิงค์ไปยังข้อมูลนั้นๆได้
การแสดงผล
- เรียกไปที่ URL : 127.0.0.1/mysite/show
- ขั้นแรก : เมื่อมาหน้าแรก โปรแกรมจะเข้าไปทำงานที่ /controllers/controller_mysite ใน method show ก่อน
- ขั้นสอง : แต่ใน controller/show ไม่มีการทำงานใดๆ จึงไปที่ส่วนของ /views/show.rhtml ต่อ
- ขั้นที่สาม : ดังนั้นจึงแสดงผลออกมา ดังภาพแรก ด้านล่างนี้
- ขั้นที่สี่ : การใส่ URL RSS เป็นการทำงานในส่วนของ /views/show.rhtml
- ขั้นที่ห้า : หลังจากการกด submit แล้วจะมีการเรียกการทำงานไปยัง method show3 ใน controller (/controllers/controller_mysite) จากคำสั่ง :action => 'show3' (ใน /views/show.rhtml)
- ขั้นที่หก : เป็นการทำงานของ controller ด้วย method show3 และแสดงผลใน views/show3.rhtml ตามลำดับ จึงสิ้นสุดการทำงาน
การสรุปผลการศึกษา
- การสร้าง application RSS reader ต้องมี library Ruby simple-rss เสมอ
- การเขียน code ต้องเขียนการทำงานหลัก ใน controller , การแสดงผลไว้ใน view
- ในที่นี้ ไม่มีการใช้ database จึงไม่ต้องเขียน code ในส่วนของ view
- จะเห็นได้ว่า ใน code ของ controller จะมี method show และ show3 เสมอ
- ถึงแม้ว่า method show ไม่มีการเขียน การทำงานภายใน method แต่ว่าจะมีการทำงานในส่วนของ view แทน
- เพราะว่า controller และ view มีการทำงานที่สัมพันธ์กัน (ถ้าไม่เขียน method show ส่วนแสดงผลของ view/show.rhtml จะ error ไม่แสดงผลออกมา)
back to top
3.การสร้าง Template
Template ช่วยให้เราเขียน code ตรงส่วนที่เหมือนกันทุกหน้าในครั้งเดียว เช่นส่วนของ header,footer,แถบเมนูด้านข้าง เป็นต้น ช่วยประหยัดเวลา และสามารถแก้ไขหรือจัดการแค่เพียงที่เดียวเท่านั้น ก็เหมือนกับได้แก้ไขทุกๆหน้า ในที่นี้จะมีการใช้ Css มาช่วยจัดการเรื่องรูปแบบด้วย ดังนั้นจะเห็นว่า การสร้าง template เป็นเรื่องของการแสดงผล จึงต้องเขียน code ไว้ในส่วนของ view ซึ่งการที่จะให้ทุกไฟล์ของ application มีการเรียกใช้ template ในการแสดงผลที่เหมือนกันนั้น เราต้องเขียนไฟล์ที่จะเป็น template ไว้ในไดเรกทอรี layouts
สิ่งที่ควรทราบ
- จะสร้าง application ชื่อ mysite ขึ้นมา ภายใน /mysite จะประกอบด้วย ไฟล์และไดเรกทอรีจำนวนมาก
- สร้างไฟล์ Css จะอยู่ที่ /mysite/public/stylesheets/ไฟล์css.css
- สร้างไฟล์ template ชื่อ mysite.rhtml ที่ /views/layouts/mysite.rthml
- ลักษณะของ template เป็นดังนี้
การเขียน code สร้าง template
- เขียน template ในการแสดงผลของทุกหน้า
- สร้างไฟล์ mysite.rhtml (ไว้ที่นี่ app/views/layouts/mysite.rhtml)

สังเกตว่า ชื่อ template จะมีชื่อเดียวกันกับ application ในที่นี้คือ
mysite นั่นเอง
<html>
<head>
<title>Ruby On Rails</title>
<% @headers["Content-Type"] = "text/html; charset=tis-620" %>
<%= stylesheet_link_tag "depot", :media => "all" %>
</head>
<body>
<div id="banner">
<%= @page_title || "ruby on rails testing" %>
</div>
<div id="columns">
<div id="side">
<%= link_to("Home","../mysite/index") %><br/>
<%= link_to("RSS reader","../mysite/show") %><br/>
<%= link_to("RSS feed","../mysite/feed") %><br/>
<%= link_to("Contact","../mysite/contact") %><br/>
</div>
<div id="main">
<%= @content_for_layout %>
</div>
</div>
</body>
</html>
ตัวอย่างการเขียน stylesheet
- สร้างไฟล์ stylesheet ไว้ที่ /mysite/public/stylesheet/ไฟล์css.css
- ในที่นี้ จะสร้างไฟล์ ชื่อ "depot.css"
#banner {
background: #DCDCDC;
padding-top: 50px;
padding-bottom: 50px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Tahoma", serif;
color: ##000000;
text-align: center;
}
#banner img {
float: left;
}
#columns {
background: #DCDCDC;
}
#main {
margin-left: 7em;
padding-top: 4ex;
padding-left: 2em;
background: white;
}
อธิบายการเขียน code
- การเขียน source code นี้จะคล้ายกับเขียน html คือมีลักษณะดังนี้
<html>
<head>
<title> ...ข้อความที่เป็น title ...</title>
...จะ่ใส่ header และ link ที่ stylesheet ไว้ที่นี่ ...
</head>
<body>
...ใส่ส่วนที่เป็นการแสดงผลหลัก...
</body>
</html>
<head>
<title>Ruby On Rails</title>
<% @headers["Content-Type"] = "text/html; charset=tis-620" %> กำหนด character
<%= stylesheet_link_tag "depot", :media => "all" %> เรียกใช้ stysheet(depot.css)
</head>
- ส่วนด้านบนสุด แสดงข้อความที่เป็นหัวข้อหรือ banner
<div id="banner">
<%= @page_title || "ruby on rails testing" %>
</div>
- ส่วนด้านซ้ายมือ ที่เป็นเมนูด้านข้าง (มีการทำ link ไปยังไฟล์ต่างๆ ควรดูภาพด้านบนประกอบ)
<div id="columns">
<div id="side">
<%= link_to("Home","../mysite/index") %><br/>
<%= link_to("RSS reader","../mysite/show") %><br/>
<%= link_to("RSS feed","../mysite/feed") %><br/>
<%= link_to("Contact","../mysite/contact") %><br/>
</div>
</div>
<div id="main">
<%= @content_for_layout %>
</div>
- เนื่องจากเป็นส่วนที่ทำให้การแสดงผล ของทุกๆหน้ามีเนื้อหาที่แตกต่างกัน
- นั่นก็คือ เป็นส่วนที่จะนำเอา content ของไฟล์ที่อยู่ไดเรกทอรี views มาแสดงผล

สังเกต ว่าเรามีการเขียน <div>...</div> เป็นต้น เป็นการเรียกใช้ style sheet เพื่อจัดรูปแบบการแสดงผลของเอกสาร บน web application
- ในที่นี้ จะสร้างไฟล์ style sheet ชื่อ "depot.css" โดยเราจะเรียกใช้ในไฟล์ template ที่กล่าวถึงแล้ว

โดยส่วน views ก็จะเขียน code แสดงผลตามปกติ แต่ไม่ต้องเขียน <heml> , <head> , <title> , <body> อีกแล้ว เนื่องจากเราได้กำหนดไว้ใน template เรียบร้อยแล้ว ดังนั้นภายในไฟล์การแสดงผลนี้ จึงดูง่าย และมี code ที่สั้นลง
สรุปผลเพื่อเปรียบเทียบการใช้ template

ไฟล์ด้านล่างนี้ จะเขียนในไดเรกทอรี /view (ส่วนแสดงผลทาง web browser) ซึ่งทั้ง 2 แบบนี้มีการแสดงผลที่เหมือนกัน

สังเกตว่าเราไม่ต้องเขียน tag มากมาย
- แบบไม่ใช้ template (layout)
<html>
<head>
<title> Ruby On Rails </title>
</head>
<body>
your content
</body>
</html>
your content
back to top
4. สร้าง Register form
สร้าง database
1. สร้าง database ชื่อ อะไรก็ได้
2. สร้าง table ชื่อ users ดังนี้
CREATE TABLE `users` (
`id` int(11) NOT NULL auto_increment,
`name` varchar(50) NOT NULL default '',
`password` varchar(10) NOT NULL default '',
`email` varchar(20) NOT NULL default '',
`address` varchar(50) NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=26 ;

อย่าลืมแก้ไขไฟล์ database.yml
สร้าง Rails application
3. สร้าง app. scaffold
> rails myapp
> cd myapp/script/
> ruby generate scaffold User Input
- User => ชื่อ model
- Input => ชื่อ controller
สร้าง controller
4. สร้าง controller เพิ่มอีกอันนึง สำหรับ
- แบ่งแยกการเข้าถึง หมายความว่า controller นี้จะเรียกใช้ต้องมีการ ใส่ user+password ก่อน
> cd /myapp/script/
> ruby generate controller Admin
อธิบายลักษณะงาน
5. การทำงานหลัก คือ
- ผู้ใช้ login เข้าสู่ระบบ เพื่อดูรายชื่อสมาชิก และรายละเอียดทั้งหมด
- ผู้ใช้ต้องมีการลงทะเบียนก่อน หากไม่มี account
- เมื่อเข้าสู่ระบบ ผู้ใช้สามารถ ดู แก้ไข ลบ ช้อมูลของแต่ละบุคคลได้
- มีการดัก การกรอกข้อมูลใน form
- มีการดักไม่ให้ ผู้ใช้เข้ามาใช้งานหน้าเว็บที่ห้าม ทาง path url
- มี 2 controller ช่วยกันทำงาน
การตรวจสอบข้อมูล
6. การเขียน validate สำหรับ check form
/model/user.rb
กำหนดการเข้าถึงตัวแปร หรือ field ใน table
attr_accessor :password กำหนดให้ไม่สามารถจัดการได้ เช่น ไม่สามารถ add ข้อมูลลง db ได
attr_accessible :name, :address ,:email, :password ตัวแปรที่ต้องการให้จัดการได้
check การกรอกข้อมูลใน form
validates_uniqueness_of :name ตรวจสอบว่าห้ามซ้ำ
validates_presence_of :name, :password ตรวจสอบว่าจะต้องกรอกเสมอ
validates_format_of :email, :with => /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i, :on => :create
ตรวจสอบความถูกต้องของ pasword
การสร้าง layout หรือ template
7. การเรียกใช้ template ในแต่ละ controller (ทั้ง 2 controller)
<html>
<head>
<title>Input: <%= controller.action_name %></title>
<% @headers["Content-Type"] = "text/html; charset=tis-620" %>
<%= stylesheet_link_tag "scaffold", :media => "all" %>
</head>
<body>
<div id="banner">
<img src="/images/banner.jpg"/> ทำให้เห็น banner ที่มีอยู่
</div>
ทำให้ flash[:notice] แสดงผลออกมา เป็นข้อความสีเขียวตามที่กำหนด
<center><p style="color: green"><%= flash[:notice] %></p></center>
<div id="main"><br/><br/>
<center><%= @content_for_layout %></center>
</div>
</body>
</html>
การกำหนดการ access
8. กำหนดการ access ของหน้า website
- เราต้องกำหนดใน controller
- function ที่จะใช้งาน เราจะกำหนด ใน ส่วนของ controller /controller/application.rb เพราะเป็น ศูนย์รวม code ที่อาจจะถูกใช้ในทุกๆ controller ดังนี้
class ApplicationController < ActionController::Base
def authorize
unless session[:user_id]
flash[:notice] = "Please log in"
redirect_to(:controller => "input" , :action => "login")
end
end
end
การเขียนข้อความแสดง error
9.การเขียน print แสดงข้อความและค่าในตัวแปร
@user = User.new(params[:user]) user เป็น array เก็บข้อมูลทั้งหมดของ table users
flash[:notice] = "User #{@user.name} was successfully created."

@user.name = แสดงค่าในตัวแปร @user.name ออกมา
การเขียน Style sheet
10. เขียน style sheet สำหรับ แสดง error
notice{
width: 400px;
border: 2px solid red;
padding: 7px;
padding-bottom: 12px;
margin-bottom: 20px;
background-color: #f0f0f0;
}
<%if flash[:notice] %>
<div id="notice"><%= flash[:notice] %></div>
<%end%>
การ logout
11. การเขียน Logout
def logout
session[:user_id] = nil เคลียร์ session
flash[:notice] = " Logged out" ข้อความที่ต้องการแสดงออกมา
redirect_to :controller => 'input' ,:action => 'login' ต้องมี comma (,)
end
back to top
การสร้าง application E-commerce
บทที่ 1 : สร้าง web interface
สร้างหน้าแรกของ site ที่จะแสดงข้อมูลของสินค้า โดยมีการทำงานดังนี้
- สร้างสินค้าใหม่
- แก้ไขข้อมูลของสินค้าเดิม
- ลบสินค้าทีละอัน
สิ่งที่จะต้องเตรียมในขั้นพื้นฐาน
- สร้าง database และ table ที่จะเก็บข้อมูลสินค้า
- config Rails แอพลิเคชั่นให้ชี้ไปที่ database นั้น
- มี Rails ที่จะนำมาใช้เป็น version เริ่มต้นสำหรับการพัฒนาครั้งนี้
สร้าง Rails Application
Tool ในการเขียน Ruby ใช้ Radrails
เปิด radrails program และสร้าง application ใหม่ ตามขั้นตอน ดังรูป
สร้าง application ชื่อ
ecommerce
ไปที่ command เพื่อสร้าง rails app. ด้วยคำสั่ง
rails ecommerce
click ขวา เพื่อ refresh หน้าจอของโปรแกรม Radrails แล้วคลิ้กที่ไดเรกทอรีชื่อ ecommerce จะเห็นไฟล์เกิดขึ้นเป็นจำนวนมาก ซึ่งไฟล์เหล่านี้เองจะเป็นไฟล์ตั้งตั้นสำหรับการเขียน Ruby On Rails
สร้าง Database
ในที่นี้เราจะใช้ Database
MySQL? ใช้ชื่อว่า "ecommerce_development" ดังภาพ
สร้างตารางชื่อ products (ต้องเป็นพหูพจน์เสมอ) ดังนี้
CREATE TABLE `products` (
`id` INT NOT NULL AUTO_INCREMENT ,
`title` VARCHAR( 100 ) NOT NULL ,
`description` TEXT NOT NULL ,
`image_url` VARCHAR( 200 ) NOT NULL ,
`price` DECIMAL( 10, 2 ) NOT NULL ,
`date_valiable` DATE NOT NULL ,
PRIMARY KEY ( `id` )
);
ดังภาพ
การ Config Application กับ database
แก้ไขไฟล์ database.yml ที่ (/ecomerce/config/database.yml) ตรงส่วนของ ชื่อ database,username,password ดังภาพ
การสร้าง Maintenance Application