Tutorial III: SQLBuilder for searching #2

<< Tutorial III#1 | Top | Next: Tutorial IV >>

  Download Source code
   
 
   
 

Question: หลังจากกด Submit แล้ว จะทำอย่างไรให้เงื่อนไขที่ผู้ใช้กรอกไม่หายไป

โดยปกติแล้ว สาำมารถทำได้โดยการดึงข้อมูลจาก request parameter มาแสดง เช่น

<input name="colName" value="<%request.getParameter("colName")%>"/>

ทั้งนี้จะต้องไม่ลืม check ด้วยว่า ค่าที่ได้จาก getParameter() เป็น null หรือไม่ หากไม่ check จะมีการแสดงคำว่า "null" แทนที่จะเป็นค่าว่างๆ ใน Textbox และการที่ต้อง check null ก่อนนี่เอง ที่ทำให้ code ในส่วนนี้ค่อนข้างยาว รุงรังเกินความจำเป็น ซึ่งจากประสบการณ์ code ส่วนนี้มีเปอร์เซนต์ ค่อนข้างสูงที่จะเกิดข้อผิดพลาด หากเขียน code ไม่รัดกุม กรณีที่พบบ่อย เช่น เลือก Drop down list ไว้แล้ว หลังจาก submit ตัวเลือกกลับไปเป็นค่าเดิม เป็นต้น

 

Question: จะใช้ Framework ช่วยลด coding ในส่วนนี้ได้อย่างไร

สามารถทำได้โดยใช้ <%=WebUI.setFormValue(request,formName)%> โดยมีหลักการทำงานคือ จะมีการสร้าง JavaScript ขึ้น ซึ่งจะนำค่าที่ได้จาก request parameter มา set ให้กับ input ต่างๆ ของ HTML form โดยอัตโนมัติ ทั้งนี้การที่ JavaScript จะอ้างอิงถึง input ต่างๆ ในแบบฟอร์มได้ จะต้องถูกวางไว้หลังจาก input นั้นๆ (มิเช่นนั้น จะหา input object ไม่เจอ) ดังนั้นจึงควรที่จะวาง code ดังกล่าวไ้้ว้ หลัง ปิด tag form หรือไม่ก็วางไว้ด้านท้ายๆ ของ body ไปเลย (ดูดัวอย่างได้ใน full source code)

ตัวอย่าง JavaScript ที่ถูกสร้างขึ้น ซึ่งจะมีการเรียกใช้ function setFormVal() ซึ่งอยู่ใน framework.js โดย function นี้จะ set ค่าให้กับ input ชนิดต่างๆ เช่น textbox, select, textarea, checkbox, radio button และ อื่นๆ ให้อัตโนมัติ

 
1
2
3
4
5
6
7
8
9
10
 
<script language='javascript'>
setFormVal(document.form1.wx_Tma__prod_name,'รถ');
setFormVal(document.form1.wx_Teq__payment,'Direct Debit');
setFormVal(document.form1.button2,'Submit');
setFormVal(document.form1.wx_Dge__update_date,'03/09/2551');
setFormVal(document.form1.wx_Ieq__stock,'123');
setFormVal(document.form1.wx_Fle__prod_price,'200');
setFormVal(document.form1.wx_Fge__prod_price,'100');
setFormVal(document.form1.wx_Dle__update_date,'');
</script>
   
 

 

Question: แบ่งแสดงผลเป็นหลายหน้าทำอย่างไร

โดยการระบุจำนวนข้อมูลต่อ 1 หน้า เวลาที่เรียก function executeQutey() เช่น หากต้องการใ้ห้แสดงข้อมูล 25 records ต่อหนึ่งหน้า sStmt.executeQuery(25,request);

ต้องใส่ตัวแปร request ด้วยเนื่องจากว่า Framework จะระบุหน้าปัจจุบันที่จะแสดงผลจาก request parameter ที่ชื่อว่า pageno โดยอัตโนมัติ และควรหลีกเลี่ยงการใช้ชื่อ pageno ในการตั้งชื่อ form input เพราะจะทำให้การแสดงผลผิดพลาด

 

Question: การสร้าง Link สำหรับเปิดหน้าต่างๆ (Page Navigation) สามารถทำได้อย่างไร

หากต้องการทำเอง สามารถทำได้โดยใช้ข้อมูลดังต่อไปนี้ จาก SmartStmt

  • sStmt.getNumPerPage() - จำนวน record ต่อ 1 หน้า
  • sStmt.getPageNo() - เลขที่หน้าปัจจุบัน (เริ่มจาก 1)
  • sStmt.getNumPage() - จำนวนหน้าทั้งหมด
  • sStmt.getNumRow() - จำนวน record ทั้งหมด

 

ทั้งนี้จะต้องมีการส่งต่อข้อมูลด้วยว่า ปัจจุบันใช้เงื่อนไขใดบ้างในการค้นหา เพื่อให้การเปลี่ยนหน้ายังคงเป็นชุดข้อมูลผลลัพธ์เดิม เช่น

<a href="product.jsp?prod_name=<%=request.getParameter("prod_name")%>">

และจะต้องระมัดระวัง ให้มีการส่งข้อมูลให้ครบ มิเช่นนั้นจะเกิดข้อผิดพลาด ซึ่งพบเห็นได้บ่อย เช่น กรณีที่คลิกไปหน้าถัดไปแล้ว เงื่อนไขการจำนวนผลลัพธ์เปลี่ยนเนื่องจากเงื่อนไขที่ใช้ในการค้นหาบางตัวหายไป ปัญหาส่วนใหญ่มักจะเกิดจาก typing error หรืออาจเป็นเพราะมีการเพิ่มเงื่อนไขที่ใช้ในการค้นหาภายหลังแล้ว ไม่ได้แก้ code ส่วนของการเปลี่ยนหน้า

 

Question: จะใช้ Framework ช่วยสร้าง Page Navigation ได้อย่างไร

ทำได้โดยวาง code <%=WebUI.genPageNav(request,sStmt,"../")%> ไว้ ณ บริเวณที่ต้องการแสดง Page Navigation โดย Framework จะจัดการ generate HTML ที่มี Link ไปยังหน้าต่างๆ พร้อมกับส่งต่อ parameter ต่างๆ ที่เป็นเงื่อนไขการค้นหา ให้โดยอัตโนมัติ

หลักการทำงานภายในของ Framework คือ จะรวบรวม parameter ทั้งหมดจาก QueryString แล้วทำการปรับแก้ค่า pageno ของแต่ละ Link ดังนั้น หากใช้ Framework สร้าง Page Navigation อัตโนมัติ จะต้อง Submit HTML Form แบบ GET เท่านั้น!!

และ เนื่องจากใน Page Navigation จะมี icon สำหรับเปิด Next, Previos, First, Last page ด้วย ดังนั้น จึงต้องมีการระบุ path ไปยัง directory webX ให้ถูกต้องจึงจะสามารถแสดงรูปภาพได้

 

Question: ใช้ Framework ช่วยในการ Sort ข้อมูล column ต่างๆ ได้อย่างไร


ทำได้โดยใช้ Function SQLBuilder.genOrderBySQL() ตามตัวอย่างดังนี้ (บรรทัดที่ 3)

 
1
2
3
4
5
6
 
SQLBuilder sb=new SQLBuilder();
String sql="select * from product where 1=1" + sb.genSearchSQL(request);
sql+=sb.genOrderBySQL(request);
SmartStmt sStmt=rCtrl.getSmartStmt(sql);
sb.applySearchPstmt(request,sStmt.pstmt);
sStmt.executeQuery(25,request);
   
 

Framework จะ generate SQL โดยใช้ request parameter คือ sort_by และ sort_dir (ไม่ควรที่จะใช้ชื่อดังกล่าวในการตั้งชื่อ Form input เพราะจะทำให้การแสดงผลผิดพลาด)

การแสดง Icon สำหรับการ sort ดังรูปด้านบนสามารถทำได้โดย วาง <%=WebUI.genSortIcon(request,"prod_name","../")%> ไว้ ณ บริเวณที่ต้องการแสดง icon โดย function นี้มีการทำงานคล้ายกับ WebUI.genPageNav() คือจะ ใช้ได้กับการ Submit Form แบบ GET เท่านั้น

การทำงานของ Icon sort คือ

  • เริ่มต้นไม่มีการ Sort จะเป็น Icon ดังนี้
  • คลิกครั้งแรก จะเป็นการ Sort แบบ ascending และแสดง Icon
  • คลิกอีกครั้ง จะเป็นการ Sort แบบ descending และแสดง Icon
  • คลิกอีกครั้ง จะกลับไปอยู่สถานะเดิม ที่ไม่มีการ Sort