Java Web programming Using NetBeans

1

Hand-onExercises

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

โดยใช�GlassFish and NetBeans

Dr.Thanachart Numnondaand

Asst Prof.Thanisa KruawaisayawanJuly 2009

การเข�ยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan

2

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

1.1 การสร�าง Web Application Project..................................................................................................51.2 การพ�ฒนาโปรแกรม addCustomer.html................................................................................................91.3 การทดสอบโปรแกรม..........................................................................................................................11

Exercise 2 การเข�ยนโปรแกรม Java Servlet เพ !ออ"านค"าพาราม#เตอร�.........................................................................132.1 การพ�ฒนาโปรแกรม CustomerServlet.java.........................................................................................13

2.1.1 การอ"านค"าพาราม#เตอร�จาก addCustomer.html ...............................................................................132.1.2 การแสดงรายละเอ�ยดของค"าต"างๆ.......................................................................................................14

2.2 ข�&นตอนการพ�ฒนาโปรแกรม CustomerServlet.java ...............................................................................142.3 การทดสอบโปรแกรม..........................................................................................................................192.4 การปร�บปร'งโปรแกรมเพ !อให�แสดงผลภาษาไทยและเร�ยกไฟล� addCustomer.html เม !อเร#!มต�น......................................20

Exercise 3 โปรแกรมเว�บส.าหร�บการท.าโพล........................................................................................................223.1 การพ�ฒนาโปรแกรม vote.html............................................................................................................223.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..............................................................................................29

3.4.1 ก.าหนดต�วแปร voters................................................................................................................293.4.2 การอ"านหมายเลขไอพ�ของผ/�ใช�..........................................................................................................29

Exercise 4 การเช !อมต"อก�บ MySQL Database.............................................................................................324.1 การต#ดต�&งโปรแกรมฐานข�อม/ล MySQL....................................................................................................324.2 การสร�าง Database Connection.....................................................................................................324.3 การสร�างตาราง books.......................................................................................................................354.4 การใช�ค.าส�!ง SQL ใน NetBeans........................................................................................................37

Exercise 5 การพ�ฒนาโปรแกมเว�บเพ !อต#ดต"อก�บฐานข�อม/ล..........................................................................................395.1 การสร�าง Web Application Project................................................................................................395.2 การพ�ฒนาโปรแกรม addBook.html....................................................................................................395.3 การพ�ฒนาโปรแกรม Thankyou.html...................................................................................................415.4 การพ�ฒนาโปรแกรม AddBookServlet.java.........................................................................................41

5.4.1 การอ"านค"าพาราม#เตอร�จาก addBook.html ......................................................................................425.4.2 การเช !อมต"อก�บฐานข�อม/ล...............................................................................................................425.4.3 เพ#!มรายช !อหน�งส อใหม"ลงในฐานข�อม/ล ................................................................................................435.4.4 การเร�ยกเว�บเพจ Thankyou.html ...............................................................................................43

5.5 ข�&นตอนการพ�ฒนาโปรแกรม AddBookServlet.java ...............................................................................455.6 ทดสอบโปรแกรม..............................................................................................................................47

Exercise 6 โปรแกรมเว�บเพ !อสาธ#ตขอบเขตของออปเจ�ค............................................................................................496.1 การพ�ฒนาโปรแกรมเพ !อสาธ#ตขอบเขตของ Object แบบ Request .....................................................................49

6.1.1 ข�&นตอนการพ�ฒนาโปรแกรมเพ !อสาธ#ตขอบเขตของ Object แบบ Request ....................................................526.1.2 ข�&นตอนการทดสอบโปรแกรมเพ !อสาธ#ตขอบเขตของ Object แบบ Request....................................................52


3

6.2 การพ�ฒนาโปรแกรมเพ !อสาธ#ตขอบเขตของ Object แบบ Session .....................................................................526.2.1 ข�&นตอนการพ�ฒนาโปรแกรมเพ !อสาธ#ตขอบเขตของ Object แบบ Session .....................................................556.2.2 ข�&นตอนการทดสอบโปรแกรมเพ !อสาธ#ตขอบเขตของ Object แบบ Session ...................................................55

6.3 การพ�ฒนาโปรแกรมเพ !อสาธ#ตขอบเขตของ Object แบบ Application................................................................556.3.1 ข�&นตอนการพ�ฒนาโปรแกรมเพ !อสาธ#ตขอบเขตของ Object แบบ Application...............................................586.3.2 ข�&นตอนการทดสอบโปรแกรมเพ !อสาธ#ตขอบเขตของ Object แบบ Application..............................................58

Exercise 7 การพ�ฒนาโปรแกรม Servlet โดยใช�คลาสประเภท Web Listener..........................................................597.1 การพ�ฒนาโปรแกรม Init.java..............................................................................................................597.2 การปร�บปร'งโปรแกรม AddBookServlet.java .....................................................................................647.3 ทดสอบโปรแกรม..............................................................................................................................65

Exercise 8 การพ�ฒนาโปรแกรม Servlet Filter ..............................................................................................678.1 การพ�ฒนาโปรแกรม Servlet Filter......................................................................................................678.2 การเข�ยนหน�า Login.........................................................................................................................68

8.2.1 ข�&นตอนการพ�ฒนาโปรแกรม ...........................................................................................................698.3 การเข�ยน Servlet Filter..................................................................................................................70

8.3.1 ข�&นตอนการพ�ฒนาโปรแกรม ...........................................................................................................718.4 การเข�ยนโปรแกรม ShowServlet .......................................................................................................73

8.4.1 ข�&นตอนการพ�ฒนาโปรแกรม ...........................................................................................................738.5 ข�&นตอนการทดสอบโปรแกรม .................................................................................................................74

Exercise 9 การเข�ยนโปรแกรม JSP เพ !อแสดงผลล�พธ�............................................................................................759.1 การพ�ฒนาโปรแกรม hello.jsp.............................................................................................................759.2 การพ�ฒนาโปรแกรม viewBook.jsp....................................................................................................76

9.2.1 การก.าหนด Tag Library .........................................................................................................769.2.2 การก.าหนด Datasource ..........................................................................................................769.2.3 การใช�ค.าส�!ง sql:query .............................................................................................................779.2.4 การใช�ค.าส�!ง c:forEach เพ !อแสดงผล ..............................................................................................77

Exercise 10 การพ�ฒนาโปรแกรมเว�บ Online Book Store................................................................................8010.1 การพ�ฒนาโปรแกรม selectBooks.jsp................................................................................................8010.2 การพ�ฒนาโปรแกรม 3Book.java.........................................................................................................8410.3 การพ�ฒนาโปรแกรม 3Cart.java...........................................................................................................8510.4 การพ�ฒนาโปรแกรม ProcessSelection.java......................................................................................8610.5 การพ�ฒนาโปรแกรม Init.java ...........................................................................................................8810.6 การพ�ฒนาโปรแกรม viewCart.jsp.....................................................................................................8810.7 ข�&นตอนการทดสอบโปรแกรม ...............................................................................................................89

Exercise 11 การสร�าง Custom Tags ส.าหร�บโปรแกรม JSP...............................................................................9211.1 การพ�ฒนาโปรแกรม hello.jsp............................................................................................................9211.2 การพ�ฒนาโปรแกรม helloTag.jsp.....................................................................................................94

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

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

11.4.1 สร�าง Tag File....................................................................................................................99


4

11.4.2 เข�ยนโปรแกรม helloTagFile.jsp...........................................................................................100Exercise 12 การพ�ฒนาโปรแกรมเว�บโดยใช� Strut Framework .........................................................................101

12.1 การสร�าง Web Application Project............................................................................................10112.2 การพ�ฒนาโปรแกรม BookActionForm.java...................................................................................10112.3 การพ�ฒนาโปรแกรม AddBook.jsp..................................................................................................10612.4 การพ�ฒนาโปรแกรม AddBookAction.java.....................................................................................10712.5 การพ�ฒนาไฟล� ApplicationResource.properties..........................................................................10912.6 การพ�ฒนาโปรแกรม Init.java และ Thankyou.html...........................................................................10912.7 การพ�ฒนาไฟล� Struts-config.xml.................................................................................................10912.8 การทดสอบโปรแกรม......................................................................................................................110

Exercise 13 การพ�ฒนาโปรแกรมเว�บโดยใช� JSF Framework............................................................................11213.1 การสร�าง Web Application Project............................................................................................11213.2 การพ�ฒนาโปรแกรม JSF Managed Bean........................................................................................11313.3 การพ�ฒนาโปรแกรม PriceValidator.java........................................................................................11513.4 การพ�ฒนาโปรแกรม AddBook.jsp..................................................................................................11613.5 การก.าหนด Page Navigation......................................................................................................11713.6 การก.าหนด Error Message.........................................................................................................11813.7 การพ�ฒนาโปรแกรม Thankyou.html, error.html และ Init.java.........................................................11913.8 การพ�ฒนาโปรแกรม AddBookServlet.java.....................................................................................11913.9 การทดสอบโปรแกรม......................................................................................................................121

Exercise 14 การพ�ฒนาโปรแกรมเว�บโดยใช� Visual JSF....................................................................................12214.1 การสร�าง Web Application Project............................................................................................12214.2 การพ�ฒนาโปรแกรม HelloWeb......................................................................................................12214.3 การทดสอบโปรแกรม......................................................................................................................12614.4 การปร�บปร'งโปรแกรม HelloWeb....................................................................................................12714.5 การทดสอบโปรแกรม......................................................................................................................129


5

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

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

ข��นตอนในการพ�ฒนาโปรแกรม1. สร�างโปรเจ�ค Web Application

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

1.1 การสร�าง Web Application Project

เราจะเร0�มต�นสร�างโปรแกรม Web-Base Application โดยการสร�าง Project ใหม/ข,�นมาใน NetBeans

ซ,�งมข��นตอนด�งน�1. เล�อกเมน# File > New Project

2. ในไดอะล�อก New Project ให�เล�อก Categories เป�น Java Web และเล�อก Projects เป�น Web

Application ด�งร#ปท� 1.1

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

3. กด Next ก.าหนด Project Name: เป�น WebApp แล�วเล�อก Project Location: เป�น Directory ท�เรา


6

ต�องการจะเก�บไฟล5ไว� ด�งร#ปท� 1.2

ร�ปท�� 1.2 การก�าหนดช��อโปรเจ�ค

4. จากน��นให�เล�อก Server เป�น Apache Tomcat 6.0.18 ด�งร#ปท� 1.3

ร�ปท�� 1.3 การเล�อก Server ท��จะต�ดต��งโปรเจ�ค


7

5. กดป16ม Finish โปรแกรมจะท.าการสร�าง Projects และสร�างไฟล5ต/างๆ ข,�นมาโดยมโครงสร�างของไฟล5ด�งร#ปท�

ร�ปท�� 1.4 โครงสร�างไฟล!ของโปรเจ�ค WebApp

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

โปรแกรม addCustomer.html เป�นเว�บเพจท�ใช�แสดงฟอร5มส.าหร�บป%อนข�อม#ลล#กค�า เข�าในฐานข�อม#ล customers ซ,�งจะสร�างข,�นในแบบฝ�กห�ดถ�ดไป โดยมร#ปแบบด�งร#ปท� 1.5 โปรแกรม addBook.html มข��นตอนการพ�ฒนาด�งน�

1. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด WebApp จากน��นเล�อกค.าส��ง New > Other

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

3. ก.าหนด HTML File Name: เป�น addCustomer แล�วกด Finish

4. เขยน source code ของไฟล5 addCustomer.html ตาม Listing ท� 1.1 โดยเราสามารถท�จะลาก icon

ประเภท HTML Forms ท�อย#/ในหน�าต/าง Palette เพ��อสามารถให�เขยนโปรแกรมได�ง/ายข,�น


8

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

Listing ท� 1.1 โปรแกรม addCustomer.html

<html> <head> <title> Add Customer </title> </head> <body> <H1> Add a new customer profile </H1> <p> <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>

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

1. ท.าการ Clean and Build และ Undeploy and Deploy โปรแกรม WebApp

2. Run โปรแกรม WebApp

3. ท� Web Browser เปล�ยน URL เป�น http://localhost:8080/WebApp/addCustomer.html จะได�ผลล�พธ5ด�งร#ปท� 1.6


http://localhost:8080/WebApp/addCustomer.html

9

หมายเหต1 หมายเลขพอร5ตโดยพ��นฐานจะเป�น 8080 ยกเว�นว/าจะก.าหนดหมายเลขอ��น

ร�ปท�� 1.6 ผลล�พธ!ท��ได�จากการร�นโปรแกรม addCustomer.html


10

Exercise 2 การเข�ยนโปรแกรม Java Servlet เพ��ออ!านค!าพาราม"เตอร�

เน��อหาท��ต�องศ�กษาก�อน การสร�างโปรเจ�ค Web Application และสร�างไฟล5 HTML

แบบฝ�กห�ดน�จะเป�นการพ�ฒนาโปรแกรม Java Servlet เพ��อแสดงรายละเอยดของค/าพาราม0เตอร5ท�ผ#�ใช�ป%อนเข�ามาออกทางโปรแกรม Web Browser และแสดงผลการออกออกทาง Web Browser

2.1 การพฒนาโปรแกรม CustomerServlet.java

โปรแกรม CustomerServlet.java เป�นโปรแกรมท�ถ#กเรยกใช�โดย addCustomer.html เม��อผ#�ใช�กดป16ม Add โปรแกรมน�จะท.าหน�าท�น.าค/าพาราม0เตอร5ต/างๆ ท�ผ#�ใช�ป%อนมาแสดงผล โดยมข��นตอนการท.างานด�งน�

1. อ/านค/าพาราม0เตอร5ต/างๆ ท�ส/งมาจาก addCustomer.html

2. แสดงรายละเอยดของค/าต/างๆ

2.1.1 การอ/านค/าพาราม0เตอร5จาก addCustomer.html

เว�บเพจ addCustomer.html จะส/งข�อม#ลของรายช��อหน�งส�อใหม/ผ/านมาทางพาราม0เตอร5ต/างๆ ด�งน�● id รห�สของล#กค�า● name ช��อล#กค�า● addr ท�อย#/ล#กค�า● mobile หมายเลขโทรศ�พท5ม�อถ�อ● fax หมายเลข fax

● email ของล#กค�า

พาราม0เตอร5ต/างๆ เหล/าน�จะถ#กส/งผ/านโปรโตคอล Http และในโปรแกรมเราสามารถท�จะอ/านค/าพารา-

ม0เตอร5เหล/าน�ได�จากออปเจ�ค 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");


11

2.1.2 การแสดงรายละเอยดของค/าต/างๆ

โปรแกรม Servlet จะสามารถแสดงผลออกทาง Web Browser ได�โดยการเขยนโค�ด HTML ภายใน ค.าส��ง out.println() โดยมค.าส��งในเมธอด processRequest() ด�งน�

response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); 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();

2.2 ข�นตอนการพฒนาโปรแกรม CustomerServlet.java

เราสามารถท�จะพ�ฒนาโปรแกรม CustomerServlet.java ตามข��นตอนด�งน�

1. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด WebApp จากน��นเล�อกค.าส��ง New > Other...

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


12

ร�ปท�� 2.1 การเล�อกไฟล!ประเภท Servlet

3. ก.าหนด Class Name: เป�น CustomerServlet และก.าหนด Package เป�น servlet ด�งร#ปท� 2.2

ร�ปท�� 2.2 การก�าหนดช��อ Servlet

4. กด Next ก.าหนด URL Pattern(s): เป�น /addCustomer.do ด�งร#ปท� 2.3


13

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

5. กด Finish โปรแกรม NetBeans จะสร�างไฟล5 CustomerServlet.java ไว�ภายใต� Source Packages

โดยจะอย#/ใน Directory ช��อ servlet

6. ในหน�าต/าง editor ให�แก�ไข sourcecode ของไฟล5 CustomerServlet.java โดยม source code ของเมธอด processRequest ตามห�วข�อ 2.1.2


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

2. Run โปรแกรม WebApp

3. ท� Web Browser เปล�ยน URL เป�น http://localhost:8080/WebApp/addCustomer.html

4. ทดลองป%อนข�อม#ลด�งร#ป5. โปรแกรมจะแสดงผลด�งร/ปท�! 2.4 และ 2.5



14

ร�ปท�� 2.4 การป+อนข�อม�ลหน�า addCustomer.html

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


15

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

เราสามารถท�!จะปร�บปร'งโปรเจ�คน�&เพ !อให�เร�ยกไฟล� addCustomer.html โดยอ�ตโนม�ต#เม !อเร#!มต�นร�นโปรแกรม โดยการก.าหนดพาราม#เตอร� Welcome Files ให�เป6นไฟล�ด�งกล"าว โดยม�ข�&นตอนด�งน�&

1. ในหน�าต/าง Projects ขยายโหนด WebApp > Web Pages > WEB-INF

2. เล�อกไฟล5 web.xml แล�วเล�อกแทป Pages ท.าการแก�ไข Welcome Files เป�น addCustomer.html ด�งร#ปท� 2.6

ร�ปท�� 2.6 การจ�ดการไฟล! web.xml

นอกจากน�ถ�าเราทดลองป%อนข�อม#ลภาษาไทย ลงไปในจะพบว/า โปรแกรม Web Browser บางต�วจะแสดงผลล�พธ5ภาษาไทยไม/ถ#กต�อง เราสามารถแก�ไขได�โดยการก.าหนดให�การเข�ารห�สของพาราม0เตอร5ท�ส/งมาเป�น UTF-

8 โดยเพ0�มค.าส��งด�งน�

request.setCharacterEncoding("UTF-8");


16

Exercise 3 โปรแกรมเว�บส%าหร�บการท%าโพล

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

แบบฝ�กห�ดน�จะเป�นการพ�ฒนาโปรแกรม Java Servlet เพ��อท.า Poll โดยให�ผ#�ใช�สามารถท�จะโหวตเล�อกภาษาคอมพ0วเตอร5ท�ชอบได� แล�วโปรแกรมจะแสดงผลการโหวตทาง Web Browser

3.1 การพฒนาโปรแกรม vote.html

โปรแกรม vote.html เป�นหน�าเว�บท�ให�ผ#�ใช�สามารถท�จะท.าการโหวตเล�อกภาษาคอมพ0วเตอร5ได� โดยเม��อผ#�ใช�กดป16ม Vote โปรแกรมเว�บก�จะไปท.าการเรยก url ท�ช��อ processVote โปรแกรมน�มหน�าเว�บด�งร#ปท� 3.1

ร�ปท�� 3.1 การแสดงผลของโปรแกรม vote.html

และม sourcecode ด�ง 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>


17

<input type="submit" value="Vote" />

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

3.2 การพฒนาโปรแกรม VoteServlet.java

โปรแกรม VoteServlet.java เป�นโปรแกรมท�ถ#กเรยกใช�โดย vote.html เม��อผ#�ใช�กดป16ม Vote โปรแกรมน�จะท.าหน�าท�เพ��อน.าค/าท�ผ#�ใช�โหวตมาประมวลผล โดยมข��นตอนการท.างานด�งน�

1. ก.าหนดต�วแปร counter และ lang

2. อ/านค/าพาราม0เตอร5ต/างๆท�ส/งมาจาก vote.html และท.าการประมวลผล3. แสดงผลการโหวต

3.2.1 ก.าหนดต�วแปร counter และ lang

ต�วแปร count เป�นอะเรย5เพ��อท�จะเก�บจ.านวนผลโหวตของภาษาคอมพ0วเตอร5แต/ละภาษา และต�วแปร lang

เป�นอะเรย5ของ String เพ��อท�จะเก�บรายช��อภาษาคอมพ0วเตอร5 ต�วแปรท��งสองเป�นต�วแปรของออปเจ�คท�จะประกาศนอกเมธอด โดยมค.าส��งประกาศด�งน�

String []lang ={"Java", "C#", "C", "Pascal"}; int []count = new int[4];

3.2.2 อ/านค/าพาราม0เตอร5ต/างๆท�ส/งมาจาก vote.html และท.าการประมวลผล

เว�บเพจ vote.html จะส/งข�อม#ลของการโหวตมาในพาราม0เตอร5ท�ช��อ lang โดยจะมค/าเป�นหมายเลข 1-

4 ในท�น�จะมค.าส��ง request.getParameter เพ��อจะอ/านค/าท�โหวตมา จากน��นจะท.าการแปลงค/าซ,�งเป�น String ให�เป�นค/าจ.านวนเต�ม จากน��นจะเป�นการเพ0�มจ.านวนโหวตในต�วแปร 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>");


18

}

โปรแกรม VoteServlet.java จะม sourcecode ด�ง Listing ท� 3.2

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

import java.io.*;import java.util.HashSet;

import javax.servlet.*;import javax.servlet.http.*;

public class VoteServlet extends HttpServlet {

String []lang ={"Java", "C#", "C", "Pascal"}; int []count = new int[4];

protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); 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); }


19

public String getServletInfo() { return "Short description"; } // </editor-fold>}

3.3 ข�นตอนการพฒนาโปรเจ*ค Voter

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

1. เล�อกค.าส��งสร�าง New Project > Web Application จากน��นก.าหนดช��อโปรเจ�คเป�น Voter ด�งร#ปท� 3.2

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

2. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด Voter จากน��นเล�อกค.าส��ง New > Other...

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

4. ก.าหนด HTML File Name: เป�น vote แล�วกด Finish

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

6. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด Voter จากน��นเล�อกค.าส��ง New > Servlet

7. ก.าหนด Class Name: เป�น VoteServlet.java และ Package เป�น controller แล�วกด Next ก.าหนด URL Pattern(s): เป�น /processVote แล�วกด Finish

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

9. กด Save แล�วท.าการ run โปรเจ�คเพ��อทดสอบโปรแกรมโดยเรยก URL ท�


20

http://localhost:8080/Voter/vote.html โดยจะได�ผลล�พธ5ด�งต�วอย/างในร#ปท�3.3

ร�ปท�� 3.3 ต�วอย-างผลล�พธ!ของโปรเจ�ค Voter

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

ข��นตอนน�จะเป�นการปร�บปร1งโปรแกรม VoteServlet.java เพ��อป%องก�นการโหวตซ�.าท��งน�จะไม/อน1ญาตให� ผ#�ใช�ท�ใช�หมายเลขไอพเดยวก�นโหวตซ�.าได� โดยจะเก�บหมายเลขไอพท�ท.าการโหวตแล�วในออปเจ�คชน0ด HashSet

การพ�ฒนาโปรแกรมน�มค.าส��งเพ0�มเต0มท�ส.าค�ญด�งน�1. ก.าหนดต�วแปร voters

2. อ/านหมายเลขไอพของผ#�โหวตและเพ0�มคะแนนการโหวตหากหมายเลขไอพน�ไม/เคยโหวต

3.4.1 ก.าหนดต�วแปร voters

ต�วแปร voters เป�นต�วแปรชน0ด HashSet ท�จะเก�บหมายเลขไอพของผ#�โหวต โดยจะประกาศเป�นต�วแปร ออปเจ�คท�มค.าส��งประกาศด�งน�

HashSet voters = new HashSet();

3.4.2 การอ/านหมายเลขไอพของผ#�ใช�

การอ/านหมายเลขไอพของผ#�ใช�ท.าได�โดยเรยกใช� ค.าส��ง getRemoteAddr() ในออปเจ�ค request เม��อทราบหมายเลขไอพ เราสามารถท�จะตรวจสอบได�ว/าหมายเลขน�เคยโหวตแล�วหร�อไม/ โดยการตรวจสอบว/าออปเจ�ค voters มค/าหมายเลขไอพน�หร�อไม/โดยใช�ค.าส��ง contain() หากย�งไม/เคยโหวตก�ให�เพ0�มค/าต�วน�บและเพ0�มหมายเลขไอพน�ในออปเจ�ค voters โดยมค.าส��งด�งน�

String ip = request.getRemoteAddr();


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

21

if (!voters.contains(ip)) { count[voteNum]++; voters.add(ip); } else { out.println("This IP address has been voted"); }

ส.าหร�บโปรแกรม VoteServlet.java ท�ปร�บปร1งใหม/จะม sourcecode ด�ง Listing ท� 3.3

Listing ท� 3.3 โปรแกรม VoteServlet.java เพ��อป%องก�นการโหวตซ�.า

import java.io.*;import java.util.HashSet;


public class VoteServlet extends HttpServlet { String []lang ={"Java", "C#", "C", "Pascal"}; int []count = new int[4]; HashSet voters = new HashSet(); protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); String vote = request.getParameter("lang"); int voteNum = Integer.parseInt(vote) - 1; String ip = request.getRemoteAddr(); if (!voters.contains(ip)) { count[voteNum]++; voters.add(ip); } else { out.println("This IP address has been voted"); } 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(); }


22

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

}


23

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

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

แบบฝ8กห�ดน�&เป6นข�&นตอนการต#ดต�&ง NetBeans เพ !อเช !อมต"อก�บโปรแกรมฐานข�อม/ล MySQL ท�!เป6นโปรแกรมฐานข�อม/ล OpenSource แบบ FreeWare ซ:!งปกต#จะม�ต�วอย"างฐานข�อม/ลท�!สร�างมาพร�อมแล�วอย/"หลายช'ด หน:!งในน�&นค อฐานข�อม/ลท�!ช !อ test ท�!เราจะใช�ในการทดสอบการเช !อมต"อก�บโปรแกรม NetBeans

4.1 การต(ดต�งโปรแกรมฐานข�อม-ล MySQL

ข��นตอนน�เป�นการต0ดต��งโปรแกรม MySQL Server 5.0 โดยมข��นตอนด�งน�

1. ท.าการดาวน5โหลดโปรแกรม MySQL Server 5.0 จาก URL ท�ช��อ http://www.mysql.com/

2. ท.าการ unzip โปรแกรม mysql-5.0.xx-win32.zip

3. ร�นโปรแกรม setup.exe เพ��อท.าการต0ดต��งโปรแกรม MySQL Server 5.0 โดยโปรแกรมจะแสดงไดอะล�อกด�งร#ปท� 4.1

ร�ปท�� 4.1 การต�ดต��ง MySQL Server

4. กดป16ม Next แล�วท.าการต0ดต��งโปรแกรมตามข��นตอนต/างๆ โดยให�ก.าหนดไดเร�กทอร�ท�ต�องการต0ดต��งตามความเหมาะสม

4.2 การสร�าง Database Connection

เม !อต#ดต�&ง Database แล�ว เราสามารถท�!จะใช� NetBeans เพ !อเช !อมต"อ Database โดยใช� JDBC Driver


http://www.mysql.org/

http://java.sun.com/javase/downloads/index_jdk5.jsp

24

ซ:!งในท�!น�&จะใช� Driver ท�!ช !อ MySQL Connector/J ซ:!งเป6น Driver ท�!พ�ฒนาโดยใช�ภาษาจาวาและต#ดต"อโดยตรงก�บ Database และโปรแกรม NetBeans 6.5 ได�ต#ดต�&งมาไว�ให�แล�ว เราสามารถท�!จะเช !อมต"อก�บ Database โดยใช� Driver ด�งกล"าวได� โดยม�ข�&นตอนด�งน�&

1. ในโปรแกรม NetBeans เล อกแทป Services แล�วขยายโหนด Databases > Drivers

2. เล อกโหนด MySQL(Connector/J Driver) จากน�&นคล#;กขวาเล อก Connect Using.. ด�งร/ปท�! 4.2

ร�ปท�� 4.2 การเล�อกค�าส��งเช��อมต-อ Database

3. ในไดอะล�อก New Database Connection ให�ระบ' ● Host: เป6น localhost● Port: เป6น 3306● Database: เป6น test

● User Name: เป6น root4. ส.าหร�บ Password: ให�ใส"ค"าตามท�!ก.าหนดไว�ในตอนต#ดต�&งโปรแกรม MySQL ซ:!งในท�!น�&จะม�ค"าเป6น

root




25

5. ท.าการเล อก Remember password โดยไดอะล�อกจะแสดงผลได�ด�งร/ปท�! 4.3

ร�ปท�� 4.3 การก�าหนดค-าในการเช��อมต-อ Database

6. กดป'<ม OK เม !อไดอะล�อกแสดงข�อความให�เล อก database schema.ให�กดป'<ม OK อ�กคร�&งซ:!งตอนน�&ถ�าขยายแทบ Database ในหน�าต"าง Runtime จะเห�น Connection ใหม"ด�งร/ปท�! 4.4


26

ร�ปท�� 4.4 การแสดงการเช��อมต-อ

4.3 การสร�างตาราง books

ในท�!น�&จะก.าหนดให�สร�าง Table ท�!ช !อ books โดยให�อย/"ภายใต� Schema ท�!ช !อ test โดย Table น�&ก.าหนดให�ม� Column ต"างๆ ด�งตารางท�! 4.1

ตารางท�! 4.1 Table books

ช��อ ชน�ด ขนาดisbn varchar 20title varchar 70

author varchar 50price float -

เราจะใช�โปรแกม NetBeans ในการท�!จะสร�าง Table น�&โดยม�ข�&นตอนต"างๆ ด�งน�&

1. ในหน�าต"าง Runtime ขยายแทบ Databases > jdbc:mysql://localhost:3306/test แล�วจะเห�นรายการ Tables


27

2. คล#;กขวาท�! Tables แล�วเล อก Create Table... ด�งร/ปท�! 4.5

ร�ปท�� 4.5 การเล�อกค�าส��งสร�างตาราง

3. ภายในไดอะล�อก Create Table ให�ก.าหนด Table Name เป6น books แล�วใส" Column ต"างๆ ด�งตารางท�! 4.1 และก.าหนดให� isbn เป6น Key โดยไดอะล�อกจะแสดงผลได�ด�งร/ปท�! 4.6

ร�ปท�� 4.6 การสร�างตารางช��อ books

4. แล�วกด OK ซ:!งตอนน�&ในหน�าต"าง Runtime ถ�าขยายแทบ Tables > books จะเห�น Column ต"างๆ ด�งร/ปท�! 4.7


28

ร�ปท�� 4.7 ผลล�พธ!จากการสร�างตาราง

4.4 การใช�ค/าส�ง SQL ใน NetBeans

ภายหล�งจากท�!ม�การสร�าง Table ท�!ช !อ books เราสามารถท�!จะใช�โปรแกรม NetBeans สร�างค.าส�!ง SQL

เพ !อท�!จะต#ดต"อก�บฐานข�อม/ล ในท�!น�&จะแสดงการเพ#!มข�อม/ลลงใน Table โดยม�ข�&นตอนต"างๆด�งน�&

1. ตรงโหนด Procedures คล#;กขวาท�!โหนดแล�วเล อกค.าส�!ง Execute Command... หน�าต"าง SQL Editor

จะปรากฎข:&นมา2. ให�ป>อนค.าส�!ง SQL เป6น

INSERT INTO books VALUES ('123', 'Intro to Java Programming', 'Thanachart', 500.00)

3. กด Enter หร อ (Ctrl-Shift-E) เพ !อร�นค.าส�!ง SQL

4. เราสามารถท�!จะด/ข�อม/ลท�!ป>อนเข�าไปได� โดยเล อกค.าส�!ง View Data.. จาก Table ท�!ช !อ books ด�งร/ปท�! 4.8

ร�ปท�� 4.8 การเร�ยกค�าส��งด�ข�อม�ลในตาราง


29

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

เน��อหาท��ต�องศ�กษาก�อน การเช��อมต/อก�บ MySQL Database

แบบฝ�กห�ดน�จะเป�นการพ�ฒนาโปรแกรม Web Application โดยใช� Java Servlet เพ��อเช��อมต/อก�บฐานข�อม#ล ในท�น�ก.าหนดให�ใช�ฐานข�อม#ล MySQL ซ,�งม Table ท�ช��อ books โปรแกรมท�จะพ�ฒนาข,�นเป�นการเพ0�มข�อม#ลลงใน Table ด�งกล/าว โดยก.าหนดให�ผ#�ใช�ป%อนรายละเอยดข�อม#ลผ/านเว�บเพจท�ช��อ addBook.html ซ,�งเม��อผ#�ใช�กดป16ม Add โปรแกรมก�จะไปเรยกโปรแกรม Servlet ท�ช��อ AddBookServlet ซ,�งจะมค.าส��งในอ/านค/า parameter ท�ผ#�ใช�ป%อนเข�ามาและท.าการใส/ข�อม#ลลงใน Table ด�งกล/าว โดยใช�ช1ดค.าส��ง JDBC

ข��นตอนในการพ�ฒนาโปรแกรม1. สร�างโปรเจ�ค WebBaseDB

2. พ�ฒนาโปรแกรม addBook.html และ Thankyou.html

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


เราจะเร0�มต�นสร�างโปรแกรม Web-Base Database โดยการสร�าง Project ใหม/ข,�นมาใน NetBeans ซ,�งมข��นตอนด�งน�

1. เล�อกเมน# File > New Project..


Application แล�วกด Next

3. ก.าหนด Project Name: เป�น WebBaseDB แล�วเล�อก Project Location: เป�น Director ท�เราต�องการจะเก�บไฟล5ไว� จากน��นเล�อก Server เป�น Apache Tomcat 6.0.18 แล�วกด Finish

5.2 การพฒนาโปรแกรม addBook.html

โปรแกรม addBook.html เป�นเว�บเพจท�ใช�แสดงฟอร5มส.าหร�บป%อนข�อม#ลหน�งส�อใหม/เข�าในฐานข�อม#ล books ซ,�งมล�กษณะด�งร#ปท� 5.1 โปรแกรม addBook.html มข��นตอนการพ�ฒนาด�งน�

1. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด WebBaseDB จากน��นเล�อกค.าส��ง New > Other...

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


30

3. ก.าหนด HTML File Name: เป�น addBook แล�วกด Finish

4. เขยน source code ของไฟล5 addBook.html ตาม Listing ท� 5.1 โดยเราสามารถท�จะลาก icon ประเภท HTML Forms ท�อย#/ในหน�าต/าง Palette ด�งร#ปท� 5.2 เพ��อสามารถให�เขยนโปรแกรมได�ง/ายข,�น

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

ร�ปท�� 5.2 ต�วอย-างหน�าต-าง 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>


31

<P> <form action="addBook.do" method="POST"> ISBN : <input type="text" name="isbn" value="" size="15"/> <BR> Title : <input type="text" name="title" value="" size="50"/> <BR>

Author : <input type="text" name="author" value="" size="50"/> <BR> Price : <input type="text" name="price" value="" size="10"/> <BR> <input type="submit" value="Add" /> </form> </body></html>

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

โปรแกรม Thankyou.html เป�นเว�บเพจท�ใช�แสดงให�เห�นว/าข�อม#ลได�ถ#กเพ0�มเข�าไปในฐานข�อม#ลแล�ว โดยม sourcecode ด�ง Listing ท� 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.4 การพฒนาโปรแกรม AddBookServlet.java

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

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

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

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

4. เรยกเว�บเพจ Thankyou.html


32

5.4.1 การอ/านค/าพาราม0เตอร5จาก addBook.html

เว�บเพจ addBook.html จะส/งข�อม#ลของรายช��อหน�งส�อใหม/ผ/านมาทางพาราม0เตอร5ต/างๆด�งน�● isbn หมายเลข ISBN ของหน�งส�อ● title ช��อหน�งส�อ● author ช��อผ#�แต/ง● price ราคาหน�งส�อ

พาราม0เตอร5ต/างๆเหล/าน�จะถ#กส/งผ/านโปรโตคอล Http และในโปรแกรมเราสามารถท�จะอ/านค/าพาราม0เตอร5เหล/าน�ได�จากออปเจ�ค request โดยเรยกใช�เมธอด getParameter() ซ,�งโปรแกรมส/วนน�จะมค.าส��งต/างๆด�งน�

String isbn = request.getParameter("isbn"); String author = request.getParameter("author"); String title = request.getParameter("title"); String priceStr = request.getParameter("price");

5.4.2 การเช��อมต/อก�บฐานข�อม#ล

การเขยนโปรแกรมเพ��อเช��อมต/อก�บฐานข�อม#ลเพ��อเป�นการเรยกใช�ค.าส��ง SQL ซ,�งจะต�องใช� JDBC

API โดยจะมข��นตอนด�งน�

● ท.าการโหลด Driver ส.าหร�บ Database Server ท�ต�องการเช��อมต/อ ผ/าน DriverManager หร�อ โหลด DataSource จาก JNDI

● ด,งออปเจ�คชน0ด Connection จาก Driver หร�อ Datasource

● ด,งออปเจ�คชน0ด Statement จากออปเจ�คชน0ด Connection

● เรยกใช�ค.าส��ง SQL โดยใช�เมธอด executeQuery() หร�อ executeUpdate() ของออปเจ�คชน0ด Statement

โปรแกรม AddBookServlet จะใช�ว0ธการโหลด DataSource จาก JNDI ซ,�งเราไม/จ.าเป�นท�จะต�องโหลด ท1กคร��งท�มการเรยกใช�โปรแกรม Servlet น�แต/จะท.าการโหลดคร��งแรกท�มการเรยกใช� Servlet น� ด�งน��นเราจะเขยน sourcecode ส/วนน�ท�เมธอด init() ด�งน�

private Connection conn; public void init() { try { conn = jdbcTest.getConnection(); } catch (Exception ex) { System.out.println(ex);


33

} }

5.4.3 เพ0�มรายช��อหน�งส�อใหม/ลงในฐานข�อม#ล

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

INSERT INTO books VALUES(....)

โดยเราจะใช�ค/าจากพาราม0เตอร5ต/างๆท�ร�บมา ด�งน��นถ�าข�อม#ลท�ป%อนเข�ามาถ#กต�องเราสามารถท�จะเพ0�มรายช��อหน�งส�อใหม/ลงในฐานข�อม#ลโดยใช�ค.าส��งด�งน�

Statement stmt = conn.createStatement(); String sql = "INSERT INTO books VALUES('"+isbn+"','" + title +"','" +author +"',"+price +")"; int numRow = stmt.executeUpdate(sql); 5.4.4 การเรยกเว�บเพจ Thankyou.html

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

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

โปรแกรม AddBookServlet.java จะม sourcecode ท��งหมดด�ง 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.naming.Context;import javax.naming.InitialContext;import javax.servlet.*;import javax.servlet.http.*;import javax.sql.DataSource;


34

public class AddBookServlet extends HttpServlet { @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>"); try { String isbn = request.getParameter("isbn"); String author = request.getParameter("author"); String title = request.getParameter("title"); String priceStr = request.getParameter("price"); float price = Float.parseFloat(priceStr); Statement stmt = conn.createStatement(); String sql = "INSERT INTO books VALUES('"+isbn+"','" + title +"','" +author +"',"+price+")"; int numRow = stmt.executeUpdate(sql); RequestDispatcher obj = request.getRequestDispatcher("Thankyou.html"); if (numRow == 1 && obj != null) { obj.forward(request,response); } } catch (SQLException ex) { out.println("Error " + ex); return; } out.println("</body>"); out.println("</html>"); out.close(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response);


35

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

}

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

เราสามารถท�จะพ�ฒนาโปรแกรม AddBookServlet.java ตามข��นตอนด�งน�


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

3. ก.าหนด Class Name: เป�น AddBookServlet และก.าหนด Package เป�น controller แล�วกด Next

4. ก.าหนด URL Pattern(s): เป�น /addBook.do แล�วกด Finish

5. โปรแกรม NetBeans จะสร�างไฟล5 AddBookServlet.java ไว�ภายใต� Source Packages โดยจะอย#/ใน Directory ช��อ controller

6. ในหน�า Editor ให�คล0;กขวาเล�อก Insert Code... > Use Database ด�งร#ปท� 5.3

ร�ปท�� 5.3 การเล�อกค�าส��ง Use Database

7. ในไดอะล�อก Choose Database กดป16ม Add...

8. ในไดอะล�อก Add Data Source Reference กดป16ม Add...

9. ในไดอะล�อก Create Data Source ก.าหนด JNDI Name เป�น jdbc/test และเล�อก Database

Connection เป�น jdbc:mysql//localhost:3306/test ด�งร#ปท� 5.4


36

ร�ปท�� 5.4 การก�าหนดค-า JNDI

10. กดป16ม OK โปรแกรมจะกล�บไปแสดงไดอะล�อก Add Data Source Reference ให�ก.าหนด Reference

Name: เป�น jdbc/test ด�งร#ปท� 5.5

ร�ปท�� 5.5 การก�าหนดค-า Reference Name

11. กดป16ม OK จะได�ไดอะล�อก Choose Database ด�งร#ปท� 5.6

ร�ปท�� 5.6 หน�าไดอะล�อก Choose Database

12. กดป16ม OK โปรแกรม NetBeans จะเพ0�ม context.xml ให�อ�ตโนม�ต0 โดยสามารถด#ได�จากการ ขยายโหนด WebBaseDB > Web Pages > META-INF [หมายเหต1 ในกรณท�ใช� GlassFish Server ค.าส��งน�จะเขยนในไฟล5 sun-web.xml]

13. โปรแกรมจะเพ0�ม sourcecode ให�ด�งน�


37

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

14. ในหน�าต/าง editor ให�แก�ไข sourcecode ของไฟล5 AddBookServlet.java ให�เป�นไปตาม Listing ท� 5.3

15. โปรแกรมจะมข�อผ0ดพลาดอย#/เน��องจากย�งไม/ได�ท.าการ import คลาสต/างๆ เราสามารถแก�ไขได�โดยคล0;กขวาในหน�าต/าง editor แล�วเล�อก Fix Imports หร�อกด Ctrl+Shift+I โปรแกรมจะแสดงช��อคลาสต/างๆ ท�ต�อง Import มาให�เล�อก ในท�น�จะต�องเล�อกคลาสให�ถ#กต�องด�งร#ปท� 5.7

ร�ปท�� 5.7 การก�าหนดคลาสท��ต�อง import

16. ท.าการ Save โปรแกรมโดยการกด Ctrl+S

17. ตรวจสอบไฟล5 context.xml จะเป�นด�ง Listing ท� 5.4

Listing ท� 5.4 ไฟล5 context.xml

<?xml version="1.0" encoding="UTF-8"?><Context path="/WebBaseDB"> <Resource auth="Container" driverClassName="com.mysql.jdbc.Driver" maxActive="20" maxIdle="10" maxWait="-1" name="jdbc/test" password="root" type="javax.sql.DataSource" url="jdbc:mysql://localhost:3306/test" username="root"/></Context>

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

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

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


38

ร�ปท�� 5.8 ต�วอย-างการป+อนข�อม�ล Books

4. เม��อกดป16ม Add โปรแกรมก�จะใส/ข�อม#ลลงใน Database และแสดงผลล�พธ5ด�งร#ปท� 5.9

ร�ปท�� 5.9 ผลล�พธ!ท��แสดงทาง Web Browser

5. เราสามารถท�จะด#ข�อม#ลท�ป%อนเข�าไปได� โดยไปท�หน�าต/าง Services ของโปรแกรม NetBeans แล�วเล�อกค.าส��ง View Data.. จาก Table ท�ช��อ books ด�งร#ปท� 5.10

ร�ปท�� 5.10 ข�อม�ลท��ถ�กป+อนเข�า Table ท��ช��อ books


39

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

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

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

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

ออปเจ�คท�สร�างข,�นในโปรแกรม Java Servlet ในแต/โปรแกรมจะมขอบเขตการใช�งาน (scope) อย#/เพยงแค/โปรแกรมน��นๆ (url น��นๆ) ไม/สามารถท�จะใช�โปรแกรม Java Servlet หร�อ JSP ต�วอ��นเรยกใช�ออปเจ�คต�วน��นได� การจะให�โปรแกรม Servlet หร�อ JSP อ��นๆ เรยกออปเจ�คใดๆ ได�น��น จะต�องมการเขยน source code เพ��อส/งผ/านค/าของออปเจ�คน��นไปย�งออปเจ�คอ��นๆ ท��งน�เราสามารถก.าหนดขอบเขตการใช�งานเพ0�มเต0มได�อก 3 แบบค�อ

● Request ออปเจ�คสามารถถ#กเรยกใช�เม��อมการเรยกมาจากโปรแกรม Servlet/JSP อ��น● Session ออปเจ�คจะเก�บอย#/ใน Session ของ Web Browser ตราบเท/าท�ย�งมการใช�งานอย#/● Application ออปเจ�คจะสามารถใช�งานได�ในโปรแกรม Servlet/JSP ใดๆ ท�อย#/ใน Web

Application เดยวก�น

การส/งค/าของออปเจ�คจาก url หน,�งมาย�ง url อ��นท.าได�หลายว0ธ แบบฝ�กห�ดท�ผ/านมาเป�นการแสดงให�เห�นถ,งการส/งค/าพาราม0เตอร5ท�อย#/ในฟอร5มของไฟล5 HTML ไปย�งโปรแกรม Java Servlet ท�สามารถเรยกใช�ได�โดย ค.าส��ง request.getParameter()

นอกจากน�เราย�งสามารถท�จะส/งออปเจ�คไปย�ง โปรแกรม Java Servlet หร�อ JSP อ��นโดยการใช�ค.าส��ง setAttribute() อาท0เช/นส/งค/าของต�วแปร String ช��อว/า name โดยจะเก�บไว�ใน attribute ท�ช��อ RequestName

และมร#ปแบบค.าส��งด�งน�

String name = “Thanisa”; request.setAttribute(“RequestName”, name);

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

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

ส/วนค.าส��งท�ใช�ในการท�จะ forward จากโปรแกรม Servlet ต�วหน,�งไปย�ง url อ��นจะเป�นค.าส��งท�มร#ปแบบ


40

ด�งน�

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

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

ในข��นตอนน�จะเป�นการพ�ฒนาโปรแกรมเพ��อสาธ0ตการท.างานของขอบเขตการท.างานของ 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.*;


public class FirstServlet 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"; 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);


41

}


Listing ท� 6.2 โปรแกรม SecondServlet.java

package servlet;



public class SecondServlet 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 = (String) request.getAttribute("RequestName"); out.println(name); } finally { out.close(); } }





42

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

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

1. เล�อกค.าส��งสร�าง New Project จากเมน# เล�อก Java Web แล�วเล�อก Web Application ก.าหนดช��อโปรเจ�คเป�น ScopeDemo เล�อก Server เป�น Apache Tomcat 6.0.18 และ Java EE Version เป�น Java

EE5 แล�วกด Finish

2. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด ScopeDemo จากน��นเล�อกค.าส��ง New > Servlet

3. ก.าหนด Class Name: เป�น FirstServlet.java และ Package เป�น servlet แล�วกด Finish

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


6. ก.าหนด Class Name: เป�น SecondServlet.java และ Package เป�น servlet แล�วกด Finish

7. ในหน�าต/าง Editor เขยน Source code ของ SecondServlet.java ด�ง Listing ท� 6.2 แล�วเล�อกค.าส��ง Save

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

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

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

2. ท.าการ Run โปรเจ�ค ScopeDemo

3. ในโปรแกรม Web Browser เล�อก url ท�ช��อ http://localhost:8080/ScopeDemo/FirstServlet

แล�วส�งเกต1ผลล�พธ54. ทดลองร�น url ท�ช��อ http://localhost:8080/ScopeDemo/SecondServlet โดยตรง แล�วส�งเกตผลล�พธ5

อกคร��งจะเห�นว/า ค/าท�แสดงเป�น null ท��งน�เน��องจากโปรแกรมไม/ได�มการส/ง request มาจาก FirstServlet

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

ขอบเขตการใช�งานของออปเจ�คแบบ Request จะส/งผ/านค/าของออปเจ�คตาม request ของ url ท��งน�ไม/สามารถท�จะใช�งานได�โดยการเรยก url น��นโดยไม/มการส/ง request มาด�งแสดงในข��นตอนท�ผ/านมา เราสามารถท�จะก.าหนดขอบเขตของการใช�งานของออปเจ�ค ให�ใช�งานผ/านใน session ของ Web Browser ได� (ตราบเท/าท� Browser ย�งใช� session น��นอย#/) โดยการก.าหนด Attribute ลงในออปเจ�คชน0ด HttpSession ซ,�งจะเป�นออปเจ�คท�เก�บข�อม#ล session ของ Web Browser อาท0เช/นเก�บค/าของต�วแปร String ช��อว/า name ไว�ใน attribute

ของ session ท�ช��อ SessionName โดยมร#ปแบบค.าส��งด�งน�

String name = “Thanisa”;


http://localhost:8080/ScopeDemo/FirstServlet


43

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

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

Listing ท� 6.3 โปรแกรม FirstSessionServlet.java

package servlet;



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


44

}


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





45

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



2. ก.าหนด Class Name: เป�น FirstSessionServlet.java และ Package เป�น servlet แล�วกด Finish

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


5. ก.าหนด Class Name: เป�น SecondSessionServlet.java และ Package เป�น servlet แล�วกด Finish

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

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




3. ในโปรแกรม Web Browser เล�อก url ท�ช��อ http://localhost:8080/ScopeDemo/FirstSessionServlet

4. ทดลองร�น url ท�ช��อ http://localhost:8080/ScopeDemo/SecondSessionServlet แล�วส�งเกตผลล�พธ55. ทดลองป@ด Web Browser แล�วเป@ดข,�นมาใหม/แล�วทดลองร�น url ท�ช��อ

http://localhost:8080/ScopeDemo/SecondSessionServlet ใหม/แล�วส�งเกตผลล�พธ5

6.3 การพฒนาโปรแกรมเพ��อสาธ(ตขอบเขตของ Object แบบ Application

เราสามารถท�จะก.าหนดขอบเขตการใช�งานของออปเจ�คให�เป�นแบบ Application กล/าวค�อสามารถใช�ก�บโปรแกรม Java Servlet หร�อ JSP ท1กโปรแกรมท�อย#/ภายใน Web Application เดยวก�นตราบใดท� Web Server

ย�ง deploy โปรแกรม Web Application ด�งกล/าวอย#/ ถ,งแม�ว/า Web Browser ของฝABง client จะป@ดไปแล�วก�ตาม การก.าหนดขอบเขตแบบ Application สามารถท.าได�โดยใช�ค.าส��ง setAttribute() ก�บออปเจ�คชน0ด ServletContext ซ,�งเป�นออปเจ�คท�เก�บข�อม#ลของ Web Application ซ,�งในแต/ละ Web Application จะมออปเจ�คชน0ด ServletContext อย#/หน,�งต�ว และสามารถเรยกมาได�โดยใช�ค.าส��ง getServletContext()

ต�วอย/างค.าส��งในการเก�บออปเจ�คชน0ด String ท�ช��อ name ไว�ใน attribute ท�ช��อ AppName ของออปเจ�ค




http://localhost:8080/ScopeDemo/FirstSessionServlet

46

ชน0ด ServletContext จะมร#ปแบบค.าส��งด�งน�

String name = "Thanisa"; ServletContext context = getServletContext(); context.setAttribute("AppName", name);

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

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

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

Listing ท� 6.5 โปรแกรม FirstAppServlet.java

package servlet;



package servlet;



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


47

context.setAttribute("AppName", name); } finally { out.close(); } }




Listing ท� 6.6 โปรแกรม SecondAppServlet.java

package servlet;



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 {


48

processRequest(request, response); }



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



2. ก.าหนด Class Name: เป�น FirstAppServlet.java และ Package เป�น servlet แล�วกด Finish

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


5. ก.าหนด Class Name: เป�น SecondAppServlet.java และ Package เป�น servlet แล�วกด Finish

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

6.3.2 ข��นตอนการทดสอบโปรแกรม เพ��อสาธ0ตขอบเขตของ Object แบบ Application




3. ในโปรแกรม Web Browser เล�อก url ท�ช��อ http://localhost:8080/ScopeDemo/FirstAppServlet

4. ทดลองร�น url ท�ช��อ http://localhost:8080/ScopeDemo/SecondAppServlet แล�วส�งเกตผลล�พธ55. ทดลองป@ด Web Browser แล�วเป@ดข,�นมาใหม/แล�วทดลองร�น url ท�ช��อ

http://localhost:8080/ScopeDemo/SecondAppServlet ใหม/แล�วส�งเกตผลล�พธ5




http://localhost:8080/ScopeDemo/FirstAppServlet

49

Exercise 7 การพ�ฒนาโปรแกรม Servlet โดยใช�คลาสประเภท Web Listener

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

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

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

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

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

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

โปรแกรม AddBookServlet ก.าหนดค.าส��งในการเช��อมต/อก�บข�อม#ลท�อย#/ในเมธอด init() ซ,�งเป�นว0ธการท�ไม/เหมาะสมมากน�ก เน��องจากโปรแกรม Servlet ท1กโปรแกรมท�จะเช��อมต/อก�บฐานข�อม#ลต�องเขยนโปรแกรมในส/วนของเมธอด init() ท�ซ�.าก�น แบบฝ�กห�ดน�จะปร�บปร1งโปรแกรมในส/วนน�โดยการใช� ContextListener

โปรแกรม Servlet จะม Listener อย#/สองชน0ดค�อ ContextListener และ SessionListener โดยท� ContextListener จะถ#กเรยกเม��อ Web Application เร0�มต�นการท.างานหร�อส0�นส1ดการท.างาน เราสามารถท�จะเขยนโปรแกรมประเภท Servlet Listener ได�โดยมข��นตอนด�งน�

1. พ�ฒนาคลาสท� implements Listener ท�ต�องการอาท0เช/น ServletContextListener

2. เขยนเมธอดท�ต�อง implements ใน Listener น��นๆ3. config ไฟล5 web.xml เพ��อเพ0�มคลาสประเภท Listener

โปรแกรม Init.java จะเป�นโปรแกรมท�เป�น ServletContextListener เพ��อเช��อมต/อก�บฐานข�อม#ลเม��อเร0�มต�น แล�วเก�บออปเจ�ค Connection ไว�ภายใน ServletContext โปรแกรมจะเขยนค.าส��งเหล/าน�ภายในเมธอด contextInitialized() ซ,�งจะถ#กเรยกเม��อ Web Application เร0�มต�นการท.างาน

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



50

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

3. ก.าหนด Class Name เป�น Init และ Package เป�น listener แล�วกด Finish ด�งร#ปท� 7.1

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

4. ในหน�า Editor ให�คล0;กขวาเล�อก Insert Code... > Use Database

5. ในไดอะล�อก Choose Database กดป'<ม Add...

6. ในไดอะล�อก Add Data Source Reference ให�ก.าหนด Reference Name: เป�น jdbc/test ด�งร#ปท� 7.2

ร�ปท�� 7.2 การก�าหนด Reference Name

7. โปรแกมจะปรากฏ sourcecode ด�งน�ในไฟล5 Init.java


51

private DataSource getJdbcTest() throws NamingException { Context c = new InitialContext();

return (DataSource) c.lookup("java:comp/env/jdbc/test"); }

8. ให�ท.าการเพ0�ม sourcecode ด�งต/อไปน�ในเมธอด contextInitialized

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

9. จากน��นให�ท.าการ Fix Imports และ จะท.าให� sourcecode ของไฟล5 Init.java ด�งน�

private Connection conn;public void contextInitialized(ServletContextEvent arg0) {

try {conn = getJdbcTest().getConnection();

arg0.getServletContext().setAttribute("connection", conn); } catch (SQLException ex) { Logger.getLogger(Init.class.getName()).log(Level.SEVERE, null, ex); } catch (NamingException ex) { Logger.getLogger(Init.class.getName()).log(Level.SEVERE, null, ex); } }

10. จากน��นควรเพ0�มเต0มค.าส��งต/อไปน�ในเมธอด contextDestroyed

public void contextDestroyed(ServletContextEvent arg0) {try {

conn.close(); } catch (SQLException ex) {

Logger.getLogger(Init.class.getName()).log(Level.SEVERE, null, ex);}

}

เราจะได� sourcecode ของไฟล5 Init.java ด�ง Listing ท� 7.1

Listing ท� 7.1 โปรแกรม Init.java

public class Init implements ServletContextListener {

private Connection conn;

public void contextInitialized(ServletContextEvent arg0) { try { conn = getJdbcTest().getConnection(); arg0.getServletContext().setAttribute("connection", conn); } catch (SQLException ex) { Logger.getLogger(Init.class.getName()).log(Level.SEVERE, null, ex); } catch (NamingException ex) { Logger.getLogger(Init.class.getName()).log(Level.SEVERE, null, ex);


52

} }

public void contextDestroyed(ServletContextEvent sce) { try { conn.close(); } catch (SQLException ex) { Logger.getLogger(Init.class.getName()).log(Level.SEVERE, null, ex); } }

private DataSource getJdbcTest() throws NamingException { Context c = new InitialContext(); return (DataSource) c.lookup("java:comp/env/jdbc/test"); }}

7.2 การปรบปร�งโปรแกรม AddBookServlet.java

โปรแกรม Init.java จะม.าหน�าท�ในการเช��อมต/อก�บฐานข�อม#ล ด�งน��นเราจ,งต�องแก�ไขค.าส��งการเช��อมโยงฐานข�อม#ลท�อย#/ในไฟล5 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

....

public class AddBookServlet extends HttpServlet {

private Connection conn;

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

protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter();


53

out.println("<html>"); out.println("<head>"); out.println("<title>Add a new book</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1> Add a new book </h1>");

try { String isbn = request.getParameter("isbn"); String author = request.getParameter("author"); String title = request.getParameter("title"); String priceStr = request.getParameter("price"); float price = Float.parseFloat(priceStr);

Statement stmt = conn.createStatement();

String sql = "INSERT INTO books VALUES('" + isbn + "','" + title + "','" + author + "'," + price + ")"; int numRow = stmt.executeUpdate(sql);

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

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

out.println("</body>"); out.println("</html>");

out.close(); }

....}

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


2. Run โปรแกรม WebBaseDB ท��งน�ต�องท.าการร�น MySQL Database Server ก/อน 6. โปรแกรมจะแสดงหน�า addBook.html ให�เราใส/ข�อม#ล :ซ�งเม��อใส/ข�อม#ลจะได�ผลล�พ5เช/นเดยวก�บแบบ

ฝ�กห�ดก/อน


54

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

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

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

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

โปรแกรม Servlet Filter เป�นโปรแกรม Java ท�ก.าหนดข,�นมาใน Web Application ซ,�งจะด�กการท.างานของโปรแกรม Java Servlet ใดๆ แล�วสามารถท�จะแก�ไขค/าของออปเจ�คชน0ด request และ response ก/อนท�โปรแกรม Java Servlet น��นจะถ#กเรยกใช�ต/อไป ต�วอย/างของการพ�ฒนาโปรแกรม Servlet Filter ค�อ

● การควบค1มการใช�งาน Servlet หร�อการท.า Authentication

● การบล�อกการใช�งาน Servlet หร�อตรวจสอบการใช�งาน Servlet

● การเปล�ยนแปลงข�อม#ลของออปเจ�ค request

โปรแกรม Servlet Filter จะเป�น โปรแกรม Java ท� implements อ0นเตอร5เฟสท�ช��อ Filter และมเมธอดหล�กค�อ init(), destroy() และ doFilter()

เราสามารถท�จะก.าหนดให� url ใดๆ ในโปรแกรม Web Application ถ#ก Filter จากโปรแกรม Servlet

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

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

เป�นการก.าหนดให�โปรแกรม url ท1กต�วท�อย#/ใน Web Application น� ต�องถ#กด�กโดย Servlet Filter ท�ช��อ LoginFilter

แบบฝ�กห�ดน�จะก.าหนดให�ม web form ท�ช��อ login.html ซ,�งจะท.าการเรยกโปรแกรม LoginServlet ซ,�งจะตรวจสอบค/า username และ password ท�ป%อนเข�ามา หากถ#กต�องก�จะก.าหนดให�ค/าของออปเจ�คท�ช��อ loginFlag เป�น true แล�วก.าหนดให�ขอบเขตของออปเจ�ค loginFlag เป�นแบบ Session โดยการ setAttribute


55

ให�ก�บออปเจ�คชน0ด HttpSession

โปรแกรม Web Application น�ย�งม Servlet Filter ท�ช��อ LoginFilter ซ,�งจะท.าหน�าท�อ/านค/าของออปเจ�ค LoginFlag ท�อย#/ในออปเจ�คชน0ด HttpSession ถ�าหากไม/พบหร�อมค/าเป�น false โปรแกรมจะระบ1 HTTP Error 401 (This request requires HTTP authentication . )

ส1ดท�ายจะมการเขยนโปรแกรม Java Servlet ท�ช��อ ShowServlet เพ��อแสดงข�อความว/า HelloWorld

เพ��อแสดงให�เห�นว/าโปรแกรมจะถ#กด�กโดย LoginFilter

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

หน�า Login จะมโปรแกรมสองโปรแกรมค�อ login.html ซ,�งจะเป�น web page ท�มล�กษณะด�งร#ป และม source code ตาม Listing ท� 8.1 นอกจากจะมโปรแกรม LoginServlet ซ,�งจะท.าหน�าท�ในการอ/านพาราม0เตอร5ท�ช��อ username และ password พร�อมท��งตรวจสอบว/ามค/าเป�น thana และ secret หร�อไม/ หากใช/ก�จะก.าหนดค/า ต�วแปร loginFlag เป�น true แล�วเก�บลงในออปเจ�คชน0ด 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>


56

Listing ท� 8.2 โปรแกรม LoginServlet.java

package controller;



public class LoginServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { boolean loginFlag = false; String username = request.getParameter("username"); String password = request.getParameter("password"); if (username.equals("thana") && password.equals("secret")) { loginFlag = true; } HttpSession session = request.getSession(); session.setAttribute("loginFlag", loginFlag);

response.sendRedirect("show.do"); } finally { out.close(); } }



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

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

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


57

1. เล�อกค.าส��งสร�าง New Project จากเมน# เล�อก Java Web แล�วเล�อก Web Application ก.าหนดช��อ โปรเจ�คเป�น FilterDemo เล�อก Server เป�น Apache Tomcat 6.0.18 และ Java EE Version เป�น Java

EE5 แล�วกด Finish

2. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด FilterDemo จากน��นเล�อกค.าส��ง New > HTML..

3. ก.าหนด HTML File Name: เป�น login แล�วกด Finish

4. ในหน�าต/าง Editor เขยน Source code ของ login.html ด�ง Listing ท� 8.1 แล�วเล�อกค.าส��ง Save

5. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด FilterDemo จากน��นเล�อกค.าส��ง New > Servlet...

6. ก.าหนด Class Name: เป�น LoginServlet.java และ Package เป�น controller แล�วกด Finish

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

8.3 การเข%ยน Servlet Filter

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

นอกจากน�กรณน�จะก.าหนดให� url เฉพาะช��อ *.do เท/าน��นท�จะเรยกใช� Filter ท�ช��อ LoginFilter ซ,�งจะต�องมการแก�ไข web.xml ด�งน�

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

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {

if (debug) { log("LoginFilter:doFilter()"); }

doBeforeProcessing(request, response);


58

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

Throwable problem = null;

try { chain.doFilter(request, response); } catch (Throwable t) {

problem = t; t.printStackTrace(); }

doAfterProcessing(request, response);

if (problem != null) { if (problem instanceof ServletException) { throw (ServletException) problem; } if (problem instanceof IOException) { throw (IOException) problem; } sendProcessingError(problem, response); } }



1. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด FilterDemo จากน��นเล�อกค.าส��ง New > Other..

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

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

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


59

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

5. โปรแกรมจะท.าการแก�ไขไฟล5 web.xml เพ��อระบ1 Filter ใหม/ท�สร�างข,�น ซ,�งเราสามารถท�จะด#การแก�ไขน�ได�โดยการขยายโหนด FilterDemo > Web Pages >WEB-INF แล�วเล�อกไฟล5 web.xml จะเห�นหน�าต/างด�งร#ปท� 8.3

ร�ปท�� 8.3 หน�าต-างไฟล! web.xml

6. ในส/วนของ Filter Mappings ให�เล�อก LoginFilter แล�วกด Edit เพ��อแก�ไข Applies To เป�น *.do ด�งร#ปท� 8.4

ร�ปท�� 8.4 การก�าหนดค-า Filter Mapping


60

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

ท� 8.3 แล�วเล�อกค.าส��ง Save

8.4 การเข%ยนโปรแกรม ShowServlet

โปรแกรม ShowServlet จะท.าหน�าท�เพ��อแสดงข�อความว/า Hello World และม source code ของเมธอด processRequest() ด�ง Listing ท� 8.4

Listing ท� 8.4 เมธอด processRequest() ของโปรแกรม ShowServlet.java

protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); 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(); } }



1. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด FilterDemo จากน��นเล�อกค.าส��ง New > Servlet..

2. ก.าหนด Class Name: เป�น ShowServlet.java และ Package เป�น view แล�วกด Next

3. ก.าหนด URL Pattern(s) เป�น /show.do ด�งร#ปท� 8.5 แล�วกด Finish


61

ร�ปท�� 8.5 การก�าหนดค-า URL pattern

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

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


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

2. ท.าการ Run โปรเจ�ค FilterDemo

3. ทดลองร�น url ท�ช��อ http://localhost:8080/FilterDemo/show.do แล�วส�งเกตผลล�พธ5จะเห�นว/าแสดงข�อผ0ดพลาด HTTP 401

4. ทดลองร�น url ท�ช��อ http://localhost:8080/FilterDemo/login.html แล�วป%อน username เป�น thana

และ password เป�น secret


62

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


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

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

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

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

1. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด WebBaseDB จากน��นเล�อกค.าส��ง New > Other..

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

3. ก.าหนด JSP File Name: เป�น hello แล�วกด Finish

4. ในหน�าต/าง editor ให�แก�ไข sourcecode ของไฟล5 hello.jsp ให�เป�นไปตาม Listing ท� 9.1

5. ท.าการ Build และ Deploy โปรแกรม Web EBaseDB

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

Listing ท� 9.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>Hello JSP</title> </head> <body>

<h1>My First JSP</h1> Hello : Current time is : <%= new java.util.Date() %> </body></html>


63

ร�ปท�� 9.1 ผลล�พธ!ของ hello.jsp

9.2 การพฒนาโปรแกรม viewBook.jsp

โปรแกรม viewBook.jsp เป�นโปรแกรม JSP เพ��อแสดงข�อม#ลของ Table ท�ช��อ books โปรแกรมน�จะเรยกใช� standard tags ท�ก.าหนดไว�ใน JSTL 1.1 ซ,�งท.าให�ผ#�เขยนโปรแกรม JSP ไม/ต�องเขยน source code ภาษา Java โดยมค.าส��งต/างๆ ท�ส.าค�ญด�งน�

9.2.1 การก.าหนด Tag Library

โปรแกรม viewBook.jsp จะเรยกใช� JSTL 1.0 เราจ,งจ.าเป�นต�องมค.าส��ง Taglib เพ��อท�จะประกาศ Library ด�งน�

<%@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 ของโปรเจ�ค โดยสามารถก.าหนดได�สองว0ธ

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

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


64

ถ,งแม�ว/าโปรเจ�ค WebBaseDB จะม datasource อย#/แล�ว แต/แบบฝ�กห�ดน�จะก.าหนด datasource ข,�นมาใหม/อกหน,�งช1ด ก.าหนดเป�นต�วแปรท�ช��อ newdatasource โดยจะก.าหนดค.าส��งเป�น

<sql:setDataSource var="newdatasource" driver="com.mysql.jdbc.Driver" url="jdbc:mysql:///test" user="root" password="root" />

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

9.2.3 การใช�ค.าส��ง sql:query

ค.าส��ง 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.4 การใช�ค.าส��ง c:forEach เพ��อแสดงผล

การแสดงค/าของผลล�พธ5ท�ได�จากการ Query ฐานข�อม#ล สามารถท.าได� การแจงข�อม#ลทละแถวโดยใช�ค.าส��ง c:forEach โดยโปรแกรมน�จะแสดงข�อม#ลช��อหน�งส�อ และช��อผ#�แต/ง โดยมค.าส��งด�งน�

<c:forEach var="row" items="${db.rows}"> ${row.title} : ${row.author} <br> </c:forEach>

ส.าหร�บข��นตอนการพ�ฒนาโปรแกรมน� มด�งน�


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

3. ก.าหนด JSP File Name: เป�น viewBook แล�วกด Finish

4. ขยายโหนด WebBaseDB คล0;กขวาท�โหนด Libraries เล�อกค.าส��ง Add Libraries..


65

5. ในไดอะล�อก Add Library เล�อก JSTL1.1 แล�วกดป16ม Add Library ด�งร#ปท� 9.2

ร�ปท�� 9.2 การเพ��ม Library ในโปรเจ�ค

6. ในหน�าต/าง editor ให�แก�ไข sourcecode ของไฟล5 viewBook.jsp ให�เป�นไปตาม Listing ท� 9.2


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

ผลล�พธ5ด�งต�วอย/างในร#ปท� 9.3

ร�ปท�� 9.3 ผลล�พธ!ของ viewBook.jsp

Listing ท� 9.2 โปรแกรม viewBook.jsp




66

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


67

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

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

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

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

โปรแกรม selectBooks.jsp เป�นโปรแกรม JSP ท�เขยนเพ��อแสดงรายการหน�งส�อท�มอย#/ใน table ท�ช��อ books ออกมาแสดงในร#ปแบบของ Web Form เพ��อให�ผ#�ใช�เล�อกรายการหน�งส�อและจ.านวนด�งร#ปท� 10.1 ท��งน� Web Form น�จะเรยก url ท�ช��อ processSelection เม��อมการกดป16ม Select โปรแกรมน�จะเรยกใช� SQL tags ของ JSTL เพ��อแสดงรายการข�อม#ลรายช��อหน�งส�อ โดยม source code ด�งแสดงใน Listing ท� 10.1 และมข��นตอนการพ�ฒนาโปรแกรมด�งน�

1) เล�อกเมน# File > New Project..

2) ในไดอะล�อก New Project ให�เล�อก Categories เป�น Java Web และเล�อก Projects เป�น Web


3) ก.าหนด Project Name: เป�น BookOnline แล�วเล�อก Project Location: เป�น Director ท�เราต�องการจะเก�บไฟล5ไว� จากน��นเล�อก Server เป�น Apache Tomcat 6.0.18 แล�วกด Finish

4) เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด BookOnline จากน��นเล�อกค.าส��ง New > Other...

5) ในไดอะล�อก New File ให�เล�อก Categories ทช��อ Web ซ,�งโปรแกรมก�จะแสดง File Types ต/างๆ ภายใต� Category น� ให�เราเล�อก JSP แล�วกด Next

6) ก.าหนด JSP File Name: เป�น selectBooks แล�วกด Finish

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

8) กดป16ม Save


68

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

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>


69

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

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

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

1. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด BookOnline จากน��นเล�อกค.าส��ง New > Java Class..

2. ก.าหนด Class Name: เป�น Book.java และ Package เป�น model แล�วกด Next

3. เขยน Source code ของไฟล5ด�งน� เพ0�ม attribute ภายในคลาส BookActionForm ด�งน�String isbn;String title;String author;double price;

4. ท.าการ encapsulate attribute (ก.าหนด attribute ให�เป�น private และ สร�างเมธอด getter และ setter)

โดยการคล0;กขวาภายในหน�าต/าง editor ของ source code แล�วเล�อก Refactor > Encapsulate Field..

5. กดป16ม Refactor แล�วกดป16ม Save

Listing ท� 10.2 โปรแกรม Book.java

package model;

public class Book { private String isbn; private String author; private String title; private double price;


70

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

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

โปรแกรม Cart.java เป�นคลาสท�ท.าหน�าท�คล�ายก�บ shopping cart เพ��อเก�บออปเจ�คชน0ด Book ตามรายการหน�งส�อท�ผ#�ใช�เล�อก โดยอ�างอ0งจากหมายเลข isbn ซ,�งโปรแกรมจะท.าการค�นรายช��อหน�งส�อจาก table ท�ช��อ books หมายเลข isbn ท�อ�างอ0ง แล�วจะแปลงเป�นออปเจ�คชน0ด books ก/อนจะใส/ลงใน cart โปรแกรมน�จะม source code ด�ง Listing ท� 10.3 และมข��นตอนการพ�ฒนาด�งน�

1. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด BookOnline จากน��นเล�อกค.าส��ง New > Java Class..

2. ก.าหนด Class Name: เป�น Cart.java และ Package เป�น model แล�วกด Next

3. ในหน�าต/าง editor ให�แก�ไข source code ของไฟล5 Cart.java ให�เป�นไปตาม Listing ท� 10.3

4. กดป16ม Save


71

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 ท�ท.าหน�าท�อ/านค/าพาราม0เตอร5ท�ช��อ isbn

ซ,�งส/งมาจากหน�า Web Form ของโปรแกรม selectBooks.java โดยใช�ค.าส��ง getParameterValues ด�งน�


72

String[] isbn = request.getParameterValues("isbn");

จากน��นจะท.าการเรยก session เพ��อเรยก attribute ท�ช��อ cart ออกมาโดยใช�ค.าส��งด�งน�

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

เม��อส0�นส1ดการท.างานโปรแกรมก�จะไปเรยก url ท�ช��อ view.cart ต/อไป โดยใช�ค.าส��งด�งน�

RequestDispatcher pg = request.getRequestDispatcher("viewCart.jsp"); pg.forward(request, response)

ส.าหร�บโปรแกรมน�จะม source code ของเมธอด processRequest ด�ง Listing ท� 10.4 และจะมข��นตอนด�งการพ�ฒนาโปรแกรมด�งน�

1. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด BookOnline จากน��นเล�อกค.าส��ง New > Servlet..

2. ก.าหนด Class Name: เป�น ProcessSelection.java และ Package เป�น controller แล�วกด Next

3. ก.าหนด URL Pattern(s) เป�น /ProcessSelection ด�งร#ป แล�วกด Finish

4. ในหน�าต/าง Editor เขยน Source code ของ ProcessSelection.java ด�ง Listing ท� 10.4 แล�วเล�อกค.าส��ง Save

Listing ท� 10.4 เมธอด processRequest() ของโปรแกรม ProcessSelection.java

protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter();


73

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

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

โปรแกรม Init.java เป�นโปรแกรมประเภท ServletContextListener เพ��อเช��อมต/อก�บฐานข�อม#ลเม��อเร0�มต�น แล�วเก�บออปเจ�ค connection ไว�ภายใน ServletContext โดยมข��นตอนการพ�ฒนาเช/นเดยวก�บการพ�ฒนาโปรแกรม Init.java ในแบบฝ�กห�ดการพ�ฒนาโปรแกรม Servlet โดยใช�คลาสประเภท Listener และจะต�องมการแก�ไขไฟล5 context.xml และ web.xml ด�งแบบฝ�กห�ดด�งกล/าว

10.6 การพฒนาโปรแกรม viewCart.jsp

โปรแกรม viewCart.jsp เป�นโปรแกรม JSP ท�เขยนเพ��อแสดงรายการหน�งส�อท�ผ#�ใช�เล�อก และเก�บใน shopping cart ออกมาแสดง โปรแกรมน�จะใช� Expression Language เพ��อแสดงข�อม#ลใน session ด�ง Listing

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

1. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด BookOnline จากน��นเล�อกค.าส��ง New > JSP

2. ก.าหนด JSP File Name: เป�น viewCart แล�วกด Finish

3. ในหน�าต/าง editor ให�แก�ไข source code ของไฟล5 viewCart.jsp ให�เป�นไปตาม Listing ท� 10.5


Listing ท� 10.5 โปรแกรม viewCart.jsp

<%@page contentType="text/html"%><%@page pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>


74

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

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


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

2. ท.าการ Run โปรเจ�ค BookOnline

3. ทดลองร�น url ท�ช��อ http://localhost:8080/BookOnline/selectBooks.jsp แล�วทดลองเล�อกรายการหน�งส�อ แล�วกดป16ม Select

4. โปรแกรมจะเรยก url ท�ช��อ http://localhost:8080/BookOnline/processSelection เพ��อแสดงรายการใน Cart ด�งร#ปท� 10.2

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

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


75

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

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

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

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

โปรแกรม hello.jsp เป�นโปรแกรม JSP ท�เขยนโดยใช� scriptlet เรยกค.าส��งภาษาจาวา โดยจะมค.าส��งในการอ/านพาราม0เตอร5ของออปเจ�ค request ท�ช��อ name แล�วจะพ0มพ5ข�อความ Hello xxxx จ.านวนส0บคร��ง โดยโปรแกรมน�จะม sourcecode ด�ง Listing ท� 11.1 และมข��นตอนการพ�ฒนาโปรแกรมด�งน�




3. ก.าหนด Project Name: เป�น JSPDemo แล�วเล�อก Project Location: เป�น Director ท�เราต�องการจะเก�บไฟล5ไว� จากน��นเล�อก Server เป�น Apache Tomcat 6.0.18 แล�วกด Finish

4. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด JSPDemo จากน��นเล�อกค.าส��ง New > Other...


6. ก.าหนด JSP File Name: เป�น hello แล�วกด Finish

7. ในหน�าต/าง editor ให�แก�ไข source code ของไฟล5 hello.jsp ให�เป�นไปตาม Listing ท� 11.1

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

9. ในหน�าต/าง Projects เล�อกไฟล5 hello.jsp แล�วเล�อก Run โปรแกรมโดยให�ส/งผ/านพาราม0เตอร5ทาง URL

เช/น http://localhost:8080/JSPDemo/hello.jsp?name=Thanisa เราจะได�ผลการร�นด�งร#ปท� 11.1


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

76

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

Listing ท� 11.1 โปรแกรม hello.jsp


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


77

11.2 การพฒนาโปรแกรม helloTag.jsp

โปรแกรม helloTag.jsp เป�นโปรแกรม JSP ท�ท.างานแบบเดยวก�บโปรแกรม hello.jsp แต/การพ�ฒนาโปรแกรมน�จะเขยนโดยการสร�าง custom tag ท�ช��อ nameTag การสร�าง custom Tag จะต�องมการพ�ฒนาโปรแกรมหลายๆ ส/วนด�งน�

11.2.1 สร�าง Tag Library Descriptor

ไฟล5น�จะใช�เก�บ รายช��อ Tag ต/างๆ ท�มอย#/เพ��อสามารถน.า tag ต/างๆ มาใช�ในโปรแกรม JSP โดยใช�ค.าส��ง <%@taglib ...%> การสร�าง Tag Library Descriptor จะมข��นตอนด�งน�


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

3. ก.าหนด TLD Name: เป�น MyTags และค/า Folder เป�น WEB-INF\tlds ส/วนค/าอ��นๆ ให�เป�นตามท�ต��งไว�ด�งร#ปท� 11.2 แล�วกด Finish

ร�ปท�� 11.2 การก#าหนด Tag Library Descriptor

4. หน�าต/าง Editor จะแสดงไฟล5ท�ช��อ MyTags.tld ท�อย#/ในโฟลเดอร5 Web Pages\WEB-INF\tlds


mailto:%25@taglib

78

11.2.2 สร�างไฟล5 Tag Handler

ไฟล5 Tag Handler จะเป�นโปรแกรมจาวาท�พ�ฒนาข,�นเพ��อระบ1ว/า เม��อเรยกใช� tag แล�วจะต�องท.าค.าส��งอย/างไร ในท�น�จะก.าหนดช��อ Tag เป�น NameTag และโปรแกรมจาวาเป�น NameTagHandler โดยโปรแกรมจะท.าการอ/านค/าพาราม0เตอร5 name และพ0มพ5ข�อความ Hello xxxx จ.านวนส0บคร��ง การสร�างไฟล5 Tag Handler จะมข��นตอนด�งน�


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

3. ก.าหนด Class Name: เป�น NameTagHandler ค/า Package เป�น tags ส/วนค/าอ��นๆ ให�เป�นตามท�ต��งไว� ด�งร#ปท� 11.3 แล�วกด Next

ร�ปท�� 11.3 การก#าหนดค�า Tag Handler

4. กดป16ม Browse เล�อก TLD File: เป�น MyTags.tld

5. กดป16ม New เพ��อเพ0�ม Attribute

6. ในไดอะล�อก Add New Attribute ก.าหนด Attribute Name: เป�น name ค/า Attribute Type เป�น java.lang.String และเล�อก required Attribute แล�วกด Next

7. เราจะได�ไดอะล�อก New File ด�งร#ปท� 11.4 แล�วกด Finish

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


79

ร�ปท�� 11.4 การก�าหนดข�อม�ล TLD ของไฟล! NameTagHandler

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

package tags;

import javax.servlet.jsp.tagext.*;import javax.servlet.jsp.JspWriter;import javax.servlet.jsp.JspException;

public class NameTagHandler extends SimpleTagSupport {

/** * Initialization of name property. */ private java.lang.String name; /**Called by the container to invoke this tag. * The implementation of this method is provided by the tag library developer, * and handles all tag processing, body iteration, etc. */ public void doTag() throws JspException { 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>");


80

} } catch (java.io.IOException ex) { throw new JspException(ex.getMessage()); } }

public void setName(java.lang.String name) { this.name = name; }}

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

โปรแกรม helloTag.jsp จะเรยกใช� Tag ท�ช��อ NameTag โดยจะม source code ด�ง Listing ท� 3 การสร�างโปรแกรม helloTag.jsp จะมข��นตอนด�งน�



3. ก.าหนด JSP File Name: เป�น helloTag แล�วกด Finish

4. ในหน�าต/าง editor ให�แก�ไข source code ของไฟล5 helloTag.jsp ให�เป�นไปตาม Listing ท� 11.3

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

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


81

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

โปรแกรม helloJSTL.jsp เป�นโปรแกรม JSP ท�ท.างานเช/นเดยวก�บโปรแกรมท�ผ/านมาแต/จะท.าการเรยกใช� JSP Standard Tag Library ในการพ0มพ5ข�อความ Hello xxx ส0บคร��ง แทนการเขยนค.าส��ง scriptlet โดยโปรแกรมน�จะม source code ด�ง Listing ท� 11.4 และจะมข��นตอนการพ�ฒนาโปรแกรมด�งน�



3. ก.าหนด JSP File Name: เป�น helloJSTL แล�วกด Finish

4. ขยายโหนด JSP Demo แล�วเล�อกโหนด Libraries คล0;กขวาเล�อก Add Library

5. ในไดอะล�อก Add Library เล�อกไฟล5 JSTL 1.1 แล�วกดป16ม Add Library

6. ในหน�าต/าง editor ให�แก�ไข source code ของไฟล5 helloJSTL.jsp ให�เป�นไปตาม Listing ท� 11.4

7. ท.าการ run โปรแกรม ดยก.าหนด URL เป�น http://localhost:8080/JSPDemo/helloJSTL.jsp?

name=Thanisa จะได�ผลล�พธ5เช/นเดยวก�บโปรแกรม hello.jsp

Listing ท� 11.4 โปรแกรม 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 อน1ญาตให�เราสร�าง custom tag โดยการเขยนไฟล5 html หร�อ JSP แทนท�จะเขยนโปรแกรมภาษาจาวา ซ,�งท.าให�ง/ายต/อการพ�ฒนา ในท�น�เราจะพ�ฒนาโปรแกรม helloTagFile.jsp ซ,�งจะท.าการเรยกใช� custom tag ท�ช��อ nameTagFile ท�เป�น tag file ซ,�งเป�นโปรแกรม JSP โดยมข��นตอนการพ�ฒนาด�งน�


82

11.4.1 สร�าง Tag File

ไฟล5น�จะท.าหน�าน�เป�นต�วจ�ดการ Tag โดยเขยนเป�นโปรแกรม JSP และมข��นตอนการพ�ฒนาด�งน�


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

3. ก.าหนด Tag File Name: เป�น NameTagFile

4. เล�อก Add Tag File to Tag Library Descriptor แล�วเล�อกไฟล5 MyTags.tld ด�งร#ปท� 11.5 แล�วกด Finish

ร�ปท�� 11.5 การก#าหนดค�า Tag File

5. หน�าต/าง Editor จะแสดงไฟล5ท�ช��อ NameTagFile.tag ท�อย#/ในโฟลเดอร5 Web Pages.WEB-INF.tags

6. เขยน source code ด�ง Listing ท� 11.5

Listing ท� 11.5 โปรแกรม 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>


83

11.4.2 เขยนโปรแกรม helloTagFile.jsp

โปรแกรม helloTagFile.jsp จะเรยกใช� Tag ท�ช��อ NameTagFile โดยจะม source code ด�ง Listing

ท� การสร�างโปรแกรม helloTagFile.jsp จะมข��นตอนด�งน�



3. ก.าหนด JSP File Name: เป�น helloTagFile แล�วกด Finish

4. ในหน�าต/าง editor ให�แก�ไข source code ของไฟล5 helloTagFile.jsp ให�เป�นไปตาม Listing ท� 11.6

5. ท.าการ run โปรแกรมโดยก.าหนด URL เป�น http://localhost:8080/JSPDemo/helloTagFile.jsp?

name=Thanisa จะได�ผลล�พธ5เช/นเดยวก�บโปรแกรม hello.jsp

Listing ท� 11.6 โปรแกรม 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>


84

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


แบบฝ�กห�ดน�จะเป�นการพ�ฒนาโปรแกรม Web Application โดยใช� Struts Framework โดยการปร�บปร1งโปรแกรมเว�บเพ��อต0ดต/อก�บฐานข�อม#ล เพ��อให�ส/วนของ Web User Interface สามารถท�จะตรวจสอบข�อม#ล (Validate Data) ท�ป%อนข�อม#ลได� และเปล�ยนแปลงว0ธการอ/านพาราม0เตอร5โดยใช� Struts Framework

ข��นตอนในการพ�ฒนาโปรแกรม1. สร�างโปรเจ�ค StrutDBApp

2. พ�ฒนาโปรแกรม BookActionForm

3. พ�ฒนาโปรแกรม addBook.jsp

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

5. แก�ไขไฟล5 ApplicationResource.properties

6. พ�ฒนาโปรแกรม Init.java และ Thankyou.html

7. แก�ไขไฟล5 Struts-Config.xml


เราจะเร0�มต�นสร�างโปรแกรม WebBase Database โดยการสร�าง Project ใหม/ข,�นมาใน NetBeans ซ,�งมข��นตอนด�งน�




3. ก.าหนด Project Name เป�น StrutDBApp แล�วเล�อก Project Location เป�น Director ท�เราต�องการจะเก�บไฟล5ไว� จากน��นเล�อก Server เป�น Apache Tomcat 6.0.18 จากน��นกด Next

4. ในช/อง Frameworks ให�เล�อก Struts และเล�อก Add Strut TLDs จากน��นกด Finish

12.2 การพฒนาโปรแกรม BookActionForm.java

Struts Framework จะมโปรแกรม Java ท�จะต�องพ�ฒนาอย#/สองโปรแกรมค�อ FormBean และ Action

Class โดยส/วน FormBean จะท.าหน�าท�ในการตรวจสอบพาราม0เตอร5ท�ผ#�ใช�จะป%อนข�อม#ลในหน�าเว�บเพจ ส/วน Action Class จะเป�นโปรแกรมท�อ/านค/าพาราม0เตอร5ท�ป%อนมาเพ��อประมวลผลต/อไป


85

โปรแกรม FormBean จะเป�นโปรแกรม Java ทมค/า attribute สอดคล�องก�บช��อพาราม0เตอร5ท�จะป%อน และจะมเมธอด getter และ setter ท�สอดคล�องก�บ attribute ด�งกล/าว นอกจากน�อาจมเมธอดในการ validate

ข�อม#ล เพ��อให�สอดคล�องก�บเง��อนไขของข�อม#ลท�ต�องการจะก.าหนดไว�

ในท�น�จะก.าหนดให�ไฟล5ช��อ addBook.jsp เป�นเว�บเพจท�ใช�แสดงฟอร5มส.าหร�บป%อนข�อม#ลหน�งส�อใหม/เข�าในฐานข�อม#ล books ซ,�งมล�กษณะด�งร#ปท� 12.1

ร�ปท�� 12.1 เว�บเพจท��ใช�แสดงฟอร!มส�าหร�บป+อนข�อม�ล

และก.าหนดให�ผ#�ใช�ต�องป%อนพาราม0เตอร5ท�มช��อและเง��อนไขต/างๆด�งน�

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

แบบฝ�กห�ดน�ก.าหนดให�โปรแกรม FormBean มช��อว/า BookActionForm.java โดยมข��นตอนการพ�ฒนาด�งน�

1. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด StrutDBApp จากน��นเล�อกค.าส��ง New > Other..

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

3. ก.าหนด Class Name เป�น BookActionForm และ Package เป�น com.myapp.struts ด�งแสดงในร#ปท� 12.2


86

ร�ปท�� 12.2 การก�าหนดค-า Struts ActionForm Bean

4. กด Finish แล�วเขยน Source code ของไฟล5ด�งน�5. เพ0�ม attribute ภายในคลาส BookActionForm ด�งน�

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

6. ท.าการ encapsulate attribute (ก.าหนด attribute ให�เป�น private และ สร�างเมธอด getter และ setter)

โดยการคล0;กขวาภายในหน�าต/าง editor ของ source code แล�วเล�อก Refactor > Encapsulate Field..

7. โปรแกรมจะแสดง Fields ต/างๆให�เล�อกด�งร#ปท� 12.3


87

ร�ปท�� 12.3 หน�าไดอะล�อก Encapsulate Fields

8. ในไดอะล�อก Encapsulate Fields ให�คงค/าท�เล�อกไว�ท1ก Field ตามท�โปรแกรมก.าหนดไว�แล�วกดป16ม Refactor

9. โปรแกรมจะเพ0�ม source code โดยก.าหนดให� field ต/างๆม access modifier เป�น private แล�วเพ0�มเมธอด setter และ getter

10. แก�ไขโค�ดในเมธอด validate ด�งน�

public ActionErrors validate(ActionMapping mapping, HttpServletRequest request) { ActionErrors errors = new ActionErrors(); if (getIsbn() == null || getIsbn().length() < 3 || getIsbn().length() > 10) { errors.add("isbn", new ActionMessage("error.isbn.required")); } if (getTitle() == null || getTitle().length() < 3) { errors.add("title", new ActionMessage("error.title.required")); } if (getAuthor() == null || getAuthor().length() < 5) { errors.add("author", new ActionMessage("error.author.required")); } if (getPrice() < 0) { errors.add("price", new ActionMessage("error.price.required")); } return errors; }

11. กดป16ม Save จะได�โปรแกรมด�ง Listing ท� 12.1


88

Listing ท� 12.1 โปรแกรม BookActionForm.java

package com.myapp.struts;

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

public class BookActionForm extends org.apache.struts.action.ActionForm { private String isbn; private String title; private String author; private float price; private String name; public String getName() { return name; }

public void setName(String string) { name = string; } public BookActionForm() { super(); // TODO Auto-generated constructor stub } public ActionErrors validate(ActionMapping mapping, HttpServletRequest request) { ActionErrors errors = new ActionErrors(); if (getIsbn() == null || getIsbn().length() < 3 || getIsbn().length() > 10) { errors.add("isbn", new ActionMessage("error.isbn.required")); } if (getTitle() == null || getTitle().length() < 3) { errors.add("title", new ActionMessage("error.title.required")); } if (getAuthor() == null || getAuthor().length() < 5) { errors.add("author", new ActionMessage("error.author.required")); } if (getPrice() < 0) { errors.add("price", new ActionMessage("error.price.required")); } return errors; }


public void setIsbn(String isbn) { this.isbn = isbn;


89

}





public float getPrice() { return price; }

public void setPrice(float price) { this.price = price; }}

12.3 การพฒนาโปรแกรม AddBook.jsp

โปรแกรม AddBook.jsp เป�นโปรแกรม JSP ท�ใช� Tags ของ Strut Framework เพ��อแสดงหน�าเว�บเพจส.าหร�บการกรอกข�อม#ล โดยมข��นตอนการพ�ฒนาด�งน�

1. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด StrutDBApp จากน��นเล�อกค.าส��ง New > Other...


3. ก.าหนด JSP File Name: เป�น AddBook แล�วกด Finish

4. เขยน Source code ในหน�าต/าง Editor ตาม Listing ท� 12.2 แล�วป16ม Save

Listing ท� 12.2 โปรแกรม AddBook.jsp

<%@taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %><%@taglib uri="http://struts.apache.org/tags-html" prefix="html" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


90

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title><bean:message key="title.message"/> </title> </head> <body> <h1><bean:message key="title.message"/></h1> <html:errors/> <html:form action="AddBook"> ISBN : <html:text property="isbn" size="15"/> <BR> Title : <html:text property="title" size="50"/> <BR> Author : <html:text property="author" size="50"/> <BR> Price : <html:text property="price" size="10"/> <BR> <html:submit value="Add" /> </html:form> </body></html>

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

โปรแกรม AddBookAction.java เป�นโปรแกรม ActionForm ของ Struts Framework เพ��ออ/านข�อม#ลท�ผ#�ใช�ป%อนเข�ามาจากหน�า AddBook.jsp แล�วเขยนข�อม#ลลงใน table ท�ช��อ Books โดยมข��นตอนการพ�ฒนาด�งน�

1. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด StrutDBApp จากน��นเล�อกค.าส��ง New => Other..

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

3. ก.าหนด Class Name: เป�น AddBookAction เล�อก Package: เป�น com.myapp.struts และก.าหนด Action Path : เป�น /AddBook จะได�ไดอะล�อก New Struts Action ด�งร#ปท� 12.4


91

ร�ปท�� 12.4 การก�าหนดค-า Struts Action

4. แล�วกด Next ในหน�าถ�ดไปของไดอะล�อก ให�เล�อก Input Resource : เป�น /AddBook.jsp แล�วกด Finish

5. ให�แก�ไข source code ในเมธอด execute() ด�งน�

public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { BookActionForm bkForm = (BookActionForm) form; String isbn = bkForm.getIsbn(); String title = bkForm.getTitle(); String author = bkForm.getAuthor(); float price = bkForm.getPrice(); try { ServletContext context = getServlet().getServletContext(); Connection conn = (Connection) context.getAttribute("connection"); Statement stmt = conn.createStatement(); String sql = "INSERT INTO books VALUES('"+isbn+"','" + title +"','" + author +"',"+price +")"; stmt.executeUpdate(sql); return mapping.findForward(SUCCESS); }catch (SQLException ex) { System.out.println("Error " + ex); } return null; }



92

12.5 การพฒนาไฟล' ApplicationResource.properties

ไฟล5 ApplicationResource.properties เป�นไฟล5ท�โปรแกรม Struts จะอ/านค/าคงท�ต/างๆท�เราก.าหนดข,�น ซ,�งในท�น�ได�ก.าหนดข�อความท�เก�ยวก�บ error message และ title ไว� โดยมข��นตอนการพ�ฒนาด�งน�

1. เล�อกหน�าต/าง Projects แล�วขยายแทป StrutDBWeb > Source Packages > com.myapp.struts

2. ด�บเบ0�ลคล0;กเล�อกไฟล5 ApplicationResource.properties

3. ในหน�าต/าง Editor ให�เพ0�มข�อความด�งน�error.isbn.required=Please enter correct ISBNerror.title.required=Please enter correct Titleerror.author.required=Please enter correct author error.price.required=Price must greater than zerotitle.message=Add a new Book


12.6 การพฒนาโปรแกรม Init.java และ Thankyou.html

โปรแกรม Init.java เป�นโปรแกรมประเภท ServletContextListener เพ��อเช��อมต/อก�บฐานข�อม#ลเม��อเร0�มต�น แล�วเก�บออปเจ�ค connection ไว�ภายใน ServletContext โดยมข��นตอนการพ�ฒนาเช/นเดยวก�บการพ�ฒนาโปรแกรม Init.java ในแบบฝ�กห�ดการพ�ฒนาโปรแกรม Servlet โดยใช�คลาสประเภท Listener และจะต�องมการแก�ไขไฟล5 context.xml และ web.xml ด�งแบบฝ�กห�ดด�งกล/าว

โปรแกรม Thankyou.html เป�นหน�าเว�บเพจท�จะแสดงเม��อ โปรแกรมได�ใส/ข�อม#ลลงฐานข�อม#ลเรยบร�อยแล�ว โดยโปรแกรมน�จะม source code เช/นเดยวก�บโปรแกรม Thankyou.html ในแบบฝ�กห�ดการพ�ฒนาโปรแกรมเว�บเพ��อต0ดต/อก�บฐานข�อม#ล

12.7 การพฒนาไฟล' Struts-config.xml

ไฟล5 Struts-config.xml เป�นไฟล5ในการควบค1มการท.างานของโปรแกรม Struts ซ,�งในท�น�จะใช�ในการก.าหนดล.าด�บการท.างานของเว�บ (Navigation Rule) โดยมข��นตอนการพ�ฒนาด�งน�

1. เล�อกหน�าต/าง Projects แล�วขยายแทป StrutDBApp > Configuration Files

2. ด�บเบ0�ลคล0;กเล�อกไฟล5 Struts-config.xml

3. ในหน�าต/าง Editor คล0;กขวาแล�วเล�อก Struts > Add Forward

4. ในไดอะล�อก Add Forward ก.าหนด Forward Name: เป�น success ส/วน Forward To: เป�น Resource File: /Thankyou.html และ Location เป�น Action : /AddBook โดยจะได�ไดอะล�อกด�งร#ปท� 12.5


93

ร�ปท�� 12.5 การก�าหนดค-า Add Forward

5. กดป16ม Add และกดป16ม Save จะมค.าส��งใน struts-config.xml เพ0�มข,�นมาด�งน�

<action-mappings> <action input="/AddBook.jsp" name="BookActionForm" path="/AddBook" scope="session" type="com.myapp.struts.AddBookAction"> <forward name="success" path="/Thankyou.html"/> </action>

</action-mappings>


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

2. Run โปรแกรม StrutDBApp ท��งน�ต�องท.าการร�น MySQL Database Server ก/อน 3. เล�อก URL ของ Web Browser เป�น http://localhost:8080/StrutDBApp/AddBook.jsp ให�เรา

ทดลองใส/ข�อม#ลด�งร#ปท� 12.6


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

94

ร�ปท�� 12.6 ต�วอย-างการป+อนข�อม�ลเข�า Table ช��อ Books

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

5. เราสามารถท�จะด#ข�อม#ลท�ป%อนเข�าไปได� โดยไปท�หน�าต/าง Runtime ของโปรแกรม NetBeans แล�วเล�อกค.าส��ง View Data.. จาก Table ท�ช��อ Books


95

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


โปรแกรมในบทน�จะเป�นการพ�ฒนาโปรแกรม Web Application โดยใช� JSF Framework ท��งน�จะเป�นการปร�บปร1งโปรแกรมเว�บเพ��อต0ดต/อก�บฐานข�อม#ล เพ��อปร�บปร1งส/วน Web User Interface โดยจะท.าให�ผ#�ใช�สามารถท�จะ Validate Data ท�ป%อนข�อม#ลได� และเปล�ยนแปลงว0ธการอ/านพาราม0เตอร5โดยใช� Java Server Faces (JSF) Framework

ข��นตอนในการพ�ฒนาโปรแกรม1. สร�างโปรเจ�ค JSFDBApp

2. พ�ฒนาโปรแกรม JSF Managed Bean

3. พ�ฒนาโปรแกรม Validator

4. พ�ฒนาโปรแกรม AddBook.jsp

5. ก.าหนด Page Navigation

6. ก.าหนด Error Messages

7. ก.าหนด JNDI Name

8. พ�ฒนาโปรแกรม Init.java และ Thankyou.html

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


เราจะเร0�มต�นสร�างโปรแกรม Web Base Application โดยใช� JSF Framework โดยการสร�าง Project

ใหม/ข,�นมาใน NetBeans ซ,�งมข��นตอนด�งน�




3. ก.าหนด Project Name เป�น JSFDBApp แล�วเล�อก Project Location เป�น Director ท�เราต�องการจะเก�บไฟล5ไว� จากน��นเล�อก Server เป�น Apache Tomcat 6.0.18 จากน��นกด Next

4. ในช/อง Frameworks ให�เล�อก Java Server Faces จากน��นกด Finish


96

13.2 การพฒนาโปรแกรม JSF Managed Bean

JSF Framework จะใช�โปรแกรม Java Bean ในการเช��อมโยงค/าพาราม0เตอร5ส.าหร�บโปรแกรม JSP หร�อ Servlet ภายใน Framework โปรแกรม JSF Managed Bean จะเป�นโปรแกรม Java ทมค/า attribute สอดคล�องก�บช��อพาราม0เตอร5ท�จะป%อน และจะมเมธอด getter และ setter ท�สอดคล�องก�บ attribute ด�งกล/าว ซ,�งในแบบฝ�กห�ดน�จะก.าหนดให�ผ#�ใช�ต�องป%อนพาราม0เตอร5ท�มช��อต/างๆ ด�งน�

● isbn เป�นชน0ด String

● title เป�นชน0ด String

● author เป�นชน0ด String

● price เป�นชน0ด float ท�มค/าเป�นมากกว/า 0.0

และจะต�องพ�ฒนาโปรแกรม JSF Managed Bean โดยมข��นตอนด�งน�

1. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด JSFDBApp จากน��นเล�อกค.าส��ง New > Other..

2. ในไดอะล�อก New File ให�เล�อก Categories ทช��อ JavaServer Faces ซ,�งโปรแกรมก�จะแสดง File

Types ต/างๆภายใต� Category น� ให�เราเล�อก JSF Managed Bean แล�วกด Next

3. ก.าหนด Class Name เป�น BookBean และ Package เป�น bean ส/วนค/าอ��นๆให�คลตามท�ก.าหนดไว� ด�งร#ปท� 13.1 แล�วกด Finish

ร�ปท�� 13.1 การก�าหนดค-า JSF Managed Bean


97

4. เขยน source code โดยเพ0�ม attribute ภายในคลาส BookBean ด�งน�String isbn;String title;String author;float price;

5. ท.าการ encapsulate attribute โดยคล0;กขวาภายในหน�าต/าง editor ของ source code แล�วเล�อก Refactor > Encapsulate Field..

6. ในไดอะล�อก Encapsulate Fields ให�คงค/าท�เล�อกไว�ท1ก Field ตามท�โปรแกรมก.าหนดไว�แล�วแล�วกดป16ม Refactor

7. กดป16ม Save โปรแกรมจะม Source code ด�ง Listing ท� 13.1

8. เล�อกไฟล5 faces-config.xml จะเห�นค.าส��งด�งน�

<managed-bean> <managed-bean-name>BookBean</managed-bean-name> <managed-bean-class>bean.BookBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean>

Listing ท� 13.1 โปรแกรม BookBean.java

package bean;

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


public void setIsbn(String isbn) { this.isbn = isbn; }





98


public float getPrice() { return price; }

public void setPrice(float price) { this.price = price; } }

13.3 การพฒนาโปรแกรม PriceValidator.java

โปรแกรม PriceValidator.java เป�นโปรแกรม JSF Validator ท�พ�ฒนาข,�นมาเพ��อตรวจสอบความถ#กต�องของข�อม#ลราคาหน�งส�อท�ผ#�ใช�ป%อนเข�ามาว/าจะต�องมค/ามากกว/า 0.0 โปรแกรมน�จะต�อง implements

อ0นเตอร5เฟสช��อ javax.faces.validator.Validator และจะต�องม�การปร�บปร'งไฟล� faces-

config.xml เพ��อระบ1ช !อคลาส PriceValidator ว"าเป6น Validator แบบหน:!ง ข��นตอนการพ�ฒนาโปรแกรมน�มด�งน�

1. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด JSFDBApp จากน��นเล�อกค.าส��ง New > Java Class...

2. ก.าหนด Class Name เป�น PriceValidator และ Package เป�น validator แล�วกด Finish

3. ให�เพ0�มค.าส��ง implements Validator ในการประกาศคลาส ด�งน� public class PriceValidator implements Validator

4. กด Alt+Shift+F เพ��อการ Fix Imports โดยให�เล�อกคลาส javax.faces.validator.Validator

5. ใช� Hint เพ��อท�จะ implements เมธอดต/างๆของอ0นเตอร5เฟส Validator ด�งร#ป

6. ให�แก�ไข source code ในเมธอด validate() ด�งน�

public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException {

Float priceObj = (Float) value; boolean flag = true; try { float price = priceObj; if (price < 0) {


99

flag = false; } } catch(ArithmeticException ex) { flag = false; } if (!flag) { FacesMessage message = new FacesMessage(); message.setDetail("Price is not valid - The price must greater than 0.0"); message.setSummary("Email not valid - The price must greater than 0.0"); message.setSeverity(FacesMessage.SEVERITY_ERROR); throw new ValidatorException(message); } }


8. เล�อกไฟล5 faces-config.xml ซ,�งอย#/ภายใต�แทป Configuration Files แล�วเพ0�มข�อความภายในแท�ก </faces-config> ด�งน�

<validator> <validator-id>validator.PriceValidator</validator-id> <validator-class>validator.PriceValidator</validator-class> </validator>


13.4 การพฒนาโปรแกรม AddBook.jsp

โปรแกรม AddBook.jsp เป�นโปรแกรม JSP ท�ใช� Tags ของ JSF Framework เพ��อแสดงหน�าเว�บเพจให�ผ#�ใช�กรอกข�อม#ล โดยจะแสดงผลเช/นเดยวก�บหน�าเว�บเพจ addBook.html ในโปรแกรม Web Base Database

Application ในแบบฝ�กห�ดท�ผ/าน โดยจะมข��นตอนการพ�ฒนาด�งน�

1. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด JSFDBApp จากน��นเล�อกค.าส��ง New > Other..

2. ในไดอะล�อก New File ให�เล�อก Categories ทช��อ JavaServer Faces ซ,�งโปรแกรมก�จะแสดง File

Types ต/างๆภายใต� Category น� ให�เราเล�อก JSF JSP Page แล�วกด Next

3. ก.าหนด JSP File Name: เป�น AddBook แล�วกด Finish

4. ภายใน Source code ของโปรแกรม AddBook.jsp จะมการประกาศ tag libraries ด�งน�โดยอ�ตโนม�ต0

<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %><%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>

5. แก�ไขข�อความใน tag ท�ช��อ <title> และ <h1> เป�น Add a new Book

6. ในส/วนของฟอร5ม เราจะใช� JSF tag โดยให�ลาก ป16ม JSF Form ในหน�าต/าง Palette มาไว�ใน source

code โปรแกรม NetBeans จะแสดงไดอะล�อก Insert JSF Form ให�เล�อกช/อง Empty Form แล�วกด


100

OK7. หล�งจากน��นให�เขยน code โดยใช� คอมโพเนนท5 inputText และ commandButton โดยจะได� source

code ด�งน�

<f:view> ... <h:form> ISBN : <h:inputText value="#{BookBean.isbn}" required="true" id="isbn" size="15"/> <h:message for="isbn" /> <BR> Title : <h:inputText value="#{BookBean.title}" required="true" id="title" size="50"/> <h:message for="title" /><BR> Author : <h:inputText value="#{BookBean.author}" required="true" id="author" size="50"/> <h:message for="author" /> <BR> Price : <h:inputText value="#{BookBean.price}" required="true" id="price" size="10" > <f:validator validatorId="validator.PriceValidator" /></h:inputText> <h:message for="price" /> <BR> <h:commandButton value="Submit" action="submit" /> </h:form>

.... </f:view>


13.5 การก/าหนด Page Navigation

JSF Framework จะก.าหนดล.าด�บการท.างานของเว�บเพจต/างๆ (Page Navigation) โดยการก.าหนด configuration ในไฟล5 faces-config.xml ในท�น�จะก.าหนดให�โปรแกรม AddBook.jsp เรยก url ช��อ /addBook.do เม��อกดป16ม Submit ซ,�งการแก�ไขไฟล5 faces-config.xml จะมข��นตอนการพ�ฒนาด�งน�

1. เล�อกไฟล5 faces-config.xml ซ,�งอย#/ภายใต�แทป Configuration Files

2. คล0;กขวาในหน�าต/าง Editor เล�อกแทป XML แล�วเล�อก Java ServerFaces > Add Navigation Rule

3. ในไดอะล�อก Add Navigation Rule ให�ก.าหนดค/า Rule From View: เป�น /AddBook.jsp แล�วกดป16ม Add

4. คล0;กขวาในหน�าต/าง Editor แล�วเล�อก Java ServerFaces > Add Navigation Case

5. ในไดอะล�อก Add Navigation Case ให�ก.าหนดค/า From View: เป�น /AddBook.jsp ค/า From

Outcome: เป�น submit และ To View: เป�น /addBook.do แล�วกดป16ม Add

6. ไฟล5 faces-config.xml จะมค.าส��งเพ0�มด�งน�


101

<navigation-rule> <description> </description> <from-view-id>/AddBook.jsp</from-view-id> <navigation-case> <from-outcome>submit</from-outcome> <to-view-id>/addBook.do</to-view-id> </navigation-case>

</navigation-rule>7. และถ�าเล�อกแทป PageFlow จะเห�นความส�มพ�นธ5ของไฟล5ด�งร#ปท� 13.2

ร�ปท�� 13.2 การแสดง PageFlow

13.6 การก/าหนด Error Message

JSF Framework ก.าหนดให�ไฟล5 Message.properties ท.าหน�าท�ในการแสดงข�อความเม��อข�อม#ลท�ผ#�ใช�ป%อนไม/สอดคล�องก�บเง��อนไขท�ก.าหนดไว� ไฟล5 Message.properties จะอย#/ในแพคเก�จ javax.faces ซ,�งเราสามารถท�จะเรยกด#ได�โดยการขยายแทป Libraries > jsf-impl.jar > javax.faces ในกรณท�เราต�องการจะก.าหนด Error Message เองเราจะต�องสร�างไฟล5 property ข,�นมาใหม/ โดยจะมข��นตอนการพ�ฒนาด�งน�

1. เล�อกหน�าต/าง Projects แล�วคล0;กขวาท�โหนด JSFDBApp จากน��นเล�อกค.าส��ง New => File/Folder..


102

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

3. ในไดอะล�อก New Properties File ก.าหนด File Name: เป�น MyMessage และ Folder: เป�น src/java/properties

4. ในหน�าต/าง editor ให�แก�ไขไฟล5 MyMessages.properties โดยเพ0�มข�อความด�งน� javax.faces.component.UIInput.REQUIRED=Please enter a value for this field.


6. เล�อกไฟล5 faces-config.xml ซ,�งอย#/ภายใต�แทป Configuration Files แล�วเพ0�มข�อความด�งน�

<application> <message-bundle>properties.MyMessages</message-bundle> </application>


13.7 การพฒนาโปรแกรม Thankyou.html, error.html และ Init.java

โปรแกรม Thankyou.html เป�นหน�าเว�บเพจท�จะแสดงเม��อ โปรแกรมได�ใส/ข�อม#ลลงฐานข�อม#ลเรยบร�อยแล�ว โดยโปรแกรมน�จะม sourcecode เช/นเดยวก�บโปรแกรม Thankyou.html ในแบบฝ�กห�ดการพ�ฒนา โปรแกรมเว�บเพ��อต0ดต/อก�บฐานข�อม#ล ส/วน error.html เป�นหน�าเว�บเพจท�จะแสดงเม��อ โปรแกรมไม/สามารถใส/ข�อม#ลลงฐานข�อม#ลได� โดยม sourcecode ด�ง Listing ท� 13.2

Listing ท� 13.2 โปรแกรม error.html

<html> <head> <title>Error!</title> </head> <body> <H1>Cannot Add!!</H1> </body></html>

โปรแกรม Init.java เป�นโปรแกรมประเภท ServletContextListener เพ��อเช��อมต/อก�บฐานข�อม#ลเม��อเร0�มต�น แล�วเก�บออปเจ�ค connection ไว�ภายใน ServletContext โดยมข��นตอนการพ�ฒนาเช/นเดยวก�บการพ�ฒนาโปรแกรม Init.java ในแบบฝ�กห�ดการพ�ฒนาโปรแกรม Servlet โดยใช�คลาสประเภท Listener

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

โปรแกรม AddBookServlet จะเป�นโปรแกรมท� JSF Frameworks เรยกใช�หล�งจากท�ผ#�ใช�กดป16ม Submit ในหน�า AddBook.jsp โปรแกรมน�จะม url เป�น /addBook.do และจะม sourcecode คล�ายก�บ


103

โปรแกรม AddBookServlet.java ในแบบฝ�กห�ดการพ�ฒนา โปรแกรมเว�บเพ��อต0ดต/อก�บฐานข�อม#ล แต/จะมค.าส��งอ/านค/าพาราม0เตอร5ท�ผ#�ใช�ป%อนเข�ามาแตกต/างจากเด0ม เพราะกรณน�จะใช�จาก attribute ของโปรแกรม JSF

Managed Bean ท�ช��อ BookBean ซ,�งเป�น attribute ท�เก�บไว�ใน request session โดยมค.าส��งด�งน�

BookBean obj = (BookBean) request.getAttribute("BookBean"); String isbn = obj.getIsbn(); String author = obj.getAuthor(); String title = obj.getTitle(); float price = obj.getPrice();

โปรแกรม AddBookServlet จะมข��นตอนในการพ�ฒนาเช/นเดยวก�บแบบฝ�กห�ดการพ�ฒนา โปรแกรมเว�บเพ��อต0ดต/อก�บฐานข�อม#ล และจะม source code ด�ง Listing ท� 13.3 โดยจะต�องก.าหนดให�ม URL pattern เป�น /addBook.do

Listing ท� 13.3 โปรแกรม AddBookServlet.java

package controller;

import bean.BookBean;import java.io.IOException;import java.io.PrintWriter;import java.sql.Connection;import java.sql.SQLException;import java.sql.Statement;import javax.servlet.*;import javax.servlet.http.*;

public class AddBookServlet extends HttpServlet { private Connection conn; public void init() { conn = (Connection) getServletContext().getAttribute("connection"); }

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


104

String title = obj.getTitle(); float price = obj.getPrice(); Statement stmt = conn.createStatement(); String sql = "INSERT INTO books VALUES('"+isbn+"','" + title +"','" + author +"',"+price +")"; int row = stmt.executeUpdate(sql); if (row == 1) {

response.sendRedirect(“Thankyou.html”); } else {

response.sendRedirect(“error.html”); } }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); } public String getServletInfo() { return "Short description"; }}


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

2. Run โปรแกรม JSFDBApp

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

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

5. เราสามารถท�จะด#ข�อม#ลท�ป%อนเข�าไปได� โดยไปท�หน�าต/าง Services ของโปรแกรม NetBeans แล�วเล�อกค.าส��ง View Data.. จาก Table ท�ช��อ books


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

105

Exercise 14 การพ�ฒนาโปรแกรมเว�บโดยใช� Visual JSF

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

แบบฝ�กห�ดน�จะเป�นการพ�ฒนาโปรแกรม JSF Frameworks โดยใช�โมด#ลของ NetBeans ท�ช��อ Visual

Web JavaServer Faces ซ,�งช/วยท.าให�เราสามารถพ�ฒนาโปรแกรม Web Application ได�โดยง/ายในร#ปแบบ Drag and Drop และท.าให�เราเขยน source code น�อยลง


เราจะเร0�มต�นสร�างโปรแกรม Web Base Application โดยใช� JSF Framework โดยการสร�าง Project

ใหม/ข,�นมาใน NetBeans ซ,�งมข��นตอนด�งน�




3. ก.าหนด Project Name เป�น HelloVisualWebApp แล�วเล�อก Project Location เป�น Director ท�เราต�องการจะเก�บไฟล5ไว� จากน��นเล�อก Server เป�น GlassFish V2 จากน��นกด Next

4. ในช/อง Frameworks ให�เล�อก Visual Web JavaServer Faces จากน��นกด Finish [ในกรณท�ไม/ม Visual JSF Framework ให�เล�อก เราจะต�องท.าการต0ดต��ง Visual JSF Plugin ของ NetBeans ก/อน]

14.2 การพฒนาโปรแกรม HelloWeb

โปรแกรม HelloWeb เป�นโปรแกรมท�จะพ�ฒนาข,�นในโปรเจ�ค HelloVisualWebApp โดยต�องการจะให�มหน�าจอส/วนต0ดต/อผ#�ใช�ด�งร#ปท� 14.1 โดยผ#�ใช�สามารถป%อนข�อความใน TextField และเม��อกดป16ม Say

Sawaddee โปรแกรมจะแสดงข�อความบนต.าแหน/ง Static Text โดยมข��นตอนการพ�ฒนาโปรแกรมด�งน�


106

ร�ปท�� 14.1 การสร�างหน�าเว�บเพจ JSF โดยใช� Visual Editor

1. ในโปรเจ�ค HelloVisualWebApp ให�เล�อกไฟล5 Page1.jsp หน�าต/าง Editor จะแสดงไฟล5น�ในโหมด Design

2. ในหน�าต/าง Properties ให�ก.าหนดค/าของ Title เป�น Hello Web ด�งร#ปท� 14.2

ร�ปท�� 14.2 การก�าหนดค-า Properties ของ Page1

3. ในหน�าต"าง Palette ลากไอคอน Label ท�!อย/"ภายในโหนด Basic มาไว�ในหน�าต"างการออกแบบของ Page1.jsp แล�วแก�ไขข�อความเป6น Name: แล�วกด Enter (จะส�งเกตเห�นว"าค"าของ text ในหน�าต"าง Properties ส.าหร�บ label1:text จะถ/กเปล�!ยนเป6น Name: ด�วย)

4. ลากไอคอน TextField ท�!อย/"ภายในโหนด Basic มาไว�ในหน�าต"างการออกแบบของ Page1.jsp ในต.าแหน"งด�งร/ปท�!แสดงข�างต�น แล�วแก�ไขข�อความเป6น Enter your name แล�วกด Enter

5. ในหน�าต"าง Properties ส.าหร�บ TextField1 ให�เปล�!ยนค"า id จาก textField1 เป6น nameTf

6. ให�ท.าการคล#;กขวาท�! nameTf แล�วเล อก Add Binding Attribute ด�งแสดงในร/ปท�! 14.3


107

ร�ปท�� 14.3 การใช�ค�าส��ง Add Binding Attribute

7. ลากไอคอน Button ท�!อย/"ภายในโหนด Basic มาไว�ในหน�าต"างการออกแบบของ Page1.jsp ในต.าแหน"งด�งร/ปท�!แสดงข�างต�น แล�วแก�ไขข�อความเป6น Say Sawaddee

8. ในหน�าต"าง Properties ส.าหร�บ Button ให�เปล�!ยนค"า id จาก button1 เป6น hiButton

9. ลากไอคอน Static Text ท�!อย/"ภายในโหนด Basic มาไว�ในหน�าต"างการออกแบบของ Page1.jsp ในต.าแหน"งด�งร/ปท�! 14.1

10. ในหน�าต"าง Properties ส.าหร�บ Static Text ให�เปล�!ยนค"า id จาก staticText1 เป6น hiText

11. ให�ท.าการคล#;กขวาท�! hiText แล�วเล อก Add Binding Attribute

12. ลากไอคอน Message Group ท�!อย/"ภายในโหนด Basic มาไว�ในหน�าต"างการออกแบบของ Page1.jsp

ในต.าแหน"งด�งร/ปท�! 14.1 (Message Group สามารถเอาไว�ใช�ในการแสดง Error Message)

13. ในหน�าต/าง editor ให�เล�อกแทป JSP เราจะเห�น sourcecode ของไฟล5 Page1.jsp ซ,�งจะม Tags ของ JSF อย#/ ให�ส�งเกตการเขยนโปรแกรมด�งกล/าว

ข��นตอนถ�ดมาจะเป�นการเขยน Source code เพ��อก.าหนดการท.างานของการกดป16ม Say Sawaddee โดยมข��นตอนการท.างานด�งน�

14. ในหน�าต/าง editor ให�กล�บมาเล�อกแทป Design แล�วกดด�บเบ0�ลคล0;กท�ป16ม Say Sawaddee

15. หน�าต/าง editor จะแสดงแทป Java และแสดง source code ในค.าส��ง action ของป16ม Say Sawaddee

ให�แก�ไข source code ด�งน�

public String hiButton_action() { String name = (String) nameTf.getText(); hiText.setText("Sawaddee " +name); return null; }


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


108

2. Run โปรแกรม HelloVisualWebApp

3. ทดลองป>อนข�อความลงใน Text Field จะได�ต�วอย"างผลล�พธ�ด�งร/ปท�! 14.4

ร�ปท�� 14.4 ผลล�พธ!การร�นโปรแกรม HelloVisualWebApp

14.4 การปรบปร�งโปรแกรม HelloWeb

ข��นตอนน�จะเป�นการปร�บปร1งโปรเจ�ค HelloVisualWebApp ให�ม Drop-Down List ท�น.าช��อมาจาก table ในฐานข�อม#ล โดยจะมหน�าจอส/วนต0ดต/อผ#�ใช�ด�งร#ปท� 14.5 และมข��นตอนการพ�ฒนาโปรแกรมด�งน�

ร�ปท�� 14.5 ส-วนต�ดต-อก�บผ��ใช�ของโปรแกรม VisualWebApp ท��จะปร�บปร1งใหม-


109

1. ในโปรเจ�ค HelloVisualWebApp ให�เล อกไฟล� Page1.jsp หน�าต"าง Editor จะแสดงไฟล�น�&ในโหมด Design

2. ลบ TextField ออก แล�วลากไอคอน Drop Down List ท�!อย/"ภายในโหนด Basic มาแทนท�!3. ในหน�าต"าง Properties ส.าหร�บ Drop Down List ให�เปล�!ยนค"า id จาก dropDown1 เป6น

nameDropDown4. ให�ท.าการคล#;กขวาท�! nameDropDown แล�วเล อก Add Binding Attribute

5. ในหน�าต"าง Services ขยายโหนด Databases แล�วคล#;กขวาท�!โหนด jdbc:mysql://localhost:3306/test

แล�วเล อก Connect เพ !อเช !อมต"อฐานข�อม/ล6. ขยายโหนด Tables จะเห�น table ท�!ช !อ books ซ:!งสร�างมาในแบบฝ8กห�ดการเช !อมต"อก�บ MySQL

Database ด�งร/ปท�! 14.6

ร�ปท�� 14.6 การแสดง Table ท��ช��อ books

7. ลากไอคอนของ table ท�!ช !อ books ไปลงใน Drop Down List

8. คล#;กขวาท�! Drop Down List แล�วเล อก3 Bind to Data

9. ในไดอะล�อก Bind to Data เล อก Value field: เป6น books.author และ Display field: เป6น books.author ด�งร/ปท�! 14.7 แล�วกดป'<ม OK


110

ร�ปท�� 14.7 การก�าหนดค-า Bind to Data

10. กดด�บเบ0�ลคล0;กท�ป16ม Say Sawaddee หน�าต/าง editor จะแสดงแทป Java ให�แก�ไข source code ด�งน�

public String hiButton_action() { String name =(String)nameDropDown.getSelected(); hiText.setText("Sawaddee " + name); return null; }

11. ในแทป Java ให�แก�ไข source code ของเมธอด prerender() เพ��อก.าหนดค/าเร0�มต�นของการเล�อก Drop

Down List ด�งน�

public void prerender() { if (nameDropDown.getSelected() == null) { booksDataProvider.cursorFirst(); nameDropDown.setSelected ((String)booksDataProvider.getValue("books.author")); } }


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

2. Run โปรแกรม HelloVisualWebApp

3. ทดลองเล�อกช��อใน Drop Down List จะได�ต�วอย/างผลล�พธ5ด�งร#ป 14.8


111

ร�ปท�� 14.8 ต�วอย-างการร�นโปรแกรม HelloVisualWebApp


Technology

Java Web programming Using NetBeans