lesson1 jsp
TRANSCRIPT
รายงาน เรอง การสรางแบบฟอรมและการสงคาตวแปร
เสนอ
อาจารยกองกาญจน ดลยไชย จดท าโดย
1.นายภาสกร อนทสทธ รหส 5304101373
2.นางสาวกนกนวล อนขาน รหส 5404101301
3.นายจกรกฤษณ โพธแปลง รหส 5404101313
4.นายประดษฐ นลรตน รหส 5404101348
5.นายอนสรณ สนนตะ รหส 5404101409
สาขาวทยาการคอมพวเตอร กลมเรยนท 1
รายงานเลมนเปนสวนหนงของหลกการเขยนโปรแกรมบนอนเตอรเนต(คพ313)
สาขาวชาวทยาการคอมพวเตอร
คณะวทยาศาสตร มหาวทยาลยแมโจ
การสรางแบบฟอรมและการสงคาตวแปร
ค ำน ำ
รายงานเลมนเปนสวนหนงของวชาหลกการเขยนโปรแกรมบนอนเตอรเนต(คพ313) ไดรวบรวม
ความรเกยวกบ การสรางแบบฟอรมในรปแบบตางๆ อาท การสรางฟอรมแบบ Text flied หรอไมวาจะเปน
การสงคาตวแปรใน server การแสดงผลขอมล เปนตน ทางคณะผจดท าหวงวารายงานเลมนจกเปน
ประโยชนไมมากกนอยตอผทสนใจศกษา
รายงานเลมนผดพลาดประการใด ทางคณะผจดท าตองขออภยมา ณ ทนดวย
คณะผจดท า
หนาท ก
การสรางแบบฟอรมและการสงคาตวแปร
สำรบญ
เรอง หนา
ค าน า ก
สารบญ ข
การสรางแบบฟอรม 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
อางอง ค
หนาท ข
การสรางแบบฟอรมและการสงคาตวแปร
กำรสรำงแบบฟอรม
กำรสรำงโปรเจค 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
การสรางแบบฟอรมและการสงคาตวแปร
2.สราง Web Application Project
สรางโปรแกรม Web-Base Application โดยการสราง Project ใหม มขนตอนดงน
2.1 เลอกเมน File คลก new เลอก Project
เลอกรป Folder ชอ Web และเลอก Dynamic Web Project
หนาท 2
การสรางแบบฟอรมและการสงคาตวแปร
2.2 ใหก าหนด Project Name = “………..”
สวนการเกบ File Eclipse จะใช Directory ทถามเมอเปดขนมาเปน Default
แตถาตองการระบกสามารถคลกเครองหมายออกแลวท าการระบ Directory ใหม
จากนนกดปม Next
หนาท 3
การสรางแบบฟอรมและการสงคาตวแปร
2.3 แสดง Folder ทเกบ source code และ Output Folder (ทเกบ Class File) คอ directory ทใสกอน Run
หนาท 4
การสรางแบบฟอรมและการสงคาตวแปร
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
การสรางแบบฟอรมและการสงคาตวแปร
<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
การสรางแบบฟอรมและการสงคาตวแปร
<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
การสรางแบบฟอรมและการสงคาตวแปร
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
การสรางแบบฟอรมและการสงคาตวแปร
ค ำอธบำย สรางชนดของฟอรม(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
การสรางแบบฟอรมและการสงคาตวแปร
ค ำอธบำย สรางชนดของฟอรม(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
การสรางแบบฟอรมและการสงคาตวแปร
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
การสรางแบบฟอรมและการสงคาตวแปร
กำรสงคำตวแปร
เปนการพฒนาโปรแกรมเพอแสดงรายละเอยดของคาพารามเตอรทผใชปอนเขามาออกทาง
โปรแกรม 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
การสรางแบบฟอรมและการสงคาตวแปร
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
การสรางแบบฟอรมและการสงคาตวแปร
<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
การสรางแบบฟอรมและการสงคาตวแปร
2.3 การทดสอบโปรแกรม
1. Runโปรแกรม โดยทคลกขวาทโปรเจค
เลอก Run As คลก Run on Server กดปม Finish
หนาท 15
การสรางแบบฟอรมและการสงคาตวแปร
ผลลพธทได
หนาท 16
การสรางแบบฟอรมและการสงคาตวแปร
อำงอง
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
หนาท ค