Rails:Hello

From Blognone

สั่งให้ rails ช่วยสร้าง project ขึ้นมาให้เรา ด้วยคำสั่ง rails <ชื่อโครงการ>

$ rails hello

ผลลัพธ์ที่ได้จาก rails 2.0.2

create  
      create  app/controllers
      create  app/helpers
      create  app/models
      create  app/views/layouts
      create  config/environments
      create  config/initializers
      create  db
      create  doc
      create  lib
      create  lib/tasks
      .....
      create  public/javascripts/controls.js
      create  public/javascripts/application.js
      create  doc/README_FOR_APP
      create  log/server.log
      create  log/production.log
      create  log/development.log
      create  log/test.log

จะเห็นว่าทั้ง folder และไฟล์ต่างๆ ที่จำเป็นถูกสร้างขึ้นมาแล้ว นี่คือสิ่งที่ framework ทั้งหลายควรทำให้เรา

ต่อมาให้เปิดไฟล์

/hello/config/database.yml

ไฟล์นี้เอาไว้กำหนดการเชื่อมต่อกับ database

# SQLite version 3.x
#   gem install sqlite3-ruby (not necessary on OS X Leopard)
development:
  adapter: sqlite3
  database: db/development.sqlite3
  timeout: 5000
 
# Warning: The database defined as 'test' will be erased and
# re-generated from your development database when you run 'rake'.
# Do not set this db to the same as development or production.
test:
  adapter: sqlite3
  database: db/test.sqlite3
  timeout: 5000
 
production:
  adapter: sqlite3
  database: db/production.sqlite3
  timeout: 5000

ใน code จะเห็นว่า database เริ่มต้นเป็น sqllite3 สำหรับคนที่ใช้ OSX Leopard ไม่ต้องติดตั้งอะไรเพิ่มเติมก็สามารถใช้งานได้ทันที สังเกตุว่าบรรทัดที่สองจะบอกว่า ถ้าเราต้องการใช้งาน sqlite3 ให้เราสั่ง gem install sqlite3-ruby โปรแกรม gem จะติดตั้งแทนเรา

สำหรับคนที่ต้องการต่อกับ mysql ให้แก้ไฟล์นี้ให้เป็น

development:
  adapter: mysql
  encoding: utf8
  database: hello_development
  username: root
  password:
  host: localhost
 
test:
  adapter: mysql
  encoding: utf8
  database: hello_test
  username: root
  password:
  host: localhost
 
production:
  adapter: mysql
  encoding: utf8
  database: hello_production
  username: root
  password:
  host: localhost

username และ password ให้แก้ไปตาม mysql ที่เราใช้อยู่ครับ การที่เราต้องมี database ถึง 3 ชุดเพราะ rails framework คิดแทนเราแล้วว่างานพัฒนาเว็บต้องมี ฐานข้อมูลที่ใช้ขณะพัฒนา ฐานข้อมูลที่ใช้ทดสอบ และฐานข้อมูลที่เป็นตัวจริง เสมอดังนั้นจึงช่วยลดเวลาของเราโดยการสร้างมันขึ้นมาซะเลย

ในกรณีที่บางคนใช้แต่ mysql และไม่ต้องการมาแก้ทุกครั้ง ให้ย้อนกลับไปเริ่มใหม่แล้วลบ folder hello ทิ้ง จากนั้นแทนที่จะพิมพ์ rails hello ให้เปลี่ยนเป็น rails hello -d mysql

ขั้นตอนต่อมาสำหรับคนที่ใช้ mysql คือการสร้างฐานข้อมูล ให้เราพิมพ์

$ cd hello
$ rake db:create:all

เป็นการสร้างฐานข้อมูลทั้งสามตัว hello_development, hello_test และ hello_production เตรียมเอาไว้

จากนั้นจึง start web server ของเราขึ้นมา

สำหรับ Linux และ OS X

$ ./script/server

สำหรับ Windows

$ ruby script/server

เว็บ server ของเราจะทำงานขึ้นมามีหน้าตาแบบนี้

BankBookPro:hello apirak$ ./script/server 
=> Booting Mongrel (use 'script/server webrick' to force WEBrick)
=> Rails application starting on http://0.0.0.0:3000
=> Call with -d to detach
=> Ctrl-C to shutdown server
** Starting Mongrel listening at 0.0.0.0:3000
** Starting Rails with development environment...
** Rails loaded.
** Loading any Rails specific GemPlugins
** Signals ready.  TERM => stop.  USR2 => restart.  INT => stop (no restart).
** Rails signals registered.  HUP => reload (without restart).  It might not work well.
** Mongrel 1.1.4 available at 0.0.0.0:3000
** Use CTRL-C to stop.

ให้กด Ctrl+C เพื่อหยุดการทำงาน แต่เรายังจะเปิด web server ของเราทิ้งไว้ก่อน

ให้เปิด browser ขึ้นมาแล้วพิมพ์ http://localhost:3000 ลงในช่อง url

ิbrowser ของเราจะเรียกไปที่ web server ที่พึ่งเปิดขึ้นมา จากนั้น web server จะเปิดไฟล์ /hello/public/index.html ให้เรา ถ้าถึงตอนนี้มีหน้า Ruby on Rail: Welcome aboard แสดงว่า web server ของเราได้เปิดขึ้นมาจริงๆ แล้ว

ให้เราสร้างไฟล์ hello/app/controllers/worlds_controller.rb

class WorldsController < ApplicationController
  def index
    render :text => "Hello World!"
  end
end

เราสร้าง controller ชื่อ World Controller พร้อม action index สิ่งที่อยู่ใน index คือคำสั่งสร้าง text ชุดหนึ่งว่า "Hello World!"

จากนั้นให้เรากลับมาที่ Browser พร้อมพิมพ์ http://localhost:3000/worlds จากนั้น browser จะเรียกไปที่ web server แล้ว web server จะเรียกไปที่ controller world พร้อมเรียก action index โดยอัตโนมัติ

ทีนี้ทดลองแก้ index ให้เป็น cup

class WorldsController < ApplicationController
  def index
    render :text => "Hello World!"
  end
 
  def cup
    render :text => "Hello World Cup!"
  end
end

จากนั้นพิมพ์ http://localhost:3000/worlds/cup เป็นการสั่งให้ web server ทำงานกับ controller world ที่ action cup แทนที่จะเป็น index ซึ่งเป็นค่าตั้งต้น

ถ้าโปรแกรมของเรามีมากกว่าการพิมพ์ 1 บรรทัด สิ่งที่เข้ามาช่วยเราคือ app/View

ให้ลบ action index และ cup ไปก่อน ให้เหลือแค่

class WorldsController < ApplicationController
  def index
  end
 
  def cup
  end
end

จากนั้นไปสร้าง hello/app/views/worlds/index.html.erb

<H1>I am bigger than Hello World!</H1>

จากนั้นกลับไปที่ browser แล้วเรียก http://localhost:3000/worlds rails จะวิ่งไปที่ controller => "world" และเนื่องจกาเราไม่ได้กำหนดให้มันไปที่ action ไหนดังนั้น rails จะพาเราไปที่ action => "index" โดยปริยาย จากนั้นโปรแกรมจะวิ่งไปหา view โดยดูที่ /world/index.html.etb

จากนั้นทดลองสร้าง hello/app/views/worlds/cup.html.erb

<H1>I am bigger than Hello World Cup!</H1>

แล้วกลับไปที่ browser เพื่อทดลอง http://localhost:3000/worlds/cup ครั้งนี้เรากำหนดทั้ง controller และ action เรียบร้อยครั้งนี้มันจึงวิ่งไปที่ action => "cup" และเรียกไฟล์ /worlds/cup.html.erb

ปัญหาตอนนี้คือเราต้องการสร้าง <html> ครอบไว้ทั้ง index.html.erb และ cup.html.erb โดยไม่ต้องทำซ้ำสองครั้ง ให้เราสร้างไฟล์

จากนั้นทดลองสร้าง hello/app/views/layouts/worlds.html.erb

<html>
<head>
  <title>Worlds</title>
</head>
<body>
 
<%= yield  %>
 
</body>
</html>

ทดลองเรียก http://localhost:3000/world/index และ http://localhost:3000/world/cup ดูอีกครั้ง คราวนี้ให้ลอง view source ด้วย จะเห็นว่าเรามี template ให้ใช้เรียบร้อยแล้ว

ถ้าอยากให้พื้นฐานแน่นลองทำกระบวนการตั้งแต่ต้นจนจบอีกครั้ง ผมคิดว่าสามารถทำได้ในเวลาไม่เกิน 1 นาที

อย่าพึ่งรีบร้อนเข้าใจให้หมดทุกอย่าง การเข้าใจภาพรวมจะทำให้เราไม่หลง และใช้เวลารวมน้อยกว่า