รายงาน เรอง การสรางแบบฟอรมและการสงคาตวแปร

เสนอ

อาจารยกองกาญจน ดลยไชย จดท าโดย

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

หนาท ค