Page 1 of 1

วิธีการสร้าง Form แจ้งการชำระเงิน

Posted: 09/07/2015 3:35 pm
by mcmakdonal
การสร้างฟอร์มนี้สามารถนำไปประยุกต์ใช้ ในการทำงานอื่นๆได้ เช่น การสร้างแบบสอบถาม เป็นต้น

ในการทำ form นี้ผมขอยกตัวอย่าง การใช้ http://www.magentocommerce.com/magento- ... ilder.html Extensions ตัวนี้ในการช่วยสร้างนะครับ

ก่อนอื่น ไปทำการ Copy Code ติดต้ังมา นะครับ

2015-07-09_14-52-47.jpg
2015-07-09_14-52-47.jpg (84.97 KiB) Viewed 1196 times


1. เมื่อได้โค้ดมาแล้วทำ Login ไปที่ส่วนหลังร้าน แล้วทำตามวิธีนี้ viewtopic.php?f=158&t=28316 ตั้งแต่วิธีทำที่ 2 - 4 เมื่อเสร็จสินทำ ตาม บทความนี้ต่อ

2. เมื่อติดตั้ง Extensions เสร็จแล้ว ออกมาหน้า Admin Panel จะเห็นได้ว่ามี Menu เพิ่มขึ้นมา โดยมี Menu ย่อยคือ

2015-07-09_14-57-45.jpg
2015-07-09_14-57-45.jpg (22.1 KiB) Viewed 1196 times


2.1 Menu ที่เพิ่มมาใหม่หลังจากติดตั้ง Extensions
2.2 Form Manager : จัดการ Form ต่างๆที่เราสร้าง
2.3 Add Form ทำการเพิ่ม Form
2.4 Form building setting : ตั้งค่า

3. คลิกไปที่ sub menu -> Add Form เพื่อสร้าง Form กันก่อนเลย

2015-07-09_15-00-44.jpg
2015-07-09_15-00-44.jpg (105.74 KiB) Viewed 1195 times

2015-07-09_15-01-38.jpg
2015-07-09_15-01-38.jpg (44.81 KiB) Viewed 1196 times

** ขออนุญาตใช้รูปใหญ่ **

3.1 ชื่อของ Form
3.2 สีของ พื้นหลัง Form
3.3 รูปภาพด้านบน Form
3.4 ข้อความก่อน แสดง Form
3.5 ข้อความหลังแสดง Form
3.6 เลือก Views ทีจะมองเห็น Form นี้
3.7 ข้อความเมื่อกรอก Form เสร็จสิ้นและถูกต้อง
3.8 ข้อความเมื่อกรอด Form ผิดพลาด
3.9 ข้อความบนปุ่ม
3.10 แสดงใน Menu
3.11 สถานะ

4. เมื่อทำการตั้งค่านี้เสร็จไป ที่ -> Form Creater

2015-07-09_15-10-25.jpg

** ขออนุญาตใช้รูปใหญ่ **

วิธีการเพิ่ม Field ให้ทำการคลิก Add New Field จะได้ Field มา

4.1 Title คือ ชื่อของ Field นั้น
4.2 Input type คือ ลักษณะของ Field นั้น ถ้าเลือกเป็น Drop-drown จะมี option เพิ่มขึ้นมาให้เพิ่มตัวเลือก
4.3 Is Required คือ ต้องการให้กรอกไหม ถ้าต้องการ ในช่องนั้นจะมี * ทำให้จำเป็นต้องกรอก
4.4 Enabled คือ สถานะของ Field นั้น
4.5 Sort order คือ การเรียงลำดับ
4.6 Max character คือ จำนวนขนาดของ Field นั้นๆ

เมื่อกรอกเสร็จสิ้น กด Save Form
** ตรวจสอบ Form ด้วยว่า พร้อมใช้งานไหม **
2015-07-09_15-16-35.jpg


5. จากนั้นไปที่ Form Builder -> Form bulding setting

2015-07-09_15-17-57.jpg
2015-07-09_15-17-57.jpg (21.96 KiB) Viewed 1196 times


6. จะเป็นการตั้งค่า Form building

2015-07-09_15-19-10.jpg
2015-07-09_15-19-10.jpg (159.75 KiB) Viewed 1196 times


6.1 เปิดใช้งาน Form building หรือไม่
6.2 แสดงเมนูที่ Link ด้านบน
6.3 แสดงเมนูที่ เมนู
6.4 แสดงเมนูที่ด้านล่างของเว็บไซต์
6.5 แสดงผลกับลูกค้าที่สมัครสมาชิกเท่าั้น
6.6 ลูกค้าที่สมัครสมาชิก สามารถกรอกได้กี่ครั้ง
6.7 ผู้ใช้ทั่วไป กรอกได้กี่ครั้ง
6.8 เมื่อกรอกเสร็จสิ้น ให้ เด้งไปที่หน้าไหน
6.9 ตั้งค่าวันเวลา

** ไม่ต้องสนใจการตั้งค่า ในรูปมากนะครับ **

เมื่อตั้งค่าเสร็จสิ้น กด Config

7. ทำการ Clear cache , refresh cache และ reindex สักครั้ง

8. ดูผลลัทธ์ตามตำแหน่งที่กำหนดไว้

2015-07-09_15-28-45.jpg
2015-07-09_15-28-45.jpg (19.98 KiB) Viewed 1196 times


เมื่อคลิกเข้าไปก็จะเจอกับ Field ที่เราสร้างไว้

2015-07-09_15-30-42.jpg
2015-07-09_15-30-42.jpg (70.85 KiB) Viewed 1196 times


และเมื่อกรอกครบถูกต้องก็จะมีข้อความตามที่เราตั้งไว้มาแสดงครับ


สำหรับ admin อยากเห็นว่า ผู้ใช้ กรอกอะไรส่งมา สามารถดูได้ที่ Form Building -> Manager Form เลือก Form ที่ต้องการแล้วดูใน แทบ Action เลือก Views Result
Image

เสร็จสิ้นวิธีการ สร้าง Form เบื้องต้นแล้วครับ