20101031 joomla-ck form
DESCRIPTION
ออกแบบฟอร์มของ Joomla ด้วย CK FormTRANSCRIPT
![Page 1: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/1.jpg)
ออกแบบฟอรมของ Joomla ดวย CK Form
บุญเลิศ อรุณพิบูลยhttp://facebook.com/boonlert.aroonpiboon
![Page 2: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/2.jpg)
ดาวนโหลด CK FORMhttp://ckforms.cookex.eu/download/download.php
![Page 3: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/3.jpg)
ติดตั้ง CK Form• Joomla Administrator, Extensions, Install/Uninstall
• เลือกไฟล com_ckforms_b1.zip
![Page 4: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/4.jpg)
สราง Form• Components, CK Forms, New
Name : ระบุชื่อฟอรมเปนภาษาอังกฤษ หามเวนวรรค หามใชอักขระพิเศษ เชน
Form01
Title : ระบุชื่อแบบฟอรม หรือโครงการ เชน ฟอรมลงทะเบียนงานสัมมนาเรื่อง
....
Description : เพิ่มรายละเอียดเกี่ยวกับฟอรม หรือโครงการ หรือ กิจกรรม
เมื่อระบุแลว ใหคลิกปุม Save กอนครับ
![Page 5: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/5.jpg)
ผลเมื่อ Save
![Page 6: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/6.jpg)
กําหนดรายละเอียดการสรางฟอรม
• คลิกที่ชื่อฟอรมเพื่อเขาไปแกไข
• คลิกแท็บ Result แลวเลือกรายการ Save result เปน Yes เพื่อใหมีการบันทึกผลจากการปอนฟอรม
![Page 7: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/7.jpg)
กําหนดรายละเอียดการสรางฟอรม
• คลิกแท็บ E-Mail เพื่อกําหนดคาเกี่ยวกับการสงอีเมลมแจงเมื่อมกีารปอนแบบฟอรม
![Page 8: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/8.jpg)
กําหนดรายละเอียดการสรางฟอรม
• คลิกแท็บ Advanced เพื่อกําหนดคาเกี่ยวกับการใช Captcha การระบุโฟลเดอรในการเก็บไฟล
![Page 9: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/9.jpg)
กําหนดรายละเอียดการสรางฟอรม
• คลิกแท็บ Frontend display เพื่อกําหนดคาเกี่ยวกับการแสดงผลรายละเอียดหนาเว็บ
![Page 10: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/10.jpg)
สรางฟลดขอมูล• เมื่อกําหนดรายละเอียดตางๆ ของฟอรม ขัน้ถัดไปจะ
เปนการสรางฟลด (Field) เพื่อใหผูใชปอนขอมูล
• คลิกปุม Fields
![Page 11: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/11.jpg)
ตัวอยางฟอรม
![Page 12: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/12.jpg)
จอภาพการจัดการฟลด
• คลิกปุม New เพื่อสรางฟลดแตละฟลด
![Page 13: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/13.jpg)
ฟลดคํานําหนา
![Page 14: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/14.jpg)
ฟลดชื่อ
![Page 15: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/15.jpg)
ปุมสงขอมูล
![Page 16: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/16.jpg)
ฟลดที่ออกแบบไว
![Page 17: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/17.jpg)
สรางเมนูแสดงผล Form• Menus, Main Menu, New, CK Forms, Standard
CKForms CSS Layout
![Page 18: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/18.jpg)
หนาตาฟอรม
![Page 19: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/19.jpg)
ตรวจสอบขอมูลที่ปอนผาน Form
• Components, CK Forms
• คลิก Display data ในรายการฟอรมที่ตองการ
![Page 20: 20101031 joomla-ck form](https://reader033.vdocuments.site/reader033/viewer/2022051312/54795662b4af9fda158b47ae/html5/thumbnails/20.jpg)
ตรวจสอบขอมูลที่ปอนผาน Form