Ruby on Rails ได้เปลี่ยนวิธีที่เราสร้างเว็บแอปพลิเคชัน ในช่วงแรก เฟรมเวิร์กมาพร้อมกับฟีเจอร์ที่ยอดเยี่ยมเพื่อช่วยให้คุณเริ่มต้นและสร้างแอปพลิเคชันที่มีประสิทธิภาพ
อย่างไรก็ตาม การสร้างและจัดการแบบฟอร์มยังคงเป็นเรื่องยาก Simple Form เป็นตัวเลือกที่ยอดเยี่ยม เรามาตรวจสอบว่า Simple Form คืออะไร ทำไมเราถึงต้องการมัน และกรณีการใช้งานจริงบางกรณี
แบบฟอร์มและ Ruby on Rails
Ruby on Rails ช่วยให้การสร้างแอปพลิเคชันง่ายขึ้นจริงๆ แต่คุณยังต้องให้ความสนใจอย่างต่อเนื่องเพื่อให้โค้ดเบสของคุณมีความคล่องตัวและสอดคล้องกัน กลยุทธ์หนึ่งคือการหลีกเลี่ยงการเขียนโค้ดโดยใช้นามธรรม เป็นต้น รหัสที่ไม่ได้อยู่ในแอปพลิเคชันจริงของคุณคือรหัสที่คุณไม่จำเป็นต้องจัดการ นั่นเป็นเหตุผลที่เราชอบนามธรรมมากใช่ไหม? Simple Form เป็นเพียงสิ่งที่เป็นนามธรรมที่ทำให้การสร้างแบบฟอร์มสำหรับหน้าเว็บง่ายขึ้น
โดยทั่วไปแบบฟอร์มจะซับซ้อนในการสร้าง แม้จะใช้ Ruby on Rails ก็ตาม แต่ละฟิลด์ต้องให้ความสนใจเพื่อกำหนดประเภทที่ถูกต้องและแนบไปกับแอตทริบิวต์ที่ถูกต้อง Simple Form ช่วยลดความเจ็บปวดดังกล่าว เนื่องจากคุณไม่จำเป็นต้องค้นหาประเภทที่แน่นอนที่จำเป็นสำหรับแต่ละฟิลด์
ลองใช้แบบฟอร์มที่รับรายละเอียดของผู้ใช้ด้วย 06 , 16 และ 20 สาขา พิจารณาว่าเรามี 34 โมเดลที่มีคุณสมบัติที่เกี่ยวข้องคล้ายกัน ด้วย Simple Form แบบฟอร์มที่กรอกแอตทริบิวต์จะมีลักษณะดังนี้:
โปรดทราบว่าเราไม่ได้ระบุประเภทของแต่ละฟิลด์ Simple Form จะเลือกประเภทอินพุตที่ถูกต้องสำหรับแต่ละฟิลด์ตามประเภทของคอลัมน์
สิ่งนี้ช่วยเราประหยัดเวลาและทำให้โค้ดอ่านง่ายและบำรุงรักษาได้ง่ายขึ้น
การติดตั้งแบบฟอร์มอย่างง่าย
หากต้องการติดตั้ง Simple Form ในโครงการของคุณ ให้เพิ่ม 49 อัญมณีสู่ Gemfile เมื่อคุณรัน 50 แล้ว คุณสามารถใช้ตัวสร้างที่ให้มาเพื่อตั้งค่าอย่างถูกต้องสำหรับแอปพลิเคชันของคุณ
หมายเหตุเกี่ยวกับ Bootstrap และ Zurb Foundation: ทั้ง Bootstrap และ Zurb Foundation 5 ได้รับการสนับสนุนภายใน Simple Form ดังนั้น หากคุณใช้หนึ่งในนั้น คุณสามารถใช้ 69 ได้ หรือ 72 พารามิเตอร์พร้อมกับตัวสร้างเพื่อรวมการกำหนดค่าเพิ่มเติมระหว่างการติดตั้ง ในกรณีของ Bootstrap จะมีลักษณะดังนี้:
การใช้งานพื้นฐานของแบบฟอร์มอย่างง่าย
ดังที่เราได้กล่าวไว้ก่อนหน้านี้ Simple Form จะสร้างแบบฟอร์มที่สมบูรณ์โดยอิงตามข้อมูลที่เกี่ยวข้องกับออบเจ็กต์ของคุณเป็นหลัก อย่างไรก็ตาม สิ่งสำคัญคือต้องเข้าใจว่า Simple Form ไม่เพียงแต่สร้างฟิลด์ที่เหมาะสมสำหรับแต่ละแอตทริบิวต์เท่านั้น แต่ยังให้ป้ายกำกับและคำแนะนำข้อผิดพลาดในการแสดงเหนือช่องป้อนข้อมูลด้วย!
ลองพิจารณาแอปพลิเคชัน Ruby on Rails 7.x ใหม่ เราจะสร้างโมเดลผู้ใช้และสร้างแบบฟอร์มโดยใช้ Simple Form
ตอนนี้เราสามารถสร้างคอนโทรลเลอร์ด้วย 82 ได้ , 95 และ 109 การกระทำ เป้าหมายคือการมีสิ่งที่เราสามารถเล่นด้วยในรูปแบบได้
การดำเนินการเหล่านี้จำเป็นต้องมีมุมมองที่เกี่ยวข้อง นี่คือแบบฟอร์มที่จัดการผู้ใช้ที่ลงทะเบียนหรือถูกเพิ่ม:
ในกรณีนี้ เราระบุป้ายกำกับที่กำหนดเองและข้อผิดพลาดสำหรับ 110 อินพุต หากไม่มีการส่งการปรับแต่งดังกล่าว จะพยายามอย่างเต็มที่ในการคาดเดาว่าป้ายกำกับจะต้องเป็นอย่างไรตามชื่อของแอตทริบิวต์
เราได้ตั้งค่าคำแนะนำที่กำหนดเองสำหรับ 121 และ 133 ที่กำหนดเอง สำหรับ 142 สนาม โปรดสังเกตถึงความสามารถในการระบุ "ป้ายกำกับอินไลน์" แทนป้ายกำกับที่อยู่เหนือฟิลด์ (ค่าเริ่มต้นตามปกติในแบบฟอร์ม)
นอกจากนี้ยังสามารถปิดใช้งานป้ายกำกับ คำแนะนำ และข้อผิดพลาดได้โดยส่ง 158 ค่าสำหรับแอตทริบิวต์เหล่านั้น:161 .
เราจำเป็นต้องเสริมสิ่งนี้ด้วยมุมมองอื่นเพื่อให้สามารถใช้งานได้
จากนั้นคุณสามารถเริ่มแอปพลิเคชันโดยใช้ 175 . ไปที่ 188 เพื่อดูและใช้แบบฟอร์ม มาดูกันว่าแบบฟอร์มแตกต่างจากแบบฟอร์ม Ruby on Rails แบบคลาสสิกอย่างไร
หมายเหตุเกี่ยวกับการตรวจสอบ :Simple Form สามารถทำงานกับฟิลด์บังคับได้ทันที ตัวอย่างเช่น หากเราต้องเพิ่มการตรวจสอบสถานะต่อไปนี้ในรูปแบบผู้ใช้ของเรา:
Simple Form จะใช้สิ่งนี้เพื่อเพิ่ม '*' เล็กน้อยถัดจาก 192 โดยระบุว่าเป็นฟิลด์บังคับ การดำเนินการนี้ไม่ได้จัดการข้อผิดพลาดโดยอัตโนมัติ ดังนั้นคุณยังคงต้องจัดการสิ่งนั้นในการทำงานของคอนโทรลเลอร์ กลับไปยังฟิลด์ที่เหมาะสมซึ่งมีข้อผิดพลาดและดำเนินการแก้ไข
เกี่ยวกับประเภทคอลัมน์และฟิลด์แบบฟอร์ม
ตามที่กล่าวไว้ก่อนหน้านี้ เรายังไม่ได้ระบุประเภทสำหรับแต่ละฟิลด์ Simple Form README มีรายการประเภทอินพุตที่มีอยู่ทั้งหมดและค่าเริ่มต้นสำหรับคอลัมน์แต่ละประเภท นี่คือรายการที่ใช้มากที่สุด:
บูลีน
ดังที่เราเห็นในตารางด้านบน คุณลักษณะบูลีนจะถูกแสดงเป็นช่องทำเครื่องหมายตามค่าเริ่มต้น ในหลายกรณี นั่นคือสิ่งที่เราต้องการ แต่ถ้าไม่ ก็มีวิธีปรับแต่งในรูปแบบ Simple Form ด้วย 201 ซึ่งช่วยให้คุณระบุได้ว่าจะแสดงปุ่มตัวเลือกหรือดรอปดาวน์แทน
ต่อไปนี้เป็นวิธีระบุปุ่มตัวเลือกแทน:
สิ่งนี้จะสร้าง HTML ต่อไปนี้:
เป็นเรื่องที่น่าประทับใจที่โค้ด Ruby ชิ้นเล็กๆ ทำให้คุณได้รับ HTML ที่สมบูรณ์ขนาดนี้!
HTML
จากตัวอย่างก่อนหน้านี้ เราจะเห็นว่า Simple Form สร้าง HTML จำนวนมากสำหรับแต่ละฟิลด์ได้อย่างไร ซึ่งรวมถึง HTML สำหรับช่องป้อนข้อมูลและ div wrapper รอบป้ายกำกับและช่องป้อนข้อมูล เราสามารถปรับแต่งสิ่งเหล่านั้นได้โดยการระบุคลาสและรหัสที่กำหนดเองโดยใช้ 219 และ 225 คุณลักษณะ นี่คือตัวอย่าง
นั่นเป็นวิธีการตั้งค่าแอตทริบิวต์สำหรับ HTML ที่เกี่ยวข้อง เช่น 237 หรือ 247 . ลองใช้ฟิลด์รหัสผ่านจากแบบฟอร์มผู้ใช้ของเรา เราสามารถจำกัดขนาดและความยาวของฟิลด์ด้วย 257 คุณลักษณะ
อินพุตที่กำหนดเองและตัวเลือกเพิ่มเติม
Simple Form เป็นไลบรารี Ruby ที่เตรียมโหนด HTML ให้กับคุณ มันมาพร้อมกับชุดฟิลด์ทั้งหมด แต่คุณสามารถเพิ่มฟิลด์ของคุณเองได้ ในการทำเช่นนั้น คุณสามารถสร้างคลาสที่สืบทอดมาจากคลาสของ Simple Form ลองพิจารณากำหนดฟิลด์ป้อนข้อมูลเครือข่ายโซเชียลที่กำหนดเองด้วยคำนำหน้า '@' เล็กน้อยด้านหน้าฟิลด์จริง
ตอนนี้เราสามารถใช้มันในลักษณะต่อไปนี้:
โปรดทราบว่าหากรุ่นผู้ใช้ของคุณไม่มี 268 คุณต้องเพิ่มผ่านการย้ายข้อมูลหรือโกงด้วย 275 ในรูปแบบ
การสนับสนุน i18n
ดังที่เราได้กล่าวไปแล้ว แบบฟอร์มการก่อสร้างมักเป็นจุดที่เป็นปัญหา แต่สิ่งต่างๆ จะยิ่งเจ็บปวดมากขึ้นเมื่อพูดถึงเว็บไซต์และแอปพลิเคชันที่รองรับหลายภาษา โชคดีที่ Simple Form เป็นไปตามมาตรฐาน Ruby on Rails คุณสามารถใช้ 283 ป้อนไฟล์ในเครื่องเพื่อกำหนดคำแปลสำหรับป้ายกำกับ คำแนะนำ ตัวยึดตำแหน่ง ข้อความแจ้ง ฯลฯ ทั้งหมด
นี่เป็นตัวอย่างเล็กๆ น้อยๆ:
ออบเจ็กต์ค่า
บางครั้ง เราอาจใช้คลาสแบบกำหนดเองที่ไม่ใช่ ActiveRecord เพื่อสร้างอินสแตนซ์ของออบเจ็กต์หลักที่ฟอร์มใช้ ซึ่งสามารถทำได้เพื่อรวบรวมข้อมูลจากหลายโมเดลให้เป็นแบบจำลองสังเคราะห์ด้วยเหตุผลด้านตรรกะทางธุรกิจ หรือเพื่อรวบรวมแอตทริบิวต์หลายรายการไว้ในออบเจ็กต์เดียว
ไม่ว่าจะด้วยเหตุผลใดก็ตาม คุณยังคงสามารถพึ่งพา Simple Form เพื่อสร้างแบบฟอร์มสำหรับออบเจ็กต์ประเภทนั้นได้ ในการทำเช่นนั้น คลาสอ็อบเจ็กต์จำเป็นต้องใช้สามวิธีในกรณีที่ดีที่สุด:295 , 301 และ 313 .
323 วิธีการจะชี้ไปที่วัตถุนั้นเอง:
336 ช่วยให้เราสามารถชี้ไปที่แอตทริบิวต์ตัวระบุสำหรับวัตถุ - โดยปกติจะหมายถึง 347 ชื่อแอตทริบิวต์:
สุดท้าย 357 มีวิธีบอก Simple Form ว่าวัตถุนั้นยังคงอยู่โดยตรงหรือไม่
หากไม่มีวิธีการนั้น 366 ตัวช่วยใช้ไม่ได้
มีวิธีที่เร็วกว่า — รวมทั้ง 370 ด้วย โมดูลในคลาส:
และลองใช้มันผ่านโมเดล User
จากนั้นเราสามารถเพิ่มฟิลด์สำหรับชื่อบริษัทภายในแบบฟอร์มผู้ใช้:
แน่นอนว่าแอตทริบิวต์นี้จะไม่ได้รับการบันทึกลงในตาราง อย่างไรก็ตาม สามารถใช้แนวคิดเดียวกันนี้ในการเขียนออบเจ็กต์ค่าพร้อมคุณลักษณะที่ดึงมาจากหลายโมเดลได้
สรุป
ในโพสต์นี้ เราพบว่า Simple Form นั้นติดตั้งและรวมเข้ากับแอปพลิเคชัน Ruby on Rails ของคุณได้ง่าย Simple Form ไม่เพียงแต่ดูแลรายละเอียดของแต่ละฟิลด์ในแบบฟอร์มของคุณ แต่ยังสร้าง HTML ที่ซับซ้อนและสมบูรณ์ เพื่อให้สามารถจัดสไตล์และจัดรูปแบบแบบฟอร์มของคุณได้อย่างง่ายดาย
ฉันขอแนะนำให้คุณศึกษาเอกสารประกอบของ Simple Form เพื่อดูว่ามีประสิทธิภาพเพียงใด
ขอให้สนุกกับการเขียนโค้ด!
ปล. หากคุณต้องการอ่านโพสต์ Ruby Magic ทันทีที่เผยแพร่ สมัครรับจดหมายข่าว Ruby Magic ของเราและไม่พลาดแม้แต่โพสต์เดียว! 
โธมัส ริบูเลต์
Thomas ผู้เขียนรับเชิญของเราเป็นที่ปรึกษาแบ็กเอนด์และวิศวกรโครงสร้างพื้นฐานคลาวด์ในฝรั่งเศส เป็นเวลากว่า 13 ปีที่เขาทำงานร่วมกับสตาร์ทอัพและบริษัทต่างๆ เพื่อขยายขนาดทีม ผลิตภัณฑ์ และโครงสร้างพื้นฐาน นอกจากนี้ เขายังได้รับการตีพิมพ์หลายครั้งในนิตยสาร GNU/Linux ของฝรั่งเศส และในบล็อกของเขา
บทความทั้งหมดโดย โทมัส ริบูเลต์
