1.ออกแบบภาพรวมของเว็บแอพลิเคชั่น

แผนภาพการทำงานของระบบฝั่งผู้ขาย

BuyerPage.jpg

แผนภาพการทำงานของระบบฝั่งผู้ซื้อ

SellerPage.jpg

แผนภาพการเชื่อมโยงระหว่างตาราง ในฐานข้อมูล

DB.jpg

2.พัฒนาเว็บแอพลิเคชั่น ฝั่งผู้ขาย

adminPage.png

2.1 สร้าง rails application (Web site) ด้วย Scaffold

  • รัน Instant Rails Tool
  • เปิด console window

instant03.png

  • สร้าง rails application ด้วยคำสั่ง บรรทัดเดียว
    rails ecommerce

BU4.png
BU5.png

2.2 สร้างฐานข้อมูลและตาราง

  • สร้างฐานข้อมูลชื่อว่า ecommerce_development
  • เลือก MySQL connection collation: utf8_unicode_ci

note NOTE : การตั้งชื่อฐานข้อมูล ของ rails application ควรตั้งให้เป็นชื่อเดียวกับแอพลิชั่นที่สร้างขึ้น ในที่นี่เราสร้าง rails application ชื่อ *ecommerce ดังนั้นจึงสร้างฐานข้อมูลชื่อ ecommerce_development *

phpMyAdmin.png
ecom_create_db.jpg

สร้างตารางชื่อ products (ต้องเป็นพหูพจน์เสมอ) ดังนี้

CREATE TABLE `products` (
  `id` int(11) NOT NULL auto_increment,
  `title` varchar(255) default NULL,
  `description` text,
  `image_url` varchar(255) default NULL,
  `price` decimal(8,2) default '0.00',
  PRIMARY KEY  (`id`)
)CHARACTER SET 'utf8' COLLATE 'utf8_general_ci';

note NOTE : มาตรฐานการตั้งชื่อตารางใน rails application จะต้องเป็นพหูพจน์เสมอ ดังนั้นการสร้างตารางจึงเป็น products

ecom_create_sql.jpg
ecom_create_sql2.jpg
DB.jpg

การ Config Rails Application กับ database

แก้ไขไฟล์ database.yml ที่ path ต่อไปนี้ (/ecommerce/config/database.yml) ตรงส่วนของ ชื่อ database,username,password ดังภาพ

ecom_config_app.jpg

2.3 สร้างหน้าจอจัดการสินค้า ด้วย Rails scaffold framework

จากด้านบน เราได้เริ่มต้นสร้าง e-commerce application บน Rails ,สร้างฐานข้อมูล มีตารางชื่อ products และ config ไฟล์ให้ application สามารถติดต่อกับฐานข้อมูลได้ ซึ่งขั้นต่อไปจะเป็นการเขียนโปรแกรม สำหรับการจัดการรายการสินค้าส่วนของ admin ดังนี้

ecom_create_controller2.jpg

  • เปิด command และเข้าไปยังไดเรกทอรี ecommerce โดยการพิมพ์
 > cd ecommerce
 > ruby script/generate scaffold Product Admin

note NOTE : จาก ruby script/generate scaffold Product Admin เป็นการสร้าง rails application พื้นฐานที่เราจะนำมาพัฒนาต่อ โดยพารามิเตอร์ Product คือ model และพารามิเตอร์ Admin คือ controller ซึ่งเมื่อมาตรวจสอบดูที่โปรแกรม Rad rails จะเห็นว่ามีการสร้างไฟล์ และไดเรกทอรีภายใต้ ไดเรกทอรี ecommerce มา ดังภาพ ด้านล่าง

ecom_scaffold.jpg

ecom_scaffold2.jpg

2.4 Run web application

Run Rails Application

เป็นการ start การทำงานของ web application ที่เราสร้างขึ้น โดยเราจะเลือกที่ “ecommerce” และ run Webserver หลังจากนั้นจะมี popup command ขึ้นมา เพื่อแสดงการ run Webserver โดยในที่นี้จะใช้ port 3000 ในการทำงาน ดังนั้นให้จำไว้ว่าเวลาเราเรียก web application ทาง URL ต้องมีการระบุ port ต่อท้ายเสมอ

ecom_webrick.jpg

ecom_webrick3.jpg

เรียก web application ทาง URL

ecom_url.jpg

ecom_url_app.jpg

ecom_scaffold3.jpg

ecom_scaffold4.jpg

ecom_scaffold5.jpg

ecom_scaffold6.jpg

ecom_scaffold7.jpg

ecom_scaffold8.jpg

ecom_scaffold9.jpg

ecom_scaffold10.jpg

ecom_scaffold11.jpg

ecom_scaffold12.jpg

ตั้งค่าภาษาไทย

การสร้าง rails application ให้สามารถออกแบบการแสดงผล ให้แสดงผลเป็นภาษาไทยได้ ดังนี้1.) เปิด ecommerce rails application โดยใช้ Rad rails Tools

ecom_radrails1.jpg

ecom_radrails2.jpg

สร้าง application ชื่อ ecommerce จะเห็นไดเรกทอรีเกิดขึ้นชื่อ ecommerce และเห็นไฟล์เกิดขึ้นเป็นจำนวนมาก ซึ่งไฟล์เหล่านี้เองจะเป็นไฟล์ตั้งตั้นสำหรับการเขียน Ruby On Rails

ecom_radrails3.jpg

ecom_directory.jpg

2.) เข้าไปยังไฟล์ admin_controller.rb ใน /ecommerce/controllers/admin_controller.rb เพื่อเพิ่มฟังก์ชั่นให้สามารถใช้ ภาษาไทยได้

admincontroller.png

 after_filter :set_charset
  def set_charset
    content_type = @headers["Content-Type"] || 'text/html'
    if /^text\//.match(content_type)
      @headers["Content-Type"] = "#{content_type}; charset=tis-620"
    end
  end

setchaset.png

3.ปรับแต่งเว็บแอพลิเคชั่น

จากข้อ 2 ด้านบนจะเห็นว่าเรายังไม่ได้มีการเขียน code (นอกจากการตั้งค่าภาษาไทย) ก็สามารถสร้างเว็บแอพลิเคชั่นที่มีการทำงาน ติดต่อกับฐานข้อมูล โดยมีการ create edit delete ได้ด้วย rails scaffold

แต่จะเห็นว่าบางส่วนของการทำงาน ยังไม่เป็นไปตามความต้องการของเรา ดังนี้

  • หากไม่กรอกข้อมูล price จะเกิด Error

ดังนั้นเราจะแก้ไข code เพื่อดัก error Validation

3.1 Validation (ดัก Error)

  • Validation ใน rails application นั้นจะมี ตัวแปรให้เรียกใช้ได้เลย
  • ซึ่งต้องแก้ไข code เกี่ยวกับ validation ในส่วนของ Model ที่ /ecommerce/models/product.rb
  validates_presence_of :title, :description, :image_url
  validates_numericality_of :price
  validates_uniqueness_of :title
  validates_format_of :image_url,
                      :with    => %r{\.(gif|jpg|png)$}i,
                      :message => "must be a URL for a GIF, JPG, or PNG image"
  protected

  def validate
    errors.add(:price, "should be at least 0.01") if price.nil? ||  price < 0.01
  end

product_model.png
validationpage.png

3.2 ปรับหน้าจอ ที่ Scaffold stylesheet

ปรับ template การแสดงผลของทั้งเว็บไซต์ (/layouts/admin.rhtml)

  • การปรับหน้าตาการแสดงผลของ rails application จะอยู่ในส่วนของ view เสมอ
  • ซึ่งภายในจะมีโฟลเดอร์ layouts เป็นที่เก็บไฟล์ template ของแต่ละ controller
  • ในที่นี้ เรามี 1 controller จึงมี 1 template layout ชื่อ /layouts/admin.rhtml
<!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>

  <title>Admin: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'scaffold', 'ecommerce' %>
</head>
<body>
<div id="banner">
    <%= @page_title%>
    <!-- img src="/images/banner.jpg"/ -->
    <br>E-commerce web site For Admin</br>
</div>

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

<%= yield  %>

</body>
</html>

แก้ไขไฟล์ /layouts/admin.rhtml โดยนำบรรทัดนี้ออก เพราะเราได้ set ค่าภาษาไทยเรียบร้อยแล้ว

   <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  • เพิ่ม stylesheet อีก 1 ไฟล์เพื่อปรับการแสดงผล เนื่องจาก rails application นี้ ได้เลือกใช้ CSS ในการแสดงผลออกทางจอภาพ
  • ดังนั้น จะมีการเรียกใช้ไฟล์ stylesheet ชื่อ “ecommerce” โดยแก้ไข code ที่นี่
   <%= stylesheet_link_tag 'scaffold' , 'ecommerce' %>

cutlineutf-8.png
addstyline.png

ปรับการแสดงผลหน้าแสดงรายการสินค้า (/views/admin/list.rhtml)

<div id="product-list">
  <h1>Product Listing</h1>

  <table cellpadding="5" cellspacing="0">
  <% for product in @products %>
    <tr valign="top">

      <td>
        <img src="<%= product.image_url %>"/>
      </td>

      <td width="60%">
        <span><%= h(product.title) %></span><br />
        <%= h(product.description) %>
      </td>

      <td>
        <%= link_to 'Show', :action => 'show', :id => product %><br/>
        <%= link_to 'Edit', :action => 'edit', :id => product %><br/>
        <%= link_to 'Destroy', { :action  => 'destroy', :id => product },
                                 :confirm => "Are you sure?",
                                 :method  => :post %>
      </td>
    </tr>
  <% end %>
  </table>
</div>

<%=  if @product_pages.current.previous
       link_to("Previous page", { :page => @product_pages.current.previous })
     end
%>

<%= if @product_pages.current.next
      link_to("Next page", { :page => @product_pages.current.next })
    end
%>

<br />

<%= link_to 'New product', :action => 'new' %>

piclist.rhtml.png

updateAdminPage.png

Ref:http://wiki.nectec.or.th/setec/Knowledge/ECommerceWebsiteLab02