PHP CI MANIA : ตอนที่ 17 การกำหนดให้คำนวณราคารวมแบบอัตโนมัติ เมื่อเปลี่ยนรายการวัตถุดิบใหม่ (On Change)
จากที่ได้กำหนด Action หลังจากกรอกจำนวนลงใน INPUT ให้คำนวณราคารวมในตอนที่แล้ว (PHP CI MANIA : ตอนที่ 16 วิธีสร้างเว็บเพจที่มีแบบฟอร์มคำนวณผลรวมอัตโนมัติ เมื่อป้อนข้อมูลในช่อง INPUT ) เรายังสามารถกำหนด Action ให้กับ Dropdown ที่ JOIN ตารางวัตถุดิบให้คำนวณราคารวมทุกครั้งเมื่อเกิดการเปลี่ยนแปลงได้อีกด้วย
1. ในแท็ป "ตั้งค่า" เลื่อนไปส่วนที่ 5 ด้านล่างสุด "ข้อมูลตารางรายการ ( Detail )" และกำหนดการ JOIN ตารางวัตถุดิบที่ไอคอนด้านซ้าย
2. จะมีการกำหนดค่าเพิ่มเติมในขั้นตอนที่ 2.4 และ 2.5 สำหรับขั้นตอนที่ 2.1 - 2.3 คือการตั้งค่าการ JOIN ตามปกติ (อ่านได้จากคู่มือการใช้งาน ตอนที่ 8)
2.1 เลือกตารางวัตถุดิบ (ตารางที่ต้องการ JOIN)
2.2 เลือกฟิลด์อ้างอิง (Primary key ของตารางที่ JOIN)
2.3 เลือกฟิลด์ที่ใช้แสดงเป็นป้ายกำกับใน Dropdown list ที่สร้างขึ้นมา
2.4 ตั้งค่าเพิ่มเติม เพื่อดึงราคา มาเก็บไว้ในแอตทริบิวต์ของ option ที่เลือก เพื่อใช้งาน
2.5 นำค่าที่เลือกในข้อที่ 4 ไปใส่ใน INPUT ที่ต้องการเมื่อเกิด On change เช่น นำไปใส่ในช่อง price ซึ่งจะได้ราคาต่อหน่วย เอาไว้คำนวณกับ จำนวนที่ต้องการสั่งซื้อ
3. เพิ่ม Action เพิ่มเติมให้กับ Dropdown list ที่แสดงรายการวัตถุดิบที่สร้างขึ้นมานี้ โดยกำหนดให้ทำการคำนวณหา ราคารวม ทันทีเมื่อเปลี่ยนแปลงค่า (ดูคำอธิบายการตั้งค่าแต่ละส่วนได้ที่ ตอนที่ 16 ข้อที่ 4)
4. หลังจากกำหนดค่าทั้งการ JOIN และ Action เรียบร้อยแล้ว ไอคอนทั้ง 2 จะเปลี่ยนเป็นสีฟ้า
5. จากนั้นให้ทดสอบการทำงานโดยคลิกสร้างไฟล์ Models, Views, JS และ Controller ให้เรียบร้อยครบทุกไฟล์ (สำหรับ Version 0.6 จะมีปุ่ม "สร้างไฟล์ทั้งหมด") จากนั้นให้คลิกลิงค์เพื่อดูตัวอย่าง (ในหน้า Controller)
6. เมื่อเข้าไปหน้ารายการหลัก ให้คลิกปุ่ม "แก้ไข" รายการสั่งซื้อ (หากไม่มีให้เพิ่มใหม่ ที่ปุ่มสีเขียว) เพื่อทดสอบการทำงาน
7. ในหน้าเว็บเพจแบบฟอร์มสำหรับแก้ไขข้อมูล ให้เลื่อนลงไปยังส่วนของตารางรายละเอียดด้านล่าง และกดปุ่ม "เพิ่มรายการ" เพื่อทดสอบป้อนข้อมูล
8. สังเกตว่าแบบฟอร์มในช่องราคา ยังไม่ปรากฏตัวเลขใดๆ ให้เลือกเลือก วัตถุดิบจาก Dropdown list เพื่อดูการเปลี่ยนแปลงในช่องราคา
9. จะปรากฏราคาขึ้นมาตามรายการที่เราเลือก (เกิดจากการตั้งค่าเพิ่มเติมในข้อที่ 2.4 - 2.5)
10. เมื่อลองกรอกตัวเลขจำนวนเป็น 10 สังเกตในช่อง ราคารวม จะเกิดการคำนวณผลรวมอัตโนมัติ (เกิดจากการตั้งค่าใรตอนที่แล้ว ดูคำอธิบายการตั้งค่าแต่ละส่วนได้ที่ ตอนที่ 16 ข้อที่ 4)
11. มาถึงตอนนี้ จะเข้าสู่หัวข้อหลักของเรา นั่นคือ เมื่อลองเปลี่ยนวัตถุดิบ ราคารวมจะต้องคำนวณใหม่อัตโนมัติเช่นกัน (จากการตั้งค่าในบทความนี้ ข้อที่ 3.)
เพียงตั้งค่าในขั้นตอนที่ 3 ข้อเดียว เราก็สามารถสร้าง Dropdown list ที่สามารถคำนวณราคารวมให้ทันทีที่เปลี่ยนแปลงรายการ สำหรับในหัวข้อต่อไป จะมาพูดถึงวิธีการบันทึกค่าเราได้กำหนดไว้แล้ว เพื่อป้องกันกรณีที่ยังทำรายการไม่เสร็จ หรือเผลอกดรีเฟรชหน้าเว็บ จะได้ไม่ต้องมานั่งตั้งค่ากันใหม่ครับ
วิดีโอสาธิตการใช้งาน :
<< คำนวณผลรวมอัตโนมัติ เมื่อป้อนตัวเลข บันทึกการตั้งค่า เพื่อแก้ไขภายหลัง »
1. ในแท็ป "ตั้งค่า" เลื่อนไปส่วนที่ 5 ด้านล่างสุด "ข้อมูลตารางรายการ ( Detail )" และกำหนดการ JOIN ตารางวัตถุดิบที่ไอคอนด้านซ้าย
2. จะมีการกำหนดค่าเพิ่มเติมในขั้นตอนที่ 2.4 และ 2.5 สำหรับขั้นตอนที่ 2.1 - 2.3 คือการตั้งค่าการ JOIN ตามปกติ (อ่านได้จากคู่มือการใช้งาน ตอนที่ 8)
2.1 เลือกตารางวัตถุดิบ (ตารางที่ต้องการ JOIN)
2.2 เลือกฟิลด์อ้างอิง (Primary key ของตารางที่ JOIN)
2.3 เลือกฟิลด์ที่ใช้แสดงเป็นป้ายกำกับใน Dropdown list ที่สร้างขึ้นมา
2.4 ตั้งค่าเพิ่มเติม เพื่อดึงราคา มาเก็บไว้ในแอตทริบิวต์ของ option ที่เลือก เพื่อใช้งาน
2.5 นำค่าที่เลือกในข้อที่ 4 ไปใส่ใน INPUT ที่ต้องการเมื่อเกิด On change เช่น นำไปใส่ในช่อง price ซึ่งจะได้ราคาต่อหน่วย เอาไว้คำนวณกับ จำนวนที่ต้องการสั่งซื้อ
3. เพิ่ม Action เพิ่มเติมให้กับ Dropdown list ที่แสดงรายการวัตถุดิบที่สร้างขึ้นมานี้ โดยกำหนดให้ทำการคำนวณหา ราคารวม ทันทีเมื่อเปลี่ยนแปลงค่า (ดูคำอธิบายการตั้งค่าแต่ละส่วนได้ที่ ตอนที่ 16 ข้อที่ 4)
4. หลังจากกำหนดค่าทั้งการ JOIN และ Action เรียบร้อยแล้ว ไอคอนทั้ง 2 จะเปลี่ยนเป็นสีฟ้า
5. จากนั้นให้ทดสอบการทำงานโดยคลิกสร้างไฟล์ Models, Views, JS และ Controller ให้เรียบร้อยครบทุกไฟล์ (สำหรับ Version 0.6 จะมีปุ่ม "สร้างไฟล์ทั้งหมด") จากนั้นให้คลิกลิงค์เพื่อดูตัวอย่าง (ในหน้า Controller)
6. เมื่อเข้าไปหน้ารายการหลัก ให้คลิกปุ่ม "แก้ไข" รายการสั่งซื้อ (หากไม่มีให้เพิ่มใหม่ ที่ปุ่มสีเขียว) เพื่อทดสอบการทำงาน
7. ในหน้าเว็บเพจแบบฟอร์มสำหรับแก้ไขข้อมูล ให้เลื่อนลงไปยังส่วนของตารางรายละเอียดด้านล่าง และกดปุ่ม "เพิ่มรายการ" เพื่อทดสอบป้อนข้อมูล
8. สังเกตว่าแบบฟอร์มในช่องราคา ยังไม่ปรากฏตัวเลขใดๆ ให้เลือกเลือก วัตถุดิบจาก Dropdown list เพื่อดูการเปลี่ยนแปลงในช่องราคา
10. เมื่อลองกรอกตัวเลขจำนวนเป็น 10 สังเกตในช่อง ราคารวม จะเกิดการคำนวณผลรวมอัตโนมัติ (เกิดจากการตั้งค่าใรตอนที่แล้ว ดูคำอธิบายการตั้งค่าแต่ละส่วนได้ที่ ตอนที่ 16 ข้อที่ 4)
11. มาถึงตอนนี้ จะเข้าสู่หัวข้อหลักของเรา นั่นคือ เมื่อลองเปลี่ยนวัตถุดิบ ราคารวมจะต้องคำนวณใหม่อัตโนมัติเช่นกัน (จากการตั้งค่าในบทความนี้ ข้อที่ 3.)
เพียงตั้งค่าในขั้นตอนที่ 3 ข้อเดียว เราก็สามารถสร้าง Dropdown list ที่สามารถคำนวณราคารวมให้ทันทีที่เปลี่ยนแปลงรายการ สำหรับในหัวข้อต่อไป จะมาพูดถึงวิธีการบันทึกค่าเราได้กำหนดไว้แล้ว เพื่อป้องกันกรณีที่ยังทำรายการไม่เสร็จ หรือเผลอกดรีเฟรชหน้าเว็บ จะได้ไม่ต้องมานั่งตั้งค่ากันใหม่ครับ
วิดีโอสาธิตการใช้งาน :
<< คำนวณผลรวมอัตโนมัติ เมื่อป้อนตัวเลข บันทึกการตั้งค่า เพื่อแก้ไขภายหลัง »
[[ PHP CI MANIA | ลดเวลาเขียนโค้ด เพิ่มเวลาบริหารจัดการได้มากขึ้น | Webpage Generator by CodeIgniter Framework ]]
HOME
HOME
--------------------------------
สนับสนุนค่ากาแฟผู้เขียนได้ที่
PHP CI MANIA - PHP Code Generator
โปรแกรมช่วยสร้างโค้ด ลดเวลาการเขียนโปรแกรม
ความคิดเห็น
แสดงความคิดเห็น