PHP CI MANIA : ตอนที่ 16 วิธีสร้างเว็บเพจที่มีแบบฟอร์มคำนวณผลรวมอัตโนมัติ เมื่อป้อนข้อมูลในช่อง INPUT

การคำนวณผลรวม เมื่อเปลี่ยนแปลงตัวเลขใน Textbox หากเขียนโค้ดเองก็เพียงไม่กี่บรรทัด แต่ถ้าหากใช้ PHP CI MANIA เราสามารถเพิ่มการตั้งค่าได้ดังนี้

1. ในแท็ป "ตั้งค่า" เลื่อนไปส่วนที่ 5 ด้านล่างสุด "ข้อมูลตารางรายการ ( Detail )"

2. เพิ่ม INPUT สำหรับแสดงราคารวม โดยคลิกที่ปุ่มสีเขียว ในตัวอย่างนี้จะสร้างไว้ต่อจาก ฟิลด์ราคา  โดยกำหนดค่าในช่องคอลัมน์ Name เป็น total_price=>ราคารวม สังเกตุว่าจะมี => คั่นกลาง
       ด้านซ้าย total_price ใช้เป็นไอดีอ้างอิงเพื่อนำราคารวมไปแสดงผล
       ด้านขวา ราคารวม ใช้เป็นป้ายชื่อหน้าช่องแสดงผลรวม

3. กำหนด Action ให้กับฟิลด์ที่เมื่อเปลี่ยนค่าแล้วจะให้คำนวณผลรวมอัตโนมัติ ในที่นี้คือ ฟิลด์จำนวน

4. กำหนดค่าต่างๆให้กับ Action ของฟิลด์ที่เลือก
    4.1  กำหนด Events จะเลือก onkeyup เพื่อจับเหตุการณ์เมื่อพิมพ์ตัวเลขระบุจำนวนสั่งซื้อ ให้คำนวณค่าราคารวมทันที
    4.2  INPUT 1  ให้ระบุฟิลด์ที่ใช้ในการคำนวณตัวที่ 1 ที่นี้คือ ฟิลด์จำนวน
    4.2  INPUT 2  ให้ระบุฟิลด์ที่ใช้ในการคำนวณตัวที่ 2 ที่นี้คือ ฟิลด์ราคาต่อหน่วย
    4.4  กำหนด Operators เลือกการคำนวณ สำหรับราคารวมเราจะใช้ คูณ (ราคารวม = จำนวน x ราคาต่อหน่วย)

    4.5  กำหนด INPUT แสดงผลลัพธ์  ในตัวอย่างนี้เราได้สร้าง INPUT ขึ้นมาใหม่ในข้อที่ 2 เพื่อใช้แสดงผลรวมไว้ให้เลือกเพิ่มเติม (กรณีมีฟิลด์ที่ใช้เก็บผลรวมสามารถระบุเป็นฟิลด์นั้นๆโดยไม่ต้องสร้าง INPUT ขึ้นมาใหม่ก็ได้)
     เมื่อกำหนดค่าเรียบร้อยให้คลิก "ตั้งค่า" เพื่อยืนยันการดำเนินการ

5. เมื่อได้กำหนด Action เรียบร้อย ไอคอนจะกลายเป็นสีฟ้า

6. จากนั้นให้ทดสอบการทำงานโดยคลิกสร้างไฟล์ Models, Views, JS และ Controller ให้เรียบร้อยครบทุกไฟล์ (สำหรับ Version 0.6 จะมีปุ่ม "สร้างไฟล์ทั้งหมด") จากนั้นให้คลิกลิงค์เพื่อดูตัวอย่าง(ในหน้า Controller)


7. ให้คลิกปุ่ม "แก้ไข" เพื่อทดสอบการทำงาน


8. ในหน้าเว็บเพจสำหรับแก้ไข ให้เลื่อนลงไปยังส่วนของตารางรายละเอียด และกดปุ่ม "เพิ่มรายการ"

9. ให้กรอกราคาต่อหน่วย ลงไปก่อน จากนั้นจึงกรอกจำนวนสั่งซื้อ จะเห็นว่าราคารวมจะแสดงขึ้นมาอัตโนมัติ (ที่ต้องกรอกราคาลงไปก่อน เพราะเราไม่ได้ใส่ onkeyup ให้กับฟิลด์ราคา หากต้องการให้มีผลเมื่อกรอกทั้งจำนวน และราคา ให้กำหนดค่าในข้อ 3 และ 4 ให้กับฟิลด์ที่ต้องการเพิ่มด้วย)

ในบทต่อไป เราจะมาพูดถึงรายละเอียดการใช้ onchange สำหรับฟิลด์ อ้างอิงตารางวัตถุดิบ เพื่อใส่ Action คำนวณราคารวมอัตโนมัติ เมื่อเลือกสินค้า หรือ ระบุจำนวน ที่ต้องการสั่งซื้อกันอีกครั้ง


วิดีโอสาธิตการใช้งาน :


<< จำกัดสิทธิ์แสดงรายการเฉพาะที่เป็นเจ้าของ คำนวณราคาอัตโนมัติ เมื่อเลือกวัตถุดิบใหม่ »

[[ PHP CI MANIA | ลดเวลาเขียนโค้ด เพิ่มเวลาบริหารจัดการได้มากขึ้น | Webpage Generator by CodeIgniter Framework ]]
HOME

 

--------------------------------

สนับสนุนค่ากาแฟผู้เขียนได้ที่

PHP CI MANIA - PHP Code Generator 

โปรแกรมช่วยสร้างโค้ด ลดเวลาการเขียนโปรแกรม

เริ่มต้นเพียง 4,500 บาท
http://fastcoding.phpcodemania.com