เชี่ยวชาญการสร้างฟอร์มใน Ruby on Rails ด้วย Simple Form

Ruby on Rails ได้เปลี่ยนวิธีที่เราสร้างแอปพลิเคชันเว็บ ตั้งแต่แรกเริ่ม โครงสร้างนี้มาพร้อมคุณสมบัติยอดเยี่ยมที่ช่วยให้คุณเริ่มต้นและสร้างแอปพลิเคชันที่แข็งแกร่งได้

อย่างไรก็ตาม การสร้างและจัดการฟอร์มยังคงเป็นเรื่องท้าทาย Simple Form เป็นตัวเลือกที่ยอดเยี่ยม มาดูว่า Simple Form คืออะไร ทำไมเราจึงต้องการมัน และกรณีการใช้งานจริงบ้าง

ฟอร์มและ Ruby on Rails

Ruby on Rails ทำให้การสร้างแอปพลิเคชันง่ายขึ้น แต่มันก็ต้องการความสนใจอย่างต่อเนื่องเพื่อให้โค้ดเบสของคุณเรียบร้อยและสอดคล้องกัน กลยุทธ์หนึ่งคือการหลีกเลี่ยงการเขียนโค้ดโดยใช้ abstraction (การนามธรรม) โค้ดที่ไม่อยู่ในแอปพลิเคชันจริงของคุณคือโค้ดที่คุณไม่ต้องจัดการ นั่นคือเหตุผลที่เราชอบ abstraction มาก Simple Form ก็คือ abstraction ชนิดหนึ่งที่ทำให้การสร้างฟอร์มสำหรับเว็บเพจง่ายขึ้น

ฟอร์มโดยทั่วไปซับซ้อนในการสร้าง แม้จะใช้ Ruby on Rails แต่ละฟิลด์ต้องการความสนใจเพื่อกำหนดประเภทที่ถูกต้องและเชื่อมโยงกับแอตทริบิวต์ที่ถูกต้อง Simple Form ช่วยลดภาระนี้ เพราะคุณไม่ต้องหาประเภทที่แน่นอนสำหรับแต่ละฟิลด์

มาดูฟอร์มที่รับรายละเอียดผู้ใช้ มีฟิลด์ name, username, และ email สมมติว่าเรามีโมเดล User พร้อมแอตทริบิวต์ที่เกี่ยวข้อง คล้ายกัน ด้วย Simple Form ฟอร์มที่กรอกแอตทริบิวต์จะมีลักษณะดังนี้:

สังเกตว่าเราไม่ได้ระบุประเภทของแต่ละฟิลด์ Simple Form จะเลือกประเภทอินพุตที่ถูกต้องสำหรับแต่ละฟิลด์โดยอิงตามประเภทของคอลัมน์

สิ่งนี้ช่วยประหยัดเวลาและทำให้โค้ดอ่านง่ายและบำรุงรักษาง่ายขึ้น

การติดตั้ง Simple Form

เพื่อติดตั้ง Simple Form ในโปรเจกต์ของคุณ ให้เพิ่ม gem simple_form ลงใน Gemfile หลังจากที่คุณรัน bundle install แล้ว คุณสามารถใช้ generator ที่มาพร้อมกันเพื่อตั้งค่าให้เหมาะสมกับแอปพลิเคชันของคุณ

หมายเหตุเกี่ยวกับ Bootstrap และ Zurb Foundation: Simple Form รองรับทั้ง Bootstrap และ Zurb Foundation 5 หากคุณใช้หนึ่งในนั้น คุณสามารถใช้พารามิเตอร์ --bootstrap หรือ --foundation กับ generator เพื่อรวมการตั้งค่าเพิ่มเติมระหว่างการติดตั้ง ในกรณีของ Bootstrap จะมีลักษณะดังนี้:

การใช้งาน Simple Form แบบพื้นฐาน

เช่นที่เราได้ระบุไว้ก่อนหน้า Simple Form จะสร้างฟอร์มที่สมบูรณ์โดยอิงหลักจากข้อมูลที่เกี่ยวข้องกับออบเจ็กต์ของคุณ อย่างไรก็ตาม สิ่งสำคัญคือต้องเข้าใจว่า Simple Form จะไม่เพียงแต่สร้างฟิลด์ที่เหมาะสมสำหรับแต่ละแอตทริบิวต์ แต่ยังให้ label และแสดงคำแนะนำข้อผิดพลาดเหนือฟิลด์อินพุตด้วย!

มาพิจารณาแอปพลิเคชัน Ruby on Rails 7.x ใหม่ เราจะสร้างโมเดล User และสร้างฟอร์มสำหรับมันโดยใช้ Simple Form

ตอนนี้เราสามารถสร้าง controller พร้อม action new, create, และ index ได้ เป้าหมายคือมีสิ่งที่เราสามารถเล่นกับฟอร์มได้

Action เหล่านี้ต้องการ view ที่เกี่ยวข้อง นี่คือฟอร์มที่จัดการการสมัครสมาชิกหรือการเพิ่มผู้ใช้:

ในกรณีนี้ เราระบุ label แบบกำหนดเองและ error สำหรับอินพุต username หากไม่มีการกำหนดเองแบบนี้ มันจะพยายามเดาว่า label ต้องเป็นอะไรจากชื่อแอตทริบิวต์

เราตั้งคำแนะนำแบบกำหนดเองสำหรับฟิลด์ password และ placeholder แบบกำหนดเองสำหรับฟิลด์ email สังเกตด้วยความสามารถในการระบุ "inline label" แทน label ที่อยู่เหนือฟิลด์ (ค่าเริ่มต้นปกติในฟอร์ม)

ยังสามารถปิดใช้งาน label, hints, และ errors ได้โดยส่งค่า false สำหรับแอตทริบิวต์เหล่านั้น: <%= f.input :password_confirmation, label: false %>

เราต้องเพิ่ม view อีกหนึ่งหน้าเพื่อให้ใช้งานได้

คุณสามารถเริ่มแอปพลิเคชันด้วย rails s ไปที่ localhost:3000/users/new เพื่อดูและใช้ฟอร์ม มาเน้นดูว่าฟอร์มนี้ต่างจากฟอร์ม Ruby on Rails แบบคลาสสิกอย่างไร

หมายเหตุเกี่ยวกับ validation: Simple Form สามารถทำงานกับฟิลด์ที่จำเป็นได้ทันที ตัวอย่างเช่น หากเราเพิ่ม validation presence ต่อไปนี้ในโมเดล User ของเรา:

สิ่งนี้จะถูกใช้โดย Simple Form เพื่อเพิ่ม '*' เล็กน้อยถัดจากฟิลด์ username ระบุว่าเป็นฟิลด์ที่จำเป็น สิ่งนี้ไม่จัดการ error อัตโนมัติ ดังนั้นคุณยังต้องจัดการใน controller action กลับไปที่ฟิลด์ที่มี error และดำเนินการตามนั้น

เกี่ยวกับประเภทคอลัมน์และฟิลด์ฟอร์ม

เช่นที่กล่าวไว้ก่อนหน้า เราไม่ได้ระบุประเภทสำหรับแต่ละฟิลด์ README ของ Simple Form มีรายการสมบูรณ์ของประเภทอินพุตทั้งหมดและค่าเริ่มต้นสำหรับแต่ละประเภทคอลัมน์ นี่คือสิ่งที่ใช้บ่อยที่สุด:

Boolean (บูลีน)

ตามที่เห็นในตารางข้างต้น แอตทริบิวต์ boolean จะถูกแสดงเป็น checkbox โดยค่าเริ่มต้น ในหลายกรณี นั่นคือสิ่งที่เราต้องการ แต่ถ้าไม่ใช่ สามารถปรับแต่งได้ใน Simple Form ด้วยแอตทริบิวต์ as ซึ่งช่วยให้คุณระบุได้ว่าจะแสดง radio buttons หรือ dropdown แทน

นี่คือวิธีระบุ radio buttons แทน:

สิ่งนี้จะสร้าง HTML ดังนี้:

น่าประทับใจที่ชิ้นโค้ด Ruby ขนาดเล็กแบบนี้ให้ชิ้น HTML ที่สมบูรณ์ขนาดนี้!

HTML

จากตัวอย่างก่อนหน้า เราเห็นว่า Simple Form สร้าง HTML มากมายสำหรับแต่ละฟิลด์ รวมถึง HTML สำหรับฟิลด์อินพุตและ wrapper div รอบ label และฟิลด์อินพุต เราสามารถปรับแต่งได้โดยระบุ class และ id แบบกำหนดเองโดยใช้แอตทริบิวต์ input_html และ wrapper_html นี่คือตัวอย่าง:

นี่ยังเป็นวิธีการตั้งค่าแอตทริบิวต์สำหรับ HTML ที่เกี่ยวข้อง เช่น maxlength หรือ value มาดูฟิลด์ password จากฟอร์มผู้ใช้ของเรา เราสามารถจำกัดขนาดและความยาวของฟิลด์ด้วยแอตทริบิวต์ maxlength

Custom Inputs และตัวเลือกเพิ่มเติม

Simple Form เป็นไลบรารี Ruby ที่เตรียมโหนด HTML ให้คุณ มันมาพร้อมชุดฟิลด์ครบชุด แตคุณยังสามารถเพิ่มของคุณเองได้ ในการทำเช่นนั้น คุณสามารถสร้างคลาสที่สืบทอดจากคลาสของ Simple Form มาลองกำหนด custom social network input field ที่มี '@' นำหน้าฟิลด์จริงๆ

ตอนนี้เราสามารถใช้ได้ดังนี้:

สังเกตว่า หากโมเดล User ของคุณไม่มีแอตทริบิวต์ network_handle คุณต้องเพิ่มมันผ่าน migration หรือใช้ attr_accessor ในโมเดล

รองรับ i18n

เช่นที่เราได้กล่าว การสร้างฟอร์มมักเป็นจุดเจ็บปวด แต่สิ่งจะแย่ลงเมื่อมันเกี่ยวกับเว็บไซต์และแอปพลิเคชันที่รองรับหลายภาษา Simple Form โชคดีที่ปฏิบัติตามมาตรฐาน Ruby on Rails คุณสามารถใช้ key simple_form ในไฟล์ locale เพื่อกำหนดการแปลสำหรับ label, hints, placeholders, prompts ฯลฯ ทั้งหมด

นี่คือตัวอย่างเล็กๆ:

Value Objects

บางครั้งเราอาจใช้คลาสที่กำหนดเอง non-ActiveRecord เพื่อสร้างออบเจ็กต์หลักที่ฟอร์มพึ่งพา สามารถทำได้เพื่อรวมข้อมูลจากหลายโมเดลเป็นออบเจ็กต์สังเคราะห์เพื่อเหตุผลทางธุรกิจหรือรวมหลายแอตทริบิวต์เป็นออบเจ็กต์เดียว

ไม่ว่าจะเป็นเหตุผลอะไร คุณยังคงสามารถพึ่งพา Simple Form ในการสร้างฟอร์มสำหรับประเภทออบเจ็กต์นั้นได้ เพื่อทำเช่นนั้น คลาสออบเจ็กต์ต้อง implement สามเมธอดในกรณีที่ดีที่สุด: to_model, to_key, และ persisted?

เมธอด to_model จะชี้ไปที่ออบเจ็กต์เอง:

เมธอด to_key ช่วยให้เราชี้ไปที่แอตทริบิวต์ identifier สำหรับออบเจ็กต์ — ปกติหมายถึงแอตทริบิวต์ id:

สุดท้าย เมธอด persisted? อยู่ที่นั่นเพื่อบอก Simple Form ว่าออบเจ็กต์ถูก persist โดยตรงหรือไม่

หากเมธอดนั้นไม่มีอยู่ f.submit helper จะใช้ไม่ได้

มีวิธีเร็วกว่านั้น — คือ include โมดูล ActiveModel::Model ในคลาส:

และลองใช้ผ่านโมเดล User

เราสามารถเพิ่มฟิลด์สำหรับชื่อบริษัทภายในฟอร์มผู้ใช้ได้:

แน่นอนว่าแอตทริบิวต์นี้จะไม่ถูกบันทึกในตาราง อย่างไรก็ceae แนวคิดเดียวกันสามารถนำไปประยุกต์ใช้เพื่อสร้าง value object ด้วยแอตทริบิวต์ที่ดึงมาจากหลายโมเดลได้

สรุป

ในโพสต์นี้ เราได้เห็นว่า Simple Form ติดตั้งและรวมเข้ากับแอปพลิเคชัน Ruby on Rails ของคุณได้ง่าย Simple Form ไม่เพียงแต่ดูแลรายละเอียดของแต่ละฟิลด์ในฟอร์มของคุณ แต่ยังสร้าง HTML ที่ซับซ้อนและสมบูรณ์ เพื่อให้ฟอร์มของคุณสามารถจัดสไตล์และจัดรูปแบบได้ง่าย

ขอแนะนำให้คุณเจาะลึกเอกสารของ Simple Form เพื่อดูว่ามันทรงพลังแค่ไหน

Happy coding!

P.S. หากคุณต้องการอ่านโพสต์ Ruby Magic ทันทีที่เผยแพร่ ให้สมัครสมาชิก newsletter Ruby Magic ของเรา และจะไม่พลาดโพสต์เด็ดๆ ไป!

Thomas Riboulet

ผู้เขียนแขก Thomas เป็น Consultant Backend และ Cloud Infrastructure Engineer ตั้งอยู่ในฝรั่งเศส มากกว่า 13 ปี เขาทำงานกับสตาร์ทอัพและบริษัทเพื่อขยายทีม ผลิตภัณฑ์ และโครงสร้างพื้นฐาน เขายังได้ตีพิมพ์หลายครั้งในนิตยสาร GNU/Linux ของฝรั่งเศสและบล็อกของตัวเอง

บทความทั้งหมดโดย Thomas Riboulet