hand-on exercise java web programming

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


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


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


6

รปท 1.2 การ Config Eclipse เพอใหรจก TOMCAT Web Server

เราจะเหนหนาตาง Server มชอ Web Server ทเปน Tomcat เพมขนมาซงเราสามารถควบคมการ Start/Stop

Server ไดโดยการคลกขวาทชอ Server โปรแกรมจะแสดงคำสงตางๆ ขนมาดงรปท 1.3

รปท 1.3 เมนในการจดการ Web Server


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


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


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


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


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


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


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


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 ยกเวนวาจะกำหนดเปนหมายเลขอน


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");


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();}


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


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}


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 เขาไปทน}


1. Run โปรแกรม WebApp โดยคลกขวาท addCustomer.html

เลอก Run As → Run on Server → กดปม Finish ดงรปท 2.4

รปท 2.4 การรนทดสอบ addCustomer Servlet


20

2. ทดลองปอนขอมล ดงรปท 2.5

รปท 2.5 กรอกขอมลทดสอบ Servlet ผานหนา addCustomer.html

3. โปรแกรมจะแสดงผลลพธ ดงรปท 2.6

รปท 2.6 ผลลพธจากการเรยกโปรแกรม CustomerServlet


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. แสดงผลการโหวต


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>"); }


23

3.3 ขนตอนการพฒนาโปรเจค Voter เราสามารถทจะพฒนาแบบฝกหดนทชอโปรเจค Voter ตามขนตอนดงน

1. สราง New Project ชนด Dynamic Web Application ชอ Voter ดงรปท 3.2

รปท 3.2 การสรางโปรเจค Web Application ชอ Voter


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>


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)


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); }}


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


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());}


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];


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";

}}


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


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 การเลอกคำสงสรางตาราง


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 ผลลพธจากการสรางตาราง


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 คำสงเพมขอมลในตาราง


34

2. เราสามารถทจะดขอมลทปอนเขาไปได โดยการคลกขวาท Table ทชอ books เแลวลอก Select Rows – Limit1000 ดงรปท 4.6

รปท 4.6 การเรยกดขอมลใน Table ชอ books


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


36


ขนตอนแรกจะทำการสรางโปรเจคใหมโดยการเลอกเมน 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


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


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()


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 ดงน


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);}

}


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>");


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 + ")";


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 {


protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {


}

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


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


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


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


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;


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);


47

RequestDispatcher obj =request.getRequestDispatcher("thankyou.html");obj.forward(request, response);

} catch (UnknownHostException ex) {out.println("Error " + ex);return;


}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


}


1. ทำการ Deploy โปรแกรม WebBaseDB

2. เรยกใชงานหนา addBook.html แลวทดสอบกรอกขอมล

3. ไปทโปรแกรม admin ของ MongoDB แลวเรยกคำสง db.books.find() จะเหนขอมลใหมทปอนเขามา


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


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 {


try { String name = "Numnonda"; request.setAttribute("RequestName", name); RequestDispatcher obj = request.getRequestDispatcher("SecondServlet"); obj.forward(request, response); } finally { out.close(); } }


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;



public class SecondServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


try { String name = (String) request.getAttribute("RequestName"); out.println(name); } finally { out.close();


50

} }




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


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");


52


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(); } }



public String getServletInfo() { return "Short description"; } }

Listing ท 7.4 โปรแกรม SecondSessionServlet.java

package servlet;



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");


53

out.println(name); } finally { out.close(); } }



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



กำหนด Package เปน servlet และ Class Name เปน SecondServlet แลวกด Finish

ในหนาตาง Editor เขยน Source code ของ SecondSessionServlet.java ดง Listing ท 6.4 แลว Save

7.2.2 ขนตอนการทดสอบโปรแกรมเพอสาธตขอบเขตของ Object แบบ Session


1. ทำการ Deploy โปรเจค 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 ใหมแลวสงเกตผลลพธ


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);


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);


55

} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); }


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



กำหนด Java Package เปน servlet และ Class Name เปน SecondServlet แลวกด Finish

ในหนาตาง Editor เขยน Source code ของ SecondAppServlet.java ดง Listing ท 6.6 แลว Save


56

7.3.2 ขนตอนการทดสอบโปรแกรม เพอสาธตขอบเขตของ Object แบบ Applicatio n


1. ทำการ Build และ Deploy โปรเจค 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 ใหมแลวสงเกตผลลพธ


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 เรมตน

การทำงาน


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


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;



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;


public void init() {conn = (Connection) getServletContext().getAttribute("connection");


61

}


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 + ")";


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);

}}


1. ทำการ Build และ Deploy โปรแกรม WebBaseDB

2. Run โปรแกรม WebBaseDB ทงนตองทำการรน MySQL Database Server กอน

3. โปรแกรมจะแสดงหนา addBook.html ใหเราใสขอมล

ซงเมอกด OK ผลลพธกจะถกบนทกลง Table books เชนเดยวกบแบบฝกหดท 5


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


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();}


64

}




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

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;


@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();


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


66

รปท 9.2 การกำหนดคาของ Filter

5. ในหนาตาง Editor เขยน Source code ของเมธอด doFilter() ของไฟล LoginFilter.java ดง Listing ท

9.3 แลว Save


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


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 สงเกตวาผลลพธเปนอยางไร


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


4. ในหนาตาง Projects เลอกไฟล hello.jsp แลวเลอก Run โปรแกรม

5. โปรแกรมจะแสดงผลดงรปท 10.2


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 ดงน


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


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


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>


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


3. เลอกรป Folder ชอ Web และเลอก Dynamic Web Project ดงรปท 11.2



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


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


76


77


78


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">


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


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


82

รปท 11.8 การ New Class Book.java เพอใชเปน JavaBean ทมโครงสรางเดยวกบ Table

5. เลอกวาจะสราง getters หรอ setters หรอทงสองอยาง โดยการเลอก Check box ดงรปท 11.9 แลวกด OK


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;


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);


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


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 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(); }}


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


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


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


90


<%@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>


91


92


93


94

รปท 12.1 ผลลพธของโปรแกรม hello.jsp


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>


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


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


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


99

รปท 12.5 การสราง Java Tag Handler Class


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();


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


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


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>


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


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


106

รปท 13.4 Palette สำหรบสรางหนาเพจ

3. คลกท Struts Tags จะเหน Object ตางๆ ใหทำการ Drag and Drop ลงไปทหนา Design เพอสราง

หนาเพจดงรปท 13.5 โดยมสวนของ source ดง Listing ท 13.1

รปท 13.5 สราง JSP Page เพอใหผใชงานปอนขอมล


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>


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


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


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();


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 มาใหแลว


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


112

รปท 13.11 ตวอยางผลลพธทไดจากการใสขอมลลงใน Table Books


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


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



115


<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


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


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>


1. ทำการ Deploy โปรแกรม

2. รนโปรแกรมโดยใช url ชอ http://localhost:8080/HelloWebSpring/welcome จะไดผลลพธดงรป 14.2

รปท 14.2 ผลลพธการรนโปรแกรม

14.7 พฒนาโปรแกรมเพอเชอมตอกบฐานขอมล

Spring MVC เปน Framework ทมฟงกชนในการตดตอกบฐานขอมลได ในทนเราจะปรบปรงโปรแกรม

เพอใหสามารถจะเพมขอมลใน Table ทชอ Books และสามารถทจะดขอมลทงหมดไดโดยตองแกไขและสรางไฟล


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 ทปรบปรงใหม


import java.util.List;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;


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


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


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">

…


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


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 โดยการปรบปรงไฟลดงกลาวโดยมขนตอนการพฒนาโปรแกรมดงน


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


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


<url-pattern>/user.html</url-pattern><web-resource-name>User Page</web-resource-name>


<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


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>


<web-resource-name>Admin Page</web-resource-name><url-pattern>/admin.html</url-pattern>


<role-name>admin</role-name></auth-constraint>

</security-constraint>


<web-resource-name>User Page</web-resource-name><url-pattern>/user.html</url-pattern>


<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

จะเหนวาไมสามารถเขาหนาเวบนได


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>.......


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" />


127

5. ทำการ Restart Tomcat เพอใหอาน config ทแกไป

15.8 การทดสอบโปรแกรม แบบ Database Authenticate

ใชการทดสอบแบบเดยวกนกบ Form Authenticate


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 ดงน


129

รปท 16.1 การเลอกตดตง Plugin และ SDK ของ Google App Engines


ขนตอนนจะเปนการโปรแกม 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


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


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


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


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


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;


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>


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 {


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(); }

}


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 ของ


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


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 ดงน


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();


}}


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>");


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();

}}


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