Expression Language

ပြီးခဲ့သော အီးဇီး ဂျေအက်စ်ပီ အခန်းဆက်ဘလောဂ်ဖြင့် JSTL အကြောင်းကို ရေးသားခဲ့၏။ ထိုအထဲတွင် JSTL Tag များတွင် ${} အသုံးပြု၍ ဖော်ပြချက်များကို ရေးသားခဲ့၏။ ဤကဲ့သို့ရေးပုံရေးနည်းသည် EL ရေးပုံရေးနည်းဟု ခေါ်ဆိုပါသည်။ ရေးသားရလွယ်ကူ၍ အမြင်ရှင်းစေပါသည်။ JSTL 1.2 အရောက်တွင် EL ရေးနည်းကို Tag ၏ value attribute ၏ တန်ဖိုးတွင် အသုံးပြုလာနိုင်ပါသည်။ ဤကဲ့သို့ JSTL tag များနှင့် EL ရေးနည်းကို တွဲရေးခြင်းအားဖြင့် ယခင် JSP tag များနှင့် Script များကြောင့် ရှုပ်ရှက်ခပ်ကာ အမြင်ရှုပ်စေခဲ့သော JSP များကို သန့်ရှင်းသပ်ရပ်စွာ ရေးသားနိုင်ပါသည်။ ဤတစ်ခေါက်ဘလောဂ်တွင် EL ရေးနည်း နှင့် ပတ်သက်ပြီး ရေးသားသွားပါမည်။

EL ရေးနည်း

EL ရေးနည်း ဆိုသည်မှာ Expression Language ၏ အတိုကောက်ဖြစ်ပြီး၊ JSP 2.0 မှစ၍ အသုံးပြုနိုင်လာခြင်း ဖြစ်၏။ ထိုမှ တဖန် Java EE 5.0 အရောက်တွင် JSP တွင် အသုံးပြုသော EL ရေးနည်းနှင့်၊ JSF တွင် အသုံးပြုသော Expression Language တို့ကို ပူးပေါင်းကာ Unified EL ဟု အမည်အသစ်ကို ပေးပြီး JSF တွင် အမျိုးမျိုးကို အသုံးပြုလာနိုင်စေပါသည်။

ဤဘလောဂ်သည် JSP အကြောင်းကို အဓိကထား၍ ရေးသားမည် ဖြစ်သောကြောင့် JSP 2.0 တွင် စတင်အသုံးပြုလာနိုင်သော EL ရေးနည်း အကြောင်းကိုသာ ဖော်ပြသွားမည် ဖြစ်သည်။

EL ရေးနည်းသည် အတွက်အချက်များ၏ ရလဒ်များအား ဖော်ပြရာတွင်၎င်း၊ JSP အတွင်းမှ ကိုးကားနိုင်သော Object များ၏ တန်ဖိုးကို ဖော်ပြရာတွင်သော်၎င်း အသုံးပြုနိုင်ပါသည်။

EL ရေးနည်းအား ရေးသားရာတွင် ${ရေးနည်း} ဟု ဒေါ်လာဖြင့်စသော လက်သည်းကွင်းကြားတွင် ဖော်ပြချက်များအား ရေးသားနိုင်ပါသည်။ အကယ်၍ ${100 * 10} ဟုရေးထားပါကာ 1000 ဟု ဖော်ပြပေးမည် ဖြစ်သည်။

တဖန် JSP အတွင်းမှ အသုံးပြုနိုင်သော Scope အမျိုးမျိုးတွင် သိမ်းဆည်းထားသည့် Object များ၏ တန်ဖိုးများကိုလည်း ကိုးကား ဖော်ပြနိုင်ပါသေးသည်။ Scope အား သတ်မှတ်ထားခြင်း မရှိပါက Scope များအားလုံးထဲရှိ Object အား ရှာဖွေ ကိုးကားမည်ဖြစ်၏။ Scope အတိအကျအား ရည်ညွှန်း ကိုးကားလိုပါက scope အမည် ကိုတပ်၍ ရေးသားနိုင်မည် ဖြစ်သည်။

အကယ်၍ session scope ထဲတွင်၊ person ဟု အမည်ရသော Object ကို သိမ်းဆည်းထားပြီး၊ ထို Object တွင် member အဖြစ် name ကို ပိုင်ဆိုင်သည်ဆိုပါက ၊ EL ရေးနည်းဖြင့် အောက်ပါအတိုင်း ရေးသားနိုင်ပါသည်။

${sessionScope.person.name}

အထက်ဖော်ပြပါအတိုင်း Scope, Objece အမည်နှင့် ပိုင်ဆိုင်မှု့များ အကြားတွင် "." ကို ခံ၍ ရေးသားရမည် ဖြစ်၏။ ဤသို့ရေးသားထားခြင်းဖြင့် sessionScope ၏ person အမည်ရှိ Object ၏ name ကို ဖော်ပြပေးမည် ဖြစ်ပါသည်။

ဤကဲ့သို့ Object ၏ ပိုင်ဆိုင်မှု့အား ကိုးကားနိုင်ရန် ထို Object တွင် getter လုပ်ဆောင်ချက်ကို ရေးသားထားရန် လိုအပ်ပါသည်။

တဖန် EL ရေးနည်းမှ ကိန်းရှင်များ (Array) နှင့် List Interface Object များ၊ Map Interface Object များကိုလည်း ကိုးကားနိုင်ပါသည်။ List နှင့် ကိန်းစဉ်များဆိုပါက ${scope.objectname[index]} ဟု ကိုးကားနိုင်ပြီး၊ Map ဆိုပါက ${scope.objectname["key"]} ဟု ရေးသားနိုင်ပါသည်။

အသုံးပြုနိုင်သော Object များ

EL ရေးနည်းသည် JSP အတွင်းတွင် အသုံးပြုသော ဖော်ပြနည်း တစ်ခုဖြစ်သည့်အလျှောက်၊ JSP အတွင်းတွင် အသုံးပြုနိုင်သော Scope များနှင့် Default Object များကိုလည်း EL ရေးနည်းမှ ဆက်သွယ် အသုံးပြုနိုင် ပါသည်။

Object အမည်	ရှင်းလင်းချက်
pageScope	JSP ၏ page scope အား ကိုယ်စားပြုသော Object ဖြစ်၏။ ကီးနှင့် တန်ဖိုးကို တွဲထားသော Map Object ပုံစံဖြစ်၏။ ${pageScope.param} ဟုရေးသားကာ အသုံးပြုနိုင်ပါသည်။
requestScope	JSP ၏ request scope အတွင်းတွင် Map အဖြစ်သိမ်းဆည်းထားသော Object များအား ဆက်သွယ်နိုင်သော Object ဖြစ်၏။ ${requestScope.param} ဟု ရေးသား အသုံးပြုနိုင်သည်။
sessionScope	JSP Session Scope အတွင်းတွင် Map ပုံစံအဖြစ် သိမ်းဆည်းထားသော Object များအား ဆက်သွယ်အသုံးပြုနိုင်ပါသည်။ ${sessionScope.param} ဟု ရေးသား အသုံးပြုနိုင်ပါသည်။
applicationScope	JSP Application Scope အတွင်းတွင် Map ပုံစံဖြင့် သိမ်းဆည်းထားသော Object များအား ဆက်သွယ် အသုံးပြုနိုင်ပါသည်။ ${applicationScope.param} ဟု ရေးသား အသုံးပြုနိုင်ပါသည်။
param	JSP ၏ String ပုံစံ Request Parameter များအား ဆက်သွယ်အသုံးပြုနိုင်သော Object ဖြစ်၏။ ${param.name} ဟု ရေးသားအသုံးပြု နိုင်ပါသည်။
paramValues	String [] ကိန်းစဉ်ပုံစံ Request Parameter များအား ဆက်သွယ်အသုံးပြုနိုင်သော Object ဖြစ်၏။ ${paramValues.name[0]} ဟု ရေးသား အသုံးပြုနိုင်ပါသည်။
header	header တွင် သိမ်းဆည်းထားသော တန်ဖိုးများအား ဆက်သွယ်အသုံးပြုနိုင်ပါသည်။ ပုံစံမှာ Map ပုံစံဖြစ်၏။ ${header['user-agent']} ဟု ရေးသားပြီး header အတွင်းရှိ user-agent အမည်ဖြင့် သိမ်းဆည်းထားသော တန်ဖိုးအား ဆက်သွယ် အသုံးပြုနိုင်ပါသည်။
headerValues	header အတွင်း သိမ်းဆည်းထားသော ကိန်းစဉ်တန်ဖိုးများအား ဆက်သွယ် အသုံးပြုနိုင်ပါသည်။ ${header['user-agent'][0]} ဟု ရေးသား အသုံးပြုနိုင်ပါသည်။
initParam	Init Parameter များအား ဆက်သွယ်အသုံးပြုနိုင်ပါသည်။ ${initParam['param']} ဟု ရေးသားနိုင်ပါသည်။
cookie	cookie အမည်နှင့် cookie Object အား ပူးတွဲသိမ်းဆည်း ထားသော Map Object ဖြစ်၏။ ${cookie['param1'].value} ဟု ရေးသား နိုင်ပါသည်။
pageContext	JSP ဖိုင်၏ context Object ဖြစ်ပြီး၊ context, session, request အစရှိသည့် Object များအား ဆက်သွယ် အသုံးပြုနိုင်၏။

အသုံးပြုနိုင်သော သင်္ကေတများ

EL ရေးနည်းတွင် Object များအား ဆက်သွယ်အသုံးပြုရုံသာမက Object တစ်ခုနှင့်တစ်ခု နှိုင်းယှဉ်ခြင်း၊ တွက်ချက်ခြင်း၊ ရွေးချယ်ခြင်း အစရှိသည့် နေရာများတွင်လည်း အသုံးပြုနိုင်၏။ အသုံးများသော သင်္ကေတများမှာ အောက်ပါအတိုင်း ဖြစ်၏။

အမျိုးအစား	သင်္ကေတ	ရှင်းလင်းချက်
အတွက်အချက်	+	အပေါင်း သင်္ကေတ။
	-	အနှုတ် သင်္ကေတ။
	*	အမြှောက် သင်္ကေတ။
	/ (div)	အစား သင်္ကေတ။
	% (mod)	အကြွင်းရှာ သင်္ကေတ။
နှိုင်းယှဉ်ခြင်း	== (eq)	ညီမျှခြင်း။
	!= (ne)	မညီမျှခြင်း။
	< (lt)	သေးငယ်ခြင်းပြ သင်္ကေတ။
	> (gt)	ကြီးမားခြင်းပြ သင်္ကေတ။
	<= (le)	သေးငယ်မည်ဒါမှမဟုတ် တူညီမည်။
	>= (ge)	ကြီးမားမည် ဒါမှမဟုတ် တူညီမည်။
	empty	ဘာမှမရှိပါက။
လော့ဂျစ်	&& (and)	AND အား ဖော်ပြသော သင်္ကေတဖြစ်၏။ a && b ဒါမှမဟုတ် a and b ဟု ရေးသားနိုင်ပါသည်။
	|| (or)	OR အား ဖော်ပြပေးသော သင်္ကေတဖြစ်၏။ a || b ဒါမှမဟုတ် a or b ဟု ရေးသားနိုင်ပါသည်။
	! (not)	ဖော်ပြချက်တစ်ခု အား ငြင်းဆိုလိုသည့် အခါတွင် ရေးသားနိုင်ပါသည်။
ရွေးချယ်ခြင်း	a ? b : c	အကယ်၍ a သည် true ဖြစ်ပါက ရလဒ်သည် b ဖြစ်ပြီး၊ false ဖြစ်ပါက ရလဒ်သည် c ဖြစ်သည်။

နမှုနာ အပလီကေးရှင်း

EL ရေးနည်း၏ အခြေခံရေးသားပုံ တို့ကို လေ့လာခဲ့ပါသည်။ အမှန်ဆိုလျှင် ပြီးခဲ့သော ဘလောဂ်များ၏ နမှုနာများကတည်းက EL ရေးနည်းကို အသုံးပြုလာခဲ့ပါသည်။ EL ရေးနည်းတွင် အသုံးပြုနေသော သင်္ကေတများသည်၎င်း၊ Object အမည်များသည်၎င်း၊ JSP လေ့လာခဲ့ရာတွင် ရင်းနှီးပြီး အမည်များ သင်္ကေတများ ဖြစ်သောကြောင့် အခက်အခဲမရှိ အသုံးပြုနိုင်မည် ဟုထင်ပါသည်။

JSP ၏ Script များအားအသုံးပြု၍ Java Code များ ထိုကြားထဲတွင် HTML Tag များ ရေးသားလျှင် လွန်စွာ ရှုပ်ထွေး၍ မလိုအပ်သော အမှားများကို ပေါ်ပေါက်စေနိုင်ပါသည်။ ဤနေရာတွင် JSTL Tag နှင့် EL ရေးနည်းအား အသုံးပြုခြင်းအားဖြင့် ရှင်းလင်း သပ်ရပ်သော ကုဒ်များအား ရေးသားနိုင်မည် ဖြစ်သည်။

ပြီးခဲ့သော နမှုနာအား ပြုပြင်ရင်း EL ရေးနည်းကို ဆက်လက် လေ့လာသွားပါမည်။ ကျွှန်တော်တို့ နမှုနာသည်၊ အသစ်ရေရာတွင်၎င်း၊ List အား ကြည့်ရာတွင်၎င်း၊ အသုံးပြုနိုင်သော်လည်း၊ ပြုပြင်ခြင်း၊ ဖျက်ပစ်ခြင်းတို့ကို မပြုလုပ်နိုင်သောပါ။ ဤတစ်ခေါက်တွင် ပြုပြင်ခြင်းနှင့် ဖျက်ပစ်ခြင်းတို့ကို ဖြည့်စွက်ရေးသားသွားပါဦးမည်။

ကျွှန်တော်တို့ ရေးမယ့် နမှုနာက အထက်ပါပုံစံမျိုးဖြစ်ပါလိမ့်မည်။ ပါဝင်မည့်စာမျက်နှာများမှာ အောက်ပါအတိုင်း ဖြစ်၏။

• episode5.html
• new.jsp
• list.jsp
• confirm.jsp

episode5.html သည် အဝင်ဝစာမျက်နှာဖြစ်ပြီး၊ ကားအသစ်သွင်းရန်နှင့် ကားစာရင်း အစရှိသည့် လင့်ခ်နှစ်ခု ပါဝင်မည် ဖြစ်သည်။ ကားစာရင်းသွင်းရန်ဖြင့် new.jsp ကို သွားပြီး၊ ထိုမှတဆင့် လိုအပ်သည်များကို ဖြည့်စွက်ကာ ကားစာရင်းသွင်းမည်ဖြင့် confirm.jsp ကို ရွှေ့မည်ဖြစ်သည်။ ထိုမှတဆင့် စာရင်းသွင်းမည် ခလုပ်ဖြင့် ကားအားစာရင်းသွင်းပြီး list.jsp တွင် စာရင်းသွင်းပြီးသော ကားစာရင်းများကို ပြမည် ဖြစ်သည်။

တဖန် episode5.html မှတဆင့် ကားစာရင်းလင့်ခ်ဖြင့် list.jsp တွင် ကားစာရင်းကိုဖော်ပြပြီး၊ နှစ်သက်ရာ ROW အား ကလစ်လုပ်ရုံဖြင့် ရွေးချယ်ထားသော ကားအား confirm.jsp တွင် ဖော်ပြမည်ဖြစ်သည်။ ထိုမှတဆင့် ဖျက်ပစ်မည်ခလုပ်ကို နှိပ်ပါက ထိုကားအား စာရင်းအတွင်းမှ ထုတ်ပစ်ပြီး၊ ကားစာရင်းလက်ကျန်အား list.jsp တွင် ဖော်ပြမည်ဖြစ်သည်။

တဖန် confirm.jsp စာမျက်နှာမှ ပြုပြင်မည်ခလုပ်ကို နှိပ်ပါက၊ အချက်အလက်များအား ပြုပြင်နိုင်ပြီး၊ ပြုပြင်မည်ကို နှိပ်ပါက ပြုပြင်ပြီး ကားစာရင်းအား list.jsp စာမျက်နှာတွင် ဖော်ပြမည်ဖြစ်သည်။

flows.properties

#controller=targetView
edit=new.jsp
list=list.jsp
confirm=confirm.jsp
details=confirm.jsp
update=list.jsp
delete=list.jsp
add=list.jsp

ပြီးခဲ့သော ဘလောဂ်ဖြင့် ကားအသစ်စာရင်းသွင်းခြင်း၊ ကားစာရင်းအား ဖော်ပြခြင်း အစရှိသည်တို့ကို လက်တွေ့ရေးသားခဲ့၏။ ယခုတစ်ခေါက်တွင် ကားစာရင်းမှ နှစ်သက်ရာကားအား ရွေးချယ်ပြီး၊ စာရင်းမှထုတ်ပစ်ခြင်း၊ ပြုပြင်ခြင်းတို့ကို ပြုလုပ်ပုံကို ဆက်လက်ရေးသားသွားပါမည်။



ကားစာရင်းမှ ရွေးချယ်ခြင်း


ကျွှန်တော်တို့ ဒီတစ်ခေါက်တွင် ကားစာရင်းမှ နှစ်သက်ရာ ကားတစ်စီးအား ရွေးချယ်ပြီး ပြုပြင်ပြောင်းလည်းခြင်း၊ ဒါမှမဟုတ် စာရင်းမှထုတ်ပစ်ခြင်းတို့ကို ပြုလုပ်ရန်လိုအပ်ပါသည်။ ပုံမှန် JSP ဒါမှမဟုတ် Servlet အပလီတွေမှာဆိုရင် Table ထဲတွင် Button ကို ထည့်ပြီးသော်၎င်း၊ Check Box ကို ရွေးချယ်စေပြီး Button ကို နှိပ်၍သော်၎င်း ပြုလုပ်လေ့ရှိပါသည်။

ဒီနမှုနာမှာတော့ HTML ၏ onclick event အား အသုံးပြု၍ click လုပ်လိုက်သည့် စာကြောင်းရှိ ကားအား ရွေးချယ်ကာ ပြုပြင်ပြောင်းလည်းခြင်း ဒါမှမဟုတ် စာရင်းထုတ်ခြင်းတို့ကို ပြုလုပ်နိုင်သည့် comfirm.jsp စာမျက်နှာသို့ ရွှေ့ပြောင်းပေးစေပါမည်။ ဤနေရာတွင် jQuery အား အသုံးပြု၍ click လုပ်လိုက်သည့် row မှ အချက်အလက်များဖြင့် servlet အား request လုပ်စေပါမည်။

list.jsp

 <form id="details" action="/episode5/details.ep4" method="post">
  <table class="lineTbl">
   <thead>
    <tr>
     <td>ကားကုမ္ပဏီ</td>
     <td>ကားအမျိုးအစား</td>
     <td>ထုတ်လုပ်သည့်နှစ်</td>
    </tr>
   </thead>
   <tbody>
    <c:forEach items="${car_list}" var="car">
     <tr class="car-row">
      <td class="brand"><c:out value="${car.brand }" /></td>
      <td class="model"><c:out value="${car.model}" /></td>
      <td class="year"><c:out value="${car.year }" /></td>
     </tr>
    </c:forEach>
   </tbody>
  </table>
 </form>

အထက်ပါအတိုင်း jQuery မှ class အမည်ဖြင့် ဆက်သွယ်နိုင်စေရန် tr ၏ class အား car-row အဖြစ်၎င်း၊ td အား brand, model, year အသီးသီး သတ်မှတ်စေပါသည်။

car.js

$(document).ready(function() {
 // row click
 $('tr.car-row').click(function() {

  // append input
  $(this).children("td").each(function() {
   $("<input />").attr({
    'type' : 'hidden',
    'name' : $(this).attr("class"),
    'value' : $(this).text()
   }).appendTo('form#details');
  });

  // submit
  $('form#details').submit();
 });

 // row mouse over
 $('tr.car-row').mouseover(function() {
  $(this).css("background-color", "red").css("color", "yellow");
 }).mouseout(function() {
  $(this).css("background-color", "#F2F2E6").css("color", "black");
 });
});

row အား click လုပ်ပါက အလုပ်လုပ်စေရန် $('tr.car-row').click() လုပ်ဆောင်ချက်အတွင်းတွင် ဖြည့်စွက် ရေးသားနေပါသည်။ $(this).children("td").each() ဖြင့် td တိုင်းအား input အဖြစ်ပြောင်းလည်းစေပြီး၊ details အမည် id ရှိသော form အတွင်းသို့ ဖြည့်စွက်စေပါသည်။

ပြီးပါက ထို Form အား submit လုပ်လိုက်ခြင်းသာဖြစ်ပါသည်။ form ၏ action သည် /episode5/details.ep4 ဖြစ်ပါသဖြင့် BLController Servlet အား details flow ဖြင့် ခေါ်ယူမည် ဖြစ်သည်။ flows.properties အတွင်းတွင် details သည် confirm.jsp ဖြစ်သောကြောင့် confirm.jsp ဖြင့် ကား၏ အချက်အလက်များအား ဖော်ပြပေးမည် ဖြစ်ပါသည်။

စာကြောင်း ၁၉မှ ၂၃သည် ထို Row များအပေါ် mouseover လုပ်ပါက အရောင်ပြောင်းအောင် ရေးသားနေခြင်းဖြစ်ပါသည်။

အထက်ဖော်ပြပါအတိုင်း ရွေးချယ်၍ ကလစ်နှိပ်လိုက်ပါက confirm.jsp ကို ဖော်ပြမည် ဖြစ်သည်။

BLController.java

 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {

  String action = this.getKey(req.getRequestURI());
  req.setAttribute("action-type", req);

  if ("add".equals(action)) {
   this.addCar(this.getCarFromRequest(req));
  } else if ("confirm".equals(action) || "details".equals(action)) {
   req.setAttribute("new_car", this.getCarFromRequest(req));
  } else if ("update".equals(action)) {
   this.deleteCar(this.getCarFromRequest(req));
   this.addCar(this.getEdCarFromRequest(req));
  } else if ("delete".equals(action)) {
   this.deleteCar(this.getCarFromRequest(req));
  }

  req.setAttribute("ref_key", this.getKey(req.getHeader("Referer")));
  req.setAttribute(CAR_LIST, this.carList);

  this.getDispetcher(req.getRequestURI()).forward(req, resp);
 }

 private Car getCarFromRequest(HttpServletRequest req) {
  Car car = new Car();
  car.setBrand(req.getParameter("brand"));
  car.setModel(req.getParameter("model"));
  car.setYear(req.getParameter("year"));
  return car;
 }

BLController တွင်မှု စာကြောင်း ၁၁ဖြင့် Request အတွင်းမှ Car Object အားရယူကာ new_car အမည်ဖြင့် Request အတွင်း ပြန်ဖြည့်စွက်လိုက်ပါသည်။ ယခင်တစ်ခေါက်တွင်မှု session အတွင်း သိမ်းဆည်းခဲ့သော်လည်း မလိုပဲ session အား အသုံးမပြုလိုသဖြင့် request Scope အား ပြောင်းလည်း အသုံးပြုခြင်း ဖြစ်ပါသည်။


confirm.jsp


ဤစာမျက်နှာအား ယခင် တစ်ခေါက်ကတည်းက အသုံးပြုခဲ့ပါသည်။ သို့ရာတွင် ဤတစ်ခေါက်တွင်မှု အသုံးပြုပုံ ပြောင်းလည်းလာပါသည်။ Flow ပုံစံအား ကြည့်ပါ။ confirm.jsp အား new.jsp မှသော်၎င်း၊ list.jsp မှသော်၎င်း ရွှေ့လာနိုင်ပါသည်။ new.jsp မှ လာသည့်အခါတွင် add ကို လုပ်ပြီး၊ list မှလာသည့်အခါ delete ဒါမှမဟုတ် update ကို လုပ်ဆောင်ပေးရန် လိုအပ်ပါသည်။

ဤနေရာတွင် အသုံးဝင်သည်မှာ <c:choose> , <c:when> နှင့် <c:otherwise> tag များပင် ဖြစ်၏။ ဘယ်မှလာသည်ဆိုသည်ကို သိရှိစေရန် အထက်ပါ BLController ၏ စာကြောင်း ၁၉တွင် HTTP Header ၏ Referer အားရယူကာ ref_key အဖြစ် Request အတွင်းသို့ ဖြည့်ပေးစေပါသည်။

confirm.jsp

<body>
 <div style="width: 100%; text-align: right">
  <a href="javascript:history.back();">ယခင် စာမျက်နှာသို့</a>
 </div>
 <h3>စာရင်းသွင်းရန် ကား</h3>

 <div id="left">
  <form id="car_form" method="post">
   <input type="hidden" name="model" value="${new_car.model}" /> <input
    type="hidden" name="brand" value="${new_car.brand}" /> <input
    type="hidden" name="year" value="${new_car.year}" />
   <table>
    <tr>
     <td width="180px">ကားအမည်</td>
     <td id="ed_model" class="member"><c:out
       value="${new_car.model}" /></td>
    </tr>
    <tr>
     <td>ကားကုမ္ပဏီ</td>
     <td id="ed_brand" class="member"><c:out
       value="${new_car.brand}" /></td>
    </tr>
    <tr>
     <td>ထုတ်လုပ်သည့်နှစ်</td>
     <td id="ed_year" class="member"><c:out value="${new_car.year}" /></td>
    </tr>
    <tr>
     <td colspan="2"><c:choose>
       <c:when test="${ref_key eq 'edit'}">
        <input type="button" onclick="javascript:history.back()"
         value="ပြန်ပြင်မည်" />
        <input type="button" class="action" name="/episode5/add.ep4"
         value="စာရင်းသွင်းမည်" />
       </c:when>
       <c:otherwise>
        <input type="button" class="action" name="/episode5/delete.ep4"
         value="စာရင်းဖျက်မည်" />
        <input type="button" class="edit" name="/episode5/update.ep4"
         value="စာရင်းပြင်မည်" />
       </c:otherwise>
      </c:choose></td>
    </tr>
   </table>
  </form>
 </div>
</body>

စာကြောင်း ၂၈မှ ၄၁တွင် ရေးသားထားသည့်အတိုင်း ref_key သည် edit ဖြစ်ပါက "စာရင်းသွင်းမည်" နှင့် "ပြန်ပြင်မည်" ကို ဖော်ပြပြီး၊ edit မဟုတ်ပါက "စာရင်းဖျက်မည်" နှင့် "ပြန်ပြင်မည်" ကို ဖော်ပြစေပါသည်။

ဤနမှုနာအတွင်းတွင် Form တစ်ခုဖြင့် ပုံစံ အမျိုးမျိုး Request လုပ်ရန်လိုအပ်ပါသည်။ ဤကိစ္စမျိုးသည် Javascript သည် လွန်စွာထူးချွံပါသည်။ ထို့ကြောင့် jQuery အား အသုံးပြု၍ Button အပေါ်မှုတည်ကာ form ၏ action အား ပြောင်းလည်းစေပါသည်။

confirm.js

var edit = false;

$(document).ready(function() {

 $('input[type!="submit"][type!="button"]').keypress(function(e) {
  if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
   return false;
  } else {
   return true;
  }
 });

 $('.edit').click(function() {
  if (edit) {
   var ok = true;
   
   $('#car_form').attr('action', $(this).attr('name'));
   
   $('input:text').each(function() {
    if($(this).attr('value') == '') {
     alert("ကွက်လပ်များအား ဖြည့်စွက်ပါ။");
     ok = false;
     return false;
    }
   });

   if(ok) {
    $('#car_form').submit();
   }
   
  } else {
   $('.member').each(function() {
    var value = $(this).text();
    $(this).text('');

    $(this).append($('<input />').attr({
     'type' : 'text',
     'name' : $(this).attr("id"),
     'value' : value
    }));
   });
   $('.action').remove();
   edit = true;
  }
 });

 $('.action').click(function() {
  // form-action
  $('#car_form').attr('action', $(this).attr('name'));
  $('#car_form').submit();
 });
});

confirm.jsp ၏ စာရင်းသွင်းမည်နှင့် စာရင်းဖျက်မည်၏ class သည် action ဖြစ်သည်ကို သတိပြုမိမည် ဖြစ်ပါသည်။ အထက်ပါ confirm.js ၏ စာကြောင်း ၄၇သည် ထိုခလုပ်များအား ကိုယ်စားပြုပြီး click လုပ်ပါက car_form ၏ action အား name ၏ တန်ဖိုးဖြင့်အစားထိုးပြီး submit လုပ်ပါသည်။ ဤနည်းအားဖြင့် စာရင်းသွင်းမည်ဆိုပါက /episode5/add.ep4 အား request လုပ်မည်ဖြစ်ပြီး၊ စာရင်းဖျက်မည်ဆိုပါက /episode5/delete.ep4 အား request လုပ်မည်ဖြစ်သည်။

သို့ရာတွင် စာရင်းပြင်သည့်အခါသည် အနည်းငယ်ထူးပါသည်။ Form အား ပြုပြင်ပြောင်းလည်းနိုင်ရန် ပြင်ပေးပြီး၊ အသုံးပြုသူက ပြုပြင်ပြီးပါမှ Request လုပ်စေပါမည်။ ထို့အတွက် စာရင်းပြင်မည်၏ class အား edit ဟု အမည်ပေးထားပြီး၊ action နှင့် မတူသော အလုပ်ကို ခိုင်းစေပါသည်။

စာကြောင်း ၁၃မှ ၄၅သည် စာရင်းပြင်မည် ခလုပ်၏ လုပ်ဆောင်ချက်များအား ရေးသားထားပါသည်။ class အမည် edit အား click လုပ်ပါက၊ စာကြောင်း ၁၄တွင် if ဖြင့် edit သည် true ဖြစ်ပါကဟု ရွေးချယ်စေပါသည်။ စာမျက်နှာစဖော်ပြကာစ ဆိုပါက စာကြောင်း ၁ တွင် edit = false ဟု သတ်မှတ်ထားပါသဖြင့် else ဖြစ်သော စာကြောင်း ၃၁မှစ၍ အလုပ်လုပ်စေမည် ဖြစ်သည်။ ဤနေရာတွင် td အတွင်းရှိ တန်ဖိုးများအား အသုံးပြု၍ input အဖြစ်ပြောင်းလည်းပစ်ပါသည်။ ဤနည်းအားဖြင့် အသုံးပြုသူက ပြုပြင်ပြောင်းလည်းစေနိုင်မည် ဖြစ်သည်။

နောက်ဆုံးတွင် စာကြောင်း ၄၃ဖြင့် edit အား true အဖြစ်သတ်မှတ်လိုက်ပါသည်။ ဤနည်းအားဖြင့်အသုံးပြုသူက ပြုပြင်လိုသည်ကို ပြုပြင်ပြီး၊ နောက်တစ်ကြိမ် စာရင်းပြင်မည် ခလုပ်အားနှိပ်ပါက edit သည် true ဖြစ်သောကြောင့် စာကြောင်း ၁၄မှ ၃၁အထိ လုပ်ဆောင်စေမည်ဖြည်သည်။ ဤလုပ်ဆောင်ချက်အတွင်းတွင် input များအတွင်းတွင် ကွက်လပ်ပါမပါစစ်ပြီးနောက်ဆုံးတွင် submit လုပ်လိုက်ခြင်းသာဖြစ်သည်။ အခြားသော button များကဲ့သို့ပင် form ၏ action အား /episode5/update.ep4 ဟု ပြောင်းလည်းပြီး submit လုပ်မည် ဖြစ်သည်။ ဤနည်းအားဖြင့် Request URL အားကြည့်ကာ BLController အတွင်းတွင် လိုအပ်သလို Model အား ပြုပြင်ပြောင်းလည်းစေပြီး၊ သင့်တော်သည့် JSP(View) ဖြင့် ပြန်လည် ဖော်ပြပေးစေနိုင်မည် ဖြစ်ပါသည်။

နမှုနာ အပလီအာ http://jsp-tutorials.minlwin.cloudbees.net/ တွင် လေ့လာနိုင်ပါသည်။

ဆက်ပါဦးမည်။ လေးစားစွာဖြင့်

မင်းလွင်