hand-on exercise java web programming
DESCRIPTION
Hand-on Exercise Java Web Programming for the course in February 2013TRANSCRIPT
Java Web Programming
Using Cloud Platform
By Associate Professor Dr. Thanachart Numnonda
& Associate Professor Dr. Thanisa Kruawaisayawan
Date 18 – 22 Feb 2013
IMC Institute
1
Hand-on
Exercises
การเขยนโปรแกรมเวบJava Servlet / JSP
โดยใชEclipse and TomCat
Assoc.Prof.Dr.Thanachart NumnondaSoftware Park Thailand
and
Asst.Prof.Dr.Thanisa KruawaisayawanKing Mongkut's Institute of Technology Ladkrabang
February 2013
การเขยนโปรแกรม Java Servlet / JSP
2
สารบญ
Exercise 1 การสรางโปรเจค Web Application และไฟล HTML..........................................................................5
1.1 การตดตง Web Server...................................................................................................................... 5
1.2 การสราง Web Application Project.................................................................................................. 7
1.3 การพฒนาโปรแกรม addCustomer.html................................................................................................ 9
1.4 การทดสอบโปรแกรม...........................................................................................................................13
Exercise 2 การเขยนโปรแกรม Java Servlet เพออานคาพารามเตอร..........................................................................15
2.1 การพฒนาโปรแกรม CustomerServlet.java......................................................................................... 15
2.1.1 การอานคาพารามเตอรจาก addCustomer.html ............................................................................... 15
2.1.2 การแสดงรายละเอยดของคาตางๆ.......................................................................................................16
2.2 ขนตอนการพฒนาโปรแกรม CustomerServlet.java ................................................................................17
2.3 การทดสอบโปรแกรม...........................................................................................................................19
Exercise 3 โปรแกรมเวบสำหรบการทำโพล......................................................................................................... 21
3.1 โปรแกรม vote.html....................................................................................................................... 21
3.2 การพฒนาโปรแกรม VoteServlet.java................................................................................................. 21
3.2.1 กำหนดตวแปร counter และ lang ................................................................................................22
3.2.2 อานคาพารามเตอรตางๆ ทสงมาจาก vote.html และทำการประมวลผล........................................................... 22
3.2.3 การแสดงผลการโหวต...................................................................................................................22
3.3 ขนตอนการพฒนาโปรเจค Voter ............................................................................................................ 23
3.4 การปรบปรงโปรแกรม VoteServlet.java............................................................................................... 28
3.4.1 กำหนดตวแปร voters................................................................................................................28
3.4.2 การอานหมายเลขไอพของผใช.......................................................................................................... 28
Exercise 4 การเชอมตอกบ MySQL Database............................................................................................. 30
4.1 การเชอมตอ MySQL โดยโปรแกรม MySQL Workbench....................................................................... 30
4.2 การสรางตาราง books....................................................................................................................... 31
4.3 การใชคำสง SQL ใน MySQL WorkBench........................................................................................33
Exercise 5 การพฒนาโปรแกรมเวบ เพอตดตอกบฐานขอมล........................................................................................ 35
5.1 การ Config Apache Tomcat ใหสามารถใชงาน JDBC Driver...............................................................35
5.2 การสราง Web Application Project................................................................................................ 36
5.3 การพฒนาโปรแกรม addBook.html.....................................................................................................36
5.4 การพฒนาโปรแกรม thankyou.html.................................................................................................... 37
5.5 การพฒนาโปรแกรม AddBookServlet.java......................................................................................... 38
5.5.1 การอานคาพารามเตอรจาก addBook.html ......................................................................................38
5.5.2 การเชอมตอกบฐานขอมล...............................................................................................................38
5.5.3 เพมรายชอหนงสอใหมลงในฐานขอมล ................................................................................................ 39
5.5.4 การเรยกเวบเพจ thankyou.html ................................................................................................ 39
5.6 ขนตอนการพฒนาโปรแกรม AddBookServlet.java ................................................................................40
5.7 ทดสอบโปรแกรม...............................................................................................................................41
Exercise 6 การพฒนาโปรแกรมเวบเพอตดตอฐานขอมล MongoDB.......................................................................... 43
6.1 การตดตง MongoDB..................................................................................................................... 43
6.2 การใช MongoDB......................................................................................................................... 44
6.3 การเขยนโปรแกรม Java Servlet เพอเชอมตอกบ MongoDB.......................................................................45
6.4 ทดสอบโปรแกรม...............................................................................................................................47
Exercise 7 โปรแกรมเวบเพอสาธตขอบเขตของออปเจค............................................................................................ 48
7.1 การพฒนาโปรแกรมเพอสาธตขอบเขตของ Object แบบ Request ..................................................................... 48
7.1.1 ขนตอนการพฒนาโปรแกรมเพอสาธตขอบเขตของ Object แบบ Request .....................................................50
7.1.2 ขนตอนการทดสอบโปรแกรมเพอสาธตขอบเขตของ Object แบบ Request.................................................... 50
7.2 การพฒนาโปรแกรมเพอสาธตขอบเขตของ Object แบบ Session ......................................................................51
Thanachart Numnonda and Thanisa Kruawaisayawan
3
7.2.1 ขนตอนการพฒนาโปรแกรมเพอสาธตขอบเขตของ Object แบบ Session ......................................................53
7.2.2 ขนตอนการทดสอบโปรแกรมเพอสาธตขอบเขตของ Object แบบ Session ....................................................53
7.3 การพฒนาโปรแกรมเพอสาธตขอบเขตของ Object แบบ Application................................................................ 54
7.3.1 ขนตอนการพฒนาโปรแกรมเพอสาธตขอบเขตของ Application................................................................. 55
7.3.2 ขนตอนการทดสอบโปรแกรมเพอสาธตขอบเขตของ Object แบบ Application.............................................. 56
Exercise 8 การพฒนา WebBase DB โดยคลาสประเภท Web Listener............................................................... 57
8.1 การพฒนาโปรแกรม Init.java.............................................................................................................. 57
8.2 การปรบปรงโปรแกรม AddBookServlet.java ......................................................................................60
8.3 ทดสอบโปรแกรม...............................................................................................................................61
Exercise 9 การพฒนาโปรแกรม Servlet Filter ...............................................................................................62
9.1 การพฒนาโปรแกรม Servlet Filter.......................................................................................................62
9.2 การเขยนหนา Login......................................................................................................................... 63
9.3 การเขยน Servlet Filter.................................................................................................................. 64
9.4 การเขยนโปรแกรม ShowServlet ........................................................................................................67
9.5 ขนตอนการทดสอบโปรแกรม ..................................................................................................................68
Exercise 10 การเขยนโปรแกรม JSP เพอแสดงผลลพธ...........................................................................................69
10.1 การพฒนาโปรแกรม hello.jsp........................................................................................................... 69
10.2 การพฒนาโปรแกรม viewBook.jsp...................................................................................................70
10.2.1 การกำหนด Tag Library........................................................................................................ 70
10.2.2 การกำหนด Datasource......................................................................................................... 70
10.2.3 การใชคำสง c:forEach เพอแสดงผล ............................................................................................ 71
Exercise 11 การพฒนาโปรแกรมเวบ Online Book Store.................................................................................73
11.1 การพฒนาโปรแกรม selectBooks.jsp.................................................................................................73
11.2 การพฒนาโปรแกรม Book.java......................................................................................................... 80
11.3 การพฒนาโปรแกรม Cart.java........................................................................................................... 83
11.4 การพฒนาโปรแกรม ProcessSelection.java....................................................................................... 84
11.5 การพฒนาโปรแกรม Init.java ............................................................................................................87
11.6 การพฒนาโปรแกรม viewCart.jsp..................................................................................................... 87
11.7 ขนตอนการทดสอบโปรแกรม ................................................................................................................88
Exercise 12 การสราง Custom Tags สำหรบโปรแกรม JSP................................................................................89
12.1 การพฒนาโปรแกรม hello.jsp............................................................................................................ 89
12.2 การพฒนาโปรแกรม helloJSTL.jsp................................................................................................... 95
12.3 การพฒนาโปรแกรม helloTagFile.jsp................................................................................................96
12.3.1 สราง Tag File.....................................................................................................................96
12.3.2 เขยนโปรแกรม helloTagFile.jsp..............................................................................................97
12.4 การพฒนาโปรแกรม helloTag.jsp...................................................................................................... 97
12.4.1 สรางไฟล Java ClassTag Handler.........................................................................................98
12.4.2 สราง Tag Library Descriptor........................................................................................... 101
12.4.3 เขยนโปรแกรม helloTag.jsp..................................................................................................103
Exercise 13 การพฒนาโปรแกรมเวบโดยใช Struts 2 Framework...................................................................... 104
13.1 การสรางโปรเจค StrutsDBApp โดยใช Struts 2 Framework..............................................................104
13.2 การพฒนาโปรแกรม addBook.jsp [View]....................................................................................... 105
13.3 การพฒนาโปรแกรม AddBookAction.java [Model]....................................................................... 108
13.4 การพฒนาโปรแกรม success.jsp [View].......................................................................................... 111
13.5 การแกไขไฟล struts.xml............................................................................................................... 111
13.6 การทดสอบโปรแกรม....................................................................................................................... 111
Exercise 14 การพฒนาโปรแกรมเวบโดยใช Spring Framework........................................................................ 113
14.1 การสรางโปรเจค SpringDBApp โดยใช Spring Framework.............................................................. 113
14.2 พฒนาไฟล Controller................................................................................................................. 114
14.3 พฒนาไฟล JSP............................................................................................................................114
การเขยนโปรแกรม Java Servlet / JSP
4
14.4 พฒนาไฟล mvc-dispatcher-servlet.xml...................................................................................... 115
14.5 พฒนาไฟล web.xml....................................................................................................................115
14.6 การทดสอบโปรแกรม.......................................................................................................................116
14.7 พฒนาโปรแกรมเพอเชอมตอกบฐานขอมล................................................................................................. 116
Exercise 15 การ Authentication โดยใช Tomcat .....................................................................................121
15.1 สราง Web Application Project................................................................................................ 121
15.2 เพม User ของ Tomcat Web Server........................................................................................... 121
15.3 การ Config ไฟล web.xml ของ Web Application ทตองการใช Tomcat user .....................................122
15.4 การทดสอบโปรแกรมแบบ Basic Authenticate...................................................................................124
15.5 การปรบปรงโปรแกรมเพอใหใช Login Form........................................................................................ 125
15.6 การทดสอบโปรแกรม แบบ Form Authenticate.................................................................................. 126
15.7 การปรบปรงโปรแกรม เพอใช Authenticate โดยอานจาก Database MySQL.............................................. 126
15.8 การทดสอบโปรแกรม แบบ Database Authenticate............................................................................ 127
Exercise 16 การพฒนาโปรแกรมเวบโดยใช Google App Engine...................................................................... 128
16.1 การตดตงและเรมตนการใชงาน Google App Engine............................................................................ 128
16.2 การสราง Web Application Project............................................................................................ 129
16.3 การพฒนาโปรแกรม Servlet เพอรนบน Google App Engine................................................................ 133
16.4 การพฒนาโปรแกรมเพอตดตอกบ Google Account................................................................................135
Exercise 17 การพฒนาโปรแกรม Google App Engine เพอตดตอกบฐานขอมล โดยใช JPA........................................ 138
17.1 การสรางโปรเจค Google App Engine............................................................................................138
17.2 การพฒนาโปรแกรม Book Entity Class..........................................................................................138
17.3 การพฒนาโปรแกรม EMF.java........................................................................................................ 139
17.4 การพฒนาโปรแกรม addBook.html.................................................................................................140
17.5 การพฒนาโปรแกรม OnlineBookServlet เพอรนบน Google App Engine............................................140
17.6 การพฒนาโปรแกรมเพอแสดงขอมลใน Books ......................................................................................... 142
Thanachart Numnonda and Thanisa Kruawaisayawan
5
Exercise 1 การสรางโปรเจค Web Application และไฟล HTML
แบบฝกหดนจะเปนการสรางโปรเจค Web Application และพฒนาหนาเวบเพจเพอใหผใชปอนขอมลของ
ลกคา โดยพฒนาดวยภาษา HTML ซงจะทำหนาเปนสวนอนพตของโปรแกรมเพอใหผใชปอนขอมลผาน Web
Browser ทงนในแบบฝกหดนจะใช Eclipse เปนเครองมอในการพฒนาโปรแกรมและจะใช Apache Tomcat v 6.0
เปน Web Server
ขนตอนในการพฒนาโปรแกรม
1. การตดตง Web Server
2. สรางโปรเจค Web Application
3. พฒนาโปรแกรม addCustomer.html
1.1 การตดตง Web Server
ขนตอนแรกจะตองปรบกำหนด Perspective ของ Eclipse ใหเปน Java EE โดยการเลอกคำสง Windows >
Open Perspective > Other ..จากนนเลอก Java EE ใน Dialog Box จะได Perspective ดงรปท 1.1
รปท 1.1 Perspective สำหรบ Java EE
ขนตอนถดไปจะเปนการเพม Tomcat Web Server เพอให Eclipse สามารถควบคมและ Deploy โปรแกรมลง
ได โดยมขนตอนตางๆ ดงรปท 1.2 ดงน
ใหเลอกแทป Servers คลกขวาภายใน Window แลวเลอก New → Server
เลอกชอ Apache → Tomcat 6.0 Server (หรอ Version อน) และ Browse ไปยง folder Tomcat ทตดตงไว
จากนนกด OK และ Finish
การเขยนโปรแกรม Java Servlet / JSP
6
รปท 1.2 การ Config Eclipse เพอใหรจก TOMCAT Web Server
เราจะเหนหนาตาง Server มชอ Web Server ทเปน Tomcat เพมขนมาซงเราสามารถควบคมการ Start/Stop
Server ไดโดยการคลกขวาทชอ Server โปรแกรมจะแสดงคำสงตางๆ ขนมาดงรปท 1.3
รปท 1.3 เมนในการจดการ Web Server
Thanachart Numnonda and Thanisa Kruawaisayawan
7
เราจำเปนทจะตองกำหนดคา Server Configuration ของ Tomcat โดยการเลอกแทป Server แลวคลกท
Tomcat Server โปรแกรมจะแสดงขอมลตางๆของ Server ใหเลอก Server Locations เปน Use Tomcat Installation
ดงรปท 1.4
รปท 1.4 การกำหนดคา Server Locations
1.2 การสราง Web Application Project
ขนตอนนจะเปนสรางโปรแกรม Web-Base Application โดยการสราง Project ใหม มขนตอนดงน
1. เลอกเมน File → New → Project
ในไดอะลอก New Project ขยาย Folder ชอ Web และเลอก Dynamic Web Project ดงรปท 1.5
รปท 1.5 การสรางโปรเจค Web Application
การเขยนโปรแกรม Java Servlet / JSP
8
2. ใหกำหนด Project Name เปน WebApp
สวนการเกบ File Eclipse จะใช Directory ทถามเมอครงเปดขนมาเปน Default
แต ถาตองการระบ กสามารถคลกเครองหมายออก (Uncheck) แลวทำการระบ Directory ใหมได
จากนนกด ปม Next ดงรปท 1.6
รปท 1.6 การกำหนดชอ Project
3. โปรแกรมจะแสดง Folder ทเกบ source code และ Output folder (ทเกบ Class file)
คอ [directory ทใสกอนรน Eclipse]\src\ และ [directory ทใสกอนรน Eclipse]\build\classes\
ดงรปท 1.7 จากนนกด ปม Next
รปท 1.7 แสดงทเกบ source code และ Output directory
Thanachart Numnonda and Thanisa Kruawaisayawan
9
4. แสดง Context root และ Content directory ดงรปท 1.8 กด Finish
รปท 1.8 แสดงชอ Context root และ Content directory
1.3 การพฒนาโปร แกรม a ddCustomer.html
โปรแกรม addCustomer.html เปนเวบเพจทใชแสดงฟอรมสำหรบปอนขอมลลกคา แลว นำไปบนทกลงฐาน
ขอมล customers โดยมรปแบบหนาจอ HTML ทตองสราง ดงรปท 1.9 (สวนของโปรแกรมจะสรางในแบบฝกหด
ถดไป)
รปท 1.9 หนาเวบเพจ addCustomer.html
การเขยนโปรแกรม Java Servlet / JSP
10
ขนตอนการพฒนาโปรแกรม addCustomer.html
1. เลอกหนาตาง Project แลวคลกขวาทโหนด WebApp เลอก New → HTML File ดงรป 1.10
รปท 1.10 การสรางไฟล HTML
2. กำหนด HTML File Name: เปน addCustomer แลวกด Finish ดงรป 1.11
รปท 1.11 การสรางและตงชอ File HTML
Thanachart Numnonda and Thanisa Kruawaisayawan
11
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.12
รปท 1.12 การเลอกเปด HTML กบ Editor ทเปน Design view
การเขยนโปรแกรม Java Servlet / JSP
12
- คลกเลอกพนทวางสวนบนของหนาจอ เลอก Show และ Palette
รปท 1.13 การเรยกใช HTML Forms Icon ใน Palette Tools
- จะได Tab ชอ Palette อยทหนาจอดานลาง คลกท HTML 4.0 จะม Icons ให
สามารถทจะ Drag & Drop ขนไปวางดานบนสด (ลำดบท3 ดงรปท 1.14)
และปรบคา Attribute ของ Object นนๆ ได โดยเลอกท Tab Properties (Tab อยถดไปทางขวา)
รปท 1.14 การ Drag and Drop Forms Icon ไปทหนา Design
Thanachart Numnonda and Thanisa Kruawaisayawan
13
1.4 การทดสอบโปรแกรม
1. ทำการตดตง (Deploy) Web Project บน Tomcat WebServer
โดยใหเลอกแทป Server แลวคลกขวาทชอ Tomcat Server แลวเลอกคำสง Add and Remove ดงรปท 1.15
รปท 1.15 การ Drag and Drop Forms Icon ไปทหนา Design
จากนนเลอก WebApp แลว กดปม Add เพอเพมเขาไปท Web Server และกด Finish ดงรปท 1.16
รปท 1.16 การ Deploy Project ส Web Application Server
2. Run โปรแกรม WebApp โดยคลกขวาท addCustomer.html → Run As → Run on Server ดงรปท 1.17
รปท 1.17 การรน File ทตองการ Test
การเขยนโปรแกรม Java Servlet / JSP
14
3. จะมใหเลอกวาจะใหรน file นท Server ไหน (กรณเรานม Server เดยว) กด Finish ดงรปท 1.18
รปท 1.18 การเลอก Web Application Server ทจะใชรน
4. จะไดผลลพธดงรปท 1.19
รปท 1.19 ผลลพธทไดจากการรน File addCustomer.html
หมายเหต สงเกตททาย hostname จะหมายเลขพอรต ซงกคอ port ท Tomcat Server ใหบรการอย
โดย Default จะเปน 8080 ยกเวนวาจะกำหนดเปนหมายเลขอน
Thanachart Numnonda and Thanisa Kruawaisayawan
15
Exercise 2 การเขยนโปรแกรม Java Servlet เพออานคาพารามเตอร
เนอหาทตองศกษากอน การสรางโปรเจค Web Application และสรางไฟล HTML
แบบฝกหดนจะเปนการพฒนาโปรแกรม Java Servlet เพอแสดงรายละเอยดของคาพารามเตอรทผใชปอน
เขามาออกทางโปรแกรม Web Browser และแสดงผลการออกออกทาง Web Browser
2.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
16
2.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();}
Thanachart Numnonda and Thanisa Kruawaisayawan
17
2.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
การเขยนโปรแกรม Java Servlet / JSP
18
3. กำหนดคา URL Pattern(หรอ URL Mappings) เปน /addCustomer.do
โดยคลกเลอกชอ CustomerServlet แลว กดปม Edit
แลวเปลยน URL Mapping เปน addCustomer.do และกด Finish ดงรปท 2.3
รปท 2.3 การกำหนด URL Pattern
4. จากนนเพมเมธอดทไฟล CustomerServlet.java
สำหรบรบ action ทSubmit มาจาก Http-Request (HTML Form) ทงชนด POST และ GET
โดยตงชอเมธอดวา processRequest( ) โดยเขยน source code ตาม หวขอ 2.1.2
protected void processRequest(HttpServletRequest request,HttpServletResponse response) throws IOException {
// ใหเขยน source code ตาม หวขอ 2.1.2}
Thanachart Numnonda and Thanisa Kruawaisayawan
19
5. เขยน source Code เพมในเมธอด doGet(),doPost()
เพอสงตอ Http-Request ไปยงเมธอด processRequest() โดยเขยน code ดงน
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
รปท 2.4 การรนทดสอบ addCustomer Servlet
การเขยนโปรแกรม Java Servlet / JSP
20
2. ทดลองปอนขอมล ดงรปท 2.5
รปท 2.5 กรอกขอมลทดสอบ Servlet ผานหนา addCustomer.html
3. โปรแกรมจะแสดงผลลพธ ดงรปท 2.6
รปท 2.6 ผลลพธจากการเรยกโปรแกรม CustomerServlet
Thanachart Numnonda and Thanisa Kruawaisayawan
21
Exercise 3 โปรแกรมเวบสำหรบการทำโพล
เนอหาทตองศกษากอน การเขยนโปรแกรม Java Servlet เพออานคาพารามเตอร
แบบฝกหดนจะเปนการพฒนาโปรแกรม Java Servlet เพอทำ Poll โดยใหผใชสามารถทจะโหวตเลอกภาษา
คอมพวเตอรทชอบได แลวโปรแกรมจะแสดงผลการโหวตทาง Web Browser
3.1 โปรแกรม vote.html
โปรแกรม vote.html เปนหนาเวบทใหผใชสามารถทจะทำการโหวตเลอกภาษาคอมพวเตอรได โดยเมอผใช
กดปม Vote โปรแกรมเวบกจะไปทำการเรยก URL ทชอ processVote โปรแกรมนมหนาเวบดงรปท 3.1
รปท 3.1 การแสดงผลของโปรแกรม vote.html
3.2 การพฒนาโปรแกรม VoteServlet.java
โปรแกรม VoteServlet.java เปนโปรแกรมทถกเรยกใชโดย vote.html เมอผใชกดปม Vote โปรแกรมนจะทำ
หนาทเพอนำคาทผใชโหวตมาประมวลผล โดยมการทำงานคอ
1. กำหนดตวแปร counter และ lang
2. อานคาพารามเตอรตางๆทสงมาจาก vote.html และทำการประมวลผล
3. แสดงผลการโหวต
การเขยนโปรแกรม Java Servlet / JSP
22
3.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>"); }
Thanachart Numnonda and Thanisa Kruawaisayawan
23
3.3 ขนตอนการพฒนาโปรเจค Voter เราสามารถทจะพฒนาแบบฝกหดนทชอโปรเจค Voter ตามขนตอนดงน
1. สราง New Project ชนด Dynamic Web Application ชอ Voter ดงรปท 3.2
รปท 3.2 การสรางโปรเจค Web Application ชอ Voter
การเขยนโปรแกรม Java Servlet / JSP
24
2. สรางไฟล HTML ชอ vote ดงรปท 3.3
รปท 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>
Thanachart Numnonda and Thanisa Kruawaisayawan
25
4. เลอกหนาตาง Projects Explorer แลวคลกขวาทโหนด Voter เลอกคำสง New > Servlet
กำหนด Package เปน controller และ Class Name เปน VoteServlet แลวกด Next
กำหนด URL Mapping เปน /processVote แลวกด Finish ดงรปท 3.4
รปท 3.4 การสราง Java Servlet ชอ VoteServlet.java และกำหนด URL Pattern (URL Mapping)
การเขยนโปรแกรม Java Servlet / JSP
26
ในหนาตาง 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;
@WebServlet("/processVote") 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); }}
Thanachart Numnonda and Thanisa Kruawaisayawan
27
5. ทำการ Deploy Web Project ท Apache Tomcat
ไปท Tab Server ดานลาง คลกขวา ท Tomcat Server แลวเลอก Add and Remove ดงรปท 3.5
รปท 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
28
3.4 การปรบปรงโปรแกรม VoteServlet.java
ขนตอนนจะเปนการปรบปรงโปรแกรม 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());}
Thanachart Numnonda and Thanisa Kruawaisayawan
29
สำหรบโปรแกรม VoteServlet.java ทปรบปรงใหมจะม source code ดง Listing ท 3.3 ใหลองทดลองเขยนโปรแกรม
ตามน แลวทำการรนโปรแกรมใหม
Listing ท 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;
@WebServlet("/processVote")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
30
Exercise 4 การเชอมตอกบ MySQL Database
เนอหาทตองศกษากอน -
แบบฝกหดนเปนการเรมตนใชงาน Database Tool เพอเชอมตอกบ Table test ในฐานขอมล MySQL
สำหรบเปนตวชวยใหทำงานไดเรวขน เชนปกตถาจะ create table กตองเขยน SQL แต Tool นม GUI มาชวย ทำใหลดขอผดพลาด และ สะดวกในการทำงานมากขน ทงนการทำแบบฝกหดนจะตองมการ download และตดตงโปรแกรม MySQL และ MySQL Workbench โดยสามารถทำการ download ไดจากเวบ http://dev.mysql.com/
4.1 การเชอมตอ MySQL โดยโปรแกรม MySQL Workbench
ใหเปดโปรแกรม MySQL Workbench ดงรปท 4.1 จากนนทำตามขนตอนดงน
รปท 4.1 การเรยกใชงาน Program MySQL Workbench
1. ดบเบลคลกท Connection Name ใส Password ทกำหนดไวในตอนตดตงโปรแกรม MySQL ซงจะมคาเปน root ดงรปท 4.2
รปท 4.2 การแสดงการเชอมตอ Connection เพอเขาไปจดการ Database
Thanachart Numnonda and Thanisa Kruawaisayawan
31
4.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. คลกท icon ชอ Add Table... แลวใสชอ table และ ชอ field ตามตารางท 4.1 ดงรปท 4.3 แลวกดปม Apply
รปท 4.3 การเลอกคำสงสรางตาราง
การเขยนโปรแกรม Java Servlet / JSP
32
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 ผลลพธจากการสรางตาราง
Thanachart Numnonda and Thanisa Kruawaisayawan
33
4.3 การใชคำสง SQL ใน MySQL WorkBench
ภายหลงจากทมการสราง Table ทชอ books เราสามารถใชคำสง SQL เพอทจะตดตอกบฐานขอมล ในทนจะแสดงการเพมขอมลลงใน Table โดยมขนตอนตางๆดงน
1. ดบเบลคลกท Table books ดานขวา จะได SQL Editor ใหปอนคำสง SQL เปน
INSERT INTO books VALUES ('123', 'JAVA', 'Numnonda', 2500.00);INSERT INTO books VALUES ('456', 'SOA', 'Numnonda', 3000.00) ;
แลว คลกท icon สายฟาสเหลอง ดงรปท 4.5 หรอกด Ctrl+Shift+Enter เพอรนคำสง SQL ทงหมด
รปท 4.5 การ Execute คำสงเพมขอมลในตาราง
การเขยนโปรแกรม Java Servlet / JSP
34
2. เราสามารถทจะดขอมลทปอนเขาไปได โดยการคลกขวาท Table ทชอ books เแลวลอก Select Rows – Limit1000 ดงรปท 4.6
รปท 4.6 การเรยกดขอมลใน Table ชอ books
Thanachart Numnonda and Thanisa Kruawaisayawan
35
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.java
5.1 การ Config Apache Tomcat ใหสามารถใชงาน JDBC Driver
ในทนจะใช Driver ทชอ MySQL Connector/J ซงเปน JDBC Driver ทใชตดตอกบ MySQL
File ทจำเปน คอ mysql-connector-java-5.1.15-bin.jar โดยให Copy ไปวางท directory /lib ของ Apache Tomcat
Default อยท C:\Program Files\Apache Software Foundation\Tomcat 6.0\lib\ ดงรปท 5.1
รปท 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
36
5.2 การสราง Web Application Project
ขนตอนแรกจะทำการสรางโปรเจคใหมโดยการเลอกเมน File → New Project →Dynamic Web
Application
กำหนดชอ Project Name เปน WebBaseDB (ตวอยางการสราง Dynamic Web Application หนา 23)
แลวกด Finish
5.3 การพฒนาโปรแกรม addBook.html
โปรแกรม addBook.html เปนเวบเพจทใชแสดงฟอรมสำหรบปอนขอมลหนงสอใหมเขาในฐานขอมล
books ซงมลกษณะดงรปท 5.2 โปรแกรม addBook.html
รปท 5.2 หนาเวบเพจ addBook.html
ขนตอนการพฒนามดงน
1. คลกขวาทโหนด WebBaseDB จากนนเลอกคำสง New → HTML File (ตวอยาง หนา 24)
กำหนด File Name: เปน addBook แลวกด Finish
2. เขยน source code ของไฟล addBook.html ตาม Listing ท 5.1
หรอ ลาก icon ประเภท HTML Forms ทอยในหนาตาง Palette เพอสามารถใหเขยนโปรแกรมไดงายขน
(ตวอยาง หนา 9 โดยทำตาม รปแบบท 2 ) ดงรปท 5.3
Thanachart Numnonda and Thanisa Kruawaisayawan
37
รปท 5.3 การใชงาน Palette สำหรบการสรางหนาจอ HTML
Listing ท 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>
5.4 การพฒนาโปรแกรม thankyou.html
โปรแกรม thankyou.html เปนเวบเพจทใชแสดงใหเหนวาขอมลไดถกเพมเขาไปในฐานขอมลแลว โดยม
source code ดง Listing ท 5.2 ซงขนตอนการพฒนาโปรแกรมนจะเปนเชนเดยวกบการพฒนาโปรแกรม
addBook.html
การเขยนโปรแกรม Java Servlet / JSP
38
Listing ท 5.2 โปรแกรม thankyou.html
5.5 การพฒนาโปรแกรม AddBookServlet.java
โปรแกรม AddBookServlet.java เปนโปรแกรมทถกเรยกใชโดย addBook.html เมอผใชกดปม Add
โปรแกรมนจะทำหนาทเพอตดตอกบฐานขอมลโดยมขนตอนการทำงานดงน
1. อานคาพารามเตอรตางๆ ทสงมาจาก addBook.html
2. เชอมตอกบฐานขอมล books ดงรปท 5.4
รปท 5.4 การเชอมตอของ Servlet กบฐานขอมล
3. เพมรายชอหนงสอใหมลงในฐานขอมล books
4. เรยกเวบเพจ Thankyou.html
5.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");
5.5.2 การเชอมตอกบฐานขอมล
● เพม Resource ชนด Data source ลงไปท Container ของ Tomcat
● เรยกใชคำสง SQL โดยใชเมธอด executeQuery() หรอ executeUpdate()
Thanachart Numnonda and Thanisa Kruawaisayawan
39
1. เพม Resource ชนด DataSource ลงไปท Tomcat
โดยสราง file context.xml ท Folder \WebBaseDB\WebContent\META-INF\ โดยเรามาคลกขวาท
Folder ทชอ WebContent > META-INF แลวเลอกเมน New > Others > XML File แลวกำหนดชอไฟลเปน
context.xml แลวเขยน sourcecode ดงน
<?xml version="1.0" encoding="UTF-8"?><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>
2. การขอ Data source จะใช @annotation และบอกชอของ Data source ตวทเราตองการ
ตวอยาง source code เชน
@Resource(name = "jdbc/test") private DataSource jdbcTest;
เมอได Data source แลว เรากจะสรางทางตดตอ โดย getConnection จากมนแลวเกบคาไวทตวแปร 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 เพมรายชอหนงสอใหมลงในฐานขอมล
เมอเชอมตอฐานขอมลและไดออปเจคชนด 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 การเรยกเวบเพจ t hankyou.html
เมอขอมลไดถกเพมลงไปในฐานขอมลแลว โปรแกรม AddBookServlet จะทำการเรยกเวบเพจ
thankyou.html โดยการเรยกใช RequestDispatcher ดงน
การเขยนโปรแกรม Java Servlet / JSP
40
RequestDispatcher obj = request.getRequestDispatcher("thankyou.html"); if (numRow == 1 && obj != null) { obj.forward(request,response); }
5.6 ขนตอนการพฒนาโปรแกรม AddBookServlet.java
โปรแกรมมขนตอนในการพฒนาดงน
1. คลกขวาทโหนด WebBaseDB จากนนเลอกคำสง New → Servlet
กำหนด Java 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;
@WebServlet("/addBook.do")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>");
Thanachart Numnonda and Thanisa Kruawaisayawan
41
out.println("<h1> Add a new book </h1>");
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 ไฟลจากแพคเกจใด ดงรปท 5.5 เรยกวาการทำ
Organize Imports
รปท 5.5 Ctrl+Shift+O ให Eclipse เปนตวชวยในการแสดง Import file
5.7 ทดสอบโปรแกรม
1. ทำการ Deploy โปรแกรม WebBaseDB ซงใน Eclipse ทำโดย Click ขวาท Add and Remove
2. เรยกใชงานหนา addBook.html แลวทดสอบกรอกขอมลดงรปท 5.6
การเขยนโปรแกรม Java Servlet / JSP
42
รปท 5.6 ตวอยางการปอนขอมล Books
3. เมอกดปม Add โปรแกรมกจะใสขอมลลงใน Database และแสดงผลลพธดงรปท 5.7
รปท 5.7 ผลลพธทแสดงทาง Web Browser
4. เขาไปดขอมล โดยใช MySQLWorkbench เลอกคำสง Select Rows -... จาก Table ทชอ books ดงรปท 5.8
รปท 5.8 ขอมลทถกปอนเขา Table ทชอ books
Thanachart Numnonda and Thanisa Kruawaisayawan
43
Exercise 6 การพฒนาโปรแกรมเวบเพอตดตอฐานขอมล MongoDB
เนอหาทตองศกษากอน การเขยนโปรแกรม Java Servlet เพออานคาพารามเตอร
แบบฝกหดนจะเปนการพฒนาโปรแกรม Web Application โดยใช Java Servlet เพอเชอมตอกบฐานขอมลท
เปน NoSQL อยาง MongoDB ซงเปนฐานขอมลทเกบขอมลแบบ Document ในรปแบบของ JSON และมสามารถ
ในการเกบขอมลขนาดใหญได
ขนตอนในการพฒนาโปรแกรม
1. ตดตง MongoDB
2. ทดลองใช MongoDB
3. เขยนโปรแกรม Java Servlet เพอเชอมตอกบ MongoDB
6.1 การตดตง MongoDB
โปรแกรมฐานขอมล MongoDB สามารถทำงานในระบบปฎบตการทหลากหลายทง Windows, Mac OS
หรอ Linux สำหรบบนระบบปฎบตการ Windows สามารถตดตงไดโดยการดาวนโหลดไฟล Binary จากเวบไซต
http://www.mongodb.org/downloads ซงเมอทำการดาวนโหลดไฟลดงกลาวแลวใหทำการ unzip เกบไฟลไวใน
ไดเรกทอรทตองการโดยเราจะมไฟลตางๆดงรป
รปท 6.1 ไฟลไบนารตางๆของ MongoDB
ซงไฟลทสำคญกคอ
• mongod.exe ทเปน Database Server
• mongo.exe ทเปนหนาจอของ admin
โดย Default MongoDB จะเกบขอมลไวทไดเรกทอร \data\db ซงเราจะตองไปสรางไดเรกทอรดงกลาวภายใต
Drive C
การเขยนโปรแกรม Java Servlet / JSP
44
6.2 การใช MongoDB
เราสามารถทจะทดลองการใชงาน MongoDB โดยการเปดโปรแกรม Mongo.exe ซงกจะเปนโปรแกรม
command shell ของ administrator และโดย Default กจะกำหนดใช ฐานขอมลทชอ test ซงเราสามารถทจะแสดง
ฐานขอมลทใชอยโดยการพมพคำสง
> db
คำสงทจะแสดงรายชอฐานขอมล (database)ทงหมดคอ
>show dbs
เราสามารถทจะสรางฐานขอมลใหมทชอวา mydatabase โดยใชคำสง
>use mydatabase
คำสงทจะแสดง Tables ทงหมดในฐานขอมลคอ
>show collections
และเราสามารถทจะเรยกดคำสงในการชวยเหลอโดย
>help
สำหรบในตวอยางนเราจะทำการทดลองสรางขอมลของหนงสอ สองเลมดงน
> db.books.insert({isbn:"555123", author:"thanachart", title:"Introduction to MongoDB", price:1200})
และสามารถทำการเพมขอมลไดโดยคำสงตอไปน
> new_book = {isbn:"555124", author:"James Gosling", title: "Java SE", price: 1400}
> db.books.insert(new_book)
เราสามารถทจะดขอมลของหนงสอทงหมดไดจากคำสง
> db.books.find()
ซงกจะไดผลลพธดงน
{ "_id" : ObjectId("511fb0387c199204a9f733a5"), "isbn" : "555123", "author" : "thanachart", "title" :
"Introduction to MongoDB", "price" : 1200 }
{ "_id" : ObjectId("511fb24e7c199204a9f733a6"), "isbn" : "555124", "author" : "James Gosling", "title" : "Java
SE", "price" : 1400 }
ทงน id จะเปน index ในการระบหมายเลขของขอมล นอกจากนเราสามารถทจะคนหาขอมลสำหรบราย
การใดๆไดเชน การคนหาตามชอผแตง
> db.books.find({author:"thanachart"})
หรออาจตองการคนชอหนงสอทมคำวา Mongo
Thanachart Numnonda and Thanisa Kruawaisayawan
45
> db.books.find({title:/Mongo/})
เราสามารถทจะ update ขอมล เชนตองการเปลยนราคาของหนงสอทแตงโดย thanachart เปน 1300 โดย
ใชคำสง
> db.books.update({author:"thanachart"},{$set: {price:1300}})
เราจะลองทำการเพม comment ของหนงสอเชนมผอานทชอ Somchai อาจมาใหความเหนวาหนงสอของ
James Gosling เปน “good reading book” โดยเราอาจใชคำสงดงน
> new_comment = {reader:"Somchai", date: new Date(), text: "good reading book"}
> db.books.update({author:/James/},{$push: {comment:new_comment}})
ซงเราจะไดขอมลนใหมเปน
{ "_id" : ObjectId("511fb0387c199204a9f733a5"), "isbn" : "555123", "author" : "thanachart", "title" :
"Introduction to MongoDB", "price" : 1300 }
{ "_id" : ObjectId("511fb24e7c199204a9f733a6"), "author" : "James Gosling", "comment" : [ {
"reader" : "Somchai", "date" : ISODate("2013-02-16T16:45:07.309Z"), "text" : "good reading
book" } ], "isbn" : "555124", "price" : 1400, "title" : "Java SE" }
6.3 การเขยนโปรแกรม Java Servlet เพอเชอมตอกบ MongoDB
เราสามารถทจะเขยนโปรแกรมเชอมตอกบฐานขอมล MongoDB ไดหลายแบบ แตในทนจะใช
MongoDB Driver ทสามารถจะดาวนโหลดมาไดจาก https://github.com/mongodb/mongo-java-driver/downloads
ในทนจะสาธตการเพมขอมลลงใน MongoDB เชนเดยวกบเนอหาในบททผานมาโดยเราจะใหม
โปรแกรม addBook.html ดง Listing ท 5.1 แตใหแก tag action ดงน
<form action="MongoDBServlet" method="POST">
และทำการเขยนโปรแกรม Servlet โดยมขนตอนดงน
1. คลกขวาทโหนด WebBaseDB จากนนเลอกคำสง New → Servlet
กำหนด Java Package เปน controller , Class Name เปน MongoDBServlet แลวกด Finish
2. copy ไฟล mongo-2.10.1.jar ไปไวทไดเรกทอร โดยให Copy ไปวางท directory /lib ของ Apache Tomcat
ซง Default อยท C:\Program Files\Apache Software Foundation\Tomcat 6.0\lib\
3. ในหนาตาง editor ใหแกไข source code ของไฟล MongoDBServlet.java ใหเปนไปตาม Listing ท 6.1
Listing ท 6.1 โปรแกรม MongoDBServlet.java
package controller;
import java.io.IOException;
การเขยนโปรแกรม Java Servlet / JSP
46
import java.io.PrintWriter;import java.net.UnknownHostException;import java.sql.SQLException;import java.sql.Statement;
import javax.servlet.RequestDispatcher;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;
import com.mongodb.BasicDBObject;import com.mongodb.DB;import com.mongodb.DBCollection;import com.mongodb.Mongo;
/** * Servlet implementation class MongoDBServlet */@WebServlet("/MongoDBServlet")public class MongoDBServlet extends HttpServlet {
private static final long serialVersionUID = 1L;Mongo m = null;
/** * @see HttpServlet#HttpServlet() */ public MongoDBServlet() { super(); // TODO Auto-generated constructor stub } public void init() {
try {m = new Mongo( "localhost" );System.out.println("Connected");
} 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>"); 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);
DB db = m.getDB( "test" );BasicDBObject book = new BasicDBObject();book.put("isbn", isbn);book.put("author", author);book.put("title", title);book.put("price", price);DBCollection coll = db.getCollection("books");coll.insert(book);
Thanachart Numnonda and Thanisa Kruawaisayawan
47
RequestDispatcher obj =request.getRequestDispatcher("thankyou.html");obj.forward(request, response);
} catch (UnknownHostException 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);}
}
6.4 ทดสอบโปรแกรม
1. ทำการ Deploy โปรแกรม WebBaseDB
2. เรยกใชงานหนา addBook.html แลวทดสอบกรอกขอมล
3. ไปทโปรแกรม admin ของ MongoDB แลวเรยกคำสง db.books.find() จะเหนขอมลใหมทปอนเขามา
การเขยนโปรแกรม Java Servlet / JSP
48
Exercise 7 โปรแกรมเวบเพอสาธตขอบเขตของออปเจค
เนอหาทตองศกษากอน การเขยนโปรแกรม Servlet เพออานคาพารามเตอร
แบบฝกหดนจะเปนการพฒนาโปรแกรม Java Servlet เพออธบายขอบเขตการทำงานของออปเจคใน
โปรแกรมแบบเวบ (Object Scope) ทมอยสแบบคอ Page, Request, Session และ Web (Application) โดยจะทดลอง
สงคาของออปเจคผานกนระหวางโปรแกรม Servlet สองชด
7.1 การพฒนาโปรแกรมเพอสาธตขอบเขตของ Object แบบ Request
ออปเจคทสรางขนในโปรแกรม Java Servlet ในแตโปรแกรมจะมขอบเขตการใชงาน (scope) อยเพยงแค
โปรแกรมนนๆ (URL นนๆ) ไมสามารถทจะใชโปรแกรม Java Servlet หรอ JSP ตวอนเรยกใชออปเจคตวนนได การ
จะใหโปรแกรม Servlet หรอ JSP อนๆ เรยกออปเจคใดๆ ไดนน จะตองมการเขยน source code เพอสงผานคาขอ
งออปเจคนนไปยงออปเจคอนๆ ทงนเราสามารถกำหนดขอบเขตการใชงานเพมเตมไดอก 3 แบบคอ
● Request ออปเจคสามารถถกเรยกใชเมอมการเรยกมาจากโปรแกรม Servlet/JSP อน
● Session ออปเจคจะเกบอยใน Session ของ Web Browser ตราบเทาทยงมการใชงานอย
● Application ออปเจคจะสามารถใชงานไดในโปรแกรม Servlet/JSP ใดๆ
ทอยใน Web Application เดยวกน
การสงคาของออปเจคจาก URL หนงมายง URL อนทำไดหลายวธ แบบฝกหดทผานมาเปนการแสดงใหเหน
ถงการสงคาพารามเตอรทอยในฟอรมของไฟล HTML ไปยงโปรแกรม Java Servlet ทสามารถเรยกใชไดโดย คำสง
request.getParameter()
นอกจากนเรายงสามารถทจะสงออปเจคไปยง โปรแกรม Java Servlet หรอ JSP อนโดยการใชคำสง
setAttribute() อาทเชนสงคาของตวแปร String ชอวา name โดยจะเกบไวใน attribute ทชอ RequestName และมรป
แบบคำสงดงน
String name = “Numnonda”;
request.setAttribute(“RequestName”, name);
ซงจะทำให URL ททำการเรยกถดไปสามารถเรยกใช attribute ทชอ RequestName และดงคาของตวแปร
name ออกมาได โดยใชคำสง getAttribute() โดยมรปแบบดงน
String name = (String) request.getAttribute(“RequestName”);
สวนคำสงทใชในการทจะ forward จากโปรแกรม Servlet ตวหนงไป URL อนจะเปนคำสงทมรปแบบดงน
RequestDispatcher obj = request.getRequestDispatcher("SecondServlet");obj.forward(request,response);
โดยท SecondServlet คอชอ URL ทตองการ forward
ในขนตอนนจะเปนการพฒนาโปรแกรมเพอสาธตการทำงานของขอบเขตการทำงานของ Object แบบ
request โดยการพฒนาโปรแกรม Servlet ขนมาสองโปรแกรมคอ FirstServlet ทจะใชในการสงออปเจคซงม source
code ตาม Listing ท 7.1 และ โปรแกรม SecondServlet ทจะใชในการอานคาของออปเจคทสงออกมาแลวนำมา
แสดงผล ซงม source code ตาม Listing ท 7.2
Thanachart Numnonda and Thanisa Kruawaisayawan
49
Listing ท 7.1 โปรแกรม FirstServlet.java
package servlet;
import java.io.*;import java.net.*;
import javax.servlet.*;import javax.servlet.http.*;
public class FirstServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter(); response.setContentType("text/html;charset=UTF-8");
try { String name = "Numnonda"; request.setAttribute("RequestName", name); RequestDispatcher obj = request.getRequestDispatcher("SecondServlet"); obj.forward(request, response); } finally { 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"; }}
Listing ท 7.2 โปรแกรม SecondServlet.java
package servlet;
import java.io.*;import java.net.*;
import javax.servlet.*;import javax.servlet.http.*;
public class SecondServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter(); response.setContentType("text/html;charset=UTF-8");
try { String name = (String) request.getAttribute("RequestName"); out.println(name); } finally { out.close();
การเขยนโปรแกรม Java Servlet / JSP
50
} }
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"; }}
7.1.1 ขนตอนการพฒนาโปรแกรมเพอสาธตขอบเขตของ Object แบบ Request
เราสามารถทจะพฒนาโปรแกรม ตามขนตอนดงน
1. เลอกเมน File → New → Dynamic Web Application
กำหนดคา Project Name เปน ScopeDemo
2. คลกขวาทโหนด ScopeDemo → New → Servlet
กำหนดคา Java Package เปน servlet และ Class Name เปน FirstServlet แลวกด Finish
ในหนาตาง Editor เขยน Source code ของ FirstServlet.java ดง Listing ท 7.1 แลว Save
3. คลกขวาทโหนด ScopeDemo อกครง
จากนนเลอกคำสง New → Servlet
กำหนด Java Package เปน servlet และ Class Name เปน SecondServlet แลวกด Finish
4. ในหนาตาง Editor เขยน Source code ของ SecondServlet.java ดง Listing ท 7.2 แลว Save
7.1.2 ขนตอนการทดสอบโปรแกรมเพอสาธตขอบเขตของ Object แบบ Request
เราสามารถทจะทดสอบโปรแกรม ตามขนตอนดงน
1. ทำการ Deploy โปรเจค ScopeDemo โดยคลกขวาท Apache Tomcat แลว Add and Remove Project เขาไป
ดงรปท 7.1
Thanachart Numnonda and Thanisa Kruawaisayawan
51
รปท 7.1 การ Add Project เขาส Apache Tomcat หรอเรยกวาการ Deploy
2. ทำการ Run โปรเจค ScopeDemo
3. ในโปรแกรม Web Browser เลอก URL ทชอ http://localhost:8080/ScopeDemo/FirstServlet สงเกตผลลพธ
4. ทดลองรน URL ทชอ http://localhost:8080/ScopeDemo/SecondServlet โดยตรง แลวสงเกตผลลพธอกครง
จะเหนวา คาทแสดงเปน null ทงนเนองจากโปรแกรมไมไดมการสง request มาจาก FirstServlet
7.2 การพฒนาโปรแกรมเพอสาธตขอบเขตของ Object แบบ Session
ขอบเขตการใชงานของออปเจคแบบ Request จะสงผานคาของออปเจคตาม request ของ URL ทงนไม
สามารถทจะใชงานไดโดยการเรยก URL นนโดยไมมการสง request มาดงแสดงในขนตอนทผานมา เราสามารถทจะ
กำหนดขอบเขตของการใชงานของออปเจค ใหใชงานผานใน session ของ Web Browser ได (ตราบเทาท Browser ยง
ใช session นนอย) โดยการกำหนด Attribute ลงในออปเจคชนด HttpSession ซงจะเปนออปเจคทเกบขอมล
session ของ Web Browser อาทเชนเกบคาของตวแปร String ชอวา name ไวใน attribute ของ session ทชอ
SessionName โดยมรปแบบคำสงดงน
String name = "Numnonda";HttpSession session = request.getSession();session.setAttribute("SessionName", name);
โปรแกรม Java Servlet อนๆสามารถทจะเรยกใช attribute ของ Session ทชอ SessionName และดงคาของ
ตวแปร name ออกมาได โดยใชคำสง getAttribute() เพอเรยกคาจาก Session โดยมรปแบบดงน
HttpSession session = request.getSession();String name = (String) session.getAttribute("SessionName");
การเขยนโปรแกรม Java Servlet / JSP
52
ในขนตอนนจะเปนการพฒนาโปรแกรมเพอสาธตการทำงานของขอบเขตการทำงานของ Object แบบ
session โดยการพฒนาโปรแกรม Servlet ขนมาสองโปรแกรมคอ FirstSessionServlet ทจะใชในการสงออปเจคซงม
source code ตาม Listing ท 7.3 และ โปรแกรม SecondSessionServlet ทจะใชในการอานคาของออปเจคทสงออกมา
แลวนำมาแสดงผล ซงม source code ตาม Listing ท 7.4
Listing ท 7.3 โปรแกรม FirstSessionServlet.java
package servlet;import java.io.*;import java.net.*;import javax.servlet.*;import javax.servlet.http.*;public class FirstSessionServlet extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { String name = "Numnonda"; HttpSession session = request.getSession(); session.setAttribute("SessionName", name); } finally { 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"; } }
Listing ท 7.4 โปรแกรม SecondSessionServlet.java
package servlet;
import java.io.*;import java.net.*;
import javax.servlet.*;import javax.servlet.http.*;
public class SecondSessionServlet extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { HttpSession session = request.getSession(); String name = (String) session.getAttribute("SessionName");
Thanachart Numnonda and Thanisa Kruawaisayawan
53
out.println(name); } finally { 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"; }
}
7.2.1 ขนตอนการพฒนาโปรแกรมเพอสาธตขอบเขตของ Object แบบ Session
เราสามารถทจะพฒนาโปรแกรม ตามขนตอนดงน
1. เลอกเมน File → New แลวเลอก Dynamic Web Application
กำหนด Project Name เปน ScopeDemo
2. คลกขวาทโหนด ScopeDemo จากนนเลอกคำสง New → Servlet
กำหนด Java Package เปน servlet และ Class Name เปน FirstServlet แลวกด Finish
3. ในหนาตาง Editor เขยน Source code ของ FirstSessionServlet.java ดง Listing ท 6.3 แลว Save
4. คลกขวาทโหนด ScopeDemo อกครง
จากนนเลอกคำสง New → Servlet
กำหนด Package เปน servlet และ Class Name เปน SecondServlet แลวกด Finish
ในหนาตาง Editor เขยน Source code ของ SecondSessionServlet.java ดง Listing ท 6.4 แลว Save
7.2.2 ขนตอนการทดสอบโปรแกรมเพอสาธตขอบเขตของ Object แบบ Session
เราสามารถทจะทดสอบโปรแกรม ตามขนตอนดงน
1. ทำการ Deploy โปรเจค ScopeDemo
2. ทำการ Run โปรเจค ScopeDemo
3. ในโปรแกรม Web Browser เลอก URL ทชอ http://localhost:8080/ScopeDemo/FirstSessionServlet
4. ทดลองรน URL ทชอ http://localhost:8080/ScopeDemo/SecondSessionServlet แลวสงเกตผลลพธ
5. ทดลองปด Web Browser แลวเปดขนมาใหมแลวทดลองรน URL ทชอ
http://localhost:8080/ScopeDemo/SecondSessionServlet ใหมแลวสงเกตผลลพธ
การเขยนโปรแกรม Java Servlet / JSP
54
7.3 การพฒนาโปรแกรมเพอสาธตขอบเขตของ Object แบบ Application
เราสามารถทจะกำหนดขอบเขตการใชงานของออปเจคใหเปนแบบ Application กลาวคอสามารถใชกบ
โปรแกรม Java Servlet หรอ JSP ทกโปรแกรมทอยภายใน Web Application เดยวกนตราบใดท Web Server ยง
deploy โปรแกรม Web Application ดงกลาวอย ถงแมวา Web Browser ของฝง client จะปดไปแลวกตาม การกำหนด
ขอบเขตแบบ Application สามารถทำไดโดยใชคำสง setAttribute() กบออปเจคชนด ServletContext ซงเปนออปเจค
ทเกบขอมลของ Web Application ซงในแตละ Web Application จะมออปเจคชนด ServletContext อยหนงตว และ
สามารถเรยกมาไดโดยใชคำสง getServletContext()
ตวอยางคำสงในการเกบออปเจคชนด String ทชอ name ไวใน attribute ทชอ AppName ของออปเจค ชนด
ServletContext จะมรปแบบคำสงดงน
String name = "Numnonda"; ServletContext context = getServletContext(); context.setAttribute("AppName", name);
โปรแกรม Java Servlet อนๆสามารถทจะเรยกใช attribute ของออปเจคชนด ServletContext ทชอ
AppName และดงคาของตวแปร name ออกมาได โดยใชคำสง getAttribute() เพอเรยกคาจากออปเจคชนด
ServletContext โดยมรปแบบดงน
ServletContext context = getServletContext(); String name = (String) context.getAttribute("AppName"); out.println(name);
ในขนตอนนจะเปนการพฒนาโปรแกรมเพอสาธตการทำงานของขอบเขตการทำงานของ Object แบบ
application โดยการพฒนาโปรแกรม Servlet ขนมาสองโปรแกรมคอ FirstAppServlet ทจะใชในการสงออปเจคซงม
source code ตาม Listing ท 7.5 และ โปรแกรม SecondAppServlet ทจะใชในการอานคาของออปเจคทสงออกมา
แลวนำมาแสดงผล ซงม source code ตาม Listing ท 7.6
Listing ท 7.5 โปรแกรม FirstAppServlet.java
package servlet;import java.io.*;import java.net.*;import javax.servlet.*;import javax.servlet.http.*;
public class FirstAppServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { String name = "Numnonda"; ServletContext context = getServletContext(); context.setAttribute("AppName", name); } finally { out.close(); } }
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response);
Thanachart Numnonda and Thanisa Kruawaisayawan
55
} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); }
public String getServletInfo() { return "Short description"; }}
Listing ท 7.6 โปรแกรม SecondAppServlet.java
package servlet;import java.io.*;import java.net.*;import javax.servlet.*;import javax.servlet.http.*;
public class SecondAppServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { ServletContext context = getServletContext(); String name = (String) context.getAttribute("AppName"); out.println(name); } finally { 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); }}
7.3.1 ขนตอนการพฒนาโปรแกรมเพอสาธตขอบเขตของ Application
เราสามารถทจะพฒนาโปรแกรม ตามขนตอนดงน
1. เลอกเมน File → New แลวเลอก Dynamic Web Application
กำหนด Project Name เปน ScopeDemo
2. คลกขวาทโหนด ScopeDemo จากนนเลอกคำสง New → Servlet
กำหนด Java Package เปน servlet และ Class Name เปน FirstServlet แลวกด Finish
3. ในหนาตาง Editor เขยน Source code ของ FirstAppServlet.java ดง Listing ท 6.5 แลว Save
4. คลกขวาทโหนด ScopeDemo อกครง
จากนนเลอกคำสง New → Servlet
กำหนด Java Package เปน servlet และ Class Name เปน SecondServlet แลวกด Finish
ในหนาตาง Editor เขยน Source code ของ SecondAppServlet.java ดง Listing ท 6.6 แลว Save
การเขยนโปรแกรม Java Servlet / JSP
56
7.3.2 ขนตอนการทดสอบโปรแกรม เพอสาธตขอบเขตของ Object แบบ Applicatio n
เราสามารถทจะทดสอบโปรแกรม ตามขนตอนดงน
1. ทำการ Build และ Deploy โปรเจค ScopeDemo
2. ทำการ Run โปรเจค ScopeDemo
3. ในโปรแกรม Web Browser เลอก URL ทชอ http://localhost:8080/ScopeDemo/FirstAppServlet
4. ทดลองรน URL ทชอ http://localhost:8080/ScopeDemo/SecondAppServlet แลวสงเกตผลลพธ
5. ทดลองปด Web Browser แลวเปดขนมาใหมแลวทดลองรน URL ทชอ
http://localhost:8080/ScopeDemo/SecondAppServlet ใหมแลวสงเกตผลลพธ
Thanachart Numnonda and Thanisa Kruawaisayawan
57
Exercise 8 การพฒนา WebBase DB โดยคลาสประเภท Web Listener
เนอหาทตองศกษากอน การพฒนาโปรแกรมเวบเพอตดตอกบฐานขอมล
แบบฝกหดนจะเปนการปรบปรงโปรเจค Web Application ทชอ WebBaseDB ทใชในการเชอมโยงฐาน
ขอมลและใสขอมลลง Table โดยเพมคลาสประเภท Web Listener เพอทำการเชอมตอกบฐานขอมลแทนวธการเดมท
เชอมตอในเมธอด init()
ขนตอนในการพฒนาโปรแกรม
1. พฒนาโปรแกรม Init.java
2. แกไขโปรแกรม AddBookServlet.java
8.1 การพฒนาโปรแกรม Init.java
โปรแกรม AddBookServlet กำหนดคำสงในการเชอมตอกบขอมลทอยในเมธอด init() ซงเปนวธการทไม
เหมาะสมนก เนองจากโปรแกรม Servlet ทกโปรแกรมทจะเชอมตอกบฐานขอมลตองเขยนโปรแกรมในสวนของ
เมธอด init() ทซำกน
โปรแกรม Servlet จะม Listener อยสองชนดคอ 1. Context Listener และ 2. Session Listener
ในแบบฝกหดนจะพฒนาโปรแกรมโดยการใช Context Listener ซงมนจะถกเรยกเมอ Web Application
เรมตนการทำงาน หรอสนสดการทำงาน
เราจะเขยนโปรแกรมประเภท Context Listener โดยมขนตอนดงน
1. เขยน คลาสประเภท Listener ( คอ Class ท implements interface ServletContextListener )
2. Implements method ทบงคบใน Interface ของ Listener นนๆ
โปรแกรม Init.java คอโปรแกรมทเปน ServletContextListener มนจะเชอมตอกบฐานขอมล
เมอ Web Application เรมทำงาน แลวเกบออปเจค Connection ไวภายใน ServletContext เพอลดจำนวนครงในการ
เชอมตอฐานขอมล
เขยนคำสงเชอมตอฐานขอมลทำท Method contextInitialized( ) ซงจะถกเรยกเมอ Web Application เรมตน
การทำงาน
การเขยนโปรแกรม Java Servlet / JSP
58
ขนตอนการพฒนาโปรแกรม Init.java
1. คลกขวาทโหนด WebBaseDB แลวเลอกคำสง New → Listener
กำหนดคา Java Package เปน listener และ Class Name เปน Init กด Next
แลวเลอกชอง Lifecycle แลวกด Finish ดงรปท 8.1
รปท 8.1 การสรางคลาสประเภท Web Listener
2. ตรวจสอบ context.xml วามอยหรอไม ถาไมมให เพม Resource ชนด DataSource ลงไปท Tomcat
โดยสราง file context.xml ท Folder \WebContent\META-INF\
<Context>
<Resource
Thanachart Numnonda and Thanisa Kruawaisayawan
59
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>
3. เขยน source code อยนอกเมธอดใดๆ เพอใหใชทงในเมธอด contextInitialized และ contextDestroyed เพอ
ทำการขอ Datasource จาก Container สวนตวแปร ds ทรบเปน Instance Member
@Resource(name="jdbc/test")
private DataSource jdbcTest;
private Connection conn;
เพม source code (ขอ 4 - 5) ใน เมธอด contextInitialized เพอเตรยม connection ใหพรอมใชงาน
4. ขอ Connection จาก Datasource
conn = ds.getConnection();
5. นำ Connection ไปเกบท ServletContext แลว กำหนดชอ context variable เปน connection
(arg0 คอ instance ของ ServletContextEvent ทสงมาใหทาง argument)
arg0.getServletContext().setAttribute("connection", conn);
6. เพมคำสงตอไปนในเมธอด contextDestroyed เพอใหทำลาย Database Connection
กรณ Web Application หยดใชงาน
public void contextDestroyed(ServletContextEvent arg0) {
try{
conn.close();
} catch (SQLException ex) {
Logger.getLogger(Init.class.getName()).log(Level.SEVERE, null, ex);
}
}
เราจะได source code ของไฟล Init.java ดง Listing ท 8.1
Listing ท 8.1 โปรแกรม Init.java
package listener;
import java.sql.Connection;import java.sql.SQLException;
import javax.annotation.Resource;import javax.servlet.ServletContextEvent;import javax.servlet.ServletContextListener;import javax.sql.DataSource;
public class Init implements ServletContextListener { @Resource(name="jdbc/test") private DataSource jdbcTest;
private Connection conn;
การเขยนโปรแกรม Java Servlet / JSP
60
public void contextInitialized(ServletContextEvent arg0) { try {
conn = jdbcTest.getConnection(); arg0.getServletContext().setAttribute("connection", conn);
} catch (SQLException e) {e.printStackTrace();
} }
public void contextDestroyed(ServletContextEvent arg0) { try {
conn.close();} catch (SQLException e) {
e.printStackTrace(); } }}
8.2 การปรบปรงโปรแกรม AddBookServlet.java
โปรแกรม Init.java จะมำหนาทในการเชอมตอกบฐานขอมล ดงนนเราจงตองแกไขคำสงการเชอมโยงฐาน
ขอมลทอยในไฟล AddBookServlet.java โดยมขนตอนดงน
1. ใหลบคำสง
@Resource(name = "jdbc/test")private DataSource jdbcTest;
2. แกไขเมธอด init() ใหเปนดงน
public void init() {conn = (Connection) getServletContext().getAttribute("connection");
}
เราจะไดโปรแกรม AddBookServlet.java ใหมดง Listing ท 8.2
Lisitng ท 8.2 โปรแกรม 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.servlet.RequestDispatcher;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;
@WebServlet("/addBook.do")public class AddBookServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private Connection conn;
public void init() {conn = (Connection) getServletContext().getAttribute("connection");
Thanachart Numnonda and Thanisa Kruawaisayawan
61
}
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>");
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);
}}
8.3 ทดสอบโปรแกรม
1. ทำการ Build และ Deploy โปรแกรม WebBaseDB
2. Run โปรแกรม WebBaseDB ทงนตองทำการรน MySQL Database Server กอน
3. โปรแกรมจะแสดงหนา addBook.html ใหเราใสขอมล
ซงเมอกด OK ผลลพธกจะถกบนทกลง Table books เชนเดยวกบแบบฝกหดท 5
การเขยนโปรแกรม Java Servlet / JSP
62
Exercise 9 การพฒนาโปรแกรม Servlet Filter
เนอหาทตองศกษากอน การเขยนโปรแกรม Servlet เพออานคาพารามเตอร
แบบฝกหดนจะเปนการพฒนาโปรแกรม Web Application เพออธบายการใช Servlet Filter ในการตรวจ
สอบการ login เขาสระบบ โดยโปรแกรม Java Servlet บางโปรแกรมทอยใน Web Application จะถก Filter เรยกเพอ
ตวสอบสถานะการ login กอนทจะสามารถใชโปรแกรมนนได
9.1 การพฒนาโปรแกรม Servlet Filter
โปรแกรม Servlet Filter เปนโปรแกรม Java ทกำหนดขนมาใน Web Application ซงจะดกการทำงานของ
โปรแกรม Java Servlet ใดๆ แลวสามารถทจะแกไขคาของออปเจคชนด request และ response กอนทโปรแกรม Java
Servlet นนจะถกเรยกใชตอไป ตวอยางของการพฒนาโปรแกรม Servlet Filter คอ
● การควบคมการใชงาน Servlet หรอการทำ Authentication
● การบลอกการใชงาน Servlet หรอตรวจสอบการใชงาน Servlet
● การเปลยนแปลงขอมลของออปเจค request
โปรแกรม Servlet Filter จะเปน โปรแกรม Java ท implements อนเตอรเฟสทชอ Filter และมเมธอดหลกคอ
init( ), destroy( ) และ doFilter( )
เราสามารถทจะกำหนดให URL ใดๆ ในโปรแกรม Web Application ถก Filter จากโปรแกรม Servlet Filter
ใดๆ โดยการกำหนดคา annotation อาทเชนคำสง
@WebFilter("*")public class LoginFilter implements Filter { …}
เปนการกำหนดใหโปรแกรม URL ทกตวทอยใน Web Application น ตองถกดกโดย Servlet Filter ท
ชอ LoginFilter
แบบฝกหดนจะกำหนดใหม Web Page ทชอ login.html ซงจะทำการเรยกโปรแกรม LoginServlet ซงจะตรวจสอบ
คา username และ password ทปอนเขามา หากถกตองกจะกำหนดใหคาของออปเจคทชอ loginFlag เปน true
(กำหนดใหขอบเขตของออปเจค loginFlag เปนแบบ Session โดยการ setAttribute ใหกบออปเจคชนด
HttpSession )
โปรแกรม Web Application นยงม Servlet Filter ทชอ LoginFilter ซงจะทำหนาทอานคาของออปเจค
LoginFlag ทอยในออปเจคชนด HttpSession ถาหากไมพบหรอมคาเปน false โปรแกรมจะระบ HTTP Error 401
(This request requires HTTP authentication . )
สดทายจะมการเขยนโปรแกรม Java Servlet ทชอ ShowServlet เพอแสดงขอความวา HelloWorld เพอแสดง
ใหเหนวาโปรแกรมจะถกดกโดย LoginFilter
Thanachart Numnonda and Thanisa Kruawaisayawan
63
9.2 การเขยนหนา Login
หนา Login จะมโปรแกรมสองโปรแกรมคอ login.html ซงจะเปน web page ทมลกษณะดงรปท 9.1 และม
source code ตาม Listing ท 9.1 นอกจากจะมโปรแกรม LoginServlet ซงจะทำหนาทในการอานพารามเตอรทชอ
username และ password พรอมทงตรวจสอบวามคาเปน thana และ secret หรอไม หากใชกจะกำหนดคา ตวแปร
loginFlag เปน true แลวเกบลงในออปเจคชนด HttpSession โปรแกรมนจะม source code ดง Listing ท 9.2
รปท 9.1 เวบหนา Login
Listing ท 9.1 โปรแกรม login.html
<html> <head><title>Login Page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <form action="LoginServlet" method="POST"> UserName: <input name="username" /> <br> Password: <input type="password" name="password" /> <br> <input type="submit" value="Login" /> </form> </body></html>
Listing ท 9.2 โปรแกรม LoginServlet.java
package controller;import java.io.*;import java.net.*;import javax.servlet.*;import javax.servlet.http.*;
@WebServlet("/LoginServlet")public class LoginServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
boolean loginflag=false;try{String username =request.getParameter("username");String password =request.getParameter("password");System.out.println("input username="+username + ": password="+password);if(username.equals("thana") && password.equals("secret")){
loginflag=true;}request.getSession().setAttribute("loginFlag", loginflag);response.sendRedirect("show.do");}catch (Exception e) {
e.printStackTrace();}
การเขยนโปรแกรม Java Servlet / JSP
64
}
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"; }}
ขนตอนการพฒนาโปรแกรม
1. สรางโปรเจคใหมโดยการเลอกเมน File → New → Dynamic Web Project แลวกำหนด Project เปน
FilterDemo แลวกด Finish
2. สรางไฟล login.html โดยคลกขวาท FilterDemo แลวเลอกคำสง New → HTML File
กำหนด HTML File Name เปน login แลวกด Finish
3. ในหนาตาง Editor เขยน Source code ของ login.html ดง Listing ท 9.1 แลว Save
4. สรางไฟล LoginServlet.java โดยคลกขวาท FilterDemo แลวเลอกคำสง New → Servlet
กำหนดคา Java Package เปน controller และ Class Name เปน LoginServlet.java แลวกด Finish
ในหนาตาง Editor เขยน Source code ของ LoginServlet.java ดง Listing ท 9.2 แลว Save
9.3 การเขยน Servlet Filter
โปรแกรม LoginFilter จะทำหนาทในการเรยก attribute ทชอ loginFlag และหากไมพบหรอมคาเปน
false โปรแกรมจะระบ HTTP Error 401 (Unauthorize) โปรแกรม LoginFilter จะม source code หลก
อยท เมธอด doFilter() ดง Listing ท 9.3
กรณนจะกำหนดให URL เฉพาะทเปน *.do จงจะเรยกใช Filter ทชอ LoginFilter ใหใชโปรแกรม
Eclipse สราง Filter
Listing ท 9.3 เมธอด doFilter() ของ โปรแกรม LoginFilter.java
package filter;
import javax.servlet.*;import javax.servlet.http.*;
@WebFilter("*.do")public class LoginFilter implements Filter {
public void destroy() {}
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
HttpServletRequest req = (HttpServletRequest) request;
HttpSession session = req.getSession();
Thanachart Numnonda and Thanisa Kruawaisayawan
65
Boolean flag = (Boolean) session.getAttribute("loginFlag"); boolean loginFlag; if (flag == null) { loginFlag = false; } else { loginFlag = flag; } if (!loginFlag) { HttpServletResponse res = (HttpServletResponse) response; res.sendError(HttpServletResponse.SC_UNAUTHORIZED); return; }
chain.doFilter(request, response);}public void init(FilterConfig fConfig) throws ServletException {}
}
ขนตอนการพฒนาโปรแกรม
1. เลอกหนาตาง Projects แลวคลกขวาทโหนด FilterDemo จากนนเลอกคำสง New > Other..
2. ในไดอะลอก New File ใหเลอก Categories ทชอ Web ซงโปรแกรมกจะแสดง File Types ตางๆ ภายใต
Category น ใหเราเลอก Filter แลวกด Next
3. กำหนด Class Name: เปน LoginFilter และ Java Package เปน filter แลวกด Next
4. ในหนาถดไป ใหใชคาทกำหนดไว ดงรปท 9.2 แลวกด Finish
การเขยนโปรแกรม Java Servlet / JSP
66
รปท 9.2 การกำหนดคาของ Filter
5. ในหนาตาง Editor เขยน Source code ของเมธอด doFilter() ของไฟล LoginFilter.java ดง Listing ท
9.3 แลว Save
Thanachart Numnonda and Thanisa Kruawaisayawan
67
9.4 การเขยนโปรแกรม ShowServlet
โปรแกรม ShowServlet จะทำหนาทเพอแสดงขอความวา Hello World และใหใชงาน Filter
source code ดง Listing ท 9.4
Listing ท 9.4 เมธอด processRequest() ของโปรแกรม ShowServlet.java
protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); response.setContentType("text/html;charset=UTF-8"); try { out.println("<html>"); out.println("<head>"); out.println("<title>Servlet ShowServlet</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1> Hello World </h1>"); out.println("</body>"); out.println("</html>"); } finally { 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); }}
ขนตอนการพฒนาโปรแกรม
1. คลกขวาท FilterDemo แลวเลอกคำสง New → Servlet
กำหนดคา Java Package เปน view และ Class Name เปน ShowServlet
2. กำหนด URL Mapping เปน /show.do ดงรปท 9.3 แลวกด Finish
การเขยนโปรแกรม Java Servlet / JSP
68
รปท 9.3 การกำหนดคา URL pattern
3. ในหนาตาง Editor เขยน Source code ของ ShowServlet.java ดง Listing ท 9.4 แลวเลอกคำสง Save
9.5 ขนตอนการทดสอบโปรแกรม
1. ทำการ Build และ Deploy โปรเจค FilterDemo
2. ทำการ Run โปรเจค FilterDemo
3. ทดลองรน URL ทชอ http://localhost:8080/FilterDemo/show.do
แลวสงเกตผลลพธ จะเหนวาแสดงขอผดพลาด HTTP 401
4. ทดลองรน URL ทชอ http://localhost:8080/FilterDemo/login.html
แลวปอน username เปน thana และ password เปน secret สงเกตวาผลลพธเปนอยางไร
Thanachart Numnonda and Thanisa Kruawaisayawan
69
Exercise 10 การเขยนโปรแกรม JSP เพอแสดงผลลพธ
เนอหาทตองศกษากอน การพฒนาโปรแกรมเวบเพอตดตอกบฐานขอมล
แบบฝกหดนจะเปนการพฒนาโปรแกรม JSP เพอแสดงขอมลจากฐานขอมล ออกทางโปรแกรม Web
Browser โดยจะเปนการพฒนาโปรเจค WebBaseDB เพอเตม
10.1 การพฒนาโปรแกรม hello.jsp
โปรแกรม hello.jsp เปนโปรแกรม JSP เพอแสดงขอความและวนเวลาของ Web Server โปรแกรมนจะ
เปนการแสดงผลแบบ dynamic content จงตองพฒนาโดยใชภาษา JSP ทงนแบบฝกหดนจะใชโปรเจคเดม
(WebBaseDB) ในการพฒนาโปรแกรม โดยมขนตอนการพฒนาโปรแกรมดงน
1. คลกขวาทโหนด WebBaseDB แลวเลอกคำสง New → JSP File
กำหนดคา JSP File Name เปน hello แลวกด Finish ดงรปท 10.1
รปท 10.1 สราง JSP file
2. ในหนาตาง editor ใหแกไข source code ของไฟล hello.jsp ใหเปนไปตาม Listing ท 10.1
3. ทำการ Build และ Deploy โปรแกรม WebBaseDB
4. ในหนาตาง Projects เลอกไฟล hello.jsp แลวเลอก Run โปรแกรม
5. โปรแกรมจะแสดงผลดงรปท 10.2
การเขยนโปรแกรม Java Servlet / JSP
70
Listing ท 10.1 โปรแกรม hello.jsp
<%@page contentType="text/html"%><%@page pageEncoding="UTF-8"%><html> <head><title>Hello JSP</title></head> <body> <h1>My First JSP</h1> Hello : Current time is : <%= new java.util.Date() %> </body></html>
รปท 10.2 ผลลพธของ hello.jsp
10.2 การพฒนาโปรแกรม viewBook.jsp
โปรแกรม viewBook.jsp เปนโปรแกรม JSP เพอแสดงขอมลของ Table ทชอ books โปรแกรมนจะเรยกใช
standard tags ทกำหนดไวใน JSTL ซงทำใหผเขยนโปรแกรม JSP ไมตองเขยน source code ภาษา Java โดยมคำสง
ตางๆ ทสำคญดงน
10.2.1 การกำหนด Tag Library
โปรแกรม viewBook.jsp จะเรยกใช JSTL จงจำเปนตองมคำสง Taglib เพอทจะประกาศ Library ดงน
(Project หรอ Web Server ตองมองเหน Library .jar ของ JSTL เพอใชงาน อาจตอง download เพม)
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
10.2.2 การกำหนด Datasource
โปรแกรม JSP นจะทำการเชอมตอกบฐานขอมล โดยจะตองใช DataSource ของโปรเจค โดยสามารถ
กำหนดไดสองวธ
1. กรณทม datasource ซงเชอมตอฐานขอมลทตองการอยแลว กสามารถใชอนเดมไดเลย ตวอยางเชน
jdbc/test โดยไมจำเปนตองสราง dataSource ขนใหมอก
2. กรณทยงไมม datasource ใหใชคำสง setDataSource เปน Tag เพอใหเราสามารถกำหนดการเชอมตอกบ
ฐานขอมล และกำหนดคาไวในตวแปรตามชอทกำหนด
ถงแมวาโปรเจค WebBaseDB จะม Datasource อยแลว แตแบบฝกหดนจะกำหนด Datasource ขนมาใหม
โดยกำหนดเปนตวแปรทชอ newdatasource ดงน
Thanachart Numnonda and Thanisa Kruawaisayawan
71
<sql:setDataSource var="newdatasource" driver="com.mysql.jdbc.Driver"url="jdbc:mysql:///test" user="root" password="root"/>
เพอเปนการเชอมตอฐานขอมลทอยท URL ทชอ jdbc:mysql:///test
*สามารถใช URL ของ DB ได 2 แบบ คอ jdbc:mysql://localhost:3306/test หรอ jdbc:mysql:///test
คำสง sql:query เปนคำสงทจะเรยกดขอมลของฐานขอมลทเชอมตอใน DataSource ทเปน jdbc/test หรอ
ตวแปร newdatasource ในโปรแกรม viewBook.jsp เราจะทำการเรยกใชคำสง SQL คอ select * from books โดยใช
คำสง sql:query ดงน
<sql:query var="db" dataSource="jdbc/test">SELECT * FROM books</sql:query>
หรอ
<sql:query var="db" dataSource="${newdatasource}">SELECT * FROM books</sql:query>
10.2.3 การใชคำสง c:forEach เพอแสดงผล
การแสดงคาของผลลพธทไดจากการ Query ฐานขอมล สามารถทำได การแจงขอมลทละแถวโดยใชคำสง
c:forEach โดยโปรแกรมนจะแสดงขอมลชอหนงสอ และชอผแตง โดยมคำสงดงน
<c:forEach var="row" items="${db.rows}"> ${row.title} : ${row.author} <br></c:forEach>
ขนตอนการพฒนาโปรแกรมน มดงน
1. คลกขวาทโหนด WebBaseDB แลวเลอกคำสง New → JSP
กำหนดคา JSP File Name เปน viewBook แลวกด Finish
2. เพม JSTL Library เพอให JSP เรยกใชงานได
(Download file jstl-1.2.jar และ jstl-api-1.2.jar จาก http://jstl.java.net/download.html)
นำ .Jar File ทง 2 ไปไวท folder {$TOMCAT}\lib ซงเปน path ของท install Apache Tomcat ดงรปท 10.3
รปท 10.3 การเพม JSTL Library บน Apache Tomcat
การเขยนโปรแกรม Java Servlet / JSP
72
เมอดท Project → Java Resource → Libraries → Apache Tomcat v6.0 จะเหนวาม JSTL เพมแลว ดงรปท
10.4
รปท 10.4 JSTL Library ท Apache Tomcat สามารถใชงานได
3. ในหนาตาง editor ใหแกไข source code ของไฟล viewBook.jsp ใหเปนไปตาม Listing ท 10.2
4. ทำการ Build และ Deploy โปรแกรม WebBaseDB
5. ในหนาตาง Projects เลอกไฟล viewBook.jsp แลวเลอก Run โปรแกรม
6. ท Web Browser เปลยน URL เปน http://localhost:8080/WebBaseDB/viewBook.jsp จะได
ผลลพธดงตวอยางในรปท 10.5
รปท 10.5 ผลลพธของ viewBook.jsp
Listing ท 10.2 โปรแกรม viewBook.jsp
<%@page contentType="text/html"%><%@page pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> </head> <body> <h1>JSP Page</h1> <sql:setDataSource var="newdatasource" driver="com.mysql.jdbc.Driver" url="jdbc:mysql:///test" user="root" password="root" />
<sql:query var="db" dataSource="${newdatasource}"> SELECT * FROM books
</sql:query> <c:forEach var="row" items="${db.rows}">
${row.title} : ${row.author} <br> </c:forEach> </body></html>
Thanachart Numnonda and Thanisa Kruawaisayawan
73
Exercise 11 การพฒนาโปรแกรมเวบ Online Book Store
เนอหาทตองศกษากอน การพฒนาโปรแกรมเวบเพอตดตอกบฐานขอมล และ
การเขยนโปรแกรม JSP เพอแสดงผลลพธ
แบบฝกหดนจะเปนการพฒนาโปรแกรม JSP เพอสราง Web Form ใหผใชเลอกรายการหนงสอตางๆ ทมอย
ใน table ทชอ books จากนนจะแสดงรายการทผใชเลอกออกมาทางเวบเพจ
11.1 การพฒนาโปรแกรม selectBooks.jsp
โปรแกรม selectBooks.jsp เปนโปรแกรม JSP ทเขยนเพอแสดงรายการหนงสอทมอยใน table ทชอ books
ออกมาแสดงในรปแบบของ Web Form เพอใหผใชเลอกรายการหนงสอและจำนวนดงรปท 11.6 ทงน Web Form น
จะเรยก url ทชอ processSelection เมอมการกดปม Select โปรแกรมนจะเรยกใช SQL tags ของ JSTL เพอแสดง
รายการขอมลรายชอหนงสอ โดยม source code ดงแสดงใน Listing ท 11.1 และมขนตอนการพฒนาโปรแกรมดงน
1. เรมตนสรางโปรแกรม Web-Base Application โดยการสราง Project ใหม มขนตอนดงน
2. เลอกเมน File → New → Project ดงรปท 11.1
รปท 11.1 การสรางโปรเจค Web Application
3. เลอกรป Folder ชอ Web และเลอก Dynamic Web Project ดงรปท 11.2
รปท 11.2 การสรางโปรเจค Web Application
การเขยนโปรแกรม Java Servlet / JSP
74
4. ใหกำหนด Project Name: เปน BookOnline
สวนการเกบ File Eclipse จะใช Directory ทถามเมอครงเปดขนมาเปน Default
แตถาตองการระบ กสามารถคลกเครองหมายออก (Uncheck) แลวทำการระบ Directory ใหมได
ดงรปท 11.3 จากนนกด ปม Next
รปท11.3 การกำหนดชอโปรเจค
5. โปรแกรมจะแสดง Folder ทเกบ source code และ Output folder (ทเกบ Class file)
คอ [directory ทใสกอนรน Eclipse]\src\ และ [directory ทใสกอนรน Eclipse]\build\classes\
ดงรปท 11.4 จากนนกดปม Next
รปท 11.4 แสดงทเกบ source code และ Output directory
Thanachart Numnonda and Thanisa Kruawaisayawan
75
6. โปรแกรมจะแสดง Context root และ Content directory ดงรปท 11.5 จากนนกดปม Finish
รปท 11.5 แสดงชอ Context root และ Content directory
7. คลกขวาท Project BookOnline เลอกคำสง New → JSP File
กำหนดคา JSP File Name เปน selectBooks แลวกด Finish
8. ในหนาตาง editor ใหแกไข source code ของไฟล selectBooks.jsp ใหเปนไปตาม Listing ท 11.1
9. กดปม Save
10. ทำการรนโปรแกรมจะไดผลลพธดงตวอยางในรปท 11.6
การเขยนโปรแกรม Java Servlet / JSP
76
Thanachart Numnonda and Thanisa Kruawaisayawan
77
การเขยนโปรแกรม Java Servlet / JSP
78
Thanachart Numnonda and Thanisa Kruawaisayawan
79
รปท 11.6 ตวอยางผลลพธของโปรแกรม selectBooks.jsp
Listing ท 11.1 โปรแกรม selectBooks.jsp
<%@page contentType="text/html"%><%@page pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> </head> <body> <sql:setDataSource var="ds" driver="com.mysql.jdbc.Driver" url="jdbc:mysql:///test" user="root" password="root" /> <sql:query var="rs" dataSource="${ds}"> select * from books </sql:query> <h1>Select Books</h1> <form action="ProcessSelection" method="POST">
การเขยนโปรแกรม Java Servlet / JSP
80
<table border="1"> <thead> <tr> <th></th> <th> Title </th> <th> Author </th> <th> Price</th> </tr> </thead> <tbody> <c:forEach var="book" items="${rs.rows}"> <tr> <td><input type="checkbox" name="isbn" value="${book.isbn}" /> </td> <td>${book.title}</td> <td>${book.author}</td> <td>${book.price}</td> </tr> </c:forEach> </tbody> </table> <input type="submit" value="Select" /> </form> </body></html>
11.2 การพฒนาโปรแกรม Book.java
โปรแกรม Book.java เปนคลาสทม attribute ทสอดคลองกบ table ทชอ books โดยม source code ดง
Listing ท 11.2 และมขนตอนการพฒนาดงน
1. คลกขวาท Projects BookOnline แลวเลอกคำสง New → Class..
2. กำหนด Package เปน model และ Class Name เปน Book กด Finish ดงรปท 11.7
Thanachart Numnonda and Thanisa Kruawaisayawan
81
รปท 11.7 การ New Class Book.java เพอใชเปน JavaBean ทมโครงสรางเดยวกบ Table
3. เพม attribute ภายในคลาส BookActionForm ดงน
private String isbn;private String author;private String title;private double price;
หรอ
private String isbn,author,title;private double price;
4. ทำการ encapsulate attribute (สรางเมธอด getter และ setter)
โดยการคลกขวาภายในหนาตาง editor ของ source code
แลวเลอก Source > Generate Getters and Setters... ดงรปท 11.8
การเขยนโปรแกรม Java Servlet / JSP
82
รปท 11.8 การ New Class Book.java เพอใชเปน JavaBean ทมโครงสรางเดยวกบ Table
5. เลอกวาจะสราง getters หรอ setters หรอทงสองอยาง โดยการเลอก Check box ดงรปท 11.9 แลวกด OK
Thanachart Numnonda and Thanisa Kruawaisayawan
83
รปท 11.9 กำหนด Encapsulation ให Attribute หรอ Instance Member
Listing ท 11.2 โปรแกรม Book.java
package model;
public class Book {
private String isbn,author,title; private double price;
public String getIsbn() { return isbn; } public void setIsbn(String isbn) { this.isbn = isbn; } public String getAuthor() { return author; } public void setAuthor(String author) { this.author = author; }
public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public double getPrice() { return price; } public void setPrice(double price) { this.price = price; }}
11.3 การพฒนาโปรแกรม Cart.java
โปรแกรม Cart.java เปนคลาสททำหนาทคลายกบ shopping cart เพอเกบออปเจคชนด Book ตามรายการ
หนงสอทผใชเลอก โดยอางองจากหมายเลข isbn ซงโปรแกรมจะทำการคนรายชอหนงสอจาก table ทชอ books
หมายเลข isbn ทอางอง แลวจะแปลงเปนออปเจคชนด books กอนจะใสลงใน cart โปรแกรมนจะม source code
ดง Listing ท 11.3 และมขนตอนการพฒนาดงน
1. คลกขวาท Projects BookOnline แลวเลอก New → Class
กำหนด Package เปน model , Class Name เปน Cart.java กด Finish
2. ในหนาตาง editor ใหแกไข source code ของไฟล Cart.java ใหเปนไปตาม Listing ท 11.3 แลว Save
Listing ท 11.3 โปรแกรม Cart.java
package model;
import java.sql.Connection;import java.sql.ResultSet;import java.sql.SQLException;
การเขยนโปรแกรม Java Servlet / JSP
84
import java.sql.Statement;import java.util.LinkedList;import java.util.List;
public class Cart { List <Book> books; Connection conn;
public void addItem(String isbn) { try { Statement stmt = conn.createStatement(); String sql = "SELECT * from books where isbn='" + isbn + "'"; ResultSet rs = stmt.executeQuery(sql); while (rs.next()) { Book bk = new Book(); bk.setIsbn(isbn); bk.setAuthor(rs.getString("author")); bk.setTitle(rs.getString("title")); bk.setPrice(rs.getFloat("price")); books.add(bk); } } catch (SQLException ex) {
ex.printStackTrace(); } }
public List<Book> getBooks() { return books; } public Cart(Connection conn) { this.conn = conn; books = new LinkedList<Book>(); } public void removeItem(String isbn) { books.remove(isbn); }}
11.4 การพฒนาโปรแกรม ProcessSelection.java
โปรแกรม ProcessSelection.java เปนโปรแกรม Java Servlet ททำหนาทอานคาพารามเตอรทชอ isbn ซง
สงมาจากหนา Web Form ของโปรแกรม selectBooks.java โดยใชคำสง getParameterValues ดงน
String[] isbn = request.getParameterValues("isbn");
จากนนจะทำการเรยก session เพอเรยก attribute ทชอ cart ออกมาโดยใชคำสงดงน
(ทำ Casting เปน Cart เนองจาก HttpSession.getAttribute มน Return Reference ชนด Object ออกมา)
HttpSession session = request.getSession(true); Cart cart = (Cart) session.getAttribute("cart");
กรณทไมพบ attribute ทชอ cart โปรแกรมจะทำการเกบ attribute นขนใหมโดยใชคำสงดงน
if (cart == null) { ServletContext ctx = getServletContext(); Connection conn = (Connection) ctx.getAttribute("connection"); cart = new Cart(conn); session.setAttribute("cart", cart);
Thanachart Numnonda and Thanisa Kruawaisayawan
85
}
เมอไดคา attribute ทชอ cart มาแลว โปรแกรมกจะเกบรายการชอ isbn ของหนงสอทผใชเลอกลงใน
ออปเจคของ cart โดยใชคำสงดงน
for (int i = 0; i < isbn.length; i++) { cart.addItem(isbn[i]); }
เมอสนสดการทำงานโปรแกรมกจะไปเรยก URL ทชอ view.cart ตอไป โดยใชคำสงดงน
RequestDispatcher pg = request.getRequestDispatcher("viewCart.jsp"); pg.forward(request, response)
สำหรบโปรแกรมนจะม source code ของเมธอด processRequest ดง Listing ท 11.4
ขนตอนการพฒนาโปรแกรม ProcessSelection.java มดงน
1. คลกขวาท Projects BookOnline แลวเลอก New → Servlet
กำหนด Package เปน controller , Class Name เปน ProcessSelection
2. ในหนาตาง Editor เขยน Source code ของ ProcessSelection.java ดง Listing ท 11.4 แลว Save
การเขยนโปรแกรม Java Servlet / JSP
86
Listing ท 11.4 เมธอด processRequest() ของโปรแกรม ProcessSelection.java
package controller;
import java.io.IOException;import java.io.PrintWriter;import java.sql.Connection;
import javax.servlet.RequestDispatcher;import javax.servlet.ServletContext;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;
import model.Cart;
public class ProcessSelection extends HttpServlet {private static final long serialVersionUID = 1L;
public ProcessSelection() { super(); }
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); } protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter(); response.setContentType("text/html;charset=UTF-8"); String[] isbn = request.getParameterValues("isbn"); HttpSession session = request.getSession(true); Cart cart = (Cart) session.getAttribute("cart"); if (cart == null) { ServletContext ctx = getServletContext(); Connection conn = (Connection) ctx.getAttribute("connection"); cart = new Cart(conn); session.setAttribute("cart", cart); } for (int i = 0; i < isbn.length; i++) { cart.addItem(isbn[i]); } cart = (Cart) session.getAttribute("cart"); RequestDispatcher pg = request.getRequestDispatcher("viewCart.jsp"); pg.forward(request, response);
out.close(); }}
Thanachart Numnonda and Thanisa Kruawaisayawan
87
11.5 การพฒนาโปรแกรม Init.java
โปรแกรม Init.java เปนโปรแกรมประเภท ServletContextListener เพอเชอมตอกบฐานขอมลเมอเรมตน
แลวเกบออปเจค connection ไวภายใน ServletContext โดยมขนตอนการพฒนาเชนเดยวกบการพฒนาโปรแกรม
Init.java ใน Exercise 7 การพฒนา WebBase DB โดยคลาสประเภท Web Listener (หนา 55)
และจะตองมการสรางไฟล context.xml แบบเดยวกนกบ Exercise ดงกลาว
Listing ท 11.5 Source Code ของโปรแกรม Init.java
package listener;import java.sql.Connection;import java.sql.SQLException;import java.util.logging.Level;import java.util.logging.Logger;import javax.annotation.Resource;import javax.servlet.ServletContextEvent;import javax.servlet.ServletContextListener;import javax.sql.DataSource;public class Init implements ServletContextListener {
public Init() {// TODO Auto-generated constructor stub
}@Resource(name = "jdbc/test")private DataSource ds;private Connection conn;public void contextInitialized(ServletContextEvent arg0) {
try {Connection conn;conn = ds.getConnection();arg0.getServletContext().setAttribute("connection", conn);System.out.println("Book Online : MySQL Connection Created ");
} catch (SQLException e) {e.printStackTrace();
}}public void contextDestroyed(ServletContextEvent arg0) {
try {conn.close();System.out.println("Book Online : MySQL Connection Destroyed");
} catch (SQLException ex) {Logger.getLogger(Init.class.getName()).log(Level.SEVERE, null, ex);
}}
}
11.6 การพฒนาโปรแกรม viewCart.jsp
โปรแกรม viewCart.jsp เปนโปรแกรม JSP ทเขยนเพอแสดงรายการหนงสอทผใชเลอก และเกบใน
shopping cart ออกมาแสดง โปรแกรมนจะใช Expression Language เพอแสดงขอมลใน session ดง Listing ท 11.6
และมขนตอนการพฒนาดงน
1. คลกขวาท Project BookOnline แลวเลอก New → JSP File
กำหนด JSP File Name เปน viewCart แลวกด Finish
2. ในหนาตาง editor ใหแกไข source code ของไฟล viewCart.jsp ใหเปนไปตาม Listing ท 11.6 แลว Save
การเขยนโปรแกรม Java Servlet / JSP
88
Listing ท 11.6 โปรแกรม viewCart.jsp
<%@page contentType="text/html"%><%@page pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Cart</title> </head> <body> <h1>Selected Books in Cart</h1> <c:forEach var="book" items="${sessionScope.cart.books}"> ${book.title} <br> </c:forEach> </body></html>
11.7 ขนตอนการทดสอบโปรแกรม
1. ทำการ Deploy โปรเจค BookOnline
2. ทดลองรน URL ทชอ http://localhost:8080/BookOnline/selectBooks.jsp
ทดลองเลอกรายการหนงสอ แลวกดปม Select
โปรแกรมจะเรยก URL ทชอ http://localhost:8080/BookOnline/processSelection
เพอแสดงรายการใน Cart ดงรปท 11.10
3. ทดลองกลบไปเลอกรายการหนงสอเพมเตม หรอเรยก URL ทชอ
http://localhost:8080/BookOnline/viewCart.jsp โดยตรงแลวสงเกตผลลพธ
รปท 11.10 การแสดงขอมลใน Cart
Thanachart Numnonda and Thanisa Kruawaisayawan
89
Exercise 12 การสราง Custom Tags สำหรบโปรแกรม JSP
เนอหาทตองศกษากอน -
แบบฝกหดนจะเปนการพฒนาโปรแกรม JSP เพอสราง custom tag โดยจะเรมแสดงการพฒนาโปรแกรม
ตงแตการเขยน JSP โดยไมใช custom tags แลวสราง tag โดยใช Tag Handler และขนตอนสดทายจะเปนการสราง
tag โดยใช Tag File โดยโปรแกรม JSP ทเขยนจะเปนการพมพขอความวา Hello xxxx จำนวนสบครง โดยท xxxx คอ
ชอทสงมาทางพารามเตอรทชอ name
12.1 การพฒนาโปรแกรม hello.jsp
โปรแกรม hello.jsp เปนโปรแกรม JSP ทเขยนโดยใช scriptlet เรยกคำสงภาษาจาวา โดยจะมคำสงในการ
อานพารามเตอรของออปเจค request ทชอ name แลวจะพมพขอความ Hello xxxx จำนวนสบครง โดยโปรแกรมน
จะม source code ดง Listing ท 12.1 และมขนตอนการพฒนาโปรแกรมดงน
1. เลอกเมน File → New → Dynamic Web Project
กำหนด Project Name เปน JSPDemo
2. คลกขวาท Project JSPDemo จากนนเลอกคำสง New → JSP File
กำหนด JSP File Name เปน hello
3. ในหนาตาง editor ใหแกไข source code ของไฟล hello.jsp ใหเปนไปตาม Listing ท 12.1
4. ทำการ Build และ Deploy โปรแกรม JSPDemo
5. ในหนาตาง Projects เลอกไฟล hello.jsp แลวเลอก Run โปรแกรมโดยใหสงผานพารามเตอรทาง URL เชน
http://localhost:8080/JSPDemo/hello.jsp ?name=Thanisa เราจะไดผลการรนดงรปท 12.1
การเขยนโปรแกรม Java Servlet / JSP
90
Listing ท 12.1 โปรแกรม hello.jsp
<%@page contentType="text/html"%><%@page pageEncoding="UTF-8"%><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Demo</title> </head> <body>
<h1>JSP Demo</h1> <% String name = request.getParameter("name"); %> <% for (int i = 0; i < 10; i++) { %> Hello <%= name %> <br> <% } %> </body></html>
Thanachart Numnonda and Thanisa Kruawaisayawan
91
การเขยนโปรแกรม Java Servlet / JSP
92
Thanachart Numnonda and Thanisa Kruawaisayawan
93
การเขยนโปรแกรม Java Servlet / JSP
94
รปท 12.1 ผลลพธของโปรแกรม hello.jsp
Thanachart Numnonda and Thanisa Kruawaisayawan
95
12.2 การพฒนาโปรแกรม helloJSTL.jsp
โปรแกรม helloJSTL.jsp เปนโปรแกรม JSP ททำงานเชนเดยวกบโปรแกรมทผานมาแตจะทำการเรยกใช
JSP Standard Tag Library ในการพมพขอความ Hello xxx สบครง แทนการเขยนคำสง scriptlet โดยโปรแกรมนจะ
ม source code ดง Listing ท 12.2 และจะมขนตอนการพฒนาโปรแกรมดงน
1. คลกขวาท Project JSPDemo เลอก New → JSP File
กำหนด JSP File Name เปน helloJSTL แลวกด Finish
2. ตรวจสอบ JSTL Libraries ทตองใชงาน ถาไมมใหทำการ import เขามา
ตามหวขอ 2. เพม JSTL Library เพอให JSP เรยกใชงานได (หนาท 66)
รปท 12.2 ตรวจสอบ Library ของ JSTL
3. ในหนาตาง editor ใหแกไข source code ของไฟล helloJSTL.jsp ใหเปนไปตาม Listing ท 12.2
4. ทำการ run โปรแกรม
โดยกำหนด URL เปน http://localhost:8080/JSPDemo/helloJSTL.jsp?name=Thanisa
จะไดผลลพธเชนเดยวกบโปรแกรม hello.jsp
Listing ท 12.2 โปรแกรม helloJSTL.jsp
<%@page contentType="text/html"%><%@page pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Demo</title> </head> <body> <h1>JSP Demo</h1> <c:forEach begin="1" end="10"> Hello ${param.name} <br> </c:forEach> </body></html>
การเขยนโปรแกรม Java Servlet / JSP
96
12.3 การพฒนาโปรแกรม helloTagFile.jsp
JSP 2.0 อนญาตใหเราสราง custom tag โดยการเขยนไฟล html หรอ JSP แทนทจะเขยนโปรแกรมภาษาจาวา
ซงทำใหงายตอการพฒนา ในทนเราจะพฒนาโปรแกรม helloTagFile.jsp ซงจะทำการเรยกใช custom tag ทชอ
NameTagFile ทเปน tag file ซงเปนโปรแกรม JSP โดยมขนตอนการพฒนาดงน
12.3.1 สราง Tag File
ไฟลนจะทำหนานเปนตวจดการ Tag โดยเขยนเปนโปรแกรม JSP และมขนตอนการพฒนาดงน
1. สราง Folder ชอ tags ภายใต \WebContent\WEB-INF\
2. คลกขวาท Folder tags กำหนด File Name เปน NameTagFile ดงรปท 12.3
รปท 12.3 การสราง Tag File
Thanachart Numnonda and Thanisa Kruawaisayawan
97
3. หนาตาง Editor ให implement source code ดง Listing ท 12.3
Listing ท 12.3 โปรแกรม NameTagFile.tag
<%@tag description="Tag Name" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <c:forEach begin="1" end="10"> Hello ${param.name} <br> </c:forEach>
12.3.2 เขยนโปรแกรม helloTagFile.jsp
โปรแกรม helloTagFile.jsp จะเรยกใช Tag ทชอ NameTagFile มขนตอนดงน
1. คลกขวาท Project JSPDemo จากนนเลอกคำสง New → JSP File
2. กำหนด File Name = helloTagFile แลวกด Finish
3. ในหนาตาง editor ใหแกไข source code ของไฟล helloTagFile.jsp ใหเปนไปตาม Listing ท 12.4
4. ทำการ run โปรแกรม
โดยกำหนด URL เปน http://localhost:8080/JSPDemo/helloTagFile.jsp?name=Thanisa
จะไดผลลพธเชนเดยวกบโปรแกรม helloJSTL.jsp
Listing ท 12.4 โปรแกรม helloTagFile.jsp
<%@page contentType="text/html"%><%@page pageEncoding="UTF-8"%><%@taglib tagdir="/WEB-INF/tags" prefix="myTags" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Demo</title> </head> <body> <h1>JSP Demo</h1> <myTags:NameTagFile /> </body></html>
12.4 การพฒนาโปรแกรม helloTag.jsp
โปรแกรม helloTag.jsp เปนโปรแกรม JSP ททำงานแบบเดยวกบโปรแกรม hello.jsp แตการพฒนา
โปรแกรมนจะเขยนโดยการสราง Custom tag ทชอ NameTagHandler การสราง Custom Tag จะตองมการพฒนา
โปรแกรม 3 สวน ดงน
• สราง Java Class Tag Handler [NameTagHandler.java] จะทำงานเมอ Custom Tag ถกเรยกใช
• สราง Tag Library Descriptor [MyTags.tld] เปนตวอธบาย a�ribut ตางๆภายใน element ของ tag
ตวอยาง element และ attribute → <element a�ribut1=”A”> </element>
• สราง JSP file [helloTag.jsp] เพอเรยกใชงาน Custom Tag ดงแสดงความสมพนธในรปท 12.4
การเขยนโปรแกรม Java Servlet / JSP
98
รปท 12.4 Overview ความสมพนธของ Custom Tag Files
12.4.1 สรางไฟล Java ClassTag Handler
ไฟล Tag Handler จะเปนโปรแกรมจาวาทพฒนาขนเพอระบวา เมอเรยกใช tag แลวจะตองทำคำสงอยางไร
ในทนจะกำหนดชอ Tag เปน NameTag และโปรแกรมจาวาเปน NameTagHandler โดยโปรแกรมจะทำการอานคา
พารามเตอร name และพมพขอความ Hello xxxx จำนวนสบครง การสรางไฟล Tag Handler จะมขนตอนดงน
1. คลกขวาท Project JSPDemo จากนนเลอกคำสง New → Class
กำหนด Package เปน tags , Class Name เปน NameTagHandler
เลอก SuperClass เปน SimpleTagSupport
Thanachart Numnonda and Thanisa Kruawaisayawan
99
รปท 12.5 การสราง Java Tag Handler Class
การเขยนโปรแกรม Java Servlet / JSP
100
2. ทำการ Implement Method ชอ doTag( )
โดยการคลกขวาภายในหนาตาง editor ของ source code
แลวเลอก Source > Override/Implement Methods ... แลวเลอกเมธอด doTag() ดงรปท 12.6
และ สราง method ประเภท setter เพมชอ setName( )
รปท 12.6 การ Implement method ทจะถกเรยกเมอมการใช Custom Tag
3. หนาตาง Editor จะแสดงไฟล NameTagHandler.java ใหเขยน source code ดง Listing ท 12.5
Listing ท 12.5 โปรแกรม NameTagHandler.java
package tags;
import java.io.IOException;
import javax.servlet.jsp.JspException;import javax.servlet.jsp.JspWriter;import javax.servlet.jsp.tagext.JspFragment;import javax.servlet.jsp.tagext.SimpleTagSupport;
public class NameTagHandler extends SimpleTagSupport {
String name;public void setName(String name) {
this.name = name;}
@Overridepublic void doTag() throws JspException, IOException {
super.doTag(); JspWriter out = getJspContext().getOut();
try { JspFragment f = getJspBody();
Thanachart Numnonda and Thanisa Kruawaisayawan
101
if (f != null) f.invoke(out);
for (int i = 0; i < 10; i++) { out.println("Hello " + name + "<br>"); } } catch (java.io.IOException ex) { throw new JspException("Error in NameTagHandler tag", ex); } }}
12.4.2 สราง Tag Library Descriptor
ไฟลนจะใชเกบ รายชอ Tag ตางๆ ทมอยเพอสามารถนำ tag ตางๆ มาใชในโปรแกรม JSP
โดยใชคำสง <%@taglib ...%>
การสราง Tag Library Descriptor จะมขนตอนดงน
1. คลกขวาท Project JSPDemo เลอก New → Folder
เลอก JSPDemo → WebContent → WEB-INF แลว กำหนด Folder name = tlds
รปท 12.7 สราง Folder เพอเกบ Tag Language Descriptor
การเขยนโปรแกรม Java Servlet / JSP
102
2. เลอก Project JSPDemo → WebContent → WEB-INF → tlds
คลกขวาท Folder tlds แลวเลอก New → File
กำหนด TLD Name = MyTag.tld ***ใหใส นามสกล tld ดวย แลว กด Finish
รปท 12.8 การสราง File Tag Library Descriptor
3. หนาตาง Editor จะแสดงไฟลทชอ MyTag.tld ทอยในโฟลเดอร \WebContent\WEB-INF\tlds
Thanachart Numnonda and Thanisa Kruawaisayawan
103
4. Implement code ดง Listing ท 12.6
Listing ท 12.6 โปรแกรม MyTag.tld
<?xml version="1.0" encoding="UTF-8"?><taglib version="2.1" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee,
http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd"><tlib-version>1.0</tlib-version><short-name>MyTags</short-name><uri>/WEB-INF/tlds/MyTag</uri><tag>
<name>NameTagHandler</name><tag-class>tags.NameTagHandler</tag-class><body-content>scriptless</body-content><attribute>
<name>name</name><rtexprvalue>true</rtexprvalue><type>java.lang.String</type>
</attribute></tag>
</taglib>
12.4.3 เขยนโปรแกรม helloTag.jsp
ในทนจะเขยนโปรแกรมทจะเรยกใช Tag ทชอ NameTag โดยจะม source code ดง Listing ท 11.4 โดยการ
สรางโปรแกรม helloTag.jsp จะมขนตอนดงน
1. เลอกหนาตาง Projects แลวคลกขวาทโหนด JSPDemo จากนนเลอกคำสง New > Other...
2. ในไดอะลอก New File ใหเลอก Categories ทชอ Web ซงโปรแกรมกจะแสดง File Types ตางๆ ภายใต
Category น ใหเราเลอก JSP แลวกด Next
3. กำหนด JSP File Name: เปน helloTag แลวกด Finish
4. ในหนาตาง editor ใหแกไข source code ของไฟล helloTag.jsp ใหเปนไปตาม Listing ท 12.7
5. ทำการ run โปรแกรม จะไดผลลพธเชนเดยวกบโปรแกรม hello.jsp
Listing ท 12.7 โปรแกรม helloTag.jsp
<%@page contentType="text/html"%><%@page pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/tlds/MyTag" prefix="test"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>JSP Demo</title></head><body>
<h1>JSP Demo</h1>
<test:NameTagHandler name="Thanisa" /></body></html>
การเขยนโปรแกรม Java Servlet / JSP
104
Exercise 13 การพฒนาโปรแกรมเวบโดยใช Struts 2 Framework
เนอหาทตองศกษากอน การพฒนาโปรแกรมเวบเพอตดตอกบฐานขอมล
แบบฝกหดนจะเปนการปรบปรงโปรแกรมเวบเพอตดตอกบฐานขอมล โดยใช Struts 2 Framework
ขนตอนในการพฒนาโปรแกรม
1. สรางโปรเจค StrutsDBApp โดยใช Struts 2 Framework
2. พฒนาโปรแกรม addBook.jsp [View]
3. พฒนาโปรแกรม AddBookAction.java [Model]
4. พฒนาโปรแกรม success.jsp [View]
5. แกไขไฟล struts.xml
13.1 การ สรางโปรเจค StrutsDBApp โดยใช Struts 2 Framework
1. Download Struts 2 Framework ท http://archive.apache.org/dist/struts/binaries/struts-2.3.3-all.zip
2. ทำการเปด File Zip ออกมา จะเหน Folder ชอ apps ภายในจะม war file ชอ struts2-blank.war ให
ทำการ Extract ออกมาไวท Temporary folder เชน D:\temp\ กอน ดงรปท 13.1
รปท 13.1 การ Extract ไฟล Struts2-blank.war
3. ทำการ Import Template เขาส Eclipse เพอเตรยม Environment สำหรบ Struts 2 Framework โดยให
ทำการเปลยนชอ Web Project เปน StrutsDBApp ดงรปท 13.2
Thanachart Numnonda and Thanisa Kruawaisayawan
105
รปท 13.2 การ import เขาส Eclipse
13.2 การพฒนาโปรแกรม addBook.jsp [View]
สรางเวบเพจเพอใชสำหรบปอนขอมลหนงสอใหม เขาในฐานขอมล books ซงมลกษณะดงรปท 13.3
รปท 13.3 เวบเพจทใชแสดงฟอรมสำหรบปอนขอมล
ขนตอนการสรางหนา JSP เพอรบขอมล
1. File → New → JSP File กำหนดชอเปน addBook.jsp
2. ใชการลากแปะ Object ลงไปบนหนา Design view เพอสะดวกในการสรางหนาเพจ โดยไปท
Window → Show View → Palette ดงรปท 13.4
การเขยนโปรแกรม Java Servlet / JSP
106
รปท 13.4 Palette สำหรบสรางหนาเพจ
3. คลกท Struts Tags จะเหน Object ตางๆ ใหทำการ Drag and Drop ลงไปทหนา Design เพอสราง
หนาเพจดงรปท 13.5 โดยมสวนของ source ดง Listing ท 13.1
รปท 13.5 สราง JSP Page เพอใหผใชงานปอนขอมล
Thanachart Numnonda and Thanisa Kruawaisayawan
107
Listing ท 13.1 โปรแกรม addBook.jsp
<%@taglib uri="/struts-tags" prefix="s"%><%@ page language="java" contentType="text/html; charset=TIS-620" pageEncoding="TIS-620"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Struts2</title></head><body>
<s:label>ADD A NEW BOOK</s:label><s:form action="addBookAction" method="POST">
<td><s:textfield name="isbn" label="ISBN" /></td><td><s:textfield name="title" label="TITLE"/></td><td><s:textfield name="author" label="AUTHOR"/></td><td><s:textfield name="price" label="PRICE"/></td><td><s:submit value="ADD" /></td>
</s:form></body></html>
4. เมอจดแตงหนา page เรยบรอยแลว ถาในไฟล addBook.jsp ม taglib ทม prefix="nested" ใหทำการ
ลบออก เนองจากทาง Apache ไมม URI นแลว ดงรปท 13.6
รปท 13.6 การลบ taglib ออกจาก addBook.jsp
5. คดลอกไฟล context.xml ทม source ดง Listing ท 13.2 จาก Exercise 5 มาไวใน Folder
\StrutsDBApp\WebContent\META-INF\
Listing ท 13.2 โปรแกรม context.xml
<?xml version="1.0" encoding="UTF-8"?><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>
การเขยนโปรแกรม Java Servlet / JSP
108
13.3 การพฒนาโปรแกรม AddBookAction.java [Model]
AddBookAction.java เปนคลาสทมเมธอดประเภท getter และ setter เพอจดการกบขอมลทผใชปอนเขามา
ผานทาง addBook.jsp ดงรปท 13.7 จากนนจะทำการ insert ลงใน table ทชอ Books ภายในเมธอด execute
รปท 13.7 ความสมพนธระหวาง Struts2 tag และ AddBookAction
โปรแกรม AddBookAction.java มขนตอนในการพฒนาดงน
1. File → New → Class
กำหนด pagekage = model , name = AddBookAction
กำหนด SuperClass = com.opensymphony.xwork2.ActionSupport ดงรปท 13.8
รปท 13.8 สราง AddBookAction.java
Thanachart Numnonda and Thanisa Kruawaisayawan
AddBookAction.java
[Model sourcecode]
109
2. ในคลาส AddBookAction.java ใหเพม attribute ทชอ isbn, title, author โดยมชนดขอมลเปน String และ
price ทมชนดขอมลเปน float เพอทำการ map attribute ของไฟล AddBookAction.java กบพารามเตอรของ
ไฟล addBook.jsp จากนนใหทำการสรางเมธอดประเภท Getters and Setters ดงรปท 13.9
รปท 13.9 ทำการเลอก Generate Getters and Setters
3. Override เมธอด execute โดยคลกขวาทหนาตาง source code
แลวเลอก Source → Override/Implement Methods... แลวเลอกทเมธอด execute ดงรปท 13.10
รปท 13.10 ทำการเลอก Override Method execute ของ ActionSupport
การเขยนโปรแกรม Java Servlet / JSP
110
4. ทำการแกไข Source code ในเมธอด execute() ดง Listing ท 13.2
Listing ท 13.2 โปรแกรม AddBookAction.java
package model;
import java.sql.*;import javax.naming.InitialContext;import javax.sql.DataSource;import com.opensymphony.xwork2.ActionSupport;
public class AddBookAction extends ActionSupport {
private String isbn, title, author;private float price;
public String getIsbn() {return isbn;
}
public void setIsbn(String isbn) {this.isbn = isbn;
}
public String getTitle() {return title;
}
public void setTitle(String title) {this.title = title;
}
public String getAuthor() {return author;
}
public void setAuthor(String author) {this.author = author;
}
public float getPrice() {return price;
}
public void setPrice(float price) {this.price = price;
}
@Overridepublic String execute() throws Exception {
InitialContext ctx = new InitialContext(); DataSource ds = (DataSource)ctx.lookup("java:comp/env/jdbc/test");
Connection conn = ds.getConnection();Statement stmt = conn.createStatement();String sql = "insert into books (isbn,title,author,price) values "
+ "('" + getIsbn() + "','" + getTitle()+ "','" + getAuthor() + "'," + getPrice()+ ")";
System.out.println("Executed SQL = " + sql);stmt.execute(sql);
return super.execute();
Thanachart Numnonda and Thanisa Kruawaisayawan
111
}
}
13.4 การพฒนาโปรแกรม success.jsp [View]
<html><head><title>Result Inserting Book</title></head><body> <h3>New Book record added!!!</h3>
<b>ISBN: </b><s:property value="isbn" /><br><b>Title: </b><s:property value="title" /><br><b>Author: </b><s:property value="author" /><br><b>Price: </b><s:property value="price" /><br>
</body></html>
13.5 การแกไขไฟล struts.xml
ไฟล struts.xml เปนไฟลเพอใชในการควบคมการทำงานของโปรแกรม Struts
• ดบเบลคลกทไฟล /src/struts.xml แลวปรบปรง action tag ดงน
<action name="addBookAction" class="model.AddBookAction"> <result name="success">success.jsp</result> <result name="error">error.jsp</result> </action>
*struts2-blank.war ไดมการเตรยมไฟล page error.jsp มาใหแลว
13.6 การทดสอบโปรแกรม
1. ทำการ Build และ Restart Tomcat
2. Run โปรแกรม StrutDBApp หรอคลกขวาท file เลอก Run → Run As Server
3. เปดหนาจอ http://localhost:8080/StrutDBApp/addBook.jsp แลวทดลองใสขอมล
4. เมอกดปม Add โปรแกรมกจะใสขอมลลงใน Database
5. เราสามารถทจะดขอมลทปอนเขาไปได โดยไปท Tool ของ MySQL ชอ MySQL Workbench
ดงรปท 13.11
การเขยนโปรแกรม Java Servlet / JSP
112
รปท 13.11 ตวอยางผลลพธทไดจากการใสขอมลลงใน Table Books
Thanachart Numnonda and Thanisa Kruawaisayawan
113
Exercise 14 การพฒนาโปรแกรมเวบโดยใช Spring Framework
เนอหาทตองศกษากอน การพฒนาโปรแกรมเวบเพอตดตอกบฐานขอมล
แบบฝกหดนจะเปนการปรบปรงโปรแกรมเวบเพอตดตอกบฐานขอมล โดยใช SpringMVC Framework
ขนตอนในการพฒนาโปรแกรม
1. การสรางโปรเจค SpringDBApp โดยใช Spring Framework
2. พฒนาไฟล Controller
3. พฒนาไฟล JSP
4. พฒนาไฟล mvc-dispatcher-servlet.xml
5. พฒนาไฟล web.xml
6. การทดสอบโปรแกรม
14.1 การ สรางโปรเจค SpringDBApp โดยใช Spring Framework
1. ทำการสราง Dynamic Web Project โดยการเลอกคำสง File → New → Dynamic Web Project
2. กำหนด Project Name: เปน HelloWebSpring เลอก Dynamic web module version เปน 3.0 และหนา
Web Module ใหเลอก Generate web.xml deployment descriptor ดงรปท แลวกด Finish
รปท 14.1 การเลอกสราง web.xml
3. ทำการ Download Spring Library จากเวบ http://www.springsource.org/spring-community-download
การเขยนโปรแกรม Java Servlet / JSP
114
แลว unzip ไฟล
4. กอบปไฟลทงหมดใน Spring Libraries ลงใน folder ทชอ WebCentent > WEB-INF > lib
14.2 พฒนาไฟล Controller
ไฟล Controller ใน Spring MVC Framework จะทำหนาทในการกำหนดวา RequestMapping ของ url โดยม
ขนตอนการพฒนาดงน
1. คลกขวาทโปรเจค HelloWebSpring เลอก New > Class
2. กำหนดคา Package เปน web.controller และ Name: เปน MainController
3. เขยน source code ตาม Listing ท 14.1
Listing ท 14.1 โปรแกรม MainController.java
package web.controller;
import org.springframework.stereotype.Controller;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod; @Controller@RequestMapping("/welcome")public class MainController {
@RequestMapping(method = RequestMethod.GET)public String printWelcome(ModelMap model) {
model.addAttribute("message", "Spring 3 MVC Hello World");return "hello";
}
}
14.3 พฒนาไฟล JSP
โปรแกรม hello.jsp จะเปนโปรแกรมแสดงผล ททาง Spring จะเรยกใชจากการ return ของ
RequestMapping โดยมขนตอนการพฒนาดงน
1. ทำการสราง Folder ชอ pages ภายใต Folder ทชอ WebContent > WEB-INF
2. สรางไฟล hello.jsp ท folder ดงกลาว โดยการคลกขวาแลวเลอกคำสง New > JSP File
3. กำหนด File Name เปน hello.jsp แลวกด Finish
4. เขยน source code ตาม Listing ท 14.2
Thanachart Numnonda and Thanisa Kruawaisayawan
115
Listing ท 14.2 โปรแกรม hello.jsp
<html><body>
<h1>Message : ${message}</h1></body></html>
14.4 พฒนาไฟล mvc-dispatcher-servlet.xml
ไฟล mvc-dispatcher-servlet.xml จะเปนไฟล configuration เพอระบวาไฟลตางๆอยทใด โดยมขนตอนการ
พฒนาดงน
1. เลอกโหนด WebContent > WEB-INF แลวเลอกคำสง New > Other...> XML File
2. กำหนดคา File Name: เปน mvc-dispatcher-servlet.xml
3. เขยน source code ตาม Listing ท 14.3
Listing ท 14.3 โปรแกรม mvc-dispatcher-servlet.xml
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:context="http://www.springframework.org/schema/context"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd">
<context:component-scan base-package="web.controller" />
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="prefix">
<value>/WEB-INF/pages/</value></property><property name="suffix">
<value>.jsp</value></property>
</bean> </beans>
14.5 พฒนาไฟล web.xml
ปรบปรงไฟล web.xml ดงListing ท 14.4
Listing ท 14.4 โปรแกรม web.xml
<web-app id="WebApp_ID" version="2.4"xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
การเขยนโปรแกรม Java Servlet / JSP
116
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>Spring MVC Application</display-name>
<servlet><servlet-name>mvc-dispatcher</servlet-name><servlet-class>
org.springframework.web.servlet.DispatcherServlet </servlet-class>
<load-on-startup>1</load-on-startup></servlet>
<servlet-mapping>
<servlet-name>mvc-dispatcher</servlet-name><url-pattern>/</url-pattern>
</servlet-mapping>
<context-param><param-name>contextConfigLocation</param-name><param-value>/WEB-INF/mvc-dispatcher-servlet.xml</param-value>
</context-param>
<listener><listener-class>
org.springframework.web.context.ContextLoaderListener </listener-class>
</listener> </web-app>
14.6 การทดสอบโปรแกรม
1. ทำการ Deploy โปรแกรม
2. รนโปรแกรมโดยใช url ชอ http://localhost:8080/HelloWebSpring/welcome จะไดผลลพธดงรป 14.2
รปท 14.2 ผลลพธการรนโปรแกรม
14.7 พฒนาโปรแกรมเพอเชอมตอกบฐานขอมล
Spring MVC เปน Framework ทมฟงกชนในการตดตอกบฐานขอมลได ในทนเราจะปรบปรงโปรแกรม
เพอใหสามารถจะเพมขอมลใน Table ทชอ Books และสามารถทจะดขอมลทงหมดไดโดยตองแกไขและสรางไฟล
Thanachart Numnonda and Thanisa Kruawaisayawan
117
ตางๆดงน
• สรางคลาสทชอ Book.java ภายใต package ทชอ model เพอทจะทำหนาทเปนออปเจคของขอมล Book
• ปรบปรงโปรแกรม MainController เพอใหม RequestMapping ทชอ /addbook และ /showbooks
• สรางคลาสทชอ BookService.java ภายใต package ทชอ web.controller ทจะทำหนาทเปนคลาสชนด
Service ในการจดการฐานขอมลผาน DataSource
• ปรบปรงไฟล mvn-dispatcher-servlet.xml เพอเพมแทค <Bean> สองชดสำหรบ id ทชอ dataSource
และ bookService
• สรางไฟล addedpage.jsp และ bookpages.jsp ทอยในโฟลเดอร pages สำหรบแสดงผล
โดยเราจะได source code ของไฟลตางๆทปรบปรงดงน
Listing ท 14.5 โปรแกรม Book.java
package model;
public class Book {private String isbn;private String title;private String author;private float price;public String getIsbn() {
return isbn;}public void setIsbn(String isbn) {
this.isbn = isbn;}public String getTitle() {
return title;}public void setTitle(String title) {
this.title = title;}public String getAuthor() {
return author;}public void setAuthor(String author) {
this.author = author;}public float getPrice() {
return price;}public void setPrice(float price) {
this.price = price;}
}
Listing ท 14.6 โปรแกรม MainController.java ทปรบปรงใหม
package web.controller;
import java.util.List;
import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
การเขยนโปรแกรม Java Servlet / JSP
118
import org.springframework.ui.Model;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;
import model.Book;
import web.controller.BookService;
@Controllerpublic class MainController {
@RequestMapping(value = "/welcome", method = RequestMethod.GET)public String printWelcome(ModelMap model) {
model.addAttribute("message", "Spring 3 MVC Hello World");return "hello";
}
@Resource(name = "bookService")private BookService bookService;
@RequestMapping(value = "/addbook", method = RequestMethod.GET) public String add( @RequestParam(value="isbn", required=true) String isbn, @RequestParam(value="title", required=true) String title, @RequestParam(value="author", required=true) String author, @RequestParam(value="price", required=true) Float price) {
bookService.add(isbn, title, author, price); return "addedpage"; }
@RequestMapping(value = "/showbooks", method = RequestMethod.GET)public String showBooks(Model model) {
List<Book> bks = bookService.getAll();model.addAttribute("books", bks);return "bookpages";
}
}
Listing ท 14.7 โปรแกรม BookService.java
package web.controller;
import java.sql.Connection;import java.sql.ResultSet;import java.sql.SQLException;import java.sql.Statement;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;
import javax.annotation.Resource;import javax.sql.DataSource;
import org.springframework.jdbc.core.RowMapper;import org.springframework.jdbc.core.simple.SimpleJdbcTemplate;import org.springframework.stereotype.Service;import org.springframework.transaction.annotation.Transactional;
import model.Book;
@Service("bookService")@Transactional
Thanachart Numnonda and Thanisa Kruawaisayawan
119
public class BookService {
private DataSource dataSource;
@Resource(name = "dataSource")public void setDataSource(DataSource dataSource) {
this.dataSource = dataSource;;}
public List<Book> getAll() {
// Prepare our SQL statementList<Book> books = new ArrayList<Book>();String sql = "select * from books";Connection conn = null;try {
conn = dataSource.getConnection();Statement stmt = conn.createStatement();ResultSet rs = stmt.executeQuery(sql);while (rs.next()) {
Book bk = new Book();bk.setIsbn(rs.getString("isbn"));bk.setAuthor(rs.getString("author"));bk.setTitle(rs.getString("title"));bk.setPrice(rs.getFloat("price"));books.add(bk);
}stmt.close();
} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();
}
// Retrieve allreturn books;
}
public void add(String isbn, String title, String author, float price) {
String sql = "insert into books values " + "('" + isbn + "','" + title
+ "','" + author + "'," + price + ")";Connection conn = null;try {
conn = dataSource.getConnection();Statement stmt = conn.createStatement();stmt.executeUpdate(sql);stmt.close();
} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();
}
}}
Listing ท 14.8 โปรแกรม mvc-dispatcher-servlet.xml ในสวนทปรบปรง
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:context="http://www.springframework.org/schema/context"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd">
…
การเขยนโปรแกรม Java Servlet / JSP
120
<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource" > <property name="driverClassName" value="com.mysql.jdbc.Driver" /> <property name="url" value="jdbc:mysql://localhost:3306/test" /> <property name="username" value="root" /> <property name="password" value="root" /></bean>
<bean id="bookService" class="web.controller.BookService" > <property name="dataSource" > <ref bean="dataSource" /> </property> </bean> </beans>
Listing ท 14.9 โปรแกรม addedpage.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Add Data</title></head><body> Added Book successfully..</body></html>
Listing ท 14.10 โปรแกรม bookpages.jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>All Books</title></head><body> <c:forEach items="${books}" var="bk"> ${bk.title} ${bk.author} <br></c:forEach></body></html>
เราสามารถทจะรนโปรแกรมนเพอทจะเพมขอมลใน Books ไดโดยใชคำสง
http://localhost:8080/HelloWebSpring/addbook?isbn=134&title=SpringMVC&
author=Thana&price=400.0
และสามารถทจะเรยกดขอมลทงหมดใน Books ไดโดยใชคำสง
http://localhost:8080/HelloWebSpring/showbooks
Thanachart Numnonda and Thanisa Kruawaisayawan
121
Exercise 15 การ Authentication โดยใช Tomcat
เนอหาทตองศกษากอน -
แบบฝกหดนจะเปนการพฒนาโปรแกรมเวบทตองมการทำ Authentication โดยการตงคา configuration ของ
Tomcat Web Server โดยจะเปนการลอกอนโดยใช Basic Configuration และ Form Based Configuration
และ จะทดสอบการเปลยน realm ของ Tomcat จากไฟล tomcat-users.xml เปนการใช MySQL Database
15.1 สราง Web Application Project
1. เลอกเมน File → New → Dynamic Web Project
กำหนด Project Name = SecurityWebApp
2. ทำการพฒนาโปรแกรม admin.html ดง Listing ท 15.1
3. ทำการพฒนาโปรแกรม user.html ดง Listing ท 15.2
Listing ท 15.1 โปรแกรม admin.html
<html> <head> <title>ADMIN</title> </head> <body> <h1>Admin Page</h1> </body></html>
Listing ท 15.2 โปรแกรม user.html
<html> <head> <title>USER</title> </head> <body> <h1>User Page</h1> </body></html>
15.2 เพม User ของ Tomcat Web Server
โดยทวไป Tomcat-Web-Server จะใช Realm ทเปน Flat File โดยเกบไวใน File ทชอ tomcat-users.xml ขน
ตอนนจะเปนการเพม User โดยการปรบปรงไฟลดงกลาวโดยมขนตอนการพฒนาโปรแกรมดงน
การเขยนโปรแกรม Java Servlet / JSP
122
1. ใน Project Explorer ใหดบเบลคลกทไฟล Servers > Tomcat > tomcat-users.xml
ดงตวอยางในรปท 15.1 และทำการเพม user password ลงไปใน Tomcat Server
ดงใน Listing ท 15.3
รปท 15.1 เพม user และ roles ท Apache Tomcat
Listing ท 15.3 ไฟล t omcat-users.xml
.......<role rolename="admin"/> <role rolename="user"/> <user username="admin" password="admin" roles="admin" /><user username="tomcat" password="tomcat" roles="admin" /><user username="user" password="user" roles="user" />.......
2. Restart Tomcat เพอใหอาน config ใหมทเราแกเขาไป
โดยไปท tab Server → คลกขวาทชอ server แลวเลอก restart
15.3 การ Config ไฟล web.xml ของ Web Application ทตองการใช Tomcat user
เราสามารถทจะกำหนดใหมการทำ Authenticate และ Authorization ผใชทจะเขา URL ใดๆของ Web
Application และกำหนดสทธในการเขาโดยองกบ role (Role Based Authorization)โดย config ไฟล web-xml
ในขนตอนนจะเปนการกำหนดใหผใชทม role เปน admin สามารถทจะเขาใชไฟล admin.html และ user.html ได
สวนผใชทม role เปน user สามารถทจะเขาใชไดเฉพาะไฟล user.html เทานน โดยมขนตอนดงน
ขนตอนการ Configuration
1. คลกขวาท Deployment Descriptor: SecurityWebApp ในโปรเจค SecurityWebApp
2. จากนนเลอก Generate Deployment Descriptor Stub เพอเปนการสรางไฟล web.xml ดงรปท 15.2
รปท 15.2 การสรางไฟล web.xml
Thanachart Numnonda and Thanisa Kruawaisayawan
123
3. เปดไฟล web.xml ของ Project ทชอ SecurityWebApp
เพมบรรทด เพอบอกวาเปนการ authen แบบ Basic
<login-config><auth-method>BASIC</auth-method>
</login-config>
4. เพมบรรทด ระบ Security Roles = 2 roles คอ user และ admin
<security-role><role-name>admin</role-name>
</security-role><security-role>
<role-name>user</role-name></security-role>
5. สรางความสมพนธระหวาง Web page ของ Project กบ User บน Tomcat
@@ กรณหนา admin.html เขาถงโดยผม role เปน admin เทานน
กำหนดURL Pattern ทตองการจำกดการเขาถงเปน /admin.html
กำหนด Name เปน Admin Page
กำหนด ผเขาถง URL นได คอผทอยใน Roles = admin เทานน
<security-constraint><web-resource-collection>
<url-pattern>/admin.html</url-pattern><web-resource-name>Admin Page</web-resource-name>
</web-resource-collection><auth-constraint>
<role-name>admin</role-name></auth-constraint>
</security-constraint>
@@ กรณหนา user.html เขาถงโดยผม role เปน user และ admin
กำหนดURL Pattern ทตองการจำกดการเขาถงเปน /user.html
กำหนด Name เปน User Page
กำหนด ผเขาถง URL นได คอผทอยใน Roles = admin
<security-constraint><web-resource-collection>
<url-pattern>/user.html</url-pattern><web-resource-name>User Page</web-resource-name>
</web-resource-collection><auth-constraint>
<role-name>user</role-name><role-name>admin</role-name>
</auth-constraint></security-constraint>
6. ซงจะไดรายละเอยดทงหมดของไฟล web.xml ดง Listing ท 15.4
Listing ท 15.4 ไฟล web .xml
การเขยนโปรแกรม Java Servlet / JSP
124
.......<login-config>
<auth-method>BASIC</auth-method>
</login-config>
<security-role><role-name>admin</role-name>
</security-role><security-role>
<role-name>user</role-name></security-role>
<security-constraint><web-resource-collection>
<web-resource-name>Admin Page</web-resource-name><url-pattern>/admin.html</url-pattern>
</web-resource-collection><auth-constraint>
<role-name>admin</role-name></auth-constraint>
</security-constraint>
<security-constraint><web-resource-collection>
<web-resource-name>User Page</web-resource-name><url-pattern>/user.html</url-pattern>
</web-resource-collection><auth-constraint>
<role-name>user</role-name><role-name>admin</role-name>
</auth-constraint></security-constraint>.......
15.4 การทดสอบโปรแกรมแบบ Basic Authenticate
1. ทำการ Build และ Deploy โปรเจค SecurityWebApp
2. รนโปรแกรม http://localhost:8080/SecurityWebApp/admin.html โปรแกรมเวบ Browser จะแสดง
ไดอะลอกลอกอนใหผใชปอนดงรปท 15.3
รปท 15.3 หนาตางลอกอน
3. ใหทดลองปอนชอผใชและรหสผานเปน admin และ admin โปรแกรมจะสามารถแสดงขอความในหนาเวบ
admin.html ได
4. ปดโปรแกรมเวบ Browser จากนนเปดขนมาใหม แลวทดลองปอนชอผใชและรหสผานเปน user และ user
จะเหนวาไมสามารถเขาหนาเวบนได
Thanachart Numnonda and Thanisa Kruawaisayawan
125
5. ทดลองทำซำกบ URL ชอ http://localhost:8080/SecurityWebApp/user.html จะเหนวา url นจะอนญาตให
user ทงสองใชได
15.5 การปรบปรงโปรแกรมเพอใหใช Login Form
ขนตอนนจะเปนการปรบปรงโปรเจค SecurityWebApp ใหมทำการลอกอนโดยใช Form ทสรางขนโดยใช
ไฟล Login.html ซงถาไมสามารถลอกอนได ใหสงตอไปท Error.html โดยมขนตอนการพฒนาโปรแกรมดงน
1. สรางหนา page เพอใช login ชอ login.html ดง Listing ท 14.4
2. สรางหนา error.html เมอกรณปอน username หรอ password ไมถก ดง Listing ท 14.5
3. แกไข web.xml เพอระบรปแบบใหเปน Form โดยใชหนา Form คอ login.html รบคา username
และ password โดยเปลยนจาก
<login-config><auth-method>BASIC</auth-method></login-config>
เปนดง Listing ท 14.7
Listing ท 15.5 โปรแกรม login.html
<html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body>
<H1>Login Form : Sample</H1>
<FORM ACTION="j_security_check" METHOD="POST">User name : <INPUT TYPE="TEXT" NAME="j_username" /> <br>Password : <INPUT TYPE="PASSWORD" NAME="j_password" /> <br> <input type="submit" value="Login" />
</FORM></body></html>
Listing ท 15.6 โปรแกรม error.html
<html><head><title>ERROR</title></head><body><H1>Error unauthorized user</H1></body></html>
Listing ท 15.7 โปรแกรม web.xml
.......<login-config>
<auth-method>FORM</auth-method><realm-name>AdminApplication</realm-name><form-login-config>
<form-login-page>/login.html</form-login-page><form-error-page>/error.html</form-error-page>
</form-login-config></login-config>.......
การเขยนโปรแกรม Java Servlet / JSP
126
15.6 การทดสอบโปรแกรม แบบ Form Authenticate
ใชการทดสอบแบบเดยวกนกบ Basic Authenticate แตหนา login จะเปน login.html ดงรปท 15.4
รปท 15.4 หนาตางลอกอน
15.7 การปรบปรงโปรแกรม เพอใช Authenticate โดยอานจาก Database MySQL
เราสามารถเลอก Realm ของ Tomcat Web Server ในรปแบบอนๆ ไดนอกเหนอจากการใชไฟล
เชนการใช Database หรอ Directory Server ในทนจะทดลองกำหนด Realm ใหเปน MySQL
จะตองทำการสราง Table ขนมาสองชดคอ users และ userrole โดยมขนตอนการพฒนาโปรแกรมดงน
1. เปดโปรแกรม MySQL Workbench แลวทำการสราง table ขนมา 2 tables
โดยใช Tool ทเปน Wizard หรอ SQL Statement เพอสราง table ดงน
create table users ( user_name varchar(45) not null primary key, pass_word varchar(45) not null);
create table userrole ( user_name varchar(45) not null, role_name varchar(45) not null, primary key (user_name, role_name));
จากนนกด Icon Execute SQL scripts (รปสายฟาสเหลอง) เพอรน หรอ Highlight คำสงแลวกดปม Ctrl +
Enter
2. ทดลองปอนขอมลใสลงใน Table โดยตองกำหนด password และ role
3. ใน Project Explorer ใหดบเบลคลกทไฟล Servers > Tomcat > server.xml ของ Apache Tomcat
4. จากนนใหทำการแกไข sourcecode ดงน
ลบ
<Realm className="org.apache.catalina.realm.UserDatabaseRealm" resourceName="UserDatabase"/>
เพม
<Realm className="org.apache.catalina.realm.JDBCRealm" debug="99" driverName="com.mysql.jdbc.Driver"connectionURL="jdbc:mysql://localhost/test"connectionName="root"connectionPassword="root"userTable="users" userRoleTable="userrole" userNameCol="user_name" userCredCol="pass_word"roleNameCol="role_name" />
Thanachart Numnonda and Thanisa Kruawaisayawan
127
5. ทำการ Restart Tomcat เพอใหอาน config ทแกไป
15.8 การทดสอบโปรแกรม แบบ Database Authenticate
ใชการทดสอบแบบเดยวกนกบ Form Authenticate
การเขยนโปรแกรม Java Servlet / JSP
128
Exercise 16 การพฒนาโปรแกรมเวบโดยใช Google App
Engine
แบบฝกหดนเปนการพฒนาโปรแกรม Web Application โดยจะตดตงและรนโปรแกรมอยบน Google
App Engine ซงใช Infrastructure ของ Google ในการรนโปรแกรม Google App Engine จดเปน Cloud
Computing ประเภท Platform as a Service (PaaS) ทำใหนกพฒนาการโปรแกรมสามารถทจะตดตงโปรแกรม
บนแพลตฟอรมททาง Google จดเตรยมไวให โดยในปจจบนไดกำหนด API ไวสองภาษาคอ Java และ Python
แบบฝกหดนจะใช Eclipse 3.6 (Helios) ในการพฒนาโปรแกรมสำหรบ Google App Engine และใช
Google App Engine Plugin Module ของ Eclipse มาชวยในการพฒนาโปรแกรม
16.1 การตดตงและเรมตนการใชงาน Google App Engine
Google App Engine เปนแพลตฟอรมทใหนกพฒนาโปรแกรมสามารถรนโปรแกรมเวบแอปพลเคชน
บน Google's Infrastructure ได โดยนกพฒนาจะตองม account ของ Google และจะตองตดตง Google App
Engine SDK ซงรายละเอยดการใชงาน Google App Engine สามารถดไดท
http://code.google.com/appengine/ โดยเราสามารถทจะสรปขนตอนการตดตงโปรแกรม Eclipse เพอพฒนา
Google App Engine ไดดงน
1. ทำการลงทะเบยน App Engine Account โดยใช Google Account ท
http://code.google.com/appengine/
2. ทำการตดตงโปรแกรม Eclipse 3.7
3. รนโปรแกรม Eclipse แลวเลอกเมน Help > Install New Software...
4. ในไดอะลอก Plugins เลอกแทป Setting แลวกดปม Add
5. ไดอะลอก Install จะแสดงขนมา ใหกำหนดคา Work with: เปน
http://dl.google.com/eclipse/plugin/3.7 แลวกด Enter ไดอะลอกจะแสดง โปรแกรม Plugin และ
SDKs ตางใหเลอกทงหมด ดงรปท แลวกดปม Next
6. โปรแกรมจะทำการตดตง Google App Engines เมอการตดตงสนสดใหทำการ Restart โปรแกรม
Eclipse ใหม
7. ท Toolbar ของโปรแกรม Eclipse จะมปมเพอพฒนาโปรแกรม Google App Engine ดงน
Thanachart Numnonda and Thanisa Kruawaisayawan
129
รปท 16.1 การเลอกตดตง Plugin และ SDK ของ Google App Engines
16.2 การสราง Web Application Project
ขนตอนนจะเปนการโปรแกม Web Application เพอทดลองตดตงลง Google's Infrastructure โดยการ
สราง Project ใหมขนมาใน ซงมขนตอนดงน
1. เลอกเมน File => New => Other...
2. ในไดอะลอก New ใหขยายโหนด Google แลวเลอก Web Application Project แลวกด Next
3. กำหนด Project Name เปน BookGAE กำหนดคา Package เปน com.imcinstitute แลวเลอก
Project Location เปน Director ทเราตองการจะเกบไฟลไว และไมตองเลอกคา Use Google Web
Toolkit เนองจากโปรเจคนไมไดใช GWT ดงรปท 16.1 แลวกด Next
การเขยนโปรแกรม Java Servlet / JSP
130
รปท 16.2 การกำหนดคา Web Application Project ของ Google Application
4. โปรเจคนจะมโปรแกรม MMJTDemoServlwt.java ซงอยภายใตโหนด src > guestbook โปรแกรมน
แสดงขอความ Hello, World
5. เราสามารถทดลอบทจะรนโปรแกรมนในเครองทพฒนาไดโดยคลกขวาทโหนด MMJTDemo ในหนาตาง
Project Explorer แลวเลอกคำสง Run As > Web Application จากนนเปดโปรแกรม Web Browser
แลวกำหนด url เปน http://localhost:8888/mmjtdemo โดยจะไดผลลพธดงรปท 16.3
รปท 16.3 ผลลพธการรนโปรแกรมจาก localhost server
Thanachart Numnonda and Thanisa Kruawaisayawan
131
6. โปรเจค MMJTDemo จะมไฟลจดการ configuration สำหรบการ deploy ไปยง Google App Engine
ทชอ appengine-web.xml โดยไฟลนจะอยภายใตโหนด war > WEB-INF โดยจะมคาตางๆดงรปท
16.4
รปท 16.4 ไฟล appengine-web.xml
7. เราสามารถทจะทำการ Deploy โปรเจคนลงบน Google App Engine โดยการไป sign up เขา account
ของเราท Google App Engine ท https://telecommunication/ แลวกดปม Create an Application
8. กำหนดคา Application Identifier: เปน thaijavaapp และ Application Title: เปน Thai Java
Google App ดงรปท 16.5 แลวกดปม Save
รปท 16.5 การสราง Application สำหรบ Google App Engine
9. Google App Engine จะแสดงรายชอ Application ใหมทกำหนดขนดงรปท 16.6
การเขยนโปรแกรม Java Servlet / JSP
132
รปท 16.6 การแสดงรายการ My Applications ใน Google App Engine
10. ในโปรแกรม Eclipse ใหแกไขไฟล appengine-web.xml โดยกำหนดคา application
เปน thaijavaapp
11. จากนนคลกขวาทโหนด MMJTDemo ในหนาตาง Project Explorer แลวเลอกคำสง Google >
Deploy to App Engine โปรแกรมจะถาม e-mail (username) และ password ของ Google App
Engine ของเราดงแสดงในรปท 16.7
รปท 16.7 การ Deploy ใน Google App Engine
12. เมอโปรแกรมตดตงโดยสมบรณใหกลบมาท Browser เพอไปท https://appengine.goog le.com/ ซงจะ
แสดงผลลพธดงรปท 16.8 ใหเรากดทหมายเลขของเวอรชน(1) ในการรนโปรแกรม ซงจะไดผลลพธดงรป
ท 16.9 จากนนใหเลอก Servlet ทชอ MMJTDemo จะไดผลลพธดงรปท 16.10
Thanachart Numnonda and Thanisa Kruawaisayawan
133
รปท 16.8 รายการแสดง current versions ชอง My Applications
รปท 16.9 ผลลพธการรนโปรแกรม thaijavaapp บน Google App Engine
รปท 16.10 ผลลพธการรนโปรแกรม MMJTDemo บน Google App Engine
16.3 การพฒนาโปรแกรม Servlet เพอรนบน Google App Engine
การเขยนโปรแกรม Java Servlet / JSP
134
ขนตอนนจะเปนการพฒนาโปรแกรม Java Servlet เพอแสดงเวลาปจจบนแลวตดตงบน Google App
Engine โดยมขนตอนการพฒนาโปรแกรมดงน
1. เลอกหนาตาง Project Explorer แลวขยายโหนด MMJTDemo> src
2. คลกขวาทโหนด guestbook จากนนเลอกคำสง New > Class
3. ในไดอะลอก New Java Class ให กำหนดคา Name เปน TimerServlet สวนคาอนๆใหเปนไปตามเดมทกำหนดไว แลวกด Finish
4. ปรบปรงโปรแกรม TimerServlet.java ใหเปนไปดง Listing ท 16.1
5. ทำการปรบปรงไฟล web.xml โดยการขยายโหนด MMJTDemo > war > WEB-INF แลวเลอกไฟล web.xml และแทป source แลวใหเพม tag ตางๆดงน
<servlet><servlet-name>Timer</servlet-name><servlet-class>guestbook.TimerServlet</servlet-class>
</servlet><servlet-mapping>
<servlet-name>Timer</servlet-name><url-pattern>/timer</url-pattern>
</servlet-mapping>
6. ทำการรนโปรแกรมเพอทดสอบบน localhost โดยเรยก url ชอ http://localhost:8888/timer
7. ทำการ deploy บน Google App Engine แลวทดลองรนโปรแกรมท http://thaijavaapp.appspot.com / timer จะไดผลลพธดงรปท 16.11
รปท 16.11 ผลลพธการร y นโปรแกรม TimerServlet บน Google App Engine
Listing ท 16.1 โปรแกรม TimerServlet.java
package guestbook;
import java.io.IOException;import java.io.PrintWriter;import java.text.SimpleDateFormat;
Thanachart Numnonda and Thanisa Kruawaisayawan
135
import java.util.Date;import java.util.SimpleTimeZone;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;
/** * * @author Administrator */public class TimerServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); SimpleDateFormat fmt = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss.SSSSSS"); fmt.setTimeZone(new SimpleTimeZone(0, "")); out.println("<html>"); out.println("<head>"); out.println("<title>Servlet TimerServlet</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1>Servlet TimerServlet at " + request.getContextPath() + "</h1>"); out.println("<p>The time is: " + fmt.format(new Date()) + "</p>"); out.println("</body>"); out.println("</html>");
out.close(); }
}
16.4 การพฒนาโปรแกรมเพอตดตอกบ Google Account
Google App Engine มชดคำสง API เพอใหนกพฒนาสามารถเรยกใช Application ตางๆของ Google
ได รวมถงเชอมตอกบ Google Account ขนตอนนจะเปนการใชคำสงใน Google API ของคลาส User และ
UserService เพอตดตอกบ Google Account โดยจะมขนตอนดงน
1. เลอกหนาตาง Project Explorer คลกขวาทโหนด guestbook จากนนเลอกคำสง New > Class
2. ในไดอะลอก New Java Class ให กำหนดคา Name เปน GoogleTimerServlet สวนคาอนๆใหเปนไปตามเดมทกำหนดไว แลวกด Finish
3. ปรบปรงโปรแกรม GoogleTimerServlet.java ใหเปนไปดง Listing ท 16.2
4. ทำการปรบปรงไฟล web.xml โดยการขยายโหนด MMJTDemo > war > WEB-INF แลวเลอกไฟล web.xml และแทป source แลวใหเพม tag ตางๆดงน
<servlet><servlet-name>MMJTDemo</servlet-name><servlet-class>guestbook.GoogleTimerServlet</servlet-class>
</servlet><servlet-mapping>
<servlet-name>MMJTDemo</servlet-name><url-pattern>/googletimer</url-pattern>
</servlet-mapping>
การเขยนโปรแกรม Java Servlet / JSP
136
5. ทำการ deploy บน Google App Engine แลวทดลองรนโปรแกรมท
http://thaijavaapp.appspot.com / googletimer จะไดผลลพธดงรปท 16.12 และ 16.2
รปท 16.12 ผลลพธการรนโปรแกรม GoogleTimerServlet บน Google App Engine
รปท 16.13 ผลลพธการรนโปรแกรม TimerServlet หลงจากการทำ signin
Listing ท 16.2 โปรแกรม GoogleTimerServlet.java
package guestbook;
import com.google.appengine.api.users.User;import com.google.appengine.api.users.UserService;import com.google.appengine.api.users.UserServiceFactory;import java.io.IOException;import java.io.PrintWriter;import java.text.SimpleDateFormat;import java.util.Date;import java.util.SimpleTimeZone;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;
public class GoogleTimerServlet extends HttpServlet {
Thanachart Numnonda and Thanisa Kruawaisayawan
137
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); SimpleDateFormat fmt = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss.SSSSSS"); fmt.setTimeZone(new SimpleTimeZone(0, ""));
UserService userService = UserServiceFactory.getUserService(); User user = userService.getCurrentUser(); String url = request.getRequestURI(); String msg; if (user != null) { msg = "<p>Welcome, " + user.getNickname() + "! You can <a href=\"" + userService.createLogoutURL(url) + "\">sign out</a>.</p>"; } else { msg = "<p>Welcome! <a href=\"" + userService.createLoginURL(url) + "\">Sign in or register</a> to customize.</p>"; } out.println("<html>"); out.println("<head>"); out.println("<title>Servlet TimerServlet</title>"); out.println("</head>"); out.println("<body>"); out.println(msg); out.println("<h1>Servlet TimerServlet at " + request.getContextPath() + "</h1>"); out.println("<p>The time is: " + fmt.format(new Date()) + "</p>"); out.println("</body>"); out.println("</html>");
out.close(); }
}
การเขยนโปรแกรม Java Servlet / JSP
138
Exercise 17 การพฒนาโปรแกรม Google App Engine
เพอตดตอกบฐานขอมล โดยใช JPA
เนอหาทตองศกษากอน
• การพฒนาโปรแกรมเวบโดยใช Google App Engine
• Java Persistence API
การเกบขอมลลงในโปรแกรม Web Application ทจะตองการรองรบผใชจำนวนมากเปนเรองคอนขางยาก
เนองจากผใชจะตองเรยกใชโปรแกรมจาก Web Server จำนวนหลายเครองจงอาจทำใหการเรยกใชโปรแกรมแตละ
ครงใช Web Server ทไมซำกน และ Web Server ทกเครองจะตองสามารถตดตอกบขอมลทอาจกระจายอยใน
เครองแมขายหลายๆเครองได Google App Engine มกลไกในการจดการ Infrastructure เพอทำใหนกพฒนา
โปรแกรมไมตองกงวลกบการจดการปญหาเหลานน โดยสามารถทจะจดการขอมลไดโดบผาน API ททาง Google
กำหนดไวให
Google App Engine สนบสนนการเขยนโปรแกรมการจดการฐานขอมลโดยการกำหนดมาตรฐานไวสอง
แบบคอ Java Data Objects (JDO) และ Java Persistence API (JPA) ซงทงสองแบบนจะใชแพลตฟอรมของ
DataNucleus Access การเกบขอมลวธนจะใชวธแบบ Object Database ซงแตกตางจาก RDBMS ทวๆไป ดง
นนผพฒนาโปรแกรมทใช RDBMS อาจจะตองปรบแนวคดการเกบขอมลใหมเพอใหพฒนา Google Web
Application เปนไปไดงายขน
แบบฝกหดนจะเปนตวอยางการตดตอกบฐานขอมล Books โดยใช JPA โดยโปรแกรมจะทำการสราง
Entity ทชอ Book แลวเขยนโปรแกรมเพอเพมขอมลและแสดงขอมลทงหมดของ Book
17.1 การสรางโปรเจค Google App Engine
แบบฝกหดจะสราง Web Application ของ GAE โดยมขนตอนดงน
1. เลอกคำสง File > New > Other..
2. ในไดอะลอก New เลอก Folder Google และเลอก Web Application Project แลวกด Next
3. กำหนดชอ Package name เปน com.imcinstitute และ Project name เปน OnlineBook
4. ไมเลอกชอง Use Google Web Toolkit แลวกด Finish
โปรแกรมจะสรางไฟล OnlineBookServlet.java และ persistence.xml (ภายใตโฟลเดอร META-
INF) .ใหอตโนมต
17.2 การพฒนาโปรแกรม Book Entity Class
โปรแกรม Book.java จะเปน Entity Class ทประกอบไปดวยฟลดตางๆทสอดคลองกบ column ของ
Thanachart Numnonda and Thanisa Kruawaisayawan
139
Table ทชอ Books โดยจะกำหนดใหไฟลอย package ทชอ Entity และม sourcecode ดง Listing ท 17.1
Listing ท 17.1 sourcecode สำหรบโปรแกรม Book.java
package entity;
import java.io.Serializable;
import javax.persistence.Entity;import javax.persistence.Id;
@Entitypublic class Book implements Serializable {
@Idprivate String isbn;private String title;private String author;private float price;public String getIsbn() {
return isbn;}public void setIsbn(String isbn) {
this.isbn = isbn;}public String getTitle() {
return title;}public void setTitle(String title) {
this.title = title;}public String getAuthor() {
return author;}public void setAuthor(String author) {
this.author = author;}public float getPrice() {
return price;}public void setPrice(float price) {
this.price = price;}
}
17.3 การพฒนาโปรแกรม EMF.java
โปรแกรม Web Application จะตดตอกบ datastore โดยใชออปเจคชนด EntityManager โดยสรางมา
จาก EntityManagerFactory โปรแกรม EMF.java เปนโปรแกรมทพฒนาขนมาเพอสรางออปเจคดงกลาว โดยม
ขนตอนการพฒนาโปรแกรมดงน
1. เลอกหนาตาง Projects แลวคลกขวาทโหนด OnlineBook จากนนเลอกคำสง New > Java Class...
2. ในไดอะลอก New Java Class กำหนดคา Class Name เปน EMF และ Package เปน entity แลวกด Finish
3. ปรบปรงโปรแกรม EMF.java ใหเปนไปดง Listing ท 17.2
การเขยนโปรแกรม Java Servlet / JSP
140
Listing ท 17.2 sourcecode สำหรบโปรแกรม EMF.java
package entity;
import javax.persistence.EntityManagerFactory;import javax.persistence.Persistence;
public class EMF {
private static final EntityManagerFactory emfInstance = Persistence.createEntityManagerFactory("transactions-optional");
private EMF() { }
public static EntityManagerFactory get() { return emfInstance; }}
17.4 การพฒนาโปรแกรม addBook.html
โปรแกรม addBook.html จะเปนฟอรมสำหรบกรอกขอมลหนงสอ แลวทำการเรยก
OnlineBookServlet ทม url เปน addBook.do เมอมการกดปม Add โดยม source code ดง Listing ท 17.3
Listing ท 17.3 sourcecode สำหรบโปรแกรม addBook.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><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="GET"> 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>
17.5 การพฒนาโปรแกรม OnlineBookServlet เพอรนบน Google App Engine
ขนตอนนจะเปนการปรบปรงโปรแกรม OnlineBookServlet.java เพอใหเกบขอมลหนงสอลงใน
datastore ทชอ Book โดยมขนตอนการพฒนาโปรแกรมดงน
1. โปรแกรม OnlineBookServlet.java ใหเปนไปดง Listing ท 17.4
2. ปรบปรงโปรแกรม web.xml โดยแกไข servlet-mapping ใหเปน addBook.do ดงน
Thanachart Numnonda and Thanisa Kruawaisayawan
141
<servlet-mapping>
<servlet-name>OnlineBook</servlet-name>
<url-pattern>/addBook.do</url-pattern>
</servlet-mapping>
3. ทำการ deploy บน Google App Engine แลวทดลองรนโปรแกรมโดยใช url
http://thaijavaapp.appspot.com/addBook.html
Listing ท 17.4 โปรแกรม OnlineBookServlet.java
package com.imcinstitute;
import java.io.IOException;import java.io.PrintWriter;
import javax.persistence.EntityManager;import javax.servlet.http.*;
import entity.Book;import entity.EMF;
@SuppressWarnings("serial")public class OnlineBookServlet extends HttpServlet {
public void doGet(HttpServletRequest req, HttpServletResponse resp)throws IOException {
resp.setContentType("text/html;charset=UTF-8");PrintWriter out = resp.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>");String isbn = req.getParameter("isbn");String author = req.getParameter("author");String title = req.getParameter("title");String priceStr = req.getParameter("price");float price = Float.parseFloat(priceStr);Book bk = new Book();bk.setIsbn(isbn);bk.setAuthor(author);bk.setTitle(title);bk.setPrice(price);EntityManager em = EMF.get().createEntityManager();try {
em.persist(bk);out.println("Book added");
} finally {em.close();
}out.println("</body>");out.println("</html>");out.close();
}}
การเขยนโปรแกรม Java Servlet / JSP
142
17.6 การพฒนาโปรแกรมเพอแสดงขอมลใน Books
ขนตอนนจะเปนการเขยนโปรแกรม Servlet เพอใชคำสง JPA ในการแสดงรายละเอยดขอมลของ
datastore ทชอ Books โดยจะมขนตอนดงน
1. เลอกหนาตาง Projects แลวคลกขวาทโหนด OnlineBook จากนนเลอกคำสง New > Servlet...
2. ในไดอะลอก New Servlet กำหนดคา Class Name เปน ShowBook และ Package เปน com.imcinstitute แลวกด Finish
3. ปรบปรงโปรแกรม ShowBook.java ใหเปนไปดง Listing ท 17.5
4. ปรบปรงโปรแกรม web.xml เพอเพม Servlet ทชอ ShowBook ดงน
<servlet>
<servlet-name>ShowBook</servlet-name>
<servlet-class>com.imcinstitute.ShowBook</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ShowBook</servlet-name>
<url-pattern>/ShowBook</url-pattern>
</servlet-mapping>
5. ทำการ deploy บน Google App Engine แลวทดลองรนโปรแกรมท
http://thaijavaapp.appspot.com/ShowBook
Listing ท 17.5 โปรแกรม ShowBook.java
package com.imcinstitute;
import java.io.IOException;import java.io.PrintWriter;import java.util.List;
import javax.persistence.EntityManager;import javax.persistence.Query;import javax.servlet.http.*;
import entity.Book;import entity.EMF;
@SuppressWarnings("serial")public class ShowBook extends HttpServlet {
public void doGet(HttpServletRequest req, HttpServletResponse resp)throws IOException {
resp.setContentType("text/html;charset=UTF-8");PrintWriter out = resp.getWriter();out.println("<html>");out.println("<head>");out.println("<title>Add a new book</title>");
Thanachart Numnonda and Thanisa Kruawaisayawan
143
out.println("</head>");out.println("<body>");out.println("<h1> Show all books </h1>");
EntityManager em = EMF.get().createEntityManager();try {
Query query = em.createQuery("SELECT o FROM Book AS o");@SuppressWarnings("unchecked")List<Book> bks = (List<Book>) query.getResultList();for (Object obj: bks) {
Book bk = (Book) obj;out.println(bk.getTitle() + ":" + bk.getAuthor() + "<br>");
}} catch(Exception ex) {
out.println(ex);} finally {
em.close();}out.println("</body>");out.println("</html>");out.close();
}}
การเขยนโปรแกรม Java Servlet / JSP
37th Floor, Sathorn Square Building, 98 North Sathorn Road, Silom, Bangrak, Bangkok 10500
Tel: 02-105-6322, 088-192-7975
[email protected] www.imcinstitute.com
www.facebook.com/imcinstitute
www.slideshare.net/imcinstitute