Tutorial IV: SQLBuilder for updating data

<< Tutorial III#2 | Top | Next: Tutorial V >>

  Download Source code
   
 
   
 

แบบฟอร์ม สำหรับการ Insert ข้อมูลใหม่ และ Update ข้อมูลเดิมมักมีลักษณะที่คล้ายกัน โดยจะแยกเป็น JSP คนละไฟล์ หรือเป็น JSP ไฟล์เดียวกันก็ได้ หากรวมเป็นไฟล์เดียวกันก็จะมีข้อดีคือ การควบคุมให้ทั้งสองหน้าไปในทางเดียวกันทำได้ง่ายกว่า เช่น มีการ Validate ด้วยกฏเกณฑ์เดียวกัน มี error message เหมือนกัน และเมื่อมีการเปลี่ยนแปลงภายหลัง เช่น เพิ่ม field ก็จะสามารถแก้ไขได้ที่จุดเดียว ไม่ต้องตามไปแก้หลายไฟล์ ด้วยประโยชน์ดังกล่าว Tutorial นี้จะเลือกแสดงวิธีการ coding ในกรณีที่ีรวมแบบฟอร์มทั้งสองให้อยู่ในไฟล์เดียวกัน (หากแยกกันก็มีวิธีการ coding ที่ไม่ต่างไปจากตัวอย่างมากนัก)

 

การใช้ SQLBuilder เพื่อสร้าง SQL สำหรับการ Insert / Update

มีหลักการคล้ายกับการ generate SQL สำหรับการ Search คือ Framework จะสร้าง SQL ให้สำหรับ input field ที่มีชื่อตาม Format ดังต่อไปนี้

wx_{datatype code}__{column name}


(ข้อควระวัง: ต่างจากการ search คือ จะไม่มีการระบุ operator code)
    
1
2
3
4
5
6
7
 
String sql="";
SQLBuilder sb=new SQLBuilder();
sql="update product set " + sb.genUpdateColSQL(request); 
sql+=" where prod_id=" + request.getParameter("prod_id");
SmartStmt stmt=rCtrl.getSmartStmt(sql);
sb.applyUpdatePstmt(request,stmt.pstmt);
stmt.executeUpdateAndClose();
   
 

ขั้นตอนในการ Update ข้อมูล

  • เริ่มต้นโดยสร้าง SQLBuilder เสียก่อน (บรรทัดที่ 2)
  • จากนั้นใช้ คำสั่ง genUpdateColSQL() เพื่อสร้าง SQL (บรรทัดที่ 3)
  • สร้าง SmartStmt จาก SQL ที่สมบูรณ์แล้ว (บรรทัดที่ 5)
  • ใช้คำสั่ง applyUpdatePstmt() เพื่อ set Parameter ให้แก่ PreparedStatement (บรรทัดที่ 6)
  • ทำการ Execute (บรรทัดที่ 7)

 

 
1
2
3
4
5
6
7
 
String sql="";
SQLBuilder sb=new SQLBuilder();
sql="insert into product (" + sb.genInsertColSQL(request); 
sql+=") values (" + sb.genInsertValSQL(request) + ")";
SmartStmt stmt=rCtrl.getSmartStmt(sql);
sb.applyUpdatePstmt(request,stmt.pstmt);
stmt.executeUpdateAndClose();
   
 

ในการ Insert มีจุดที่ต่างจากการ Update เพียงจุดเดียวคือ SQL ที่ใช้ (บรรทัดที่ 3,4) โดยการ Insert จะใช้ 2 คำสั่งคือ genInsertColSQL() และ genInsertValSQL() นอกนั้นจะเหมือนกันทุกประการ

 

การดึงข้อมูลเดิมมาแสดงในแบบฟอร์มแก้ไขข้อมูล

เช่นเดียวกับการ Search คือ จะมีการ set ค่าให้กับ Form input อัตโนมัติโดยใช้ JavaScript โดยมีวิธีการเขียน code ดังนี้

 
1
2
3
 
String sql="select * from product where prod_id=" + request.getParameter("prod_id");
SmartStmt stmt=rCtrl.getSmartStmt(sql);
if(stmt.executeAndQueryNext()) out.println(WebUI.setFormValue(stmt,"form1"));
   
 

จะเห็นได้ว่ามีการใช้ Function เดียวกันกับที่ใช้ในหน้า Search แต่ attribute จะไม่เหมือนกัน ในหน้า search จะใช้ request เพื่อให้ Framework ดึงข้อมูลจาก request parameter มา set ให้อัตโนมัติ แต่ในหน้านี้จะใช้ SmartStmt โดยจะดึงข้อมูลจาก DB มาใช้แทน ทั้งนี้จะต้องไม่ลืมว่า Coding ในส่วนนี้ควรจะอยู่หลังปิด tag form

 

Question จะทำอย่างไรให้ Save ข้อมูลแล้วกลับไปหน้าเดิม

เช่น ค้นหาสินค้าที่อยู่ในหมวดใดหมวดหนึ่งเพื่อทำการแก้ไข เปิดไปยังหน้าที่ 3 แล้วเข้าไปแก้ข้อมูล หลังจาก Save เสร็จแล้ว ก็ควรที่จะกลับมาที่หน้า 3 เหมือนเดิม ด้วยเงื่อนไขการค้นหาเดิม เป็นโจทย์ที่ค่อนข้างจะคล้ายคลึงกับการทำ Page Navigation คือ หากทำเองโดยไม่ใช้ Framework มักจะมีความเสี่ยงที่จะหลุดได้ง่าย โดยเฉพาะอย่างยิ่งในกรณีที่เงื่อนไขการค้นหามีจำนวนมาก

หลักการที่ใช้ใน Framework คือการ ดึงข้อมูล REFERER มาจาก HTTP Header มาเก็บไว้ ซึ่งในกรณีที่ Submit Form แบบ GET ข้อมูล request parameter ทั้งหมดจะอยู่ใน REFERER ซึ่งสามารถนำมาใช้ในการ Redirect หลังจากที่บันทึกข้อมูลเรียบร้อยแล้วได้ โดยมีวิธีการเขียน Code ดังนี้

ในกรณี Delete สามารถใช้ REFERER ได้โดยตรง

response.sendRedirect(request.getHeader("Referer"));

ในกรณี Edit / Insert ไม่สามารถใช้ REFERER ได้โดยตรง เพราะจะมีการแสดงหน้าแบบฟอร์มก่อน REFERER ที่ได้จึงเป็นของหน้าแบบฟอร์มแทน ดังนั้นจึงต้องมีการเก็บ REFERER ไว้ในแบบฟอร์มเสียก่อน โดยวาง coding ต่อไปนี้ ภายใน Tag form

<%=WebUI.genReferer(request)%>

เมื่อบันทึกเสร็จแล้วก็ Redirect ไปยัง URL ของ REFERER ที่ได้เก็บไว้ดังนี้

response.sendRedirect(request.getParameter("referer"));

(ดูตัวอย่างได้จาก Source code)