sec.1 กลุ่ม 1...
DESCRIPTION
TRANSCRIPT
รายงานเร��อง การสร างแบบฟอร�มและการส�ง
ค่�าตั�วแปร
เสนอ
อาจารย�ก�องกาญจน� ดุ�ลยไชย
จ�ดุทำ"าโดุย
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.2 ใหั ก"าหันดุ Project Name = “………..”
ส�วนการเก3บ File Eclipse จะใช Directory ทำ/�ถามเม��อเป>ดุข20นมาเป1น Default
แตั�ถ าตั องการระบ�ก3สามารถค่ล%กเค่ร��องหัมายออกแล วทำ"าการ
หัน าทำ/� 3
การสร างแบบฟอร�มและการส�งค่�าตั�วแปร
ระบ� Directory ใหัม� จากน�0นกดุป�:ม Next
การสร างแบบฟอร�มและการส�งค่�าตั�วแปร
2.3 แสดุง Folder ทำ/�เก3บ source code และ Output Folder
(ทำ/�เก3บ Class File) ค่�อ directory ทำ/�ใส�ก�อน Run
หัน าทำ/� 4
การสร างแบบฟอร�มและการส�งค่�าตั�วแปร
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>
หัน าทำ/� 5
การสร างแบบฟอร�มและการส�งค่�าตั�วแปร
<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>
หัน าทำ/� 6
การสร างแบบฟอร�มและการส�งค่�าตั�วแปร
<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>
หัน าทำ/� 7
การสร างแบบฟอร�มและการส�งค่�าตั�วแปร
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)
หัน าทำ/� 8
การสร างแบบฟอร�มและการส�งค่�าตั�วแปร
วิ�ธี�ใช้� ฟอร�มแบบเช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
หัน าทำ/� 9
การสร างแบบฟอร�มและการส�งค่�าตั�วแปร
ตั�วิอย่ �ง
<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 ตัามแตั�ทำ/�เราจะก"าหันดุ
หัน าทำ/� 10
การสร างแบบฟอร�มและการส�งค่�าตั�วแปร
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 การสร างกรอบส"าหัร�บเล�อกไฟล�
หัน าทำ/� 11
การสร างแบบฟอร�มและการส�งค่�าตั�วแปร
วิ�ธี�ใช้� กรอบส"าหัร�บเล�อกไฟล� ใช ส"าหัร�บการส�งข อม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 ช��อสมาช%ก
หัน าทำ/� 12
การสร างแบบฟอร�มและการส�งค่�าตั�วแปร
- 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
หัน าทำ/� 13
การสร างแบบฟอร�มและการส�งค่�าตั�วแปร
ตั�วอย�าง 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>
หัน าทำ/� 14
การสร างแบบฟอร�มและการส�งค่�าตั�วแปร
<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
หัน าทำ/� 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