20
ออกแบบฟอรมของ Joomla ดวย CK Form บุญเลิศ อรุณพิบูลย http://facebook.com/boonlert.aroonpiboon

20101031 joomla-ck form

Embed Size (px)

DESCRIPTION

ออกแบบฟอร์มของ Joomla ด้วย CK Form

Citation preview

Page 1: 20101031 joomla-ck form

ออกแบบฟอรมของ Joomla ดวย CK Form

บุญเลิศ อรุณพิบูลยhttp://facebook.com/boonlert.aroonpiboon

Page 2: 20101031 joomla-ck form

ดาวนโหลด CK FORMhttp://ckforms.cookex.eu/download/download.php

Page 3: 20101031 joomla-ck form

ติดตั้ง CK Form• Joomla Administrator, Extensions, Install/Uninstall

• เลือกไฟล com_ckforms_b1.zip

Page 4: 20101031 joomla-ck form

สราง Form• Components, CK Forms, New

Name : ระบุชื่อฟอรมเปนภาษาอังกฤษ หามเวนวรรค หามใชอักขระพิเศษ เชน

Form01

Title : ระบุชื่อแบบฟอรม หรือโครงการ เชน ฟอรมลงทะเบียนงานสัมมนาเรื่อง

....

Description : เพิ่มรายละเอียดเกี่ยวกับฟอรม หรือโครงการ หรือ กิจกรรม

เมื่อระบุแลว ใหคลิกปุม Save กอนครับ

Page 5: 20101031 joomla-ck form

ผลเมื่อ Save

Page 6: 20101031 joomla-ck form

กําหนดรายละเอียดการสรางฟอรม

• คลิกที่ชื่อฟอรมเพื่อเขาไปแกไข

• คลิกแท็บ Result แลวเลือกรายการ Save result เปน Yes เพื่อใหมีการบันทึกผลจากการปอนฟอรม

Page 7: 20101031 joomla-ck form

กําหนดรายละเอียดการสรางฟอรม

• คลิกแท็บ E-Mail เพื่อกําหนดคาเกี่ยวกับการสงอีเมลมแจงเมื่อมกีารปอนแบบฟอรม

Page 8: 20101031 joomla-ck form

กําหนดรายละเอียดการสรางฟอรม

• คลิกแท็บ Advanced เพื่อกําหนดคาเกี่ยวกับการใช Captcha การระบุโฟลเดอรในการเก็บไฟล

Page 9: 20101031 joomla-ck form

กําหนดรายละเอียดการสรางฟอรม

• คลิกแท็บ Frontend display เพื่อกําหนดคาเกี่ยวกับการแสดงผลรายละเอียดหนาเว็บ

Page 10: 20101031 joomla-ck form

สรางฟลดขอมูล• เมื่อกําหนดรายละเอียดตางๆ ของฟอรม ขัน้ถัดไปจะ

เปนการสรางฟลด (Field) เพื่อใหผูใชปอนขอมูล

• คลิกปุม Fields

Page 11: 20101031 joomla-ck form

ตัวอยางฟอรม

Page 12: 20101031 joomla-ck form

จอภาพการจัดการฟลด

• คลิกปุม New เพื่อสรางฟลดแตละฟลด

Page 13: 20101031 joomla-ck form

ฟลดคํานําหนา

Page 14: 20101031 joomla-ck form

ฟลดชื่อ

Page 15: 20101031 joomla-ck form

ปุมสงขอมูล

Page 16: 20101031 joomla-ck form

ฟลดที่ออกแบบไว

Page 17: 20101031 joomla-ck form

สรางเมนูแสดงผล Form• Menus, Main Menu, New, CK Forms, Standard

CKForms CSS Layout

Page 18: 20101031 joomla-ck form

หนาตาฟอรม

Page 19: 20101031 joomla-ck form

ตรวจสอบขอมูลที่ปอนผาน Form

• Components, CK Forms

• คลิก Display data ในรายการฟอรมที่ตองการ

Page 20: 20101031 joomla-ck form

ตรวจสอบขอมูลที่ปอนผาน Form