1                                         Hand-on                                         Exercises                       ...
2สารบัญExercise 1 การสร้างโปรเจ็ค Web Application และไฟล์ HTML...............................................................
3     6.2.2 ขั้นตอนการทดสอบโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Session ....................................................
4  13.5 การกำหนด Page Navigation.............................................................................................
5             Exercise 1 การสร้างโปรเจ็ค Web Application และไฟล์ HTML         แบบฝึกหัดนี้จะเป็นการสร้างโปรเจ็ค Web Applic...
61.2    การสร้าง Web Application Project           สร้างโปรแกรม Web-Base Application โดยการสร้าง Project ใหม่ มีขั้นตอนดัง...
7                                           รูปที่ 1.2 การกำหนดชื่อ Project    3.   แสดง Folder ที่เก็บ source code และ Ou...
8    4.   แสดง Context root และ Content directory ดังรูปที่ 1.4 กด Finish                                     รูปที่ 1.4 แ...
9    1.   เลือกหน้าต่าง Project แล้วคลิ๊กขวาที่โหนด WebApp เลือก   New → HTML File ดังรูป 1.7                             ...
10    3.   เขียน source code ทำได้ 2 รูปแบบคือ         รูปแบบที่ 1 เขียนตาม Listing ที่ 1.1         Listing ที่ 1.1 โปรแกร...
11                   - คลิกเลือกพื้นที่ว่างส่วนบนของหน้าจอ เลือก Show และ Palette                                      รูป...
12    1. Deploy Web Project สู่ Web Application Server         โดยไปที่ Tab Server แล้ว Click ขวาที่ ชื่อ Tomcat v6.0 เลือ...
13                                     รูปที่ 1.14 การเลือก Web Application Server ที่จะใช้รัน    4.   จะได้ผลลัพธ์ดัง รูป...
14            Exercise 2 การเขียนโปรแกรม Java Servlet เพื่ออ่านค่าพารามิเตอร์เนื้อหาที่ต้องศึกษาก่อน การสร้างโปรเจ็ค Web A...
152.1.2    การแสดงรายละเอียดของค่าต่างๆ     โปรแกรม Servlet จะสามารถแสดงผลออกทาง Web Browser ได้โดยการเขียนโค้ด HTML     ภ...
162.2     ขั้นตอนการพัฒนาโปรแกรม CustomerServlet.java           เราสามารถที่จะพัฒนาโปรแกรม CustomerServlet.java ตามขั้นตอน...
17         โดยคลิกเลือกชื่อ CustomerServlet, กดปุ่ม Edit         แล้วเปลี่ยน URL Mapping เป็น addCustomer.do และกด Finish ...
18      5. Implement Code เพิ่มใน Method doGet(),doPost()         เพื่อส่งต่อ Http-Request ให้ Method processRequest()    ...
19    2.   ทดลองป้อนข้อมูล ดังรูป 2.5                                 รูปที่ 2.5 กรอกข้อมูลทดสอบ Servlet ผ่านหน้า addCusto...
202.4    การปรับปรุงโปรแกรมเพื่อให้เรียกไฟล์ addCustomer.html เมื่อเริ่มต้น และ ให้แสดงผลภาษาไทยถูกต้อง         เราสามารถท...
21                          รูปที่ 2.9 ทดสอบรันหน้า addCustomer.html เพื่อเรียกใช้ CustomerServlet.java         จะเห็นว่า ...
22ก็จะทำให้ source code ที่ถูกแก้ไขไปนั้น ถูกใช้งาน                                     รูปที่ 2.12 Apache Tomcat ขณะพร้อม...
23                               Exercise 3 โปรแกรมเว็บสำหรับการทำโพลเนื้อหาที่ต้องศึกษาก่อน การเขียนโปรแกรม Java Servlet ...
243.2.1    กำหนดตัวแปร counter และ lang        ตัวแปร count เป็นอะเรย์เพื่อที่จะเก็บจำนวนผลโหวตของภาษาคอมพิวเตอร์แต่ละภาษา...
253.3     ขั้นตอนการพัฒนาโปรเจ็ค Voter           เราสามารถที่จะพัฒนาแบบฝึกหัดนี้ที่ชื่อโปรเจ็ค Voter ตามขั้นตอนดังนี้     ...
26    2.   กำหนด HTML File Name = vote แล้วกด Finish         รูปที่ 3.3 การสร้าง HTML Page ชื่อ vote.html    3.   ในหน้าต่...
27    4.   เลือกหน้าต่าง Projects แล้วคลิ๊กขวาที่โหนด Voter เลือกคำสั่ง New > Servlet         กำหนด Package เป็น controlle...
28         ในหน้าต่าง Editor เขียน Source code ของ VoteServlet.java ดัง Listing ที่ 3.2         Listing ที 3.2 โปรแกรม Vot...
29    5.   ทำการ Deploy Web Project ที่ Apache Tomcat         ไปที่ Tab Server ด้านล่าง คลิ๊กขวา ที่ Tomcat v6.0 Server แล...
303.4     การปรับปรุงโปรแกรม VoteServlet.java        ให้ Set Welcome Page เมื่อเรียก http://localhost:8080/Voter/ ให้ไปที่...
31สำหรับโปรแกรม VoteServlet.java ที่ปรับปรุงใหม่จะมี source code ดัง Listing ที่ 3.3Listing ที่ 3.3 โปรแกรม VoteServlet.ja...
32                        Exercise 4 การเชื่อมต่อกับ MySQL Databaseเนื้อหาที่ต้องศึกษาก่อน -        แบบฝึกหัดนี้เป็นการเริ...
334.2  การสร้างตาราง books         ในที่นี้จะกำหนดให้สร้าง Table ที่ชื่อ books โดยให้อยู่ภายใต้ Schema ที่ชื่อ test โดย Ta...
34    2.   หรือใช้คำสั่ง SQL Statement ก็ได้ โดยนำไปใส่ที่หน้าต่าง Query1 แล้ว กด icon สายฟ้าสีเหลืองเพื่อรัน         CREA...
354.3    การใช้คำสั่ง SQL ใน MySQL WorkBench          ภายหลังจากที่มีการสร้าง Table ที่ชื่อ books เราสามารถใช้คำสั่ง SQL เ...
36    2.   เราสามารถที่จะดูข้อมูลที่ป้อนเข้าไปได้         โดยเลือก tab Overview → จาก Table ที่ชื่อ books เลือก Select Row...
37                   Exercise 5 การพัฒนาโปรแกรมเว็บ เพื่อติดต่อกับฐานข้อมูลเนื้อหาที่ต้องศึกษาก่อน การใช้งาน Tool ที่ติดต่...
385.2  การสร้าง Web Application Project         เลือกเมนู File → New Project เลือก Dynamic Web Application         กำหนดชื...
39                              รูปที่ 5.3 การใช้งาน Palette สำหรับการสร้างหน้าจอ HTMLListing ที่ 5.1 โปรแกรม addBook.html...
405.4     การพัฒนาโปรแกรม thankyou.html        โปรแกรม Thankyou.html เป็นเว็บเพจที่ใช้แสดงให้เห็นว่าข้อมูลได้ถูกเพิ่มเข้าไ...
415.5.2    การเชื่อมต่อกับฐานข้อมูล         การดึงข้อมูลระหว่าง Application กับ MySQL Database มีขั้นตอนดังนี้            ...
42         2. ทำการ Mapping Data source ที่ Application ต้องการเชื่อมต่อ                   โดยแก้ไข Web Deployment Descrip...
43         เมื่อเชื่อมต่อฐานข้อมูลและได้ออปเจ็คชนิด Connection มาแล้ว เราสามารถที่จะเรียกใช้คำสั่ง SQL ได้ ซึ่ง         ใน...
445.6    ขั้นตอนการพัฒนาโปรแกรม AddBookServlet.java      1.   คลิ๊กขวาที่โหนด WebBaseDB จากนั้นเลือกคำสั่ง New → Servlet  ...
45                   try {                             String isbn = request.getParameter("isbn");                        ...
465.7    ทดสอบโปรแกรม      1.   ทำการ Deploy โปรแกรม WebBaseDB ซึ่งใน Eclipse ทำโดย Click ขวาที่ Add and Remove      2.   ...
47    4.   เข้าไปดูข้อมูล โดยใช้ MySQLWorkbench เลือกคำสั่ง Select Rows -... จาก           Table ที่ชื่อ books       ดังรู...
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
webprogramming eclipse-jsp
Upcoming SlideShare
Loading in …5
×

webprogramming eclipse-jsp

2,787 views

Published on

ต้องขอบคุณท่านเจ้าของเอกสารด้วยครับ ผมนำมาเผยแพร่ต่อต้องขออภัยอย่างสูงด้วยครับผม

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,787
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
149
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

webprogramming eclipse-jsp

  1. 1. 1 Hand-on Exercises การเขียนโปรแกรมเว็บ Java Servlet / JSP โดยใช้ Eclipse and TomCat Assoc.Prof.Dr.Thanachart Numnonda Software Park Thailand and Asst Prof.Thanisa Kruawaisayawan King Mongkuts Institute of Technology Ladkrabang April 2011การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  2. 2. 2สารบัญExercise 1 การสร้างโปรเจ็ค Web Application และไฟล์ HTML..........................................................................5 1.สร้าง Application Server ................................................................................................................. 5 2.สร้างโปรเจ็ค Web Application............................................................................................................. 5 3.พัฒนาโปรแกรม addCustomer.html ...................................................................................................... 5 1.1 สร้าง Application Server............................................................................................................... 5 1.2 การสร้าง Web Application Project.................................................................................................. 6 1.3 การพัฒนาโปรแกรม addCustomer.html................................................................................................ 8 1.4 การทดสอบโปรแกรม...........................................................................................................................12Exercise 2 การเขียนโปรแกรม Java Servlet เพื่ออ่านค่าพารามิเตอร์..........................................................................14 2.1 การพัฒนาโปรแกรม CustomerServlet.java......................................................................................... 14 2.1.1 การอ่านค่าพารามิเตอร์จาก addCustomer.html ............................................................................... 14 2.1.2 การแสดงรายละเอียดของค่าต่างๆ.......................................................................................................15 2.2 ขั้นตอนการพัฒนาโปรแกรม CustomerServlet.java ................................................................................16 2.3 การทดสอบโปรแกรม...........................................................................................................................18 2.4 การปรับปรุงโปรแกรมเพื่อให้เรียกไฟล์ addCustomer.html เมื่อเริ่มต้น และ ให้แสดงผลภาษาไทยถูกต้อง............................20Exercise 3 โปรแกรมเว็บสำหรับการทำโพล......................................................................................................... 23 3.1 โปรแกรม vote.html....................................................................................................................... 23 3.2 การพัฒนาโปรแกรม VoteServlet.java................................................................................................. 23 3.2.1 กำหนดตัวแปร counter และ lang ............................................................................................... 24 3.2.2 อ่านค่าพารามิเตอร์ต่างๆที่ส่งมาจาก vote.html และทำการประมวลผล............................................................ 24 3.2.3 การแสดงผลการโหวต...................................................................................................................24 3.3 ขั้นตอนการพัฒนาโปรเจ็ค Voter ............................................................................................................ 25 3.4 การปรับปรุงโปรแกรม VoteServlet.java............................................................................................... 30 3.4.1 กำหนดตัวแปร voters................................................................................................................30 3.4.2 การอ่านหมายเลขไอพีของผู้ใช้.......................................................................................................... 30Exercise 4 การเชื่อมต่อกับ MySQL Database............................................................................................. 32 4.1 การจัดการ Table เปิดโปรแกรม MySQL Workbench....................................................................................................... 32 4.2 การสร้างตาราง books....................................................................................................................... 33 4.3 การใช้คำสั่ง SQL ใน MySQL WorkBench........................................................................................35Exercise 5 การพัฒนาโปรแกรมเว็บ เพื่อติดต่อกับฐานข้อมูล........................................................................................ 37 5.1 การ Config Apache Tomcat ให้สามารถใช้งาน JDBC Driver...............................................................37 5.2 การสร้าง Web Application Project................................................................................................ 38 5.3 การพัฒนาโปรแกรม addBook.html.....................................................................................................38 5.4 การพัฒนาโปรแกรม thankyou.html.................................................................................................... 40 5.5 การพัฒนาโปรแกรม AddBookServlet.java......................................................................................... 40 5.5.1 การอ่านค่าพารามิเตอร์จาก addBook.html ......................................................................................40 5.5.2 การเชื่อมต่อกับฐานข้อมูล...............................................................................................................41 5.5.3 เพิ่มรายชื่อหนังสือใหม่ลงในฐานข้อมูล ................................................................................................ 43 5.5.4 การเรียกเว็บเพจ thankyou.html ................................................................................................ 43 5.6 ขั้นตอนการพัฒนาโปรแกรม AddBookServlet.java ................................................................................44 5.7 ทดสอบโปรแกรม...............................................................................................................................46Exercise 6 โปรแกรมเว็บเพื่อสาธิตขอบเขตของออปเจ็ค............................................................................................ 48 6.1 การพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request ..................................................................... 48 6.1.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request .....................................................50 6.1.2 ขั้นตอนการทดสอบโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request.................................................... 51 6.2 การพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Session ......................................................................52 6.2.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Session .....................................................54การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  3. 3. 3 6.2.2 ขั้นตอนการทดสอบโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Session ....................................................54 6.3 การพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Application................................................................ 55 6.3.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Application................................................................. 57 6.3.2 ขั้นตอนการทดสอบโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Application.............................................. 57Exercise 7 การพัฒนา WebBase DB โดยคลาสประเภท Web Listener............................................................... 58 7.1 การพัฒนาโปรแกรม Init.java.............................................................................................................. 58 7.2 การปรับปรุงโปรแกรม AddBookServlet.java ......................................................................................61 7.3 ทดสอบโปรแกรม...............................................................................................................................63Exercise 8 การพัฒนาโปรแกรม Servlet Filter ...............................................................................................64 8.1 การพัฒนาโปรแกรม Servlet Filter.......................................................................................................64 8.2 การเขียนหน้า Login......................................................................................................................... 65 8.3 การเขียน Servlet Filter.................................................................................................................. 67 8.4 การเขียนโปรแกรม ShowServlet ........................................................................................................70 8.5 ขั้นตอนการทดสอบโปรแกรม ..................................................................................................................72Exercise 9 การเขียนโปรแกรม JSP เพื่อแสดงผลลัพธ์.............................................................................................73 9.1 การพัฒนาโปรแกรม hello.jsp............................................................................................................. 73 9.2 การพัฒนาโปรแกรม viewBook.jsp.....................................................................................................74 9.2.1 การกำหนด Tag Library.......................................................................................................... 74 9.2.2 การกำหนด Datasource........................................................................................................... 74 9.2.3 การใช้คำสั่ง c:forEach เพื่อแสดงผล .............................................................................................. 75Exercise 10 การพัฒนาโปรแกรมเว็บ Online Book Store.................................................................................77 10.1 การพัฒนาโปรแกรม selectBooks.jsp.................................................................................................77 10.2 การพัฒนาโปรแกรม Book.java......................................................................................................... 81 10.3 การพัฒนาโปรแกรม Cart.java........................................................................................................... 84 10.4 การพัฒนาโปรแกรม ProcessSelection.java.......................................................................................85 10.5 การพัฒนาโปรแกรม Init.java ........................................................................................................... 87 10.6 การพัฒนาโปรแกรม viewCart.jsp..................................................................................................... 88 10.7 ขั้นตอนการทดสอบโปรแกรม ................................................................................................................89Exercise 11 การสร้าง Custom Tags สำหรับโปรแกรม JSP............................................................................... 90 11.1 การพัฒนาโปรแกรม hello.jsp............................................................................................................ 90 11.2 การพัฒนาโปรแกรม helloTag.jsp...................................................................................................... 92 11.2.1 สร้างไฟล์ Java ClassTag Handler.........................................................................................93 11.2.2 สร้าง Tag Library Descriptor............................................................................................. 95 11.2.3 เขียนโปรแกรม helloTag.jsp.................................................................................................... 97 11.3 การพัฒนาโปรแกรม helloJSTL.jsp................................................................................................... 98 11.4 การพัฒนาโปรแกรม helloTagFile.jsp................................................................................................ 99 11.4.1 สร้าง Tag File.....................................................................................................................99 11.4.2 เขียนโปรแกรม helloTagFile.jsp............................................................................................101Exercise 12 การพัฒนาโปรแกรมเว็บโดยใช้ Strut Framework ..........................................................................102 12.1 การสร้างโปรเจ็ค StrutsDBApp ในรูปแบบ Struts Frameworks...........................................................103 12.2 การพัฒนาโปรแกรม addBook.jsp................................................................................................... 104 12.3 การพัฒนาโปรแกรม BookFormBean.java และ AddBookAction......................................................106 12.4 การพัฒนาโปรแกรม AddBookAction.java......................................................................................109 12.5 การพัฒนาโปรแกรม Init.java และ Thankyou.html [View]................................................................ 111 12.6 การพัฒนาไฟล์ struts-config.xml [Controller].............................................................................. 111 12.7 การทดสอบโปรแกรม.......................................................................................................................112Exercise 13 การพัฒนาโปรแกรมเว็บโดยใช้ JSF Framework.............................................................................114 13.1 สร้างโปรเจ็ค JSFDBApp............................................................................................................. 114 13.2 การพัฒนาโปรแกรม JSF Managed Bean.........................................................................................116 13.3 สร้างหน้าจอรับ Input โดยสร้าง addBook.jsp และ พัฒนาส่วนตรวจสอบ(Validation ข้อมูล).............................118 13.4 สร้าง thankyou.html, error.html.............................................................................................. 119การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  4. 4. 4 13.5 การกำหนด Page Navigation...................................................................................................... 119 13.6 การทดสอบโปรแกรม.......................................................................................................................122Exercise 14 การ Authentication โดยใช้ Tomcat .....................................................................................123 14.1 สร้าง Web Application Project................................................................................................ 123 14.2 เพิ่ม User ของ Tomcat Web Server........................................................................................... 123 14.3 การ Config ไฟล์ web.xml ของ Web Application ที่ต้องการใช้ Tomcat user .....................................124 14.4 การทดสอบโปรแกรมแบบ Basic Authenticate...................................................................................126 14.5 การปรับปรุงโปรแกรมเพื่อให้ใช้ Login Form........................................................................................ 127 14.6 การทดสอบโปรแกรม แบบ Form Authenticate.................................................................................. 128 14.7 การปรับปรุงโปรแกรม เพื่อใช้ Authenticate โดยอ่านจาก Database MySQL.............................................. 128 14.8 การทดสอบโปรแกรม แบบ Database Authenticate............................................................................ 129การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  5. 5. 5 Exercise 1 การสร้างโปรเจ็ค Web Application และไฟล์ HTML แบบฝึกหัดนี้จะเป็นการสร้างโปรเจ็ค Web Application และพัฒนาหน้าเว็บเพจเพื่อให้ผู้ใช้ป้อนข้อมูลของลูกค้า โดยพัฒนาด้วยภาษา HTML ซึ่งจะทำหน้าเป็นส่วนอินพุตของโปรแกรมเพื่อให้ผู้ใช้ป้อนข้อมูลผ่าน WebBrowserขั้นตอนในการพัฒนาโปรแกรม 1. สร้าง Application Server 2. สร้างโปรเจ็ค Web Application 3. พัฒนาโปรแกรม addCustomer.html1.1 สร้าง Application Server สร้างเพื่อให้ Eclipse รู้ว่าจะนำ code ที่compile แล้ว ไป Deploy ลง Application Server ที่เป็น Tomcat เลือกที่ TAB Servers คลิกขวาภายใน Window แล้วเลือก New → Server - เลือกชื่อ Apache → Tomcat v6.0 Server และ Browse ไปยัง folder Tomcat ที่ติดตั้งไว้ รูปที่ 1.1 การ Config Eclipse เพื่อให้รู้จัก TOMCAT Application Serverการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  6. 6. 61.2 การสร้าง Web Application Project สร้างโปรแกรม Web-Base Application โดยการสร้าง Project ใหม่ มีขั้นตอนดังนี้ 1. เลือกเมนู File → New → Project เลือกรูป Folder ชื่อ Web และเลือก Dynamic Web Project ดังรูปที่ 1.2 รูปที่ 1.1 การสร้างโปรเจ็ค Web Application 2. ให้กำหนด Project Name = WebApp ส่วนการเก็บ File Eclipse จะใช้ Directory ที่ถามเมื่อครั้งเปิดขึ้นมาเป็น Default แต่ ถ้าต้องการระบุ ก็สามารถคลิกเครื่องหมายออก (Uncheck) แล้วทำการระบุ Directory ใหม่ได้ จากนั้นกด ปุ่ม Next ดังรูปที่ 1.2การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  7. 7. 7 รูปที่ 1.2 การกำหนดชื่อ Project 3. แสดง Folder ที่เก็บ source code และ Output folder (ที่เก็บ Class file) คือ [directory ที่ใส่ก่อนรัน Eclipse]src และ [directory ที่ใส่ก่อนรัน Eclipse]buildclasses ดังรูปที่ 1.3 จากนั้นกด ปุ่ม Next รูปที่ 1.3 แสดงที่เก็บ source code และ Output directoryการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  8. 8. 8 4. แสดง Context root และ Content directory ดังรูปที่ 1.4 กด Finish รูปที่ 1.4 แสดงชื่อ Context root และ Content directory1.3 การพัฒนาโปรแกรม addCustomer.html โปรแกรม addCustomer.html เป็นเว็บเพจที่ใช้แสดงฟอร์มสำหรับป้อนข้อมูลลูกค้าแล้ว นำไปบันทึกลงฐานข้อมูล customers โดยมีรูปแบบหน้าจอ HTML ที่ต้องสร้าง ดังรูปที่ 1.5(ส่วนของโปรแกรมจะสร้างในแบบฝึกหัดถัดไป) รูปที่ 1.5 หน้าเว็บเพจ addCustomer.html ขั้นตอนการพัฒนาโปรแกรม addCustomer.htmlการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  9. 9. 9 1. เลือกหน้าต่าง Project แล้วคลิ๊กขวาที่โหนด WebApp เลือก New → HTML File ดังรูป 1.7 รูปที่ 1.6 การ new File HTML 2. กำหนด HTML File Name: เป็น addCustomer แล้วกด Finish ดังรูป 1.8 รูปที่ 1.7 การสร้างและตั้งชื่อ File HTMLการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  10. 10. 10 3. เขียน source code ทำได้ 2 รูปแบบคือ รูปแบบที่ 1 เขียนตาม Listing ที่ 1.1 Listing ที่ 1.1 โปรแกรม addCustomer.html <html><head><title> Add Customer</title></head> <body><H1> Add a new customer profile</H1> <form action="addCustomer.do" method="POST"> Customer ID : <input name="id" /> <br> Name: <input name="name" /> <br> Address: <textarea name="addr" rows="4" cols="20"></textarea> <br> Mobile: <input name="mobile" size="9" /> <br> Fax: <input name="fax" size="9" /> <br> E-mail: <input name="email" size="25" /> <br><br> <input type="submit" value="Add" /> </form> </body> </html> รูปแบบที่ 2 ให้เขียนหน้าจอได้ง่ายขึ้นสามารถที่จะลาก Icon ประเภท HTML Forms ที่อยู่ในหน้าต่าง Palette มาใส่ที่หน้าจอ Design ได้โดยไม่ต้องเขียน HTML ดังนี้ - ปิดหน้าจอ HTML เดิม - เลือกหน้าต่าง Project แล้วคลิ๊กขวาที่ File addCustomer.html - เลือก Open With และเลือกที่ Web Page Editor ดังรูป 1.9 รูปที่ 1.8 การเลือกเปิด HTML กับ Editor ที่เป็น Design viewการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  11. 11. 11 - คลิกเลือกพื้นที่ว่างส่วนบนของหน้าจอ เลือก Show และ Palette รูปที่ 1.9 การเรียกใช้ HTML Forms Icon ใน Palette Tools - จะได้ Tab ชื่อ Palette อยู่ที่หน้าจอด้านล่าง คลิกที่ HTML 4.0 จะมี Icons ให้เลือก สามารถที่จะ Drag & Drop ขึ้นไปวางด้านบนสุด (ลำดับที่3 ดังรูป 1.11) และปรับค่า Attribute ของ Object นั้นๆโดย เลือกที่ Tab Properties(Tabถัดไปทางขวา) ได้ รูปที่ 1.10 การ Drag and Drop Forms Icon ไปที่หน้า Design1.4 การทดสอบโปรแกรมการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  12. 12. 12 1. Deploy Web Project สู่ Web Application Server โดยไปที่ Tab Server แล้ว Click ขวาที่ ชื่อ Tomcat v6.0 เลือก Add and Remove รูปที่ 1.11 การ Drag and Drop Forms Icon ไปที่หน้า Design จากนั้นเลือก WebApp แล้ว กดปุ่ม Add เพื่อเพิ่มเข้าไปที่ Web Application Server และกด Finish รูปที่ 1.12 การ Deploy Project สู่ Web Application Server 2. Run โปรแกรม WebApp โดยคลิ๊กขวาที่ addCustomer.html → Run As → Run on Server รูปที่ 1.13 การรัน File ที่ต้องการ Test 3. จะมีให้เลือกว่าจะให้รัน file นี้ที่ Server ไหน (กรณีเรานี้มี Server เดียว) กด Finishการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  13. 13. 13 รูปที่ 1.14 การเลือก Web Application Server ที่จะใช้รัน 4. จะได้ผลลัพธ์ดัง รูปที่ 1.15 รูปที่ 1.15 ผลลัพธ์ที่ได้จากการรัน File addCustomer.htmlหมายเหตุ สังเกตที่ท้าย hostname จะหมายเลขพอร์ต ซึ่งก็คื อ port ที่ Tomcat Server ให้บริการอยู่ โดย Default จะเป็น 8080 ยกเว้นว่าจะกำหนดหมายเลขอื่นการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  14. 14. 14 Exercise 2 การเขียนโปรแกรม Java Servlet เพื่ออ่านค่าพารามิเตอร์เนื้อหาที่ต้องศึกษาก่อน การสร้างโปรเจ็ค Web Application และสร้างไฟล์ HTML แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม Java Servlet เพื่อแสดงรายละเอียดของค่าพารามิเตอร์ที่ผู้ใช้ป้อนเข้ามาออกทางโปรแกรม Web Browser และแสดงผลการออกออกทาง Web Browser2.1 การพัฒนาโปรแกรม CustomerServlet.java โปรแกรม CustomerServlet.java เป็นโปรแกรมที่ถูกเรียกใช้โดย addCustomer.html เมื่อผู้ใช้กดปุ่ม Addโปรแกรมนี้จะทำหน้าที่นำค่าพารามิเตอร์ต่างๆ ที่ผู้ใช้ป้อนมาแสดงผล โดยมีขั้นตอนการทำงานดังนี้ 1. อ่านค่าพารามิเตอร์ต่างๆ ที่ส่งมาจาก addCustomer.html 2. แสดงรายละเอียดของค่าต่างๆ2.1.1 การอ่านค่าพารามิเตอร์จาก addCustomer.html เว็บเพจ addCustomer.html จะส่งข้อมูลของรายชื่อหนังสือใหม่ผ่านมาทางพารามิเตอร์ต่างๆ ดังนี้ ● id รหัสของลูกค้า ● name ชื่อลูกค้า ● addr ที่อยู่ลูกค้า ● mobile หมายเลขโทรศัพท์มือถือ ● fax หมายเลข fax ● email ของลูกค้า พารามิเตอร์ต่างๆ เหล่านี้จะถูกส่งผ่านโปรโตคอล Http และในโปรแกรมเราสามารถที่จะอ่านค่าพารา-มิเตอร์เหล่านี้ได้จากออปเจ็ค request โดยเรียกใช้เมธอด getParameter( ) ซึ่งโปรแกรมส่วนนี้จะมีคำสั่งต่างๆ ดังนี้ String id = request.getParameter("id"); String name = request.getParameter("name"); String addr = request.getParameter("addr"); String mobile = request.getParameter("mobile"); String fax = request.getParameter("fax"); String email = request.getParameter("email");การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  15. 15. 152.1.2 การแสดงรายละเอียดของค่าต่างๆ โปรแกรม Servlet จะสามารถแสดงผลออกทาง Web Browser ได้โดยการเขียนโค้ด HTML ภายในคำสั่ง out.println( ) โดยมีคำสั่งในเมธอด processRequest( ) ดังนี้ protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws IOException { PrintWriter out = response.getWriter(); response.setContentType("text/html;charset=UTF-8"); out.println("<html>"); out.println("<head>"); out.println("<title>Customer Information</title>"); out.println("</head>"); out.println("<body>"); String id = request.getParameter("id"); String name = request.getParameter("name"); String addr = request.getParameter("addr"); String mobile = request.getParameter("mobile"); String fax = request.getParameter("fax"); String email = request.getParameter("email"); out.println("<h1> Customer Information </h1>"); out.println("<b>ID: </b>" + id + "<BR>"); out.println("<b>Name: </b>" + name + "<BR>"); out.println("<b>Address: </b>" + addr + "<BR>"); out.println("<b>Mobile: </b>" + mobile + "<BR>"); out.println("<b>Fax: </b>" + fax + "<BR>"); out.println("<b>E-mail: </b>" + email + "<BR>"); out.println("</body>"); out.println("</html>"); out.close(); }การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  16. 16. 162.2 ขั้นตอนการพัฒนาโปรแกรม CustomerServlet.java เราสามารถที่จะพัฒนาโปรแกรม CustomerServlet.java ตามขั้นตอนดังนี้ 1. เลือกหน้าต่าง Projects แล้วคลิ๊กขวาที่โหนด WebApp → New → Servlet ดังรูปที่ 2.1 รูปที่ 2.1 การสร้างไฟล์ประเภท Servlet 2. กำหนดชื่อ Class Name = CustomerServlet และ Package = servlet ดังรูปที่ 2.2 และกด Next รูปที่ 2.2 การกำหนดชื่อ Package และ ชื่อ File Servlet 3. กำหนดค่า URL Pattern(หรือ URL Mappings) เป็น /addCustomer.doการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  17. 17. 17 โดยคลิกเลือกชื่อ CustomerServlet, กดปุ่ม Edit แล้วเปลี่ยน URL Mapping เป็น addCustomer.do และกด Finish ดังรูปที่ 2.3 รูปที่ 2.3 การกำหนด URL Pattern 4. จากนั้นเพิ่ม Method ที่ file CustomerServlet.java สำหรับรับ action ที่Submit มาจาก Http-Request (HTML Form) ทั้งชนิด POST และ GET โดยตั้งชื่อ Method ว่า processRequest( ) protected void processRequest(HttpServletRequest request,HttpServletResponse response) throws IOException { // ให้ implement source code ตาม หัวข้อ 2.1.2 }การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  18. 18. 18 5. Implement Code เพิ่มใน Method doGet(),doPost() เพื่อส่งต่อ Http-Request ให้ Method processRequest() protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); //เพิ่ม Code เข้าไปที่นี่ } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); //เพิ่ม Code เข้าไปที่นี่ }2.3 การทดสอบโปรแกรม 1. Run โปรแกรม WebApp โดยคลิ๊กขวาที่ addCustomer.html เลือก Run As → Run on Server → กดปุ่ม Finish รูปที่ 2.4 การรันทดสอบ addCustomer Servletการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  19. 19. 19 2. ทดลองป้อนข้อมูล ดังรูป 2.5 รูปที่ 2.5 กรอกข้อมูลทดสอบ Servlet ผ่านหน้า addCustomer.html 3. โปรแกรมจะแสดงผล ดังรูปที่ 2.6 รูปที่ 2.6 ผลลัพธ์จากการเรียกโปรแกรม CustomerServletการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  20. 20. 202.4 การปรับปรุงโปรแกรมเพื่อให้เรียกไฟล์ addCustomer.html เมื่อเริ่มต้น และ ให้แสดงผลภาษาไทยถูกต้อง เราสามารถที่จะปรับปรุงโปรเจ็คนี้เพื่อให้เรียกไฟล์ addCustomer.html โดยไม่ต้องระบุชื่อ file ใน URLเช่นเรียก http://localhost:8080/WebApp แล้วให้รัน Webpage addCustomer.html อัตโนมัติ ทำได้โดยการกำหนดพารามิเตอร์ Welcome Files ให้เป็นไฟล์ดังกล่าว โดยมีขั้นตอนดังนี้ 1. ในหน้าต่าง Projects ขยายโหนด WebApp → Deployment Descriptor → Welcome Page 2. Double click ที่ Welcome Pages แล้วเพิ่มชื่อของหน้า Page addCustomer.html ลงไปที่บรรทักแรก หลัง Tag <Welcome-file-list> ดังรูปที่ 2.7 แล้ว save รูปที่ 2.7 แก้ไข web.xml ให้ addCustomer.html เป็นหน้าแรกของ Project 3. ทำการทดสอบคือคลิ๊กขวาที่ Project WebApp → Run As → Run on Server รูปที่ 2.8 ทดสอบรันหน้า addCustomer.html เพื่อเรียกใช้ CustomerServlet.javaการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  21. 21. 21 รูปที่ 2.9 ทดสอบรันหน้า addCustomer.html เพื่อเรียกใช้ CustomerServlet.java จะเห็นว่า เราไม่ได้ระบุชื่อ addCustomer.html ลงไป แต่เมื่อเรียก /WebApp, Application Server จะทราบทันทีว่าต้องนำ File ไหนขึ้นมารัน เพื่อให้เป็น Page แรก (Tomcat อ่านจาก web.xml นั่นเอง) 4. กรณีถ้า Configuration ถูกเปลี่ยนค่า หรือมี class ใหม่เกิดขึ้น Tomcat จะมีการตอบสนองดังนี้ 4.1 การเตือนที่ Status ที่ Tab Server รูปที่ 2.10 Apache Tomcat เตือนให้ Restart Server 4.2 เมื่อสั่งรัน Application ดังข้อ 3 จะมี Dialog box ถาม เพื่อให้Confirm ว่าจะ Restart App Server หรือไม่ ถ้าต้องการให้ source code ที่แก้ไป มีผลทันที ให้เลือก Restart Server แล้วกดปุ่ม OK รูปที่ 2.11 Apache Tomcat ขอ Confirm การ Restart Server เมื่อได้ทำข้อ 4.1 หรือ 4.2 ข้อใดข้อหนึ่งแล้ว ให้ดูที่สถานะของ Tomcat จะพบว่าเป็น Synchronizedการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  22. 22. 22ก็จะทำให้ source code ที่ถูกแก้ไขไปนั้น ถูกใช้งาน รูปที่ 2.12 Apache Tomcat ขณะพร้อมใช้งาน นอกจากนี้ถ้าเราทดลองป้อนข้อมูลภาษาไทย ลงไปในจะพบว่าโปรแกรม Web Browser บางตัวจะแสดงผลลัพธ์ภาษาไทยไม่ถูกต้อง เราสามารถแก้ไขได้ โดยการกำหนดให้การเข้ารหัสของพารามิเตอร์ที่ส่งมาเป็นUTF-8 โดยเพิ่มคำสั่งเข้าไปที่ Method processRequest โดยต่อจากบรรทัดของ PrintWriter out …. ดังนี้ PrintWriter out = response.getWriter(); response.setContentType("text/html;charset=utf-8");การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  23. 23. 23 Exercise 3 โปรแกรมเว็บสำหรับการทำโพลเนื้อหาที่ต้องศึกษาก่อน การเขียนโปรแกรม Java Servlet เพื่ออ่านค่าพารามิเตอร์ แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม Java Servlet เพื่อทำ Poll โดยให้ผู้ใช้สามารถที่จะโหวตเลือกภาษาคอมพิวเตอร์ที่ชอบได้ แล้วโปรแกรมจะแสดงผลการโหวตทาง Web Browser3.1 โปรแกรม vote.html โปรแกรม vote.html เป็นหน้าเว็บที่ให้ผู้ใช้สามารถที่จะทำการโหวตเลือกภาษาคอมพิวเตอร์ได้ โดยเมื่อผู้ใช้กดปุ่ม Vote โปรแกรมเว็บก็จะไปทำการเรียก URL ที่ชื่อ processVote โปรแกรมนี้มีหน้าเว็บดังรูปที่ 3.1 รูปที่ 3.1 การแสดงผลของโปรแกรม vote.html3.2 การพัฒนาโปรแกรม VoteServlet.java โปรแกรม VoteServlet.java เป็นโปรแกรมที่ถูกเรียกใช้โดย vote.html เมื่อผู้ใช้กดปุ่ม Vote โปรแกรมนี้จะทำหน้าที่เพื่อนำค่าที่ผู้ใช้โหวตมาประมวลผล โดยมีการทำงานคือ 1. กำหนดตัวแปร counter และ lang 2. อ่านค่าพารามิเตอร์ต่างๆที่ส่งมาจาก vote.html และทำการประมวลผล 3. แสดงผลการโหวตการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  24. 24. 243.2.1 กำหนดตัวแปร counter และ lang ตัวแปร count เป็นอะเรย์เพื่อที่จะเก็บจำนวนผลโหวตของภาษาคอมพิวเตอร์แต่ละภาษา และตัวแปร langเป็นอะเรย์ของ String เพื่อที่จะเก็บรายชื่อภาษาคอมพิวเตอร์ ตัวแปรทั้งสองเป็นตัวแปรของออปเจ็คที่จะประกาศนอกเมธอด (Instance Variable) โดยมีคำสั่งประกาศดังนี้ String []lang ={"Java", "C#", "C", "Pascal"}; int []count = new int[4];3.2.2 อ่านค่าพารามิเตอร์ต่างๆที่ส่งมาจาก vote.html และทำการประมวลผล เว็บเพจ vote.html จะส่งข้อมูลของการโหวต ไปกับพารามิเตอร์ที่ชื่อ lang โดยจะมีค่าเป็นหมายเล 1-4ในที่นี้จะมีคำสั่ง request.getParameter เพื่อจะอ่านค่าที่โหวตมา จากนั้นจะทำการแปลงค่าซึ่งเป็น String ให้เป็นค่าจำนวนเต็มโดยใช้ Wrapper class จากนั้นจะเป็นการเพิ่มจำนวนโหวตในตัวแปร count ตามค่า index ที่สอดคล้องกับภาษาที่โหวตมา โดยมีคำสั่งต่างๆ ดังนี้ String vote = request.getParameter("lang"); int voteNum = Integer.parseInt(vote) – 1; count[voteNum]++;3.2.3 การแสดงผลการโหวต คำสั่งแสดงผลการโหวตจะเป็นคำสั่งเพื่อแสดงค่าของตัวแปร count โดยมีคำสั่งดังนี้ for (int i = 0; i < count.length; i++) { out.println(lang[i] +" = " + count[i] + "<BR>"); }การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  25. 25. 253.3 ขั้นตอนการพัฒนาโปรเจ็ค Voter เราสามารถที่จะพัฒนาแบบฝึกหัดนี้ที่ชื่อโปรเจ็ค Voter ตามขั้นตอนดังนี้ 1. สร้าง New Project ชนิด Dynamic Web Application ชื่อ Voter ดังรูปที่ 3.2 รูปที่ 3.2 การสร้างโปรเจ็ค Web Application ชื่อ Voterการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  26. 26. 26 2. กำหนด HTML File Name = vote แล้วกด Finish รูปที่ 3.3 การสร้าง HTML Page ชื่อ vote.html 3. ในหน้าต่าง Editor เขียน Source code ของ vote.html ดัง Listing ที่ 3.1 Listing ที่ 3.1 โปรแกรม vote.html <html> <head><title>Web Voting</title></head> <body> <form action="processVote" method="POST"> Select a computer language <BR> <input type="radio" name="lang" value="1" /> Java <br> <input type="radio" name="lang" value="2" /> C# <br> <input type="radio" name="lang" value="3" /> C <br> <input type="radio" name="lang" value="4" /> Pascal <br> <input type="submit" value="Vote" /> </form> </body> </html>การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  27. 27. 27 4. เลือกหน้าต่าง Projects แล้วคลิ๊กขวาที่โหนด Voter เลือกคำสั่ง New > Servlet กำหนด Package เป็น controller และ Class Name = VoteServlet.java แล้วกด Next กำหนด URL Mapping = /processVote แล้วกด Finish รูปที่ 3.4 การสร้าง Java Servlet ชื่อ VoteServlet.java และกำหนด URL Pattern (URL Mapping)การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  28. 28. 28 ในหน้าต่าง Editor เขียน Source code ของ VoteServlet.java ดัง Listing ที่ 3.2 Listing ที 3.2 โปรแกรม VoteServlet.java package controller; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class VoteServlet extends HttpServlet { private static final long serialVersionUID = 1L; String []lang ={"Java", "C#", "C", "Pascal"}; int []count = new int[4]; protected void processRequest(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); response.setContentType("text/html;charset=UTF-8"); String vote = request.getParameter("lang"); int voteNum = Integer.parseInt(vote) - 1; count[voteNum]++; out.println("<html>"); out.println("<head>"); out.println("<title>Servlet VoteServlet</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1>Servlet VoteServlet at " +request.getContextPath() + "</h1>"); for (int i = 0; i < count.length; i++) { out.println(lang[i] +" = " + count[i] + "<BR>"); } out.println("</body>"); out.println("</html>"); out.close(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); }}การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  29. 29. 29 5. ทำการ Deploy Web Project ที่ Apache Tomcat ไปที่ Tab Server ด้านล่าง คลิ๊กขวา ที่ Tomcat v6.0 Server แล้วเลือก Add and Remove รูปที่ 3.5 การ Deploy Project ไปที่ Apache Tomcat แบบ Manual 6. กด Save แล้วทำการ run โปรเจ็คเพื่อทดสอบโปรแกรมโดยเรียก URL ที่ http://localhost:8080/Voter/vote.html โดยจะได้ผลลัพธ์ดังตัวอย่างในรูปที่3.6 รูปที่ 3.6 ตัวอย่างผลลัพธ์ของโปรเจ็ค Voterการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  30. 30. 303.4 การปรับปรุงโปรแกรม VoteServlet.java ให้ Set Welcome Page เมื่อเรียก http://localhost:8080/Voter/ ให้ไปที่ vote.html ทันที (ตัวอย่าง หน้าที่ 20)เพื่อความสะดวก ไม่ต้องระบุชื่อ html page ขณะเรียกใช้งาน ขั้นตอนนี้จะเป็นการปรับปรุงโปรแกรม VoteServlet.java เพื่อป้องกันการโหวตซ้ำทั้งนี้จะไม่อนุญาตให้ ผู้ใช้ที่ใช้หมายเลขไอพีเดียวกันโหวตซ้ำได้ โดยจะเก็บหมายเลขไอพีที่ทำการโหวตแล้วในออปเจ็คชนิด HashSet การพัฒนาโปรแกรมนี้มีคำสั่งเพิ่มเติมที่สำคัญดังนี้ 1. กำหนดตัวแปร voters 2. อ่านหมายเลขไอพีของผู้โหวตและเพิ่มคะแนนการโหวต หากหมายเลขไอพีนี้ไม่เคยโหวต3.4.1 กำหนดตัวแปร voters ตัวแปร voters เป็นตัวแปรชนิด HashSet ( Set ไม่เก็บข้อมูลซ้ำ ไม่จำลำดับข้อมูลว่าเข้าก่อนหรือหลังและไม่เรียงลำดับ) เก็บหมายเลขไอพีของผู้โหวต โดยจะประกาศเป็นตัวแปร ออปเจ็คที่มีคำสั่งประกาศดังนี้ HashSet voters = new HashSet();3.4.2 การอ่านหมายเลขไอพีของผู้ใช้ การอ่านหมายเลขไอพีของผู้ใช้ทำได้โดยเรียกใช้ คำสั่ง getRemoteAddr() ในออปเจ็ค request เมื่อทราบหมายเลขไอพี เราสามารถที่จะตรวจสอบได้ว่าหมายเลขนี้เคยโหวตแล้วหรือไม่ โดยการตรวจสอบว่าออปเจ็ค votersมีค่าหมายเลขไอพีนี้หรือไม่โดยใช้คำสั่ง contain() หากยังไม่เคยโหวตก็ให้เพิ่มค่าตัวนับและเพิ่มหมายเลขไอพีนี้ในออปเจ็ค voters โดยมีคำสั่งดังนี้ String ip = request.getRemoteAddr(); if(voter.contains(request.getRemoteAddr())){ out.print("This IP Address has been voted"); }else{ count[voteNum]++; voter.add(request.getRemoteAddr()); }การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  31. 31. 31สำหรับโปรแกรม VoteServlet.java ที่ปรับปรุงใหม่จะมี source code ดัง Listing ที่ 3.3Listing ที่ 3.3 โปรแกรม VoteServlet.java เพื่อป้องกันการโหวตซ้ำpackage controller;import java.io.IOException;import java.io.PrintWriter;import java.util.HashSet;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class VoteServlet extends HttpServlet { private static final long serialVersionUID = 1L; HashSet<String> voter = new HashSet<String>(); String[] lang = { "Java", "C#", "C", "Pascal" }; int[] count = new int[4]; protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); response.setContentType("text/html;charset=UTF-8"); String vote = request.getParameter("lang"); int voteNum = Integer.parseInt(vote) - 1; if (voter.contains(request.getRemoteAddr())) { out.print("<font color=red>This IP Address has been voted</font>"); } else { voter.add(request.getRemoteAddr()); count[voteNum]++; } out.println("<html>"); out.println("<head>"); out.println("<title>Servlet VoteServlet</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1>Servlet VoteServlet at " + request.getContextPath() + "</h1>"); for (int i = 0; i < count.length; i++) { out.println(lang[i] + " = " + count[i] + "<BR>"); } out.println("</body>"); out.println("</html>"); out.close(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } public String getServletInfo() { return "Short description"; }}การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  32. 32. 32 Exercise 4 การเชื่อมต่อกับ MySQL Databaseเนื้อหาที่ต้องศึกษาก่อน - แบบฝึกหัดนี้เป็นการเริ่มต้นใช้งาน Database Tool เพื่อเชื่อมต่อกับ Table test ในฐานข้อมูล MySQLสำหรับเป็นตัวช่วยให้ทำงานได้เร็วขึ้น เช่นปกติถ้าจะ create table ก็ต้องเขียน SQL แต่ Tool นี้มี GUI มาช่วยทำให้ลดข้อผิดพลาด และ สะดวกในการทำงานมากขึ้น4.1 การจัดการ Table เปิดโปรแกรม MySQL Workbench รูปที่ 4.1 การเรียกใช้งาน Program MySQL Workbench 1. Double Click Connection Name ใส่ Password ที่กำหนดไว้ในตอนติดตั้งโปรแกรม MySQL ซึ่งจะมีค่าเป็น root ดังรูปที่ 4.2 รูปที่ 4.2 การแสดงการเชื่อมต่อ Connection เพื่อเข้าไปจัดการ Databaseการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  33. 33. 334.2 การสร้างตาราง books ในที่นี้จะกำหนดให้สร้าง Table ที่ชื่อ books โดยให้อยู่ภายใต้ Schema ที่ชื่อ test โดย Table นี้กำหนดให้มีColumn ต่างๆ ดังตารางที่ 4.1ตารางที่ 4.1 Table books ชื่อ Column ชนิด ขนาด Primary Key Index isbn varchar 20 Y Y title varchar 70 - - author varchar 50 - - price float - - - เราจะใช้โปรแกรม MySQL WorkBench ในการที่จะสร้าง Table นี้โดยมีขั้นตอนต่างๆ ดังนี้ 1. Double คลิ๊ก Add Table... ใส่ชื่อ table และ ชื่อ field แล้วกดปุ่ม Apply ดังตารางที่ 4.1 รูปที่ 4.3 การเลือกคำสั่งสร้างตารางการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  34. 34. 34 2. หรือใช้คำสั่ง SQL Statement ก็ได้ โดยนำไปใส่ที่หน้าต่าง Query1 แล้ว กด icon สายฟ้าสีเหลืองเพื่อรัน CREATE TABLE BOOKS ( ISBN VARCHAR(20) NOT NULL , TITLE VARCHAR(70) NULL , AUTHOR VARCHAR(50) NULL , PRICE FLOAT NULL , PRIMARY KEY (ISBN) ); 3. เปิด Tables books จะเห็น Column ต่างๆ ดังรูปที่ 4.4 รูปที่ 4.4 ผลลัพธ์จากการสร้างตารางการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  35. 35. 354.3 การใช้คำสั่ง SQL ใน MySQL WorkBench ภายหลังจากที่มีการสร้าง Table ที่ชื่อ books เราสามารถใช้คำสั่ง SQL เพื่อที่จะติดต่อกับฐานข้อมูลในที่นี้จะแสดงการเพิ่มข้อมูลลงใน Table โดยมีขั้นตอนต่างๆดังนี้ 1. Double Click ที่ Table books ด้านขวา จะได้ SQL Editor ให้ป้อนคำสั่ง SQL เป็น INSERT INTO books VALUES (123, JAVA, Thanisa, 2500.00); INSERT INTO books VALUES (456, SOA, Thanachart , 3000.00) ; แล้ว กด Icon สายฟ้าสีเหลือง ดังรูป 4.8 หรือกด Ctrl+Shift+Enter เพื่อรันคำสั่ง SQL ทั้งหมด รูปที่ 4.5 การ Execute คำสั่งเพิ่มข้อมูลในตารางการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  36. 36. 36 2. เราสามารถที่จะดูข้อมูลที่ป้อนเข้าไปได้ โดยเลือก tab Overview → จาก Table ที่ชื่อ books เลือก Select Rows – Limit1000 ดังรูปที่ 4.6 รูปที่ 4.6 การเรียกดูข้อมูลในตารางการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  37. 37. 37 Exercise 5 การพัฒนาโปรแกรมเว็บ เพื่อติดต่อกับฐานข้อมูลเนื้อหาที่ต้องศึกษาก่อน การใช้งาน Tool ที่ติดต่อกับ MySQL Database แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม Web Application โดยใช้ Java Servlet เพื่อเชื่อมต่อกับฐานข้อมูลในที่นี้ใช้ฐานข้อมูล MySQL ซึ่งมี Database ชื่อ test และสร้าง Table ที่ชื่อ books ไว้แล้วจาก ที่ Exercise 4 (หน้า 34) การทำงานของโปรแกรม เป็นการเพิ่มข้อมูลลงใน Table ดังกล่าว โดยกำหนดให้ผู้ใช้ป้อนรายละเอียดข้อมูลผ่านเว็บเพจที่ชื่อ addBook.html ซึ่งเมื่อผู้ใช้กดปุ่ม Add โปรแกรมก็จะไปเรียกโปรแกรม Servlet ที่ชื่อAddBookServlet ซึ่งจะมีคำสั่งในอ่านค่า parameter ที่ผู้ใช้ป้อนเข้ามาและทำการบันทึกข้อมูลลงใน Table books ซึ่งใช้ชุดคำสั่ง SQL ผ่าน JDBC APIขั้นตอนในการพัฒนาโปรแกรม 1. Config Apache Tomcat ให้สามารถใช้งาน JDBC Driver 2. สร้างโปรเจ็ค WebBaseDB 3. พัฒนา Web page addBook.html 4. พัฒนา Web page Thankyou.html 5. พัฒนาโปรแกรม AddBookServlet.java5.1 การ Config Apache Tomcat ให้สามารถใช้งาน JDBC Driver ในที่นี้จะใช้ Driver ที่ชื่อ MySQL Connector/J ซึ่งเป็น JDBC Driver ที่ใช้ติดต่อกับ MySQLFile ที่จำเป็น คือ mysql-connector-java-5.1.15-bin.jar โดยให้ Copy ไปวางที่ directory /lib ของ Apache TomcatDefault อยู่ที่ C:Program FilesApache Software FoundationTomcat 6.0lib รูปที่ 5.1 ตำแหน่งของ File JDBC Driver ใน Folder lib ของ Apache Tomcatสามารถ Download MySQL Connector/J ได้ที่http://mysql.cs.pu.edu.tw/Downloads/Connector-J/mysql-connector-java-5.1.15.zipการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  38. 38. 385.2 การสร้าง Web Application Project เลือกเมนู File → New Project เลือก Dynamic Web Application กำหนดชื่อ Project Name = WebBaseDB (ตัวอย่างการสร้าง Project Web Application หน้า 24)5.3 การพัฒนาโปรแกรม addBook.html โปรแกรม addBook.html เป็นเว็บเพจที่ใช้แสดงฟอร์มสำหรับป้อนข้อมูลหนังสือใหม่เข้าในฐานข้อมูลbooks ซึ่งมีลักษณะดังรูปที่ 5.2 โปรแกรม addBook.html รูปที่ 5.2 หน้าเว็บเพจ addBook.html ขั้นตอนการพัฒนาดังนี้ 1. คลิ๊กขวาที่โหนด WebBaseDB จากนั้นเลือกคำสั่ง New → HTML File (ตัวอย่าง หน้า 25) กำหนด File Name: เป็น addBook แล้วกด Finish 2. เขียน source code ของไฟล์ addBook.html ตาม Listing ที่ 5.1 หรือ ลาก icon ประเภท HTML Forms ที่อยู่ในหน้าต่าง Palette เพื่อสามารถให้เขียนโปรแกรมได้ง่ายขึ้น (ตัวอย่าง หน้า 9 โดยทำตาม รูปแบบที่ 2) ดังรูปที่ 5.3การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  39. 39. 39 รูปที่ 5.3 การใช้งาน Palette สำหรับการสร้างหน้าจอ HTMLListing ที่ 5.1 โปรแกรม addBook.html<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Add a new book</title> </head> <body><h1>Add a new book</h1><P> <form action="addBook.do" method="POST"> ISBN : <input type="text" name="isbn" value="" size="15"/> <BR> Title : <input type="text" name="title" value="" size="50"/> <BR> Author : <input type="text" name="author" value="" size="50"/> <BR> Price : <input type="text" name="price" value="" size="10"/> <BR> <input type="submit" value="Add" /> </form> </body></html>การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  40. 40. 405.4 การพัฒนาโปรแกรม thankyou.html โปรแกรม Thankyou.html เป็นเว็บเพจที่ใช้แสดงให้เห็นว่าข้อมูลได้ถูกเพิ่มเข้าไปในฐานข้อมูลแล้ว โดยมีsource code ดัง Listing ที่ 5.2 ซึ่งขั้นตอนการพัฒนาโปรแกรมนี้จะเป็นเช่นเดียวกับการพัฒนาโปรแกรมaddBook.htmlListing ที่ 5.2 โปรแกรม thankyou.html<html> <head> <title>Thank you</title> </head> <body> <H1>Thank you for inserting data </H1> </body></html>5.5 การพัฒนาโปรแกรม AddBookServlet.java โปรแกรม AddBookServlet.java เป็นโปรแกรมที่ถูกเรียกใช้โดย addBook.html เมื่อผู้ใช้กดปุ่ม Addโปรแกรมนี้จะทำหน้าที่เพื่อติดต่อกับฐานข้อมูลโดยมีขั้นตอนการทำงานดังนี้ 1. อ่านค่าพารามิเตอร์ต่างๆที่ส่งมาจาก addBook.html 2. เชื่อมต่อกับฐานข้อมูล books 3. เพิ่มรายชื่อหนังสือใหม่ลงในฐานข้อมูล books 4. เรียกเว็บเพจ Thankyou.html5.5.1 การอ่านค่าพารามิเตอร์จาก addBook.html เว็บเพจ addBook.html จะส่งข้อมูลของรายชื่อหนังสือใหม่ผ่านมาทางพารามิเตอร์ต่างๆดังนี้ ● isbn หมายเลข ISBN ของหนังสือ ● title ชื่อหนังสือ ● author ชื่อผู้แต่ง ● price ราคาหนังสือ พารามิเตอร์ต่างๆเหล่านี้จะถูกส่งผ่านโปรโตคอล Http และในโปรแกรมเราสามารถที่จะอ่านค่าพารามิเตอร์เหล่านี้ได้จากออปเจ็ค request โดยเรียกใช้เมธอด getParameter() ซึ่งโปรแกรมส่วนนี้จะมีคำสั่งต่างๆดังนี้ String isbn = request.getParameter("isbn"); String author = request.getParameter("author"); String title = request.getParameter("title"); String priceStr = request.getParameter("price");การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  41. 41. 415.5.2 การเชื่อมต่อกับฐานข้อมูล การดึงข้อมูลระหว่าง Application กับ MySQL Database มีขั้นตอนดังนี้ ● เพิ่ม Resource ชนิด Data source ลงไปที่ Container ของ Tomcat ● เพิ่ม Resource Reference โดยทำการ Map DataSource ที่ Application ต้องการใช้ ● เรียกใช้คำสั่ง SQL โดยใช้เมธอด executeQuery() หรือ executeUpdate() 1. เพิ่ม Resource ชนิด DataSource ลงไปที่ Tomcat โดยสร้าง file context.xml ที่ Folder WebBaseDBWebContentMETA-INF ดังรูป 5.4 <Context> <Resource name="jdbc/test" auth="Container" driverClassName="com.mysql.jdbc.Driver" type="javax.sql.DataSource" url="jdbc:mysql://localhost:3306/test" username="root" password="root" > </Resource> </Context> รูปที่ 5.4 เพิ่ม Resource ให้กับ Apache Tomcatการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  42. 42. 42 2. ทำการ Mapping Data source ที่ Application ต้องการเชื่อมต่อ โดยแก้ไข Web Deployment Descriptor ของ Project (WEB-INFweb.xml) โดยเพิ่มดังนี้ <resource-ref> <description>Test Database</description> <res-ref-name>jdbc/test</res-ref-name> <res-type>javax.sql.DataSource</res-type> <res-auth>Container</res-auth> </resource-ref> รูปที่ 5.5 เพิ่ม Resource Reference ที่ Web Deployment Descriptor 3. การขอ Data source จะใช้ @annotation และบอกชื่อของ Data source ตัวที่เราต้องการ ตย. source code เช่น @Resource(name = "jdbc/test") private DataSource jdbcTest; เมื่อได้ Data source แล้ว เราก็จะสร้างทางติดต่อ โดย get Connection จากมันแล้วเก็บค่าไว้ที่ตัวแปร conn โดยเขียน source code ส่วนนี้ที่ Method init( ) private Connection conn; public void init() { try { conn = jdbcTest.getConnection(); } catch (Exception ex) {System.out.println(ex);} }5.5.3 เพิ่มรายชื่อหนังสือใหม่ลงในฐานข้อมูลการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  43. 43. 43 เมื่อเชื่อมต่อฐานข้อมูลและได้ออปเจ็คชนิด Connection มาแล้ว เราสามารถที่จะเรียกใช้คำสั่ง SQL ได้ ซึ่ง ในที่นี้คือคำสั่ง INSERT ซึ่งจะมีรูปแบบของคำสั่งดังนี้ INSERT INTO books VALUES(....) โดยเราจะใช้ค่าจากพารามิเตอร์ต่างๆที่รับมา ดังนั้นถ้าข้อมูลที่ป้อนเข้ามาถูกต้องเราสามารถที่จะเพิ่มรายชื่อหนังสือใหม่ลงในฐานข้อมูลโดยใช้คำสั่งดังนี้ Statement stmt = conn.createStatement(); String sql = "INSERT INTO books VALUES(" + isbn + "," + title +"," + author +","+ price +")"; int numRow = stmt.executeUpdate(sql);5.5.4 การเรียกเว็บเพจ thankyou.html เมื่อข้อมูลได้ถูกเพิ่มลงไปในฐานข้อมูลแล้ว โปรแกรม AddBookServlet จะทำการเรียกเว็บเพจ thankyou.html โดยการเรียกใช้ RequestDispatcher ดังนี้ RequestDispatcher obj = request.getRequestDispatcher("thankyou.html"); if (numRow == 1 && obj != null) { obj.forward(request,response); }การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  44. 44. 445.6 ขั้นตอนการพัฒนาโปรแกรม AddBookServlet.java 1. คลิ๊กขวาที่โหนด WebBaseDB จากนั้นเลือกคำสั่ง New → Servlet กำหนด Package = controller , Class Name = AddBookServlet URL Mapping = /addBook.do แล้วกด Finish 2. ในหน้าต่าง editor ให้แก้ไข source code ของไฟล์ AddBookServlet.java ให้เป็นไปตาม Listing ที่ 5.3 Listing ที่ 5.3 โปรแกรม AddBookServlet.java package controller; import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.SQLException; import java.sql.Statement; import javax.annotation.Resource; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.sql.DataSource; public class AddBookServlet extends HttpServlet { private static final long serialVersionUID = 1L; @Resource(name = "jdbc/test") private DataSource jdbcTest; private Connection conn; public void init() { try { conn = jdbcTest.getConnection(); } catch (Exception ex) { System.out.println(ex); } } protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); out.println("<html>"); out.println("<head>"); out.println("<title>Add a new book</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1> Add a new book </h1>");การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  45. 45. 45 try { String isbn = request.getParameter("isbn"); String author = request.getParameter("author"); String title = request.getParameter("title"); String priceStr = request.getParameter("price"); float price = Float.parseFloat(priceStr); Statement stmt = conn.createStatement(); String sql = "INSERT INTO books VALUES(" + isbn + "," + title + "," + author + "," + price + ")"; int numRow = stmt.executeUpdate(sql); RequestDispatcher obj =request.getRequestDispatcher("thankyou.html"); if (numRow == 1 && obj != null) { obj.forward(request, response); } } catch (SQLException ex) { out.println("Error " + ex); return; } out.println("</body>"); out.println("</html>"); out.close(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } } 3. บางส่วนที่ลืม import หรือพบ Error หรือพบ Warning ขึ้นมา ให้ตรวจสอบ import file โดยกด Ctrl+Shift+O Eclipse จะมีให้เลือกว่าจะ import ไฟล์ไหน เรียกว่า การทำ Organize Imports รูปที่ 5.6 Ctrl+Shift+O ให้ Eclipse เป็นตัวช่วยในการแสดง Import file 4. เพื่อความสะดวกในการเรียกใช้ Web Application อาจปรับให้ Welcome file เป็น addBook.html (ตัวอย่าง Exercise 2 การเขียนโปรแกรม Java Servlet เพื่ออ่านค่าพารามิเตอร์ ที่หน้า 20)การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  46. 46. 465.7 ทดสอบโปรแกรม 1. ทำการ Deploy โปรแกรม WebBaseDB ซึ่งใน Eclipse ทำโดย Click ขวาที่ Add and Remove 2. เรียกใช้งานหน้า addBook.html แล้วทดสอบกรอกข้อมูลดังรูปที่ 5.7 รูปที่ 5.7 ตัวอย่างการป้อนข้อมูล Books 3. เมื่อกดปุ่ม Add โปรแกรมก็จะใส่ข้อมูลลงใน Database และแสดงผลลัพธ์ดังรูปที่ 5.8 รูปที่ 5.8 ผลลัพธ์ที่แสดงทาง Web Browserการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
  47. 47. 47 4. เข้าไปดูข้อมูล โดยใช้ MySQLWorkbench เลือกคำสั่ง Select Rows -... จาก Table ที่ชื่อ books ดังรูปที่ 5.9 รูปที่ 5.9 ข้อมูลที่ถูกป้อนเข้า Table ที่ชื่อ booksการเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan

×