![การสร้างแบบฟอร์มและการส่งค่าตัวแปร
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">สุกล</td>
<td><%=lastname%><br></td>
</tr>
หน้าที่ 13](https://image.slidesharecdn.com/formsent-130813093407-phpapp02/85/lesson1-JSP-16-320.jpg)
![การสร้างแบบฟอร์มและการส่งค่าตัวแปร
<tr>
<td align="right">เพศ </td>
<td><%if(sex.equals("sex")){%>ชาย<% }else{%>หญิง
<%}%><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>
หน้าที่ 14](https://image.slidesharecdn.com/formsent-130813093407-phpapp02/85/lesson1-JSP-17-320.jpg)
lesson1 JSP
- 1. รายงาน เรื่อง การสร้างแบบฟอร์มและการส่งค่าตัวแปร เสนอ อาจารย์ก่องกาญจน์ ดุลยไชย จัดทาโดย 1.นายภาสกร อินทสิทธิ์ รหัส 5304101373 2.นางสาวกนกนวล อินขาน รหัส 5404101301 3.นายจักรกฤษณ์ โพธิ์แปลง รหัส 5404101313 4.นายประดิษฐิ์ นิลรัตน์ รหัส 5404101348 5.นายอนุสรณ์ สุนันตะ รหัส 5404101409 สาขาวิทยาการคอมพิวเตอร์ กลุ่มเรียนที่ 1 รายงานเล่มนี้เป็นส่วนหนึ่งของหลักการเขียนโปรแกรมบนอินเตอร์เน็ต(คพ313) สาขาวิชาวิทยาการคอมพิวเตอร์ คณะวิทยาศาสตร์ มหาวิทยาลัยแม่โจ้
- 2. การสร้างแบบฟอร์มและการส่งค่าตัวแปร คำนำ รายงานเล่มนี้เป็นส่วนหนึ่งของวิชาหลักการเขียนโปรแกรมบนอินเตอร์เน็ต(คพ313) ได้รวบรวม ความรู้เกี่ยวกับ การสร้างแบบฟอร์มในรูปแบบต่างๆ อาทิ การสร้างฟอร์มแบบ Text flied หรือไม่ว่าจะเป็น การส่งค่าตัวแปรใน server การแสดงผลข้อมูล เป็นต้น ทางคณะผู้จัดทาหวังว่ารายงานเล่มนี้จักเป็น ประโยชน์ไม่มากก็น้อยต่อผู้ที่สนใจศึกษา รายงานเล่มนี้ผิดพลาดประการใด ทางคณะผู้จัดทาต้องขออภัยมา ณ ที่นี้ด้วย คณะผู้จัดทา หน้าที่ ก
- 3. การสร้างแบบฟอร์มและการส่งค่าตัวแปร สำรบัญ เรื่อง หน้า คานา ก สารบัญ ข การสร้างแบบฟอร์ม 1 สร้าง Application server 1 สร้างโปรเจ็ค Web application 2 การสร้างแบบฟอร์ม 5 o การสร้างฟอร์มแบบ Text field 8 o การสร้างฟอร์มแบบเช็คบ็อกซ์(Check Box) 8 o การสร้างฟอร์มแบบ Text Area 9 o การสร้างฟอร์มแบบ Radio Button 9 o การสร้างฟอร์มแบบ Select /Menu 10 o การสร้างกรอบสาหรับเลือกไฟล์ 11 o การสร้างปุ่มโต้ตอบ(Button) 11 การส่งค่าตัวแปร 12 อ่านค่าพารามิเตอร์ต่างๆ 12 แสดงรายละเอียดของค่าต่างๆ 12 การแสดงผลข้อมูล 13 การทดสอบการ Run 15 การแสดงผลลัพธ์ 16 อ้างอิง ค หน้าที่ ข
- 4. การสร้างแบบฟอร์มและการส่งค่าตัวแปร กำรสร้ำงแบบฟอร์ม กำรสร้ำงโปรเจ็ค Web Application เป็นการสร้างโปรเจ็ค web application และพัฒนาหน้าฟอร์มเพื่อให้ผู้ใช้ป้อนข้อมูล โดยพัฒนาด้วย ภาษา JSP ซึ่งจะทาหน้าที่เป็นส่วนของ In put ของโปรแกรม เพื่อให้ผู้ใช้ป้ อนข้อมูลผ่านทาง web browser ขั้นตอนการพัฒนาโปรแกรม - สร้าง Application server - สร้างโปรเจ็ค Web application - การสร้างแบบฟอร์ม 1.สร้าง Application server สร้างเพื่อให้ eclipse รู้ว่าจะนาโค้ดที่ compile แล้วไป Deploy ลงใน Application server ที่เป็น Tomcat เลือกที่ tab server คลิดขวาภายใน window แล้วเลือก new คลิก server เลือกชื่อ Apache คลิก Tomcat v6.0 server หรือ Tomcat v7.0 server และ Browse ไปยัง folder Tomcat ที่ติดตั้งไว้ หน้าที่ 1
- 5. การสร้างแบบฟอร์มและการส่งค่าตัวแปร 2.สร้าง Web Application Project สร้างโปรแกรม Web-Base Application โดยการสร้าง Project ใหม่ มีขั้นตอนดังนี้ 2.1 เลือกเมนู File คลิก new เลือก Project เลือกรูป Folder ชื่อ Web และเลือก Dynamic Web Project หน้าที่ 2
- 6. การสร้างแบบฟอร์มและการส่งค่าตัวแปร 2.2 ให้กาหนด Project Name = “………..” ส่วนการเก็บ File Eclipse จะใช้ Directory ที่ถามเมื่อเปิดขึ้นมาเป็น Default แต่ถ้าต้องการระบุก็สามารถคลิกเครื่องหมายออกแล้วทาการระบุ Directory ใหม่ จากนั้นกดปุ่ม Next หน้าที่ 3
- 7. การสร้างแบบฟอร์มและการส่งค่าตัวแปร 2.3 แสดง Folder ที่เก็บ source code และ Output Folder (ที่เก็บ Class File) คือ directory ที่ใส่ก่อน Run หน้าที่ 4
- 8. การสร้างแบบฟอร์มและการส่งค่าตัวแปร 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">สุกล</td> หน้าที่ 5
- 9. การสร้างแบบฟอร์มและการส่งค่าตัวแปร <td><input type="text" maxlength="30" placeholder=ใส่ นำนสกุล 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">หญิง<br></td> </tr> <tr> <td align="right">กีฬาที่ชอบ</td> <td> <input type="checkbox" name="sport" value="ฟุตบอล">ฟุตบอล <input type="checkbox" name="sport" value="บำล">บาส <input type="checkbox" name="sport" value="ยิงปืน">ยิง ปืน <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="กรุณำเลือกจังหวัด" >กรุณาเลือกจังหวัด</option> <option value="เชียงใหม่">เชียงใหม่ </option> <option value="ขอนแก่น">ขอนแก่น</option> <option value="สมุทรปรำกำร">สมุทรปราการ</option> <option value="กรุงเทพมหำนคร">กรุงเทพมหานคร</option> <option value="ลำพูน">ลาพูน</option> <option value=">เชียงรำย">เชียงราย</option> </select> <br> </td> </tr> <tr> หน้าที่ 6
- 10. การสร้างแบบฟอร์มและการส่งค่าตัวแปร <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> หน้าที่ 7
- 11. การสร้างแบบฟอร์มและการส่งค่าตัวแปร 3.1 การสร้างฟอร์มแบบ Text field วิธีใช้ ใช้สาหรับข้อมูลที่มีลักษณะเป็นข้อความสั้นๆ ในลักษณะเป็นตัวอักษรหรือตัวเลขก็ได้เช่น ชื่อ เลขบัตรประจาตัวประชาชน อีเมล์ เป็นต้น ตัวอย่ำง <input type="text" maxlength="13" id="idcard" name="idcard" placeholder=ใส่รหัสบัตรประจำตัว > คำอธิบำย สร้างชนิดของฟอร์ม(type)เป็น text คาสั่ง maxlength หมายถึง สามารถรับข้อมูลได้เพียง 13 ตัวเท่านั้น ตั้งชื่อตัวแปรว่า idcard เก็บค่าตัวแปรไว้ใน ID 3.2 การสร้างฟอร์มแบบเช็คบ็อกซ์(Check Box) วิธีใช้ ฟอร์มแบบเช็คบ็อกซ์ ใช้สาหรับเลือกคาตอบที่สามารถตอบได้หลายข้อ และสามารถคลิก ซ้าหรือยกเลิกคาตอบที่เลือกแล้วได้เชนให้ผู้ตอบเลือกประเภทบริการที่ต้องการรับข้อมูล ซึ่งสามารถเลือกได้มากกว่า1 รายการ ตัวอย่ำง <input type="checkbox" name="sport" value="ฟุตบอล">ฟุตบอล <input type="checkbox" name="sport" value="บำล">บาส <input type="checkbox" name="sport" value="ยิงปืน">ยิงปืน <input type="checkbox" name="sport" value="ว่ำยน้ำ">ว่ายน้า หน้าที่ 8
- 12. การสร้างแบบฟอร์มและการส่งค่าตัวแปร คำอธิบำย สร้างชนิดของฟอร์ม(type)เป็น checkbox ตั้งชื่อตัวแปรว่า sport กาหนดค่า value ตามแต่ที่ เราจะกาหนด 3.3 การสร้างฟอร์มแบบ Text Area วิธีใช้ ฟอร์มแบบ Text Area ใช้กรอกข้อความหลายบรรทัดใช้สาหรับสงข้อมูลเช่น กรอบแสดง ความคิดเห็น ส่งข้อความ E-mail รายการที่อยู่ซึ่งต้องพิมพ์มากกว่า 1 บรรทัด การสร้าง ฟอร์มมีขั้นตอนคล้ายกับการสร้างฟอร์ม Text Field ตัวอย่ำง <textarea placeholder=ใส่ที่อยู่ id=" address " name=" address "></textarea> คำอธิบำย สร้างชนิดของฟอร์มเป็น textarea ตั้งชื่อตัวแปรว่า address เก็บค่าตัวแปรไว้ใน ID คาสั่ง placeholder หมายถึง การระบุหมายเหตุที่ต้องการให้พิม เพิ่มลงในช่องว่าง 3.4 การสร้างฟอร์มแบบ Radio Button วิธีใช้ ฟอร์ม Radio Button เป็นฟอร์มในรูปแบบปุ่ม ที่ใช้สาหรับการตอบคาถามแบบเลือกตอบที่ ต้องการคาตอบเพียงข้อเดียวเท่านั้น ตัวอย่ำง <input type="radio" checked="checked" name="sex">ชาย <input type="radio" name="sex">หญิง หน้าที่ 9
- 13. การสร้างแบบฟอร์มและการส่งค่าตัวแปร คำอธิบำย สร้างชนิดของฟอร์ม(type)เป็น radio ตั้งชื่อตัวแปรว่า sex กาหนดค่า checked ตามแต่ที่เรา จะกาหนด 3.5 การสร้างฟอร์มแบบ Select /Menu วิธีใช้ Select /Menu เป็นฟอร์มจัดการหัวข้อรายการ มีไว้ให้ผู้กรอกรายการในฟอร์มทาง อินเทอร์เน็ตตอบคาถามหรือกรอกข้อมูลโดยมีรายการไว้ให้คลิกเลือกไม่ต้องพิมพ์ให้ เสียเวลาเพื่อสร้างความสะดวกในการตอบ และคาตอบที่ส่งไปมีค่าตรงกันกับกลุ่มคาตอบที่ เตรียมไว้ในฐานข้อมูล ทาให้สะดวกต่อการประมวลผล เช่นรายการ วัน วันที่ เดือน วุฒิ การศึกษา ตัวอย่ำง <select name="county"> <option value="กรุณำเลือกจังหวัด" >กรุณาเลือกจังหวัด</option> <option value="เชียงใหม่">เชียงใหม่ </option> <option value="ขอนแก่น">ขอนแก่น</option> <option value="สมุทรปรำกำร">สมุทรปราการ</option> <option value="กรุงเทพมหำนคร">กรุงเทพมหานคร</option> <option value="ลำพูน">ลาพูน</option> <option value="เชียงรำย">เชียงราย</option> คำอธิบำย สร้างชนิดของฟอร์มเป็น select ตั้งชื่อตัวแปรว่า county กาหนดค่า value ตามแต่ที่เราจะ กาหนด หน้าที่ 10
- 14. การสร้างแบบฟอร์มและการส่งค่าตัวแปร 3.6 การสร้างกรอบสาหรับเลือกไฟล์ วิธีใช้ กรอบสาหรับเลือกไฟล์ ใช้สาหรับการส่งข้อมูลเป็นไฟล์ เช่น การ Upload ไฟล์ไปยัง Server ของเว็บไซต์ โดยจะมีปุ่ม Browse สาหรับค้นหาไฟล์ เวลาใช้งานจริงต้องเขียนคาสั่ง สคริปต์เพิ่ม จึงจะใช้งานได้วิธีการสร้างกรอบเลือกไฟล์ ตัวอย่ำง <input type="file" id="pic" name="pic"> คำอธิบำย สร้างชนิดของฟอร์ม(type)เป็น file ตั้งชื่อตัวแปรว่า pic 3.7 การสร้างปุ่มโต้ตอบ(Button) วิธีใช้ การสร้างฟอร์มเพื่อการโต้ตอบ ส่งข้อมูลต่าง ๆ บนเว็บไซต์เมื่อดาเนินการป้ อนข้อมูลลง แบบฟอร์มต่าง ๆ ครบขั้นสุดท้ายเราต้องมีปุ่มคลิกเพื่อ ตอบตกลง หรือ ยกเลิก ได้แก่ปุ่ม Submit หรือ ไม่ยอมรับ ได้แก่ปุ่ม Reset เสมอเพื่อส่งข้อมูลไปยังโปรแกรมสคริปต์(CGI Script) ดาเนินการประมวลผล แสดงผลตามต้องการต่อไป ตัวอย่ำง <input type="submit" name="ok" value="ตกลง" "> <input type="reset" name="delete" value="ลบ"> คำอธิบำย สร้างชนิดของฟอร์ม(type)เป็น submit หรือ reset ตั้งชื่อตัวแปรว่า ok หรือ delete กาหนด ค่าที่จะแสดงในปุ่มแล้วแต่ที่เราจะกาหนด หน้าที่ 11
- 15. การสร้างแบบฟอร์มและการส่งค่าตัวแปร กำรส่งค่ำตัวแปร เป็นการพัฒนาโปรแกรมเพื่อแสดงรายละเอียดของค่าพารามิเตอร์ที่ผู้ใช้ป้ อนเข้ามาออกทาง โปรแกรม Web Browser และแสดงผลการออกทาง Web Browser กำรส่งค่ำตัวแปร เป็นโปรแกรมที่ถูกเรียกใช้โดย Form.jsp เมื่อผู้ใช้กดปุ่ม Add โปรแกรมนี้จะทาหน้าที่นา ค่าพารามิเตอร์ต่างๆที่ผู้ใช้ป้ อนมาแสดงผลโดยมีขั้นตอนการทางานดังนี้ - อ่านค่าพารามิเตอร์ต่างๆ - แสดงรายละเอียดของค่าต่างๆ 1.การอ่านค่าพารามิเตอร์ เว็บเพจ Form จะส่งข้อมูลของสมาชิกใหม่ผ่านมาทางพารามิเตอร์ต่างๆ ดังนี้ - Id card รหัสประจาตัวประชาชน - Name ชื่อสมาชิก - Last name นามสกุลสมาชิก - Sex เพศ - Sport กีฬา - Address ที่อยู่ - County จังหวัด - Tell เบอร์โทรศัพท์ - Email อีเมล์ - Pic รูป พารามิเตอร์ต่างๆเหล่านี้จะถูกส่งผ่านไปรโดคอล Http และในโปรแกรมเราสามารถที่จะอ่าน ค่าพารามิเตอร์เหล่านี้ได้จากออปเจ็ค request โดยเรียกใช้เมธอด getParameter() ซึ่งโปรแกรมส่วนนี้ จะมีคาสั่งต่างๆดังนี้ หน้าที่ 12
- 16. การสร้างแบบฟอร์มและการส่งค่าตัวแปร 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">สุกล</td> <td><%=lastname%><br></td> </tr> หน้าที่ 13
- 17. การสร้างแบบฟอร์มและการส่งค่าตัวแปร <tr> <td align="right">เพศ </td> <td><%if(sex.equals("sex")){%>ชาย<% }else{%>หญิง <%}%><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> หน้าที่ 14
- 18. การสร้างแบบฟอร์มและการส่งค่าตัวแปร 2.3 การทดสอบโปรแกรม 1. Runโปรแกรม โดยที่คลิกขวาที่โปรเจ็ค เลือก Run As คลิก Run on Server กดปุ่ม Finish หน้าที่ 15