Hand-on Exercise Java Web Programming

3,565 views
3,492 views

Published on

Hand-on Exercise Java Web Programming for the course in February 2013

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,565
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
234
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Hand-on Exercise Java Web Programming

  1. 1. IMC Institute Java Web Programming Using Cloud Platform By Associate Professor Dr. Thanachart Numnonda & Associate Professor Dr. Thanisa Kruawaisayawan Date 18 – 22 Feb 2013
  2. 2. 1 Hand-on Exercises การเขียนโปรแกรมเว็บ Java Servlet / JSP โดยใช้ Eclipse and TomCatAssoc.Prof.Dr.Thanachart Numnonda Software Park Thailand andAsst.Prof.Dr.Thanisa KruawaisayawanKing Mongkuts Institute of Technology Ladkrabang February 2013 การเขียนโปรแกรม Java Servlet / JSP
  3. 3. 2 สารบัญExercise 1 การสร้างโปรเจ็ค Web Application และไฟล์ HTML..........................................................................5 1.1 การติดตั้ง Web Server...................................................................................................................... 5 1.2 การสร้าง Web Application Project.................................................................................................. 7 1.3 การพัฒนาโปรแกรม addCustomer.html................................................................................................ 9 1.4 การทดสอบโปรแกรม...........................................................................................................................13Exercise 2 การเขียนโปรแกรม Java Servlet เพื่ออ่านค่าพารามิเตอร์..........................................................................15 2.1 การพัฒนาโปรแกรม CustomerServlet.java......................................................................................... 15 2.1.1 การอ่านค่าพารามิเตอร์จาก addCustomer.html ............................................................................... 15 2.1.2 การแสดงรายละเอียดของค่าต่างๆ.......................................................................................................16 2.2 ขั้นตอนการพัฒนาโปรแกรม CustomerServlet.java ................................................................................17 2.3 การทดสอบโปรแกรม...........................................................................................................................19Exercise 3 โปรแกรมเว็บสำหรับการทำโพล......................................................................................................... 21 3.1 โปรแกรม vote.html....................................................................................................................... 21 3.2 การพัฒนาโปรแกรม VoteServlet.java................................................................................................. 21 3.2.1 กำหนดตัวแปร counter และ lang ................................................................................................22 3.2.2 อ่านค่าพารามิเตอร์ต่างๆ ที่ส่งมาจาก vote.html และทำการประมวลผล........................................................... 22 3.2.3 การแสดงผลการโหวต...................................................................................................................22 3.3 ขั้นตอนการพัฒนาโปรเจ็ค Voter ............................................................................................................ 23 3.4 การปรับปรุงโปรแกรม VoteServlet.java............................................................................................... 28 3.4.1 กำหนดตัวแปร voters................................................................................................................28 3.4.2 การอ่านหมายเลขไอพีของผู้ใช้.......................................................................................................... 28Exercise 4 การเชื่อมต่อกับ MySQL Database............................................................................................. 30 4.1 การเชื่อมต่อ MySQL โดยโปรแกรม MySQL Workbench....................................................................... 30 4.2 การสร้างตาราง books....................................................................................................................... 31 4.3 การใช้คำสั่ง SQL ใน MySQL WorkBench........................................................................................33Exercise 5 การพัฒนาโปรแกรมเว็บ เพื่อติดต่อกับฐานข้อมูล........................................................................................ 35 5.1 การ Config Apache Tomcat ให้สามารถใช้งาน JDBC Driver...............................................................35 5.2 การสร้าง Web Application Project................................................................................................ 36 5.3 การพัฒนาโปรแกรม addBook.html..................................................................................................... 36 5.4 การพัฒนาโปรแกรม thankyou.html.................................................................................................... 37 5.5 การพัฒนาโปรแกรม AddBookServlet.java......................................................................................... 38 5.5.1 การอ่านค่าพารามิเตอร์จาก addBook.html ......................................................................................38 5.5.2 การเชื่อมต่อกับฐานข้อมูล...............................................................................................................38 5.5.3 เพิ่มรายชื่อหนังสือใหม่ลงในฐานข้อมูล ................................................................................................ 39 5.5.4 การเรียกเว็บเพจ thankyou.html ................................................................................................ 39 5.6 ขั้นตอนการพัฒนาโปรแกรม AddBookServlet.java ................................................................................40 5.7 ทดสอบโปรแกรม...............................................................................................................................41Exercise 6 การพัฒนาโปรแกรมเว็บเพื่อติดต่อฐานข้อมูล MongoDB.......................................................................... 43 6.1 การติดตั้ง MongoDB..................................................................................................................... 43 6.2 การใช้ MongoDB......................................................................................................................... 44 6.3 การเขียนโปรแกรม Java Servlet เพื่อเชื่อมต่อกับ MongoDB.......................................................................45 6.4 ทดสอบโปรแกรม...............................................................................................................................47Exercise 7 โปรแกรมเว็บเพื่อสาธิตขอบเขตของออปเจ็ค............................................................................................ 48 7.1 การพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request ..................................................................... 48 7.1.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request .....................................................50 7.1.2 ขั้นตอนการทดสอบโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request.................................................... 50 7.2 การพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Session ......................................................................51Thanachart Numnonda and Thanisa Kruawaisayawan
  4. 4. 3 7.2.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Session ......................................................53 7.2.2 ขั้นตอนการทดสอบโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Session .................................................... 53 7.3 การพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Application................................................................ 54 7.3.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Application................................................................. 55 7.3.2 ขั้นตอนการทดสอบโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Application.............................................. 56Exercise 8 การพัฒนา WebBase DB โดยคลาสประเภท Web Listener............................................................... 57 8.1 การพัฒนาโปรแกรม Init.java.............................................................................................................. 57 8.2 การปรับปรุงโปรแกรม AddBookServlet.java ......................................................................................60 8.3 ทดสอบโปรแกรม...............................................................................................................................61Exercise 9 การพัฒนาโปรแกรม Servlet Filter ...............................................................................................62 9.1 การพัฒนาโปรแกรม Servlet Filter.......................................................................................................62 9.2 การเขียนหน้า Login......................................................................................................................... 63 9.3 การเขียน Servlet Filter.................................................................................................................. 64 9.4 การเขียนโปรแกรม ShowServlet ........................................................................................................67 9.5 ขั้นตอนการทดสอบโปรแกรม ..................................................................................................................68Exercise 10 การเขียนโปรแกรม JSP เพื่อแสดงผลลัพธ์...........................................................................................69 10.1 การพัฒนาโปรแกรม hello.jsp........................................................................................................... 69 10.2 การพัฒนาโปรแกรม viewBook.jsp................................................................................................... 70 10.2.1 การกำหนด Tag Library........................................................................................................ 70 10.2.2 การกำหนด Datasource......................................................................................................... 70 10.2.3 การใช้คำสั่ง c:forEach เพื่อแสดงผล ............................................................................................ 71Exercise 11 การพัฒนาโปรแกรมเว็บ Online Book Store................................................................................. 73 11.1 การพัฒนาโปรแกรม selectBooks.jsp.................................................................................................73 11.2 การพัฒนาโปรแกรม Book.java......................................................................................................... 80 11.3 การพัฒนาโปรแกรม Cart.java........................................................................................................... 83 11.4 การพัฒนาโปรแกรม ProcessSelection.java....................................................................................... 84 11.5 การพัฒนาโปรแกรม Init.java ............................................................................................................87 11.6 การพัฒนาโปรแกรม viewCart.jsp..................................................................................................... 87 11.7 ขั้นตอนการทดสอบโปรแกรม ................................................................................................................88Exercise 12 การสร้าง Custom Tags สำหรับโปรแกรม JSP................................................................................89 12.1 การพัฒนาโปรแกรม hello.jsp............................................................................................................ 89 12.2 การพัฒนาโปรแกรม helloJSTL.jsp................................................................................................... 95 12.3 การพัฒนาโปรแกรม helloTagFile.jsp................................................................................................96 12.3.1 สร้าง Tag File.....................................................................................................................96 12.3.2 เขียนโปรแกรม helloTagFile.jsp..............................................................................................97 12.4 การพัฒนาโปรแกรม helloTag.jsp...................................................................................................... 97 12.4.1 สร้างไฟล์ Java ClassTag Handler.........................................................................................98 12.4.2 สร้าง Tag Library Descriptor........................................................................................... 101 12.4.3 เขียนโปรแกรม helloTag.jsp.................................................................................................. 103Exercise 13 การพัฒนาโปรแกรมเว็บโดยใช้ Struts 2 Framework...................................................................... 104 13.1 การสร้างโปรเจ็ค StrutsDBApp โดยใช้ Struts 2 Framework..............................................................104 13.2 การพัฒนาโปรแกรม addBook.jsp [View]....................................................................................... 105 13.3 การพัฒนาโปรแกรม AddBookAction.java [Model]....................................................................... 108 13.4 การพัฒนาโปรแกรม success.jsp [View].......................................................................................... 111 13.5 การแก้ไขไฟล์ struts.xml............................................................................................................... 111 13.6 การทดสอบโปรแกรม....................................................................................................................... 111Exercise 14 การพัฒนาโปรแกรมเว็บโดยใช้ Spring Framework........................................................................ 113 14.1 การสร้างโปรเจ็ค SpringDBApp โดยใช้ Spring Framework.............................................................. 113 14.2 พัฒนาไฟล์ Controller................................................................................................................. 114 14.3 พัฒนาไฟล์ JSP............................................................................................................................114 การเขียนโปรแกรม Java Servlet / JSP
  5. 5. 4 14.4 พัฒนาไฟล์ mvc-dispatcher-servlet.xml...................................................................................... 115 14.5 พัฒนาไฟล์ web.xml.................................................................................................................... 115 14.6 การทดสอบโปรแกรม.......................................................................................................................116 14.7 พัฒนาโปรแกรมเพื่อเชื่อมต่อกับฐานข้อมูล................................................................................................. 116Exercise 15 การ Authentication โดยใช้ Tomcat .....................................................................................121 15.1 สร้าง Web Application Project................................................................................................ 121 15.2 เพิ่ม User ของ Tomcat Web Server........................................................................................... 121 15.3 การ Config ไฟล์ web.xml ของ Web Application ที่ต้องการใช้ Tomcat user .....................................122 15.4 การทดสอบโปรแกรมแบบ Basic Authenticate...................................................................................124 15.5 การปรับปรุงโปรแกรมเพื่อให้ใช้ Login Form........................................................................................ 125 15.6 การทดสอบโปรแกรม แบบ Form Authenticate.................................................................................. 126 15.7 การปรับปรุงโปรแกรม เพื่อใช้ Authenticate โดยอ่านจาก Database MySQL.............................................. 126 15.8 การทดสอบโปรแกรม แบบ Database Authenticate............................................................................ 127Exercise 16 การพัฒนาโปรแกรมเว็บโดยใช้ Google App Engine...................................................................... 128 16.1 การติดตั้งและเริ่มต้นการใช้งาน Google App Engine............................................................................ 128 16.2 การสร้าง Web Application Project............................................................................................ 129 16.3 การพัฒนาโปรแกรม Servlet เพื่อรันบน Google App Engine................................................................ 133 16.4 การพัฒนาโปรแกรมเพื่อติดต่อกับ Google Account................................................................................135Exercise 17 การพัฒนาโปรแกรม Google App Engine เพื่อติดต่อกับฐานข้อมูล โดยใช้ JPA........................................ 138 17.1 การสร้างโปรเจ็ค Google App Engine............................................................................................138 17.2 การพัฒนาโปรแกรม Book Entity Class..........................................................................................138 17.3 การพัฒนาโปรแกรม EMF.java........................................................................................................ 139 17.4 การพัฒนาโปรแกรม addBook.html................................................................................................. 140 17.5 การพัฒนาโปรแกรม OnlineBookServlet เพื่อรันบน Google App Engine............................................140 17.6 การพัฒนาโปรแกรมเพื่อแสดงข้อมูลใน Books ......................................................................................... 142Thanachart Numnonda and Thanisa Kruawaisayawan
  6. 6. 5 Exercise 1 การสร้างโปรเจ็ค Web Application และไฟล์ HTML แบบฝึกหัดนี้จะเป็นการสร้างโปรเจ็ค Web Application และพัฒนาหน้าเว็บเพจเพื่อให้ผู้ใช้ป้อนข้อมูลของลูกค้า โดยพัฒนาด้วยภาษา HTML ซึ่งจะทำหน้าเป็นส่วนอินพุตของโปรแกรมเพื่อให้ผู้ใช้ป้อนข้อมูลผ่าน WebBrowser ทั้งนี้ในแบบฝึกหัดนี้จะใช้ Eclipse เป็นเครื่องมือในการพัฒนาโปรแกรมและจะใช้ Apache Tomcat v 6.0เป็น Web Serverขั้นตอนในการพัฒนาโปรแกรม 1. การติดตั้ง Web Server 2. สร้างโปรเจ็ค Web Application 3. พัฒนาโปรแกรม addCustomer.html1.1 การติดตั้ง Web Server ขั้นตอนแรกจะต้องปรับกำหนด Perspective ของ Eclipse ให้เป็น Java EE โดยการเลือกคำสั่ง Windows >Open Perspective > Other ..จากนั้นเลือก Java EE ใน Dialog Box จะได้ Perspective ดังรูปที่ 1.1 รูปที่ 1.1 Perspective สำหรับ Java EE ขั้นตอนถัดไปจะเป็นการเพิ่ม Tomcat Web Server เพื่อให้ Eclipse สามารถควบคุมและ Deploy โปรแกรมลงได้ โดยมีขั้นตอนต่างๆ ดังรูปที่ 1.2 ดังนี้ ให้เลือกแทป Servers คลิ๊กขวาภายใน Window แล้วเลือก New → Server เลือกชื่อ Apache → Tomcat 6.0 Server (หรือ Version อื่น) และ Browse ไปยัง folder Tomcat ที่ติดตั้งไว้ จากนั้นกด OK และ Finish การเขียนโปรแกรม Java Servlet / JSP
  7. 7. 6 รูปที่ 1.2 การ Config Eclipse เพื่อให้รู้จัก TOMCAT Web Server เราจะเห็นหน้าต่าง Server มีชื่อ Web Server ที่เป็น Tomcat เพิ่มขึ้นมาซึ่งเราสามารถควบคุมการ Start/StopServer ได้โดยการคลิ๊กขวาที่ชื่อ Server โปรแกรมจะแสดงคำสั่งต่างๆ ขึ้นมาดังรูปที่ 1.3 รูปที่ 1.3 เมนูในการจัดการ Web ServerThanachart Numnonda and Thanisa Kruawaisayawan
  8. 8. 7 เราจำเป็นที่จะต้องกำหนดค่า Server Configuration ของ Tomcat โดยการเลือกแทป Server แล้วคลิ๊กที่Tomcat Server โปรแกรมจะแสดงข้อมูลต่างๆของ Server ให้เลือก Server Locations เป็น Use Tomcat Installationดังรูปที่ 1.4 รูปที่ 1.4 การกำหนดค่า Server Locations1.2 การสร้าง Web Application Project ขั้นตอนนี้จะเป็นสร้างโปรแกรม Web-Base Application โดยการสร้าง Project ใหม่ มีขั้นตอนดังนี้ 1. เลือกเมนู File → New → Project ในไดอะล็อก New Project ขยาย Folder ชื่อ Web และเลือก Dynamic Web Project ดังรูปที่ 1.5 รูปที่ 1.5 การสร้างโปรเจ็ค Web Application การเขียนโปรแกรม Java Servlet / JSP
  9. 9. 8 2. ให้กำหนด Project Name เป็น WebApp ส่วนการเก็บ File Eclipse จะใช้ Directory ที่ถามเมื่อครั้งเปิดขึ้นมาเป็น Default แต่ ถ้าต้องการระบุ ก็สามารถคลิกเครื่องหมายออก (Uncheck) แล้วทำการระบุ Directory ใหม่ได้ จากนั้นกด ปุ่ม Next ดังรูปที่ 1.6 รูปที่ 1.6 การกำหนดชื่อ Project 3. โปรแกรมจะแสดง Folder ที่เก็บ source code และ Output folder (ที่เก็บ Class file) คือ [directory ที่ใส่ก่อนรัน Eclipse]src และ [directory ที่ใส่ก่อนรัน Eclipse]buildclasses ดังรูปที่ 1.7 จากนั้นกด ปุ่ม Next รูปที่ 1.7 แสดงที่เก็บ source code และ Output directoryThanachart Numnonda and Thanisa Kruawaisayawan
  10. 10. 9 4. แสดง Context root และ Content directory ดังรูปที่ 1.8 กด Finish รูปที่ 1.8 แสดงชื่อ Context root และ Content directory1.3 การพัฒนาโปรแกรม addCustomer.html โปรแกรม addCustomer.html เป็นเว็บเพจที่ใช้แสดงฟอร์มสำหรับป้อนข้อมูลลูกค้า แล้ว นำไปบันทึกลงฐานข้อมูล customers โดยมีรูปแบบหน้าจอ HTML ที่ต้องสร้าง ดังรูปที่ 1.9 (ส่วนของโปรแกรมจะสร้างในแบบฝึกหัดถัดไป) รูปที่ 1.9 หน้าเว็บเพจ addCustomer.html การเขียนโปรแกรม Java Servlet / JSP
  11. 11. 10 ขั้นตอนการพัฒนาโปรแกรม addCustomer.html 1. เลือกหน้าต่าง Project แล้วคลิ๊กขวาที่โหนด WebApp เลือก New → HTML File ดังรูป 1.10 รูปที่ 1.10 การสร้างไฟล์ HTML 2. กำหนด HTML File Name: เป็น addCustomer แล้วกด Finish ดังรูป 1.11 รูปที่ 1.11 การสร้างและตั้งชื่อ File HTMLThanachart Numnonda and Thanisa Kruawaisayawan
  12. 12. 113. เขียน source code ทำได้ 2 รูปแบบคือ รูปแบบที่ 1 เขียนตาม Listing ที่ 1.1 Listing ที่ 1.1 โปรแกรม addCustomer.html <html><head><title> Add Customer</title></head> <body><H1> Add a new customer profile</H1> <form action="addCustomer.do" method="POST"> Customer ID : <input name="id" /> <br> Name: <input name="name" /> <br> Address: <textarea name="addr" rows="4" cols="20"></textarea> <br> Mobile: <input name="mobile" size="9" /> <br> Fax: <input name="fax" size="9" /> <br> E-mail: <input name="email" size="25" /> <br><br> <input type="submit" value="Add" /> </form> </body> </html> รูปแบบที่ 2 ให้เขียนหน้าจอได้ง่ายขึ้นสามารถที่จะลาก Icon ประเภท HTML Forms ที่อยู่ในหน้าต่าง Palette มาใส่ที่หน้าจอ Design ได้โดยไม่ต้องเขียน HTML ดังนี้ - ปิดหน้าจอ HTML เดิม - เลือกหน้าต่าง Project แล้วคลิ๊กขวาที่ File addCustomer.html - เลือก Open With และเลือกที่ Web Page Editor ดังรูป 1.12 รูปที่ 1.12 การเลือกเปิด HTML กับ Editor ที่เป็น Design view การเขียนโปรแกรม Java Servlet / JSP
  13. 13. 12 - คลิกเลือกพื้นที่ว่างส่วนบนของหน้าจอ เลือก Show และ Palette รูปที่ 1.13 การเรียกใช้ HTML Forms Icon ใน Palette Tools - จะได้ Tab ชื่อ Palette อยู่ที่หน้าจอด้านล่าง คลิกที่ HTML 4.0 จะมี Icons ให้ สามารถที่จะ Drag & Drop ขึ้นไปวางด้านบนสุด (ลำดับที่3 ดังรูปที่ 1.14) และปรับค่า Attribute ของ Object นั้นๆ ได้ โดยเลือกที่ Tab Properties (Tab อยู่ถัดไปทางขวา) รูปที่ 1.14 การ Drag and Drop Forms Icon ไปที่หน้า DesignThanachart Numnonda and Thanisa Kruawaisayawan
  14. 14. 131.4 การทดสอบโปรแกรม 1. ทำการติดตั้ง (Deploy) Web Project บน Tomcat WebServer โดยให้เลือกแทป Server แล้วคลิ๊กขวาที่ชื่อ Tomcat Server แล้วเลือกคำสั่ง Add and Remove ดังรูปที่ 1.15 รูปที่ 1.15 การ Drag and Drop Forms Icon ไปที่หน้า Design จากนั้นเลือก WebApp แล้ว กดปุ่ม Add เพื่อเพิ่มเข้าไปที่ Web Server และกด Finish ดังรูปที่ 1.16 รูปที่ 1.16 การ Deploy Project สู่ Web Application Server 2. Run โปรแกรม WebApp โดยคลิ๊กขวาที่ addCustomer.html → Run As → Run on Server ดังรูปที่ 1.17 รูปที่ 1.17 การรัน File ที่ต้องการ Test การเขียนโปรแกรม Java Servlet / JSP
  15. 15. 14 3. จะมีให้เลือกว่าจะให้รัน file นี้ที่ Server ไหน (กรณีเรานี้มี Server เดียว) กด Finish ดังรูปที่ 1.18 รูปที่ 1.18 การเลือก Web Application Server ที่จะใช้รัน 4. จะได้ผลลัพธ์ดังรูปที่ 1.19 รูปที่ 1.19 ผลลัพธ์ที่ได้จากการรัน File addCustomer.htmlหมายเหตุ สังเกตที่ท้าย hostname จะหมายเลขพอร์ต ซึ่งก็คือ port ที่ Tomcat Server ให้บริการอยู่ โดย Default จะเป็น 8080 ยกเว้นว่าจะกำหนดเป็นหมายเลขอื่นThanachart Numnonda and Thanisa Kruawaisayawan
  16. 16. 15 Exercise 2 การเขียนโปรแกรม Java Servlet เพื่ออ่านค่าพารามิเตอร์เนื้อหาที่ต้องศึกษาก่อน การสร้างโปรเจ็ค Web Application และสร้างไฟล์ HTML แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม Java Servlet เพื่อแสดงรายละเอียดของค่าพารามิเตอร์ที่ผู้ใช้ป้อนเข้ามาออกทางโปรแกรม Web Browser และแสดงผลการออกออกทาง Web Browser2.1 การพัฒนาโปรแกรม CustomerServlet.java โปรแกรม CustomerServlet.java เป็นโปรแกรมที่ถูกเรียกใช้โดย addCustomer.html เมื่อผู้ใช้กดปุ่ม Addโปรแกรมนี้จะทำหน้าที่นำค่าพารามิเตอร์ต่างๆ ที่ผู้ใช้ป้อนมาแสดงผล โดยมีขั้นตอนการทำงานดังนี้ 1. อ่านค่าพารามิเตอร์ต่างๆ ที่ส่งมาจาก addCustomer.html 2. แสดงรายละเอียดของค่าต่างๆ2.1.1 การอ่านค่าพารามิเตอร์จาก addCustomer.html เว็บเพจ addCustomer.html จะส่งข้อมูลของรายชื่อหนังสือใหม่ผ่านมาทางพารามิเตอร์ต่างๆ ดังนี้ ● id รหัสของลูกค้า ● name ชื่อลูกค้า ● addr ที่อยู่ลูกค้า ● mobile หมายเลขโทรศัพท์มือถือ ● fax หมายเลข fax ● email ของลูกค้า พารามิเตอร์ต่างๆ เหล่านี้จะถูกส่งผ่านโปรโตคอล Http และในโปรแกรมเราสามารถที่จะอ่านค่าพารา-มิเตอร์เหล่านี้ได้จากออปเจ็ค request โดยเรียกใช้เมธอด getParameter( ) ซึ่งโปรแกรมส่วนนี้จะมีคำสั่งต่างๆ ดังนี้ String id = request.getParameter("id"); String name = request.getParameter("name"); String addr = request.getParameter("addr"); String mobile = request.getParameter("mobile"); String fax = request.getParameter("fax"); String email = request.getParameter("email"); การเขียนโปรแกรม Java Servlet / JSP
  17. 17. 162.1.2 การแสดงรายละเอียดของค่าต่างๆ โปรแกรม Servlet จะสามารถแสดงผลออกทาง Web Browser ได้โดยการเขียนโค้ด HTML ภายในคำสั่ง out.println( ) โดยมีคำสั่งในเมธอด processRequest( ) ดังนี้ protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws IOException { PrintWriter out = response.getWriter(); response.setContentType("text/html;charset=UTF-8"); out.println("<html>"); out.println("<head>"); out.println("<title>Customer Information</title>"); out.println("</head>"); out.println("<body>"); String id = request.getParameter("id"); String name = request.getParameter("name"); String addr = request.getParameter("addr"); String mobile = request.getParameter("mobile"); String fax = request.getParameter("fax"); String email = request.getParameter("email"); out.println("<h1> Customer Information </h1>"); out.println("<b>ID: </b>" + id + "<BR>"); out.println("<b>Name: </b>" + name + "<BR>"); out.println("<b>Address: </b>" + addr + "<BR>"); out.println("<b>Mobile: </b>" + mobile + "<BR>"); out.println("<b>Fax: </b>" + fax + "<BR>"); out.println("<b>E-mail: </b>" + email + "<BR>"); out.println("</body>"); out.println("</html>"); out.close(); }Thanachart Numnonda and Thanisa Kruawaisayawan
  18. 18. 172.2 ขั้นตอนการพัฒนาโปรแกรม CustomerServlet.java เราสามารถที่จะพัฒนาโปรแกรม CustomerServlet.java ตามขั้นตอนดังนี้ 1. เลือกหน้าต่าง Projects แล้วคลิ๊กขวาที่โหนด WebApp → New → Servlet ดังรูปที่ 2.1 รูปที่ 2.1 การสร้างไฟล์ประเภท Servlet 2. กำหนดชื่อ Class Name เป็น CustomerServlet และ Package เป็น servlet ดังรูปที่ 2.2 แล้วกด Next รูปที่ 2.2 การกำหนดชื่อ Package และ ชื่อ File Servlet การเขียนโปรแกรม Java Servlet / JSP
  19. 19. 18 3. กำหนดค่า URL Pattern(หรือ URL Mappings) เป็น /addCustomer.do โดยคลิ๊กเลือกชื่อ CustomerServlet แล้ว กดปุ่ม Edit แล้วเปลี่ยน URL Mapping เป็น addCustomer.do และกด Finish ดังรูปที่ 2.3 รูปที่ 2.3 การกำหนด URL Pattern 4. จากนั้นเพิ่มเมธอดที่ไฟล์ CustomerServlet.java สำหรับรับ action ที่Submit มาจาก Http-Request (HTML Form) ทั้งชนิด POST และ GET โดยตั้งชื่อเมธอดว่า processRequest( ) โดยเขียน source code ตาม หัวข้อ 2.1.2 protected void processRequest(HttpServletRequest request,HttpServletResponse response) throws IOException { // ให้เขียน source code ตาม หัวข้อ 2.1.2 }Thanachart Numnonda and Thanisa Kruawaisayawan
  20. 20. 19 5. เขียน source Code เพิ่มในเมธอด doGet(),doPost() เพื่อส่งต่อ Http-Request ไปยังเมธอด processRequest() โดยเขียน code ดังนี้ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); //เพิ่ม Code เข้าไปที่นี่ } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); //เพิ่ม Code เข้าไปที่นี่ }2.3 การทดสอบโปรแกรม 1. Run โปรแกรม WebApp โดยคลิ๊กขวาที่ addCustomer.html เลือก Run As → Run on Server → กดปุ่ม Finish ดังรูปที่ 2.4 รูปที่ 2.4 การรันทดสอบ addCustomer Servlet การเขียนโปรแกรม Java Servlet / JSP
  21. 21. 20 2. ทดลองป้อนข้อมูล ดังรูปที่ 2.5 รูปที่ 2.5 กรอกข้อมูลทดสอบ Servlet ผ่านหน้า addCustomer.html 3. โปรแกรมจะแสดงผลลัพธ์ ดังรูปที่ 2.6 รูปที่ 2.6 ผลลัพธ์จากการเรียกโปรแกรม CustomerServletThanachart Numnonda and Thanisa Kruawaisayawan
  22. 22. 21 Exercise 3 โปรแกรมเว็บสำหรับการทำโพลเนื้อหาที่ต้องศึกษาก่อน การเขียนโปรแกรม Java Servlet เพื่ออ่านค่าพารามิเตอร์ แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม Java Servlet เพื่อทำ Poll โดยให้ผู้ใช้สามารถที่จะโหวตเลือกภาษาคอมพิวเตอร์ที่ชอบได้ แล้วโปรแกรมจะแสดงผลการโหวตทาง Web Browser3.1 โปรแกรม vote.html โปรแกรม vote.html เป็นหน้าเว็บที่ให้ผู้ใช้สามารถที่จะทำการโหวตเลือกภาษาคอมพิวเตอร์ได้ โดยเมื่อผู้ใช้กดปุ่ม Vote โปรแกรมเว็บก็จะไปทำการเรียก URL ที่ชื่อ processVote โปรแกรมนี้มีหน้าเว็บดังรูปที่ 3.1 รูปที่ 3.1 การแสดงผลของโปรแกรม vote.html3.2 การพัฒนาโปรแกรม VoteServlet.java โปรแกรม VoteServlet.java เป็นโปรแกรมที่ถูกเรียกใช้โดย vote.html เมื่อผู้ใช้กดปุ่ม Vote โปรแกรมนี้จะทำหน้าที่เพื่อนำค่าที่ผู้ใช้โหวตมาประมวลผล โดยมีการทำงานคือ 1. กำหนดตัวแปร counter และ lang 2. อ่านค่าพารามิเตอร์ต่างๆที่ส่งมาจาก vote.html และทำการประมวลผล 3. แสดงผลการโหวต การเขียนโปรแกรม Java Servlet / JSP
  23. 23. 223.2.1 กำหนดตัวแปร counter และ lang ตัวแปร count เป็นอะเรย์เพื่อที่จะเก็บจำนวนผลโหวตของภาษาคอมพิวเตอร์แต่ละภาษา และตัวแปร langเป็นอะเรย์ของ String เพื่อที่จะเก็บรายชื่อภาษาคอมพิวเตอร์ ตัวแปรทั้งสองเป็นตัวแปรของออปเจ็คที่จะประกาศนอกเมธอด (Instance Variable) โดยมีคำสั่งประกาศดังนี้ String []lang ={"Java", "C#", "C", "Pascal"}; int []count = new int[4];3.2.2 อ่านค่าพารามิเตอร์ต่างๆ ที่ส่งมาจาก vote.html และทำการประมวลผล เว็บเพจ vote.html จะส่งข้อมูลของการโหวต ไปกับพารามิเตอร์ที่ชื่อ lang โดยจะมีค่าเป็นหมายเล 1-4ในที่นี้จะมีคำสั่ง request.getParameter เพื่อจะอ่านค่าที่โหวตมา จากนั้นจะทำการแปลงค่าซึ่งเป็น String ให้เป็นค่าจำนวนเต็มโดยใช้ Wrapper class จากนั้นจะเป็นการเพิ่มจำนวนโหวตในตัวแปร count ตามค่า index ที่สอดคล้องกับภาษาที่โหวตมา โดยมีคำสั่งต่างๆ ดังนี้ String vote = request.getParameter("lang"); int voteNum = Integer.parseInt(vote) – 1; count[voteNum]++;3.2.3 การแสดงผลการโหวต คำสั่งแสดงผลการโหวตจะเป็นคำสั่งเพื่อแสดงค่าของตัวแปร count โดยมีคำสั่งดังนี้ for (int i = 0; i < count.length; i++) { out.println(lang[i] +" = " + count[i] + "<BR>"); }Thanachart Numnonda and Thanisa Kruawaisayawan
  24. 24. 233.3 ขั้นตอนการพัฒนาโปรเจ็ค Voter เราสามารถที่จะพัฒนาแบบฝึกหัดนี้ที่ชื่อโปรเจ็ค Voter ตามขั้นตอนดังนี้ 1. สร้าง New Project ชนิด Dynamic Web Application ชื่อ Voter ดังรูปที่ 3.2 รูปที่ 3.2 การสร้างโปรเจ็ค Web Application ชื่อ Voter การเขียนโปรแกรม Java Servlet / JSP
  25. 25. 24 2. สร้างไฟล์ HTML ชื่อ vote ดังรูปที่ 3.3 รูปที่ 3.3 การสร้าง HTML Page ชื่อ vote.html 3. ในหน้าต่าง Editor เขียน Source code ของ vote.html ดัง Listing ที่ 3.1 Listing ที่ 3.1 โปรแกรม vote.html <html> <head><title>Web Voting</title></head> <body> <form action="processVote" method="POST"> Select a computer language <BR> <input type="radio" name="lang" value="1" /> Java <br> <input type="radio" name="lang" value="2" /> C# <br> <input type="radio" name="lang" value="3" /> C <br> <input type="radio" name="lang" value="4" /> Pascal <br> <input type="submit" value="Vote" /> </form> </body> </html>Thanachart Numnonda and Thanisa Kruawaisayawan
  26. 26. 254. เลือกหน้าต่าง Projects Explorer แล้วคลิ๊กขวาที่โหนด Voter เลือกคำสั่ง New > Servlet กำหนด Package เป็น controller และ Class Name เป็น VoteServlet แล้วกด Next กำหนด URL Mapping เป็น /processVote แล้วกด Finish ดังรูปที่ 3.4 รูปที่ 3.4 การสร้าง Java Servlet ชื่อ VoteServlet.java และกำหนด URL Pattern (URL Mapping) การเขียนโปรแกรม Java Servlet / JSP
  27. 27. 26 ในหน้าต่าง Editor เขียน Source code ของ VoteServlet.java ดัง Listing ที่ 3.2 Listing ที่ 3.2 โปรแกรม VoteServlet.java package controller; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/processVote") public class VoteServlet extends HttpServlet { private static final long serialVersionUID = 1L; String []lang ={"Java", "C#", "C", "Pascal"}; int []count = new int[4]; protected void processRequest(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); response.setContentType("text/html;charset=UTF-8"); String vote = request.getParameter("lang"); int voteNum = Integer.parseInt(vote) - 1; count[voteNum]++; out.println("<html>"); out.println("<head>"); out.println("<title>Servlet VoteServlet</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1>Servlet VoteServlet at " +request.getContextPath() + "</h1>"); for (int i = 0; i < count.length; i++) { out.println(lang[i] +" = " + count[i] + "<BR>"); } out.println("</body>"); out.println("</html>"); out.close(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); }}Thanachart Numnonda and Thanisa Kruawaisayawan
  28. 28. 275. ทำการ Deploy Web Project ที่ Apache Tomcat ไปที่ Tab Server ด้านล่าง คลิ๊กขวา ที่ Tomcat Server แล้วเลือก Add and Remove ดังรูปที่ 3.5 รูปที่ 3.5 การ Deploy Project ไปที่ Apache Tomcat แบบ Manual6. กด Save แล้วทำการ run โปรเจ็คเพื่อทดสอบโปรแกรมโดยเรียก URL ที่ http://localhost:8080/Voter/vote.html โดยจะได้ผลลัพธ์ดังตัวอย่างในรูปที่ 3.6 รูปที่ 3.6 ตัวอย่างผลลัพธ์ของโปรเจ็ค Voter การเขียนโปรแกรม Java Servlet / JSP
  29. 29. 283.4 การปรับปรุงโปรแกรม VoteServlet.java ขั้นตอนนี้จะเป็นการปรับปรุงโปรแกรม VoteServlet.java เพื่อป้องกันการโหวตซ้ำทั้งนี้จะไม่อนุญาตให้ ผู้ใช้ที่ใช้หมายเลขไอพีเดียวกันโหวตซ้ำได้ โดยจะเก็บหมายเลขไอพีที่ทำการโหวตแล้วในออปเจ็คชนิด HashSet การพัฒนาโปรแกรมนี้มีคำสั่งเพิ่มเติมที่สำคัญดังนี้ 1. กำหนดตัวแปร voters 2. อ่านหมายเลขไอพีของผู้โหวตและเพิ่มคะแนนการโหวต หากหมายเลขไอพีนี้ไม่เคยโหวต3.4.1 กำหนดตัวแปร voters ตัวแปร voters เป็นตัวแปรชนิด HashSet ( Set ไม่เก็บข้อมูลซ้ำ ไม่จำลำดับข้อมูลว่าเข้าก่อนหรือหลังและไม่เรียงลำดับ) เก็บหมายเลขไอพีของผู้โหวต โดยจะประกาศเป็นตัวแปร ออปเจ็คที่มีคำสั่งประกาศดังนี้ HashSet voters = new HashSet();3.4.2 การอ่านหมายเลขไอพีของผู้ใช้ การอ่านหมายเลขไอพีของผู้ใช้ทำได้โดยเรียกใช้ คำสั่ง getRemoteAddr() ในออปเจ็ค request เมื่อทราบหมายเลขไอพี เราสามารถที่จะตรวจสอบได้ว่าหมายเลขนี้เคยโหวตแล้วหรือไม่ โดยการตรวจสอบว่าออปเจ็ค votersมีค่าหมายเลขไอพีนี้หรือไม่โดยใช้คำสั่ง contain() หากยังไม่เคยโหวตก็ให้เพิ่มค่าตัวนับและเพิ่มหมายเลขไอพีนี้ในออปเจ็ค voters โดยมีคำสั่งดังนี้ String ip = request.getRemoteAddr(); if(voter.contains(request.getRemoteAddr())){ out.print("This IP Address has been voted"); } else { count[voteNum]++; voter.add(request.getRemoteAddr()); }Thanachart Numnonda and Thanisa Kruawaisayawan
  30. 30. 29สำหรับโปรแกรม VoteServlet.java ที่ปรับปรุงใหม่จะมี source code ดัง Listing ที่ 3.3 ให้ลองทดลองเขียนโปรแกรมตามนี้ แล้วทำการรันโปรแกรมใหม่Listing ที่ 3.3 โปรแกรม VoteServlet.java เพื่อป้องกันการโหวตซ้ำpackage controller;import java.io.IOException;import java.io.PrintWriter;import java.util.HashSet;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@WebServlet("/processVote")public class VoteServlet extends HttpServlet { private static final long serialVersionUID = 1L; HashSet<String> voter = new HashSet<String>(); String[] lang = { "Java", "C#", "C", "Pascal" }; int[] count = new int[4]; protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); response.setContentType("text/html;charset=UTF-8"); String vote = request.getParameter("lang"); int voteNum = Integer.parseInt(vote) - 1; if (voter.contains(request.getRemoteAddr())) { out.print("<font color=red>This IP Address has been voted</font>"); } else { voter.add(request.getRemoteAddr()); count[voteNum]++; } out.println("<html>"); out.println("<head>"); out.println("<title>Servlet VoteServlet</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1>Servlet VoteServlet at " + request.getContextPath() + "</h1>"); for (int i = 0; i < count.length; i++) { out.println(lang[i] + " = " + count[i] + "<BR>"); } out.println("</body>"); out.println("</html>"); out.close(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } public String getServletInfo() { return "Short description"; }} การเขียนโปรแกรม Java Servlet / JSP
  31. 31. 30 Exercise 4 การเชื่อมต่อกับ MySQL Databaseเนื้อหาที่ต้องศึกษาก่อน - แบบฝึกหัดนี้เป็นการเริ่มต้นใช้งาน Database Tool เพื่อเชื่อมต่อกับ Table test ในฐานข้อมูล MySQLสำหรับเป็นตัวช่วยให้ทำงานได้เร็วขึ้น เช่นปกติถ้าจะ create table ก็ต้องเขียน SQL แต่ Tool นี้มี GUI มาช่วยทำให้ลดข้อผิดพลาด และ สะดวกในการทำงานมากขึ้น ทั้งนี้การทำแบบฝึกหัดนี้จะต้องมีการ download และติดตั้งโปรแกรม MySQL และ MySQL Workbench โดยสามารถทำการ download ได้จากเว็บ http://dev.mysql.com/4.1 การเชื่อมต่อ MySQL โดยโปรแกรม MySQL Workbench ให้เปิดโปรแกรม MySQL Workbench ดังรูปที่ 4.1 จากนั้นทำตามขั้นตอนดังนี้ รูปที่ 4.1 การเรียกใช้งาน Program MySQL Workbench 1. ดับเบิ้ลคลิ๊กที่ Connection Name ใส่ Password ที่กำหนดไว้ในตอนติดตั้งโปรแกรม MySQL ซึ่งจะมีค่าเป็น root ดังรูปที่ 4.2 รูปที่ 4.2 การแสดงการเชื่อมต่อ Connection เพื่อเข้าไปจัดการ DatabaseThanachart Numnonda and Thanisa Kruawaisayawan
  32. 32. 314.2 การสร้างตาราง books ขั้นตอนนี้จะเป็นการสร้าง Table ที่ชื่อ books โดยให้อยู่ภายใต้ Schema ที่ชื่อ test โดย Table นี้กำหนดให้มีColumn ต่างๆ ดังตารางที่ 4.1ตารางที่ 4.1 Table books ชื่อ Column ชนิด ขนาด Primary Key Index isbn varchar 20 Y Y title varchar 70 - - author varchar 50 - - price float - - - เราจะใช้โปรแกรม MySQL WorkBench ในการที่จะสร้าง Table นี้โดยมีขั้นตอนต่างๆ ดังนี้ 1. คลิ๊กที่ icon ชื่อ Add Table... แล้วใส่ชื่อ table และ ชื่อ field ตามตารางที่ 4.1 ดังรูปที่ 4.3 แล้วกดปุ่ม Apply รูปที่ 4.3 การเลือกคำสั่งสร้างตาราง การเขียนโปรแกรม Java Servlet / JSP
  33. 33. 32 2. หรือใช้คำสั่ง SQL Statement ก็ได้ โดยนำไปใส่ที่หน้าต่าง Query1 แล้ว กด icon สายฟ้าสีเหลืองเพื่อรัน CREATE TABLE BOOKS ( ISBN VARCHAR(20) NOT NULL , TITLE VARCHAR(70) NULL , AUTHOR VARCHAR(50) NULL , PRICE FLOAT NULL , PRIMARY KEY (ISBN) ); 3. เปิด Tables books จะเห็น Column ต่างๆ ดังรูปที่ 4.4 รูปที่ 4.4 ผลลัพธ์จากการสร้างตารางThanachart Numnonda and Thanisa Kruawaisayawan
  34. 34. 334.3 การใช้คำสั่ง SQL ใน MySQL WorkBench ภายหลังจากที่มีการสร้าง Table ที่ชื่อ books เราสามารถใช้คำสั่ง SQL เพื่อที่จะติดต่อกับฐานข้อมูลในที่นี้จะแสดงการเพิ่มข้อมูลลงใน Table โดยมีขั้นตอนต่างๆดังนี้ 1. ดับเบิ้ลคลิ๊กที่ Table books ด้านขวา จะได้ SQL Editor ให้ป้อนคำสั่ง SQL เป็น INSERT INTO books VALUES (123, JAVA, Numnonda, 2500.00); INSERT INTO books VALUES (456, SOA, Numnonda, 3000.00) ; แล้ว คลิ๊กที่ icon สายฟ้าสีเหลือง ดังรูปที่ 4.5 หรือกด Ctrl+Shift+Enter เพื่อรันคำสั่ง SQL ทั้งหมด รูปที่ 4.5 การ Execute คำสั่งเพิ่มข้อมูลในตาราง การเขียนโปรแกรม Java Servlet / JSP
  35. 35. 34 2. เราสามารถที่จะดูข้อมูลที่ป้อนเข้าไปได้ โดยการคลิ๊กขวาที่ Table ที่ชื่อ books เแล้วลือก Select Rows – Limit1000 ดังรูปที่ 4.6 รูปที่ 4.6 การเรียกดูข้อมูลใน Table ชื่อ booksThanachart Numnonda and Thanisa Kruawaisayawan
  36. 36. 35 Exercise 5 การพัฒนาโปรแกรมเว็บ เพื่อติดต่อกับฐานข้อมูลเนื้อหาที่ต้องศึกษาก่อน การใช้งาน Tool ที่ติดต่อกับ MySQL Database แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม Web Application โดยใช้ Java Servlet เพื่อเชื่อมต่อกับฐานข้อมูลในที่นี้ใช้ฐานข้อมูล MySQL ซึ่งมี Database ชื่อ test และสร้าง Table ที่ชื่อ books ไว้แล้วจาก ที่ Exercise 4 (หน้า 34) การทำงานของโปรแกรม เป็นการเพิ่มข้อมูลลงใน Table ดังกล่าว โดยกำหนดให้ผู้ใช้ป้อนรายละเอียดข้อมูลผ่านเว็บเพจที่ชื่อ addBook.html ซึ่งเมื่อผู้ใช้กดปุ่ม Add โปรแกรมก็จะไปเรียกโปรแกรม Servlet ที่ชื่อAddBookServlet ซึ่งจะมีคำสั่งในอ่านค่า parameter ที่ผู้ใช้ป้อนเข้ามาและทำการบันทึกข้อมูลลงใน Table books ซึ่งใช้ชุดคำสั่ง SQL ผ่าน JDBC APIขั้นตอนในการพัฒนาโปรแกรม 1. Config Apache Tomcat ให้สามารถใช้งาน JDBC Driver 2. สร้างโปรเจ็ค WebBaseDB 3. พัฒนา Web page addBook.html 4. พัฒนา Web page Thankyou.html 5. พัฒนาโปรแกรม AddBookServlet.java5.1 การ Config Apache Tomcat ให้สามารถใช้งาน JDBC Driver ในที่นี้จะใช้ Driver ที่ชื่อ MySQL Connector/J ซึ่งเป็น JDBC Driver ที่ใช้ติดต่อกับ MySQLFile ที่จำเป็น คือ mysql-connector-java-5.1.15-bin.jar โดยให้ Copy ไปวางที่ directory /lib ของ Apache TomcatDefault อยู่ที่ C:Program FilesApache Software FoundationTomcat 6.0lib ดังรูปที่ 5.1 รูปที่ 5.1 ตำแหน่งของ File JDBC Driver ใน Folder lib ของ Apache Tomcat โดยสามารถ Download MySQL Connector/J ได้ที่http://mysql.cs.pu.edu.tw/Downloads/Connector-J/mysql-connector-java-5.1.15.zip การเขียนโปรแกรม Java Servlet / JSP
  37. 37. 365.2 การสร้าง Web Application Project ขั้นตอนแรกจะทำการสร้างโปรเจ็คใหม่โดยการเลือกเมนู File → New Project →Dynamic Web Application กำหนดชื่อ Project Name เป็น WebBaseDB (ตัวอย่างการสร้าง Dynamic Web Application หน้า 23) แล้วกด Finish5.3 การพัฒนาโปรแกรม addBook.html โปรแกรม addBook.html เป็นเว็บเพจที่ใช้แสดงฟอร์มสำหรับป้อนข้อมูลหนังสือใหม่เข้าในฐานข้อมูลbooks ซึ่งมีลักษณะดังรูปที่ 5.2 โปรแกรม addBook.html รูปที่ 5.2 หน้าเว็บเพจ addBook.html ขั้นตอนการพัฒนามีดังนี้ 1. คลิ๊กขวาที่โหนด WebBaseDB จากนั้นเลือกคำสั่ง New → HTML File (ตัวอย่าง หน้า 24) กำหนด File Name: เป็น addBook แล้วกด Finish 2. เขียน source code ของไฟล์ addBook.html ตาม Listing ที่ 5.1 หรือ ลาก icon ประเภท HTML Forms ที่อยู่ในหน้าต่าง Palette เพื่อสามารถให้เขียนโปรแกรมได้ง่ายขึ้น (ตัวอย่าง หน้า 9 โดยทำตาม รูปแบบที่ 2) ดังรูปที่ 5.3Thanachart Numnonda and Thanisa Kruawaisayawan
  38. 38. 37 รูปที่ 5.3 การใช้งาน 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><P> <form action="addBook.do" method="POST"> ISBN : <input type="text" name="isbn" value="" size="15"/> <BR> Title : <input type="text" name="title" value="" size="50"/> <BR> Author : <input type="text" name="author" value="" size="50"/> <BR> Price : <input type="text" name="price" value="" size="10"/> <BR> <input type="submit" value="Add" /> </form> </body></html>5.4 การพัฒนาโปรแกรม thankyou.html โปรแกรม thankyou.html เป็นเว็บเพจที่ใช้แสดงให้เห็นว่าข้อมูลได้ถูกเพิ่มเข้าไปในฐานข้อมูลแล้ว โดยมีsource code ดัง Listing ที่ 5.2 ซึ่งขั้นตอนการพัฒนาโปรแกรมนี้จะเป็นเช่นเดียวกับการพัฒนาโปรแกรมaddBook.html การเขียนโปรแกรม Java Servlet / JSP
  39. 39. 38Listing ที่ 5.2 โปรแกรม thankyou.html5.5 การพัฒนาโปรแกรม AddBookServlet.java โปรแกรม AddBookServlet.java เป็นโปรแกรมที่ถูกเรียกใช้โดย addBook.html เมื่อผู้ใช้กดปุ่ม Addโปรแกรมนี้จะทำหน้าที่เพื่อติดต่อกับฐานข้อมูลโดยมีขั้นตอนการทำงานดังนี้ 1. อ่านค่าพารามิเตอร์ต่างๆ ที่ส่งมาจาก addBook.html 2. เชื่อมต่อกับฐานข้อมูล books ดังรูปที่ 5.4 รูปที่ 5.4 การเชื่อมต่อของ Servlet กับฐานข้อมูล 3. เพิ่มรายชื่อหนังสือใหม่ลงในฐานข้อมูล books 4. เรียกเว็บเพจ Thankyou.html5.5.1 การอ่านค่าพารามิเตอร์จาก addBook.html เว็บเพจ addBook.html จะส่งข้อมูลของรายชื่อหนังสือใหม่ผ่านมาทางพารามิเตอร์ต่างๆดังนี้ ● isbn หมายเลข ISBN ของหนังสือ ● title ชื่อหนังสือ ● author ชื่อผู้แต่ง ● price ราคาหนังสือ พารามิเตอร์ต่างๆ เหล่านี้จะถูกส่งผ่านโปรโตคอล Http และในโปรแกรมเราสามารถที่จะอ่านค่าพารามิเตอร์เหล่านี้ได้จากออปเจ็ค request โดยเรียกใช้เมธอด getParameter() ซึ่งโปรแกรมส่วนนี้จะมีคำสั่งต่างๆ ดังนี้ String isbn = request.getParameter("isbn"); String author = request.getParameter("author"); String title = request.getParameter("title"); String priceStr = request.getParameter("price");5.5.2 การเชื่อมต่อกับฐานข้อมูล ● เพิ่ม Resource ชนิด Data source ลงไปที่ Container ของ Tomcat ● เรียกใช้คำสั่ง SQL โดยใช้เมธอด executeQuery() หรือ executeUpdate()Thanachart Numnonda and Thanisa Kruawaisayawan
  40. 40. 39 1. เพิ่ม Resource ชนิด DataSource ลงไปที่ Tomcat โดยสร้าง file context.xml ที่ Folder WebBaseDBWebContentMETA-INF โดยเรามาคลิ๊กขวาที่Folder ที่ชื่อ WebContent > META-INF แล้วเลือกเมนู New > Others > XML File แล้วกำหนดชื่อไฟล์เป็นcontext.xml แล้วเขียน sourcecode ดังนี้ <?xml version="1.0" encoding="UTF-8"?> <Context> <Resource name="jdbc/test" auth="Container" driverClassName="com.mysql.jdbc.Driver" type="javax.sql.DataSource" url="jdbc:mysql://localhost:3306/test" username="root" password="root" > </Resource> </Context> 2. การขอ Data source จะใช้ @annotation และบอกชื่อของ Data source ตัวที่เราต้องการ ตัวอย่าง source code เช่น @Resource(name = "jdbc/test") private DataSource jdbcTest; เมื่อได้ Data source แล้ว เราก็จะสร้างทางติดต่อ โดย getConnection จากมันแล้วเก็บค่าไว้ที่ตัวแปร conn โดยเขียน source code ส่วนนี้ที่ method init( ) private Connection conn; public void init() { try { conn = jdbcTest.getConnection(); } catch (Exception ex) {System.out.println(ex);} }5.5.3 เพิ่มรายชื่อหนังสือใหม่ลงในฐานข้อมูล เมื่อเชื่อมต่อฐานข้อมูลและได้ออปเจ็คชนิด Connection มาแล้ว เราสามารถที่จะเรียกใช้คำสั่ง SQL ได้ ซึ่ง ในที่นี้คือคำสั่ง INSERT ซึ่งจะมีรูปแบบของคำสั่งดังนี้ INSERT INTO books VALUES(....) โดยเราจะใช้ค่าจากพารามิเตอร์ต่างๆที่รับมา ดังนั้นถ้าข้อมูลที่ป้อนเข้ามาถูกต้องเราสามารถที่จะเพิ่มรายชื่อหนังสือใหม่ลงในฐานข้อมูลโดยใช้คำสั่งดังนี้ Statement stmt = conn.createStatement(); String sql = "INSERT INTO books VALUES(" + isbn + "," + title +"," + author +","+ price +")"; int numRow = stmt.executeUpdate(sql);5.5.4 การเรียกเว็บเพจ thankyou.html เมื่อข้อมูลได้ถูกเพิ่มลงไปในฐานข้อมูลแล้ว โปรแกรม AddBookServlet จะทำการเรียกเว็บเพจ thankyou.html โดยการเรียกใช้ RequestDispatcher ดังนี้ การเขียนโปรแกรม Java Servlet / JSP
  41. 41. 40 RequestDispatcher obj = request.getRequestDispatcher("thankyou.html"); if (numRow == 1 && obj != null) { obj.forward(request,response); }5.6 ขั้นตอนการพัฒนาโปรแกรม AddBookServlet.java โปรแกรมมีขั้นตอนในการพัฒนาดังนี้ 1. คลิ๊กขวาที่โหนด WebBaseDB จากนั้นเลือกคำสั่ง New → Servlet กำหนด Java Package เป็น controller , Class Name เป็น AddBookServlet และ URL Mapping เป็น /addBook.do แล้วกด Finish 2. ในหน้าต่าง editor ให้แก้ไข source code ของไฟล์ AddBookServlet.java ให้เป็นไปตาม Listing ที่ 5.3 Listing ที่ 5.3 โปรแกรม AddBookServlet.java package controller; import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.SQLException; import java.sql.Statement; import javax.annotation.Resource; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.sql.DataSource; @WebServlet("/addBook.do") public class AddBookServlet extends HttpServlet { private static final long serialVersionUID = 1L; @Resource(name = "jdbc/test") private DataSource jdbcTest; private Connection conn; public void init() { try { conn = jdbcTest.getConnection(); } catch (Exception ex) { System.out.println(ex); } } 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>");Thanachart Numnonda and Thanisa Kruawaisayawan
  42. 42. 41 out.println("<h1> Add a new book </h1>"); try { String isbn = request.getParameter("isbn"); String author = request.getParameter("author"); String title = request.getParameter("title"); String priceStr = request.getParameter("price"); float price = Float.parseFloat(priceStr); Statement stmt = conn.createStatement(); String sql = "INSERT INTO books VALUES(" + isbn + "," + title + "," + author + "," + price + ")"; 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); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } } 3. บางส่วนที่ลืม import หรือพบ Error หรือพบ Warning ขึ้นมา ให้ตรวจสอบ import file โดยกด Ctrl+Shift+O Eclipse จะมีให้เลือกว่าจะ import ไฟล์จากแพ็คเก็จใด ดังรูปที่ 5.5 เรียกว่าการทำ Organize Imports รูปที่ 5.5 Ctrl+Shift+O ให้ Eclipse เป็นตัวช่วยในการแสดง Import file5.7 ทดสอบโปรแกรม 1. ทำการ Deploy โปรแกรม WebBaseDB ซึ่งใน Eclipse ทำโดย Click ขวาที่ Add and Remove 2. เรียกใช้งานหน้า addBook.html แล้วทดสอบกรอกข้อมูลดังรูปที่ 5.6 การเขียนโปรแกรม Java Servlet / JSP
  43. 43. 42 รูปที่ 5.6 ตัวอย่างการป้อนข้อมูล Books 3. เมื่อกดปุ่ม Add โปรแกรมก็จะใส่ข้อมูลลงใน Database และแสดงผลลัพธ์ดังรูปที่ 5.7 รูปที่ 5.7 ผลลัพธ์ที่แสดงทาง Web Browser 4. เข้าไปดูข้อมูล โดยใช้ MySQLWorkbench เลือกคำสั่ง Select Rows -... จาก Table ที่ชื่อ books ดังรูปที่ 5.8 รูปที่ 5.8 ข้อมูลที่ถูกป้อนเข้า Table ที่ชื่อ booksThanachart Numnonda and Thanisa Kruawaisayawan
  44. 44. 43 Exercise 6 การพัฒนาโปรแกรมเว็บเพื่อติดต่อฐานข้อมูล MongoDBเนื้อหาที่ต้องศึกษาก่อน การเขียนโปรแกรม Java Servlet เพื่ออ่านค่าพารามิเตอร์ แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม Web Application โดยใช้ Java Servlet เพื่อเชื่อมต่อกับฐานข้อมูลที่เป็น NoSQL อย่าง MongoDB ซึ่งเป็นฐานข้อมูลที่เก็บข้อมูลแบบ Document ในรูปแบบของ JSON และมีสามารถในการเก็บข้อมูลขนาดใหญ่ได้ขั้นตอนในการพัฒนาโปรแกรม 1. ติดตั้ง MongoDB 2. ทดลองใช้ MongoDB 3. เขียนโปรแกรม Java Servlet เพื่อเชื่อมต่อกับ MongoDB6.1 การติดตั้ง MongoDB โปรแกรมฐานข้อมูล MongoDB สามารถทำงานในระบบปฎิบัติการที่หลากหลายทั้ง Windows, Mac OSหรือ Linux สำหรับบนระบบปฎิบัติการ Windows สามารถติดตั้งได้โดยการดาวน์โหลดไฟล์ Binary จากเว็บไซต์http://www.mongodb.org/downloads ซึ่งเมื่อทำการดาวน์โหลดไฟล์ดังกล่าวแล้วให้ทำการ unzip เก็บไฟล์ไว้ในไดเร็กทอรี่ที่ต้องการโดยเราจะมีไฟล์ต่างๆดังรูป รูปที่ 6.1 ไฟล์ไบนารี่ต่างๆของ MongoDB ซึ่งไฟล์ที่สำคัญก็คือ • mongod.exe ที่เป็น Database Server • mongo.exe ที่เป็นหน้่าจอของ admin โดย Default MongoDB จะเก็บข้อมูลไว้ที่ไดเร็กทอรี่ datadb ซึ่งเราจะต้องไปสร้างไดเร็กทอรี่ดังกล่าวภายใต้ Drive C การเขียนโปรแกรม Java Servlet / JSP
  45. 45. 446.2 การใช้ MongoDB เราสามารถที่จะทดลองการใช้งาน MongoDB โดยการเปิดโปรแกรม Mongo.exe ซึ่งก็จะเป็นโปรแกรมcommand shell ของ administrator และโดย Default ก็จะกำหนดใช้ ฐานข้อมูลที่ชื่อ test ซึ่งเราสามารถที่จะแสดงฐานข้อมูลที่ใช้อยู่โดยการพิมพ์คำสั่ง > db คำสั่งที่จะแสดงรายชื่อฐานข้อมูล (database)ทั้งหมดคือ >show dbs เราสามารถที่จะสร้างฐานข้อมูลใหม่ที่ชื่อว่า mydatabase โดยใช้คำสั่ง >use mydatabase คำสั่งที่จะแสดง Tables ทั้งหมดในฐานข้อมูลคือ >show collections และเราสามารถที่จะเรียกดูคำสั่งในการช่วยเหลือโดย >help สำหรับในตัวอย่างนี้เราจะทำการทดลองสร้างข้อมูลของหนังสือ สองเล่มดังนี้ > db.books.insert({isbn:"555123", author:"thanachart", title:"Introduction to MongoDB", price:1200}) และสามารถทำการเพิ่มข้อมูลได้โดยคำสั่งต่อไปนี้ > new_book = {isbn:"555124", author:"James Gosling", title: "Java SE", price: 1400} > db.books.insert(new_book) เราสามารถที่จะดูข้อมูลของหนังสือทั้งหมดได้จากคำสั่ง > db.books.find() ซึ่งก็จะได้ผลลัพธ์ดังนี้{ "_id" : ObjectId("511fb0387c199204a9f733a5"), "isbn" : "555123", "author" : "thanachart", "title" :"Introduction to MongoDB", "price" : 1200 }{ "_id" : ObjectId("511fb24e7c199204a9f733a6"), "isbn" : "555124", "author" : "James Gosling", "title" : "JavaSE", "price" : 1400 } ทั้งนี้ id จะเป็น index ในการระบุหมายเลขของข้อมูล นอกจากนี่้เราสามารถที่จะค้นหาข้อมูลสำหรับรายการใดๆได้เช่น การค้นหาตามชื่อผู้แต่ง > db.books.find({author:"thanachart"}) หรืออาจต้องการค้นชื่อหนังสือที่มีคำว่า MongoThanachart Numnonda and Thanisa Kruawaisayawan

×