Hand-on Exercise Java Web Programming

IMC Institute

Java Web
Programming
Using Cloud Platform

By Associate Professor Dr. Thanachart Numnonda
& Associate Professor Dr. Thanisa Kruawaisayawan
Date 18 – 22 Feb 2013

1

Hand-on
Exercises

การเขียนโปรแกรมเว็บ
Java Servlet / JSP
โดยใช้
Eclipse and TomCat

Assoc.Prof.Dr.Thanachart Numnonda
Software Park Thailand

and
Asst.Prof.Dr.Thanisa Kruawaisayawan
King Mongkut's Institute of Technology Ladkrabang

February 2013

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

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 การทดสอบโปรแกรม...........................................................................................................................13
Exercise 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 การทดสอบโปรแกรม...........................................................................................................................19
Exercise 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 การอ่านหมายเลขไอพีของผู้ใช้.......................................................................................................... 28
Exercise 4 การเชื่อมต่อกับ MySQL Database............................................................................................. 30
4.1 การเชื่อมต่อ MySQL โดยโปรแกรม MySQL Workbench....................................................................... 30
4.2 การสร้างตาราง books....................................................................................................................... 31
4.3 การใช้คำสั่ง SQL ใน MySQL WorkBench........................................................................................33
Exercise 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 ทดสอบโปรแกรม...............................................................................................................................41
Exercise 6 การพัฒนาโปรแกรมเว็บเพื่อติดต่อฐานข้อมูล MongoDB.......................................................................... 43
6.1 การติดตั้ง MongoDB..................................................................................................................... 43
6.2 การใช้ MongoDB......................................................................................................................... 44
6.3 การเขียนโปรแกรม Java Servlet เพื่อเชื่อมต่อกับ MongoDB.......................................................................45
6.4 ทดสอบโปรแกรม...............................................................................................................................47
Exercise 7 โปรแกรมเว็บเพื่อสาธิตขอบเขตของออปเจ็ค............................................................................................ 48
7.1 การพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request ..................................................................... 48
7.1.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request .....................................................50
7.1.2 ขั้นตอนการทดสอบโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request.................................................... 50
7.2 การพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Session ......................................................................51

Thanachart Numnonda and Thanisa Kruawaisayawan

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.............................................. 56
Exercise 8 การพัฒนา WebBase DB โดยคลาสประเภท Web Listener............................................................... 57
8.1 การพัฒนาโปรแกรม Init.java.............................................................................................................. 57
8.2 การปรับปรุงโปรแกรม AddBookServlet.java ......................................................................................60
8.3 ทดสอบโปรแกรม...............................................................................................................................61
Exercise 9 การพัฒนาโปรแกรม Servlet Filter ...............................................................................................62
9.1 การพัฒนาโปรแกรม Servlet Filter.......................................................................................................62
9.2 การเขียนหน้า Login......................................................................................................................... 63
9.3 การเขียน Servlet Filter.................................................................................................................. 64
9.4 การเขียนโปรแกรม ShowServlet ........................................................................................................67
9.5 ขั้นตอนการทดสอบโปรแกรม ..................................................................................................................68
Exercise 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 เพื่อแสดงผล ............................................................................................ 71
Exercise 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 ขั้นตอนการทดสอบโปรแกรม ................................................................................................................88
Exercise 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.................................................................................................. 103
Exercise 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 การทดสอบโปรแกรม....................................................................................................................... 111
Exercise 14 การพัฒนาโปรแกรมเว็บโดยใช้ Spring Framework........................................................................ 113
14.1 การสร้างโปรเจ็ค SpringDBApp โดยใช้ Spring Framework.............................................................. 113
14.2 พัฒนาไฟล์ Controller................................................................................................................. 114
14.3 พัฒนาไฟล์ JSP............................................................................................................................114


4

14.4 พัฒนาไฟล์ mvc-dispatcher-servlet.xml...................................................................................... 115
14.5 พัฒนาไฟล์ web.xml.................................................................................................................... 115
14.6 การทดสอบโปรแกรม.......................................................................................................................116
14.7 พัฒนาโปรแกรมเพื่อเชื่อมต่อกับฐานข้อมูล................................................................................................. 116
Exercise 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............................................................................ 127
Exercise 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................................................................................135
Exercise 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 ......................................................................................... 142


5

Exercise 1 การสร้างโปรเจ็ค Web Application และไฟล์ HTML
แบบฝึกหัดนี้จะเป็นการสร้างโปรเจ็ค Web Application และพัฒนาหน้าเว็บเพจเพื่อให้ผู้ใช้ป้อนข้อมูลของ
ลูกค้า โดยพัฒนาด้วยภาษา HTML ซึ่งจะทำหน้าเป็นส่วนอินพุตของโปรแกรมเพื่อให้ผู้ใช้ป้อนข้อมูลผ่าน Web
Browser ทั้งนี้ในแบบฝึกหัดนี้จะใช้ Eclipse เป็นเครื่องมือในการพัฒนาโปรแกรมและจะใช้ Apache Tomcat v 6.0
เป็น Web Server
ขั้นตอนในการพัฒนาโปรแกรม
1. การติดตั้ง Web Server
2. สร้างโปรเจ็ค Web Application
3. พัฒนาโปรแกรม addCustomer.html

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


6

รูปที่ 1.2 การ Config Eclipse เพื่อให้รู้จัก TOMCAT Web Server

เราจะเห็นหน้าต่าง Server มีชื่อ Web Server ที่เป็น Tomcat เพิ่มขึ้นมาซึ่งเราสามารถควบคุมการ Start/Stop
Server ได้โดยการคลิ๊กขวาที่ชื่อ Server โปรแกรมจะแสดงคำสั่งต่างๆ ขึ้นมาดังรูปที่ 1.3

รูปที่ 1.3 เมนูในการจัดการ Web Server


7

เราจำเป็นที่จะต้องกำหนดค่า Server Configuration ของ Tomcat โดยการเลือกแทป Server แล้วคลิ๊กที่
Tomcat Server โปรแกรมจะแสดงข้อมูลต่างๆของ Server ให้เลือก Server Locations เป็น Use Tomcat Installation
ดังรูปที่ 1.4

รูปที่ 1.4 การกำหนดค่า Server Locations
1.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


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 directory


9

4. แสดง Context root และ Content directory ดังรูปที่ 1.8 กด Finish

รูปที่ 1.8 แสดงชื่อ Context root และ Content directory

1.3 การพัฒนาโปรแกรม addCustomer.html
โปรแกรม addCustomer.html เป็นเว็บเพจที่ใช้แสดงฟอร์มสำหรับป้อนข้อมูลลูกค้า แล้ว นำไปบันทึกลงฐาน
ข้อมูล customers โดยมีรูปแบบหน้าจอ HTML ที่ต้องสร้าง ดังรูปที่ 1.9 (ส่วนของโปรแกรมจะสร้างในแบบฝึกหัด
ถัดไป)

รูปที่ 1.9 หน้าเว็บเพจ addCustomer.html


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 HTML


11

3. เขียน source code ทำได้ 2 รูปแบบคือ
รูปแบบที่ 1 เขียนตาม Listing ที่ 1.1
Listing ที่ 1.1 โปรแกรม addCustomer.html
<html><head><title> Add Customer</title></head>
<body><H1> Add a new customer profile</H1>
<form action="addCustomer.do" method="POST">
Customer ID : <input name="id" /> <br>
Name: <input name="name" /> <br>
Address: <textarea name="addr" rows="4" cols="20"></textarea> <br>
Mobile: <input name="mobile" size="9" /> <br>
Fax: <input name="fax" size="9" /> <br>
E-mail: <input name="email" size="25" /> <br><br>
<input type="submit" value="Add" />
</form>
</body>
</html>

รูปแบบที่ 2 ให้เขียนหน้าจอได้ง่ายขึ้นสามารถที่จะลาก Icon ประเภท HTML Forms
ที่อยู่ในหน้าต่าง Palette มาใส่ที่หน้าจอ Design ได้โดยไม่ต้องเขียน HTML ดังนี้
- ปิดหน้าจอ HTML เดิม
- เลือกหน้าต่าง Project แล้วคลิ๊กขวาที่ File addCustomer.html
- เลือก Open With และเลือกที่ Web Page Editor ดังรูป 1.12

รูปที่ 1.12 การเลือกเปิด HTML กับ Editor ที่เป็น Design view


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 ไปที่หน้า Design


13

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

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 ยกเว้นว่าจะกำหนดเป็นหมายเลขอื่น


15

Exercise 2 การเขียนโปรแกรม Java Servlet เพื่ออ่านค่าพารามิเตอร์

เนื้อหาที่ต้องศึกษาก่อน การสร้างโปรเจ็ค Web Application และสร้างไฟล์ HTML
แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม Java Servlet เพื่อแสดงรายละเอียดของค่าพารามิเตอร์ที่ผู้ใช้ป้อน
เข้ามาออกทางโปรแกรม Web Browser และแสดงผลการออกออกทาง Web Browser
2.1 การพัฒนาโปรแกรม CustomerServlet.java
โปรแกรม CustomerServlet.java เป็นโปรแกรมที่ถูกเรียกใช้โดย addCustomer.html เมื่อผู้ใช้กดปุ่ม Add
โปรแกรมนี้จะทำหน้าที่นำค่าพารามิเตอร์ต่างๆ ที่ผู้ใช้ป้อนมาแสดงผล โดยมีขั้นตอนการทำงานดังนี้
1. อ่านค่าพารามิเตอร์ต่างๆ ที่ส่งมาจาก addCustomer.html
2. แสดงรายละเอียดของค่าต่างๆ
2.1.1 การอ่านค่าพารามิเตอร์จาก addCustomer.html
เว็บเพจ addCustomer.html จะส่งข้อมูลของรายชื่อหนังสือใหม่ผ่านมาทางพารามิเตอร์ต่างๆ ดังนี้
● id รหัสของลูกค้า

● name ชื่อลูกค้า

● addr ที่อยู่ลูกค้า

● mobile หมายเลขโทรศัพท์มือถือ

● fax หมายเลข fax

● email ของลูกค้า

พารามิเตอร์ต่างๆ เหล่านี้จะถูกส่งผ่านโปรโตคอล Http และในโปรแกรมเราสามารถที่จะอ่านค่าพารา-มิเตอร์
เหล่านี้ได้จากออปเจ็ค request โดยเรียกใช้เมธอด getParameter( ) ซึ่งโปรแกรมส่วนนี้จะมีคำสั่งต่างๆ ดังนี้
String id = request.getParameter("id");
String name = request.getParameter("name");
String addr = request.getParameter("addr");
String mobile = request.getParameter("mobile");
String fax = request.getParameter("fax");
String email = request.getParameter("email");


16

2.1.2 การแสดงรายละเอียดของค่าต่างๆ
โปรแกรม Servlet จะสามารถแสดงผลออกทาง Web Browser ได้โดยการเขียนโค้ด HTML
ภายในคำสั่ง out.println( ) โดยมีคำสั่งในเมธอด processRequest( ) ดังนี้
protected void processRequest(HttpServletRequest request,
HttpServletResponse response) throws IOException
{

PrintWriter out = response.getWriter();

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

out.println("<html>");
out.println("<head>");
out.println("<title>Customer Information</title>");
out.println("</head>");
out.println("<body>");

String id = request.getParameter("id");
String name = request.getParameter("name");
String addr = request.getParameter("addr");
String mobile = request.getParameter("mobile");
String fax = request.getParameter("fax");
String email = request.getParameter("email");

out.println("<h1> Customer Information </h1>");
out.println("<b>ID: </b>" + id + "<BR>");
out.println("<b>Name: </b>" + name + "<BR>");
out.println("<b>Address: </b>" + addr + "<BR>");
out.println("<b>Mobile: </b>" + mobile + "<BR>");
out.println("<b>Fax: </b>" + fax + "<BR>");
out.println("<b>E-mail: </b>" + email + "<BR>");

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

out.close();
}


17

2.2 ขั้นตอนการพัฒนาโปรแกรม CustomerServlet.java
เราสามารถที่จะพัฒนาโปรแกรม CustomerServlet.java ตามขั้นตอนดังนี้
1. เลือกหน้าต่าง Projects แล้วคลิ๊กขวาที่โหนด WebApp → New → Servlet ดังรูปที่ 2.1

รูปที่ 2.1 การสร้างไฟล์ประเภท Servlet
2. กำหนดชื่อ Class Name เป็น CustomerServlet และ Package เป็น servlet ดังรูปที่ 2.2 แล้วกด Next

รูปที่ 2.2 การกำหนดชื่อ Package และ ชื่อ File Servlet

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
}


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)
processRequest(request, response); //เพิ่ม Code เข้าไปที่นี่
}

1. Run โปรแกรม WebApp โดยคลิ๊กขวาที่ addCustomer.html
เลือก Run As → Run on Server → กดปุ่ม Finish ดังรูปที่ 2.4

รูปที่ 2.4 การรันทดสอบ addCustomer Servlet


20

2. ทดลองป้อนข้อมูล ดังรูปที่ 2.5

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

3. โปรแกรมจะแสดงผลลัพธ์ ดังรูปที่ 2.6

รูปที่ 2.6 ผลลัพธ์จากการเรียกโปรแกรม CustomerServlet


21

Exercise 3 โปรแกรมเว็บสำหรับการทำโพล
เนื้อหาที่ต้องศึกษาก่อน การเขียนโปรแกรม Java Servlet เพื่ออ่านค่าพารามิเตอร์
แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม Java Servlet เพื่อทำ Poll โดยให้ผู้ใช้สามารถที่จะโหวตเลือกภาษา
คอมพิวเตอร์ที่ชอบได้ แล้วโปรแกรมจะแสดงผลการโหวตทาง Web Browser
3.1 โปรแกรม vote.html
โปรแกรม vote.html เป็นหน้าเว็บที่ให้ผู้ใช้สามารถที่จะทำการโหวตเลือกภาษาคอมพิวเตอร์ได้ โดยเมื่อผู้ใช้
กดปุ่ม Vote โปรแกรมเว็บก็จะไปทำการเรียก URL ที่ชื่อ processVote โปรแกรมนี้มีหน้าเว็บดังรูปที่ 3.1

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

3.2 การพัฒนาโปรแกรม VoteServlet.java
โปรแกรม VoteServlet.java เป็นโปรแกรมที่ถูกเรียกใช้โดย vote.html เมื่อผู้ใช้กดปุ่ม Vote โปรแกรมนี้จะทำ
หน้าที่เพื่อนำค่าที่ผู้ใช้โหวตมาประมวลผล โดยมีการทำงานคือ
1. กำหนดตัวแปร counter และ lang
2. อ่านค่าพารามิเตอร์ต่างๆที่ส่งมาจาก vote.html และทำการประมวลผล
3. แสดงผลการโหวต


22

3.2.1 กำหนดตัวแปร counter และ lang
ตัวแปร count เป็นอะเรย์เพื่อที่จะเก็บจำนวนผลโหวตของภาษาคอมพิวเตอร์แต่ละภาษา และตัวแปร lang
เป็นอะเรย์ของ String เพื่อที่จะเก็บรายชื่อภาษาคอมพิวเตอร์ ตัวแปรทั้งสองเป็นตัวแปรของออปเจ็คที่จะประกาศ
นอกเมธอด (Instance Variable) โดยมีคำสั่งประกาศดังนี้
String []lang ={"Java", "C#", "C", "Pascal"};
int []count = new int[4];

3.2.2 อ่านค่าพารามิเตอร์ต่างๆ ที่ส่งมาจาก vote.html และทำการประมวลผล
เว็บเพจ vote.html จะส่งข้อมูลของการโหวต ไปกับพารามิเตอร์ที่ชื่อ lang โดยจะมีค่าเป็นหมายเล 1-4
ในที่นี้จะมีคำสั่ง request.getParameter เพื่อจะอ่านค่าที่โหวตมา จากนั้นจะทำการแปลงค่าซึ่งเป็น String ให้เป็นค่า
จำนวนเต็มโดยใช้ Wrapper class จากนั้นจะเป็นการเพิ่มจำนวนโหวตในตัวแปร count ตามค่า index ที่สอดคล้องกับ
ภาษาที่โหวตมา โดยมีคำสั่งต่างๆ ดังนี้
String vote = request.getParameter("lang");
int voteNum = Integer.parseInt(vote) – 1;
count[voteNum]++;

3.2.3 การแสดงผลการโหวต
คำสั่งแสดงผลการโหวตจะเป็นคำสั่งเพื่อแสดงค่าของตัวแปร count โดยมีคำสั่งดังนี้
for (int i = 0; i < count.length; i++) {
out.println(lang[i] +" = " + count[i] + "<BR>");
}


23

3.3 ขั้นตอนการพัฒนาโปรเจ็ค Voter
เราสามารถที่จะพัฒนาแบบฝึกหัดนี้ที่ชื่อโปรเจ็ค Voter ตามขั้นตอนดังนี้
1. สร้าง New Project ชนิด Dynamic Web Application ชื่อ Voter ดังรูปที่ 3.2

รูปที่ 3.2 การสร้างโปรเจ็ค Web Application ชื่อ Voter


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>


25

4. เลือกหน้าต่าง 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)


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)


int voteNum = Integer.parseInt(vote) - 1;
count[voteNum]++;
out.println("<title>Servlet VoteServlet</title>");
out.println("<h1>Servlet VoteServlet at " +request.getContextPath() + "</h1>");
out.println(lang[i] +" = " + count[i] + "<BR>");
}


out.close();
}

processRequest(request, response);
}

}
}


27

5. ทำการ Deploy Web Project ที่ Apache Tomcat
ไปที่ Tab Server ด้านล่าง คลิ๊กขวา ที่ Tomcat Server แล้วเลือก Add and Remove ดังรูปที่ 3.5

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

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

รูปที่ 3.6 ตัวอย่างผลลัพธ์ของโปรเจ็ค Voter

28

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


29

สำหรับโปรแกรม VoteServlet.java ที่ปรับปรุงใหม่จะมี source code ดัง Listing ที่ 3.3 ให้ลองทดลองเขียนโปรแกรม
ตามนี้ แล้วทำการรันโปรแกรมใหม่
Listing ที่ 3.3 โปรแกรม VoteServlet.java เพื่อป้องกันการโหวตซ้ำ
package controller;

import java.util.HashSet;


@WebServlet("/processVote")
public class VoteServlet extends HttpServlet {

HashSet<String> voter = new HashSet<String>();
String[] lang = { "Java", "C#", "C", "Pascal" };
int[] count = new int[4];

HttpServletResponse response) throws ServletException, IOException {


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("<title>Servlet VoteServlet</title>");
out.println("<h1>Servlet VoteServlet at " + request.getContextPath()
+ "</h1>");
out.println(lang[i] + " = " + count[i] + "<BR>");
}
out.close();
}
protected void doGet(HttpServletRequest request,
}
protected void doPost(HttpServletRequest request,
}

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


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 เพื่อเข้าไปจัดการ Database


31

4.2 การสร้างตาราง books
ขั้นตอนนี้จะเป็นการสร้าง Table ที่ชื่อ books โดยให้อยู่ภายใต้ Schema ที่ชื่อ test โดย Table นี้กำหนดให้มี
Column ต่างๆ ดังตารางที่ 4.1

ตารางที่ 4.1 Table books

ชื่อ Column ชนิด ขนาด Primary Key Index
isbn varchar 20 Y Y
title varchar 70 - -
author varchar 50 - -
price float - - -

เราจะใช้โปรแกรม MySQL WorkBench ในการที่จะสร้าง Table นี้โดยมีขั้นตอนต่างๆ ดังนี้
1. คลิ๊กที่ icon ชื่อ Add Table... แล้วใส่ชื่อ table และ ชื่อ field ตามตารางที่ 4.1 ดังรูปที่ 4.3 แล้วกดปุ่ม Apply

รูปที่ 4.3 การเลือกคำสั่งสร้างตาราง


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 ผลลัพธ์จากการสร้างตาราง


33

4.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 คำสั่งเพิ่มข้อมูลในตาราง


34

2. เราสามารถที่จะดูข้อมูลที่ป้อนเข้าไปได้
โดยการคลิ๊กขวาที่ Table ที่ชื่อ books เแล้วลือก Select Rows – Limit1000 ดังรูปที่ 4.6

รูปที่ 4.6 การเรียกดูข้อมูลใน Table ชื่อ books


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.java
5.1 การ Config Apache Tomcat ให้สามารถใช้งาน JDBC Driver
ในที่นี้จะใช้ Driver ที่ชื่อ MySQL Connector/J ซึ่งเป็น JDBC Driver ที่ใช้ติดต่อกับ MySQL
File ที่จำเป็น คือ mysql-connector-java-5.1.15-bin.jar โดยให้ Copy ไปวางที่ directory /lib ของ Apache Tomcat
Default อยู่ที่ C:Program 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


36

ขั้นตอนแรกจะทำการสร้างโปรเจ็คใหม่โดยการเลือกเมนู File → New Project →Dynamic Web
Application
กำหนดชื่อ Project Name เป็น WebBaseDB (ตัวอย่างการสร้าง Dynamic Web Application หน้า 23)
แล้วกด Finish
5.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.3


37

รูปที่ 5.3 การใช้งาน Palette สำหรับการสร้างหน้าจอ HTML

Listing ที่ 5.1 โปรแกรม addBook.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Add a new book</title>
</head>
<body><h1>Add a new book</h1><P>
<form action="addBook.do" method="POST">
ISBN : <input type="text" name="isbn" value="" size="15"/> <BR>
Title : <input type="text" name="title" value="" size="50"/> <BR>
Author : <input type="text" name="author" value="" size="50"/> <BR>
Price : <input type="text" name="price" value="" size="10"/> <BR>
<input type="submit" value="Add" />
</form>
</body>
</html>

5.4 การพัฒนาโปรแกรม thankyou.html
โปรแกรม thankyou.html เป็นเว็บเพจที่ใช้แสดงให้เห็นว่าข้อมูลได้ถูกเพิ่มเข้าไปในฐานข้อมูลแล้ว โดยมี
source code ดัง Listing ที่ 5.2 ซึ่งขั้นตอนการพัฒนาโปรแกรมนี้จะเป็นเช่นเดียวกับการพัฒนาโปรแกรม
addBook.html


38

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

5.5 การพัฒนาโปรแกรม AddBookServlet.java
โปรแกรม AddBookServlet.java เป็นโปรแกรมที่ถูกเรียกใช้โดย addBook.html เมื่อผู้ใช้กดปุ่ม Add
โปรแกรมนี้จะทำหน้าที่เพื่อติดต่อกับฐานข้อมูลโดยมีขั้นตอนการทำงานดังนี้
1. อ่านค่าพารามิเตอร์ต่างๆ ที่ส่งมาจาก addBook.html
2. เชื่อมต่อกับฐานข้อมูล books ดังรูปที่ 5.4

รูปที่ 5.4 การเชื่อมต่อของ Servlet กับฐานข้อมูล

3. เพิ่มรายชื่อหนังสือใหม่ลงในฐานข้อมูล books
4. เรียกเว็บเพจ Thankyou.html
5.5.1 การอ่านค่าพารามิเตอร์จาก addBook.html
เว็บเพจ addBook.html จะส่งข้อมูลของรายชื่อหนังสือใหม่ผ่านมาทางพารามิเตอร์ต่างๆดังนี้
● isbn หมายเลข ISBN ของหนังสือ

● title ชื่อหนังสือ

● author ชื่อผู้แต่ง

● price ราคาหนังสือ

พารามิเตอร์ต่างๆ เหล่านี้จะถูกส่งผ่านโปรโตคอล Http และในโปรแกรมเราสามารถที่จะอ่านค่าพารามิเตอร์
เหล่านี้ได้จากออปเจ็ค request โดยเรียกใช้เมธอด getParameter() ซึ่งโปรแกรมส่วนนี้จะมีคำสั่งต่างๆ ดังนี้
String isbn = request.getParameter("isbn");
String author = request.getParameter("author");
String title = request.getParameter("title");
String priceStr = request.getParameter("price");

5.5.2 การเชื่อมต่อกับฐานข้อมูล
● เพิ่ม Resource ชนิด Data source ลงไปที่ Container ของ Tomcat
● เรียกใช้คำสั่ง SQL โดยใช้เมธอด executeQuery() หรือ executeUpdate()


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 ดังนี้


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.sql.Connection;
import java.sql.SQLException;
import java.sql.Statement;

import javax.annotation.Resource;
import javax.servlet.RequestDispatcher;
import javax.sql.DataSource;

@WebServlet("/addBook.do")
public class AddBookServlet extends HttpServlet {


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


out.println("<title>Add a new book</title>");


41

out.println("<h1> Add a new book </h1>");

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


RequestDispatcher obj =request.getRequestDispatcher("thankyou.html");
obj.forward(request, response);
}
} catch (SQLException ex) {
out.println("Error " + ex);
return;
}
out.close();
}

}

}
}

3. บางส่วนที่ลืม import หรือพบ Error หรือพบ Warning ขึ้นมา ให้ตรวจสอบ import file
โดยกด Ctrl+Shift+O Eclipse จะมีให้เลือกว่าจะ import ไฟล์จากแพ็คเก็จใด ดังรูปที่ 5.5 เรียกว่าการทำ
Organize Imports

รูปที่ 5.5 Ctrl+Shift+O ให้ Eclipse เป็นตัวช่วยในการแสดง Import file

5.7 ทดสอบโปรแกรม
1. ทำการ Deploy โปรแกรม WebBaseDB ซึ่งใน Eclipse ทำโดย Click ขวาที่ Add and Remove
2. เรียกใช้งานหน้า addBook.html แล้วทดสอบกรอกข้อมูลดังรูปที่ 5.6


42

รูปที่ 5.6 ตัวอย่างการป้อนข้อมูล Books

3. เมื่อกดปุ่ม Add โปรแกรมก็จะใส่ข้อมูลลงใน Database และแสดงผลลัพธ์ดังรูปที่ 5.7

รูปที่ 5.7 ผลลัพธ์ที่แสดงทาง Web Browser
4. เข้าไปดูข้อมูล โดยใช้ MySQLWorkbench เลือกคำสั่ง Select Rows -... จาก Table ที่ชื่อ books ดังรูปที่ 5.8

รูปที่ 5.8 ข้อมูลที่ถูกป้อนเข้า Table ที่ชื่อ books


43

Exercise 6 การพัฒนาโปรแกรมเว็บเพื่อติดต่อฐานข้อมูล MongoDB
เนื้อหาที่ต้องศึกษาก่อน การเขียนโปรแกรม Java Servlet เพื่ออ่านค่าพารามิเตอร์
แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม Web Application โดยใช้ Java Servlet เพื่อเชื่อมต่อกับฐานข้อมูลที่
เป็น NoSQL อย่าง MongoDB ซึ่งเป็นฐานข้อมูลที่เก็บข้อมูลแบบ Document ในรูปแบบของ JSON และมีสามารถ
ในการเก็บข้อมูลขนาดใหญ่ได้
1. ติดตั้ง MongoDB
2. ทดลองใช้ MongoDB
3. เขียนโปรแกรม Java Servlet เพื่อเชื่อมต่อกับ MongoDB

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


44

6.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" : "Java
SE", "price" : 1400 }

ทั้งนี้ id จะเป็น index ในการระบุหมายเลขของข้อมูล นอกจากนี่้เราสามารถที่จะค้นหาข้อมูลสำหรับราย
การใดๆได้เช่น การค้นหาตามชื่อผู้แต่ง
> db.books.find({author:"thanachart"})

หรืออาจต้องการค้นชื่อหนังสือที่มีคำว่า Mongo


45

> db.books.find({title:/Mongo/})

เราสามารถที่จะ update ข้อมูล เช่นต้องการเปลี่ยนราคาของหนังสือที่แต่งโดย thanachart เป็น 1300 โดย
ใช้คำสั่ง
> db.books.update({author:"thanachart"},{$set: {price:1300}})

เราจะลองทำการเพิ่ม comment ของหนังสือเช่นมีผู้อ่านที่ชื่อ Somchai อาจมาให้ความเห็นว่าหนังสือของ
James Gosling เป็น “good reading book” โดยเราอาจใช้คำสั่งดังนี้

> new_comment = {reader:"Somchai", date: new Date(), text: "good reading book"}
> db.books.update({author:/James/},{$push: {comment:new_comment}})

ซึ่งเราจะได้ข้อมูลนี้ใหม่เป็น
{ "_id" : ObjectId("511fb0387c199204a9f733a5"), "isbn" : "555123", "author" : "thanachart", "title" :
"Introduction to MongoDB", "price" : 1300 }
{ "_id" : ObjectId("511fb24e7c199204a9f733a6"), "author" : "James Gosling", "comment" : [ {
"reader" : "Somchai", "date" : ISODate("2013-02-16T16:45:07.309Z"), "text" : "good reading
book" } ], "isbn" : "555124", "price" : 1400, "title" : "Java SE" }

6.3 การเขียนโปรแกรม Java Servlet เพื่อเชื่อมต่อกับ MongoDB
เราสามารถที่จะเขียนโปรแกรมเชื่อมต่อกับฐานข้อมูล MongoDB ได้หลายแบบ แต่ในที่นี่จะใช้
MongoDB Driver ที่สามารถจะดาวน์โหลดมาได้จาก https://github.com/mongodb/mongo-java-driver/downloads

ในที่นี้จะสาธิตการเพิ่มข้อมูลลงใน MongoDB เช่นเดียวกับเนื้อหาในบทที่ผ่านมาโดยเราจะให้มี
โปรแกรม addBook.html ดัง Listing ที่ 5.1 แต่ให้แก้ tag action ดังนี้
<form action="MongoDBServlet" method="POST">

และทำการเขียนโปรแกรม Servlet โดยมีขั้นตอนดังนี้

1. คลิ๊กขวาที่โหนด WebBaseDB จากนั้นเลือกคำสั่ง New → Servlet
กำหนด Java Package เป็น controller , Class Name เป็น MongoDBServlet แล้วกด Finish
2. copy ไฟล์ mongo-2.10.1.jar ไปไว้ที่ไดเร็กทอรี่ โดยให้ Copy ไปวางที่ directory /lib ของ Apache Tomcat
ซึ่ง Default อยู่ที่ C:Program FilesApache Software FoundationTomcat 6.0lib
3. ในหน้าต่าง editor ให้แก้ไข source code ของไฟล์ MongoDBServlet.java ให้เป็นไปตาม Listing ที่ 6.1

Listing ที่ 6.1 โปรแกรม MongoDBServlet.java

package controller;



46

import java.net.UnknownHostException;

import javax.servlet.annotation.WebServlet;

import com.mongodb.BasicDBObject;
import com.mongodb.DB;
import com.mongodb.DBCollection;
import com.mongodb.Mongo;

/**
* Servlet implementation class MongoDBServlet
*/
@WebServlet("/MongoDBServlet")
public class MongoDBServlet extends HttpServlet {
Mongo m = null;

/**
* @see HttpServlet#HttpServlet()
*/
public MongoDBServlet() {
super();
// TODO Auto-generated constructor stub
}

try {
m = new Mongo( "localhost" );
System.out.println("Connected");
} catch (Exception ex) {
System.out.println(ex);
}
}



try {

DB db = m.getDB( "test" );
BasicDBObject book = new BasicDBObject();
book.put("isbn", isbn);
book.put("author", author);
book.put("title", title);
book.put("price", price);
DBCollection coll = db.getCollection("books");
coll.insert(book);


47

RequestDispatcher obj =request.getRequestDispatcher("thankyou.html");

} catch (UnknownHostException ex) {
return;
}
out.close();
}

}

}

}

1. ทำการ Deploy โปรแกรม WebBaseDB
2. เรียกใช้งานหน้า addBook.html แล้วทดสอบกรอกข้อมูล
3. ไปที่โปรแกรม admin ของ MongoDB แล้วเรียกคำสั่ง db.books.find() จะเห็นข้อมูลใหม่ที่ป้อนเข้ามา


48

Exercise 7 โปรแกรมเว็บเพื่อสาธิตขอบเขตของออปเจ็ค
เนื้อหาที่ต้องศึกษาก่อน การเขียนโปรแกรม Servlet เพื่ออ่านค่าพารามิเตอร์
แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม Java Servlet เพื่ออธิบายขอบเขตการทำงานของออปเจ็คใน
โปรแกรมแบบเว็บ (Object Scope) ที่มีอยู่สี่แบบคือ Page, Request, Session และ Web (Application) โดยจะทดลอง
ส่งค่าของออปเจ็คผ่านกันระหว่างโปรแกรม Servlet สองชุด
7.1 การพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request
ออปเจ็คที่สร้างขึ้นในโปรแกรม Java Servlet ในแต่โปรแกรมจะมีขอบเขตการใช้งาน (scope) อยู่เพียงแค่
โปรแกรมนั้นๆ (URL นั้นๆ) ไม่สามารถที่จะใช้โปรแกรม Java Servlet หรือ JSP ตัวอื่นเรียกใช้ออปเจ็คตัวนั้นได้ การ
จะให้โปรแกรม Servlet หรือ JSP อื่นๆ เรียกออปเจ็คใดๆ ได้นั้น จะต้องมีการเขียน source code เพื่อส่งผ่านค่าขอ
งออปเจ็คนั้นไปยังออปเจ็คอื่นๆ ทั้งนี้เราสามารถกำหนดขอบเขตการใช้งานเพิ่มเติมได้อีก 3 แบบคือ
● Request ออปเจ็คสามารถถูกเรียกใช้เมื่อมีการเรียกมาจากโปรแกรม Servlet/JSP อื่น

● Session ออปเจ็คจะเก็บอยู่ใน Session ของ Web Browser ตราบเท่าที่ยังมีการใช้งานอยู่

● Application ออปเจ็คจะสามารถใช้งานได้ในโปรแกรม Servlet/JSP ใดๆ

ที่อยู่ใน Web Application เดียวกัน
การส่งค่าของออปเจ็คจาก URL หนึ่งมายัง URL อื่นทำได้หลายวิธี แบบฝึกหัดที่ผ่านมาเป็นการแสดงให้เห็น
ถึงการส่งค่าพารามิเตอร์ที่อยู่ในฟอร์มของไฟล์ HTML ไปยังโปรแกรม Java Servlet ที่สามารถเรียกใช้ได้โดย คำสั่ง
request.getParameter()

นอกจากนี้เรายังสามารถที่จะส่งออปเจ็คไปยัง โปรแกรม Java Servlet หรือ JSP อื่นโดยการใช้คำสั่ง
setAttribute() อาทิเช่นส่งค่าของตัวแปร String ชื่อว่า name โดยจะเก็บไว้ใน attribute ที่ชื่อ RequestName และมีรูป
แบบคำสั่งดังนี้
String name = “Numnonda”;
request.setAttribute(“RequestName”, name);

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

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

ส่วนคำสั่งที่ใช้ในการที่จะ forward จากโปรแกรม Servlet ตัวหนึ่งไป URL อื่นจะเป็นคำสั่งที่มีรูปแบบดังนี้
RequestDispatcher obj = request.getRequestDispatcher("SecondServlet");
obj.forward(request,response);

โดยที่ SecondServlet คือชื่อ URL ที่ต้องการ forward
ในขั้นตอนนี้จะเป็นการพัฒนาโปรแกรมเพื่อสาธิตการทำงานของขอบเขตการทำงานของ Object แบบ
request โดยการพัฒนาโปรแกรม Servlet ขึ้นมาสองโปรแกรมคือ FirstServlet ที่จะใช้ในการส่งออปเจ็คซึ่งมี source
code ตาม Listing ที่ 7.1 และ โปรแกรม SecondServlet ที่จะใช่ในการอ่านค่าของออปเจ็คที่ส่งออกมาแล้วนำมา
แสดงผล ซึ่งมี source code ตาม Listing ที่ 7.2


49

Listing ที่ 7.1 โปรแกรม FirstServlet.java

package servlet;

import java.io.*;
import java.net.*;

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

public class FirstServlet extends HttpServlet {

protected void processRequest(HttpServletRequest request, HttpServletResponse
response)


try {
String name = "Numnonda";
request.setAttribute("RequestName", name);
RequestDispatcher obj = request.getRequestDispatcher("SecondServlet");
} finally {
out.close();
}
}

}

}

}
}

Listing ที่ 7.2 โปรแกรม SecondServlet.java

package servlet;

import java.io.*;
import java.net.*;


public class SecondServlet extends HttpServlet {

protected void processRequest(HttpServletRequest request, HttpServletResponse response)


try {
String name = (String) request.getAttribute("RequestName");
out.println(name);
} finally {
out.close();


50

}
}

}

}

}
}

7.1.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request
เราสามารถที่จะพัฒนาโปรแกรม ตามขั้นตอนดังนี้
1. เลือกเมนู File → New → Dynamic Web Application
กำหนดค่า Project Name เป็น ScopeDemo
2. คลิ๊กขวาที่โหนด ScopeDemo → New → Servlet
กำหนดค่า Java Package เป็น servlet และ Class Name เป็น FirstServlet แล้วกด Finish
ในหน้าต่าง Editor เขียน Source code ของ FirstServlet.java ดัง Listing ที่ 7.1 แล้ว Save
3. คลิ๊กขวาที่โหนด ScopeDemo อีกครั้ง
จากนั้นเลือกคำสั่ง New → Servlet
กำหนด Java Package เป็น servlet และ Class Name เป็น SecondServlet แล้วกด Finish
4. ในหน้าต่าง Editor เขียน Source code ของ SecondServlet.java ดัง Listing ที่ 7.2 แล้ว Save
7.1.2 ขั้นตอนการทดสอบโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request
เราสามารถที่จะทดสอบโปรแกรม ตามขั้นตอนดังนี้
1. ทำการ Deploy โปรเจ็ค ScopeDemo โดยคลิ๊กขวาที่ Apache Tomcat แล้ว Add and Remove Project เข้าไป


51

รูปที่ 7.1 การ Add Project เข้าสู่ Apache Tomcat หรือเรียกว่าการ Deploy

2. ทำการ Run โปรเจ็ค ScopeDemo
3. ในโปรแกรม Web Browser เลือก URL ที่ชื่อ http://localhost:8080/ScopeDemo/FirstServlet สังเกตุผลลัพธ์
4. ทดลองรัน URL ที่ชื่อ http://localhost:8080/ScopeDemo/SecondServlet โดยตรง แล้วสังเกตผลลัพธ์อีกครั้ง
จะเห็นว่า ค่าที่แสดงเป็น null ทั้งนี้เนื่องจากโปรแกรมไม่ได้มีการส่ง request มาจาก FirstServlet
7.2 การพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Session
ขอบเขตการใช้งานของออปเจ็คแบบ Request จะส่งผ่านค่าของออปเจ็คตาม request ของ URL ทั้งนี้ไม่
สามารถที่จะใช้งานได้โดยการเรียก URL นั้นโดยไม่มีการส่ง request มาดังแสดงในขั้นตอนที่ผ่านมา เราสามารถที่จะ
กำหนดขอบเขตของการใช้งานของออปเจ็ค ให้ใช้งานผ่านใน session ของ Web Browser ได้ (ตราบเท่าที่ Browser ยัง
ใช้ session นั้นอยู) โดยการกำหนด Attribute ลงในออปเจ็คชนิด HttpSession ซึ่งจะเป็นออปเจ็คที่เก็บข้อมูล
่
session ของ Web Browser อาทิเช่นเก็บค่าของตัวแปร String ชื่อว่า name ไว้ใน attribute ของ session ที่ชื่อ
SessionName โดยมีรูปแบบคำสั่งดังนี้

HttpSession session = request.getSession();
session.setAttribute("SessionName", name);

โปรแกรม Java Servlet อื่นๆสามารถที่จะเรียกใช้ attribute ของ Session ที่ชื่อ SessionName และดึงค่าของ
ตัวแปร name ออกมาได้ โดยใช้คำสั่ง getAttribute() เพื่อเรียกค่าจาก Session โดยมีรูปแบบดังนี้
String name = (String) session.getAttribute("SessionName");


52

session โดยการพัฒนาโปรแกรม Servlet ขึ้นมาสองโปรแกรมคือ FirstSessionServlet ที่จะใช้ในการส่งออปเจ็คซึ่งมี
source code ตาม Listing ที่ 7.3 และ โปรแกรม SecondSessionServlet ที่จะใช่ในการอ่านค่าของออปเจ็คที่ส่งออกมา
แล้วนำมาแสดงผล ซึ่งมี source code ตาม Listing ที่ 7.4
Listing ที่ 7.3 โปรแกรม FirstSessionServlet.java

package servlet;
import java.io.*;
import java.net.*;
public class FirstSessionServlet extends HttpServlet {

try {
session.setAttribute("SessionName", name);
} finally {
out.close();
}
}

}

}

}

}

Listing ที่ 7.4 โปรแกรม SecondSessionServlet.java

package servlet;

import java.io.*;
import java.net.*;


public class SecondSessionServlet extends HttpServlet {

try {
String name = (String) session.getAttribute("SessionName");


53

out.println(name);
} finally {
out.close();
}
}

}

}

}

}

7.2.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Session
1. เลือกเมนู File → New แล้วเลือก Dynamic Web Application
กำหนด Project Name เป็น ScopeDemo
2. คลิ๊กขวาที่โหนด ScopeDemo จากนั้นเลือกคำสั่ง New → Servlet
กำหนด Java Package เป็น servlet และ Class Name เป็น FirstServlet แล้วกด Finish
3. ในหน้าต่าง Editor เขียน Source code ของ FirstSessionServlet.java ดัง Listing ที่ 6.3 แล้ว Save
กำหนด Package เป็น servlet และ Class Name เป็น SecondServlet แล้วกด Finish
ในหน้าต่าง Editor เขียน Source code ของ SecondSessionServlet.java ดัง Listing ที่ 6.4 แล้ว Save
7.2.2 ขั้นตอนการทดสอบโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Session
1. ทำการ Deploy โปรเจ็ค ScopeDemo
3. ในโปรแกรม Web Browser เลือก URL ที่ชื่อ http://localhost:8080/ScopeDemo/FirstSessionServlet
4. ทดลองรัน URL ที่ชื่อ http://localhost:8080/ScopeDemo/SecondSessionServlet แล้วสังเกตผลลัพธ์
5. ทดลองปิด Web Browser แล้วเปิดขึ้นมาใหม่แล้วทดลองรัน URL ที่ชื่อ
http://localhost:8080/ScopeDemo/SecondSessionServlet ใหม่แล้วสังเกตผลลัพธ์


54

7.3 การพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Application
เราสามารถที่จะกำหนดขอบเขตการใช้งานของออปเจ็คให้เป็นแบบ Application กล่าวคือสามารถใช้กับ
โปรแกรม Java Servlet หรือ JSP ทุกโปรแกรมที่อยู่ภายใน Web Application เดียวกันตราบใดที่ Web Server ยัง
deploy โปรแกรม Web Application ดังกล่าวอยู่ ถึงแม้ว่า Web Browser ของฝั่ง client จะปิดไปแล้วก็ตาม การกำหนด
ขอบเขตแบบ Application สามารถทำได้โดยใช้คำสั่ง setAttribute() กับออปเจ็คชนิด ServletContext ซึ่งเป็นออปเจ็ค
ที่เก็บข้อมูลของ Web Application ซึ่งในแต่ละ Web Application จะมีออปเจ็คชนิด ServletContext อยู่หนึ่งตัว และ
สามารถเรียกมาได้โดยใช้คำสั่ง getServletContext()
ตัวอย่างคำสั่งในการเก็บออปเจ็คชนิด String ที่ชื่อ name ไว้ใน attribute ที่ชื่อ AppName ของออปเจ็ค ชนิด
ServletContext จะมีรูปแบบคำสั่งดังนี้

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

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

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

application โดยการพัฒนาโปรแกรม Servlet ขึ้นมาสองโปรแกรมคือ FirstAppServlet ที่จะใช้ในการส่งออปเจ็คซึ่งมี
source code ตาม Listing ที่ 7.5 และ โปรแกรม SecondAppServlet ที่จะใช้ในการอ่านค่าของออปเจ็คที่ส่งออกมา
แล้วนำมาแสดงผล ซึ่งมี source code ตาม Listing ที่ 7.6
Listing ที่ 7.5 โปรแกรม FirstAppServlet.java
package servlet;
import java.io.*;
import java.net.*;

public class FirstAppServlet extends HttpServlet {
response)
try {
context.setAttribute("AppName", name);
} finally {
out.close();
}
}



55

}

}

}
}

Listing ที่ 7.6 โปรแกรม SecondAppServlet.java

package servlet;
import java.io.*;
import java.net.*;

public class SecondAppServlet extends HttpServlet {
response)
try {
String name = (String) context.getAttribute("AppName");
out.println(name);
} finally {
out.close();
}
}
}
}
}

7.3.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Application
1. เลือกเมนู File → New แล้วเลือก Dynamic Web Application
กำหนด Project Name เป็น ScopeDemo
2. คลิ๊กขวาที่โหนด ScopeDemo จากนั้นเลือกคำสั่ง New → Servlet
กำหนด Java Package เป็น servlet และ Class Name เป็น FirstServlet แล้วกด Finish
3. ในหน้าต่าง Editor เขียน Source code ของ FirstAppServlet.java ดัง Listing ที่ 6.5 แล้ว Save
กำหนด Java Package เป็น servlet และ Class Name เป็น SecondServlet แล้วกด Finish
ในหน้าต่าง Editor เขียน Source code ของ SecondAppServlet.java ดัง Listing ที่ 6.6 แล้ว Save


56

7.3.2 ขั้นตอนการทดสอบโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Application
1. ทำการ Build และ Deploy โปรเจ็ค ScopeDemo
3. ในโปรแกรม Web Browser เลือก URL ที่ชื่อ http://localhost:8080/ScopeDemo/FirstAppServlet
4. ทดลองรัน URL ที่ชื่อ http://localhost:8080/ScopeDemo/SecondAppServlet แล้วสังเกตผลลัพธ์
5. ทดลองปิด Web Browser แล้วเปิดขึ้นมาใหม่แล้วทดลองรัน URL ที่ชื่อ
http://localhost:8080/ScopeDemo/SecondAppServlet ใหม่แล้วสังเกตผลลัพธ์


57

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

เนื้อหาที่ต้องศึกษาก่อน การพัฒนาโปรแกรมเว็บเพื่อติดต่อกับฐานข้อมูล
แบบฝึกหัดนี้จะเป็นการปรับปรุงโปรเจ็ค Web Application ที่ชื่อ WebBaseDB ที่ใช้ในการเชื่อมโยงฐาน
ข้อมูลและใส่ข้อมูลลง Table โดยเพิ่มคลาสประเภท Web Listener เพื่อทำการเชื่อมต่อกับฐานข้อมูลแทนวิธีการเดิมที่
เชื่อมต่อในเมธอด init()
1. พัฒนาโปรแกรม Init.java
2. แก้ไขโปรแกรม AddBookServlet.java
8.1 การพัฒนาโปรแกรม Init.java
โปรแกรม AddBookServlet กำหนดคำสั่งในการเชื่อมต่อกับข้อมูลที่อยู่ในเมธอด init() ซึ่งเป็นวิธีการที่ไม่
เหมาะสมนัก เนื่องจากโปรแกรม Servlet ทุกโปรแกรมที่จะเชื่อมต่อกับฐานข้อมูลต้องเขียนโปรแกรมในส่วนของ
เมธอด init() ที่ซ้ำกัน
โปรแกรม Servlet จะมี Listener อยู่สองชนิดคือ 1. Context Listener และ 2. Session Listener
ในแบบฝึกหัดนี้จะพัฒนาโปรแกรมโดยการใช้ Context Listener ซึ่งมันจะถูกเรียกเมื่อ Web Application
เริ่มต้นการทำงาน หรือสิ้นสุดการทำงาน
เราจะเขียนโปรแกรมประเภท Context Listener โดยมีขั้นตอนดังนี้
1. เขียน คลาสประเภท Listener ( คือ Class ที่ implements interface ServletContextListener )
2. Implements method ที่บังคับใน Interface ของ Listener นั้นๆ

โปรแกรม Init.java คือโปรแกรมที่เป็น ServletContextListener มันจะเชื่อมต่อกับฐานข้อมูล
เมื่อ Web Application เริ่มทำงาน แล้วเก็บออปเจ็ค Connection ไว้ภายใน ServletContext เพื่อลดจำนวนครั้งในการ
เชื่อมต่อฐานข้อมูล
เขียนคำสั่งเชื่อมต่อฐานข้อมูลทำที่ Method contextInitialized( ) ซึ่งจะถูกเรียกเมื่อ Web Application เริ่มต้น
การทำงาน


58

ขั้นตอนการพัฒนาโปรแกรม Init.java
1. คลิ๊กขวาที่โหนด WebBaseDB แล้วเลือกคำสั่ง New → Listener
กำหนดค่า Java Package เป็น listener และ Class Name เป็น Init กด Next
แล้วเลือกช่อง Lifecycle แล้วกด Finish ดังรูปที่ 8.1

รูปที่ 8.1 การสร้างคลาสประเภท Web Listener

2. ตรวจสอบ context.xml ว่ามีอยู่หรือไม่ ถ้าไม่มีให้ เพิ่ม Resource ชนิด DataSource ลงไปที่ Tomcat
โดยสร้าง file context.xml ที่ Folder WebContentMETA-INF
<Context>
<Resource


59

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

3. เขียน source code อยู่นอกเมธอดใดๆ เพื่อให้ใช้ทั้งในเมธอด contextInitialized และ contextDestroyed เพื่อ
ทำการขอ Datasource จาก Container ส่วนตัวแปร ds ที่รับเป็น Instance Member
@Resource(name="jdbc/test")


เพิ่ม source code (ข้อ 4 - 5) ใน เมธอด contextInitialized เพื่อเตรียม connection ให้พร้อมใช้งาน
4. ขอ Connection จาก Datasource
conn = ds.getConnection();

5. นำ Connection ไปเก็บที่ ServletContext แล้ว กำหนดชื่อ context variable เป็น connection
(arg0 คือ instance ของ ServletContextEvent ที่ส่งมาให้ทาง argument)
arg0.getServletContext().setAttribute("connection", conn);

6. เพิ่มคำสั่งต่อไปนี้ในเมธอด contextDestroyed เพื่อให้ทำลาย Database Connection
กรณี Web Application หยุดใช้งาน
public void contextDestroyed(ServletContextEvent arg0) {
try{
conn.close();
Logger.getLogger(Init.class.getName()).log(Level.SEVERE, null, ex);
}
}

เราจะได้ source code ของไฟล์ Init.java ดัง Listing ที่ 8.1

Listing ที่ 8.1 โปรแกรม Init.java

package listener;


import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;

public class Init implements ServletContextListener {

@Resource(name="jdbc/test")



60

public void contextInitialized(ServletContextEvent arg0) {
try {

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

try {
conn.close();
}
}
}

8.2 การปรับปรุงโปรแกรม AddBookServlet.java
โปรแกรม Init.java จะมำหน้าที่ในการเชื่อมต่อกับฐานข้อมูล ดังนั้นเราจึงต้องแก้ไขคำสั่งการเชื่อมโยงฐาน
ข้อมูลที่อยู่ในไฟล์ AddBookServlet.java โดยมีขั้นตอนดังนี้
1. ให้ลบคำสั่ง

2. แก้ไขเมธอด init() ให้เป็นดังนี้
conn = (Connection) getServletContext().getAttribute("connection");
}

เราจะได้โปรแกรม AddBookServlet.java ใหม่ดัง Listing ที่ 8.2
Lisitng ที่ 8.2 โปรแกรม AddBookServlet.java

package controller;

@WebServlet("/addBook.do")
public class AddBookServlet extends HttpServlet {



conn = (Connection) getServletContext().getAttribute("connection");


61

}


try {


String sql = "INSERT INTO books VALUES('" + isbn + "','" + title
+ "','" + author + "'," + price + ")";

RequestDispatcher obj = request
.getRequestDispatcher("Thankyou.html");
}

return;
}
out.close();
}

}

}
}

1. ทำการ Build และ Deploy โปรแกรม WebBaseDB
2. Run โปรแกรม WebBaseDB ทั้งนี้ต้องทำการรัน MySQL Database Server ก่อน
3. โปรแกรมจะแสดงหน้า addBook.html ให้เราใส่ข้อมูล
ซี่งเมื่อกด OK ผลลัพธ์ก็จะถูกบันทึกลง Table books เช่นเดียวกับแบบฝึกหัดที่ 5


62

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

เนื้อหาที่ต้องศึกษาก่อน การเขียนโปรแกรม Servlet เพื่ออ่านค่าพารามิเตอร์
แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม Web Application เพื่ออธิบายการใช้ Servlet Filter ในการตรวจ
สอบการ login เข้าสู่ระบบ โดยโปรแกรม Java Servlet บางโปรแกรมที่อยู่ใน Web Application จะถูก Filter เรียกเพื่อ
ตัวสอบสถานะการ login ก่อนที่จะสามารถใช้โปรแกรมนั้นได้
9.1 การพัฒนาโปรแกรม Servlet Filter
โปรแกรม Servlet Filter เป็นโปรแกรม Java ที่กำหนดขึ้นมาใน Web Application ซึ่งจะดักการทำงานของ
โปรแกรม Java Servlet ใดๆ แล้วสามารถที่จะแก้ไขค่าของออปเจ็คชนิด request และ response ก่อนที่โปรแกรม Java
Servlet นั้นจะถูกเรียกใช้ต่อไป ตัวอย่างของการพัฒนาโปรแกรม Servlet Filter คือ

● การควบคุมการใช้งาน Servlet หรือการทำ Authentication
● การบล็อกการใช้งาน Servlet หรือตรวจสอบการใช้งาน Servlet
● การเปลี่ยนแปลงข้อมูลของออปเจ็ค request
โปรแกรม Servlet Filter จะเป็น โปรแกรม Java ที่ implements อินเตอร์เฟสที่ชื่อ Filter และมีเมธอดหลักคือ
init( ), destroy( ) และ doFilter( )

เราสามารถที่จะกำหนดให้ URL ใดๆ ในโปรแกรม Web Application ถูก Filter จากโปรแกรม Servlet Filter
ใดๆ โดยการกำหนดค่า annotation อาทิเช่นคำสั่ง
@WebFilter("*")
public class LoginFilter implements Filter {
…
}

เป็นการกำหนดให้โปรแกรม URL ทุกตัวที่อยู่ใน Web Application นี้ ต้องถูกดักโดย Servlet Filter ที่
ชื่อ LoginFilter
แบบฝึกหัดนี้จะกำหนดให้มี Web Page ที่ชื่อ login.html ซึ่งจะทำการเรียกโปรแกรม LoginServlet ซึ่งจะตรวจสอบ
ค่า username และ password ที่ป้อนเข้ามา หากถูกต้องก็จะกำหนดให้ค่าของออปเจ็คที่ชื่อ loginFlag เป็น true
(กำหนดให้ขอบเขตของออปเจ็ค loginFlag เป็นแบบ Session โดยการ setAttribute ให้กับออปเจ็คชนิด
HttpSession )

โปรแกรม Web Application นี้ยังมี Servlet Filter ที่ชื่อ LoginFilter ซึ่งจะทำหน้าที่อ่านค่าของออปเจ็ค
LoginFlag ที่อยู่ในออปเจ็คชนิด HttpSession ถ้าหากไม่พบหรือมีค่าเป็น false โปรแกรมจะระบุ HTTP Error 401
(This request requires HTTP authentication . )

สุดท้ายจะมีการเขียนโปรแกรม Java Servlet ที่ชื่อ ShowServlet เพื่อแสดงข้อความว่า HelloWorld เพื่อแสดง
ให้เห็นว่าโปรแกรมจะถูกดักโดย LoginFilter


63

9.2 การเขียนหน้า Login
หน้า Login จะมีโปรแกรมสองโปรแกรมคือ login.html ซึ่งจะเป็น web page ที่มีลักษณะดังรูปที่ 9.1 และมี
source code ตาม Listing ที่ 9.1 นอกจากจะมีโปรแกรม LoginServlet ซึ่งจะทำหน้าที่ในการอ่านพารามิเตอร์ที่ชื่อ
username และ password พร้อมทั้งตรวจสอบว่ามีค่าเป็น thana และ secret หรือไม่ หากใช่ก็จะกำหนดค่า ตัวแปร
loginFlag เป็น true แล้วเก็บลงในออปเจ็คชนิด HttpSession โปรแกรมนี้จะมี source code ดัง Listing ที่ 9.2

รูปที่ 9.1 เว็บหน้า Login
Listing ที่ 9.1 โปรแกรม login.html

<html>
<head><title>Login Page</title>
</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>

Listing ที่ 9.2 โปรแกรม LoginServlet.java

package controller;
import java.io.*;
import java.net.*;

@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {

boolean loginflag=false;
try{
String username =request.getParameter("username");
String password =request.getParameter("password");
System.out.println("input username="+username + ": password="+password);
if(username.equals("thana") && password.equals("secret")){
loginflag=true;
}
request.getSession().setAttribute("loginFlag", loginflag);
response.sendRedirect("show.do");
}catch (Exception e) {
}


64

}

}

}

}
}

ขั้นตอนการพัฒนาโปรแกรม
1. สร้างโปรเจ็คใหม่โดยการเลือกเมนู File → New → Dynamic Web Project แล้วกำหนด Project เป็น
FilterDemo แล้วกด Finish
2. สร้างไฟล์ login.html โดยคลิ๊กขวาที่ FilterDemo แล้วเลือกคำสั่ง New → HTML File
กำหนด HTML File Name เป็น login แล้วกด Finish
3. ในหน้าต่าง Editor เขียน Source code ของ login.html ดัง Listing ที่ 9.1 แล้ว Save
4. สร้างไฟล์ LoginServlet.java โดยคลิ๊กขวาที่ FilterDemo แล้วเลือกคำสั่ง New → Servlet
กำหนดค่า Java Package เป็น controller และ Class Name เป็น LoginServlet.java แล้วกด Finish
ในหน้าต่าง Editor เขียน Source code ของ LoginServlet.java ดัง Listing ที่ 9.2 แล้ว Save
9.3 การเขียน Servlet Filter
โปรแกรม LoginFilter จะทำหน้าที่ในการเรียก attribute ที่ชื่อ loginFlag และหากไม่พบหรือมีค่าเป็น
false โปรแกรมจะระบุ HTTP Error 401 (Unauthorize) โปรแกรม LoginFilter จะมี source code หลัก
อยู่ที่ เมธอด doFilter() ดัง Listing ที่ 9.3
กรณีนี้จะกำหนดให้ URL เฉพาะที่เป็น *.do จึงจะเรียกใช้ Filter ที่ชื่อ LoginFilter ให้ใช้โปรแกรม
Eclipse สร้าง Filter

Listing ที่ 9.3 เมธอด doFilter() ของ โปรแกรม LoginFilter.java

package filter;


@WebFilter("*.do")
public class LoginFilter implements Filter {
public void destroy() {
}

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

HttpServletRequest req = (HttpServletRequest) request;
HttpSession session = req.getSession();


65

Boolean flag = (Boolean) session.getAttribute("loginFlag");
boolean loginFlag;
if (flag == null) {
loginFlag = false;
} else {
loginFlag = flag;
}
if (!loginFlag) {
HttpServletResponse res = (HttpServletResponse) response;
res.sendError(HttpServletResponse.SC_UNAUTHORIZED);
return;
}
chain.doFilter(request, response);
}
public void init(FilterConfig fConfig) throws ServletException {
}
}

1. เลือกหน้าต่าง Projects แล้วคลิ๊กขวาที่โหนด FilterDemo จากนั้นเลือกคำสั่ง New > Other..
2. ในไดอะล็อก New File ให้เลือก Categories ทีชื่อ Web ซึ่งโปรแกรมก็จะแสดง File Types ต่างๆ ภายใต้
Category นี้ ให้เราเลือก Filter แล้วกด Next
3. กำหนด Class Name: เป็น LoginFilter และ Java Package เป็น filter แล้วกด Next
4. ในหน้าถัดไป ให้ใช้ค่าที่กำหนดไว้ ดังรูปที่ 9.2 แล้วกด Finish


66

รูปที่ 9.2 การกำหนดค่าของ Filter
5. ในหน้าต่าง Editor เขียน Source code ของเมธอด doFilter() ของไฟล์ LoginFilter.java ดัง Listing ที่
9.3 แล้ว Save


67

9.4 การเขียนโปรแกรม ShowServlet
โปรแกรม ShowServlet จะทำหน้าที่เพื่อแสดงข้อความว่า Hello World และให้ใช้งาน Filter
source code ดัง Listing ที่ 9.4

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

response)

try {
out.println("<title>Servlet ShowServlet</title>");
out.println("<h1> Hello World </h1>");
} finally {
out.close();
}
}
}
}
}

1. คลิ๊กขวาที่ FilterDemo แล้วเลือกคำสั่ง New → Servlet
กำหนดค่า Java Package เป็น view และ Class Name เป็น ShowServlet
2. กำหนด URL Mapping เป็น /show.do ดังรูปที่ 9.3 แล้วกด Finish


68

รูปที่ 9.3 การกำหนดค่า URL pattern
3. ในหน้าต่าง Editor เขียน Source code ของ ShowServlet.java ดัง Listing ที่ 9.4 แล้วเลือกคำสั่ง Save
9.5 ขั้นตอนการทดสอบโปรแกรม
1. ทำการ Build และ Deploy โปรเจ็ค FilterDemo
2. ทำการ Run โปรเจ็ค FilterDemo
3. ทดลองรัน URL ที่ชื่อ http://localhost:8080/FilterDemo/show.do
แล้วสังเกตผลลัพธ์ จะเห็นว่าแสดงข้อผิดพลาด HTTP 401
4. ทดลองรัน URL ที่ชื่อ http://localhost:8080/FilterDemo/login.html
แล้วป้อน username เป็น thana และ password เป็น secret สังเกตว่าผลลัพธ์เป็นอย่างไร

69

Exercise 10 การเขียนโปรแกรม JSP เพื่อแสดงผลลัพธ์

แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม JSP เพื่อแสดงข้อมูลจากฐานข้อมูล ออกทางโปรแกรม Web
Browser โดยจะเป็นการพัฒนาโปรเจ็ค WebBaseDB เพื่อเติม

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

โปรแกรม hello.jsp เป็นโปรแกรม JSP เพื่อแสดงข้อความและวันเวลาของ Web Server โปรแกรมนี้จะ
เป็นการแสดงผลแบบ dynamic content จึงต้องพัฒนาโดยใช้ภาษา JSP ทั้งนี้แบบฝึกหัดนี้จะใช้โปรเจ็คเดิม
(WebBaseDB) ในการพัฒนาโปรแกรม โดยมีขั้นตอนการพัฒนาโปรแกรมดังนี้

1. คลิ๊กขวาที่โหนด WebBaseDB แล้วเลือกคำสั่ง New → JSP File
กำหนดค่า JSP File Name เป็น hello แล้วกด Finish ดังรูปที่ 10.1

รูปที่ 10.1 สร้าง JSP file

2. ในหน้าต่าง editor ให้แก้ไข source code ของไฟล์ hello.jsp ให้เป็นไปตาม Listing ที่ 10.1
4. ในหน้าต่าง Projects เลือกไฟล์ hello.jsp แล้วเลือก Run โปรแกรม
5. โปรแกรมจะแสดงผลดังรูปที่ 10.2


70

Listing ที่ 10.1 โปรแกรม hello.jsp

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<html>
<head><title>Hello JSP</title></head>
<body>
<h1>My First JSP</h1>
Hello : Current time is : <%= new java.util.Date() %>
</body>
</html>

รูปที่ 10.2 ผลลัพธ์ของ hello.jsp

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

โปรแกรม viewBook.jsp เป็นโปรแกรม JSP เพื่อแสดงข้อมูลของ Table ที่ชื่อ books โปรแกรมนี้จะเรียกใช้
standard tags ที่กำหนดไว้ใน JSTL ซึ่งทำให้ผู้เขียนโปรแกรม JSP ไม่ต้องเขียน source code ภาษา Java โดยมีคำสั่ง
ต่างๆ ที่สำคัญดังนี้
10.2.1 การกำหนด Tag Library
โปรแกรม viewBook.jsp จะเรียกใช้ JSTL จึงจำเป็นต้องมีคำสั่ง Taglib เพื่อที่จะประกาศ Library ดังนี้
(Project หรือ Web Server ต้องมองเห็น Library .jar ของ JSTL เพื่อใช้งาน อาจต้อง download เพิ่ม)
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>

10.2.2 การกำหนด Datasource
โปรแกรม JSP นี้จะทำการเชื่อมต่อกับฐานข้อมูล โดยจะต้องใช้ DataSource ของโปรเจ็ค โดยสามารถ
กำหนดได้สองวิธี
1. กรณีที่มี datasource ซึ่งเชื่อมต่อฐานข้อมูลที่ต้องการอยู่แล้ว ก็สามารถใช้อันเดิมได้เลย ตัวอย่างเช่น
jdbc/test โดยไม่จำเป็นต้องสร้าง dataSource ขึ้นใหม่อีก
2. กรณีที่ยังไม่มี datasource ให้ใช้คำสั่ง setDataSource เป็น Tag เพื่อให้เราสามารถกำหนดการเชื่อมต่อกับ
ฐานข้อมูล และกำหนดค่าไว้ในตัวแปรตามชื่อที่กำหนด

ถึงแม้ว่าโปรเจ็ค WebBaseDB จะมี Datasource อยู่แล้ว แต่แบบฝึกหัดนี้จะกำหนด Datasource ขึ้นมาใหม่
โดยกำหนดเป็นตัวแปรที่ชื่อ newdatasource ดังนี้


71

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

เพื่อเป็นการเชื่อมต่อฐานข้อมูลที่อยู่ที่ URL ที่ชื่อ jdbc:mysql:///test
*สามารถใช้ URL ของ DB ได้ 2 แบบ คือ jdbc:mysql://localhost:3306/test หรือ jdbc:mysql:///test

คำสั่ง sql:query เป็นคำสั่งที่จะเรียกดูข้อมูลของฐานข้อมูลที่เชื่อมต่อใน DataSource ที่เป็น jdbc/test หรือ
ตัวแปร newdatasource ในโปรแกรม viewBook.jsp เราจะทำการเรียกใช้คำสั่ง SQL คือ select * from books โดยใช้
คำสั่ง sql:query ดังนี้
<sql:query var="db" dataSource="jdbc/test">
SELECT * FROM books
</sql:query>
หรือ
<sql:query var="db" dataSource="${newdatasource}">
SELECT * FROM books
</sql:query>

10.2.3 การใช้คำสั่ง c:forEach เพื่อแสดงผล
การแสดงค่าของผลลัพธ์ที่ได้จากการ Query ฐานข้อมูล สามารถทำได้ การแจงข้อมูลทีละแถวโดยใช้คำสั่ง
c:forEach โดยโปรแกรมนี้จะแสดงข้อมูลชื่อหนังสือ และชื่อผู้แต่ง โดยมีคำสั่งดังนี้

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

ขั้นตอนการพัฒนาโปรแกรมนี้ มีดังนี้
1. คลิ๊กขวาที่โหนด WebBaseDB แล้วเลือกคำสั่ง New → JSP
กำหนดค่า JSP File Name เป็น viewBook แล้วกด Finish
2. เพิ่ม JSTL Library เพื่อให้ JSP เรียกใช้งานได้
(Download file jstl-1.2.jar และ jstl-api-1.2.jar จาก http://jstl.java.net/download.html)
นำ .Jar File ทั้ง 2 ไปไว้ที่ folder {$TOMCAT}lib ซึ่งเป็น path ของที่ install Apache Tomcat ดังรูปที่ 10.3

รูปที่ 10.3 การเพิ่ม JSTL Library บน Apache Tomcat


72

เมื่อดูที่ Project → Java Resource → Libraries → Apache Tomcat v6.0 จะเห็นว่ามี JSTL เพิ่มแล้ว ดังรูปทีี่
10.4

รูปที่ 10.4 JSTL Library ที่ Apache Tomcat สามารถใช้งานได้

3. ในหน้าต่าง editor ให้แก้ไข source code ของไฟล์ viewBook.jsp ให้เป็นไปตาม Listing ที่ 10.2
5. ในหน้าต่าง Projects เลือกไฟล์ viewBook.jsp แล้วเลือก Run โปรแกรม
6. ที่ Web Browser เปลี่ยน URL เป็น http://localhost:8080/WebBaseDB/viewBook.jsp จะได้
ผลลัพธ์ดังตัวอย่างในรูปที่ 10.5

รูปที่ 10.5 ผลลัพธ์ของ viewBook.jsp

Listing ที่ 10.2 โปรแกรม viewBook.jsp
<html> <head>
<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>


73

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

เนื้อหาที่ต้องศึกษาก่อน การพัฒนาโปรแกรมเว็บเพื่อติดต่อกับฐานข้อมูล และ
การเขียนโปรแกรม JSP เพื่อแสดงผลลัพธ์
แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม JSP เพื่อสร้าง Web Form ให้ผู้ใช้เลือกรายการหนังสือต่างๆ ที่มีอยู่
ใน table ที่ชื่อ books จากนั้นจะแสดงรายการที่ผู้ใช้เลือกออกมาทางเว็บเพจ
11.1 การพัฒนาโปรแกรม selectBooks.jsp
โปรแกรม selectBooks.jsp เป็นโปรแกรม JSP ที่เขียนเพื่อแสดงรายการหนังสือที่มีอยู่ใน table ที่ชื่อ books
ออกมาแสดงในรูปแบบของ Web Form เพื่อให้ผู้ใช้เลือกรายการหนังสือและจำนวนดังรูปที่ 11.6 ทั้งนี้ Web Form นี้
จะเรียก url ที่ชื่อ processSelection เมื่อมีการกดปุ่ม Select โปรแกรมนี้จะเรียกใช้ SQL tags ของ JSTL เพื่อแสดง
รายการข้อมูลรายชื่อหนังสือ โดยมี source code ดังแสดงใน Listing ที่ 11.1 และมีขั้นตอนการพัฒนาโปรแกรมดังนี้
1. เริ่มต้นสร้างโปรแกรม Web-Base Application โดยการสร้าง Project ใหม่ มีขั้นตอนดังนี้
2. เลือกเมนู File → New → Project ดังรูปที่ 11.1


3. เลือกรูป Folder ชื่อ Web และเลือก Dynamic Web Project ดังรูปที่ 11.2



74

4. ให้กำหนด Project Name: เป็น BookOnline
ส่วนการเก็บ File Eclipse จะใช้ Directory ที่ถามเมื่อครั้งเปิดขึ้นมาเป็น Default
แต่ถ้าต้องการระบุ ก็สามารถคลิกเครื่องหมายออก (Uncheck) แล้วทำการระบุ Directory ใหม่ได้
ดังรูปที่ 11.3 จากนั้นกด ปุ่ม Next

รูปที่11.3 การกำหนดชื่อโปรเจ็ค
5. โปรแกรมจะแสดง Folder ที่เก็บ source code และ Output folder (ที่เก็บ Class file)
คือ [directory ที่ใส่ก่อนรัน Eclipse]src และ [directory ที่ใส่ก่อนรัน Eclipse]buildclasses
ดังรูปที่ 11.4 จากนั้นกดปุ่ม Next

รูปที่ 11.4 แสดงที่เก็บ source code และ Output directory


75

6. โปรแกรมจะแสดง Context root และ Content directory ดังรูปที่ 11.5 จากนั้นกดปุ่ม Finish

รูปที่ 11.5 แสดงชื่อ Context root และ Content directory

7. คลิ๊กขวาที่ Project BookOnline เลือกคำสั่ง New → JSP File
กำหนดค่า JSP File Name เป็น selectBooks แล้วกด Finish
8. ในหน้าต่าง editor ให้แก้ไข source code ของไฟล์ selectBooks.jsp ให้เป็นไปตาม Listing ที่ 11.1
9. กดปุ่ม Save
10. ทำการรันโปรแกรมจะได้ผลลัพธ์ดังตัวอย่างในรูปที่ 11.6


76


77


78


79

รูปที่ 11.6 ตัวอย่างผลลัพธ์ของโปรแกรม selectBooks.jsp

Listing ที่ 11.1 โปรแกรม selectBooks.jsp


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<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">


80

<table border="1">
<thead>
<tr>
<th></th>
<th> Title </th>
<th> Author </th>
<th> Price</th>
</tr>
</thead>
<tbody>
<c:forEach var="book" items="${rs.rows}">
<tr>
<td><input type="checkbox" name="isbn"
value="${book.isbn}" /> </td>
<td>${book.title}</td>
<td>${book.author}</td>
<td>${book.price}</td>
</tr>
</c:forEach>
</tbody>
</table>
<input type="submit" value="Select" />
</form>
</body>
</html>

11.2 การพัฒนาโปรแกรม Book.java
โปรแกรม Book.java เป็นคลาสที่มี attribute ที่สอดคล้องกับ table ที่ชื่อ books โดยมี source code ดัง
Listing ที่ 11.2 และมีขั้นตอนการพัฒนาดังนี้
1. คลิ๊กขวาที่ Projects BookOnline แล้วเลือกคำสั่ง New → Class..
2. กำหนด Package เป็น model และ Class Name เป็น Book กด Finish ดังรูปที่ 11.7


81

รูปที่ 11.7 การ New Class Book.java เพื่อใช้เป็น JavaBean ที่มีโครงสร้างเดียวกับ Table

3. เพิ่ม attribute ภายในคลาส BookActionForm ดังนี้
private String isbn;
private String author;
private String title;
private double price;
หรือ
private String isbn,author,title;

4. ทำการ encapsulate attribute (สร้างเมธอด getter และ setter)
โดยการคลิ๊กขวาภายในหน้าต่าง editor ของ source code
แล้วเลือก Source > Generate Getters and Setters... ดังรูปที่ 11.8


82

รูปที่ 11.8 การ New Class Book.java เพื่อใช้เป็น JavaBean ที่มีโครงสร้างเดียวกับ Table
5. เลือกว่าจะสร้าง getters หรือ setters หรือทั้งสองอย่าง โดยการเลือก Check box ดังรูปที่ 11.9 แล้วกด OK


83

รูปที่ 11.9 กำหนด Encapsulation ให้ Attribute หรือ Instance Member

Listing ที่ 11.2 โปรแกรม Book.java

package model;

public class Book {

private String isbn,author,title;

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

11.3 การพัฒนาโปรแกรม Cart.java
โปรแกรม Cart.java เป็นคลาสที่ทำหน้าที่คล้ายกับ shopping cart เพื่อเก็บออปเจ็คชนิด Book ตามรายการ
หนังสือที่ผู้ใช้เลือก โดยอ้างอิงจากหมายเลข isbn ซึ่งโปรแกรมจะทำการค้นรายชื่อหนังสือจาก table ที่ชื่อ books
หมายเลข isbn ที่อ้างอิง แล้วจะแปลงเป็นออปเจ็คชนิด books ก่อนจะใส่ลงใน cart โปรแกรมนี้จะมี source code
ดัง Listing ที่ 11.3 และมีขั้นตอนการพัฒนาดังนี้
1. คลิ๊กขวาที่ Projects BookOnline แล้วเลือก New → Class
กำหนด Package เป็น model , Class Name เป็น Cart.java กด Finish
2. ในหน้าต่าง editor ให้แก้ไข source code ของไฟล์ Cart.java ให้เป็นไปตาม Listing ที่ 11.3 แล้ว Save
Listing ที่ 11.3 โปรแกรม Cart.java

package model;

import java.sql.ResultSet;


84

import java.util.LinkedList;
import java.util.List;

public class Cart {
List <Book> books;
Connection conn;

public void addItem(String isbn) {
try {
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);
}
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);
}
}

11.4 การพัฒนาโปรแกรม ProcessSelection.java
โปรแกรม ProcessSelection.java เป็นโปรแกรม Java Servlet ที่ทำหน้าที่อ่านค่าพารามิเตอร์ที่ชื่อ isbn ซึ่ง
ส่งมาจากหน้า Web Form ของโปรแกรม selectBooks.java โดยใช้คำสั่ง getParameterValues ดังนี้
String[] isbn = request.getParameterValues("isbn");

จากนั้นจะทำการเรียก session เพื่อเรียก attribute ที่ชื่อ cart ออกมาโดยใช้คำสั่งดังนี้
(ทำ Casting เป็น Cart เนื่องจาก HttpSession.getAttribute มัน Return Reference ชนิด Object ออกมา)

HttpSession session = request.getSession(true);
Cart cart = (Cart) session.getAttribute("cart");

กรณีที่ไม่พบ attribute ที่ชื่อ cart โปรแกรมจะทำการเก็บ attribute นี้ขึ้นใหม่โดยใช้คำสั่งดังนี้
if (cart == null) {
ServletContext ctx = getServletContext();
Connection conn = (Connection) ctx.getAttribute("connection");
cart = new Cart(conn);
session.setAttribute("cart", cart);


85

}

เมื่อได้ค่า attribute ที่ชื่อ cart มาแล้ว โปรแกรมก็จะเก็บรายการชื่อ isbn ของหนังสือที่ผู้ใช้เลือกลงใน
ออปเจ็คของ cart โดยใช้คำสั่งดังนี้
for (int i = 0; i < isbn.length; i++) {
cart.addItem(isbn[i]);
}

เมื่อสิ้นสุดการทำงานโปรแกรมก็จะไปเรียก URL ที่ชื่อ view.cart ต่อไป โดยใช้คำสั่งดังนี้
RequestDispatcher pg = request.getRequestDispatcher("viewCart.jsp");
pg.forward(request, response)

สำหรับโปรแกรมนี้จะมี source code ของเมธอด processRequest ดัง Listing ที่ 11.4

ขั้นตอนการพัฒนาโปรแกรม ProcessSelection.java มีดังนี้
1. คลิ๊กขวาที่ Projects BookOnline แล้วเลือก New → Servlet
กำหนด Package เป็น controller , Class Name เป็น ProcessSelection
2. ในหน้าต่าง Editor เขียน Source code ของ ProcessSelection.java ดัง Listing ที่ 11.4 แล้ว Save


86

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

package controller;


import javax.servlet.ServletContext;
import javax.servlet.http.HttpSession;

import model.Cart;

public class ProcessSelection extends HttpServlet {

public ProcessSelection() {
super();
}

}

}



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

HttpSession session = request.getSession(true);
Cart cart = (Cart) session.getAttribute("cart");
if (cart == null) {
ServletContext ctx = getServletContext();
Connection conn = (Connection) ctx.getAttribute("connection");
cart = new Cart(conn);
session.setAttribute("cart", cart);
}
for (int i = 0; i < isbn.length; i++) {
cart.addItem(isbn[i]);
}
cart = (Cart) session.getAttribute("cart");
RequestDispatcher pg = request.getRequestDispatcher("viewCart.jsp");
pg.forward(request, response);

out.close();
}
}


87

11.5 การพัฒนาโปรแกรม Init.java
โปรแกรม Init.java เป็นโปรแกรมประเภท ServletContextListener เพื่อเชื่อมต่อกับฐานข้อมูลเมื่อเริ่มต้น
แล้วเก็บออปเจ็ค connection ไว้ภายใน ServletContext โดยมีขั้นตอนการพัฒนาเช่นเดียวกับการพัฒนาโปรแกรม
Init.java ใน Exercise 7 การพัฒนา WebBase DB โดยคลาสประเภท Web Listener (หน้า 55)
และจะต้องมีการสร้างไฟล์ context.xml แบบเดียวกันกับ Exercise ดังกล่าว
Listing ที่ 11.5 Source Code ของโปรแกรม Init.java

package listener;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
public class Init implements ServletContextListener {

public Init() {
// TODO Auto-generated constructor stub
}
private DataSource ds;
public void contextInitialized(ServletContextEvent arg0) {
try {
Connection conn;
conn = ds.getConnection();
System.out.println("Book Online : MySQL Connection Created ");
}
}
try {
conn.close();
System.out.println("Book Online : MySQL Connection Destroyed");

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

11.6 การพัฒนาโปรแกรม viewCart.jsp
โปรแกรม viewCart.jsp เป็นโปรแกรม JSP ที่เขียนเพื่อแสดงรายการหนังสือที่ผู้ใช้เลือก และเก็บใน
shopping cart ออกมาแสดง โปรแกรมนี้จะใช้ Expression Language เพื่อแสดงข้อมูลใน session ดัง Listing ที่ 11.6
และมีขั้นตอนการพัฒนาดังนี้
1. คลิ๊กขวาที่ Project BookOnline แล้วเลือก New → JSP File
กำหนด JSP File Name เป็น viewCart แล้วกด Finish
2. ในหน้าต่าง editor ให้แก้ไข source code ของไฟล์ viewCart.jsp ให้เป็นไปตาม Listing ที่ 11.6 แล้ว Save


88

Listing ที่ 11.6 โปรแกรม viewCart.jsp

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

11.7 ขั้นตอนการทดสอบโปรแกรม
1. ทำการ Deploy โปรเจ็ค BookOnline
2. ทดลองรัน URL ที่ชื่อ http://localhost:8080/BookOnline/selectBooks.jsp
ทดลองเลือกรายการหนังสือ แล้วกดปุ่ม Select
โปรแกรมจะเรียก URL ที่ชื่อ http://localhost:8080/BookOnline/processSelection
เพื่อแสดงรายการใน Cart ดังรูปที่ 11.10
3. ทดลองกลับไปเลือกรายการหนังสือเพิ่มเติม หรือเรียก URL ที่ชื่อ
http://localhost:8080/BookOnline/viewCart.jsp โดยตรงแล้วสังเกตผลลัพธ์

รูปที่ 11.10 การแสดงข้อมูลใน Cart


89

Exercise 12 การสร้าง Custom Tags สำหรับโปรแกรม JSP
แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม JSP เพื่อสร้าง custom tag โดยจะเริ่มแสดงการพัฒนาโปรแกรม
ตั้งแต่การเขียน JSP โดยไม่ใช้ custom tags แล้วสร้าง tag โดยใช้ Tag Handler และขั้นตอนสุดท้ายจะเป็นการสร้าง
tag โดยใช้ Tag File โดยโปรแกรม JSP ที่เขียนจะเป็นการพิมพ์ข้อความว่า Hello xxxx จำนวนสิบครั้ง โดยที่ xxxx คือ
ชื่อที่ส่งมาทางพารามิเตอร์ที่ชื่อ name
12.1 การพัฒนาโปรแกรม hello.jsp
โปรแกรม hello.jsp เป็นโปรแกรม JSP ที่เขียนโดยใช้ scriptlet เรียกคำสั่งภาษาจาวา โดยจะมีคำสั่งในการ
อ่านพารามิเตอร์ของออปเจ็ค request ที่ชื่อ name แล้วจะพิมพ์ข้อความ Hello xxxx จำนวนสิบครั้ง โดยโปรแกรมนี้
จะมี source code ดัง Listing ที่ 12.1 และมีขั้นตอนการพัฒนาโปรแกรมดังนี้
1. เลือกเมนู File → New → Dynamic Web Project
กำหนด Project Name เป็น JSPDemo
2. คลิ๊กขวาที่ Project JSPDemo จากนั้นเลือกคำสั่ง New → JSP File
กำหนด JSP File Name เป็น hello
3. ในหน้าต่าง editor ให้แก้ไข source code ของไฟล์ hello.jsp ให้เป็นไปตาม Listing ที่ 12.1
4. ทำการ Build และ Deploy โปรแกรม JSPDemo
5. ในหน้าต่าง Projects เลือกไฟล์ hello.jsp แล้วเลือก Run โปรแกรมโดยให้ส่งผ่านพารามิเตอร์ทาง URL เช่น
http://localhost:8080/JSPDemo/hello.jsp?name=Thanisa เราจะได้ผลการรันดังรูปที่ 12.1


90


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


91


92


93


94

รูปที่ 12.1 ผลลัพธ์ของโปรแกรม hello.jsp


95

12.2 การพัฒนาโปรแกรม helloJSTL.jsp
โปรแกรม helloJSTL.jsp เป็นโปรแกรม JSP ที่ทำงานเช่นเดียวกับโปรแกรมที่ผ่านมาแต่จะทำการเรียกใช้
JSP Standard Tag Library ในการพิมพ์ข้อความ Hello xxx สิบครั้ง แทนการเขียนคำสั่ง scriptlet โดยโปรแกรมนี้จะ
มี source code ดัง Listing ที่ 12.2 และจะมีขั้นตอนการพัฒนาโปรแกรมดังนี้
1. คลิ๊กขวาที่ Project JSPDemo เลือก New → JSP File
กำหนด JSP File Name เป็น helloJSTL แล้วกด Finish
2. ตรวจสอบ JSTL Libraries ที่ต้องใช้งาน ถ้าไม่มีให้ทำการ import เข้ามา
ตามหัวข้อ 2. เพิ่ม JSTL Library เพื่อให้ JSP เรียกใช้งานได้ (หน้าที่ 66)

รูปที่ 12.2 ตรวจสอบ Library ของ JSTL

3. ในหน้าต่าง editor ให้แก้ไข source code ของไฟล์ helloJSTL.jsp ให้เป็นไปตาม Listing ที่ 12.2
4. ทำการ run โปรแกรม
โดยกำหนด URL เป็น http://localhost:8080/JSPDemo/helloJSTL.jsp?name=Thanisa
จะได้ผลลัพธ์เช่นเดียวกับโปรแกรม hello.jsp
Listing ที่ 12.2 โปรแกรม helloJSTL.jsp

<html>
<head>
</head>
<body>
<h1>JSP Demo</h1>
<c:forEach begin="1" end="10">
Hello ${param.name} <br>
</c:forEach>
</body>
</html>


96

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

12.3.1 สร้าง Tag File
ไฟล์นี้จะทำหน้านี้เป็นตัวจัดการ Tag โดยเขียนเป็นโปรแกรม JSP และมีขั้นตอนการพัฒนาดังนี้
1. สร้าง Folder ชื่อ tags ภายใต้ WebContentWEB-INF
2. คลิ๊กขวาที่ Folder tags กำหนด File Name เป็น NameTagFile ดังรูปที่ 12.3

รูปที่ 12.3 การสร้าง Tag File


97

3. หน้าต่าง Editor ให้ implement source code ดัง Listing ที่ 12.3

Listing ที่ 12.3 โปรแกรม NameTagFile.tag

<%@tag description="Tag Name" pageEncoding="UTF-8"%>
<c:forEach begin="1" end="10">
Hello ${param.name} <br>
</c:forEach>

12.3.2 เขียนโปรแกรม helloTagFile.jsp
โปรแกรม helloTagFile.jsp จะเรียกใช้ Tag ที่ชื่อ NameTagFile มีขั้นตอนดังนี้
1. คลิ๊กขวาที่ Project JSPDemo จากนั้นเลือกคำสั่ง New → JSP File
2. กำหนด File Name = helloTagFile แล้วกด Finish
3. ในหน้าต่าง editor ให้แก้ไข source code ของไฟล์ helloTagFile.jsp ให้เป็นไปตาม Listing ที่ 12.4
4. ทำการ run โปรแกรม
โดยกำหนด URL เป็น http://localhost:8080/JSPDemo/helloTagFile.jsp?name=Thanisa
จะได้ผลลัพธ์เช่นเดียวกับโปรแกรม helloJSTL.jsp
Listing ที่ 12.4 โปรแกรม helloTagFile.jsp
<%@taglib tagdir="/WEB-INF/tags" prefix="myTags" %>
<html>
<head>
</head>
<body>
<h1>JSP Demo</h1>
<myTags:NameTagFile />
</body>
</html>

12.4 การพัฒนาโปรแกรม helloTag.jsp
โปรแกรม helloTag.jsp เป็นโปรแกรม JSP ที่ทำงานแบบเดียวกับโปรแกรม hello.jsp แต่การพัฒนา
โปรแกรมนี้จะเขียนโดยการสร้าง Custom tag ที่ชื่อ NameTagHandler การสร้าง Custom Tag จะต้องมีการพัฒนา
โปรแกรม 3 ส่วน ดังนี้
• สร้าง Java Class Tag Handler [NameTagHandler.java] จะทำงานเมื่อ Custom Tag ถูกเรียกใช้
• สร้าง Tag Library Descriptor [MyTags.tld] เป็นตัวอธิบาย aribut ต่างๆภายใน element ของ tag
ตัวอย่าง element และ attribute → element aribut1=”A” /element
• สร้าง JSP file [helloTag.jsp] เพื่อเรียกใช้งาน Custom Tag ดังแสดงความสัมพันธ์ในรูปที่ 12.4


98

รูปที่ 12.4 Overview ความสัมพันธ์ของ Custom Tag Files

12.4.1 สร้างไฟล์ Java ClassTag Handler
ไฟล์ Tag Handler จะเป็นโปรแกรมจาวาที่พัฒนาขึ้นเพื่อระบุว่า เมื่อเรียกใช้ tag แล้วจะต้องทำคำสั่งอย่างไร
ในที่นี้จะกำหนดชื่อ Tag เป็น NameTag และโปรแกรมจาวาเป็น NameTagHandler โดยโปรแกรมจะทำการอ่านค่า
พารามิเตอร์ name และพิมพ์ข้อความ Hello xxxx จำนวนสิบครั้ง การสร้างไฟล์ Tag Handler จะมีขั้นตอนดังนี้
1. คลิ๊กขวาที่ Project JSPDemo จากนั้นเลือกคำสั่ง New → Class
กำหนด Package เป็น tags , Class Name เป็น NameTagHandler
เลือก SuperClass เป็น SimpleTagSupport


99

รูปที่ 12.5 การสร้าง Java Tag Handler Class


100

2. ทำการ Implement Method ชื่อ doTag( )
โดยการคลิ๊กขวาภายในหน้าต่าง editor ของ source code
แล้วเลือก Source Override/Implement Methods ... แล้วเลือกเมธอด doTag() ดังรูปที่ 12.6
และ สร้าง method ประเภท setter เพิ่มชื่อ setName( )

รูปที่ 12.6 การ Implement method ที่จะถูกเรียกเมื่อมีการใช้ Custom Tag
3. หน้าต่าง Editor จะแสดงไฟล์ NameTagHandler.java ให้เขียน source code ดัง Listing ที่ 12.5
Listing ที่ 12.5 โปรแกรม NameTagHandler.java
package tags;


import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.JspFragment;
import javax.servlet.jsp.tagext.SimpleTagSupport;

public class NameTagHandler extends SimpleTagSupport {

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

@Override
public void doTag() throws JspException, IOException {
super.doTag();
JspWriter out = getJspContext().getOut();

try {
JspFragment f = getJspBody();


101

if (f != null) f.invoke(out);

for (int i = 0; i 10; i++) {
out.println(Hello + name + br);
}
} catch (java.io.IOException ex) {
throw new JspException(Error in NameTagHandler tag, ex);
}
}
}

12.4.2 สร้าง Tag Library Descriptor
ไฟล์นี้จะใช้เก็บ รายชื่อ Tag ต่างๆ ที่มีอยู่เพื่อสามารถนำ tag ต่างๆ มาใช้ในโปรแกรม JSP
โดยใช้คำสั่ง %@taglib ...%
การสร้าง Tag Library Descriptor จะมีขั้นตอนดังนี้
1. คลิ๊กขวาที่ Project JSPDemo เลือก New → Folder
เลือก JSPDemo → WebContent → WEB-INF แล้ว กำหนด Folder name = tlds

รูปที่ 12.7 สร้าง Folder เพื่อเก็บ Tag Language Descriptor


102

2. เลือก Project JSPDemo → WebContent → WEB-INF → tlds
คลิกขวาที่ Folder tlds แล้วเลือก New → File
กำหนด TLD Name = MyTag.tld ***ให้ใส่ นามสกุล tld ด้วย แล้ว กด Finish

รูปที่ 12.8 การสร้าง File Tag Library Descriptor

3. หน้าต่าง Editor จะแสดงไฟล์ที่ชื่อ MyTag.tld ที่อยู่ในโฟลเดอร์ WebContentWEB-INFtlds


103

4. Implement code ดัง Listing ที่ 12.6

Listing ที่ 12.6 โปรแกรม MyTag.tld

?xml version=1.0 encoding=UTF-8?
taglib version=2.1 xmlns=http://java.sun.com/xml/ns/javaee
xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance
xsi:schemaLocation=http://java.sun.com/xml/ns/javaee,
http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd
tlib-version1.0/tlib-version
short-nameMyTags/short-name
uri/WEB-INF/tlds/MyTag/uri
tag
nameNameTagHandler/name
tag-classtags.NameTagHandler/tag-class
body-contentscriptless/body-content
attribute
namename/name
rtexprvaluetrue/rtexprvalue
typejava.lang.String/type
/attribute
/tag
/taglib

12.4.3 เขียนโปรแกรม helloTag.jsp
ในที่นี้จะเขียนโปรแกรมที่จะเรียกใช้ Tag ที่ชื่อ NameTag โดยจะมี source code ดัง Listing ที่ 11.4 โดยการ
สร้างโปรแกรม helloTag.jsp จะมีขั้นตอนดังนี้
1. เลือกหน้าต่าง Projects แล้วคลิ๊กขวาที่โหนด JSPDemo จากนั้นเลือกคำสั่ง New Other...
2. ในไดอะล็อก New File ให้เลือก Categories ทีชื่อ Web ซึ่งโปรแกรมก็จะแสดง File Types ต่างๆ ภายใต้
Category นี้ ให้เราเลือก JSP แล้วกด Next
3. กำหนด JSP File Name: เป็น helloTag แล้วกด Finish
4. ในหน้าต่าง editor ให้แก้ไข source code ของไฟล์ helloTag.jsp ให้เป็นไปตาม Listing ที่ 12.7
5. ทำการ run โปรแกรม จะได้ผลลัพธ์เช่นเดียวกับโปรแกรม hello.jsp
Listing ที่ 12.7 โปรแกรม helloTag.jsp

%@page contentType=text/html%
%@page pageEncoding=UTF-8%
%@taglib uri=/WEB-INF/tlds/MyTag prefix=test%

!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
titleJSP Demo/title
/head
body
h1JSP Demo/h1
test:NameTagHandler name=Thanisa /
/body
/html


104

Exercise 13 การพัฒนาโปรแกรมเว็บโดยใช้ Struts 2 Framework
แบบฝึกหัดนี้จะเป็นการปรับปรุงโปรแกรมเว็บเพื่อติดต่อกับฐานข้อมูล โดยใช้ Struts 2 Framework
1. สร้างโปรเจ็ค StrutsDBApp โดยใช้ Struts 2 Framework
2. พัฒนาโปรแกรม addBook.jsp [View]
3. พัฒนาโปรแกรม AddBookAction.java [Model]
4. พัฒนาโปรแกรม success.jsp [View]
5. แก้ไขไฟล์ struts.xml

13.1 การสร้างโปรเจ็ค StrutsDBApp โดยใช้ Struts 2 Framework
1. Download Struts 2 Framework ที่ http://archive.apache.org/dist/struts/binaries/struts-2.3.3-all.zip
2. ทำการเปิด File Zip ออกมา จะเห็น Folder ชื่อ apps ภายในจะมี war file ชื่อ struts2-blank.war ให้
ทำการ Extract ออกมาไว้ที่ Temporary folder เช่น D:temp ก่อน ดังรูปที่ 13.1

รูปที่ 13.1 การ Extract ไฟล์ Struts2-blank.war

3. ทำการ Import Template เข้าสู่ Eclipse เพื่อเตรียม Environment สำหรับ Struts 2 Framework โดยให้
ทำการเปลี่ยนชื่อ Web Project เป็น StrutsDBApp ดังรูปที่ 13.2


105

รูปที่ 13.2 การ import เข้าสู่ Eclipse

13.2 การพัฒนาโปรแกรม addBook.jsp [View]
สร้างเว็บเพจเพื่อใช้สำหรับป้อนข้อมูลหนังสือใหม่ เข้าในฐานข้อมูล books ซึ่งมีลักษณะดังรูปที่ 13.3

รูปที่ 13.3 เว็บเพจที่ใช้แสดงฟอร์มสำหรับป้อนข้อมูล

ขั้นตอนการสร้างหน้า JSP เพื่อรับข้อมูล
1. File → New → JSP File กำหนดชื่อเป็น addBook.jsp
2. ใช้การลากแปะ Object ลงไปบนหน้า Design view เพื่อสะดวกในการสร้างหน้าเพจ โดยไปที่
Window → Show View → Palette ดังรูปที่ 13.4


106

รูปที่ 13.4 Palette สำหรับสร้างหน้าเพจ

3. คลิ๊กที่ Struts Tags จะเห็น Object ต่างๆ ให้ทำการ Drag and Drop ลงไปที่หน้า Design เพื่อสร้าง
หน้าเพจดังรูปที่ 13.5 โดยมีส่วนของ source ดัง Listing ที่ 13.1

รูปที่ 13.5 สร้าง JSP Page เพื่อให้ผู้ใช้งานป้อนข้อมูล


107

Listing ที่ 13.1 โปรแกรม addBook.jsp
%@taglib uri=/struts-tags prefix=s%
%@ page language=java contentType=text/html; charset=TIS-620
pageEncoding=TIS-620%
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
html
head
meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1
titleStruts2/title
/head
body
s:labelADD A NEW BOOK/s:label
s:form action=addBookAction method=POST
tds:textfield name=isbn label=ISBN //td
tds:textfield name=title label=TITLE//td
tds:textfield name=author label=AUTHOR//td
tds:textfield name=price label=PRICE//td
tds:submit value=ADD //td
/s:form
/body
/html

4. เมื่อจัดแต่งหน้า page เรียบร้อยแล้ว ถ้าในไฟล์ addBook.jsp มี taglib ที่มี prefix=nested ให้ทำการ
ลบออก เนื่องจากทาง Apache ไม่มี URI นี้แล้ว ดังรูปที่ 13.6

รูปที่ 13.6 การลบ taglib ออกจาก addBook.jsp

5. คัดลอกไฟล์ context.xml ที่มี source ดัง Listing ท่ี่ 13.2 จาก Exercise 5 มาไว้ใน Folder
StrutsDBAppWebContentMETA-INF

Listing ที่ 13.2 โปรแกรม context.xml

?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


108

13.3 การพัฒนาโปรแกรม AddBookAction.java [Model]
AddBookAction.java เป็นคลาสทีมีเมธอดประเภท getter และ setter เพื่อจัดการกับข้อมูลที่ผู้ใช้ป้อนเข้ามา
ผ่านทาง addBook.jsp ดังรูปที่ 13.7 จากนั้นจะทำการ insert ลงใน table ที่ชื่อ Books ภายในเมธอด execute

AddBookAction.java
[Model sourcecode]

รูปที่ 13.7 ความสัมพันธ์ระหว่าง Struts2 tag และ AddBookAction

โปรแกรม AddBookAction.java มีขั้นตอนในการพัฒนาดังนี้
1. File → New → Class
กำหนด pagekage = model , name = AddBookAction
กำหนด SuperClass = com.opensymphony.xwork2.ActionSupport ดังรูปที่ 13.8

รูปที่ 13.8 สร้าง AddBookAction.java


109

2. ในคลาส AddBookAction.java ให้เพิ่ม attribute ที่ชื่อ isbn, title, author โดยมีชนิดข้อมูลเป็น String และ
price ที่มีชนิดข้อมูลเป็น float เพื่อทำการ map attribute ของไฟล์ AddBookAction.java กับพารามิเตอร์ของ
ไฟล์ addBook.jsp จากนั้นให้ทำการสร้างเมธอดประเภท Getters and Setters ดังรูปที่ 13.9

รูปที่ 13.9 ทำการเลือก Generate Getters and Setters

3. Override เมธอด execute โดยคลิ๊กขวาที่หน้าต่าง source code
แล้วเลือก Source → Override/Implement Methods... แล้วเลือกที่เมธอด execute ดังรูปที่ 13.10

รูปที่ 13.10 ทำการเลือก Override Method execute ของ ActionSupport


110

4. ทำการแก้ไข Source code ในเมธอด execute() ดัง Listing ที่ 13.2

Listing ที่ 13.2 โปรแกรม AddBookAction.java

package model;

import java.sql.*;
import javax.naming.InitialContext;
import com.opensymphony.xwork2.ActionSupport;

public class AddBookAction extends ActionSupport {

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

return isbn;
}

this.isbn = isbn;
}

return title;
}

this.title = title;
}

return author;
}
}

public float getPrice() {
return price;
}

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

@Override
public String execute() throws Exception {

InitialContext ctx = new InitialContext();
DataSource ds = (DataSource)ctx.lookup(java:comp/env/jdbc/test);

Connection conn = ds.getConnection();
String sql = insert into books (isbn,title,author,price) values
+ (' + getIsbn() + ',' + getTitle()
+ ',' + getAuthor() + ', + getPrice()
+ );
System.out.println(Executed SQL = + sql);
stmt.execute(sql);

return super.execute();


111

}

}

13.4 การพัฒนาโปรแกรม success.jsp [View]
html
headtitleResult Inserting Book/title/head
body
h3New Book record added!!!/h3
bISBN: /bs:property value=isbn /br
bTitle: /bs:property value=title /br
bAuthor: /bs:property value=author /br
bPrice: /bs:property value=price /br
/body
/html

13.5 การแก้ไขไฟล์ struts.xml
ไฟล์ struts.xml เป็นไฟล์เพื่อใช้ในการควบคุมการทำงานของโปรแกรม Struts
• ดับเบิ้ลคลิ๊กที่ไฟล์ /src/struts.xml แล้วปรับปรุง action tag ดังนี้
action name=addBookAction class=model.AddBookAction
result name=successsuccess.jsp/result
result name=errorerror.jsp/result
/action

*struts2-blank.war ได้มีการเตรียมไฟล์ page error.jsp มาให้แล้ว

1. ทำการ Build และ Restart Tomcat
2. Run โปรแกรม StrutDBApp หรือคลิ๊กขวาที่ file เลือก Run → Run As Server
3. เปิดหน้าจอ http://localhost:8080/StrutDBApp/addBook.jsp แล้วทดลองใส่ข้อมูล
4. เมื่อกดปุ่ม Add โปรแกรมก็จะใส่ข้อมูลลงใน Database
5. เราสามารถที่จะดูข้อมูลที่ป้อนเข้าไปได้ โดยไปที่ Tool ของ MySQL ชื่อ MySQL Workbench


112

รูปที่ 13.11 ตัวอย่างผลลัพธ์ที่ได้จากการใส่ข้อมูลลงใน Table Books


113

Exercise 14 การพัฒนาโปรแกรมเว็บโดยใช้ Spring Framework
แบบฝึกหัดนี้จะเป็นการปรับปรุงโปรแกรมเว็บเพื่อติดต่อกับฐานข้อมูล โดยใช้ SpringMVC Framework
1. การสร้างโปรเจ็ค SpringDBApp โดยใช้ Spring Framework
2. พัฒนาไฟล์ Controller
3. พัฒนาไฟล์ JSP
4. พัฒนาไฟล์ mvc-dispatcher-servlet.xml
5. พัฒนาไฟล์ web.xml
6. การทดสอบโปรแกรม

14.1 การสร้างโปรเจ็ค SpringDBApp โดยใช้ Spring Framework
1. ทำการสร้าง Dynamic Web Project โดยการเลือกคำสั่ง File → New → Dynamic Web Project
2. กำหนด Project Name: เป็น HelloWebSpring เลือก Dynamic web module version เป็น 3.0 และหน้า
Web Module ให้เลือก Generate web.xml deployment descriptor ดังรูปที่ แล้วกด Finish

รูปที่ 14.1 การเลือกสร้าง web.xml
3. ทำการ Download Spring Library จากเว็บ http://www.springsource.org/spring-community-download


114

แล้ว unzip ไฟล์
4. ก็อบปี้ไฟล์ทั้งหมดใน Spring Libraries ลงใน folder ที่ชื่อ WebCentent WEB-INF lib

14.2 พัฒนาไฟล์ Controller
ไฟล์ Controller ใน Spring MVC Framework จะทำหน้าที่ในการกำหนดว่า RequestMapping ของ url โดยมี
ขั้นตอนการพัฒนาดังนี้
1. คลิ๊กขวาที่โปรเจ็ค HelloWebSpring เลือก New Class
2. กำหนดค่า Package เป็น web.controller และ Name: เป็น MainController
3. เขียน source code ตาม Listing ที่ 14.1

Listing ที่ 14.1 โปรแกรม MainController.java

package web.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping(/welcome)
public class MainController {

@RequestMapping(method = RequestMethod.GET)
public String printWelcome(ModelMap model) {

model.addAttribute(message, Spring 3 MVC Hello World);
return hello;

}

}

14.3 พัฒนาไฟล์ JSP
โปรแกรม hello.jsp จะเป็นโปรแกรมแสดงผล ที่ทาง Spring จะเรียกใช้จากการ return ของ
RequestMapping โดยมีขั้นตอนการพัฒนาดังนี้

1. ทำการสร้าง Folder ชื่อ pages ภายใต้ Folder ที่ชื่อ WebContent WEB-INF
2. สร้างไฟล์ hello.jsp ที่ folder ดังกล่าว โดยการคลิ๊กขวาแล้วเลือกคำสั่ง New JSP File
3. กำหนด File Name เป็น hello.jsp แล้วกด Finish


115


html
body
h1Message : ${message}/h1
/body
/html

14.4 พัฒนาไฟล์ mvc-dispatcher-servlet.xml
ไฟล์ mvc-dispatcher-servlet.xml จะเป็นไฟล์ configuration เพื่อระบุว่าไฟล์ต่างๆอยู่ที่ใด โดยมีขั้นตอนการ
พัฒนาดังนี้
1. เลือกโหนด WebContent WEB-INF แล้วเลือกคำสั่ง New Other... XML File
2. กำหนดค่า File Name: เป็น mvc-dispatcher-servlet.xml

Listing ที่ 14.3 โปรแกรม mvc-dispatcher-servlet.xml

beans xmlns=http://www.springframework.org/schema/beans
xmlns:context=http://www.springframework.org/schema/context
xsi:schemaLocation=
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd

context:component-scan base-package=web.controller /

bean

class=org.springframework.web.servlet.view.InternalResourceViewResolver
property name=prefix
value/WEB-INF/pages//value
/property
property name=suffix
value.jsp/value
/property
/bean

/beans

14.5 พัฒนาไฟล์ web.xml
ปรับปรุงไฟล์ web.xml ดังListing ที่ 14.4
Listing ที่ 14.4 โปรแกรม web.xml

web-app id=WebApp_ID version=2.4
xmlns=http://java.sun.com/xml/ns/j2ee
xsi:schemaLocation=http://java.sun.com/xml/ns/j2ee


116

http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd

display-nameSpring MVC Application/display-name

servlet
servlet-namemvc-dispatcher/servlet-name
servlet-class
org.springframework.web.servlet.DispatcherServlet
/servlet-class
load-on-startup1/load-on-startup
/servlet

servlet-mapping
servlet-namemvc-dispatcher/servlet-name
url-pattern//url-pattern
/servlet-mapping

context-param
param-namecontextConfigLocation/param-name
param-value/WEB-INF/mvc-dispatcher-servlet.xml/param-value
/context-param

listener
listener-class
org.springframework.web.context.ContextLoaderListener
/listener-class
/listener

/web-app

1. ทำการ Deploy โปรแกรม
2. รันโปรแกรมโดยใช้ url ชื่อ http://localhost:8080/HelloWebSpring/welcome จะได้ผลลัพธ์ดังรูป 14.2

รูปที่ 14.2 ผลลัพธ์การรันโปรแกรม

14.7 พัฒนาโปรแกรมเพื่อเชื่อมต่อกับฐานข้อมูล
Spring MVC เป็น Framework ที่มีฟังก์ชั่นในการติดต่อกับฐานข้อมูลได้ ในที่นี้เราจะปรับปรุงโปรแกรม
เพื่อให้สามารถจะเพิ่มข้อมูลใน Table ที่ชื่อ Books และสามารถที่จะดูข้อมูลทั้งหมดได้โดยต้องแก้ไขและสร้างไฟล์


117

ต่างๆดังนี้
• สร้างคลาสที่ชื่อ Book.java ภายใต้ package ที่ชื่อ model เพื่อที่จะทำหน้าที่เป็นออปเจ็คของข้อมูล Book
• ปรับปรุงโปรแกรม MainController เพื่อให้มี RequestMapping ที่ชื่อ /addbook และ /showbooks
• สร้างคลาสที่ชื่อ BookService.java ภายใต้ package ที่ชื่อ web.controller ที่จะทำหน้าที่เป็นคลาสชนิด
Service ในการจัดการฐานข้อมูลผ่าน DataSource
• ปรับปรุงไฟล์ mvn-dispatcher-servlet.xml เพื่อเพิ่มแท็ค Bean สองชุดสำหรับ id ที่ชื่อ dataSource
และ bookService
• สร้างไฟล์ addedpage.jsp และ bookpages.jsp ที่อยู่ในโฟลเดอร์ pages สำหรับแสดงผล
โดยเราจะได้ source code ของไฟล์ต่างๆที่ปรับปรุงดังนี้

Listing ที่ 14.5 โปรแกรม Book.java

package model;

public class Book {
return isbn;
}
this.isbn = isbn;
}
return title;
}
this.title = title;
}
return author;
}
}
return price;
}
this.price = price;
}
}

Listing ที่ 14.6 โปรแกรม MainController.java ที่ปรับปรงใหม่




import org.springframework.stereotype.Controller;


118

import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

import model.Book;

import web.controller.BookService;

@Controller
public class MainController {
@RequestMapping(value = /welcome, method = RequestMethod.GET)
public String printWelcome(ModelMap model) {
model.addAttribute(message, Spring 3 MVC Hello World);
return hello;
}

@Resource(name = bookService)
private BookService bookService;

@RequestMapping(value = /addbook, method = RequestMethod.GET)
public String add(
@RequestParam(value=isbn, required=true) String isbn,
@RequestParam(value=title, required=true) String title,
@RequestParam(value=author, required=true) String author,
@RequestParam(value=price, required=true) Float price) {

bookService.add(isbn, title, author, price);
return addedpage;
}

@RequestMapping(value = /showbooks, method = RequestMethod.GET)
public String showBooks(Model model) {

ListBook bks = bookService.getAll();
model.addAttribute(books, bks);
return bookpages;
}

}

Listing ที่ 14.7 โปรแกรม BookService.java


import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;


import org.springframework.jdbc.core.RowMapper;
import org.springframework.jdbc.core.simple.SimpleJdbcTemplate;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import model.Book;

@Service(bookService)
@Transactional


119

public class BookService {

private DataSource dataSource;

@Resource(name = dataSource)
public void setDataSource(DataSource dataSource) {
this.dataSource = dataSource;;
}

public ListBook getAll() {

// Prepare our SQL statement
ListBook books = new ArrayListBook();
String sql = select * from books;
Connection conn = null;
try {
conn = dataSource.getConnection();
ResultSet rs = stmt.executeQuery(sql);
while (rs.next()) {
bk.setIsbn(rs.getString(isbn));
bk.setAuthor(rs.getString(author));
bk.setTitle(rs.getString(title));
bk.setPrice(rs.getFloat(price));
books.add(bk);
}
stmt.close();
// TODO Auto-generated catch block
}

// Retrieve all
return books;
}

public void add(String isbn, String title, String author, float price) {

String sql = insert into books values + (' + isbn + ',' +
title
+ ',' + author + ', + price + );
Connection conn = null;
try {
conn = dataSource.getConnection();
stmt.executeUpdate(sql);
stmt.close();
// TODO Auto-generated catch block
}

}
}

Listing ที่ 14.8 โปรแกรม mvc-dispatcher-servlet.xml ในส่วนที่ปรับปรุง

beans xmlns=http://www.springframework.org/schema/beans
xmlns:context=http://www.springframework.org/schema/context
xsi:schemaLocation=
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd

…


120

bean id=dataSource
class=org.springframework.jdbc.datasource.DriverManagerDataSource
property name=driverClassName value=com.mysql.jdbc.Driver /
property name=url value=jdbc:mysql://localhost:3306/test /
property name=username value=root /
property name=password value=root /
/bean

bean id=bookService class=web.controller.BookService
property name=dataSource ref bean=dataSource /
/property
/bean

/beans

Listing ที่ 14.9 โปรแกรม addedpage.jsp

%@ page language=java contentType=text/html; charset=ISO-8859-1
pageEncoding=ISO-8859-1%
html
head
meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1
titleAdd Data/title
/head
body
Added Book successfully..
/body
/html

Listing ที่ 14.10 โปรแกรม bookpages.jsp

%@ taglib uri=http://java.sun.com/jsp/jstl/core prefix=c %
%@ page language=java contentType=text/html; charset=UTF-8
pageEncoding=UTF-8%
html
head
titleAll Books/title
/head
body

c:forEach items=${books} var=bk
${bk.title} ${bk.author} br
/c:forEach
/body
/html

เราสามารถที่จะรันโปรแกรมนี้เพื่อที่จะเพิ่มข้อมูลใน Books ได้โดยใช้คำสั่ง
http://localhost:8080/HelloWebSpring/addbook?isbn=134title=SpringMVC
author=Thanaprice=400.0

และสามารถที่จะเรียกดูข้อมูลทั้งหมดใน Books ได้โดยใช้คำสั่ง
http://localhost:8080/HelloWebSpring/showbooks


121

Exercise 15 การ Authentication โดยใช้ Tomcat

แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรมเว็บที่ต้องมีการทำ Authentication โดยการตั้งค่า configuration ของ
Tomcat Web Server โดยจะเป็นการล็อกอินโดยใช้ Basic Configuration และ Form Based Configuration
และ จะทดสอบการเปลี่ยน realm ของ Tomcat จากไฟล์ tomcat-users.xml เป็นการใช้ MySQL Database
15.1 สร้าง Web Application Project
1. เลือกเมนู File → New → Dynamic Web Project
กำหนด Project Name = SecurityWebApp
2. ทำการพัฒนาโปรแกรม admin.html ดัง Listing ที่ 15.1
3. ทำการพัฒนาโปรแกรม user.html ดัง Listing ที่ 15.2
Listing ที่ 15.1 โปรแกรม admin.html

html
head
titleADMIN/title
/head
body
h1Admin Page/h1
/body
/html

Listing ที่ 15.2 โปรแกรม user.html

html
head
titleUSER/title
/head
body
h1User Page/h1
/body
/html

15.2 เพิ่ม User ของ Tomcat Web Server

โดยทั่วไป Tomcat-Web-Server จะใช้ Realm ที่เป็น Flat File โดยเก็บไว้ใน File ที่ชื่อ tomcat-users.xml ขั้น
ตอนนี้จะเป็นการเพิ่ม User โดยการปรับปรุงไฟล์ดังกล่าวโดยมีขั้นตอนการพัฒนาโปรแกรมดังนี้


122

1. ใน Project Explorer ให้ดับเบิ้ลคลิ๊กที่ไฟล์ Servers Tomcat tomcat-users.xml
ดังตัวอย่างในรูปที่ 15.1 และทำการเพิ่ม user password ลงไปใน Tomcat Server
ดังใน Listing ที่ 15.3

รูปที่ 15.1 เพิ่ม user และ roles ที่ Apache Tomcat

Listing ที่ 15.3 ไฟล์ tomcat-users.xml

.......
role rolename=admin/
role rolename=user/
user username=admin password=admin roles=admin /
user username=tomcat password=tomcat roles=admin /
user username=user password=user roles=user /
.......

2. Restart Tomcat เพื่อให้อ่าน config ใหม่ที่เราแก้เข้าไป
โดยไปที่ tab Server → คลิกขวาที่ชื่อ server แล้วเลือก restart
15.3 การ Config ไฟล์ web.xml ของ Web Application ที่ต้องการใช้ Tomcat user
เราสามารถที่จะกำหนดให้มีการทำ Authenticate และ Authorization ผู้ใช้ที่จะเข้า URL ใดๆของ Web
Application และกำหนดสิทธิในการเข้าโดยอิงกับ role (Role Based Authorization)โดย config ไฟล์ web-xml
ในขั้นตอนนี้จะเป็นการกำหนดให้ผู้ใช้ที่มี role เป็น admin สามารถที่จะเข้าใช้ไฟล์ admin.html และ user.html ได้
ส่วนผู้ใช้ที่มี role เป็น user สามารถที่จะเข้าใช้ได้เฉพาะไฟล์ user.html เท่านั้น โดยมีขั้นตอนดังนี้
ขั้นตอนการ Configuration
1. คลิ๊กขวาที่ Deployment Descriptor: SecurityWebApp ในโปรเจ็ค SecurityWebApp
2. จากนั้นเลือก Generate Deployment Descriptor Stub เพื่อเป็นการสร้างไฟล์ web.xml ดังรูปที่ 15.2

รูปที่ 15.2 การสร้างไฟล์ web.xml

123

3. เปิดไฟล์ web.xml ของ Project ที่ชื่อ SecurityWebApp
เพิ่มบรรทัด เพื่อบอกว่าเป็นการ authen แบบ Basic
login-config
auth-methodBASIC/auth-method
/login-config

4. เพิ่มบรรทัด ระบุ Security Roles = 2 roles คือ user และ admin
security-role
role-nameadmin/role-name
/security-role
security-role
role-nameuser/role-name
/security-role

5. สร้างความสัมพันธ์ระหว่าง Web page ของ Project กับ User บน Tomcat
@@ กรณีหน้า admin.html เข้าถึงโดยผู้มี role เป็น admin เท่านั้น

กำหนดURL Pattern ที่ต้องการจำกัดการเข้าถึงเป็น /admin.html
กำหนด Name เป็น Admin Page
กำหนด ผู้เข้าถึง URL นี้ได้ คือผู้ที่อยู่ใน Roles = admin เท่านั้น
security-constraint
web-resource-collection
url-pattern/admin.html/url-pattern
web-resource-nameAdmin Page/web-resource-name
/web-resource-collection
auth-constraint
/auth-constraint
/security-constraint

@@ กรณีหน้า user.html เข้าถึงโดยผู้มี role เป็น user และ admin

กำหนดURL Pattern ที่ต้องการจำกัดการเข้าถึงเป็น /user.html
กำหนด Name เป็น User Page
กำหนด ผู้เข้าถึง URL นี้ได้ คือผู้ที่อยู่ใน Roles = admin
security-constraint
url-pattern/user.html/url-pattern
web-resource-nameUser Page/web-resource-name
auth-constraint
/auth-constraint

6. ซึ่งจะได้รายละเอียดทั้งหมดของไฟล์ web.xml ดัง Listing ที่ 15.4

Listing ที่ 15.4 ไฟล์ web.xml


124

.......
login-config
/login-config

security-role
/security-role
security-role
/security-role

security-constraint
web-resource-nameAdmin Page/web-resource-name
url-pattern/admin.html/url-pattern
auth-constraint
/auth-constraint

security-constraint
web-resource-nameUser Page/web-resource-name
url-pattern/user.html/url-pattern
auth-constraint
/auth-constraint
.......

15.4 การทดสอบโปรแกรมแบบ Basic Authenticate
1. ทำการ Build และ Deploy โปรเจ็ค SecurityWebApp
2. รันโปรแกรม http://localhost:8080/SecurityWebApp/admin.html โปรแกรมเว็บ Browser จะแสดง
ไดอะล็อกล็อกอินให้ผู้ใช้ป้อนดังรูปที่ 15.3

รูปที่ 15.3 หน้าต่างล็อกอิน

3. ให้ทดลองป้อนชื่อผู้ใช้และรหัสผ่านเป็น admin และ admin โปรแกรมจะสามารถแสดงข้อความในหน้าเว็บ
admin.html ได้
4. ปิดโปรแกรมเว็บ Browser จากนั้นเปิดขึ้นมาใหม่ แล้วทดลองป้อนชื่อผู้ใช้และรหัสผ่านเป็น user และ user
จะเห็นว่าไม่สามารถเข้าหน้าเว็บนี้ได้


125

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

15.5 การปรับปรุงโปรแกรมเพื่อให้ใช้ Login Form
ขั้นตอนนี้จะเป็นการปรับปรุงโปรเจ็ค SecurityWebApp ให้มีทำการล็อกอินโดยใช้ Form ที่สร้างขึ้นโดยใช้
ไฟล์ Login.html ซึ่งถ้าไม่สามารถล็อกอินได้ ให้ส่งต่อไปที่ Error.html โดยมีขั้นตอนการพัฒนาโปรแกรมดังนี้
1. สร้างหน้า page เพื่อใช้ login ชื่อ login.html ดัง Listing ที่ 14.4
2. สร้างหน้า error.html เมื่อกรณีป้อน username หรือ password ไม่ถูก ดัง Listing ที่ 14.5
3. แก้ไข web.xml เพื่อระบุรูปแบบให้เป็น Form โดยใช้หน้า Form คือ login.html รับค่า username
และ password โดยเปลี่ยนจาก
login-config
/login-config
เป็นดัง Listing ที่ 14.7
Listing ที่ 15.5 โปรแกรม login.html
html
head
title/title
/head
body
H1Login Form : Sample/H1

FORM ACTION=j_security_check METHOD=POST
User name :
INPUT TYPE=TEXT NAME=j_username / br
Password :
INPUT TYPE=PASSWORD NAME=j_password / br
input type=submit value=Login /
/FORM
/body
/html

Listing ที่ 15.6 โปรแกรม error.html

html
headtitleERROR/title/head
body
H1Error unauthorized user/H1
/body
/html

Listingที่ 15.7 โปรแกรม web.xml

.......
login-config
auth-methodFORM/auth-method
realm-nameAdminApplication/realm-name
form-login-config
form-login-page/login.html/form-login-page
form-error-page/error.html/form-error-page
/form-login-config
/login-config
.......


126

15.6 การทดสอบโปรแกรม แบบ Form Authenticate
ใช้การทดสอบแบบเดียวกันกับ Basic Authenticate แต่หน้า login จะเป็น login.html ดังรูปที่ 15.4

รูปที่ 15.4 หน้าต่างล็อกอิน

15.7 การปรับปรุงโปรแกรม เพื่อใช้ Authenticate โดยอ่านจาก Database MySQL
เราสามารถเลือก Realm ของ Tomcat Web Server ในรูปแบบอื่นๆ ได้นอกเหนือจากการใช้ไฟล์
เช่นการใช้ Database หรือ Directory Server ในที่นี้จะทดลองกำหนด Realm ให้เป็น MySQL
จะต้องทำการสร้าง Table ขึ้นมาสองชุดคือ users และ userrole โดยมีขั้นตอนการพัฒนาโปรแกรมดังนี้
1. เปิดโปรแกรม MySQL Workbench แล้วทำการสร้าง table ขึ้นมา 2 tables
โดยใช้ Tool ที่เป็น Wizard หรือ SQL Statement เพื่อสร้าง table ดังนี้
create table users (
user_name varchar(45) not null primary key,
pass_word varchar(45) not null
);

create table userrole (
user_name varchar(45) not null,
role_name varchar(45) not null,
primary key (user_name, role_name)
);

จากนั้นกด Icon Execute SQL scripts (รูปสายฟ้าสีเหลือง) เพื่อรัน หรือ Highlight คำสั่งแล้วกดปุ่ม Ctrl +
Enter
2. ทดลองป้อนข้อมูลใส่ลงใน Table โดยต้องกำหนด password และ role
3. ใน Project Explorer ให้ดับเบิ้ลคลิ๊กที่ไฟล์ Servers Tomcat server.xml ของ Apache Tomcat
4. จากนั้นให้ทำการแก้ไข sourcecode ดังนี้
ลบ
Realm className=org.apache.catalina.realm.UserDatabaseRealm
resourceName=UserDatabase/
เพิ่ม
Realm className=org.apache.catalina.realm.JDBCRealm debug=99
driverName=com.mysql.jdbc.Driver
connectionURL=jdbc:mysql://localhost/test
connectionName=root
connectionPassword=root
userTable=users userRoleTable=userrole
userNameCol=user_name userCredCol=pass_word
roleNameCol=role_name /


127

5. ทำการ Restart Tomcat เพื่อให้อ่าน config ที่แก้ไป
15.8 การทดสอบโปรแกรม แบบ Database Authenticate
ใช้การทดสอบแบบเดียวกันกับ Form Authenticate


128

Exercise 16 การพัฒนาโปรแกรมเว็บโดยใช้ Google App
Engine

แบบฝึกหัดนี้เป็นการพัฒนาโปรแกรม Web Application โดยจะติดตั้งและรันโปรแกรมอยู่บน Google
App Engine ซึ่งใช้ Infrastructure ของ Google ในการรันโปรแกรม Google App Engine จัดเป็น Cloud
Computing ประเภท Platform as a Service (PaaS) ทำให้นักพัฒนาการโปรแกรมสามารถที่จะติดตั้งโปรแกรม
บนแพลตฟอร์มที่ทาง Google จัดเตรียมไว้ให้ โดยในปัจจุบันได้กำหนด API ไว้สองภาษาคือ Java และ Python
แบบฝึกหัดนี้จะใช้ Eclipse 3.6 (Helios) ในการพัฒนาโปรแกรมสำหรับ Google App Engine และใช้
Google App Engine Plugin Module ของ Eclipse มาช่วยในการพัฒนาโปรแกรม

16.1 การติดตั้งและเริ่มต้นการใช้งาน Google App Engine
Google App Engine เป็นแพลตฟอร์มที่ให้นักพัฒนาโปรแกรมสามารถรันโปรแกรมเว็บแอปพลิเคชั่น
บน Google's Infrastructure ได้ โดยนักพัฒนาจะต้องมี account ของ Google และจะต้องติดตั้ง Google App
Engine SDK ซึ่งรายละเอียดการใช้งาน Google App Engine สามารถดูได้ที่
http://code.google.com/appengine/ โดยเราสามารถที่จะสรุปขั้นตอนการติดตั้งโปรแกรม Eclipse เพื่อพัฒนา
Google App Engine ได้ดังนี้

1. ทำการลงทะเบียน App Engine Account โดยใช้ Google Account ที่
http://code.google.com/appengine/
2. ทำการติดตั้งโปรแกรม Eclipse 3.7
3. รันโปรแกรม Eclipse แล้วเลือกเมนู Help Install New Software...
4. ในไดอะล็อก Plugins เลือกแทป Setting แล้วกดปุ่ม Add
5. ไดอะล็อก Install จะแสดงขึ้นมา ให้กำหนดค่า Work with: เป็น
http://dl.google.com/eclipse/plugin/3.7 แล้วกด Enter ไดอะล็อกจะแสดง โปรแกรม Plugin และ
SDKs ต่างให้เลือกทั้งหมด ดังรูปที่ แล้วกดปุ่ม Next
6. โปรแกรมจะทำการติดตั้ง Google App Engines เมื่อการติดตั้งสิ้นสุดให้ทำการ Restart โปรแกรม
Eclipse ใหม่
7. ที่ Toolbar ของโปรแกรม Eclipse จะมีปุ่มเพื่อพัฒนาโปรแกรม Google App Engine ดังนี้


129

รูปที่ 16.1 การเลือกติดตั้ง Plugin และ SDK ของ Google App Engines

ขั้นตอนนี้จะเป็นการโปรแกม Web Application เพื่อทดลองติดตั้งลง Google's Infrastructure โดยการ
สร้าง Project ใหม่ขึ้นมาใน ซึ่งมีขั้นตอนดังนี้
1. เลือกเมนู File = New = Other...
2. ในไดอะล็อก New ให้ขยายโหนด Google แล้วเลือก Web Application Project แล้วกด Next
3. กำหนด Project Name เป็น BookGAE กำหนดค่า Package เป็น com.imcinstitute แล้วเลือก
Project Location เป็น Director ที่เราต้องการจะเก็บไฟล์ไว้ และไม่ต้องเลือกค่า Use Google Web
Toolkit เนื่องจากโปรเจ็คนี้ไม่ได้ใช้ GWT ดังรูปที่ 16.1 แล้วกด Next


130

รูปที่ 16.2 การกำหนดค่า Web Application Project ของ Google Application

4. โปรเจ็คนี้จะมีโปรแกรม MMJTDemoServlwt.java ซึ่งอยู่ภายใต้โหนด src guestbook โปรแกรมนี้
แสดงข้อความ Hello, World
5. เราสามารถทดลอบที่จะรันโปรแกรมนี้ในเครื่องที่พัฒนาได้โดยคลิ๊กขวาที่โหนด MMJTDemo ในหน้าต่าง
Project Explorer แล้วเลือกคำสั่ง Run As Web Application จากนั้นเปิดโปรแกรม Web Browser
แล้วกำหนด url เป็น http://localhost:8888/mmjtdemo โดยจะได้ผลลัพธ์ดังรูปที่ 16.3

รูปที่ 16.3 ผลลัพธ์การรันโปรแกรมจาก localhost server


131

6. โปรเจ็ค MMJTDemo จะมีไฟล์จัดการ configuration สำหรับการ deploy ไปยัง Google App Engine
ที่ชื่อ appengine-web.xml โดยไฟล์นี้จะอยู่ภายใต้โหนด war WEB-INF โดยจะมีค่าต่างๆดังรูปที่
16.4

รูปที่ 16.4 ไฟล์ appengine-web.xml
7. เราสามารถที่จะทำการ Deploy โปรเจ็คนี้ลงบน Google App Engine โดยการไป sign up เข้า account
ของเราที่ Google App Engine ที่ https://telecommunication/ แล้วกดปุ่ม Create an Application
8. กำหนดค่า Application Identifier: เป็น thaijavaapp และ Application Title: เป็น Thai Java
Google App ดังรูปที่ 16.5 แล้วกดปุ่ม Save

รูปที่ 16.5 การสร้าง Application สำหรับ Google App Engine
9. Google App Engine จะแสดงรายชื่อ Application ใหม่ที่กำหนดขึ้นดังรูปที่ 16.6


132

รูปที่ 16.6 การแสดงรายการ My Applications ใน Google App Engine
10. ในโปรแกรม Eclipse ให้แก้ไขไฟล์ appengine-web.xml โดยกำหนดค่า application
เป็น thaijavaapp
11. จากนั้นคลิ๊กขวาที่โหนด MMJTDemo ในหน้าต่าง Project Explorer แล้วเลือกคำสั่ง Google
Deploy to App Engine โปรแกรมจะถาม e-mail (username) และ password ของ Google App
Engine ของเราดังแสดงในรูปที่ 16.7

รูปที่ 16.7 การ Deploy ใน Google App Engine
12. เมื่อโปรแกรมติดตั้งโดยสมบูรณ์ให้กลับมาที่ Browser เพื่อไปที่ https://appengine.google.com/ ซึ่งจะ
แสดงผลลัพธ์ดังรูปที่ 16.8 ให้เรากดที่หมายเลขของเวอร์ชั่น(1) ในการรันโปรแกรม ซึ่งจะได้ผลลัพธ์ดังรูป
ที่ 16.9 จากนั้นให้เลือก Servlet ที่ชื่อ MMJTDemo จะได้ผลลัพธ์ดังรูปที่ 16.10


133

รูปที่ 16.8 รายการแสดง current versions ชอง My Applications

รูปที่ 16.9 ผลลัพธ์การัรนโปรแกรม thaijavaapp บน Google App Engine

รูปที่ 16.10 ผลลัพธ์การัรนโปรแกรม MMJTDemo บน Google App Engine
16.3 การพัฒนาโปรแกรม Servlet เพื่อรันบน Google App Engine


134

ขั้นตอนนี้จะเป็นการพัฒนาโปรแกรม Java Servlet เพื่อแสดงเวลาปัจจุบันแล้วติดตั้งบน Google App
Engine โดยมีขั้นตอนการพัฒนาโปรแกรมดังนี้

1. เลือกหน้าต่าง Project Explorer แล้วขยายโหนด MMJTDemo src
2. คลิ๊กขวาที่โหนด guestbook จากนั้นเลือกคำสั่ง New Class
3. ในไดอะล็อก New Java Class ให้ กำหนดค่า Name เป็น TimerServlet ส่วนค่าอื่นๆให้เป็นไปตามเดิม
ที่กำหนดไว้ แล้วกด Finish
4. ปรับปรุงโปรแกรม TimerServlet.java ให้เป็นไปดัง Listing ที่ 16.1
5. ทำการปรับปรุงไฟล์ web.xml โดยการขยายโหนด MMJTDemo war WEB-INF แล้วเลือกไฟล์
web.xml และแทป source แล้วให้เพิ่ม tag ต่างๆดังนี้

servlet
servlet-nameTimer/servlet-name
servlet-classguestbook.TimerServlet/servlet-class
/servlet
servlet-mapping
servlet-nameTimer/servlet-name
url-pattern/timer/url-pattern
/servlet-mapping

6. ทำการรันโปรแกรมเพื่อทดสอบบน localhost โดยเรียก url ชื่อ http://localhost:8888/timer
7. ทำการ deploy บน Google App Engine แล้วทดลองรันโปรแกรมที่
http://thaijavaapp.appspot.com /timer จะได้ผลลัพธ์ดังรูปที่ 16.11

รูปที่ 16.11 ผลลัพธ์การร y นโปรแกรม TimerServlet บน Google App Engine

Listing ที่ 16.1 โปรแกรม TimerServlet.java

package guestbook;

import java.text.SimpleDateFormat;


135

import java.util.Date;
import java.util.SimpleTimeZone;

/**
*
* @author Administrator
*/
public class TimerServlet extends HttpServlet {

response.setContentType(text/html;charset=UTF-8);
SimpleDateFormat fmt = new SimpleDateFormat(yyyy-MM-dd hh:mm:ss.SSSSSS);
fmt.setTimeZone(new SimpleTimeZone(0, ));
out.println(html);
out.println(head);
out.println(titleServlet TimerServlet/title);
out.println(/head);
out.println(body);
out.println(h1Servlet TimerServlet at + request.getContextPath() + /h1);
out.println(pThe time is: + fmt.format(new Date()) + /p);
out.println(/body);
out.println(/html);

out.close();
}

}

16.4 การพัฒนาโปรแกรมเพื่อติดต่อกับ Google Account
Google App Engine มีชุดคำสั่ง API เพื่อให้นักพัฒนาสามารถเรียกใช้ Application ต่างๆของ Google
ได้ รวมถึงเชื่อมต่อกับ Google Account ขั้นตอนนี้จะเป็นการใช้คำสั่งใน Google API ของคลาส User และ
UserService เพื่อติดต่อกับ Google Account โดยจะมีขั้นตอนดังนี้

1. เลือกหน้าต่าง Project Explorer คลิ๊กขวาที่โหนด guestbook จากนั้นเลือกคำสั่ง New Class
2. ในไดอะล็อก New Java Class ให้ กำหนดค่า Name เป็น GoogleTimerServlet ส่วนค่าอื่นๆให้เป็น
ไปตามเดิมที่กำหนดไว้ แล้วกด Finish
3. ปรับปรุงโปรแกรม GoogleTimerServlet.java ให้เป็นไปดัง Listing ที่ 16.2
4. ทำการปรับปรุงไฟล์ web.xml โดยการขยายโหนด MMJTDemo war WEB-INF แล้วเลือกไฟล์
web.xml และแทป source แล้วให้เพิ่ม tag ต่างๆดังนี้

servlet
servlet-nameMMJTDemo/servlet-name
servlet-classguestbook.GoogleTimerServlet/servlet-class
/servlet
servlet-mapping
servlet-nameMMJTDemo/servlet-name
url-pattern/googletimer/url-pattern
/servlet-mapping


136

http://thaijavaapp.appspot.com /googletimer จะได้ผลลัพธ์ดังรูปที่ 16.12 และ 16.2

รูปที่ 16.12 ผลลัพธ์การัรนโปรแกรม GoogleTimerServlet บน Google App Engine

รูปที่ 16.13 ผลลัพธ์การัรนโปรแกรม TimerServlet หลังจากการทำ signin
Listing ที่ 16.2 โปรแกรม GoogleTimerServlet.java

package guestbook;

import com.google.appengine.api.users.User;
import com.google.appengine.api.users.UserService;
import com.google.appengine.api.users.UserServiceFactory;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.SimpleTimeZone;

public class GoogleTimerServlet extends HttpServlet {


137

response.setContentType(text/html;charset=UTF-8);
SimpleDateFormat fmt = new SimpleDateFormat(yyyy-MM-dd hh:mm:ss.SSSSSS);
fmt.setTimeZone(new SimpleTimeZone(0, ));

UserService userService = UserServiceFactory.getUserService();
User user = userService.getCurrentUser();
String url = request.getRequestURI();
String msg;
if (user != null) {
msg = pWelcome, + user.getNickname() + ! You can a href= +
userService.createLogoutURL(url) +
sign out/a./p;
} else {
msg = pWelcome! a href= + userService.createLoginURL(url) +
Sign in or register/a to customize./p;
}
out.println(html);
out.println(head);
out.println(titleServlet TimerServlet/title);
out.println(/head);
out.println(body);
out.println(msg);
out.println(h1Servlet TimerServlet at + request.getContextPath() + /h1);
out.println(pThe time is: + fmt.format(new Date()) + /p);
out.println(/body);
out.println(/html);

out.close();
}

}


138

Exercise 17 การพัฒนาโปรแกรม Google App Engine
เพื่อติดต่อกับฐานข้อมูล โดยใช้ JPA

เนื้อหาที่ต้องศึกษาก่อน
• การพัฒนาโปรแกรมเว็บโดยใช้ Google App Engine
• Java Persistence API

การเก็บข้อมูลลงในโปรแกรม Web Application ที่จะต้องการรองรับผู้ใช้จำนวนมากเป็นเรื่องค่อนข้างยาก
เนื่องจากผู้ใช้จะต้องเรียกใช้โปรแกรมจาก Web Server จำนวนหลายเครื่องจึงอาจทำให้การเรียกใช้โปรแกรมแต่ละ
ครั้งใช้ Web Server ที่ไม่ซ้ำกัน และ Web Server ทุกเครื่องจะต้องสามารถติดต่อกับข้อมูลที่อาจกระจายอยู่ใน
เครื่องแม่ข่ายหลายๆเครื่องได้ Google App Engine มีกลไกในการจัดการ Infrastructure เพื่อทำให้นักพัฒนา
โปรแกรมไม่ต้องกังวลกับการจัดการปัญหาเหล่านั้น โดยสามารถที่จะจัดการข้อมูลได้โดบผ่าน API ที่ทาง Google
กำหนดไว้ให้
Google App Engine สนับสนุนการเขียนโปรแกรมการจัดการฐานข้อมูลโดยการกำหนดมาตรฐานไว้สอง
แบบคือ Java Data Objects (JDO) และ Java Persistence API (JPA) ซึ่งทั้งสองแบบนี้จะใช้แพลตฟอร์มของ
DataNucleus Access การเก็บข้อมูลวิธีนี้จะใช้วิธีแบบ Object Database ซึ่งแตกต่างจาก RDBMS ทั่วๆไป ดัง
นั้นผู้พัฒนาโปรแกรมที่ใช้ RDBMS อาจจะต้องปรับแนวคิดการเก็บข้อมูลใหม่เพื่อให้พัฒนา Google Web
Application เป็นไปได้ง่ายขึ้น

แบบฝึกหัดนี้จะเป็นตัวอย่างการติดต่อกับฐานข้อมูล Books โดยใช้ JPA โดยโปรแกรมจะทำการสร้าง
Entity ที่ชื่อ Book แล้วเขียนโปรแกรมเพื่อเพิ่มข้อมูลและแสดงข้อมูลทั้งหมดของ Book

17.1 การสร้างโปรเจ็ค Google App Engine
แบบฝึกหัดจะสร้าง Web Application ของ GAE โดยมีขั้นตอนดังนี้
1. เลือกคำสั่ง File New Other..
2. ในไดอะล็อก New เลือก Folder Google และเลือก Web Application Project แล้วกด Next
3. กำหนดชื่อ Package name เป็น com.imcinstitute และ Project name เป็น OnlineBook
4. ไม่เลือกช่อง Use Google Web Toolkit แล้วกด Finish
โปรแกรมจะสร้างไฟล์ OnlineBookServlet.java และ persistence.xml (ภายใต้โฟลเดอร์ META-
INF) .ให้อัตโนมัติ

17.2 การพัฒนาโปรแกรม Book Entity Class

โปรแกรม Book.java จะเป็น Entity Class ที่ประกอบไปด้วยฟิลด์ต่างๆที่สอดคล้องกับ column ของ


139

Table ที่ชื่อ Books โดยจะกำหนดให้ไฟล์อยู่ package ที่ชื่อ Entity และมี sourcecode ดัง Listing ที่ 17.1

Listing ที่ 17.1 sourcecode สำหรับโปรแกรม Book.java

package entity;

import java.io.Serializable;

import javax.persistence.Entity;
import javax.persistence.Id;

@Entity
public class Book implements Serializable {
@Id
return isbn;
}
this.isbn = isbn;
}
return title;
}
this.title = title;
}
return author;
}
}
return price;
}
this.price = price;
}
}

17.3 การพัฒนาโปรแกรม EMF.java
โปรแกรม Web Application จะติดต่อกับ datastore โดยใช้ออปเจ็คชนิด EntityManager โดยสร้างมา
จาก EntityManagerFactory โปรแกรม EMF.java เป็นโปรแกรมที่พัฒนาขึ้นมาเพื่อสร้างออปเจ็คดังกล่าว โดยมี
ขั้นตอนการพัฒนาโปรแกรมดังนี้
1. เลือกหน้าต่าง Projects แล้วคลิ๊กขวาที่โหนด OnlineBook จากนั้นเลือกคำสั่ง New Java Class...
2. ในไดอะล็อก New Java Class กำหนดค่า Class Name เป็น EMF และ Package เป็น entity แล้วกด
Finish
3. ปรับปรุงโปรแกรม EMF.java ให้เป็นไปดัง Listing ที่ 17.2


140

Listing ที่ 17.2 sourcecode สำหรับโปรแกรม EMF.java

package entity;

import javax.persistence.EntityManagerFactory;
import javax.persistence.Persistence;

public class EMF {

private static final EntityManagerFactory emfInstance =
Persistence.createEntityManagerFactory(transactions-optional);

private EMF() {
}

public static EntityManagerFactory get() {
return emfInstance;
}
}

17.4 การพัฒนาโปรแกรม addBook.html
โปรแกรม addBook.html จะเป็นฟอร์มสำหรับกรอกข้อมูลหนังสือ แล้วทำการเรียก
OnlineBookServlet ที่มี url เป็น addBook.do เมื่อมีการกดปุ่ม Add โดยมี source code ดัง Listing ที่ 17.3

Listing ที่ 17.3 sourcecode สำหรับโปรแกรม addBook.html

html
head
titleAdd a new book/title
/head
bodyh1Add a new book/h1P
form action=addBook.do method=GET
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

17.5 การพัฒนาโปรแกรม OnlineBookServlet เพื่อรันบน Google App Engine
ขั้นตอนนี้จะเป็นการปรับปรุงโปรแกรม OnlineBookServlet.java เพื่อให้เก็บข้อมูลหนังสือลงใน
datastore ที่ชื่อ Book โดยมีขั้นตอนการพัฒนาโปรแกรมดังนี้

1. โปรแกรม OnlineBookServlet.java ให้เป็นไปดัง Listing ที่ 17.4
2. ปรับปรุงโปรแกรม web.xml โดยแก้ไข servlet-mapping ให้เป็น addBook.do ดังนี้


141

servlet-mapping
servlet-nameOnlineBook/servlet-name
url-pattern/addBook.do/url-pattern
/servlet-mapping

3. ทำการ deploy บน Google App Engine แล้วทดลองรันโปรแกรมโดยใช้ url
http://thaijavaapp.appspot.com/addBook.html

Listing ที่ 17.4 โปรแกรม OnlineBookServlet.java

package com.imcinstitute;


import javax.persistence.EntityManager;

import entity.Book;
import entity.EMF;

@SuppressWarnings(serial)
public class OnlineBookServlet extends HttpServlet {
public void doGet(HttpServletRequest req, HttpServletResponse resp)
resp.setContentType(text/html;charset=UTF-8);
PrintWriter out = resp.getWriter();
out.println(html);
out.println(head);
out.println(titleAdd a new book/title);
out.println(/head);
out.println(body);
out.println(h1 Add a new book /h1);
String isbn = req.getParameter(isbn);
String author = req.getParameter(author);
String title = req.getParameter(title);
String priceStr = req.getParameter(price);
bk.setIsbn(isbn);
bk.setAuthor(author);
bk.setTitle(title);
bk.setPrice(price);
EntityManager em = EMF.get().createEntityManager();
try {
em.persist(bk);
out.println(Book added);
} finally {
em.close();
}
out.println(/body);
out.println(/html);
out.close();

}
}


142

17.6 การพัฒนาโปรแกรมเพื่อแสดงข้อมูลใน Books
ขั้นตอนนี้จะเป็นการเขียนโปรแกรม Servlet เพื่อใช้คำสั่ง JPA ในการแสดงรายละเอียดข้อมูลของ
datastore ที่ชื่อ Books โดยจะมีขั้นตอนดังนี้

1. เลือกหน้าต่าง Projects แล้วคลิ๊กขวาที่โหนด OnlineBook จากนั้นเลือกคำสั่ง New Servlet...
2. ในไดอะล็อก New Servlet กำหนดค่า Class Name เป็น ShowBook และ Package เป็น
com.imcinstitute แล้วกด Finish
3. ปรับปรุงโปรแกรม ShowBook.java ให้เป็นไปดัง Listing ที่ 17.5
4. ปรับปรุงโปรแกรม web.xml เพื่อเพิ่ม Servlet ที่ชื่อ ShowBook ดังนี้
servlet
servlet-nameShowBook/servlet-name
servlet-classcom.imcinstitute.ShowBook/servlet-class
/servlet
servlet-mapping
servlet-nameShowBook/servlet-name
url-pattern/ShowBook/url-pattern
/servlet-mapping

http://thaijavaapp.appspot.com/ShowBook

Listing ที่ 17.5 โปรแกรม ShowBook.java

package com.imcinstitute;


import javax.persistence.EntityManager;
import javax.persistence.Query;

import entity.Book;
import entity.EMF;

@SuppressWarnings(serial)
public class ShowBook extends HttpServlet {
public void doGet(HttpServletRequest req, HttpServletResponse resp)
resp.setContentType(text/html;charset=UTF-8);
PrintWriter out = resp.getWriter();
out.println(html);
out.println(head);
out.println(titleAdd a new book/title);


143

out.println(/head);
out.println(body);
out.println(h1 Show all books /h1);

EntityManager em = EMF.get().createEntityManager();
try {
Query query = em.createQuery(SELECT o FROM Book AS o);
@SuppressWarnings(unchecked)
ListBook bks = (ListBook) query.getResultList();
for (Object obj: bks) {
Book bk = (Book) obj;
out.println(bk.getTitle() + : + bk.getAuthor() + br);
}
} catch(Exception ex) {
out.println(ex);
} finally {
em.close();
}
out.println(/body);
out.println(/html);
out.close();

}
}


37th Floor, Sathorn Square Building,
98 North Sathorn Road, Silom, Bangrak, Bangkok 10500

Tel: 02-105-6322, 088-192-7975

contact@imcinstitute.com
www.imcinstitute.com

www.facebook.com/imcinstitute

www.slideshare.net/imcinstitute

Hand-on Exercise Java Web Programming

More Related Content

Similar to Hand-on Exercise Java Web Programming (20)

More from IMC Institute (20)

Hand-on Exercise Java Web Programming