MVC ?

MVC MVC ? MVC ??? แน่นอน! เชื่อว่าหลาย ๆ คนถ้าหากเคยเรียน Software Patterns จาก CS หรือ CE มาจะต้องรู้จักกับคำนี้หรือคุ้นหูกันบ้างแหละ (คืนอาจารย์ไปหมดแล้ว!) ลืมไปแล้วไม่เป็นไร เพราะวันนี้เราจะมาทำความรู้จักกับ MVC กัน!

The MVC architecture

Simple workflow of MVC Architecture

หากคิดจะทำ Rails แล้วล่ะก็ สิ่งที่ขาดไม่ได้เลยคือความเข้าใจเกี่ยวกับการทำงานของ MVC เพราะ Rails นั้นมองทุกอย่างเป็น MVC

MVC ย่อมาจาก Model, View, Controller

ซึ่งแต่ละส่วนก็จะทำงานแยกกันอย่างชัดเจน มีหน้าที่ที่จะต้องรับผิดชอบแตกต่างกันไป เรามาดูทีละส่วนกันดีกว่า

Model

“ Maintains the relationship between Object and Database and handles validation, association and transactions “

หมายความว่า Model จะทำหน้าที่เชื่อมโยงความสัมพันธ์กับฐานข้อมูล (database) ซึ่งแต่ละ Model จะเป็นตัวแทนของแต่ละ Table ในฐานข้อมูล (เช่น Model ชื่อว่า User ก็จะเชื่อมกับ table Users ในฐานข้อมูลของเรา) โดยที่ Model นี้แหละ จะเป็นตัวที่เรา เอาไว้ใช้** ดู แก้ไข ***เปลี่ยนแปลง* หรือ *ลบ *ข้อมูลในฐานข้อมูล (retrieve, save, edit, delete)

ว่าง่ายๆก็คือ Model จะทำตัวเป็นเหมือนผู้จัดการส่วนตัวของ database เราจะทำอะไรกับ database ก็ต้องมาทำผ่าน Model นั่นเอง

แล้วนอกจากที่กล่าวไปแล้ว Model ยังจะสามารถจัดการกับ การตรวจสอบข้อมูล(validations) และ ความสัมพันธ์ร่วมกัน(associations) ระหว่างแต่ละ Model ได้อีกด้วย

View

“A presentation of data in a particular format, triggered by a controller’s decision to present the data.”

คือ การแสดงผล output ตามที่ได้รับ request มา ซึ่งก็จะมีหลายรูปแบบ ไม่ว่าจะเป็นผ่านทาง HTML, PDF, JSON และอื่นๆ โดยผลลัพท์สุดท้ายที่ออกมาก็มักจะเป็นสิ่งที่เรียกว่า UI (User Interface) และถูกส่งไปยังผู้ใช้งาน (client)

views ในรูปแบบ html

หน้าเว็บไซต์ทั้งหมดที่เราเห็นก็คือ Views ในรูปแบบของ HTML นั่นแหละ

Controller

“The facility within the application that directs traffic, on the one hand querying the models for specific data, and on the other hand organising that data (searching, sorting) into a form that fits the needs of a given view.”

จะทำตัวเป็นหัวหน้าคุมงานทั้งหมด จัดการ search, query ข้อมูล, ทำการ render views ออกมา, ติดต่อสื่อสารกับ views models และ ควบคุม application logic ทั้งหมด

เชื่อว่าการอ่านอย่างเดียวคงไม่เห็นภาพเท่าไหร่ เพราะฉะนั้นเรามาลองลงมือทำกันจริง ๆ เลยดีกว่า

1. Say “Hello”, Rails

การจะทำให้ Rails สามารถแสดงผลคำว่า “Hello” ออกมาได้นั้น เราต้องสร้างอย่างน้อย ๆ สองอย่างนั่นคือ controller และ view จุดประสงค์ของ controller คือ การรับ request ที่ถูกส่งที่เข้ามาใน application, Router จะเป็นตัวตัดสินใจว่า controller ไหนจะจัดการ request นั้น และแต่ละ request ก็จะถูกจัดการโดย action ที่ต่างกันไป ลองดูภาพตัวอย่าง

Routing, Controllers and Actions

ส่วนจุดประสงค์ของ view คือการแสดงผลออกมาให้คนอ่านรู้เรื่อง แต่สิ่งสำคัญที่ต้องอย่าสับสนคือ controller จะเป็นตัวรับข้อมูลต่างๆ ไม่ใช่ views ยกตัวอย่างเช่น เวลาเรากรอกข้อมูล ถึงแม้เราจะเห็นว่าเรากรอกลงไปในช่อง แต่ตัวที่รับข้อมูลเข้าไปจริงๆ คือ controller นั่นเอง โดย views ใน rails จะถูกเขียนด้วยภาษา eRuby (Embedded Ruby)

ต่อไปเราจะสร้าง controller ชื่อ Welcome และ action ชื่อ index โดยพิมพ์

$bin/rails generate controller Welcome index

จากนั้น rails จะ generate ไฟล์ต่างๆให้

create  app/controllers/welcome_controller.rb
 route  get 'welcome/index'
invoke  erb
create    app/views/welcome
create    app/views/welcome/index.html.erb
invoke  test_unit
create    test/controllers/welcome_controller_test.rb
invoke  helper
create    app/helpers/welcome_helper.rb
invoke    test_unit
invoke  assets
invoke    coffee
create      app/assets/javascripts/welcome.coffee
invoke    scss
create      app/assets/stylesheets/welcome.scss

controller ที่เราสร้างจะอยู่ใน app/controllers/welcome_controller.rb และ view จะอยู่ใน app/views/welcome/index.html.erb

เปิดไฟล์ app/views/welcome/index.html.erb ลบทุกอย่างข้างในทิ้งแล้วใส่ code นี้ลงไป

<h1>Hello, Rails!</h1>

จากนั้นเข้าไปที่ http://localhost:3000/welcome/index ก็จะเจอกับหน้าเว็บแบบนี้

(อย่าลืมรัน bin/rails server เพื่อเปิดเซิร์ฟเวอร์ก่อน)

2. Setting the Application Home Page

เอาล่ะ ตอนนี้เราได้สร้าง controller กับ views เรียบร้อยแล้ว ถ้าลองเข้าไปที่ localhost:3000 ก็จะพบว่าไม่มีอะไรเกิดขึ้น (อ้าว!) นั่นเพราะเราจำเป็นต้องบอก rails ก่อนว่าเราต้องการให้หน้า “Hello, Rails!” แสดงออกมาตอนไหน

เปิดไฟล์ config/routes.rb ขึ้นมาจะเป็นหน้าตาแบบนี้

Rails.application.routes.draw do
  get 'welcome/index'

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

ไฟล์ routes.rb นี้จะเป็นไฟล์ที่จะเชื่อม request ที่เข้ามากับ controller และ action บรรทัด get ‘welcome/index’ เป็นส่วนที่ถูกเพิ่มมาทีหลังพร้อมกับตอนที่เรารันคำสั่ง bin/rails generate controller Welcome index

เพิ่มบรรทัด root ‘welcome/index’ เข้าไปที่ไฟล์

Rails.application.routes.draw do
  get 'welcome/index'
  root 'welcome#index'
end

root ‘welcome#index’ จะบอก rails ว่า ถ้าหากมีคนเข้ามาที่ root (ในที่นี้คือ localhost:3000) จะถูกส่งไปจัดการโดย controller ชื่อ welcome และ action ชื่อ index

ส่วน get ‘welcome/index’ จะบอก rails ว่า ถ้ามีคนเข้าไปที่ localhost:3000/welcome/index ก็จะถูกส่งไปจัดการโดย controller ชื่อ welcome และ action ชื่อ index เช่นกัน

หลังจากเราเพิ่ม root ให้ rails แล้ว ทีนี้ลองเข้าไปที่ localhost:3000 ก็จะพบว่าหน้าตาเหมือนกับ localhost:3000/welcome/index เพราะถูกจัดการด้วย controller และ action เดียวกันนั่นเอง (สำหรับการ routing แบบ ละเอียดยิบ เข้าไปดูได้ที่ Rails Routing from the Outside In)

สำหรับพาร์ทต่อไปเราจะลงมือเขียนเว็บ blog ของเราขึ้นมาเองจาก Ruby on Rails รอติดตามต่อกันได้เลย