04 พฤศจิกายน 2010 ผู้ชม: 15077
 ต่อจากบทความที่แล้ว คราวนี้ เราจะมาสร้าง Field (ฟิลด์) เพื่อให้ผู้ใช้งานกรอกข้อมูล และนำ Form ที่สร้างจาก CK Form ไปแสดงผลกันในรูปแบบต่างๆ เช่น การสร้างเมนูลิ้งค์ เพื่อแสดงแบบฟอร์ม , การนำแบบฟอร์มไปวางไว้ในตำแหน่งต่างๆ ของโมดูล และ การนำแบบฟอร์มวางไว้ใน Article โอ้ยยย หลากหลายครับ |
ให้กลับไปยังฟอร์มที่เราได้สร้างไว้ครับ Component > CK Forms แล้วคลิกที่ช่อง Fields ในวงกลมสีแดง
จะเข้าสู่หน้าแสดงรายการฟิลด์ต่างๆ ซึ่งตอนนี้ยังไม่มี เพราะยังไม่สร้าง ให้กดปุ่ม New เพื่อสร้างฟิลด์
คลิกเข้ามาแล้ว โดยปกติถ้าไม่ปรับแต่งหวือหวาอะไร ก็ใช้งานเพียงแค่แถบ General ก็พอครับ โดยให้ใส่รายละเอียด
Name : ชื่อของฟิลด์นี้ โดยต้องใส่เป็นตัวอักษรภาษาอังกฤษ หรือตัวเลข และห้ามเว้นวรรค
Label : ข้อความที่จะให้แสดงผลกำกับฟิลด์นี้
Publish : ใช้งานฟิลด์นี้หรือไม่
Type : ประเภทของฟิลด์ ซึ่งก็มีให้เราเลือกหลายประเภท ว่าเราต้องการสร้างฟิลด์นี้ ให้เป็นรูปแบบใด เช่น
Text : ฟิลด์ Textbox แนวนอน แถวเดียว
Hidden : ฟิลด์ไม่แสดงผลให้เห็น แต่ยังคงส่งค่าที่อยู่ในฟิลด์นี้ออกไปกับการ Submit ด้วย
Textarea : ฟิลด์กรอกข้อมูลขนาดกว้างกว่า Textbox , กำหนดความกว้าง ความสูงของฟิลด์ได้ เหมาะแก่การให้ผู้ใช้งานกรอกข้อมูลที่มีความยาว
Checkbox : ฟิลด์แบบ Checkbox ให้ผู้ใช้งานเลือก Check หรือ ติ๊กถูก ได้หลายตัวเลือก
Radio Button : ฟิลด์แบบปุ่มตัวเลือกตัว โดยเลือกได้เพียง 1 ตัวเลือก ไม่เหมือนกับ Checkbox ที่เลือกได้หลายตัวเลือก
Select : ฟิลด์แบบ Dropdown List ให้เลือกรายการได้ 1 ตัวเลือก
File Upload : ฟิลด์นี้จะให้ผู้ใช้งานสามารถอัพโหลดไฟล์ แนบมาในแบบฟอร์มได้
Button : ฟิลด์แบบปุ่มกด 1 ปุ่ม
Field separator : ฟิลด์แบบช่องว่าง ไม่แสดงผลอะไรนอกจากช่องว่าง
เอาล่ะ ผมเลือกแบบแรกคือ Text , เลือกแค่นี้ครับ แล้วก็ Save ไป
แล้วก็มาสร้างฟิลด์ใหม่อีก ผมเลือกแบบ Text เหมือนเดิม แต่คราวนี้สังเกตด้านล่าง จะมีให้เลือกประเภทของ Textbox ได้อีก ซึ่ง Text type ได้แก่
Text : ก็เป็น Textbox ธรรมดาเช่นเคย
Password : เป็น Textbox แบบรหัสผ่าน เมื่อผู้ใช้งานพิมพ์ข้อความในช่องนี้ ก็จะกลายเป็นจุดดำๆ เหมือนกับที่เราพิมพ์ Password ตามเว็บไซต์ทั่วไปนั่นแหล่ะ
E-mail : Textbox แบบตรวจสอบไวยากรณ์ ( Syntax ) ของอีเมล โดยต้องใส่ข้อความในรูปแบบอีเมลให้ถูกต้อง เช่น mymail @ domain.com แต่มันไม่สามารถตรวจสอบได้นะครับว่า อีเมลมีอยู่จริงหรือไม่ ขอให้ใส่ถูกหลักก็พอ
Date : Textbox รูปแบบของวันที่ แสดงผลแบบ วัน เดือน ปี
Number : Textbox แบบรับค่าได้เฉพาะตัวเลขเท่านั้น
URL : Textbox แบบรับค่า URL ซึ่งก็คือที่อยู่เว็บไซต์นั่นแหล่ะ โดยต้องพิมพ์ให้เต็มๆ เช่น http://www.pcnott.com
ผมเลือกแบบ E-mail ครับ แล้วก็ Save ไป
แล้วก็มาสร้างอีก 1 ฟิลด์ โดยเลือกเป็นแบบ Textarea โดยกำหนดให้กรอกข้อความได้ไม่เกิน 300 ตัวอักษร
ปิดท้ายด้วยการสร้างฟิลด์แบบ Submit Button เพื่อให้ผู้ใช้งานสามารถกดปุ่มส่งแบบฟอร์มได้
มาดูภาพโดยรวม แสดงผลฟิลด์ต่างๆ ที่เราได้สร้างขึ้นมา
ฟอร์มพร้อม ฟิลด์พร้อม ก็เอาไปแสดงผลกันเลย โดยแบบแรก จะให้สร้างเมนูลิ้งค์ไปยังฟอร์มที่เราได้สร้างไว้ ไปเริ่มกันที่ Menu Manager เลย แล้ว New เมนูขึ้นมาใหม่ โดยให้เลือกเมนูเป็น Ck Forms > Standard CKForms CSS Layout
ตั้งชื่อลิ้งค์ แล้วก็เลือกแบบฟอร์มในช่อง Select CK Forms แล้วก็ Save ไป
แค่เนี้ย ไปดูผลครับ
ได้แล้ว แบบฟอร์มที่เราได้สร้างไว้ แต่ ก็มีหลายกรณีที่เราอาจไม่อยากสร้างลิ้งค์ แต่อยากไปวางไว้ในตำแหน่ง Position Module อันใดอันหนึ่ง เราก็จะต้องติดตั้ง Module ของ CK Forms เพิ่มเติม แล้วก็ไปกำหนดการแสดงผลที่ Module Manager กัน
เมื่อคลิกเข้ามาที่ Module CKforms Form Display แล้วก็เปิดการใช้งาน พร้อมเลือกแบบฟอร์มที่สร้างไว้ในช่อง Select CK Forms และเลือกการแสดงผลว่าจะให้แสดงผลที่ Position ใด โดยผมเลือกให้แสดงไว้ตำแหน่ง footer ซึ่งอยู่บริเวณด้านล่างของเทมเพลต จากนั้นก็ Save ไป
มาดูผลครับ คราวนี้ผมเอาเมนูลิ้งค์ออก จะได้ไม่หาว่าโมเม และแสดงผล Module Layout ให้ดูด้วย พบว่า แบบฟอร์มได้แสดงผลไว้ที่ footer ตามที่ต้องการ
ต่อไป ผมจะนำแบบฟอร์มที่สร้าง ไปแทรกไว้ใน Article โดยวิธีนี้เราต้องใช้ Plugin เข้ามาช่วย และต้องติดตั้ง Plugin ของ CK Forms เพิ่มเติมด้วยครับ เมื่อติดตั้งแล้วก็ให้ไปที่ Plugin Manager โดยมองหาปลั๊กอิน CKforms Form Display
หน้าที่คือ เข้ามาเปิดใช้งานแค่นั้นแหล่ะครับ จบละตรงนี้ วิธีที่จะนำไปใช้งานนั้น เราจะต้องจดจำชื่อแบบฟอร์มที่ได้สร้างไว้ ย้ำนะครับว่า ชื่อแบบฟอร์ม โดยถ้าจำไม่ได้ ให้กลับไปดูที่ CK Form ครับ
ในช่อง Name นั่นแหล่ะ ตอนแรกผมตั้งชื่อไว้ว่า ckform แต่กลัวจะสับสนตอนใช้งานกัน ผมเลยเข้ามาเปลี่ยนชื่อเป็น myform แทน แล้วก็ Save ไป
การนำไปใช้งานนั้น เราต้องพิมพ์เป็นข้อความในรูปแบบวงเล็บปีกกา แล้วตามด้วยชื่อแบบฟอร์ม
แล้วไปดูผลกัน
แบบฟอร์มก็จะไปแสดงใน Article ตามต้องการ
นอกจากนั้น หากมีการปรับแต่งเพิ่มเติม ก็จะสามารถควบคุมการแสดงผลของฟอร์มและฟิลด์ต่างๆ ได้ตามต้องการมาขึ้น เพราะ CK Form สามารถให้เราเพิ่มเติม CSS Class ได้อีก หากมีความรู้ด้าน CSS Style Sheet ก็จะสามารถปรับแต่งฟอร์มให้สวยงามได้ไม่ยาก , สำหรับ Module และ Plugin ของ Ck Form นั้น ผมได้เพิ่มไว้ที่หน้าดาวน์โหลดแล้วครับ ตามไปเก็บกันได้เลย
| ← ข้อความวิ่ง Marquee Text | สร้างแบบฟอร์มด้วย CK Forms → |
|---|
