Java Web programming Using NetBeans

Transcript

• 1. 1 Hand-on Exercises การเขยนโปรแกรมเวบ Java Servlet / JSP โดยใช GlassFish and NetBeans 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 การทดสอบโปรแกรม..........................................................................................................................11Exercise 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 เม!อเร#!มตน......................................20Exercise 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 การอ"านหมายเลขไอพของผ/ใช..........................................................................................................29Exercise 4 การเช!อมต"อกบ MySQL Database.............................................................................................32 4.1 การต#ดต&งโปรแกรมฐานขอม/ล MySQL....................................................................................................32 4.2 การสราง Database Connection.....................................................................................................32 4.3 การสรางตาราง books.......................................................................................................................35 4.4 การใชค.าส!ง SQL ใน NetBeans........................................................................................................37Exercise 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 ทดสอบโปรแกรม..............................................................................................................................47Exercise 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..............................................58Exercise 7 การพฒนาโปรแกรม Servlet โดยใชคลาสประเภท Web Listener..........................................................59 7.1 การพฒนาโปรแกรม Init.java..............................................................................................................59 7.2 การปรบปรงโปรแกรม AddBookServlet.java .....................................................................................64 7.3 ทดสอบโปรแกรม..............................................................................................................................65Exercise 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 ข&นตอนการทดสอบโปรแกรม .................................................................................................................74Exercise 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 เพ!อแสดงผล ..............................................................................................77Exercise 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 ข&นตอนการทดสอบโปรแกรม ...............................................................................................................89Exercise 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...........................................................................................100Exercise 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 การทดสอบโปรแกรม......................................................................................................................110Exercise 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 การทดสอบโปรแกรม......................................................................................................................121Exercise 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.html1.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 โครงสรางไฟล!ของโปรเจค WebApp1.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.htmlListing ท 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 Browser2.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. 112.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.22.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. 152.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 Browser3.1 การพฒนาโปรแกรม vote.html โปรแกรม vote.html เปนหนาเวบทใหผ#ใชสามารถทจะท.าการโหวตเลอกภาษาคอมพ0วเตอร5ได โดยเมอผ#ใชกดป16ม Vote โปรแกรมเวบกจะไปท.าการเรยก url ทชอ processVote โปรแกรมนมหนาเวบดงร#ปท 3.1 รปท 3.1 การแสดงผลของโปรแกรม vote.htmlและม sourcecode ดง Listing ท 3.1Listing ท 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.2Listing ท 3.2 โปรแกรม VoteServlet.javaimport 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 ตวอย-างผลลพธ!ของโปรเจค Voter3.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.3Listing ท 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.java5.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 แลวกด Finish5.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 สาหรบการเขยนคาสง HTMLListing ท 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.htmlListing ท 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. 325.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.3Listing ท 5.3 โปรแกรม AddBookServlet.javapackage 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. 34public 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.4Listing ท 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.2Listing ท 6.1 โปรแกรม FirstServlet.javapackage 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.javapackage 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. 426.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 แลวเลอกค.าสง Save6.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 มาจาก FirstServlet6.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.4Listing ท 6.3 โปรแกรม FirstSessionServlet.javapackage 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.javapackage 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. 456.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 แลวเลอก ค.าสง Save6.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 ใหม/แลวสงเกตผลลพธ56.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.6Listing ท 6.5 โปรแกรม FirstAppServlet.javapackage 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.javapackage 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 แลวเลอกค.า สง Save6.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.java7.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.1Listing ท 7.1 โปรแกรม Init.javapublic 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.2Lisitng ท 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 จากโปรแกรม ServletFilter ใดๆ โดยการก.าหนดค/าใน 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 HTTPError 401 (This request requires HTTP authentication . ) ส1ดทายจะมการเขยนโปรแกรม Java Servlet ทชอ ShowServlet เพอแสดงขอความว/า HelloWorldเพอแสดงใหเหนว/าโปรแกรมจะถ#กดกโดย LoginFilter8.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 เวบหนา LoginListing ท 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. 56Listing ท 8.2 โปรแกรม LoginServlet.javapackage 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 แลวเลอกค.าสง Save8.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 แลวเลอกค.าสง Save8.4 การเข%ยนโปรแกรม ShowServlet โปรแกรม ShowServlet จะท.าหนาทเพอแสดงขอความว/า Hello World และม source code ของเมธอดprocessRequest() ดง Listing ท 8.4Listing ท 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 แลวเลอกค.าสง Save8.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 เพอแสดงขอม#ลจากฐานขอม#ล ออกทางโปรแกรม WebBrowser โดยจะเปนการพฒนาโปรเจค 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. โปรแกรมจะแสดงผลดงร#ปท 1Listing ท 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.jsp9.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:///test9.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.jspListing ท 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.jspListing ท 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ม SaveListing ท 10.2 โปรแกรม Book.javapackage 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. 71Listing ท 10.3 โปรแกรม Cart.javapackage 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 แลวเลอกค.า สง SaveListing ท 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ม SaveListing ท 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ทชอ name11.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.jspListing ท 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. 7711.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. 7811.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 ของไฟล! NameTagHandlerListing ท 11.2 โปรแกรม NameTagHandler.javapackage 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.jspListing ท 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. 8111.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.jspListing ท 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. 8211.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.5Listing ท 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. 8311.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.jspListing ท 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.xml12.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 จากนนกด Finish12.2 การพฒนาโปรแกรม BookActionForm.java Struts Framework จะมโปรแกรม Java ทจะตองพฒนาอย#/สองโปรแกรมคอ FormBean และ ActionClass โดยส/วน 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. 88Listing ท 12.1 โปรแกรม BookActionForm.javapackage 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ม SaveListing ท 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. 9212.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ม Save12.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.java13.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. 9613.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.javapackage 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ม Save13.4 การพฒนาโปรแกรม AddBook.jsp โปรแกรม AddBook.jsp เปนโปรแกรม JSP ทใช Tags ของ JSF Framework เพอแสดงหนาเวบเพจใหผ#ใชกรอกขอม#ล โดยจะแสดงผลเช/นเดยวกบหนาเวบเพจ addBook.html ในโปรแกรม Web Base DatabaseApplication ในแบบฝกหดทผ/าน โดยจะมขนตอนการพฒนาดงน 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ม Save13.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 การแสดง PageFlow13.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ม Save13.7 การพฒนาโปรแกรม Thankyou.html, error.html และ Init.java โปรแกรม Thankyou.html เปนหนาเวบเพจทจะแสดงเมอ โปรแกรมไดใส/ขอม#ลลงฐานขอม#ลเรยบรอยแลว โดยโปรแกรมนจะม sourcecode เช/นเดยวกบโปรแกรม Thankyou.html ในแบบฝกหดการพฒนาโปรแกรมเวบเพอต0ดต/อกบฐานขอม#ล ส/วน error.html เปนหนาเวบเพจทจะแสดงเมอ โปรแกรมไม/สามารถใส/ขอม#ลลงฐานขอม#ลได โดยม sourcecode ดง Listing ท 13.2Listing ท 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 โดยใชคลาสประเภท Listener13.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 ของโปรแกรม JSFManaged 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.doListing ท 13.3 โปรแกรม AddBookServlet.javapackage 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 ทชอ VisualWeb 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ม SaySawaddee โปรแกรมจะแสดงขอความบนต.าแหน/ง 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 ผลลพธ!การรนโปรแกรม HelloVisualWebApp14.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