Your SlideShare is downloading. ×
Java Web Programming Using NetBeans 6.5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Java Web Programming Using NetBeans 6.5

7,128
views

Published on

Published in: Technology

19 Comments
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,128
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
811
Comments
19
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 1 Hand-on Exercises การเขยนโปรแกรมเวบ Java Servlet / JSP โดยใช GlassFish and NetBeans 6.5 Dr.Thanachart Numnonda and Asst Prof.Thanisa Kruawaisayawan July 2009 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 2. 2 สารบญ Exercise 1 การสรางโปรเจค Web Application และไฟล HTML........................................................................5 1.1 การสราง Web Application Project..................................................................................................5 1.2 การพฒนาโปรแกรม addCustomer.html................................................................................................9 1.3 การทดสอบโปรแกรม..........................................................................................................................11 Exercise 2 การเขยนโปรแกรม Java Servlet เพ!ออ"านค"าพาราม#เตอร.........................................................................13 2.1 การพฒนาโปรแกรม CustomerServlet.java.........................................................................................13 2.1.1 การอ"านค"าพาราม#เตอรจาก addCustomer.html ...............................................................................13 2.1.2 การแสดงรายละเอยดของค"าต"างๆ.......................................................................................................14 2.2 ข&นตอนการพฒนาโปรแกรม CustomerServlet.java ...............................................................................14 2.3 การทดสอบโปรแกรม..........................................................................................................................19 2.4 การปรบปร'งโปรแกรมเพ!อใหแสดงผลภาษาไทยและเรยกไฟล addCustomer.html เม!อเร#!มตน......................................20 Exercise 3 โปรแกรมเวบส.าหรบการท.าโพล........................................................................................................22 3.1 การพฒนาโปรแกรม vote.html............................................................................................................22 3.2 การพฒนาโปรแกรม VoteServlet.java................................................................................................23 3.2.1 ก.าหนดตวแปร counter และ lang ...............................................................................................24 3.2.2 อ"านค"าพาราม#เตอรต"างๆท!ส"งมาจาก vote.html และท.าการประมวลผล............................................................24 3.2.3 การแสดงผลการโหวต..................................................................................................................24 3.3 ข&นตอนการพฒนาโปรเจค Voter ...........................................................................................................25 3.4 การปรบปร'งโปรแกรม VoteServlet.java..............................................................................................29 3.4.1 ก.าหนดตวแปร voters................................................................................................................29 3.4.2 การอ"านหมายเลขไอพของผ/ใช..........................................................................................................29 Exercise 4 การเช!อมต"อกบ MySQL Database.............................................................................................32 4.1 การต#ดต&งโปรแกรมฐานขอม/ล MySQL....................................................................................................32 4.2 การสราง Database Connection.....................................................................................................32 4.3 การสรางตาราง books.......................................................................................................................35 4.4 การใชค.าส!ง SQL ใน NetBeans........................................................................................................37 Exercise 5 การพฒนาโปรแกมเวบเพ!อต#ดต"อกบฐานขอม/ล..........................................................................................39 5.1 การสราง Web Application Project................................................................................................39 5.2 การพฒนาโปรแกรม addBook.html....................................................................................................39 5.3 การพฒนาโปรแกรม Thankyou.html...................................................................................................41 5.4 การพฒนาโปรแกรม AddBookServlet.java.........................................................................................41 5.4.1 การอ"านค"าพาราม#เตอรจาก addBook.html ......................................................................................42 5.4.2 การเช!อมต"อกบฐานขอม/ล...............................................................................................................42 5.4.3 เพ#!มรายช!อหนงสอใหม"ลงในฐานขอม/ล ................................................................................................43 5.4.4 การเรยกเวบเพจ Thankyou.html ...............................................................................................43 5.5 ข&นตอนการพฒนาโปรแกรม AddBookServlet.java ...............................................................................45 5.6 ทดสอบโปรแกรม..............................................................................................................................47 Exercise 6 โปรแกรมเวบเพ!อสาธ#ตขอบเขตของออปเจค............................................................................................49 6.1 การพฒนาโปรแกรมเพ!อสาธ#ตขอบเขตของ Object แบบ Request .....................................................................49 6.1.1 ข&นตอนการพฒนาโปรแกรมเพ!อสาธ#ตขอบเขตของ Object แบบ Request ....................................................52 6.1.2 ข&นตอนการทดสอบโปรแกรมเพ!อสาธ#ตขอบเขตของ Object แบบ Request....................................................52 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 3. 3 6.2 การพฒนาโปรแกรมเพ!อสาธ#ตขอบเขตของ Object แบบ Session .....................................................................52 6.2.1 ข&นตอนการพฒนาโปรแกรมเพ!อสาธ#ตขอบเขตของ Object แบบ Session .....................................................55 6.2.2 ข&นตอนการทดสอบโปรแกรมเพ!อสาธ#ตขอบเขตของ Object แบบ Session ...................................................55 6.3 การพฒนาโปรแกรมเพ!อสาธ#ตขอบเขตของ Object แบบ Application................................................................55 6.3.1 ข&นตอนการพฒนาโปรแกรมเพ!อสาธ#ตขอบเขตของ Object แบบ Application...............................................58 6.3.2 ข&นตอนการทดสอบโปรแกรมเพ!อสาธ#ตขอบเขตของ Object แบบ Application..............................................58 Exercise 7 การพฒนาโปรแกรม Servlet โดยใชคลาสประเภท Web Listener..........................................................59 7.1 การพฒนาโปรแกรม Init.java..............................................................................................................59 7.2 การปรบปร'งโปรแกรม AddBookServlet.java .....................................................................................64 7.3 ทดสอบโปรแกรม..............................................................................................................................65 Exercise 8 การพฒนาโปรแกรม Servlet Filter ..............................................................................................67 8.1 การพฒนาโปรแกรม Servlet Filter......................................................................................................67 8.2 การเขยนหนา Login.........................................................................................................................68 8.2.1 ข&นตอนการพฒนาโปรแกรม ...........................................................................................................69 8.3 การเขยน Servlet Filter..................................................................................................................70 8.3.1 ข&นตอนการพฒนาโปรแกรม ...........................................................................................................71 8.4 การเขยนโปรแกรม ShowServlet .......................................................................................................73 8.4.1 ข&นตอนการพฒนาโปรแกรม ...........................................................................................................73 8.5 ข&นตอนการทดสอบโปรแกรม .................................................................................................................74 Exercise 9 การเขยนโปรแกรม JSP เพ!อแสดงผลลพธ............................................................................................75 9.1 การพฒนาโปรแกรม hello.jsp.............................................................................................................75 9.2 การพฒนาโปรแกรม viewBook.jsp....................................................................................................76 9.2.1 การก.าหนด Tag Library .........................................................................................................76 9.2.2 การก.าหนด Datasource ..........................................................................................................76 9.2.3 การใชค.าส!ง sql:query .............................................................................................................77 9.2.4 การใชค.าส!ง c:forEach เพ!อแสดงผล ..............................................................................................77 Exercise 10 การพฒนาโปรแกรมเวบ Online Book Store................................................................................80 10.1 การพฒนาโปรแกรม selectBooks.jsp................................................................................................80 10.2 การพฒนาโปรแกรม Book.java.........................................................................................................84 3 10.3 การพฒนาโปรแกรม Cart.java...........................................................................................................85 3 10.4 การพฒนาโปรแกรม ProcessSelection.java......................................................................................86 10.5 การพฒนาโปรแกรม Init.java ...........................................................................................................88 10.6 การพฒนาโปรแกรม viewCart.jsp.....................................................................................................88 10.7 ข&นตอนการทดสอบโปรแกรม ...............................................................................................................89 Exercise 11 การสราง Custom Tags ส.าหรบโปรแกรม JSP...............................................................................92 11.1 การพฒนาโปรแกรม hello.jsp............................................................................................................92 11.2 การพฒนาโปรแกรม helloTag.jsp.....................................................................................................94 11.2.1 สราง Tag Library Descriptor.............................................................................................94 11.2.2 สรางไฟล Tag Handler.........................................................................................................95 11.2.3 เขยนโปรแกรม helloTag.jsp...................................................................................................97 11.3 การพฒนาโปรแกรม helloJSTL.jsp...................................................................................................98 11.4 การพฒนาโปรแกรม helloTagFile.jsp...............................................................................................98 11.4.1 สราง Tag File....................................................................................................................99 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 4. 4 11.4.2 เขยนโปรแกรม helloTagFile.jsp...........................................................................................100 Exercise 12 การพฒนาโปรแกรมเวบโดยใช Strut Framework .........................................................................101 12.1 การสราง Web Application Project............................................................................................101 12.2 การพฒนาโปรแกรม BookActionForm.java...................................................................................101 12.3 การพฒนาโปรแกรม AddBook.jsp..................................................................................................106 12.4 การพฒนาโปรแกรม AddBookAction.java.....................................................................................107 12.5 การพฒนาไฟล ApplicationResource.properties..........................................................................109 12.6 การพฒนาโปรแกรม Init.java และ Thankyou.html...........................................................................109 12.7 การพฒนาไฟล Struts-config.xml.................................................................................................109 12.8 การทดสอบโปรแกรม......................................................................................................................110 Exercise 13 การพฒนาโปรแกรมเวบโดยใช JSF Framework............................................................................112 13.1 การสราง Web Application Project............................................................................................112 13.2 การพฒนาโปรแกรม JSF Managed Bean........................................................................................113 13.3 การพฒนาโปรแกรม PriceValidator.java........................................................................................115 13.4 การพฒนาโปรแกรม AddBook.jsp..................................................................................................116 13.5 การก.าหนด Page Navigation......................................................................................................117 13.6 การก.าหนด Error Message.........................................................................................................118 13.7 การพฒนาโปรแกรม Thankyou.html, error.html และ Init.java.........................................................119 13.8 การพฒนาโปรแกรม AddBookServlet.java.....................................................................................119 13.9 การทดสอบโปรแกรม......................................................................................................................121 Exercise 14 การพฒนาโปรแกรมเวบโดยใช Visual JSF....................................................................................122 14.1 การสราง Web Application Project............................................................................................122 14.2 การพฒนาโปรแกรม HelloWeb......................................................................................................122 14.3 การทดสอบโปรแกรม......................................................................................................................126 14.4 การปรบปร'งโปรแกรม HelloWeb....................................................................................................127 14.5 การทดสอบโปรแกรม......................................................................................................................129 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 5. 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 ทเรา การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 6. 6 ตองการจะเกบไฟล5ไว ดงร#ปท 1.2 รปท 1.2 การกาหนดชอโปรเจค 4. จากนนใหเลอก Server เปน Apache Tomcat 6.0.18 ดงร#ปท 1.3 รปท 1.3 การเลอก Server ทจะตดตงโปรเจค การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 7. 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 เพอสามารถใหเขยนโปรแกรมไดง/ายข,น การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 8. 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 9. 9 หมายเหต1 หมายเลขพอร5ตโดยพนฐานจะเปน 8080 ยกเวนว/าจะก.าหนดหมายเลขอน รปท 1.6 ผลลพธ!ทไดจากการรนโปรแกรม addCustomer.html การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 10. 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"); การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 11. 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 12. 12 รปท 2.1 การเลอกไฟล!ประเภท Servlet 3. ก.าหนด Class Name: เปน CustomerServlet และก.าหนด Package เปน servlet ดงร#ปท 2.2 รปท 2.2 การกาหนดชอ Servlet 4. กด Next ก.าหนด URL Pattern(s): เปน /addCustomer.do ดงร#ปท 2.3 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 13. 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 2.3 การทดสอบโปรแกรม 1. ท.าการ Build และ Deploy โปรแกรม WebApp 2. Run โปรแกรม WebApp 3. ท Web Browser เปลยน URL เปน http://localhost:8080/WebApp/addCustomer.html 4. ทดลองป%อนขอม#ลดงร#ป 5. โปรแกรมจะแสดงผลดงร/ปท! 2.4 และ 2.5 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 14. 14 รปท 2.4 การป+อนขอมลหนา addCustomer.html รปท 2.5 ผลลพธ!จากการเรยกโปรแกรม CustomerServlet การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 15. 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"); การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 16. 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> การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 17. 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>"); การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 18. 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); } การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 19. 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 ท การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 20. 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(); การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 21. 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; import javax.servlet.*; import javax.servlet.http.*; 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(); } การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 22. 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); } } การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 23. 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 24. 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น root 4. ส.าหรบ Password: ใหใส"ค"าตามท!ก.าหนดไวในตอนต#ดต&งโปรแกรม MySQL ซ:!งในท!น&จะมค"าเป6น root การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 25. 25 5. ท.าการเลอก Remember password โดยไดอะลอกจะแสดงผลไดดงร/ปท! 4.3 รปท 4.3 การกาหนดค-าในการเชอมต-อ Database 6. กดป'<ม OK เม!อไดอะลอกแสดงขอความใหเลอก database schema.ใหกดป'<ม OK อกคร&งซ:!งตอนน&ถา ขยายแทบ Database ในหนาต"าง Runtime จะเหน Connection ใหม"ดงร/ปท! 4.4 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 26. 26 รปท 4.4 การแสดงการเชอมต-อ 4.3 การสรางตาราง books ในท!น&จะก.าหนดใหสราง Table ท!ช!อ books โดยใหอย/"ภายใต Schema ท!ช!อ test โดย Table น&ก.าหนด ใหม Column ต"างๆ ดงตารางท! 4.1 ตารางท! 4.1Table books ชอ ชนด ขนาด isbn varchar 20 title varchar 70 author varchar 50 price float - เราจะใชโปรแกม NetBeans ในการท!จะสราง Table น&โดยมข&นตอนต"างๆ ดงน& 1. ในหนาต"าง Runtime ขยายแทบ Databases > jdbc:mysql://localhost:3306/test แลวจะเหนรายการ Tables การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 27. 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 28. 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 การเรยกคาสงดขอมลในตาราง การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 29. 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 5.1 การสราง Web Application Project เราจะเร0มตนสรางโปรแกรม Web-Base Database โดยการสราง Project ใหม/ข,นมาใน NetBeans ซ,งม ขนตอนดงน 1. เลอกเมน# File > New Project.. 2. ในไดอะลอก New Project ใหเลอก Categories เปน Java Web และเลอก Projects เปน Web 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 30. 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> การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 31. 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 32. 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); การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 33. 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; การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 34. 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); การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 35. 35 } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } } 5.5 ขนตอนการพฒนาโปรแกรม AddBookServlet.java เราสามารถทจะพฒนาโปรแกรม AddBookServlet.java ตามขนตอนดงน 1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด WebBaseDB จากนนเลอกค.าสง New > Other... 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 36. 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 ใหดงน การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 37. 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 38. 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 39. 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 อนจะเปนค.าสงทมร#ปแบบ การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 40. 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.*; import javax.servlet.*; import javax.servlet.http.*; 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 doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 41. 41 } public String getServletInfo() { return "Short description"; } // </editor-fold> } Listing ท 6.2 โปรแกรม SecondServlet.java package servlet; import java.io.*; import java.net.*; import javax.servlet.*; import javax.servlet.http.*; public class SecondServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { String name = (String) request.getAttribute("RequestName"); out.println(name); } finally { out.close(); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } public String getServletInfo() { return "Short description"; } // </editor-fold> } การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 42. 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 5. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด ScopeDemo จากนนเลอกค.าสง New > Servlet 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ผลลพธ5 4. ทดลองรน 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”; การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 43. 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; import java.io.*; import java.net.*; import javax.servlet.*; import javax.servlet.http.*; public class FirstSessionServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { String name = "Thanisa"; HttpSession session = request.getSession(); session.setAttribute("SessionName", name); } finally { out.close(); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 44. 44 } public String getServletInfo() { return "Short description"; } // </editor-fold> } Listing ท 6.4 โปรแกรม SecondSessionServlet.java package servlet; import java.io.*; import java.net.*; import javax.servlet.*; import javax.servlet.http.*; public class SecondSessionServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { HttpSession session = request.getSession(); String name = (String) session.getAttribute("SessionName"); out.println(name); } finally { out.close(); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } public String getServletInfo() { return "Short description"; } // </editor-fold> } การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 45. 45 6.2.1 ขนตอนการพฒนาโปรแกรมเพอสาธ0ตขอบเขตของ Object แบบ Session เราสามารถทจะพฒนาโปรแกรม ตามขนตอนดงน 1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด ScopeDemo จากนนเลอกค.าสง New > Servlet 2. ก.าหนด Class Name: เปน FirstSessionServlet.java และ Package เปน servlet แลวกด Finish 3. ในหนาต/าง Editor เขยน Source code ของ FirstSessionServlet.java ดง Listing ท 6.3 แลวเลอกค.า สง Save 4. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด ScopeDemo จากนนเลอกค.าสง New > Servlet 5. ก.าหนด Class Name: เปน SecondSessionServlet.java และ Package เปน servlet แลวกด Finish 6. ในหนาต/าง Editor เขยน Source code ของ SecondSessionServlet.java ดง Listing ท 6.4 แลวเลอก ค.าสง Save 6.2.2 ขนตอนการทดสอบโปรแกรมเพอสาธ0ตขอบเขตของ Object แบบ Session เราสามารถทจะทดสอบโปรแกรม ตามขนตอนดงน 1. ท.าการ Build และ Deploy โปรเจค ScopeDemo 2. ท.าการ Run โปรเจค ScopeDemo 3. ในโปรแกรม Web Browser เลอก url ทชอ http://localhost:8080/ScopeDemo/FirstSessionServlet 4. ทดลองรน url ทชอ http://localhost:8080/ScopeDemo/SecondSessionServlet แลวสงเกตผลลพธ5 5. ทดลองป@ด 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 ของออปเจค การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 46. 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; import java.io.*; import java.net.*; import javax.servlet.*; import javax.servlet.http.*; package servlet; import java.io.*; import java.net.*; import javax.servlet.*; import javax.servlet.http.*; public class FirstAppServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { String name = "Thanisa"; ServletContext context = getServletContext(); การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 47. 47 context.setAttribute("AppName", name); } finally { out.close(); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } public String getServletInfo() { return "Short description"; } // </editor-fold> } Listing ท 6.6 โปรแกรม SecondAppServlet.java package servlet; import java.io.*; import java.net.*; import javax.servlet.*; import javax.servlet.http.*; public class SecondAppServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { ServletContext context = getServletContext(); String name = (String) context.getAttribute("AppName"); out.println(name); } finally { out.close(); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 48. 48 processRequest(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } public String getServletInfo() { return "Short description"; } // </editor-fold> } 6.3.1 ขนตอนการพฒนาโปรแกรมเพอสาธ0ตขอบเขตของ Object แบบ Application เราสามารถทจะพฒนาโปรแกรม ตามขนตอนดงน 1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด ScopeDemo จากนนเลอกค.าสง New > Servlet 2. ก.าหนด Class Name: เปน FirstAppServlet.java และ Package เปน servlet แลวกด Finish 3. ในหนาต/าง Editor เขยน Source code ของ FirstAppServlet.java ดง Listing ท 6.5 แลวเลอกค.าสง Save 4. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด ScopeDemo จากนนเลอกค.าสง New > Servlet 5. ก.าหนด Class Name: เปน SecondAppServlet.java และ Package เปน servlet แลวกด Finish 6. ในหนาต/าง Editor เขยน Source code ของ SecondAppServlet.java ดง Listing ท 6.6 แลวเลอกค.า สง Save 6.3.2 ขนตอนการทดสอบโปรแกรมเพอสาธ0ตขอบเขตของ Object แบบ Application เราสามารถทจะทดสอบโปรแกรม ตามขนตอนดงน 1. ท.าการ Build และ Deploy โปรเจค ScopeDemo 2. ท.าการ Run โปรเจค ScopeDemo 3. ในโปรแกรม Web Browser เลอก url ทชอ http://localhost:8080/ScopeDemo/FirstAppServlet 4. ทดลองรน url ทชอ http://localhost:8080/ScopeDemo/SecondAppServlet แลวสงเกตผลลพธ5 5. ทดลองป@ด Web Browser แลวเป@ดข,นมาใหม/แลวทดลองรน url ทชอ http://localhost:8080/ScopeDemo/SecondAppServlet ใหม/แลวสงเกตผลลพธ5 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 49. 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 เปนดงน 1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด WebBaseDB จากนนเลอกค.าสง New > Other... การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 50. 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 51. 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); การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 52. 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(); การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 53. 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 ทดสอบโปรแกรม 1. ท.าการ Build และ Deploy โปรแกรม WebBaseDB 2. Run โปรแกรม WebBaseDB ทงนตองท.าการรน MySQL Database Server ก/อน 6. โปรแกรมจะแสดงหนา addBook.html ใหเราใส/ขอม#ล :ซงเมอใส/ขอม#ลจะไดผลลพ5เช/นเดยวกบแบบ ฝกหดก/อน การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 54. 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 55. 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> การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 56. 56 Listing ท 8.2 โปรแกรม LoginServlet.java package controller; import java.io.*; import java.net.*; import javax.servlet.*; import javax.servlet.http.*; public class LoginServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 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(); } } 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"; } } 8.2.1 ขนตอนการพฒนาโปรแกรม เราสามารถทจะพฒนาโปรแกรมนตามขนตอนดงน การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 57. 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); การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 58. 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); } } 8.3.1 ขนตอนการพฒนาโปรแกรม เราสามารถทจะพฒนาโปรแกรม ตามขนตอนดงน 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 59. 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 60. 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(); } } 8.4.1 ขนตอนการพฒนาโปรแกรม เราสามารถทจะพฒนาโปรแกรม ตามขนตอนดงน 1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด FilterDemo จากนนเลอกค.าสง New > Servlet.. 2. ก.าหนด Class Name: เปน ShowServlet.java และ Package เปน view แลวกด Next 3. ก.าหนด URL Pattern(s) เปน /show.do ดงร#ปท 8.5 แลวกด Finish การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 61. 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 62. 62 Exercise 9 การเขยนโปรแกรม JSP เพอแสดงผลลพธ เนอหาทตองศกษากอน การพฒนาโปรแกรมเวบเพอต0ดต/อกบฐานขอม#ล แบบฝกหดนจะเปนการพฒนาโปรแกรม 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 โปรแกรม WebBaseDB E 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> การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 63. 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 เพอใหเราสามารถก.าหนดการเชอมต/อ กบฐานขอม#ล และก.าหนดค/าไวในตวแปรตามชอทก.าหนด การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 64. 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> ส.าหรบขนตอนการพฒนาโปรแกรมน มดงน 1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด WebBaseDB จากนนเลอกค.าสง New > Other... 2. ในไดอะลอก New File ใหเลอก Categories ทชอ Web ซ,งโปรแกรมกจะแสดง File Types ต/างๆ ภาย ใต Category น ใหเราเลอก JSP แลวกด Next 3. ก.าหนด JSP File Name: เปน viewBook แลวกด Finish 4. ขยายโหนด WebBaseDB คล0;กขวาทโหนด Libraries เลอกค.าสง Add Libraries.. การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 65. 65 5. ในไดอะลอก Add Library เลอก JSTL1.1 แลวกดป16ม Add Library ดงร#ปท 9.2 รปท 9.2 การเพม Library ในโปรเจค 6. ในหนาต/าง editor ใหแกไข sourcecode ของไฟล5 viewBook.jsp ใหเปนไปตาม Listing ท 9.2 7. ท.าการ Build และ Deploy โปรแกรม WebBaseDB 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 <%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 66. 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> การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 67. 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 Application แลวกด Next 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 68. 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> การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 69. 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 การพฒนาโปรแกรม 1Book.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; การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 70. 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 การพฒนาโปรแกรม 1Cart.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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 71. 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 ดงน การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 72. 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(); การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 73. 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 4. กดป16ม Save Listing ท 10.5 โปรแกรม viewCart.jsp <%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 74. 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 75. 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 และมขนตอนการพฒนาโปรแกรมดงน 1. เลอกเมน# File > New Project.. 2. ในไดอะลอก New Project ใหเลอก Categories เปน Java Web และเลอก Projects เปน Web Application แลวกด Next 3. ก.าหนด Project Name: เปน JSPDemo แลวเลอก Project Location: เปน Director ทเราตองการจะ เกบไฟล5ไว จากนนเลอก Server เปน Apache Tomcat 6.0.18 แลวกด Finish 4. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด JSPDemo จากนนเลอกค.าสง New > Other... 5. ในไดอะลอก New File ใหเลอก Categories ทชอ Web ซ,งโปรแกรมกจะแสดง File Types ต/างๆ ภาย ใต Category น ใหเราเลอก JSP แลวกด Next 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 76. 76 รปท 11.1 ผลลพธ!ของโปรแกรม hello.jsp Listing ท 11.1 โปรแกรม hello.jsp <%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Demo</title> </head> <body> <h1>JSP Demo</h1> <% String name = request.getParameter("name"); %> <% for (int i = 0; i < 10; i++) { %> Hello <%= name %> <br> <% } %> </body> </html> การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 77. 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 จะมขนตอนดงน 1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด JSPDemo จากนนเลอกค.าสง New > Other... 2. ในไดอะลอก New File ใหเลอก Categories ทชอ Web ซ,งโปรแกรมกจะแสดง File Types ต/างๆ ภาย ใต Category น ใหเราเลอก Tag Library Descriptor แลวกด Next 3. ก.าหนด TLD Name: เปน MyTags และค/า Folder เปน WEB-INFtlds ส/วนค/าอนๆ ใหเปนตามทตง ไวดงร#ปท 11.2 แลวกด Finish รปท 11.2 การก#าหนด Tag Library Descriptor 4. หนาต/าง Editor จะแสดงไฟล5ทชอ MyTags.tld ทอย#/ในโฟลเดอร5 Web PagesWEB-INFtlds การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 78. 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 จะม ขนตอนดงน 1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด JSPDemo จากนนเลอกค.าสง New > Other... 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 79. 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>"); การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 80. 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 จะมขนตอนดงน 1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด JSPDemo จากนนเลอกค.าสง New > Other... 2. ในไดอะลอก New File ใหเลอก Categories ทชอ Web ซ,งโปรแกรมกจะแสดง File Types ต/างๆ ภาย ใต Category น ใหเราเลอก JSP แลวกด Next 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> การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 81. 81 11.3 การพฒนาโปรแกรม helloJSTL.jsp โปรแกรม helloJSTL.jsp เปนโปรแกรม JSP ทท.างานเช/นเดยวกบโปรแกรมทผ/านมาแต/จะท.าการเรยก ใช JSP Standard Tag Library ในการพ0มพ5ขอความ Hello xxx ส0บครง แทนการเขยนค.าสง scriptlet โดย โปรแกรมนจะม source code ดง Listing ท 11.4 และจะมขนตอนการพฒนาโปรแกรมดงน 1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด JSPDemo จากนนเลอกค.าสง New > Other... 2. ในไดอะลอก New File ใหเลอก Categories ทชอ Web ซ,งโปรแกรมกจะแสดง File Types ต/างๆ ภาย ใต Category น ใหเราเลอก JSP แลวกด Next 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 โดยมขนตอนการพฒนาดงน การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 82. 82 11.4.1 สราง Tag File ไฟล5นจะท.าหนานเปนตวจดการ Tag โดยเขยนเปนโปรแกรม JSP และมขนตอนการพฒนาดงน 1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด JSPDemo จากนนเลอกค.าสง New > Other... 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> การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 83. 83 11.4.2 เขยนโปรแกรม helloTagFile.jsp โปรแกรม helloTagFile.jsp จะเรยกใช Tag ทชอ NameTagFile โดยจะม source code ดง Listing ท การสรางโปรแกรม helloTagFile.jsp จะมขนตอนดงน 1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด JSPDemo จากนนเลอกค.าสง New > Other... 2. ในไดอะลอก New File ใหเลอก Categories ทชอ Web ซ,งโปรแกรมกจะแสดง File Types ต/างๆ ภาย ใต Category น ใหเราเลอก JSP แลวกด Next 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> การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 84. 84 Exercise 12 การพฒนาโปรแกรมเวบโดยใช Strut Framework เนอหาทตองศกษากอน การพฒนาโปรแกรมเวบเพอต0ดต/อกบฐานขอม#ล แบบฝกหดนจะเปนการพฒนาโปรแกรม 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 12.1 การสราง Web Application Project เราจะเร0มตนสรางโปรแกรม WebBase Database โดยการสราง Project ใหม/ข,นมาใน NetBeans ซ,งม ขนตอนดงน 1. เลอกเมน# File > New Project.. 2. ในไดอะลอก New Project ใหเลอก Categories เปน Java Web และเลอก Projects เปน Web Application แลวกด Next 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ทป%อนมาเพอประมวลผลต/อไป การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 85. 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 86. 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 87. 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 88. 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 String getIsbn() { return isbn; } public void setIsbn(String isbn) { this.isbn = isbn; การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 89. 89 } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getAuthor() { return author; } public void setAuthor(String author) { this.author = author; } public float getPrice() { return price; } public void setPrice(float price) { this.price = price; } } 12.3 การพฒนาโปรแกรม AddBook.jsp โปรแกรม AddBook.jsp เปนโปรแกรม JSP ทใช Tags ของ Strut Framework เพอแสดงหนาเวบเพจ ส.าหรบการกรอกขอม#ล โดยมขนตอนการพฒนาดงน 1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด StrutDBApp จากนนเลอกค.าสง New > Other... 2. ในไดอะลอก New File ใหเลอก Categories ทชอ Web ซ,งโปรแกรมกจะแสดง File Types ต/างๆ ภาย ใต Category น ใหเราเลอก JSP แลวกด Next 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" %> <%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 90. 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 91. 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; } 6. กดป16ม Save การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 92. 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 ISBN error.title.required=Please enter correct Title error.author.required=Please enter correct author error.price.required=Price must greater than zero title.message=Add a new Book 4. กดป16ม Save 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 93. 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> 12.8 การทดสอบโปรแกรม 1. ท.าการ Build และ Deploy โปรแกรม StrutDBApp 2. Run โปรแกรม StrutDBApp ทงนตองท.าการรน MySQL Database Server ก/อน 3. เลอก URL ของ Web Browser เปน http://localhost:8080/StrutDBApp/AddBook.jsp ใหเรา ทดลองใส/ขอม#ลดงร#ปท 12.6 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 94. 94 รปท 12.6 ตวอย-างการป+อนขอมลเขา Table ชอ Books 4. เมอกดป16ม Add โปรแกรมกจะใส/ขอม#ลลงใน Database 5. เราสามารถทจะด#ขอม#ลทป%อนเขาไปได โดยไปทหนาต/าง Runtime ของโปรแกรม NetBeans แลวเลอก ค.าสง View Data.. จาก Table ทชอ Books การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 95. 95 Exercise 13 การพฒนาโปรแกรมเวบโดยใช JSF Framework เนอหาทตองศกษากอน การพฒนาโปรแกรมเวบเพอต0ดต/อกบฐานขอม#ล โปรแกรมในบทนจะเปนการพฒนาโปรแกรม 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 13.1 การสราง Web Application Project เราจะเร0มตนสรางโปรแกรม Web Base Application โดยใช JSF Framework โดยการสราง Project ใหม/ข,นมาใน NetBeans ซ,งมขนตอนดงน 1. เลอกเมน# File > New Project.. 2. ในไดอะลอก New Project ใหเลอก Categories เปน Java Web และเลอก Projects เปน Web Application แลวกด Next 3. ก.าหนด Project Name เปน JSFDBApp แลวเลอก Project Location เปน Director ทเราตองการจะ เกบไฟล5ไว จากนนเลอก Server เปน Apache Tomcat 6.0.18 จากนนกด Next 4. ในช/อง Frameworks ใหเลอก Java Server Faces จากนนกด Finish การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 96. 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 97. 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 String getIsbn() { return isbn; } public void setIsbn(String isbn) { this.isbn = isbn; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getAuthor() { return author; } การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 98. 98 public void setAuthor(String author) { this.author = author; } 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) { การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 99. 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); } } 7. กดป16ม Save 8. เลอกไฟล5 faces-config.xml ซ,งอย#/ภายใตแทป Configuration Files แลวเพ0มขอความภายในแทก </faces-config> ดงน <validator> <validator-id>validator.PriceValidator</validator-id> <validator-class>validator.PriceValidator</validator-class> </validator> 9. กดป16ม Save 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 แลวกด การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 100. 100 OK 7. หลงจากนนใหเขยน 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> 8. กดป16ม Save 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มดงน การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 101. 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.. การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 102. 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. 5. กดป16ม Save 6. เลอกไฟล5 faces-config.xml ซ,งอย#/ภายใตแทป Configuration Files แลวเพ0มขอความดงน <application> <message-bundle>properties.MyMessages</message-bundle> </application> 7. กดป16ม Save 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 คลายกบ การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 103. 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(); การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 104. 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"; } } 13.9 การทดสอบโปรแกรม 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 105. 105 Exercise 14 การพฒนาโปรแกรมเวบโดยใช Visual JSF เนอหาทตองศกษากอน - แบบฝกหดนจะเปนการพฒนาโปรแกรม JSF Frameworks โดยใชโมด#ลของ NetBeans ทชอ Visual Web JavaServer Faces ซ,งช/วยท.าใหเราสามารถพฒนาโปรแกรม Web Application ไดโดยง/ายในร#ปแบบ Drag and Drop และท.าใหเราเขยน source code นอยลง 14.1 การสราง Web Application Project เราจะเร0มตนสรางโปรแกรม Web Base Application โดยใช JSF Framework โดยการสราง Project ใหม/ข,นมาใน NetBeans ซ,งมขนตอนดงน 1. เลอกเมน# File > New Project.. 2. ในไดอะลอก New Project ใหเลอก Categories เปน Java Web และเลอก Projects เปน Web Application แลวกด Next 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 โดยมขนตอนการพฒนาโปรแกรมดงน การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 106. 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 107. 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; } 14.3 การทดสอบโปรแกรม 1. ท.าการ Build และ Deploy โปรแกรม HelloVisualWebApp การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 108. 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งใหม- การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 109. 109 1. ในโปรเจค HelloVisualWebApp ใหเลอกไฟล Page1.jsp หนาต"าง Editor จะแสดงไฟลน&ในโหมด Design 2. ลบ TextField ออก แลวลากไอคอน Drop Down List ท!อย/"ภายในโหนด Basic มาแทนท! 3. ในหนาต"าง Properties ส.าหรบ Drop Down List ใหเปล!ยนค"า id จาก dropDown1 เป6น nameDropDown 4. ใหท.าการคล#;กขวาท! 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 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 110. 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")); } } 14.5 การทดสอบโปรแกรม 1. ท.าการ Build และ Deploy โปรแกรม HelloVisualWebApp 2. Run โปรแกรม HelloVisualWebApp 3. ทดลองเลอกชอใน Drop Down List จะไดตวอย/างผลลพธ5ดงร#ป 14.8 การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan
  • 111. 111 รปท 14.8 ตวอย-างการรนโปรแกรม HelloVisualWebApp การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan