Sec.1 กล ม 1 เร__องการสร_างแบบฟอร_มและการส_งค_าต_วแปร

การสร�างโปรเจ็�ค Web Application

เป็�นการสรางโป็รเจ็ ค web application และพั�ฒนาหนาฟอร�มเพั��อใหผู้�ใช้ป็!อนข้อม�ล โดยพั�ฒนาดวยภาษา JSP ซึ่)�งจ็ะทำ+าหนาทำ,�เป็�นส-วนข้อง In put ข้องโป็รแกรม เพั��อใหผู้�ใช้ป็!อนข้อม�ลผู้-านทำาง web

browser

ข้�.นตอนการพั�ฒนาโป็รแกรม

- สราง Application server

- สรางโป็รเจ็ ค Web application

- การสรางแบบฟอร�ม

1. สราง Application server

สรางเพั��อให eclipse ร� ว-าจ็ะน+าโคดทำ,� compile แลวไป็ Deploy

ลงใน Application server ทำ,�เป็�น Tomcat เล�อกทำ,� tab server

คล2ดข้วาภายใน window แลวเล�อก new คล2ก server เล�อกช้��อ Apache คล2ก Tomcat v6.0 server หร�อ Tomcat v7.0 server

และ Browse ไป็ย�ง folder Tomcat ทำ,�ต2ดต�.งไว

การสรางแบบฟอร�มและการส-งค-าต�วแป็ร

2. สราง Web Application Project

สรางโป็รแกรม Web-Base Application โดยการสราง Project

ใหม- ม,ข้� .นตอนด�งน,.

2.1 เล�อกเมน� File คล2ก new เล�อก Project

เล�อกร�ป็ Folder ช้��อ Web และเล�อก Dynamic Web

Project

หนาทำ,� 2


2.2 ใหก+าหนด Project Name = “………..”

ส-วนการเก บ File Eclipse จ็ะใช้ Directory ทำ,�ถามเม��อเป็4ดข้).นมาเป็�น Default

แต-ถาตองการระบ5ก สามารถคล2กเคร��องหมายออกแลวทำ+าการ



ระบ5 Directory ใหม- จ็ากน�.นกดป็56ม Next


2.3 แสดง Folder ทำ,�เก บ source code และ Output Folder

(ทำ,�เก บ Class File) ค�อ directory ทำ,�ใส-ก-อน Run



3. การสรางแบบฟอร�ม

โป็รแกรม Form.jsp เป็�นเว ป็เพัจ็ทำ,�ใช้ส+าหร�บแสดงฟอร�มป็!อนข้อม�ลผู้�ใช้ แลวน+าไป็บ�นทำ)กลงฐานข้อม�ลโดยม,ร�ป็แบบหนาจ็อทำ,�ตองการสราง

เข้,ยน source code จ็ะไดด�งน,.

<form action="ProFile.jsp" name="form01" method="post" onsubmit="return check()"> <table> <tr> <td >เลข้บ�ตรป็ระจ็+าต�ว</td> <td ><input type="text" maxlength="13" id="idcard" name="idcard" placeholder=ใส-รห�สบ�ตรป็ระจ็+าต�ว ><br></td> </tr> <tr> <td align="right">ช้��อ </td> <td><input type="text" maxlength="30" placeholder=ใส-ช้��อ id="name" name="name"> <br> </td> </tr>



<tr> <td align="right">ส5กล</td> <td><input type="text" maxlength="30" placeholder=ใส-นานสก5ล id="lastname" name="lastname"><br></td> </tr> <tr> <td align="right">เพัศ </td> <td> <input type="radio" checked="checked" name="sex">ช้าย <input type="radio" name="sex">หญิ2ง<br></td> </tr> <tr> <td align="right">ก,ฬาทำ,�ช้อบ</td> <td> <input type="checkbox" name="sport" value="ฟ5ตบอล">ฟ5ตบอล <input type="checkbox" name="sport" value="บาล">บาส <input type="checkbox" name="sport" value="ย2งป็;น">ย2งป็;น <input type="checkbox" name="sport" value="ว-ายน+.า">ว-ายน+.า<br></td> </tr> <tr> <td align="right" >ทำ,�อย�- </td> <td> <textarea placeholder=ใส-ทำ,�อย�- id="address" name=" address"></textarea><br></td> </tr> <tr> <td align="right">จ็�งหว�ด </td> <td><select name="county"> <option value="กร5ณาเล�อกจ็�งหว�ด" >กร5ณาเล�อกจ็�งหว�ด</option> <option value="เช้,ยงใหม-">เช้,ยงใหม- </option>



<option value="ข้อนแก-น">ข้อนแก-น</option> <option value="สม5ทำรป็ราการ">สม5ทำรป็ราการ</option> <option value="กร5งเทำพัมหานคร">กร5งเทำพัมหานคร</option> <option value="ล+าพั�น">ล+าพั�น</option> <option value=">เช้,ยงราย">เช้,ยงราย</option> </select> <br> </td> </tr> <tr> <td align="right">โทำรศ�พัทำ�</td> <td><input type="text" maxlength="10" placeholder=ใส-เบอร�โทำร id="tell" name="tell"> <br> </td> </tr> <tr> <td align="right">อ,เมล�</td> <td><input type="text" placeholder=ใส-อ,เมล� id="email" name="email"> <br> </td> </tr> <tr> <td align="right">ร�ป็ป็ระจ็+าต�ว </td> <td ><input type="file" id="pic" name="pic"> <br></td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" name="ok" value="ตกลง" "> <input type="reset"name="delete" value="ลบ"> <br></td> </tr> </table> </form>



3.1 การสรางฟอร�มแบบ Text field

วิ�ธี�ใช้� ใช้ส+าหร�บข้อม�ลทำ,�ม,ล�กษณะเป็�นข้อความส�.นๆ ในล�กษณะเป็�นต�วอ�กษรหร�อต�วเลข้ก ได เช้-น ช้��อ เลข้บ�ตรป็ระจ็+าต�วป็ระช้าช้น อ,เมล� เป็�นตน

ตั�วิอย่�าง

<input type="text" maxlength="13" id="idcard"

name="idcard" placeholder=ใส-รห�สบ�ตรป็ระจ็+าต�ว >

ค�าอธี�บาย่ สรางช้น2ดข้องฟอร�ม(type)เป็�น text ค+าส��ง maxlength

หมายถ)ง สามารถร�บข้อม�ลไดเพั,ยง 13 ต�วเทำ-าน�.น ต�.งช้��อต�วแป็รว-า idcard เก บค-าต�วแป็รไวใน ID

3.2 การสรางฟอร�มแบบเช้ คบ อกซึ่�(Check Box)



วิ�ธี�ใช้� ฟอร�มแบบเช้ คบ อกซึ่� ใช้ส+าหร�บเล�อกค+าตอบทำ,�สามารถตอบไดหลายข้อ และสามารถคล2กซึ่+.าหร�อยกเล2กค+าตอบทำ,�เล�อกแลวได เช้นใหผู้�ตอบเล�อกป็ระเภทำบร2การทำ,�ตองการร�บข้อม�ลซึ่)�งสามารถเล�อกไดมากกว-า 1 รายการ


<input type="checkbox" name="sport" value="ฟ5ตบอล">ฟ5ตบอล <input type="checkbox" name="sport" value="บาล">บาส <input type="checkbox" name="sport" value="ย2งป็;น">ย2งป็;น

<input type="checkbox" name="sport" value="ว-ายน+.า">ว-ายน+.า

ค�าอธี�บาย่ สรางช้น2ดข้องฟอร�ม(type)เป็�น checkbox ต�.งช้��อต�วแป็รว-า sport ก+าหนดค-า value ตามแต-ทำ,�เราจ็ะก+าหนด

3.3 การสรางฟอร�มแบบ Text Area

วิ�ธี�ใช้� ฟอร�มแบบ Text Area ใช้กรอกข้อความหลายบรรทำ�ดใช้ส+าหร�บสงข้อม�ลเช้-น กรอบแสดงความค2ดเห น ส-งข้อความ E-

mail รายการทำ,�อย�-ซึ่)�งตองพั2มพั�มากกว-า 1 บรรทำ�ด การสรางฟอร�มม,ข้� .นตอนคลายก�บการสรางฟอร�ม Text Field




<textarea placeholder=ใส-ทำ,�อย�- id=" address "

name=" address "></textarea>

ค�าอธี�บาย่ สรางช้น2ดข้องฟอร�มเป็�น textarea ต�.งช้��อต�วแป็รว-า address เก บค-าต�วแป็รไวใน ID ค+าส��ง placeholder

หมายถ)ง การระบ5หมายเหต5ทำ,�ตองการใหพั2ม เพั2�มลงในช้-องว-าง

3.4 การสรางฟอร�มแบบ Radio Button

วิ�ธี�ใช้� ฟอร�ม Radio Button เป็�นฟอร�มในร�ป็แบบป็56ม ทำ,�ใช้ส+าหร�บการตอบค+าถามแบบเล�อกตอบทำ,�ตองการค+าตอบเพั,ยงข้อเด,ยวเทำ-าน�.น


<input type="radio" checked="checked"

name="sex">ช้าย<input type="radio" name="sex">หญิ2ง

ค�าอธี�บาย่ สรางช้น2ดข้องฟอร�ม(type)เป็�น radio ต�.งช้��อต�วแป็รว-า sex

ก+าหนดค-า checked ตามแต-ทำ,�เราจ็ะก+าหนด



3.5 การสรางฟอร�มแบบ Select /Menu

วิ�ธี�ใช้� Select /Menu เป็�นฟอร�มจ็�ดการห�วข้อรายการ ม,ไวใหผู้�กรอกรายการในฟอร�มทำางอ2นเทำอร�เน ตตอบค+าถามหร�อกรอกข้อม�ลโดยม,รายการไวใหคล2กเล�อกไม-ตองพั2มพั�ใหเส,ยเวลาเพั��อสรางความสะดวกในการตอบ และค+าตอบทำ,�ส-งไป็ม,ค-าตรงก�นก�บกล5-มค+าตอบทำ,�เตร,ยมไวในฐานข้อม�ล ทำ+าใหสะดวกต-อการป็ระมวลผู้ล เช้-นรายการ ว�น ว�นทำ,� เด�อน ว5ฒ2การศ)กษา


<select name="county"> <option value="กร5ณาเล�อกจ็�งหว�ด" >กร5ณาเล�อกจ็�งหว�ด</option> <option value="เช้,ยงใหม-">เช้,ยงใหม- </option> <option value="ข้อนแก-น">ข้อนแก-น</option> <option value="สม5ทำรป็ราการ">สม5ทำรป็ราการ</option> <option value="กร5งเทำพัมหานคร">กร5งเทำพัมหานคร</option> <option value="ล+าพั�น">ล+าพั�น</option> <option value="เช้,ยงราย">เช้,ยงราย</option>

ค�าอธี�บาย่ สรางช้น2ดข้องฟอร�มเป็�น select ต�.งช้��อต�วแป็รว-า county

ก+าหนดค-า value ตามแต-ทำ,�เราจ็ะก+าหนด

3.6 การสรางกรอบส+าหร�บเล�อกไฟล�



วิ�ธี�ใช้� กรอบส+าหร�บเล�อกไฟล� ใช้ส+าหร�บการส-งข้อม�ลเป็�นไฟล� เช้-น การ Upload ไฟล�ไป็ย�ง Server ข้องเว บไซึ่ต� โดยจ็ะม,ป็56ม Browse ส+าหร�บคนหาไฟล� เวลาใช้งานจ็ร2งตองเข้,ยนค+าส��งสคร2ป็ต�เพั2�ม จ็)งจ็ะใช้งานได ว2ธี,การสรางกรอบเล�อกไฟล�


<input type="file" id="pic" name="pic">

ค�าอธี�บาย่ สรางช้น2ดข้องฟอร�ม(type)เป็�น file ต�.งช้��อต�วแป็รว-า pic

3.7 การสรางป็56มโตตอบ(Button)

วิ�ธี�ใช้� การสรางฟอร�มเพั��อการโตตอบ ส-งข้อม�ลต-าง ๆ บนเว บไซึ่ต� เม��อด+าเน2นการป็!อนข้อม�ลลงแบบฟอร�มต-าง ๆ ครบข้�.นส5ดทำายเราตองม,ป็56มคล2กเพั��อ ตอบตกลง หร�อ ยกเล2ก ไดแก-ป็56ม Submit หร�อ ไม-ยอมร�บ ไดแก-ป็56ม Reset เสมอเพั��อส-งข้อม�ลไป็ย�งโป็รแกรมสคร2ป็ต�(CGI Script) ด+าเน2นการป็ระมวลผู้ล แสดงผู้ลตามตองการต-อไป็


<input type="submit" name="ok" value="ตกลง" ">


<input type="reset" name="delete" value="ลบ">

ค�าอธี�บาย่ สรางช้น2ดข้องฟอร�ม(type)เป็�น submit หร�อ reset ต�.งช้��อต�วแป็รว-า ok หร�อ delete ก+าหนดค-าทำ,�จ็ะแสดงในป็56มแลวแต-ทำ,�เราจ็ะก+าหนด

การส�งค�าตั�วิแปร

เป็�นการพั�ฒนาโป็รแกรมเพั��อแสดงรายละเอ,ยดข้องค-าพัาราม2เตอร�ทำ,�ผู้�ใช้ป็!อนเข้ามาออกทำางโป็รแกรม Web Browser และแสดงผู้ลการออกทำาง Web Browser

การส�งค�าตั�วิแปร

เป็�นโป็รแกรมทำ,�ถ�กเร,ยกใช้โดย Form.jsp เม��อผู้�ใช้กดป็56ม Add

โป็รแกรมน,.จ็ะทำ+าหนาทำ,�น+าค-าพัาราม2เตอร�ต-างๆทำ,�ผู้�ใช้ป็!อนมาแสดงผู้ลโดยม,ข้� .นตอนการทำ+างานด�งน,.

- อ-านค-าพัาราม2เตอร�ต-างๆ- แสดงรายละเอ,ยดข้องค-าต-างๆ

1. การอ-านค-าพัาราม2เตอร�

เว บเพัจ็ Form จ็ะส-งข้อม�ลข้องสมาช้2กใหม-ผู้-านมาทำางพัาราม2เตอร�ต-างๆ ด�งน,.

- Id card รห�สป็ระจ็+าต�วป็ระช้าช้น- Name ช้��อสมาช้2ก



- Last name นามสก5ลสมาช้2ก- Sex เพัศ- Sport ก,ฬา- Address ทำ,�อย�-- County จ็�งหว�ด- Tell เบอร�โทำรศ�พัทำ�- Email อ,เมล�- Pic ร�ป็

พัาราม2เตอร�ต-างๆเหล-าน,.จ็ะถ�กส-งผู้-านไป็รโดคอล Http และในโป็รแกรมเราสามารถทำ,�จ็ะอ-านค-าพัาราม2เตอร�เหล-าน,.ไดจ็ากออป็เจ็ ค request โดยเร,ยกใช้เมธีอด getParameter() ซึ่)�งโป็รแกรมส-วนน,.จ็ะม,ค+าส��งต-างๆด�งน,.

String idcard = request.getParameter("idcard");String name = request.getParameter("name");String lastname = request.getParameter("lastname");String sex = request.getParameter("sex");String address = request.getParameter("address");String county = request.getParameter("county");String tell = request.getParameter("tell");String email = request.getParameter("email");String pic = request.getParameter("pic");String sport[] = request.getParameterValues("sport");

2. การแสดงผู้ลข้อม�ล

เป็�นการแสดงข้อม�ลทำ,�ร �บมาจ็าก server มาแสดงผู้ลใน Web

Browser



ต�วอย-าง Code

<table> <tr> <td align="center" colspan="2"><img alt="" src="images/<%=pic%>" width="60" height="60"> </td> </tr> <tr> <td >เลข้บ�ตรป็ระจ็+าต�ว</td> <td ><%=idcard%><br></td> </tr> <tr> <td align="right">ช้��อ </td> <td><%=name%><br> </td> </tr> <tr> <td align="right">ส5กล</td> <td><%=lastname%><br></td> </tr> <tr> <td align="right">เพัศ </td> <td><%if(sex.equals("sex")){%>ช้าย<% }else{%>หญิ2ง<%}%><br></td> </tr> <tr> <td align="right">ก,ฬาทำ,�ช้อบ</td> <td> <%for(int i=0;i<sport.length;i++){ %> <%=sport[i] %> <%if(i<sport.length-1){ %>, <%}} %> <br></td> </tr> <tr> <td align="right" >ทำ,�อย�- </td> <td><%=address%><br></td> </tr>



<tr> <td align="right">จ็�งหว�ด </td> <td><%=county%><br> </td> </tr> <tr> <td align="right">โทำรศ�พัทำ�</td> <td><%=tell%><br></td> </tr> <tr> <td align="right">อ,เมล�</td> <td><%=email%><br></td> </tr>

</table>

2.3 การทำดสอบโป็รแกรม

1. Run โป็รแกรม โดยทำ,�คล2กข้วาทำ,�โป็รเจ็ คเล�อก Run As คล2ก Run on Server กดป็56ม Finish



ผู้ลล�พัธี�ทำ,�ได



อ�างอ�ง

หนาทำ,� ค


http://freepowerpoint-template.blogspot.com/search/label/Templates?updated-max=2013-01-03T19%3A58%3A00%2B07%3A00&max-results=20

http://office.microsoft.com/en-us/templates/template-categories-FX102755285.aspx

http://office.microsoft.com/en-us/templates/results.aspx?qu=technology&av=zpp#ai:TC101881345|

https://sites.google.com/site/class0223/technique

http://www.library.cddkorat.com/index.php?option=com_content&view=article&id=16:2010-08-14-04-03-26&catid=6:2010-07-19-03-16-44&Itemid=7

http://www.slideshare.net/dakcom/webprogramming-eclipsejsp

http://www.nectect.or.th

http://www.webthaidd.com/dreamweaver/news.php?id=445

http://cannot.info/page?p=1310520034773

http://www.pyayam.com/article/show.php?Category=webpage&No=67

Technology

Sec.1 กล ม 1 เร__องการสร_างแบบฟอร_มและการส_งค_าต_วแปร