ผลต่างระหว่างรุ่นของ "418342 ภาคปลาย 2552/ปฏิบัติการที่ 11"
Cardcaptor (คุย | มีส่วนร่วม) |
Cardcaptor (คุย | มีส่วนร่วม) |
||
| แถว 39: | แถว 39: | ||
<geshi lang="rails"> | <geshi lang="rails"> | ||
| − | # GET /products/search?name=abc | + | # GET /products/search?product[name]=abc |
| − | # POST /products/search?name=abc | + | # POST /products/search?product[name]=abc |
def search | def search | ||
| − | if not params[:name].blank? | + | if not params[:product].blank? and not params[:product][:name].blank? |
| − | @product = Product.find_by_name(params[:name]) | + | @product = Product.find_by_name(params[:product][:name]) |
respond_to do |format| | respond_to do |format| | ||
if @product | if @product | ||
| แถว 107: | แถว 107: | ||
<p> | <p> | ||
<b>Name:</b> | <b>Name:</b> | ||
| − | <%= text_field_with_auto_complete :product, :name, { | + | <%= text_field_with_auto_complete :product, :name, {}, {:method=>:get} %> |
</p> | </p> | ||
<%= submit_tag "Search" %> | <%= submit_tag "Search" %> | ||
<% end %> | <% end %> | ||
</geshi> | </geshi> | ||
| + | |||
| + | == การทำ autocomplete ในกรณีที่มีความซับซ้อนมากยิ่งขึ้น == | ||
| + | ให้ดู http://railscasts.com/episodes/102-auto-complete-association | ||
รุ่นแก้ไขเมื่อ 02:25, 5 กุมภาพันธ์ 2553
ในปฏิบัติการนี้เราจะใช้ AJAX ในการทำ autocomplete ซึ่งหมายถึงตอนที่มีการพิมพ๋ข้อความในฟอร์ม ตัวเวบแอพพลิเคชันช่วยเลือกคำที่เราต้องการพิมพ์ให้
เนื้อหา
เริ่มสร้างแอพพลิเคชัน
เราจะสร้างแอพพลิเคชันของสินค้า โดยสินค้าแต่ละอย่างจะมีสมบัติสองอย่างคือ ชื่อ (name) และราคา (price)
> rails shop > cd shop > ruby script/generate scaffold product name:string price:decimal > rake db:migrate
ลงปลั๊กอิน auto_complete
โค้ดส่วนที่จะช่วยเราทำ autocomplete นั้นอยู่ในปลั๊กอินชื่อ auto_complete เราสามารถลงปลั๊กอินนี้ด้วยการสั่ง
> ruby script/plugin install auto_complete
แก้ไข controller ของ Product
สมมติว่าเราต้องการให้มีการทำ autocomplete ของฟีลด์ name ให้เราแก้ไข ProductController ดังต่อไปนี้ <geshi lang="rails"> class ProductsController < ApplicationController
auto_complete_for :product, :name
...
end </geshi>
การสั่ง auto_complete_for จะทำให้มีการสร้าง action ขึ้นมาใหม่หนึ่ง action (ชื่อ auto_complete_for_product_name) ซึ่งเราจะต้องบอกให้ rails รับรู้ว่ามี action ใหม่นี้เข้ามาด้วยการเปลี่ยน config/routes.rb ดังต่อไปนี้
<geshi lang="rails"> ActionController::Routing::Routes.draw do |map|
map.resources :products, :collection=>{
:auto_complete_for_product_name=>:get}
...
end </geshi>
สร้างหน้า Search
ต่อไปเราจะทำการสร้างหน้าสำหรับให้ผู้ใช้คนหาสินค้า อันดับแรกให้เพิ่มเมธอด search ใน ProductController
<geshi lang="rails">
# GET /products/search?product[name]=abc
# POST /products/search?product[name]=abc
def search
if not params[:product].blank? and not params[:product][:name].blank?
@product = Product.find_by_name(params[:product][:name])
respond_to do |format|
if @product
flash[:notice] = "Product found!"
format.html { redirect_to(@product) }
format.xml { render :xml => @product }
else
format.html { flash[:notice] = "Product not found!" }
format.xml { render :xml => @product.errors, :status => :unprocessable_entity }
end
end
end
end
</geshi>
แล้วเราจึงสร้างหน้าเวบของมัน
<geshi lang="rhtml">
Search Product
<% form_tag do %>
Name: <%= text_field_tag :name %>
<%= submit_tag "Search" %>
<% end %> </geshi>
หลังจากนั้นไปแก้ config/routes.rb ให้มัน route ไปหาหน้า search ได้
<geshi lang="rails"> ActionController::Routing::Routes.draw do |map|
map.resources :products, :collection=>{
:auto_complete_for_product_name=>:get,
:search=>[:get,:post]}
...
end </geshi>
หลังจากทำขั้นนี้เสร็จแล้ว เมื่อเราพิมพ์ข้อความลงใน text box ของหน้า search หากข้อความนั้นตรงกับชื่อของสินค้าสักชิ้น เราก็จะได้ดูรายละเอียดของสิ้นค้าชิ้นนั้น แต่ถ้าไม่ตรงแม้แต่ตัวอักษรเดียว เราก็จะกลับมาที่หน้า search เหมือนเก่า
เพิ่ม autocomplete
อันดับแรกเราต้องเพิ่ม javascript_include_tag ลงในไฟล์ app/views/layouts/product.html.erb ก่อน
<geshi lang="html"> <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>Products: <%= controller.action_name %></title> <%= stylesheet_link_tag 'scaffold' %> <%= javascript_include_tag :defaults %> <-- เพิ่มบรรทัดนี้
</head> <body> </geshi>
เสร็จแล้วแก้ไข app/views/products/search.html.erb ให้ใช้ text_field_with_auto_complete แทน text_field ธรรดา
<geshi lang="html">
Search Product
<% form_tag do %>
Name: <%= text_field_with_auto_complete :product, :name, {}, {:method=>:get} %>
<%= submit_tag "Search" %>
<% end %> </geshi>
การทำ autocomplete ในกรณีที่มีความซับซ้อนมากยิ่งขึ้น
ให้ดู http://railscasts.com/episodes/102-auto-complete-association
