View — จัดจานด้วย ERB, layout และ helper ที่กันภัยให้

View คือขั้นสุดท้าย — การจัดจานก่อนเสิร์ฟ

ทวนเส้นทางของใบสั่งหนึ่งใบ: ลูกค้า (browser) ขอหน้า /posts → พนักงานต้อนรับ (routes) ชี้ไปแผนกบทความ → หัวหน้าเชฟ (PostsController#index) เตรียมข้อมูล

แต่ข้อมูลดิบ ๆ ส่งให้ลูกค้าไม่ได้ ต้องจัดให้เป็นหน้าเว็บก่อน — งานนี้คือหน้าที่ของ view · view คือไฟล์แม่แบบ HTML ที่มีช่องให้เติมข้อมูล

ไฟล์ view อยู่ที่ไหน? Rails หาเองจากชื่อ (กฎตั้งชื่อในบท 99): action index ของ PostsController → ไฟล์ app/views/posts/index.html.erb · controller ไม่ต้องเขียนสั่งเลยว่าใช้ไฟล์ไหน

เทียบกับ Go: ใน Gin คุณต้องบอกเองทุกครั้งว่าใช้แม่แบบไฟล์ไหนและส่งข้อมูลอะไรไป เช่น c.HTML(200, "index.tmpl", gin.H{"posts": posts}) · Rails เดาชื่อไฟล์ให้ และ @ตัวแปร ทุกตัวของ controller ส่งถึง view เอง

ERB — HTML ที่มีช่องให้ Ruby เติม

ไฟล์ view ลงท้ายด้วย .html.erb — อ่านว่า "ไฟล์นี้ให้ ERB จัดการก่อน แล้วจะได้ HTML" · เนื้อในเป็น HTML ธรรมดาเกือบทั้งหมด มีแค่บางจุดที่ครอบด้วย <% … %> เพื่อให้ Ruby ทำงาน

ช่องแบบนี้มี 3 แบบ ต่างกันที่ตัวอักษรหลัง <%:

วิธีจำ: เครื่องหมาย = คือ "เอาออกไปโชว์" · ไม่มี = คือ "ทำงานหลังบ้าน"

เทียบกับ Go: Go มีแพ็กเกจแม่แบบในตัวชื่อ html/template (Gin ใช้ตัวนี้อยู่เบื้องหลังตอนเรียก c.HTML) · ฝั่ง BACK ไม่ได้สอนตรง ๆ ไม่เป็นไร แค่ดูว่าหน้าตาคล้ายกัน — Go ใช้ {{ }} ส่วน ERB ใช้ <% %>:

มาลองของจริง · ก่อนอื่นดู controller — action show ตั้ง @post เป็นบทความหนึ่งชิ้น (ยังไม่มีฐานข้อมูล เรื่องนั้นรอ Day 2 · ตอนนี้จำลองบทความด้วย Hash):

# app/controllers/posts_controller.rb (ท่อน show)
def show
  @post = { id: params[:id], title: "ข้าวมันไก่ร้านดัง", published: true }
end

• def show … end — action ชื่อ show (บท 102) ทำงานเมื่อมีคนเปิดหน้าบทความทีละชิ้น
• { id: …, title: …, published: … } — Hash (บท 92) · title: คือป้ายชื่อ :title แล้วตามด้วยค่า · ทั้งก้อนคือ "บทความปลอม 1 ชิ้น"
• params[:id] — เลขจาก URL (บท 102) · เปิด /posts/42 ก็ได้ "42"
• published: true — แปลว่า "บทความนี้เผยแพร่แล้ว" (เดี๋ยวใช้กับ if)

<%# app/views/posts/show.html.erb %>
<h1><%= @post[:title] %></h1>
<% if @post[:published] %>
  <p>เผยแพร่แล้ว</p>
<% end %>
<%# โน้ตของเชฟ: ลูกค้าไม่เห็นบรรทัดนี้ %>
<p>รหัสบทความ: <% @post[:id] %></p>

$ curl -s http://localhost:3000/posts/42 | sed -n '/<main/,/<\/main>/p'
    <main class="container mx-auto mt-28 px-5 flex">
      <!-- BEGIN app/views/posts/show.html.erb
--><h1>ข้าวมันไก่ร้านดัง</h1>
  <p>เผยแพร่แล้ว</p>
<p>รหัสบทความ: </p>
<!-- END app/views/posts/show.html.erb -->
    </main>

วนรายการ — โชว์บทความหลายชิ้นด้วย each

หน้า /posts ต้องโชว์บทความทั้งหมด · controller ตั้ง @posts (มี s = หลายชิ้น) เป็น Array ของ Hash — ยังจำลองเหมือนเดิม และแอบใส่ชื่อบทความแปลก ๆ ไว้ชิ้นหนึ่ง (เดี๋ยวใช้ในหัวข้อความปลอดภัย):

# app/controllers/posts_controller.rb (ท่อน index)
def index
  # ยังไม่มีฐานข้อมูล (รอ Day 2) — จำลองบทความด้วย Hash
  @posts = [
    { id: 1, title: "ข้าวมันไก่ร้านดัง" },
    { id: 2, title: "ส้มตำปูปลาร้า" },
    { id: 3, title: "<script>alert('hack')</script>" }
  ]
end

[ … ] คือ Array (บท 92) = กล่องที่เรียงของไว้หลายชิ้น · ข้างในมี Hash 3 ก้อน คั่นด้วยจุลภาค = บทความปลอม 3 ชิ้น · แล้ว view ก็วนทีละชิ้น:

<%# app/views/posts/index.html.erb %>
<h1>บทความทั้งหมด</h1>
<ul>
  <% @posts.each do |post| %>
    <li><%= link_to post[:title], post_path(post[:id]) %></li>
  <% end %>
</ul>

ทีละบรรทัด:

• <% @posts.each do |post| %> — "ทำซ้ำทุกชิ้นใน @posts ชิ้นที่กำลังทำเรียกว่า post" · ไม่มี = เพราะเป็นคำสั่งถึงคนจัด ไม่ใช่ของที่จะวางลงจาน
• <li>…</li> — HTML ธรรมดา อยู่ในวง จึงถูกพิมพ์ซ้ำทุกรอบ
• <%= link_to … %> — สร้างลิงก์ (อธิบายในอีกสองหัวข้อ) · มี = เพราะอยากให้ลิงก์โผล่
• <% end %> — ปิดวง (คู่กับ do)

$ curl -s http://localhost:3000/posts | sed -n '/<main/,/<\/main>/p'
    <main class="container mx-auto mt-28 px-5 flex">
      <!-- BEGIN app/views/posts/index.html.erb
--><h1>บทความทั้งหมด</h1>
<ul>
    <li><a href="/posts/1">ข้าวมันไก่ร้านดัง</a></li>
    <li><a href="/posts/2">ส้มตำปูปลาร้า</a></li>
    <li><a href="/posts/3">&lt;script&gt;alert(&#39;hack&#39;)&lt;/script&gt;</a></li>
</ul>
<!-- END app/views/posts/index.html.erb -->
    </main>

ได้ <li> 3 อัน ตรงกับบทความ 3 ชิ้น · บรรทัดที่ 3 หน้าตาแปลก ๆ (< …) — เก็บไว้ก่อน หัวข้อ XSS จะเฉลย

เทียบกับ Go: โปรแกรม Go สั้น ๆ ข้างล่างทำแบบเดียวกันด้วย html/template · ไม่ต้องพิมพ์ตาม แค่ดูว่าใน Go ต้องทำอะไรเองบ้าง (go build ผ่าน · Go 1.26.5):

package main

import (
	"html/template"
	"os"
)

type Post struct {
	Title string
}

func main() {
	tmpl := template.Must(template.New("list").Parse(
		"<ul>\n{{range .}}  <li>{{.Title}}</li>\n{{end}}</ul>\n"))
	posts := []Post{
		{Title: "ข้าวมันไก่ร้านดัง"},
		{Title: "<script>alert('hack')</script>"},
	}
	tmpl.Execute(os.Stdout, posts)
}

$ go run main.go
<ul>
  <li>ข้าวมันไก่ร้านดัง</li>
  <li>&lt;script&gt;alert(&#39;hack&#39;)&lt;/script&gt;</li>
</ul>

• type Post struct — Go ต้องประกาศหน้าตาบทความเองก่อน (Rails ตอนนี้ใช้ Hash แทน)
• template.Must(template.New("list").Parse(…)) — สร้างแม่แบบจากข้อความ · Must แปลว่า "ถ้าแม่แบบเขียนผิด ให้หยุดโปรแกรมเลย"
• {{range .}} … {{end}} — วนทุกชิ้น · . คือข้อมูลที่ส่งเข้ามา = <% @posts.each do |post| %> … <% end %>
• tmpl.Execute(os.Stdout, posts) — เติมข้อมูลแล้วพิมพ์ออกจอ · ต้องส่ง posts เข้าไปเอง ส่วน Rails หยิบ @posts จาก controller ให้เอง

บทความที่มี <script> ก็ออกมาเป็น < เหมือน Rails — เก็บไว้ก่อน เฉลยในหัวข้อ XSS

<ul>
  
    <li><a href="/posts/1">ข้าวมันไก่ร้านดัง</a></li>

    <li><a href="/posts/2">ส้มตำปูปลาร้า</a></li>

    <li><a href="/posts/3">&lt;script&gt;alert(&#39;hack&#39;)&lt;/script&gt;</a></li>
[{id: 1, title: &quot;ข้าวมันไก่ร้านดัง&quot;}, {id: 2, title: &quot;ส้มตำปูปลาร้า&quot;}, {id: 3, title: &quot;&lt;script&gt;alert(&#39;hack&#39;)&lt;/script&gt;&quot;}]</ul>

layout — จานรองที่ทุกหน้าใช้ร่วมกัน

แปลกไหม: index.html.erb ที่เราเขียนมีแค่ 6 บรรทัด ไม่มี <html> ไม่มี <title> · แต่ HTML ที่ได้จริงขึ้นต้นแบบนี้ (head -5 = ดูแค่ 5 บรรทัดแรก):

$ curl -s http://localhost:3000/posts | head -5
<!-- BEGIN app/views/layouts/application.html.erb
--><!DOCTYPE html>
<html>
  <head>
    <title>Wongnok Blog</title>

ดูบรรทัดแรก — มาจากไฟล์ app/views/layouts/application.html.erb ที่ rails new สร้างให้ · ไฟล์นี้คือ layout: กรอบที่ครอบทุกหน้าของแอปอัตโนมัติ · ของจริงย่อเหลือส่วนสำคัญ:

<%# app/views/layouts/application.html.erb (ของจริงจาก rails new · ย่อ) %>
<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Wongnok Blog" %></title>
    <%= csrf_meta_tags %>
    … (meta · ไอคอน · CSS · JavaScript อีกหลายบรรทัด)
  </head>

  <body>
    <main class="container mx-auto mt-28 px-5 flex">
      <%= yield %>
    </main>
  </body>
</html>

• <%= yield %> — ช่องที่ view ของแต่ละหน้าจะถูกวางลงไป · yield ตัวเดียวกับบท 97 ที่แปลว่า "ตรงนี้ให้ของที่ส่งเข้ามาทำงาน" · เปิด /posts ช่องนี้ก็เป็นรายการบทความ เปิด /posts/42 ก็เป็นหน้าบทความ
• content_for(:title) || "Wongnok Blog" — "ถ้าหน้านั้นไม่ได้ตั้งชื่อเอง ให้ใช้ Wongnok Blog" (|| = "ถ้าไม่มี ใช้ตัวขวา" จากบท 94) · เรื่องตั้งชื่อหน้าเองรอวันหลัง
• csrf_meta_tags — "บัตรคิว" ที่อีกสองหัวข้อจะอธิบาย · อยู่ใน layout จึงมีในทุกหน้า
• class="container mx-auto mt-28 …" — class ของ Tailwind (เพราะ rails new … --css=tailwind) · หน้าเว็บมีระยะขอบบนกว้าง ๆ มาจากตรงนี้

เทียบกับ Go: Go ไม่มี layout ให้อัตโนมัติ ต้องจัดเอง เช่นแยกแม่แบบส่วนหัว/ท้ายแล้วเรียกใช้ในทุกหน้าเอง · Rails ครอบให้ทุกหน้าโดยไม่ต้องสั่ง (ถ้าเคยเรียนฝั่ง FRONT: {children} ใน app/layout.tsx ของ Next.js บท 83 = <%= yield %>)

link_to — helper ที่สร้างลิงก์ให้

helper คือ method สำเร็จรูปที่ Rails เตรียมไว้ให้เรียกใน view แล้วคืน HTML ออกมา · ตัวที่ใช้บ่อยที่สุดคือ link_to — สร้างแท็กลิงก์ <a>

<%= link_to post[:title], post_path(post[:id]) %>
#        ↑ ข้อความที่จะโชว์   ↑ ลิงก์ไปที่ไหน

• link_to รับ 2 อย่างคั่นด้วยจุลภาค: ข้อความ กับ ที่อยู่ (ละวงเล็บได้ — บท 97)
• post_path(post[:id]) — route helper จากบท 101 · ส่ง 1 เข้าไปได้ "/posts/1"
• ผลจริงจากข้างบน: <a href="/posts/1">ข้าวมันไก่ร้านดัง</a>

ทำไมไม่เขียน <a href="/posts/1"> เอง? เพราะถ้าวันหนึ่งเปลี่ยน URL ใน config/routes.rb ลิงก์ที่ใช้ post_path ทุกอันเปลี่ยนตามเอง · ลิงก์ที่เขียนมือต้องไล่แก้ทีละไฟล์ (ใน Go ก็ต้องไล่แก้แบบนั้น)

ความปลอดภัยที่ได้ฟรี ① — XSS: คนร้ายแอบใส่โค้ดในชื่อบทความ

ตอนนี้เฉลยบรรทัดแปลก ๆ ได้แล้ว · สมมติมีคนร้ายตั้งชื่อบทความว่า <script>alert('hack')</script> (<script> คือแท็กที่สั่ง browser ให้รันโปรแกรม JavaScript · alert('hack') คือโปรแกรมสั้นที่สุด แค่เด้งกล่องข้อความคำว่า hack ขึ้นมา)

ถ้าเว็บเอาชื่อนี้ไปวางในหน้าเว็บตรง ๆ browser ของทุกคนที่เปิดหน้านั้นจะรันโปรแกรมของคนร้าย — ในชีวิตจริงไม่ใช่แค่เด้งกล่องข้อความ แต่ขโมยข้อมูล login หรือกดปุ่มแทนผู้ใช้ได้ · การโจมตีแบบนี้เรียกว่า XSS

Rails กันให้แล้วโดยไม่ต้องสั่ง: ทุกอย่างที่ผ่าน <%= %> จะถูกแปลงเครื่องหมายพิเศษ ให้เป็นตัวอักษรธรรมดา (เรียกว่า escape) — ดูผลจริงจากหน้า /posts:

ผลคือลูกค้าเห็นข้อความ <script>alert('hack')</script> ครบทุกตัวบนจอ แต่ browser ไม่รัน เพราะมันไม่ใช่แท็กแล้ว · Go html/template ที่เห็นข้างบนก็ทำแบบเดียวกันเป๊ะ

<li><%= post[:title] %></li>
<li><%= raw post[:title] %></li>

    <li>&lt;script&gt;alert(&#39;hack&#39;)&lt;/script&gt;</li>
    <li><script>alert('hack')</script></li>

ความปลอดภัยที่ได้ฟรี ② — CSRF: ใบสั่งปลอมที่ส่งมาจากเว็บอื่น

นึกภาพ: คุณ login เว็บบล็อกค้างไว้ แล้วเผลอเปิดเว็บของคนร้ายในอีกแท็บ · เว็บคนร้ายแอบส่งคำสั่ง "ลบบทความ 1" มาที่เว็บบล็อกของเรา · browser ของคุณแนบ cookie ของเว็บบล็อกไปด้วยอัตโนมัติ (cookie คือข้อมูลที่ browser จำไว้แล้วแนบไปทุกครั้งที่คุยกับเว็บนั้น — เช่นสถานะ login · คือ "บัตรสมาชิก" ที่ด่านหน้าครัวอ่านในบท 100)

เว็บบล็อกเห็น cookie ถูกต้อง เลยนึกว่าคุณกดเอง → บทความหาย · การโจมตีนี้เรียกว่า CSRF

วิธีกันของ Rails: ทุกหน้าที่เว็บเราส่งออกไปจะมีรหัสลับ (token) ฝังไว้ · คำสั่งที่เปลี่ยนแปลงข้อมูล (POST · PATCH · DELETE — HTTP method ที่เห็นในตาราง resources บท 101) ต้องแนบรหัสนี้มาด้วย · เว็บคนร้ายอ่านรหัสในหน้าเว็บของเราไม่ได้ จึงแนบไม่ได้

รหัสอยู่ใน <head> ทุกหน้า (มาจาก csrf_meta_tags ใน layout) · grep csrf = เลือกเฉพาะบรรทัดที่มีคำว่า csrf:

$ curl -s http://localhost:3000/posts | grep csrf
    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="6e6uhu9U0vaKkwzpc8AlH2I6EZbbipkLjmQ0L2txoAXHEpPcBGXLnjU4xtiSLVAHWSIgez5ZrubgGAHKmENXng" />

(รหัสสุ่มใหม่ทุกครั้ง ของคุณจะต่างจากนี้) · จะทดลองได้ ต้องมีคำสั่ง "ลบ" ให้คนร้ายยิงก่อน · ผมเพิ่ม :destroy ใน routes กับ action destroy ที่ลบแบบจำลอง (ยังไม่มีฐานข้อมูล จึงแค่ตอบข้อความกลับ):

# config/routes.rb — เพิ่ม :destroy เข้าไป
resources :posts, only: [:index, :show, :destroy]

# app/controllers/posts_controller.rb — action ใหม่
def destroy
  # ยังไม่ลบจริง แค่ตอบข้อความกลับไป
  render plain: "ลบบทความ #{params[:id]} แล้ว (จำลอง)"
end

• :destroy ใน routes (บท 101) — เปิดทาง DELETE /posts/1 ให้ไปที่ action destroy
• render plain: "…" — ตอบกลับเป็นข้อความเปล่า ๆ ไม่ใช้ไฟล์ view (render จากบท 102) · #{params[:id]} = เอาเลขจาก URL มาแทรกใน string (บท 91)

ทีนี้ลองเป็นคนร้าย — ส่งคำสั่ง DELETE ตรง ๆ ไม่แนบรหัส (-X DELETE = ส่งเป็น method DELETE · -o /dev/null -w '%{http_code}' = ไม่ต้องโชว์เนื้อหา พิมพ์แค่เลขสถานะ):

$ curl -s -o /dev/null -w '%{http_code}\n' -X DELETE http://localhost:3000/posts/1
422

ใน terminal ที่เปิด server ไว้ (หรือไฟล์ log/development.log) เขียนเหตุผลไว้ (ตัดมาเฉพาะต้น ๆ · ใต้บรรทัดสุดท้ายยังมีรายชื่อไฟล์ของ Rails อีกยาวมาก ไม่ต้องอ่าน):

Started DELETE "/posts/1" for ::1 at 2026-11-03 21:11:51 +0700
Processing by PostsController#destroy as */*
  Parameters: {"id" => "1"}
Can't verify CSRF token authenticity.
Completed 422 Unprocessable Content in 0ms (ActiveRecord: 0.0ms (0 queries, 0 cached) | GC: 0.0ms)


  
ActionController::InvalidAuthenticityToken (Can't verify CSRF token authenticity.):

422 = "ไม่รับใบสั่งนี้" · บรรทัด Can't verify CSRF token authenticity. แปลว่า "ตรวจรหัสไม่ผ่าน" · และข้อความ "ลบบทความ…" ไม่โผล่ = action destroy ไม่ได้ทำงานเลย ทั้งที่ใน PostsController ไม่ได้เขียนอะไรเรื่อง token สักบรรทัด (เวลาในบรรทัดแรกของคุณจะต่างจากนี้)

เทียบกับ "ลูกค้าตัวจริง" ที่เปิดหน้าเว็บเราก่อน แล้วถือรหัสกับ cookie กลับมา (สองบรรทัดนี้ยาว ไม่ต้องพิมพ์ตาม ดูแค่ผล):

$ TOKEN=$(curl -s -c jar.txt http://localhost:3000/posts | grep -o 'name="csrf-token" content="[^"]*"' | sed 's/.*content="//;s/"$//')
$ curl -s -b jar.txt -X DELETE -H "X-CSRF-Token: $TOKEN" http://localhost:3000/posts/1
ลบบทความ 1 แล้ว (จำลอง)

• บรรทัดแรก — เปิดหน้า /posts เหมือนลูกค้าจริง · เก็บ cookie ลงไฟล์ jar.txt (-c) · แล้วตัดเอาเฉพาะรหัสใส่ตัวแปร TOKEN
• บรรทัดที่สอง — ส่ง DELETE พร้อม cookie (-b) และรหัส (-H = แนบไว้ในหัวจดหมาย) → ผ่าน ได้ข้อความจาก destroy
• ในเว็บจริงคุณไม่ต้องทำเองแบบนี้ ฟอร์มและปุ่มของ Rails แนบรหัสให้เอง (เจอใน Day 2–3)

เทียบกับ Go: ใน Gin ที่เรียนมา เรื่องนี้ไม่ได้เปิดให้เอง ต้องเลือกเครื่องมือมาเสียบเพิ่ม · Rails เปิดไว้ตั้งแต่ rails new · ข้อดีคือไม่ลืม · ข้อควรระวังคือถ้าไปปิดเอง ก็ไม่มีใครเตือนเหมือนกัน

ภารกิจ — หน้ารายการบทความของคุณเอง

# app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def index
    # ยังไม่มีฐานข้อมูล (รอ Day 2) — จำลองบทความด้วย Hash
    @posts = [
      { id: 1, title: "ข้าวมันไก่ร้านดัง" },
      { id: 2, title: "ส้มตำปูปลาร้า" },
      { id: 3, title: "<script>alert('hack')</script>" }
    ]
  end

  def show
    @post = { id: params[:id], title: "ข้าวมันไก่ร้านดัง", published: true }
  end
end

<%# app/views/posts/index.html.erb %>
<h1>บทความทั้งหมด</h1>
<ul>
  <% @posts.each do |post| %>
    <li><%= link_to post[:title], post_path(post[:id]) %></li>
  <% end %>
</ul>

<%# app/views/posts/show.html.erb %>
<h1><%= @post[:title] %></h1>
<p>รหัสบทความ: <%= @post[:id] %></p>

ActionView::Template::Error (undefined method 'each' for nil)

ActionView::Template::Error (undefined method 'post_path' for an instance of #<Class:0x000000012bb7e068>)

ทดสอบความเข้าใจ

ติดตรงไหน ถามกลับได้เลย — เอาโค้ด view ของคุณกับ HTML ที่ curl ได้มาวางคู่กัน จะเห็นเร็วมากว่าแท็กไหนผิด

ถ้าเปิดสไลด์ดูประกอบ

อ้างอิง

• Rails Guides — Action View Overview — อ่านหัวข้อ 3.1 ERB (แท็ก <% %> กับ <%= %>) และ หัวข้อ 5 Layouts
• Rails Guides — Layouts and Rendering in Rails — อ่านหัวข้อ 2.1 (ทำไม action หา view เองได้) และ หัวข้อ 3.2 Understanding yield
• Rails API — ActionView::Helpers::UrlHelper — ดูเฉพาะ method link_to ตัวอย่างแรก ๆ พอ
• Rails Guides — Securing Rails Applications — อ่านหัวข้อ 4 Cross-Site Request Forgery (CSRF) และ 7.3 Cross-Site Scripting (XSS) · หัวข้อ 7.2 SQL Injection เก็บไว้อ่านตอน Day 2
• Go — package html/template — อ่านย่อหน้าแรกของ Overview ที่บอกว่า escape ให้อัตโนมัติ — กติกาเดียวกับ ERB