Java Web Programming (JSP/Servlet) Using Eclipse and Tomcat

1

Hand-onExercises

การเขยนโปรแกรมเวบJava Servlet / JSP

โดยใชEclipse and TomCat

Assoc.Prof.Dr.Thanachart NumnondaSoftware Park Thailand

andAsst Prof.Thanisa Kruawaisayawan

King Mongkut's Institute of Technology Ladkrabang

April 2011

การเขยนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan

2

สารบญExercise 1 การสรางโปรเจค Web Application และไฟล HTML..........................................................................5

1.สราง Application Server .................................................................................................................52.สรางโปรเจค Web Application............................................................................................................. 53.พฒนาโปรแกรม addCustomer.html ...................................................................................................... 51.1 สราง Application Server............................................................................................................... 51.2 การสราง Web Application Project.................................................................................................. 61.3 การพฒนาโปรแกรม addCustomer.html................................................................................................ 81.4 การทดสอบโปรแกรม...........................................................................................................................12

Exercise 2 การเขยนโปรแกรม Java Servlet เพออานคาพารามเตอร..........................................................................142.1 การพฒนาโปรแกรม CustomerServlet.java......................................................................................... 14

2.1.1 การอานคาพารามเตอรจาก addCustomer.html ...............................................................................142.1.2 การแสดงรายละเอยดของคาตางๆ.......................................................................................................15

2.2 ขนตอนการพฒนาโปรแกรม CustomerServlet.java ................................................................................162.3 การทดสอบโปรแกรม...........................................................................................................................182.4 การปรบปรงโปรแกรมเพอใหเรยกไฟล addCustomer.html เมอเรมตน และ ใหแสดงผลภาษาไทยถกตอง............................20

Exercise 3 โปรแกรมเวบสำหรบการทำโพล......................................................................................................... 233.1 โปรแกรม vote.html....................................................................................................................... 233.2 การพฒนาโปรแกรม VoteServlet.java................................................................................................. 23

3.2.1 กำหนดตวแปร counter และ lang ............................................................................................... 243.2.2 อานคาพารามเตอรตางๆทสงมาจาก vote.html และทำการประมวลผล............................................................243.2.3 การแสดงผลการโหวต...................................................................................................................24

3.3 ขนตอนการพฒนาโปรเจค Voter ............................................................................................................ 253.4 การปรบปรงโปรแกรม VoteServlet.java...............................................................................................30

3.4.1 กำหนดตวแปร voters................................................................................................................303.4.2 การอานหมายเลขไอพของผใช.......................................................................................................... 30

Exercise 4 การเชอมตอกบ MySQL Database............................................................................................. 324.1 การจดการ Table เปดโปรแกรม MySQL Workbench....................................................................................................... 324.2 การสรางตาราง books....................................................................................................................... 334.3 การใชคำสง SQL ใน MySQL WorkBench........................................................................................35

Exercise 5 การพฒนาโปรแกรมเวบ เพอตดตอกบฐานขอมล........................................................................................375.1 การ Config Apache Tomcat ใหสามารถใชงาน JDBC Driver...............................................................375.2 การสราง Web Application Project................................................................................................ 385.3 การพฒนาโปรแกรม addBook.html.....................................................................................................385.4 การพฒนาโปรแกรม thankyou.html.................................................................................................... 405.5 การพฒนาโปรแกรม AddBookServlet.java......................................................................................... 40

5.5.1 การอานคาพารามเตอรจาก addBook.html ......................................................................................405.5.2 การเชอมตอกบฐานขอมล...............................................................................................................415.5.3 เพมรายชอหนงสอใหมลงในฐานขอมล ................................................................................................ 435.5.4 การเรยกเวบเพจ thankyou.html ................................................................................................ 43

5.6 ขนตอนการพฒนาโปรแกรม AddBookServlet.java ................................................................................445.7 ทดสอบโปรแกรม...............................................................................................................................46

Exercise 6 โปรแกรมเวบเพอสาธตขอบเขตของออปเจค............................................................................................ 486.1 การพฒนาโปรแกรมเพอสาธตขอบเขตของ Object แบบ Request ..................................................................... 48

6.1.1 ขนตอนการพฒนาโปรแกรมเพอสาธตขอบเขตของ Object แบบ Request .....................................................506.1.2 ขนตอนการทดสอบโปรแกรมเพอสาธตขอบเขตของ Object แบบ Request.................................................... 51

6.2 การพฒนาโปรแกรมเพอสาธตขอบเขตของ Object แบบ Session ......................................................................526.2.1 ขนตอนการพฒนาโปรแกรมเพอสาธตขอบเขตของ Object แบบ Session .....................................................54


3

6.2.2 ขนตอนการทดสอบโปรแกรมเพอสาธตขอบเขตของ Object แบบ Session ....................................................546.3 การพฒนาโปรแกรมเพอสาธตขอบเขตของ Object แบบ Application................................................................ 55

6.3.1 ขนตอนการพฒนาโปรแกรมเพอสาธตขอบเขตของ Application................................................................. 576.3.2 ขนตอนการทดสอบโปรแกรมเพอสาธตขอบเขตของ Object แบบ Application.............................................. 57

Exercise 7 การพฒนา WebBase DB โดยคลาสประเภท Web Listener............................................................... 587.1 การพฒนาโปรแกรม Init.java.............................................................................................................. 587.2 การปรบปรงโปรแกรม AddBookServlet.java ......................................................................................617.3 ทดสอบโปรแกรม...............................................................................................................................63

Exercise 8 การพฒนาโปรแกรม Servlet Filter ...............................................................................................648.1 การพฒนาโปรแกรม Servlet Filter.......................................................................................................648.2 การเขยนหนา Login......................................................................................................................... 658.3 การเขยน Servlet Filter.................................................................................................................. 678.4 การเขยนโปรแกรม ShowServlet ........................................................................................................708.5 ขนตอนการทดสอบโปรแกรม ..................................................................................................................72

Exercise 9 การเขยนโปรแกรม JSP เพอแสดงผลลพธ.............................................................................................739.1 การพฒนาโปรแกรม hello.jsp............................................................................................................. 739.2 การพฒนาโปรแกรม viewBook.jsp.....................................................................................................74

9.2.1 การกำหนด Tag Library.......................................................................................................... 749.2.2 การกำหนด Datasource........................................................................................................... 749.2.3 การใชคำสง c:forEach เพอแสดงผล .............................................................................................. 75

Exercise 10 การพฒนาโปรแกรมเวบ Online Book Store.................................................................................7710.1 การพฒนาโปรแกรม selectBooks.jsp.................................................................................................7710.2 การพฒนาโปรแกรม Book.java......................................................................................................... 8110.3 การพฒนาโปรแกรม Cart.java........................................................................................................... 8410.4 การพฒนาโปรแกรม ProcessSelection.java.......................................................................................8510.5 การพฒนาโปรแกรม Init.java ........................................................................................................... 8710.6 การพฒนาโปรแกรม viewCart.jsp..................................................................................................... 8810.7 ขนตอนการทดสอบโปรแกรม ................................................................................................................89

Exercise 11 การสราง Custom Tags สำหรบโปรแกรม JSP............................................................................... 9011.1 การพฒนาโปรแกรม hello.jsp............................................................................................................ 9011.2 การพฒนาโปรแกรม helloTag.jsp...................................................................................................... 92

11.2.1 สรางไฟล Java ClassTag Handler.........................................................................................9311.2.2 สราง Tag Library Descriptor............................................................................................. 9511.2.3 เขยนโปรแกรม helloTag.jsp.................................................................................................... 97

11.3 การพฒนาโปรแกรม helloJSTL.jsp................................................................................................... 9811.4 การพฒนาโปรแกรม helloTagFile.jsp................................................................................................ 99

11.4.1 สราง Tag File.....................................................................................................................9911.4.2 เขยนโปรแกรม helloTagFile.jsp............................................................................................101

Exercise 12 การพฒนาโปรแกรมเวบโดยใช Strut Framework ..........................................................................10212.1 การสรางโปรเจค StrutsDBApp ในรปแบบ Struts Frameworks...........................................................10312.2 การพฒนาโปรแกรม addBook.jsp................................................................................................... 10412.3 การพฒนาโปรแกรม BookFormBean.java และ AddBookAction......................................................10612.4 การพฒนาโปรแกรม AddBookAction.java......................................................................................10912.5 การพฒนาโปรแกรม Init.java และ Thankyou.html [View]................................................................11112.6 การพฒนาไฟล struts-config.xml [Controller].............................................................................. 11112.7 การทดสอบโปรแกรม.......................................................................................................................112

Exercise 13 การพฒนาโปรแกรมเวบโดยใช JSF Framework.............................................................................11413.1 สรางโปรเจค JSFDBApp............................................................................................................. 11413.2 การพฒนาโปรแกรม JSF Managed Bean.........................................................................................11613.3 สรางหนาจอรบ Input โดยสราง addBook.jsp และ พฒนาสวนตรวจสอบ(Validation ขอมล).............................11813.4 สราง thankyou.html, error.html.............................................................................................. 119


4

13.5 การกำหนด Page Navigation...................................................................................................... 11913.6 การทดสอบโปรแกรม.......................................................................................................................122

Exercise 14 การ Authentication โดยใช Tomcat .....................................................................................12314.1 สราง Web Application Project................................................................................................ 12314.2 เพม User ของ Tomcat Web Server...........................................................................................12314.3 การ Config ไฟล web.xml ของ Web Application ทตองการใช Tomcat user .....................................12414.4 การทดสอบโปรแกรมแบบ Basic Authenticate...................................................................................12614.5 การปรบปรงโปรแกรมเพอใหใช Login Form........................................................................................ 12714.6 การทดสอบโปรแกรม แบบ Form Authenticate.................................................................................. 12814.7 การปรบปรงโปรแกรม เพอใช Authenticate โดยอานจาก Database MySQL.............................................. 12814.8 การทดสอบโปรแกรม แบบ Database Authenticate............................................................................ 129


5

Exercise 1 การสรางโปรเจค Web Application และไฟล HTML

แบบฝกหดนจะเปนการสรางโปรเจค Web Application และพฒนาหนาเวบเพจเพอใหผใชปอนขอมลของลกคา โดยพฒนาดวยภาษา HTML ซงจะทำหนาเปนสวนอนพตของโปรแกรมเพอใหผใชปอนขอมลผาน Web Browser

ขนตอนในการพฒนาโปรแกรม1. สราง Application Server

2. สรางโปรเจค Web Application

3. พฒนาโปรแกรม addCustomer.html

1.1 สราง Application Server สรางเพอให Eclipse รวาจะนำ code ทcompile แลว ไป Deploy ลง Application Server ทเปน Tomcat

เลอกท TAB Servers คลกขวาภายใน Window แลวเลอก New → Server - เลอกชอ Apache → Tomcat

v6.0 Server และ Browse ไปยง folder Tomcat ทตดตงไว

รปท 1.1 การ Config Eclipse เพอใหรจก TOMCAT Application Server


6

1.2 การสราง Web Application Project

สรางโปรแกรม Web-Base Application โดยการสราง Project ใหม มขนตอนดงน1. เลอกเมน File → New → Project

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

รปท 1.1 การสรางโปรเจค Web Application

2. ใหกำหนด Project Name = WebApp

สวนการเกบ File Eclipse จะใช Directory ทถามเมอครงเปดขนมาเปน Default

แต ถาตองการระบ กสามารถคลกเครองหมายออก (Uncheck) แลวทำการระบ Directory ใหมได จากนนกด ปม Next ดงรปท 1.2


7

รปท 1.2 การกำหนดชอ Project

3. แสดง Folder ทเกบ source code และ Output folder (ทเกบ Class file)

คอ [directory ทใสกอนรน Eclipse]\src\ และ [directory ทใสกอนรน Eclipse]\build\classes\

ดงรปท 1.3 จากนนกด ปม Next

รปท 1.3 แสดงทเกบ source code และ Output directory


8

4. แสดง Context root และ Content directory ดงรปท 1.4 กด Finish

รปท 1.4 แสดงชอ Context root และ Content directory

1.3 การพฒนาโปร แกรม a ddCustomer.html

โปรแกรม addCustomer.html เปนเวบเพจทใชแสดงฟอรมสำหรบปอนขอมลลกคาแลว นำไปบนทกลงฐานขอมล customers โดยมรปแบบหนาจอ HTML ทตองสราง ดงรปท 1.5

(สวนของโปรแกรมจะสรางในแบบฝกหดถดไป)

รปท 1.5 หนาเวบเพจ addCustomer.html

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


9

1. เลอกหนาตาง Project แลวคลกขวาทโหนด WebApp เลอก New → HTML File ดงรป 1.7

รปท 1.6 การ new File HTML

2. กำหนด HTML File Name: เปน addCustomer แลวกด Finish ดงรป 1.8

รปท 1.7 การสรางและตงชอ File HTML


10

3. เขยน source code ทำได 2 รปแบบคอรปแบบท 1 เขยนตาม Listing ท 1.1

Listing ท 1.1 โปรแกรม addCustomer.html <html><head><title> Add Customer</title></head>

<body><H1> Add a new customer profile</H1> <form action="addCustomer.do" method="POST"> Customer ID : <input name="id" /> <br> Name: <input name="name" /> <br> Address: <textarea name="addr" rows="4" cols="20"></textarea> <br> Mobile: <input name="mobile" size="9" /> <br> Fax: <input name="fax" size="9" /> <br> E-mail: <input name="email" size="25" /> <br><br> <input type="submit" value="Add" /> </form> </body>

</html>

รปแบบท 2 ใหเขยนหนาจอไดงายขนสามารถทจะลาก Icon ประเภท HTML Forms

ทอยในหนาตาง Palette มาใสทหนาจอ Design ไดโดยไมตองเขยน HTML ดงน- ปดหนาจอ HTML เดม- เลอกหนาตาง Project แลวคลกขวาท File addCustomer.html

- เลอก Open With และเลอกท Web Page Editor ดงรป 1.9

รปท 1.8 การเลอกเปด HTML กบ Editor ทเปน Design view


11

- คลกเลอกพนทวางสวนบนของหนาจอ เลอก Show และ Palette

รปท 1.9 การเรยกใช HTML Forms Icon ใน Palette Tools

- จะได Tab ชอ Palette อยทหนาจอดานลาง คลกท HTML 4.0 จะม Icons ใหเลอก สามารถทจะ Drag & Drop ขนไปวางดานบนสด (ลำดบท3 ดงรป 1.11)

และปรบคา Attribute ของ Object นนๆโดย เลอกท Tab Properties(Tabถดไปทางขวา) ได

รปท 1.10 การ Drag and Drop Forms Icon ไปทหนา Design

1.4 การทดสอบโปรแกรม


12

1. Deploy Web Project ส Web Application Server

โดยไปท Tab Server แลว Click ขวาท ชอ Tomcat v6.0 เลอก Add and Remove

รปท 1.11 การ Drag and Drop Forms Icon ไปทหนา Design

จากนนเลอก WebApp แลว กดปม Add เพอเพมเขาไปท Web Application Server และกด Finish

รปท 1.12 การ Deploy Project ส Web Application Server

2. Run โปรแกรม WebApp โดยคลกขวาท addCustomer.html → Run As → Run on Server

รปท 1.13 การรน File ทตองการ Test

3. จะมใหเลอกวาจะใหรน file นท Server ไหน (กรณเรานม Server เดยว) กด Finish


13

รปท 1.14 การเลอก Web Application Server ทจะใชรน

4. จะไดผลลพธดง รปท 1.15

รปท 1.15 ผลลพธทไดจากการรน File addCustomer.html

หมายเหต สงเกตททาย hostname จะหมายเลขพอรต ซงกค อ port ท Tomcat Server ใหบรการอย โดย Default จะเปน 8080 ยกเวนวาจะกำหนดหมายเลขอน


14

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


15

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


16

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

3. กำหนดคา URL Pattern(หรอ URL Mappings) เปน /addCustomer.do


17

โดยคลกเลอกชอ CustomerServlet, กดปม Edit

แลวเปลยน URL Mapping เปน addCustomer.do และกด Finish ดงรปท 2.3

รปท 2.3 การกำหนด URL Pattern

4. จากนนเพม Method ท file CustomerServlet.java

สำหรบรบ action ทSubmit มาจาก Http-Request (HTML Form) ทงชนด POST และ GET

โดยตงชอ Method วา processRequest( )

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

// ให implement source code ตาม หวขอ 2.1.2}


18

5. Implement Code เพมใน Method doGet(),doPost()

เพอสงตอ Http-Request ให Method processRequest()

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

processRequest(request, response); //เพม Code เขาไปทน}

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

processRequest(request, response); //เพม Code เขาไปทน}


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

เลอก Run As → Run on Server → กดปม Finish

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


19

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

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

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

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


20

2.4 การปรบปรงโปรแกรมเพอใหเรยกไฟล addCustomer.html เมอเรมตน และ ใหแสดงผลภาษาไทยถกตอง

เราสามารถทจะปรบปรงโปรเจคนเพอใหเรยกไฟล addCustomer.html โดยไมตองระบชอ file ใน URL

เชนเรยก http://localhost:8080/WebApp แลวใหรน Webpage addCustomer.html อตโนมต

ทำไดโดยการกำหนดพารามเตอร Welcome Files ใหเปนไฟลดงกลาว โดยมขนตอนดงน

1. ในหนาตาง Projects ขยายโหนด WebApp → Deployment Descriptor → Welcome Page

2. Double click ท Welcome Pages แลวเพมชอของหนา Page addCustomer.html ลงไปทบรรทกแรก หลง Tag

<Welcome-file-list> ดงรปท 2.7 แลว save

รปท 2.7 แกไข web.xml ให addCustomer.html เปนหนาแรกของ Project

3. ทำการทดสอบคอคลกขวาท Project WebApp → Run As → Run on Server

รปท 2.8 ทดสอบรนหนา addCustomer.html เพอเรยกใช CustomerServlet.java


http://localhost:8080/WebApp

21

รปท 2.9 ทดสอบรนหนา addCustomer.html เพอเรยกใช CustomerServlet.java

จะเหนวา เราไมไดระบชอ addCustomer.html ลงไป แตเมอเรยก /WebApp, Application Server

จะทราบทนทวาตองนำ File ไหนขนมารน เพอใหเปน Page แรก (Tomcat อานจาก web.xml นนเอง)

4. กรณถา Configuration ถกเปลยนคา หรอม class ใหมเกดขน Tomcat จะมการตอบสนองดงน4.1 การเตอนท Status ท Tab Server

รปท 2.10 Apache Tomcat เตอนให Restart Server

4.2 เมอสงรน Application ดงขอ 3 จะม Dialog box ถาม เพอใหConfirm วาจะ Restart App Server หรอไม ถาตองการให source code ทแกไป มผลทนท ใหเลอก Restart Server แลวกดปม OK

รปท 2.11 Apache Tomcat ขอ Confirm การ Restart Server

เมอไดทำขอ 4.1 หรอ 4.2 ขอใดขอหนงแลว ใหดทสถานะของ Tomcat จะพบวาเปน Synchronized


22

กจะทำให source code ทถกแกไขไปนน ถกใชงาน

รปท 2.12 Apache Tomcat ขณะพรอมใชงาน

นอกจากนถาเราทดลองปอนขอมลภาษาไทย ลงไปในจะพบวาโปรแกรม Web Browser บางตวจะแสดงผลลพธภาษาไทยไมถกตอง เราสามารถแกไขได โดยการกำหนดใหการเขารหสของพารามเตอรทสงมาเปน UTF-8 โดยเพมคำสงเขาไปท Method processRequest โดยตอจากบรรทดของ PrintWriter out …. ดงน

PrintWriter out = response.getWriter();response.setContentType("text/html;charset=utf-8");


23

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


24

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


25

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

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

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


26

2. กำหนด HTML File Name = vote แลวกด Finish

รปท 3.3 การสราง HTML Page ชอ vote.html

3. ในหนาตาง Editor เขยน Source code ของ vote.html ดง Listing ท 3.1

Listing ท 3.1 โปรแกรม vote.html

<html> <head><title>Web Voting</title></head> <body>

<form action="processVote" method="POST"> Select a computer language <BR> <input type="radio" name="lang" value="1" /> Java <br> <input type="radio" name="lang" value="2" /> C# <br> <input type="radio" name="lang" value="3" /> C <br> <input type="radio" name="lang" value="4" /> Pascal <br> <input type="submit" value="Vote" />

</form></body></html>


27

4. เลอกหนาตาง Projects แลวคลกขวาทโหนด Voter เลอกคำสง New > Servlet

กำหนด Package เปน controller และ Class Name = VoteServlet.java

แลวกด Next กำหนด URL Mapping = /processVote แลวกด Finish

รปท 3.4 การสราง Java Servlet ชอ VoteServlet.java และกำหนด URL Pattern (URL Mapping)


28

ในหนาตาง Editor เขยน Source code ของ VoteServlet.java ดง Listing ท 3.2

Listing ท 3.2 โปรแกรม VoteServlet.java

package controller;

import java.io.IOException; import java.io.PrintWriter;

import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;

public class VoteServlet extends HttpServlet {

private static final long serialVersionUID = 1L;String []lang ={"Java", "C#", "C", "Pascal"};int []count = new int[4];

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

PrintWriter out = response.getWriter(); response.setContentType("text/html;charset=UTF-8");

String vote = request.getParameter("lang"); int voteNum = Integer.parseInt(vote) - 1; count[voteNum]++; out.println("<html>"); out.println("<head>"); out.println("<title>Servlet VoteServlet</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1>Servlet VoteServlet at " +request.getContextPath() + "</h1>"); for (int i = 0; i < count.length; i++) { out.println(lang[i] +" = " + count[i] + "<BR>"); } out.println("</body>"); out.println("</html>"); out.close(); }

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

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


29

5. ทำการ Deploy Web Project ท Apache Tomcat

ไปท Tab Server ดานลาง คลกขวา ท Tomcat v6.0 Server แลวเลอก Add and Remove

รปท 3.5 การ Deploy Project ไปท Apache Tomcat แบบ Manual

6. กด Save แลวทำการ run โปรเจคเพอทดสอบโปรแกรมโดยเรยก URL ท http://localhost:8080/Voter/vote.html โดยจะไดผลลพธดงตวอยางในรปท3.6

รปท 3.6 ตวอยางผลลพธของโปรเจค Voter


http://localhost:8080/Voter/vote.html

30

3.4 การปรบปรงโปรแกรม VoteServlet.java

ให Set Welcome Page เมอเรยก http://localhost:8080/Voter/ ใหไปท vote.html ทนท (ตวอยาง หนาท 20)

เพอความสะดวก ไมตองระบชอ html page ขณะเรยกใชงาน

ขนตอนนจะเปนการปรบปรงโปรแกรม VoteServlet.java เพอปองกนการโหวตซำทงนจะไมอนญาตให ผใชทใชหมายเลขไอพเดยวกนโหวตซำได โดยจะเกบหมายเลขไอพททำการโหวตแลวในออปเจคชนด HashSet การพฒนาโปรแกรมนมคำสงเพมเตมทสำคญดงน

1. กำหนดตวแปร voters2. อานหมายเลขไอพของผโหวตและเพมคะแนนการโหวต หากหมายเลขไอพนไมเคยโหวต

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


http://localhost:8080/Voter/

31

สำหรบโปรแกรม 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;

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 {


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

}}


32

Exercise 4 การเชอมตอกบ MySQL Database

เนอหาทตองศกษากอน -แบบฝกหดนเปนการเรมตนใชงาน Database Tool เพอเชอมตอกบ Table test ในฐานขอมล MySQL

สำหรบเปนตวชวยใหทำงานไดเรวขน เชนปกตถาจะ create table กตองเขยน SQL แต Tool นม GUI มาชวย ทำใหลดขอผดพลาด และ สะดวกในการทำงานมากขน

4.1 การจดการ Table เปดโปรแกรม MySQL Workbench

รปท 4.1 การเรยกใชงาน Program MySQL Workbench

1. Double Click Connection Name ใส Password ทกำหนดไวในตอนตดตงโปรแกรม MySQL ซงจะมคาเปน root ดงรปท 4.2

รปท 4.2 การแสดงการเชอมตอ Connection เพอเขาไปจดการ Database


33

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. Double คลก Add Table... ใสชอ table และ ชอ field แลวกดปม Apply ดงตารางท 4.1

รปท 4.3 การเลอกคำสงสรางตาราง


34

2. หรอใชคำสง SQL Statement กได โดยนำไปใสทหนาตาง Query1 แลว กด icon สายฟาสเหลองเพอรนCREATE TABLE BOOKS (ISBN VARCHAR(20) NOT NULL ,TITLE VARCHAR(70) NULL ,AUTHOR VARCHAR(50) NULL ,PRICE FLOAT NULL ,PRIMARY KEY (ISBN) );

3. เปด Tables books จะเหน Column ตางๆ ดงรปท 4.4

รปท 4.4 ผลลพธจากการสรางตาราง


35

4.3 การใชคำสง SQL ใน MySQL WorkBench

ภายหลงจากทมการสราง Table ทชอ books เราสามารถใชคำสง SQL เพอทจะตดตอกบฐานขอมล ในทนจะแสดงการเพมขอมลลงใน Table โดยมขนตอนตางๆดงน

1. Double Click ท Table books ดานขวา จะได SQL Editor ใหปอนคำสง SQL เปนINSERT INTO books VALUES ('123', 'JAVA', 'Thanisa', 2500.00);INSERT INTO books VALUES ('456', 'SOA', 'Thanachart ', 3000.00) ;

แลว กด Icon สายฟาสเหลอง ดงรป 4.8 หรอกด Ctrl+Shift+Enter เพอรนคำสง SQL ทงหมด

รปท 4.5 การ Execute คำสงเพมขอมลในตาราง


36

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

รปท 4.6 การเรยกดขอมลในตาราง


37

Exercise 5 การพฒนาโปรแกรมเวบ เพอตดตอกบฐานขอมล

เนอหาทตองศกษากอน การใชงาน Tool ทตดตอกบ MySQL Database

แบบฝกหดนจะเปนการพฒนาโปรแกรม Web Application โดยใช Java Servlet เพอเชอมตอกบฐานขอมล ในทนใชฐานขอมล MySQL ซงม Database ชอ test และสราง Table ทชอ books ไวแลวจาก ท Exercise 4 (หนา 34)

การทำงานของโปรแกรม เปนการเพมขอมลลงใน Table ดงกลาว โดยกำหนดใหผใชปอนรายละเอยดขอมลผานเวบเพจทชอ addBook.html ซงเมอผใชกดปม Add โปรแกรมกจะไปเรยกโปรแกรม Servlet ทชอ AddBookServlet ซงจะมคำสงในอานคา parameter ทผใชปอนเขามาและทำการบนทกขอมลลงใน Table books ซงใชชดคำสง SQL ผาน JDBC API

ขนตอนในการพฒนาโปรแกรม1. Config Apache Tomcat ใหสามารถใชงาน JDBC Driver

2. สรางโปรเจค WebBaseDB

3. พฒนา Web page addBook.html

4. พฒนา Web page Thankyou.html

5. พฒนาโปรแกรม AddBookServlet.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 ตำแหนงของ 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


http://mysql.cs.pu.edu.tw/Downloads/Connector-J/mysql-connector-java-5.1.15.zip

38

5.2 การสราง Web Application Project เลอกเมน File → New Project เลอก Dynamic Web Application

กำหนดชอ Project Name = WebBaseDB (ตวอยางการสราง Project Web Application หนา 24)

5.3 การพฒนาโปรแกรม addBook.html โปรแกรม addBook.html เปนเวบเพจทใชแสดงฟอรมสำหรบปอนขอมลหนงสอใหมเขาในฐานขอมล

books ซงมลกษณะดงรปท 5.2 โปรแกรม addBook.html

รปท 5.2 หนาเวบเพจ addBook.html

ขนตอนการพฒนาดงน1. คลกขวาทโหนด WebBaseDB จากนนเลอกคำสง New → HTML File (ตวอยาง หนา 25)

กำหนด File Name: เปน addBook แลวกด Finish

2. เขยน source code ของไฟล addBook.html ตาม Listing ท 5.1

หรอ ลาก icon ประเภท HTML Forms ทอยในหนาตาง Palette เพอสามารถใหเขยนโปรแกรมไดงายขน (ตวอยาง หนา 9 โดยทำตาม รปแบบท 2 ) ดงรปท 5.3


39

รปท 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>


40

5.4 การพฒนาโปรแกรม thankyou.html

โปรแกรม Thankyou.html เปนเวบเพจทใชแสดงใหเหนวาขอมลไดถกเพมเขาไปในฐานขอมลแลว โดยม source code ดง Listing ท 5.2 ซงขนตอนการพฒนาโปรแกรมนจะเปนเชนเดยวกบการพฒนาโปรแกรม addBook.html

Listing ท 5.2 โปรแกรม thankyou.html

<html> <head> <title>Thank you</title> </head> <body> <H1>Thank you for inserting data </H1> </body></html>

5.5 การพฒนาโปรแกรม AddBookServlet.java

โปรแกรม AddBookServlet.java เปนโปรแกรมทถกเรยกใชโดย addBook.html เมอผใชกดปม Add

โปรแกรมนจะทำหนาทเพอตดตอกบฐานขอมลโดยมขนตอนการทำงานดงน1. อานคาพารามเตอรตางๆทสงมาจาก addBook.html

2. เชอมตอกบฐานขอมล books

3. เพมรายชอหนงสอใหมลงในฐานขอมล books

4. เรยกเวบเพจ Thankyou.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");


41

5.5.2 การเชอมตอกบฐานขอมล

การดงขอมลระหวาง Application กบ MySQL Database มขนตอนดงน● เพม Resource ชนด Data source ลงไปท Container ของ Tomcat

● เพม Resource Reference โดยทำการ Map DataSource ท Application ตองการใช● เรยกใชคำสง SQL โดยใชเมธอด executeQuery() หรอ executeUpdate()

1. เพม Resource ชนด DataSource ลงไปท Tomcat

โดยสราง file context.xml ท Folder \WebBaseDB\WebContent\META-INF\ ดงรป 5.4<Context><Resource

name="jdbc/test" auth="Container" driverClassName="com.mysql.jdbc.Driver"type="javax.sql.DataSource"url="jdbc:mysql://localhost:3306/test"username="root" password="root" >

</Resource></Context>

รปท 5.4 เพม Resource ใหกบ Apache Tomcat


42

2. ทำการ Mapping Data source ท Application ตองการเชอมตอโดยแกไข Web Deployment Descriptor ของ Project (\WEB-INF\web.xml) โดยเพมดงน

<resource-ref> <description>Test Database</description> <res-ref-name>jdbc/test</res-ref-name> <res-type>javax.sql.DataSource</res-type> <res-auth>Container</res-auth> </resource-ref>

รปท 5.5 เพม Resource Reference ท Web Deployment Descriptor

3. การขอ Data source จะใช @annotation และบอกชอของ Data source ตวทเราตองการ ตย. source code เชน

@Resource(name = "jdbc/test") private DataSource jdbcTest;

เมอได Data source แลว เรากจะสรางทางตดตอ โดย get Connection จากมนแลวเกบคาไวทตวแปร conn

โดยเขยน source code สวนนท Method init( )

private Connection conn; public void init() { try { conn = jdbcTest.getConnection();

} catch (Exception ex) {System.out.println(ex);} }

5.5.3 เพมรายชอหนงสอใหมลงในฐานขอมล


43

เมอเชอมตอฐานขอมลและไดออปเจคชนด Connection มาแลว เราสามารถทจะเรยกใชคำสง SQL ได ซงในทนคอคำสง INSERT ซงจะมรปแบบของคำสงดงน

INSERT INTO books VALUES(....)

โดยเราจะใชคาจากพารามเตอรตางๆทรบมา ดงนนถาขอมลทปอนเขามาถกตองเราสามารถทจะเพมรายชอหนงสอใหมลงในฐานขอมลโดยใชคำสงดงน

Statement stmt = conn.createStatement(); String sql = "INSERT INTO books VALUES('"

+ isbn + "','" + title +"','" + author +"',"+ price +")";

int numRow = stmt.executeUpdate(sql);

5.5.4 การเรยกเวบเพจ t hankyou.html

เมอขอมลไดถกเพมลงไปในฐานขอมลแลว โปรแกรม AddBookServlet จะทำการเรยกเวบเพจ thankyou.html โดยการเรยกใช RequestDispatcher ดงน

RequestDispatcher obj = request.getRequestDispatcher("thankyou.html"); if (numRow == 1 && obj != null) { obj.forward(request,response); }


44

5.6 ขนตอนการพฒนาโปรแกรม AddBookServlet.java

1. คลกขวาทโหนด WebBaseDB จากนนเลอกคำสง New → Servlet

กำหนด Package = controller , Class Name = AddBookServlet

URL Mapping = /addBook.do แลวกด Finish

2. ในหนาตาง editor ใหแกไข source code ของไฟล AddBookServlet.java

ใหเปนไปตาม Listing ท 5.3

Listing ท 5.3 โปรแกรม AddBookServlet.java package controller;

import java.io.IOException;import java.io.PrintWriter;import java.sql.Connection;import java.sql.SQLException;import java.sql.Statement;

import javax.annotation.Resource;import javax.servlet.RequestDispatcher;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.sql.DataSource;

public class AddBookServlet extends HttpServlet {

private static final long serialVersionUID = 1L;@Resource(name = "jdbc/test")private DataSource jdbcTest;private Connection conn;

public void init() {try {

conn = jdbcTest.getConnection();} catch (Exception ex) {

System.out.println(ex);}

}

protected void processRequest(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter();out.println("<html>");out.println("<head>");out.println("<title>Add a new book</title>");out.println("</head>");out.println("<body>");out.println("<h1> Add a new book </h1>");


45

try {String isbn = request.getParameter("isbn");String author = request.getParameter("author");String title = request.getParameter("title");String priceStr = request.getParameter("price");float price = Float.parseFloat(priceStr);Statement stmt = conn.createStatement();String sql = "INSERT INTO books VALUES('" + isbn + "','" + title+ "','" + author + "'," + price + ")";


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 ไฟลไหน เรยกวา การทำ Organize Imports

รปท 5.6 Ctrl+Shift+O ให Eclipse เปนตวชวยในการแสดง Import file

4. เพอความสะดวกในการเรยกใช Web Application อาจปรบให Welcome file เปน addBook.html (ตวอยาง Exercise 2 การเขยนโปรแกรม Java Servlet เพออานคาพารามเตอร ทหนา 20)


46

5.7 ทดสอบโปรแกรม

1. ทำการ Deploy โปรแกรม WebBaseDB ซงใน Eclipse ทำโดย Click ขวาท Add and Remove

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

รปท 5.7 ตวอยางการปอนขอมล Books

3. เมอกดปม Add โปรแกรมกจะใสขอมลลงใน Database และแสดงผลลพธดงรปท 5.8

รปท 5.8 ผลลพธทแสดงทาง Web Browser


47

4. เขาไปดขอมล โดยใช MySQLWorkbench เลอกคำสง Select Rows -... จาก Table ทชอ books ดงรปท 5.9

รปท 5.9 ขอมลทถกปอนเขา Table ทชอ books


48

Exercise 6 โปรแกรมเวบเพอสาธตขอบเขตของออปเจค

นอหาทตองศกษากอน การเขยนโปรแกรม Servlet เพออานคาพารามเตอร

แบบฝกหดนจะเปนการพฒนาโปรแกรม Java Servlet เพออธบายขอบเขตการทำงานของออปเจคในโปรแกรมแบบเวบ (Object Scope) ทมอยสแบบคอ Page, Request, Session และ Web (Application) โดยจะทดลองสงคาของออปเจคผานกนระหวางโปรแกรม Servlet สองชด

6.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 = “Thanisa”; request.setAttribute(“RequestName”, name);

ซงจะทำให URL ททำการเรยกถดไปสามารถเรยกใช attribute ทชอ RequestName และดงคาของตวแปร name ออกมาได โดยใชคำสง getAttribute() โดยมรปแบบดงน

String name = (String) request.getAttribute(“RequestName”);


49

สวนคำสงทใชในการทจะ forward จากโปรแกรม Servlet ตวหนงไป URL อนจะเปนคำสงทมรปแบบดงน

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

โดยท SecondServlet คอชอ URL ทตองการ forward

ในขนตอนนจะเปนการพฒนาโปรแกรมเพอสาธตการทำงานของขอบเขตการทำงานของ Object แบบ request โดยการพฒนาโปรแกรม Servlet ขนมาสองโปรแกรมคอ FirstServlet ทจะใชในการสงออปเจคซงม source

code ตาม Listing ท 6.1 และ โปรแกรม SecondServlet ทจะใชในการอานคาของออปเจคทสงออกมาแลวนำมาแสดงผล ซงม source code ตาม Listing ท 6.2

Listing ท 6.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 = "Thanisa"; 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"; }}


50

Listing ท 6.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(); } }




6.1.1 ขนตอนการพฒนาโปรแกรมเพอสาธตขอบเขตของ Object แบบ Request

เราสามารถทจะพฒนาโปรแกรม ตามขนตอนดงน1. เลอกเมน File → New → Dynamic Web Application

กำหนด Project Name = ScopeDemo

2. คลกขวาทโหนด ScopeDemo → New → Servlet

กำหนด Package = servlet , Class Name = FirstServlet แลวกด Finish

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


51

3. คลกขวาทโหนด ScopeDemo อกครง จากนนเลอกคำสง New → Servlet

กำหนด Package = servlet , Class Name = SecondServlet แลวกด Finish

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

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

เราสามารถทจะทดสอบโปรแกรม ตามขนตอนดงน

1. ทำการ Deploy โปรเจค ScopeDemo โดยคลกขวาท Apache Tomcat แลว Add and Remove Project เขาไป

รปท 6.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


http://localhost:8080/ScopeDemo/FirstServlet


52

6.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 = "Thanisa";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");

ในขนตอนนจะเปนการพฒนาโปรแกรมเพอสาธตการทำงานของขอบเขตการทำงานของ Object แบบ session โดยการพฒนาโปรแกรม Servlet ขนมาสองโปรแกรมคอ FirstSessionServlet ทจะใชในการสงออปเจคซงม source code ตาม Listing ท 6.3 และ โปรแกรม SecondSessionServlet ทจะใชในการอานคาของออปเจคทสงออกมาแลวนำมาแสดงผล ซงม source code ตาม Listing ท 6.4

Listing ท 6.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 = "Thanisa"; HttpSession session = request.getSession(); session.setAttribute("SessionName", name); } finally { out.close(); } }


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


53

}

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

Listing ท 6.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"); out.println(name); } finally { out.close(); } }



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


54

6.2.1 ขนตอนการพฒนาโปรแกรมเพอสาธตขอบเขตของ Object แบบ Session

เราสามารถทจะพฒนาโปรแกรม ตามขนตอนดงน1. เลอกเมน File → New แลวเลอก Dynamic Web Application


2. คลกขวาทโหนด ScopeDemo จากนนเลอกคำสง New → Servlet


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



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

6.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 ใหมแลวสงเกตผลลพธ




http://localhost:8080/ScopeDemo/FirstSessionServlet

55

6.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 = "Thanisa"; ServletContext context = getServletContext(); context.setAttribute("AppName", name);

โปรแกรม Java Servlet อนๆสามารถทจะเรยกใช attribute ของออปเจคชนด ServletContext ทชอ AppName และดงคาของตวแปร name ออกมาได โดยใชคำสง getAttribute() เพอเรยกคาจากออปเจคชนด ServletContext โดยมรปแบบดงน

ServletContext context = getServletContext(); String name = (String) context.getAttribute("AppName"); out.println(name);

ในขนตอนนจะเปนการพฒนาโปรแกรมเพอสาธตการทำงานของขอบเขตการทำงานของ Object แบบ application โดยการพฒนาโปรแกรม Servlet ขนมาสองโปรแกรมคอ FirstAppServlet ทจะใชในการสงออปเจคซงม source code ตาม Listing ท 6.5 และ โปรแกรม SecondAppServlet ทจะใชในการอานคาของออปเจคทสงออกมาแลวนำมาแสดงผล ซงม source code ตาม Listing ท 6.6

Listing ท 6.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 = "Thanisa"; ServletContext context = getServletContext(); context.setAttribute("AppName", name); } finally { out.close(); } }


56

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


Listing ท 6.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); }}


57

6.3.1 ขนตอนการพฒนาโปรแกรมเพอสาธตขอบเขตของ Application

เราสามารถทจะพฒนาโปรแกรม ตามขนตอนดงน1. เลอกเมน File → New แลวเลอก Dynamic Web Application


2. คลกขวาทโหนด ScopeDemo จากนนเลอกคำสง New → Servlet


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



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

6.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 ใหมแลวสงเกตผลลพธ




http://localhost:8080/ScopeDemo/FirstAppServlet

58

Exercise 7 การพฒนา WebBase DB โดยคลาสประเภท Web Listener

เนอหาทตองศกษากอน การพฒนาโปรแกรมเวบเพอตดตอกบฐานขอมล

แบบฝกหดนจะเปนการปรบปรงโปรเจค Web Application ทชอ WebBaseDB ทใชในการเชอมโยงฐานขอมลและใสขอมลลง Table โดยเพมคลาสประเภท Web Listener เพอทำการเชอมตอกบฐานขอมลแทนวธการเดมทเชอมตอในเมธอด init()

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

1. พฒนาโปรแกรม Init.java

2. แกไขโปรแกรม AddBookServlet.java

7.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 นนๆ3. เขยน Config ไฟลเพมท Web Deployment Descriptor web.xml เพอเพม คลาสประเภท Listener

โปรแกรม Init.java คอโปรแกรมทเปน ServletContextListener มนจะเชอมตอกบฐานขอมลเมอ Web Application เรมทำงาน แลวเกบออปเจค Connection ไวภายใน ServletContext เพอลดจำนวนครงในการเชอมตอฐานขอมล

เขยนคำสงเชอมตอฐานขอมลทำท Method contextInitialized( ) ซงจะถกเรยกเมอ Web Application เรมตนการทำงาน


59

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

1. คลกขวาทโหนด WebBaseDB → New → Listener

กำหนด Package = listener , Class Name = Init

แลวกด Finish ดงรปท 7.1

รปท 7.1 การสรางคลาสประเภท Web Listener

2. ตรวจสอบ context.xml วามอยหรอไม ถาไมมให เพม Resource ชนด DataSource ลงไปท Tomcat

โดยสราง file context.xml ท Folder \WebContent\META-INF\


60

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

3. ทำการขอ Datasource จาก Container สวนตวแปร ds ทรบเปน Instance Member

จะอยนอก Method ใดๆ เพอใหทง initial และ destroy มองเหน@Resource(name="jdbc/test")private DataSource ds;

private Connection conn;

เพม source code (ขอ 4 - 5) ใน Method contextInitialized เพอเตรยม connection ใหพรอมใชงาน4. ขอ Connection จาก Datasource

conn = ds.getConnection();

5. นำ Connection ไปเกบท ServletContext แลว กำหนดชอ context varible เปน 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 ท 7.1

Listing ท 7.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 ds;



61

public void contextInitialized(ServletContextEvent arg0) { try {

conn = ds.getConnection(); arg0.getServletContext().setAttribute("connection", conn);

} catch (SQLException e) {e.printStackTrace();} }

public void contextDestroyed(ServletContextEvent arg0) { try {

conn.close();} catch (SQLException e) {e.printStackTrace();}

}}

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

Lisitng ท 7.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;

public class AddBookServlet extends HttpServlet {

private static final long serialVersionUID = 1L;


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

}


response.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter();


62

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

}}


63

7.3 ทดสอบโปรแกรม

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

2. Run โปรแกรม WebBaseDB ทงนตองทำการรน MySQL Database Server กอน 3. โปรแกรมจะแสดงหนา addBook.html ใหเราใสขอมล

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


64

Exercise 8 การพฒนาโปรแกรม Servlet Filter

เนอหาทตองศกษากอน การเขยนโปรแกรม Servlet เพออานคาพารามเตอร

แบบฝกหดนจะเปนการพฒนาโปรแกรม Web Application เพออธบายการใช Servlet Filter ในการตรวจสอบการ login เขาสระบบ โดยโปรแกรม Java Servlet บางโปรแกรมทอยใน Web Application จะถก Filter เรยกเพอตวสอบสถานะการ login กอนทจะสามารถใชโปรแกรมนนได

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

ใดๆ โดยการกำหนดคาใน web.xml อาทเชนคำสง

<filter> <filter-name>LoginFilterName</filter-name> <filter-class> LoginFilter </filter-class> </filter> <filter-mapping> <filter-name>LoginFilterName</filter-name> <url-pattern> /* </url-pattern> </filter-mapping>

เปนการกำหนดใหโปรแกรม URL ทกตวทอยใน Web Application น ตองถกดกโดย Servlet Filter ทชอ LoginFilter


65

แบบฝกหดนจะกำหนดใหม 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

8.2 การเขยนหนา Login

หนา Login จะมโปรแกรมสองโปรแกรมคอ login.html ซงจะเปน web page ทมลกษณะดงรป และม source

code ตาม Listing ท 8.1 นอกจากจะมโปรแกรม LoginServlet ซงจะทำหนาทในการอานพารามเตอรทชอ username

และ password พรอมทงตรวจสอบวามคาเปน thana และ secret หรอไม หากใชกจะกำหนดคา ตวแปร loginFlag

เปน true แลวเกบลงในออปเจคชนด HttpSession โปรแกรมนจะม source code ดง Listing ท 8.2

รปท 8.1 เวบหนา Login

Listing ท 8.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>


66

Listing ท 8.2 โปรแกรม LoginServlet.java package controller;import java.io.*;import java.net.*;import javax.servlet.*;import javax.servlet.http.*;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();}

}




ขนตอนการพฒนาโปรแกรม1. เลอกเมน File → New → Dynamic Web Project กำหนด Project = FilterDemo

2. คลกขวาท FilterDemo → New → HTML File

กำหนด HTML File Name = login แลวกด Finish

3. ในหนาตาง Editor เขยน Source code ของ login.html ดง Listing ท 8.1 แลว Save

4. คลกขวาท FilterDemo → New → Servlet

กำหนด Package = controller , Class Name = LoginServlet.java แลวกด Finish

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


67

8.3 การเขยน Servlet Filter

โปรแกรม LoginFilter จะทำหนาทในการเรยก attribute ทชอ loginFlag และหากไมพบหรอมคาเปน false โปรแกรมจะระบ HTTP Error 401 (Unauthorize) โปรแกรม LoginFilter จะม source code หลกอยท เมธอด doFilter() ดง Listing ท 8.3

กรณนจะกำหนดให URL เฉพาะทเปน *.do จงจะเรยกใช Filter ทชอ LoginFilter

ใหใช Eclipse สราง Filter

จะเหนความเปลยนแปลงท Web Deployment Descriptor คอม Line เพมขนมาดงน <filter> <display-name>LoginFilter</display-name> <filter-name>LoginFilter</filter-name> <filter-class>filter.LoginFilter</filter-class> </filter> <filter-mapping> <filter-name>LoginFilter</filter-name> <url-pattern>*.do</url-pattern> </filter-mapping>

Listing ท 8.3 เมธอด doFilter() ของ โปรแกรม LoginFilter.java package filter;import javax.servlet.*;import javax.servlet.http.*;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(); 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 {}

}


68

ขนตอนการพฒนาโปรแกรม1. เลอกหนาตาง Projects แลวคลกขวาทโหนด FilterDemo จากนนเลอกคำสง New > Other..

2. ในไดอะลอก New File ใหเลอก Categories ทชอ Web ซงโปรแกรมกจะแสดง File Types ตางๆ ภายใต Category น ใหเราเลอก Filter แลวกด Next

3. กำหนด Class Name: เปน LoginFilter และ Package เปน filter แลวกด Next

4. ในหนาถดไป ใหใชคาทกำหนดไว ดงรปท 8.2 แลวกด Finish

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


69

5. โปรแกรมจะทำการแกไขไฟล web.xml เพอระบ Filter ใหมทสรางขน ซงเราสามารถทจะดการแกไขนไดโดยการขยายโหนด FilterDemo → WebContent → WEB-INF แลว ดบเบลคลกไฟล web.xml

รปท 8.3 ดผลลพธของ Web Deployment Descriptor (web.xml) เมอ add Filter ส Project

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


70

8.4 การเขยนโปรแกรม ShowServlet โปรแกรม ShowServlet จะทำหนาทเพอแสดงขอความวา Hello World และใหใชงาน Filter

source code ดง Listing ท 8.4

Listing ท 8.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

กำหนด Package = view , Class Name = ShowServlet

2. กำหนด URL Mapping เปน /show.do ดงรปท 8.4 แลวกด Finish


71

รปท 8.4 การกำหนดคา URL pattern

3. ในหนาตาง Editor เขยน Source code ของ ShowServlet.java ดง Listing ท 8.4 แลวเลอกคำสง Save


72

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

สงเกตวาผลลพธเปนอยางไร


http://localhost:8080/FilterDemo/login.html

http://localhost:8080/FilterDemo/show.do

73

Exercise 9 การเขยนโปรแกรม JSP เพอแสดงผลลพธ


แบบฝกหดนจะเปนการพฒนาโปรแกรม JSP เพอแสดงขอมลจากฐานขอมล ออกทางโปรแกรม Web

Browser โดยจะเปนการพฒนาโปรเจค WebBaseDB เพอเตม

9.1 การพฒนาโปรแกรม hello.jsp

โปรแกรม hello.jsp เปนโปรแกรม JSP เพอแสดงขอความและวนเวลาของ Web Server โปรแกรมนจะเปนการแสดงผลแบบ dynamic content จงตองพฒนาโดยใชภาษา JSP โดยมขนตอนการพฒนาโปรแกรมดงน

1. คลกขวาทโหนด WebBaseDB → New → JSP File

กำหนด JSP File Name = hello แลวกด Finish

รปท 9.1 สราง JSP file

2. ในหนาตาง editor ใหแกไข source code ของไฟล hello.jsp ใหเปนไปตาม Listing ท 9.1


4. ในหนาตาง Projects เลอกไฟล hello.jsp แลวเลอก Run โปรแกรม 5. โปรแกรมจะแสดงผลดงรปท 1


74

Listing ท 9.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>

รปท 9.2 ผลลพธของ hello.jsp

9.2 การพฒนาโปรแกรม viewBook.jsp โปรแกรม viewBook.jsp เปนโปรแกรม JSP เพอแสดงขอมลของ Table ทชอ books โปรแกรมนจะเรยกใช

standard tags ทกำหนดไวใน JSTL ซงทำใหผเขยนโปรแกรม JSP ไมตองเขยน source code ภาษา Java โดยมคำสงตางๆ ทสำคญดงน

9.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"%>

9.2.2 การกำหนด Datasource

โปรแกรม JSP นจะทำการเชอมตอกบฐานขอมล โดยจะตองใช DataSource ของโปรเจค โดยสามารถกำหนดไดสองวธ

1. กรณทม datasource ซงเชอมตอฐานขอมลทตองการอยแลว กสามารถใชอนเดมไดเลย ตวอยางเชน jdbc/test โดยไมจำเปนตองสราง dataSource ขนใหมอก

2. กรณทยงไมม datasource ใหใชคำสง setDataSource เปน Tag เพอใหเราสามารถกำหนดการเชอมตอกบฐานขอมล และกำหนดคาไวในตวแปรตามชอทกำหนด

ถงแมวาโปรเจค WebBaseDB จะม Datasource อยแลว แตแบบฝกหดนจะกำหนด Datasource ขนมาใหม

โดยกำหนดเปนตวแปรทชอ newdatasource ดงน<sql:setDataSource var="newdatasource" driver="com.mysql.jdbc.Driver"url="jdbc:mysql:///test" user="root" password="root"/>

เพอเปนการเชอมตอฐานขอมลทอยท URL ทชอ jdbc:mysql:///test


75

*สามารถใช 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>

9.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-impl-1.2.jar และ jstl-api-1.2.jar ทน http://jstl.java.net/download.html)

นำ .Jar File ทง 2 ไปไวท folder {$TOMCAT}\lib ซงเปน path ของท install Apache Tomcat ดงรปท 9.3

รปท 9.3 การเพม JSTL Library บน Apache Tomcat


http://jstl.java.net/download.html

76

เมอดท Project → Java Resource → Libraries → Apache Tomcat v6.0 จะเหนวาม JSTL เพมแลว

รปท 9.4 JSTL Library ท Apache Tomcat สามารถใชงานได

3. ในหนาตาง editor ใหแกไข source code ของไฟล viewBook.jsp ใหเปนไปตาม Listing ท 9.2


5. ในหนาตาง Projects เลอกไฟล viewBook.jsp แลวเลอก Run โปรแกรม 6. ท Web Browser เปลยน URL เปน http://localhost:8080/WebBaseDB/viewBook.jsp จะได

ผลลพธดงตวอยางในรปท 9.5

รปท 9.5 ผลลพธของ viewBook.jsp

Listing ท 9.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>


http://localhost:8080/WebBaseDB/viewBook.jsp

77

Exercise 10 การพฒนาโปรแกรมเวบ Online Book Store

เนอหาทตองศกษากอน การพฒนาโปรแกรมเวบเพอตดตอกบฐานขอมล และ การพฒนาโปรแกรมเวบเพอตดตอกบฐานขอมล

แบบฝกหดนจะเปนการพฒนาโปรแกรม JSP เพอสราง Web Form ใหผใชเลอกรายการหนงสอตางๆ ทมอยใน table ทชอ books จากนนจะแสดงรายการทผใชเลอกออกมาทางเวบเพจ

10.1 การพฒนาโปรแกรม selectBooks.jsp

โปรแกรม selectBooks.jsp เปนโปรแกรม JSP ทเขยนเพอแสดงรายการหนงสอทมอยใน table ทชอ books

ออกมาแสดงในรปแบบของ Web Form เพอใหผใชเลอกรายการหนงสอและจำนวนดงรปท 10.6 ทงน Web Form นจะเรยก url ทชอ processSelection เมอมการกดปม Select โปรแกรมนจะเรยกใช SQL tags ของ JSTL เพอแสดงรายการขอมลรายชอหนงสอ โดยม source code ดงแสดงใน Listing ท 10.1 และมขนตอนการพฒนาโปรแกรมดงน

1. เรมตนสรางโปรแกรม Web-Base Application โดยการสราง Project ใหม มขนตอนดงน1. เลอกเมน File → New → Project ดงรปท 1.1

2. รปท 10.1 การสรางโปรเจค Web Application

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


4. ใหกำหนด Project Name: เปน WebApp

สวนการเกบ File Eclipse จะใช Directory ทถามเมอครงเปดขนมาเปน Default

แตถาตองการระบ กสามารถคลกเครองหมายออก (Uncheck) แลวทำการระบ Directory ใหมได


78


รปท 10.3 การกำหนดชอโปรเจค

5. แสดง Folder ทเกบ source code และ Output folder (ทเกบ Class file)

คอ [directory ทใสกอนรน Eclipse]\src\ และ [directory ทใสกอนรน Eclipse]\build\classes\


รปท 10.4 แสดงทเกบ source code และ Output directory


79

6. แสดง Context root และ Content directory ดงรปท 10.2

รปท 10.5 แสดงชอ Context root และ Content directory

7. คลกขวาท Project BookOnline → New → JSP File

กำหนด JSP File Name = selectBooks แลวกด Finish

8. ในหนาตาง editor ใหแกไข source code ของไฟล selectBooks.jsp ใหเปนไปตาม Listing ท 10.1

9. กดปม Save

รปท 10.6 ตวอยางผลลพธของโปรแกรม selectBooks.jsp


80

Listing ท 10.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"> <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>


81

10.2 การพฒนาโปรแกรม Book.java

โปรแกรม Book.java เปนคลาสทม attribute ทสอดคลองกบ table ทชอ books โดยม source code ดง Listing ท 10.2 และมขนตอนการพฒนาดงน

1. คลกขวาท Projects BookOnline → New → Class..

2. กำหนด Package = model , Class Name = Book กด Finish

รปท 10.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;


82

4. ทำการ encapsulate attribute (สรางเมธอด getter และ setter)

โดยการคลกขวาภายในหนาตาง editor ของ source code

แลวเลอก Source > Generate Getters and Setters... ดงรป 10.8

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


83

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

รปท 10.9 กำหนด Encapsulation ให Attribute หรอ Instance Member

Listing ท 10.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; }}


84

10.3 การพฒนาโปรแกรม Cart.java โปรแกรม Cart.java เปนคลาสททำหนาทคลายกบ shopping cart เพอเกบออปเจคชนด Book ตามรายการ

หนงสอทผใชเลอก โดยอางองจากหมายเลข isbn ซงโปรแกรมจะทำการคนรายชอหนงสอจาก table ทชอ books

หมายเลข isbn ทอางอง แลวจะแปลงเปนออปเจคชนด books กอนจะใสลงใน cart โปรแกรมนจะม source code

ดง Listing ท 10.3 และมขนตอนการพฒนาดงน

1. คลกขวาท Projects BookOnline → New → Class

กำหนด Package = model , Class Name = Cart.java กด Finish

2. ในหนาตาง editor ใหแกไข source code ของไฟล Cart.java ใหเปนไปตาม Listing ท 10.3 แลว Save

Listing ท 10.3 โปรแกรม Cart.java package model;import java.sql.Connection;import java.sql.ResultSet;import java.sql.SQLException;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); }}

10.4 การพฒนาโปรแกรม ProcessSelection.java

โปรแกรม ProcessSelection.java เปนโปรแกรม Java Servlet ททำหนาทอานคาพารามเตอรทชอ isbn ซงสงมาจากหนา Web Form ของโปรแกรม selectBooks.java โดยใชคำสง getParameterValues ดงน


85

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

เมอไดคา 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 ท 10.4

ขนตอนการพฒนาโปรแกรม ProcessSelection.java มดงน

1. คลกขวาท Projects BookOnline → New → Servlet

กำหนด Package = controller , Class Name = ProcessSelection

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


86

Listing ท 10.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

10.5 การพฒนาโปรแกรม Init.java

โปรแกรม Init.java เปนโปรแกรมประเภท ServletContextListener เพอเชอมตอกบฐานขอมลเมอเรมตน แลวเกบออปเจค connection ไวภายใน ServletContext โดยมขนตอนการพฒนาเชนเดยวกบการพฒนาโปรแกรม Init.java ใน Exercise 7 การพฒนา WebBase DB โดยคลาสประเภท Web Listener (หนา 60)

และจะตองมการสรางไฟล context.xml และแกไข web.xml แบบเดยวกนกบ Exercise ดงกลาว

Listing ท 10.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);

}}

}


88

10.6 การพฒนาโปรแกรม viewCart.jsp โปรแกรม viewCart.jsp เปนโปรแกรม JSP ทเขยนเพอแสดงรายการหนงสอทผใชเลอก และเกบใน

shopping cart ออกมาแสดง โปรแกรมนจะใช Expression Language เพอแสดงขอมลใน session ดง Listing ท 10.6 และมขนตอนการพฒนาดงน

1. คลกขวาท Project BookOnline → New → JSP File

กำหนด JSP File Name = viewCart แลวกด Finish

2. ในหนาตาง editor ใหแกไข source code ของไฟล viewCart.jsp ใหเปนไปตาม Listing ท 10.6 แลว Save

Listing ท 10.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>


89

10.7 ขนตอนการทดสอบโปรแกรม

1. ทำการ Deploy โปรเจค BookOnline

2. ทดลองรน URL ทชอ http://localhost:8080/BookOnline/selectBooks.jsp

ทดลองเลอกรายการหนงสอ แลวกดปม Select

โปรแกรมจะเรยก URL ทชอ http://localhost:8080/BookOnline/processSelection

เพอแสดงรายการใน Cart ดงรปท 10.10

3. ทดลองกลบไปเลอกรายการหนงสอเพมเตม หรอเรยก URL ทชอ http://localhost:8080/BookOnline/viewCart.jsp โดยตรงแลวสงเกตผลลพธ

รปท 10.10 การแสดงขอมลใน Cart


90

Exercise 11 การสราง Custom Tags สำหรบโปรแกรม JSP

เนอหาทตองศกษากอน

แบบฝกหดนจะเปนการพฒนาโปรแกรม JSP เพอสราง custom tag โดยจะเรมแสดงการพฒนาโปรแกรมตงแตการเขยน JSP โดยไมใช custom tags แลวสราง tag โดยใช Tag Handler และขนตอนสดทายจะเปนการสราง tag โดยใช Tag File โดยโปรแกรม JSP ทเขยนจะเปนการพมพขอความวา Hello xxxx จำนวนสบครง โดยท xxxx คอชอทสงมาทางพารามเตอรทชอ name

11.1 การพฒนาโปรแกรม hello.jsp

โปรแกรม hello.jsp เปนโปรแกรม JSP ทเขยนโดยใช scriptlet เรยกคำสงภาษาจาวา โดยจะมคำสงในการอานพารามเตอรของออปเจค request ทชอ name แลวจะพมพขอความ Hello xxxx จำนวนสบครง โดยโปรแกรมนจะม source code ดง Listing ท 11.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 ท 11.1

4. ทำการ Build และ Deploy โปรแกรม JSPDemo

5. ในหนาตาง Projects เลอกไฟล hello.jsp แลวเลอก Run โปรแกรมโดยใหสงผานพารามเตอรทาง URL เชน http://localhost:8080/JSPDemo/hello.jsp ?name=Thanisa เราจะไดผลการรนดงรปท 11.1


http://localhost:8084/JSPDemo/hello.jsp?name=Thanachart

http://localhost:8084/JSPDemo/hello.jsp?name=Thanachart

91

Listing ท 11.1 โปรแกรม hello.jsp <%@page contentType="text/html"%><%@page pageEncoding="UTF-8"%><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Demo</title> </head> <body>

<h1>JSP Demo</h1> <% String name = request.getParameter("name"); %> <% for (int i = 0; i < 10; i++) { %> Hello <%= name %> <br> <% } %> </body></html>

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


92

11.2 การพฒนาโปรแกรม 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] เปนตวอธบาย attribute ตางๆภายใน element ของ tag

ตวอยาง element และ attribute → <element attribute1=”A”> </element>

• สราง JSP file [helloTag.jsp] เพอเรยกใชงาน Custom Tag

รปท 11.2 Overview ความสมพนธของ Custom Tag Files


93

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

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


94

2. ทำการ Implement Method ชอ doTag( ) และ สราง method ประเภท setter เพมชอ setName( )

รปท 11.4 การ Implement method ทจะถกเรยกเมอมการใช Custom Tag

3. หนาตาง Editor จะแสดงไฟล NameTagHandler.java ใหเขยน source code ดง Listing ท 11.2

Listing ท 11.2 โปรแกรม NameTagHandler.java

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

}}

11.2.2 สราง Tag Library Descriptor


95

ไฟลนจะใชเกบ รายชอ Tag ตางๆ ทมอยเพอสามารถนำ tag ตางๆ มาใชในโปรแกรม JSP

โดยใชคำสง <%@taglib ...%>

การสราง Tag Library Descriptor จะมขนตอนดงน1. คลกขวาท Project JSPDemo เลอก New → Folder

เลอก JSPDemo → WebContent → WEB-INF แลว กำหนด Folder name = tlds

รปท 11.5 สราง Folder เพอเกบ Tag Language Descriptor


mailto:%25@taglib

96

2. เลอก Project JSPDemo → WebContent → WEB-INF → tlds

คลกขวาท Folder tlds

กำหนด TLD Name = MyTags.tld ***ใหใส นามสกล tld ดวย แลว กด Finish

รปท 11.6 การสราง File Tag Library Descriptor

3. หนาตาง Editor จะแสดงไฟลทชอ MyTags.tld ทอยในโฟลเดอร \WebContent\WEB-INF\tlds


97

4. Implement code ดง Listing ท 11.3

Listing ท 11.3 โปรแกรม MyTags.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/MyTags</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>

11.2.3 เขยนโปรแกรม helloTag.jsp

จะเรยกใช Tag ทชอ NameTag โดยจะม source code ดง Listing ท 3 การสรางโปรแกรม 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 ท 11.4

5. ทำการ run โปรแกรม จะไดผลลพธเชนเดยวกบโปรแกรม hello.jsp

Listing ท 11.4 โปรแกรม helloTag.jsp <%@page contentType="text/html"%><%@page pageEncoding="UTF-8"%><%@taglib uri="/WEB-INF/tlds/MyTags" 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:NameTagHandler name="Thanisa" />

</body></html>

11.3 การพฒนาโปรแกรม helloJSTL.jsp โปรแกรม helloJSTL.jsp เปนโปรแกรม JSP ททำงานเชนเดยวกบโปรแกรมทผานมาแตจะทำการเรยกใช


98

JSP Standard Tag Library ในการพมพขอความ Hello xxx สบครง แทนการเขยนคำสง scriptlet โดยโปรแกรมนจะม source code ดง Listing ท 11.5 และจะมขนตอนการพฒนาโปรแกรมดงน

1. คลกขวาท Project JSPDemo เลอก New → JSP File

กำหนด JSP File Name = helloJSTL แลวกด Finish

2. ตรวจสอบ JSTL Libraries ทตองใชงาน ถาไมมใหทำการ import เขามาตามหวขอ 2. เพม JSTL Library เพอให JSP เรยกใชงานได (หนาท 75)

รปท 11.7 ตรวจสอบ Library ของ JSTL

3. ในหนาตาง editor ใหแกไข source code ของไฟล helloJSTL.jsp ใหเปนไปตาม Listing ท 11.5

4. ทำการ run โปรแกรมโดยกำหนด URL เปน http://localhost:8080/JSPDemo/helloJSTL.jsp?name=Thanisa

จะไดผลลพธเชนเดยวกบโปรแกรม hello.jsp

Listing ท 11.5 โปรแกรม 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 var="i" begin="1" end="10"> Hello ${param.name} <br> </c:forEach> </body></html>

11.4 การพฒนาโปรแกรม helloTagFile.jsp

JSP 2.0 อนญาตใหเราสราง custom tag โดยการเขยนไฟล html หรอ JSP แทนทจะเขยนโปรแกรมภาษาจาวา ซงทำใหงายตอการพฒนา ในทนเราจะพฒนาโปรแกรม helloTagFile.jsp ซงจะทำการเรยกใช custom tag ทชอ NameTagFile ทเปน tag file ซงเปนโปรแกรม JSP โดยมขนตอนการพฒนาดงน


99

11.4.1 สราง Tag File ไฟลนจะทำหนานเปนตวจดการ Tag โดยเขยนเปนโปรแกรม JSP และมขนตอนการพฒนาดงน

1. สราง Folder ชอ tags ภายใต \WebContent\WEB-INF\

2. คลกขวาท Folder tags กำหนด File Name = NameTagFile ดงรป

รปท 11.8 การสราง Tag File


100

3. หนาตาง Editor ให implement source code ดง Listing ท 11.6

Listing ท 11.6 โปรแกรม NameTagFile.tag <%@tag description="Tag Name" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <c:forEach var="i" begin="1" end="10"> Hello ${param.name} <br> </c:forEach>

4. เนองจากม Tag Name ใหมมาเพม กรณท File JSP ม Tag ชอนถกเรยกใชมนจะหา Tag Handler มาทำงาน โดยดจาก <%@taglib uri="/WEB-INF/tlds/MyTags" prefix="myTags" %>

ซงกคอ File MyTags.tld ทเราสรางขนมา ดงนนตองเพม Configuration ชอ Tag ใหม เขาไปดง Listing ท 11.7

Listing ท 11.7 เพม Tag Name ใหมเขาท Tag Library Descriptor (MyTags.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/MyTags</uri><tag>

<name>NameTagHandler</name><tag-class>tags.NameTagHandler</tag-class><body-content>scriptless</body-content><attribute>


</attribute></tag>

<tag-file>

<name>NameTagFile</name><path>/WEB-INF/tags/NameTagFile.tag</path><attribute>


</attribute></tag-file>



</taglib>


101

11.4.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 ท 11.8

4. ทำการ run โปรแกรมโดยกำหนด URL เปน http://localhost:8080/JSPDemo/helloTagFile.jsp?name=Thanisa

จะไดผลลพธเชนเดยวกบโปรแกรม hello.jsp

Listing ท 11.8 โปรแกรม helloTagFile.jsp

<%@page contentType="text/html"%><%@page pageEncoding="UTF-8"%><%@taglib uri="/WEB-INF/tlds/MyTags" 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>


102

Exercise 12 การพฒนาโปรแกรมเวบโดยใช Strut Framework


แบบฝกหดนจะเปนการพฒนาโปรแกรม Web Application โดยใช Struts Framework โดยการปรบปรงโปรแกรมเวบเพอตดตอกบฐานขอมล เพอใหสวนของ Web User Interface สามารถทจะตรวจสอบขอมล (Validate

Data) ทปอนขอมลได และเปลยนแปลงวธการอานพารามเตอรโดยใช Struts Framework

ขนตอนในการพฒนาโปรแกรม1. สรางโปรเจค StrutsDBApp ในรปแบบ Struts Frameworks

2. พฒนาโปรแกรม addBook.jsp [View สวนตดตอ user]

3. พฒนาโปรแกรม BookFormBean.java [Model เปน Bean ซงสอดคลองกบสวนของ View]

4. พฒนาโปรแกรม Init.java เชอมตอ Database [Model]

5. พฒนาโปรแกรม AddBookAction.java [Model เมอม Request เขามาจะเพมขอมลไปท Table]

6. แกไขไฟล ApplicationResource.properties

7. พฒนาโปรแกรม Thankyou.html

8. พฒนาไฟล Struts-Config.xml


103

12.1 การ สรางโปรเจค StrutsDBApp ในรปแบบ Struts Frameworks 1. Download Struts Frameworks Release ทตองการ ขณะนมถง Struts 2 แตเพอความเขาใจพนฐานของ โ

Framework จงใช Struts 1 โดย Download http://archive.apache.org/dist/struts/binaries/struts-1.3.9-all.zip

2. ทำการเปด File Zip ออกมา จะเหน Folder ชอ apps ภายในจะม war file ชอ struts-blank-1.3.9.war

ใหทำการ Extract ออกมาไวท Temporary folder เชน D:\TEMP\ กอน

รปท 12.1 Extract File Struts-blank

1. ทำการ Import Template เขาส Eclipse เพอเตรยม Environment ท Struts Framework ตองการ

รปท 12.2 Import เขาส Eclipse

2. ทำการ Rename ชอ Project โดยคลกขวาท Project → Refactor → Rename...

แลวใสชอเปน StrutsDBApp

รปท 12.3 การ Refactor ชอ Project


http://archive.apache.org/dist/struts/binaries/struts-1.3.9-all.zip

104

12.2 การพฒนาโปรแกรม addBook.jsp สรางเวบเพจเพอใชสำหรบปอนขอมลหนงสอใหม เขาในฐานขอมล books ซงมลกษณะดงรปท 12.4

รปท 12.4 เวบเพจทใชแสดงฟอรมสำหรบปอนขอมล

ขนตอนการสรางหนา JSP เพอรบขอมล 1. File → New → JSP File กำหนดชอ addBook.jsp

2. พมพ Label ออกหนาจอ จะใชงาน taglib ไดโดยม 2 แบบคอ html และ bean

1. html คลายกบ HTML Tag ธรรมดา 2. bean เปนการดงขอมลตวอกษรจาก configuration ท file MessageResources.properties

จงตองมการนำขอมล ขอความตางๆ เตรยมไวกอน เพอให Struts Tag ดงไปใชได เชนขอความทใชเปน Label , ใชเพอแสดง Error ใหผใชงานเหน ดงรปท 12.6 และ Listing ท 12.1

รปท 12.5 เพมขอมล label และ Error Message ทตองการใน file /src/MessageResources.properties

Listing ท 12.1 แกไข Message สวนกลาง ท /src/MessageResources.properties

label.addbookform.display=Add New Booklabel.addbookform.isbn=ISBNlabel.addbookform.title=TITLElabel.addbookform.author=AUTHORlabel.addbookform.price=PRICE

error.isbn.required=Please correct ISBN length between 3-10 characterserror.title.required=Please correct TITLE length at least 3 characterserror.author.required=Please correct AUTHOR length at least 5 characterserror.price.required=Please correct PRICE must greater than zero


105

Listing ท 12.2 โปรแกรม addBook.jsp

<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%><%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title><bean:message key="label.addbookform.display" /></title></head><body>

<html:form action="/addBookAction"><font color="red"><html:errors /></font><bean:message key="label.addbookform.display" /><br><bean:message key="label.addbookform.isbn" /><html:text property="isbn" /><br><bean:message key="label.addbookform.title" /><html:text property="title" /><br><bean:message key="label.addbookform.author" /><html:text property="author" /><br><bean:message key="label.addbookform.price" /><html:text property="price" /><br><html:submit></html:submit>

</html:form></body></html>

จาก source code จะเหนวา ใช bean ดง message ออกมาจาก properties ทเรา config

ถามหลายๆ page ใชขอความเหมอนกน ถาตองการแกไขกจะทำทเดยวทำใหไมตองตามแกทก page

สวนของ tag <html:errors /> ใชรบ Error ท return มาจาก Method Validate นำมาแสดง ตาม Logic ทเขยนไว ท Validator Method ใน FormBean

(Validator Method จะแสดงใหเหนในหวขอท 3 Override Method Validate Listing 12.3 หนา 107)


106

12.3 การพฒนาโปรแกรม BookFormBean.java และ AddBookAction

Struts Framework จะมโปรแกรม Java ทจะตองพฒนาอย 2 ลกษณะคอ 1. FormBean : ทำหนาท Mapping Parameter ในหนาเวบเพจทรบขอมล และ Validate ตรวจสอบความถก

ตองของขอมลหนานนๆ

2. Action : ทำหนาทรบคาพารามเตอรทปอนมาแลวนำไปประมวลผลตาม Business Logic วาตองทำอะไรบาง เชน การจดการขอมลแบบตางๆ (CRUD = Create, Read, Update, Delete)

โปรแกรม FormBean จะเปนโปรแกรม Java ทมคา attribute สอดคลอง กบ ชอพารามเตอรทรบ ทางหนา

เวบเพจ(addBook.jsp) และจะมเมธอด getter และ setter ทสอดคลองกบ attribute ดงกลาว

รปท 12.6 ความสมพนธระหวาง Tag JSP ทสรางหนาจอ และ FormBean

นอกจากนอาจ Override เมธอดในการ Validate ตรวจสอบขอมล เพอใหสอดคลองกบเงอนไขทกำหนดไวดวย เชน กำหนดใหผใชตองปอนพารามเตอรทมชอและเงอนไขตางๆดงน

▪ isbn เปนชนด String ทมตวอกษรระหวาง 3-10 ตว▪ title เปนชนด String ทมตวอกษรอยางนอย 3 ตว▪ author เปนชนด String ทมตวอกษรอยางนอย 5 ตว▪ price เปนชนด float ทมคาเปนมากกวา 0.0

โดยจะดงขอมลมาตรวจสอบ โดยใหแกไข หรอ Override Method Validate ดงขนตอนตอไปโดยด source code ไดใน Listing ท 12.3


107

ขนตอนการสราง BookFormBean 1. เลอก File → New → Class

กำหนด pagekage = model , name = BookFormBean , SuperClass = ActionForm

รปท 12.7 สราง Java Class BookFormBean.java

2. ประกาศตวแปร Instance Varible เปน Private แลว Encapsulate

คลกขวาท source code แลวเลอก Source → Generate Getters and Setters... ดงรปท 12.9private String isbn;private String title;private String author;private float price;

รปท 12.8 ทำการ encapsulate instance variable

3. Override Method Validate โดย คลกขวาท source code แลวเลอก Source → Override/Implement

Methods... ดงรปท 12.10

รปท 12.9 ทำการเลอก Override Method validate ของ ActionForm

Listing ท 12.3 โปรแกรม Book FormBean .java [Model] package model;


108

import javax.servlet.http.HttpServletRequest;import org.apache.struts.action.ActionErrors;import org.apache.struts.action.ActionForm;import org.apache.struts.action.ActionMapping;import org.apache.struts.action.ActionMessage;

public class BookFormBean extends ActionForm {private static final long serialVersionUID = 1L;

private String isbn;private String title;private String author;private float price;

public ActionErrors validate(ActionMapping mapping,HttpServletRequest request) {

ActionErrors actionError = new ActionErrors();

if (getIsbn().equals(null) || (getIsbn().length() < 3 || getIsbn().length() > 10)){actionError.add("isbn", new ActionMessage("error.isbn.required"));

}

if (getTitle().equals(null) || (getTitle().length() < 3)) {actionError.add("title", new ActionMessage("error.title.required"));

}

if (getAuthor().equals(null) || (getAuthor().length() < 5)) {actionError.add("author",new ActionMessage("error.author.required"));

}

if (getPrice() <= 0) {actionError.add("price", new ActionMessage("error.price.required"));

}return actionError;

}

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

}

หมายเหต Method validate( ) จะ Return error object กลบไปใหหนา JSP ท tag → <html:errors /> (หนา 104) รปแบบการเพม Error คอ actionError.add(ดกจบท text properties ตวไหน, ขอความทอยากใหแสดงเมอ properties น Error);


109

12.4 การพฒนาโปรแกรม AddBookAction.java

โปรแกรม AddBookAction.java เปนโปรแกรม Action (Business Logic) ของ Struts Framework เพออานขอมลทผใชปอนเขามาจากหนา AddBook.jsp แลวเขยนขอมลลงใน table ทชอ Books โดยมขนตอนการพฒนาดงน

1. File → New → Class

กำหนด package = model , name = AddBookAction , SuperClass = Action ดงรปท 12.11

รปท 12.10 สราง Java Class BookFormBean.java

2. Override Method Validate โดย คลกขวาท source code

แลวเลอก Source → Override/Implement Methods... ดงรปท 12.12

รปท 12.11 ทำการเลอก Override Method validate ของ ActionForm

3. ทำการแกไข Source code ท Method execute() ดง Listing ท 12.4


110

Listing ท 12.4 โปรแกรม AddBook Action .java [Model]

package model;

import java.sql.Connection;import java.sql.SQLException;import java.sql.Statement;

import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;import org.apache.struts.action.ActionForm;import org.apache.struts.action.ActionForward;import org.apache.struts.action.ActionMapping;

public class AddBookAction extends Action {

public Connection getConnection(){Connection conn=(Connection)getServlet().getServletContext().getAttribute("connection"); if(connection == null) System.out.println("Not Found Connection in Servlet Context");

return conn;}

public ActionForward execute(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)throws Exception {

try {BookFormBean bookform=(BookFormBean)form;String isbn = bookform.getIsbn();String title = bookform.getTitle();String author = bookform.getAuthor();float price = bookform.getPrice();

String sql = "insert into books (isbn,title,author,price) values " +"('"+ isbn + "'" +",'"+ title+ "'" +",'"+ author+"'" +",'"+ price +"')";Statement stmt = getConnection().createStatement();stmt.execute(sql);System.out.println("SQL Statement :" + sql);System.out.println("Insert Success");

} catch (SQLException sqlexp) {System.out.println(sqlexp.getMessage());sqlexp.printStackTrace();throw new SQLException(sqlexp.getMessage());

} catch (Exception e) {System.out.println("Action Error "+e.getMessage());e.printStackTrace();throw new Exception(e.getMessage());

}return mapping.findForward("success");

}}


111

12.5 การพฒนาโปรแกรม Init.java และ Thankyou.html [View]

โปรแกรม Init.java เปนโปรแกรมประเภท ServletContextListener เพอเชอมตอกบฐานขอมลเมอเรมตน อาจมองวาเปนสวนของ Model กได โดยมขนตอนการพฒนาเชนเดยวกบการพฒนาโปรแกรม Init.java ใน Exercise

7 การพฒนา WebBase DB โดยคลาสประเภท Web Listener (หนา 60)

และจะตองมการสรางไฟล context.xml และแกไข web.xml แบบเดยวกนกบ Exercise ดงกลาว

โปรแกรม Thankyou.html เปนเวบเพจทใชแสดงใหเหนวาขอมลไดถกเพมเขาไปในฐานขอมลแลว โดยม source code ดง Listing ท 12.4

Listing ท 12.5 โปรแกรม Thankyou.html <html> <head> <title>Thank you</title> </head> <body> <H1>Thank you for inserting data </H1> </body></html>

12.6 การพฒนาไฟล struts-config.xml [Controller]

ไฟล Struts-config.xml เปนไฟลในการควบคมการทำงานของโปรแกรม Struts ซงในทนจะใชในการกำหนดลำดบการทำงานของเวบ (Navigation Rule) โดยมขนตอนการพฒนาคอ เปด Configuration ชอ/WEB-INF/struts-config.xml ออกมา

1. เพมให struts รจกกบ โปรแกรม Java ทเราสรางขนมาคอ - BookFormBean.java- AddBookAction.java

โดยระบ package.classname ลงไปท attribute type และชอเรยกคอ name

<form-beans><form-bean name="addBookAction" type="model.AddBookAction"></form-bean><form-bean name="BookFormBean" type="model.BookFormBean"></form-bean></form-beans>


112

2. ระบการทำงาน สรางความสมพนธใหกบ Struts วากรณม หนา Webpage JSP สงขอมลไปให Servlet เพอใหบนทกขอมลให Framework มาอาน Configuration ตรงนเพอตดสนใจวาใหทำอะไร

1. Browser สงขอมลแบบ post เขามา2. Controller ทำการแปล path โดยดท attribute path=”/addBookAction”

หา action วาจะไปทไหน โดยดจาก attribute type => “model.AddBookAction.java”

ตอไปดวาขอมลมาจากหนาจอไหน โดยดท attribute input=”/addBook.jsp”

และ JSP ทสงขอมลมาน จะเกบขอมลลงท FormBean ชออะไร ด attribute name = BookFormBean

(จะไป map ชอ class ท tag <form-bean name="BookFormBean" type="model.BookFormBean"/>)

และเกบไวใน scope ไหน ดท attribute scope = “session”

เมอไดขอมลเกบลง FormBean แลว Action กจะทำงาน เสรจสนกจะมการ return คากลบไปวา Business Logic ทำงานถกหรอไม โดยกำหนดท tag <forward name="success" path="/Thankyou.html"/> ถาถกตอง ภายในโปรแกรม Action กจะสงให return mapping.fndForward("success") กลบไป

 <action-mappings>

<action path="/addBookAction" type="model.AddBookAction"input="/addBook.jsp" name="BookFormBean" scope="session" ><forward name="success" path="/Thankyou.html"/>

</action>


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

2. Run โปรแกรม StrutDBApp


113

3. เลอก URL ของ Web Browser เปน http://localhost:8080/StrutDBApp/AddBook.jsp ใหเรา ทดลองใสขอมลดงรปท 12.12

รปท 12.12 ตวอยางการปอนขอมลเขา Table ชอ Books

4. เมอกดปม Add โปรแกรมกจะใสขอมลลงใน Database

5. เราสามารถทจะดขอมลทปอนเขาไปได โดยไปท Tool ของ MySQL ชอ MySQL Workbench

ดงรปท 12.14

รปท 12.13 ตวอยางการปอนขอมลเขา Table ชอ Books


http://localhost:8084/StrutDBApp/AddBook.jsp

114

Exercise 13 การพฒนาโปรแกรมเวบโดยใช JSF Framework


โปรแกรมในบทนจะเปนการพฒนาโปรแกรม Web Application โดยใช JSF Framework ทงนจะเปนการปรบปรงโปรแกรมเวบเพอตดตอกบฐานขอมล โดยจะทำใหผใชสามารถทจะ Validate Data ทปอนขอมลได และเปลยนแปลงวธการอานพารามเตอรโดยใช Java Server Faces (JSF) Framework

ขนตอนในการพฒนาโปรแกรม1. สรางโปรเจค JSFDBApp โดยเตรยม Library ของ JSF Framework และ JSTL

2. สรางหนาจอรบ Input โดยสราง addBook.jsp และ พฒนาสวนตรวจสอบ(Validation ขอมล)

3. สรางหนาจอแสดงผลจาก การเพมขอมล คอ thankyou.html , inserterror.html

4. สราง Business Logic ใช JSF Framework : BookBean.java และ Config Managed Bean

5. กำหนด Navigation Rule โดยการแกไข faces-config.xml

13.1 สรางโปรเจค JSFDBApp 1. เลอกเมน File → New → Project

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


2. ใหกำหนด Project Name = JSFDBApp

เลอก Configuration = JavaServer Faces v1.2 Project


115

รปท 13.2 การกำหนดชอ และเลอกใช JSF Frameworks ของ Web Project

3. กด Next เลอกทเกบ class , เลอก Web Module จนมาถงหนา JSF Capability

เลอก Disable Library Configuration กรณทได Download JSF library มาแลว กด finish

รปท 13.3 การกำหนดชอ และเลอกใช JSF Frameworks ของ Web Project


116

4. Configuration Library ท JSF ตองการ ซงจะม JSF Frameworks และ JSTL Library

โดย Copy Library .jar file ไปวางท lib ของ Web Project ดงรปท 13.4

รปท 13.4 Configuration Library ท JSF ตองการ

13.2 การพฒนาโปรแกรม JSF Managed Bean JSF Framework จะใช Java Bean เชอมโยงคาพารามเตอรระหวาง JSP และ JAVA Class

JSF Managed Bean จะเปนโปรแกรม Java ทมคา attribute สอดคลองกบชอพารามเตอรทจะปอน และจะมเมธอด getter และ setter ทสอดคลองกบ attribute ดงกลาว ซงในแบบฝกหดนจะกำหนดใหผใชตองปอนพารามเตอรทมชอตางๆ ดงน

● isbn เปนชนด String

● title เปนชนด String

● author เปนชนด String

● price เปนชนด float


117

ขนตอนการสราง BookBean 1. สราง Java Class ชอ BookBean.java โดยอยใน package ชอ bean

2. กำหนด variable ตามทเราตองการรบคาจากหนาจอ JSPprivate String isbn;private String title;private String author;private float price;

3. คลกขวาท source code แลวเลอก source → Generate Getter

4. สราง Method addBook( ) เพอนำขอมลเกบลงใน table

......

.......public class BookBean {private String isbn;private String title;private String author;private float price;

@Resource(name = "jdbc/test")private DataSource ds;private Connection conn;

public String addBook() throws SQLException {try {

getDBConn();Statement stmt = conn.createStatement();String sql = "insert into books values ('"

+ getIsbn() + "','"+ getTitle()+ "','"+ getAuthor()+ "','"+ getPrice()+ "')";

stmt.executeUpdate(sql);return "success";

} catch (Exception e) {e.printStackTrace();

} return "failure";

}public void getDBConn() throws SQLException {

if (conn == null) {conn = ds.getConnection();

}}

........

.......


118

13.3 สรางหนาจอรบ Input โดยสราง addBook.jsp และ พฒนาสวนตรวจสอบ (Validation ขอมล )

รปท 13.5 หนาจอ JSP เพอใชในการรบคา<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%><%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%><%@ taglib prefix="h" uri="http://java.sun.com/jsf/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=ISO-8859-1"><title>JSF Books DB</title></head><body>

<b>Add A New Book</b><f:view>

<h:form><h:inputText id="isbn" value="#{bookBean.isbn}"

required="true" requiredMessage="ISBN is required!"validatorMessage="Only 5 to 10 digits!"><f:validateLength minimum="5" maximum="10" />

</h:inputText><h:message for="isbn" /><br><h:inputText id="title" value="#{bookBean.title}"

required="true" requiredMessage="TITLE is required!"><f:validateLength maximum="70" />

</h:inputText><h:message for="title" /><br><h:inputText id="author" value="#{bookBean.author}"

required="true" requiredMessage="AUTHOR is required!"><f:validateLength maximum="50" />

</h:inputText><h:message for="author" /><br><h:inputText id="price" value="#{bookBean.price}"

required="true" requiredMessage="PRICE is required!" validatorMessage="Only Numeric and at Least 1 baht"><f:validateDoubleRange minimum="1" />

</h:inputText><h:message for="price" /><br><h:commandButton type="submit" id="btnAddBook"

value="ADD" action="#{bookBean.addBook}"/>

<br></h:form>

</f:view></body></html>

จาก Sourcecode jsp ดานบน ประกอบไปดวยการสราง Validation ท field โดยจะอยภายใน <h:inputText >


119

ประกอบดวย attribute ทใชตรวจสอบ เชนrequired="true" แสดงถง field น ตองการขอมล และ ถาไมมขอมลกจะแสดง attribute ทเปน message

ของ validator นนๆ ซงกคอ requiredMessage="ISBN is required!"<f:validateDoubleRange minimum="1" /> แสดงถง field น ตองการคา double และอยางนอยตองม

value คอ 1 และถาคานนไมสามารถแปลงเปน double หรอ มคานอยกวา 1 กจะแสดง attribute ทเปน message ของ validator นนๆ คอ validator Message="Only Numeric and at Least 1 baht"

13.4 สราง thankyou.html, error.html

13.5 การกำหนด Page Navigation 1. เปด File \WEB-INF\faces-config.xml

2. ไปท tab Navigation Rule

3. เปด palette คลกเลอก page แลวไปคลกท Screen วางๆ เพอสรางมมมองหนา page นนๆ

รปท 13.6 การวาง page ลงใน Navigator Area


120

4. เลอกใหครบทง 3 files

รปท 13.7 แสดงการใช palette ชวยสราง Navigator Rule

5. สรางความสมพนธโดยไปท palette เลอกท Link จากนนไปคลกท addBook.jsp ลากลงมา drop ท icon ของ thankyou.html และ inserterror.html

รปท 13.8 เมอลาก Link เชอมตอ ครบแลว


121

รปท 13.9 สามารถปรบ Properties ในสวนของ Link ไดโดย double click ใหมาเอง

ดจาก Method ทจะม Return เปน String ออกมา รณนถาสำเรจจะ return String=success ถาไมสำเรจจะเปน failure

ดงนนถา success ใหแสดงหนา thankyou.html โดย set properties ท form-outcome เปน success

และอกเสนกทำเชนเดยวกน from-outcome แตเปน failure

รปท 13.10 การปรบแตง Link ทเชอมตอไมได


122

6. จะไดเปนรปทสมบรณออกมาดงรป

รปท 13.11 Navigator ทมการกำหนด properties เรยบรอยแลว

13.6 การทดสอบโปรแกรม 1. Restart Server และ Run โปรแกรม JSFDBApp

2. เลอก URL ของ Web Browser เปน http://localhost:8080/JSFDBApp/addBook.jsp

ใหทดลองใสขอมล3. เมอกดปม Add โปรแกรมกจะใสขอมลลงใน Database

4. เราสามารถทจะดขอมลทปอนเขาไปได โดยไปท MySQL Workbench แลวดจาก Table ทชอ books

5. ถาผลลพธหนา thankyou.html ใน table กมขอมลนนๆ อย


http://localhost:8080/JSFDBApp/addBook.jsp

123

Exercise 14 การ Authentication โดยใช Tomcat

เนอหาทตองศกษากอน -

แบบฝกหดนจะเปนการพฒนาโปรแกรมเวบทตองมการทำ Authentication โดยการตงคา configuration ของ Tomcat Web Server โดยจะเปนการลอกอนโดยใช Basic Configuration และ Form Based Configuration

และ จะทดสอบการเปลยน realm ของ Tomcat จากไฟล tomcat-users.xml เปนการใช MySQL Database

14.1 สราง Web Application Project

1. เลอกเมน File → New → Dynamic Web Project

กำหนด Project Name = SecurityWebApp

2. ทำการพฒนาโปรแกรม admin.html ดง Listing ท 14.1

3. ทำการพฒนาโปรแกรม user.html ดง Listing ท 14.2

Listing ท 14.1 โปรแกรม admin.html <html> <head> <title>ADMIN</title> </head> <body> <h1>Admin Page</h1> </body></html>

Listing ท 14.2 โปรแกรม user.html <html> <head> <title>USER</title> </head> <body> <h1>User Page</h1> </body></html>

14.2 เพม User ของ Tomcat Web Server โดยทวไป Tomcat-Web-Server จะใช Realm ทเปน Flat File โดยเกบไวใน File ทชอ tomcat-users.xml ขน

ตอนนจะเปนการเพม User โดยการปรบปรงไฟลดงกลาวโดยมขนตอนการพฒนาโปรแกรมดงน


124

1. ให Project ชอ Servers เลอก ชอ Server → tomcat-users.xml

ดงตวอยางในรปท 14.1 และทำการเพม user password ลงไปใน Tomcat Server

ใน Listing ท 14.3

รปท 14.1 เพม user และ roles ท Apache Tomcat

Listing ท 14.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

14.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 เทานน โดยมขนตอนดงน


125

ขนตอนการ Configuration

1. เปดไฟล web.xml ของ Project ทชอ SecurityWebApp

เพมบรรทด บอกวาเปนการ authen แบบ Basic<login-config>

<auth-method>BASIC</auth-method></login-config>

2. เพมบรรทด ระบ Security Roles = 2 roles คอ user และ admin <security-role>

<role-name>admin</role-name></security-role><security-role>

<role-name>user</role-name></security-role>

3. สรางความสมพนธระหวาง Web page ของ Project กบ User บน Tomcat

@@ กรณหนา admin.html เขาถงโดยผม role เปน admin เทานน กำหนดURL Pattern ทตองการจำกดการเขาถงเปน /admin.html

กำหนด Name เปน Admin Page

กำหนด ผเขาถง URL นได คอผทอยใน Roles = admin เทานน<security-constraint>

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

</web-resource-collection><auth-constraint>

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

</security-constraint>

@@ กรณหนา user.html เขาถงโดยผม role เปน user และ admin กำหนดURL Pattern ทตองการจำกดการเขาถงเปน /user.html

กำหนด Name เปน User Page

กำหนด ผเขาถง URL นได คอผทอยใน Roles = admin

<security-constraint><web-resource-collection>

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


<role-name>user</role-name><role-name>admin</role-name>

</auth-constraint></security-constraint>


126

Listing ท 14.4 ไฟล t omcat-users.xml .......<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>


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


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

</security-constraint>


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

14.4 การทดสอบโปรแกรมแบบ Basic Authenticate

1. ทำการ Build และ Deploy โปรเจค SecurityWebApp

2. รนโปรแกรม http://localhost:8080/SecurityWebApp/admin.html โปรแกรมเวบ Browser จะแสดงไดอะลอกลอกอนใหผใชปอนดงรปท 14.2

รปท 14.2 หนาตางลอกอน

3. ใหทดลองปอนชอผใชและรหสผานเปน admin และ admin โปรแกรมจะสามารถแสดงขอความในหนาเวบ admin.html ได

4. ปดโปรแกรมเวบ Browser จากนนเปดขนมาใหม แลวทดลองปอนชอผใชและรหสผานเปน user และ user

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


http://localhost:8080/SecurityWebApp/admin.html

127

5. ทดลองทำซำกบ URL ชอ http://localhost:8080/SecurityWebApp/user.html จะเหนวา url นจะอนญาตให user ทงสองใชได

14.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 ท 14.5 โปรแกรม Login.html

<html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body>

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

</body></html>

Listing ท 14.6 โปรแกรม Error.html <html><head><title>ERROR</title></head><body><H1>Error unauthorized user</H1></body></html>


http://localhost:8080/SecurityWebApp/user.html

128

Listing ท 14.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>.......

14.6 การทดสอบโปรแกรม แบบ Form Authenticate ใชการทดสอบแบบเดยวกนกบ แบบ Basic Authenticate

14.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 กได

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 รปสายฟาสเหลองเพอรน หรอ Highlight คำสงแลวกดปม Ctrl + Enter

2. ทดลองปอนขอมลใสลงใน Table โดยตองกำหนด password และ role

3. ทำการปรบปรงไฟล server.xml ของ Apache Tomcat

โดยไปท Project Server → Tomcat v6.0 Server → Server.xml แลว เปลยนจาก <Realm className="org.apache.catalina.realm.UserDatabaseRealm"

resourceName="UserDatabase"/>


129

เปน<Realm className="org.apache.catalina.realm.JDBCRealm" debug="99"

driverName="com.mysql.jdbc.Driver"connectionURL="jdbc:mysql://localhost/test"connectionName="root"connectionPassword="xxx"userTable="users" userRoleTable="userrole" userNameCol="user_name" userCredCol="pass_word"roleNameCol="role_name" />

โดยท xxx คอ password ของฐานขอมล MySQL ในทนใช password = root

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

14.8 การทดสอบโปรแกรม แบบ Database Authenticate ใชการทดสอบแบบเดยวกนกบ แบบ Basic Authenticate