บทที่1

รายงานเร��อง การสร างแบบฟอร�มและการส�ง

ค่�าตั�วแปร

เสนอ

อาจารย�ก�องกาญจน� ดุ�ลยไชย

จ�ดุทำ"าโดุย

1.นายภาสกร อ%นทำส%ทำธิ์%' รหั�ส 5304101373

2.นางสาวกนกนวล อ%นขาน รหั�ส 5404101301

3.นายจ�กรกฤษณ์� โพธิ์%'แปลง รหั�ส 5404101313

4.นายประดุ%ษฐิ์%' น%ลร�ตัน� รหั�ส 5404101348

5.นายอน�สรณ์� ส�น�นตัะ รหั�ส 5404101409

สาขาว%ทำยาการค่อมพ%วเตัอร� กล��มเร/ยนทำ/� 1

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

รายงานเล�มน/0เป1นส�วนหัน2�งของหัล�กการเข/ยนโปรแกรมบนอ%นเตัอร�เน3ตั(ค่พ 313)

สาขาว%ชาว%ทำยาการค่อมพ%วเตัอร�

ค่ณ์ะว%ทำยาศาสตัร� มหัาว%ทำยาล�ยแม�โจ

คำ��นำ��

รายงานเล�มน/0เป1นส�วนหัน2�งของว%ชาหัล�กการเข/ยนโปรแกรมบนอ%นเตัอร�เน3ตั(ค่พ 313) ไดุ รวบรวมค่วามร5 เก/�ยวก�บ การสร างแบบฟอร�มในร5ปแบบตั�างๆ อาทำ% การสร างฟอร�มแบบ Text flied หัร�อไม�ว�าจะเป1นการส�งค่�าตั�วแปรใน server การแสดุงผลข อม5ล เป1นตั น ทำางค่ณ์ะผ5 จ�ดุทำ"าหัว�งว�ารายงานเล�มน/0จ�กเป1นประโยชน�ไม�มากก3น อยตั�อผ5 ทำ/�สนใจศ2กษา

รายงานเล�มน/0ผ%ดุพลาดุประการใดุ ทำางค่ณ์ะผ5 จ�ดุทำ"าตั องขออภ�ยมา ณ์ ทำ/�น/0ดุ วย

ค่ณ์ะผ5 จ�ดุทำ"า

หัน าทำ/� ก


ส�รบั�ญ

เร��อง หัน า

ค่"าน"า ก

สารบ�ญ ข

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

สร าง Application server 1

สร างโปรเจ3ค่ Web application 2

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

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

o การสร างฟอร�มแบบเช3ค่บ3อกซ์�(Check Box) 8

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

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

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

o การสร างกรอบส"าหัร�บเล�อกไฟล� 11

o การสร างป�:มโตั ตัอบ(Button) 11

หัน าทำ/� ข


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

อ�านค่�าพาราม%เตัอร�ตั�างๆ 12

แสดุงรายละเอ/ยดุของค่�าตั�างๆ 12

การแสดุงผลข อม5ล 13

การทำดุสอบการ Run 15

การแสดุงผลล�พธิ์� 16

อ างอ%ง ค่

ก�รสร��งแบับัฟอร�ม

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

เป1นการสร างโปรเจ3ค่ web application และพ�ฒนาหัน าฟอร�มเพ��อใหั ผ5 ใช ป<อนข อม5ล โดุยพ�ฒนาดุ วยภาษา JSP ซ์2�งจะทำ"าหัน าทำ/�เป1นส�วนของ In put ของโปรแกรม เพ��อใหั ผ5 ใช ป<อนข อม5ลผ�านทำาง web

browser

ข�0นตัอนการพ�ฒนาโปรแกรม

- สร าง Application server

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

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

1. สร าง Application server

สร างเพ��อใหั eclipse ร5 ว�าจะน"าโค่ ดุทำ/� compile แล วไป Deploy

ลงใน Application server ทำ/�เป1น Tomcat เล�อกทำ/� tab server

หัน าทำ/� 1


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

และ Browse ไปย�ง folder Tomcat ทำ/�ตั%ดุตั�0งไว

2. สร าง Web Application Project

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

ใหัม� ม/ข� 0นตัอนดุ�งน/0

2.1 เล�อกเมน5 File ค่ล%ก new เล�อก Project

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

Project



2.2 ใหั ก"าหันดุ Project Name = “………..”

ส�วนการเก3บ File Eclipse จะใช Directory ทำ/�ถามเม��อเป>ดุข20นมาเป1น Default

แตั�ถ าตั องการระบ�ก3สามารถค่ล%กเค่ร��องหัมายออกแล วทำ"าการ



ระบ� Directory ใหัม� จากน�0นกดุป�:ม Next


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

(ทำ/�เก3บ Class File) ค่�อ directory ทำ/�ใส�ก�อน Run



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

โปรแกรม Form.jsp เป1นเว3ปเพจทำ/�ใช ส"าหัร�บแสดุงฟอร�มป<อนข อม5ลผ5 ใช แล วน"าไปบ�นทำ2กลงฐิ์านข อม5ลโดุยม/ร5ปแบบหัน าจอทำ/�ตั องการสร าง

เข/ยน source code จะไดุ ดุ�งน/0

<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> <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="ว�ายน"0า">ว�ายน"0า<br></td> </tr> <tr> <td align="right" >ทำ/�อย5� </td> <td> <textarea placeholder=ใส�ทำ/�อย5� 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="ล"าพ5น">ล"าพ5น</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">ร5ปประจ"าตั�ว </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

วิ�ธี�ใช้� ใช ส"าหัร�บข อม5ลทำ/�ม/ล�กษณ์ะเป1นข อค่วามส�0นๆ ในล�กษณ์ะเป1นตั�วอ�กษรหัร�อตั�วเลขก3ไดุ เช�น ช��อ เลขบ�ตัรประจ"าตั�วประชาชน อ/เมล� เป1นตั น

ตั�วิอย่ �ง

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

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

คำ��อธี�บั�ย่ สร างชน%ดุของฟอร�ม(type)เป1น text ค่"าส��ง maxlength

หัมายถ2ง สามารถร�บข อม5ลไดุ เพ/ยง 13 ตั�วเทำ�าน�0น ตั�0งช��อตั�วแปรว�า idcard เก3บค่�าตั�วแปรไว ใน ID

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



วิ�ธี�ใช้� ฟอร�มแบบเช3ค่บ3อกซ์� ใช ส"าหัร�บเล�อกค่"าตัอบทำ/�สามารถตัอบไดุ หัลายข อ และสามารถค่ล%กซ์"0าหัร�อยกเล%กค่"าตัอบทำ/�เล�อกแล วไดุ เชนใหั ผ5 ตัอบเล�อกประเภทำบร%การทำ/�ตั องการร�บข อม5ลซ์2�งสามารถเล�อกไดุ มากกว�า 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="ว�ายน"0า">ว�ายน"0า

คำ��อธี�บั�ย่ สร างชน%ดุของฟอร�ม(type)เป1น checkbox ตั�0งช��อตั�วแปรว�า sport ก"าหันดุค่�า value ตัามแตั�ทำ/�เราจะก"าหันดุ

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

วิ�ธี�ใช้� ฟอร�มแบบ Text Area ใช กรอกข อค่วามหัลายบรรทำ�ดุใช ส"าหัร�บสงข อม5ลเช�น กรอบแสดุงค่วามค่%ดุเหั3น ส�งข อค่วาม E-

mail รายการทำ/�อย5�ซ์2�งตั องพ%มพ�มากกว�า 1 บรรทำ�ดุ การสร างฟอร�มม/ข� 0นตัอนค่ล ายก�บการสร างฟอร�ม Text Field




<textarea placeholder=ใส�ทำ/�อย5� id=" address "

name=" address "></textarea>

คำ��อธี�บั�ย่ สร างชน%ดุของฟอร�มเป1น textarea ตั�0งช��อตั�วแปรว�า address เก3บค่�าตั�วแปรไว ใน ID ค่"าส��ง placeholder

หัมายถ2ง การระบ�หัมายเหัตั�ทำ/�ตั องการใหั พ%ม เพ%�มลงในช�องว�าง

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

วิ�ธี�ใช้� ฟอร�ม Radio Button เป1นฟอร�มในร5ปแบบป�:ม ทำ/�ใช ส"าหัร�บการตัอบค่"าถามแบบเล�อกตัอบทำ/�ตั องการค่"าตัอบเพ/ยงข อเดุ/ยวเทำ�าน�0น


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

name="sex">ชาย<input type="radio" name="sex">หัญ%ง

คำ��อธี�บั�ย่ สร างชน%ดุของฟอร�ม(type)เป1น radio ตั�0งช��อตั�วแปรว�า sex

ก"าหันดุค่�า checked ตัามแตั�ทำ/�เราจะก"าหันดุ



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

วิ�ธี�ใช้� Select /Menu เป1นฟอร�มจ�ดุการหั�วข อรายการ ม/ไว ใหั ผ5 กรอกรายการในฟอร�มทำางอ%นเทำอร�เน3ตัตัอบค่"าถามหัร�อกรอกข อม5ลโดุยม/รายการไว ใหั ค่ล%กเล�อกไม�ตั องพ%มพ�ใหั เส/ยเวลาเพ��อสร างค่วามสะดุวกในการตัอบ และค่"าตัอบทำ/�ส�งไปม/ค่�าตัรงก�นก�บกล��มค่"าตัอบทำ/�เตัร/ยมไว ในฐิ์านข อม5ล ทำ"าใหั สะดุวกตั�อการประมวลผล เช�นรายการ ว�น ว�นทำ/� เดุ�อน ว�ฒ%การศ2กษา


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

คำ��อธี�บั�ย่ สร างชน%ดุของฟอร�มเป1น select ตั�0งช��อตั�วแปรว�า county

ก"าหันดุค่�า value ตัามแตั�ทำ/�เราจะก"าหันดุ

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



วิ�ธี�ใช้� กรอบส"าหัร�บเล�อกไฟล� ใช ส"าหัร�บการส�งข อม5ลเป1นไฟล� เช�น การ Upload ไฟล�ไปย�ง Server ของเว3บไซ์ตั� โดุยจะม/ป�:ม Browse ส"าหัร�บค่ นหัาไฟล� เวลาใช งานจร%งตั องเข/ยนค่"าส��งสค่ร%ปตั�เพ%�ม จ2งจะใช งานไดุ ว%ธิ์/การสร างกรอบเล�อกไฟล�


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

คำ��อธี�บั�ย่ สร างชน%ดุของฟอร�ม(type)เป1น file ตั�0งช��อตั�วแปรว�า pic

3.7 การสร างป�:มโตั ตัอบ(Button)

วิ�ธี�ใช้� การสร างฟอร�มเพ��อการโตั ตัอบ ส�งข อม5ลตั�าง ๆ บนเว3บไซ์ตั� เม��อดุ"าเน%นการป<อนข อม5ลลงแบบฟอร�มตั�าง ๆ ค่รบข�0นส�ดุทำ ายเราตั องม/ป�:มค่ล%กเพ��อ ตัอบตักลง หัร�อ ยกเล%ก ไดุ แก�ป�:ม Submit หัร�อ ไม�ยอมร�บ ไดุ แก�ป�:ม Reset เสมอเพ��อส�งข อม5ลไปย�งโปรแกรมสค่ร%ปตั�(CGI Script) ดุ"าเน%นการประมวลผล แสดุงผลตัามตั องการตั�อไป


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


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

คำ��อธี�บั�ย่ สร างชน%ดุของฟอร�ม(type)เป1น submit หัร�อ reset ตั�0งช��อตั�วแปรว�า ok หัร�อ delete ก"าหันดุค่�าทำ/�จะแสดุงในป�:มแล วแตั�ทำ/�เราจะก"าหันดุ

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

เป1นการพ�ฒนาโปรแกรมเพ��อแสดุงรายละเอ/ยดุของค่�าพาราม%เตัอร�ทำ/�ผ5 ใช ป<อนเข ามาออกทำางโปรแกรม Web Browser และแสดุงผลการออกทำาง Web Browser

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

เป1นโปรแกรมทำ/�ถ5กเร/ยกใช โดุย Form.jsp เม��อผ5 ใช กดุป�:ม Add

โปรแกรมน/0จะทำ"าหัน าทำ/�น"าค่�าพาราม%เตัอร�ตั�างๆทำ/�ผ5 ใช ป<อนมาแสดุงผลโดุยม/ข� 0นตัอนการทำ"างานดุ�งน/0

- อ�านค่�าพาราม%เตัอร�ตั�างๆ- แสดุงรายละเอ/ยดุของค่�าตั�างๆ

1. การอ�านค่�าพาราม%เตัอร�

เว3บเพจ Form จะส�งข อม5ลของสมาช%กใหัม�ผ�านมาทำางพาราม%เตัอร�ตั�างๆ ดุ�งน/0

- Id card รหั�สประจ"าตั�วประชาชน- Name ช��อสมาช%ก



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

พาราม%เตัอร�ตั�างๆเหัล�าน/0จะถ5กส�งผ�านไปรโดุค่อล Http และในโปรแกรมเราสามารถทำ/�จะอ�านค่�าพาราม%เตัอร�เหัล�าน/0ไดุ จากออปเจ3ค่ request โดุยเร/ยกใช เมธิ์อดุ getParameter() ซ์2�งโปรแกรมส�วนน/0จะม/ค่"าส��งตั�างๆดุ�งน/0

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. การแสดุงผลข อม5ล

เป1นการแสดุงข อม5ลทำ/�ร �บมาจาก 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> <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" >ทำ/�อย5� </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 โปรแกรม โดุยทำ/�ค่ล%กขวาทำ/�โปรเจ3ค่เล�อก Run As ค่ล%ก Run on Server กดุป�:ม 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

Education

บทที่1