Java Web Programming (JSP/Servlet) Using Eclipse and Tomcat

1

Hand-on
Exercises

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

Assoc.Prof.Dr.Thanachart Numnonda
Software Park Thailand
and
Asst Prof.Thanisa Kruawaisayawan
King Mongkut's Institute of Technology Ladkrabang
April 2011

การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan

2

สารบัญ
Exercise 1 การสร้างโปรเจ็ค Web Application และไฟล์ HTML..........................................................................5
1.สร้าง Application Server ................................................................................................................. 5
2.สร้างโปรเจ็ค Web Application............................................................................................................. 5
3.พัฒนาโปรแกรม addCustomer.html ...................................................................................................... 5
1.1 สร้าง Application Server............................................................................................................... 5
1.2 การสร้าง Web Application Project.................................................................................................. 6
1.3 การพัฒนาโปรแกรม addCustomer.html................................................................................................ 8
1.4 การทดสอบโปรแกรม...........................................................................................................................12
Exercise 2 การเขียนโปรแกรม Java Servlet เพื่ออ่านค่าพารามิเตอร์..........................................................................14
2.1 การพัฒนาโปรแกรม CustomerServlet.java......................................................................................... 14
2.1.1 การอ่านค่าพารามิเตอร์จาก addCustomer.html ............................................................................... 14
2.1.2 การแสดงรายละเอียดของค่าต่างๆ.......................................................................................................15
2.2 ขั้นตอนการพัฒนาโปรแกรม CustomerServlet.java ................................................................................16
2.3 การทดสอบโปรแกรม...........................................................................................................................18
2.4 การปรับปรุงโปรแกรมเพื่อให้เรียกไฟล์ addCustomer.html เมื่อเริ่มต้น และ ให้แสดงผลภาษาไทยถูกต้อง............................20
Exercise 3 โปรแกรมเว็บสำหรับการทำโพล......................................................................................................... 23
3.1 โปรแกรม vote.html....................................................................................................................... 23
3.2 การพัฒนาโปรแกรม VoteServlet.java................................................................................................. 23
3.2.1 กำหนดตัวแปร counter และ lang ............................................................................................... 24
3.2.2 อ่านค่าพารามิเตอร์ต่างๆที่ส่งมาจาก vote.html และทำการประมวลผล............................................................ 24
3.2.3 การแสดงผลการโหวต...................................................................................................................24
3.3 ขั้นตอนการพัฒนาโปรเจ็ค Voter ............................................................................................................ 25
3.4 การปรับปรุงโปรแกรม VoteServlet.java............................................................................................... 30
3.4.1 กำหนดตัวแปร voters................................................................................................................30
3.4.2 การอ่านหมายเลขไอพีของผู้ใช้.......................................................................................................... 30
Exercise 4 การเชื่อมต่อกับ MySQL Database............................................................................................. 32
4.1 การจัดการ Table
เปิดโปรแกรม MySQL Workbench....................................................................................................... 32
4.2 การสร้างตาราง books....................................................................................................................... 33
4.3 การใช้คำสั่ง SQL ใน MySQL WorkBench........................................................................................35
Exercise 5 การพัฒนาโปรแกรมเว็บ เพื่อติดต่อกับฐานข้อมูล........................................................................................ 37
5.1 การ Config Apache Tomcat ให้สามารถใช้งาน JDBC Driver...............................................................37
5.2 การสร้าง Web Application Project................................................................................................ 38
5.3 การพัฒนาโปรแกรม addBook.html.....................................................................................................38
5.4 การพัฒนาโปรแกรม thankyou.html.................................................................................................... 40
5.5 การพัฒนาโปรแกรม AddBookServlet.java......................................................................................... 40
5.5.1 การอ่านค่าพารามิเตอร์จาก addBook.html ......................................................................................40
5.5.2 การเชื่อมต่อกับฐานข้อมูล...............................................................................................................41
5.5.3 เพิ่มรายชื่อหนังสือใหม่ลงในฐานข้อมูล ................................................................................................ 43
5.5.4 การเรียกเว็บเพจ thankyou.html ................................................................................................ 43
5.6 ขั้นตอนการพัฒนาโปรแกรม AddBookServlet.java ................................................................................44
5.7 ทดสอบโปรแกรม...............................................................................................................................46
Exercise 6 โปรแกรมเว็บเพื่อสาธิตขอบเขตของออปเจ็ค............................................................................................ 48
6.1 การพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request ..................................................................... 48
6.1.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request .....................................................50
6.1.2 ขั้นตอนการทดสอบโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request.................................................... 51
6.2 การพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Session ......................................................................52
6.2.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Session .....................................................54


3

6.2.2 ขั้นตอนการทดสอบโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Session ....................................................54
6.3 การพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Application................................................................ 55
6.3.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Application................................................................. 57
6.3.2 ขั้นตอนการทดสอบโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Application.............................................. 57
Exercise 7 การพัฒนา WebBase DB โดยคลาสประเภท Web Listener............................................................... 58
7.1 การพัฒนาโปรแกรม Init.java.............................................................................................................. 58
7.2 การปรับปรุงโปรแกรม AddBookServlet.java ......................................................................................61
7.3 ทดสอบโปรแกรม...............................................................................................................................63
Exercise 8 การพัฒนาโปรแกรม Servlet Filter ...............................................................................................64
8.1 การพัฒนาโปรแกรม Servlet Filter.......................................................................................................64
8.2 การเขียนหน้า Login......................................................................................................................... 65
8.3 การเขียน Servlet Filter.................................................................................................................. 67
8.4 การเขียนโปรแกรม ShowServlet ........................................................................................................70
8.5 ขั้นตอนการทดสอบโปรแกรม ..................................................................................................................72
Exercise 9 การเขียนโปรแกรม JSP เพื่อแสดงผลลัพธ์.............................................................................................73
9.1 การพัฒนาโปรแกรม hello.jsp............................................................................................................. 73
9.2 การพัฒนาโปรแกรม viewBook.jsp.....................................................................................................74
9.2.1 การกำหนด Tag Library.......................................................................................................... 74
9.2.2 การกำหนด Datasource........................................................................................................... 74
9.2.3 การใช้คำสั่ง c:forEach เพื่อแสดงผล .............................................................................................. 75
Exercise 10 การพัฒนาโปรแกรมเว็บ Online Book Store.................................................................................77
10.1 การพัฒนาโปรแกรม selectBooks.jsp.................................................................................................77
10.2 การพัฒนาโปรแกรม Book.java......................................................................................................... 81
10.3 การพัฒนาโปรแกรม Cart.java........................................................................................................... 84
10.4 การพัฒนาโปรแกรม ProcessSelection.java.......................................................................................85
10.5 การพัฒนาโปรแกรม Init.java ........................................................................................................... 87
10.6 การพัฒนาโปรแกรม viewCart.jsp..................................................................................................... 88
10.7 ขั้นตอนการทดสอบโปรแกรม ................................................................................................................89
Exercise 11 การสร้าง Custom Tags สำหรับโปรแกรม JSP............................................................................... 90
11.1 การพัฒนาโปรแกรม hello.jsp............................................................................................................ 90
11.2 การพัฒนาโปรแกรม helloTag.jsp...................................................................................................... 92
11.2.1 สร้างไฟล์ Java ClassTag Handler.........................................................................................93
11.2.2 สร้าง Tag Library Descriptor............................................................................................. 95
11.2.3 เขียนโปรแกรม helloTag.jsp.................................................................................................... 97
11.3 การพัฒนาโปรแกรม helloJSTL.jsp................................................................................................... 98
11.4 การพัฒนาโปรแกรม helloTagFile.jsp................................................................................................ 99
11.4.1 สร้าง Tag File.....................................................................................................................99
11.4.2 เขียนโปรแกรม helloTagFile.jsp............................................................................................101
Exercise 12 การพัฒนาโปรแกรมเว็บโดยใช้ Strut Framework ..........................................................................102
12.1 การสร้างโปรเจ็ค StrutsDBApp ในรูปแบบ Struts Frameworks...........................................................103
12.2 การพัฒนาโปรแกรม addBook.jsp................................................................................................... 104
12.3 การพัฒนาโปรแกรม BookFormBean.java และ AddBookAction......................................................106
12.4 การพัฒนาโปรแกรม AddBookAction.java......................................................................................109
12.5 การพัฒนาโปรแกรม Init.java และ Thankyou.html [View]................................................................ 111
12.6 การพัฒนาไฟล์ struts-config.xml [Controller].............................................................................. 111
12.7 การทดสอบโปรแกรม.......................................................................................................................112
Exercise 13 การพัฒนาโปรแกรมเว็บโดยใช้ JSF Framework.............................................................................114
13.1 สร้างโปรเจ็ค JSFDBApp............................................................................................................. 114
13.2 การพัฒนาโปรแกรม JSF Managed Bean.........................................................................................116
13.3 สร้างหน้าจอรับ Input โดยสร้าง addBook.jsp และ พัฒนาส่วนตรวจสอบ(Validation ข้อมูล).............................118
13.4 สร้าง thankyou.html, error.html.............................................................................................. 119


4

13.5 การกำหนด Page Navigation...................................................................................................... 119
13.6 การทดสอบโปรแกรม.......................................................................................................................122
Exercise 14 การ Authentication โดยใช้ Tomcat .....................................................................................123
14.1 สร้าง Web Application Project................................................................................................ 123
14.2 เพิ่ม User ของ Tomcat Web Server........................................................................................... 123
14.3 การ Config ไฟล์ web.xml ของ Web Application ที่ต้องการใช้ Tomcat user .....................................124
14.4 การทดสอบโปรแกรมแบบ Basic Authenticate...................................................................................126
14.5 การปรับปรุงโปรแกรมเพื่อให้ใช้ Login Form........................................................................................ 127
14.6 การทดสอบโปรแกรม แบบ Form Authenticate.................................................................................. 128
14.7 การปรับปรุงโปรแกรม เพื่อใช้ Authenticate โดยอ่านจาก Database MySQL.............................................. 128
14.8 การทดสอบโปรแกรม แบบ Database Authenticate............................................................................ 129


5

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

1.1 สร้าง Application Server
สร้างเพื่อให้ Eclipse รู้ว่าจะนำ code ที่compile แล้ว ไป Deploy ลง Application Server ที่เป็น Tomcat
เลือกที่ TAB Servers คลิกขวาภายใน Window แล้วเลือก New → Server - เลือกชื่อ Apache → Tomcat
v6.0 Server และ Browse ไปยัง folder Tomcat ที่ติดตั้งไว้

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


6

1.2 การสร้าง Web Application Project
สร้างโปรแกรม Web-Base Application โดยการสร้าง Project ใหม่ มีขั้นตอนดังนี้
1. เลือกเมนู File → New → Project
เลือกรูป Folder ชื่อ Web และเลือก Dynamic Web Project ดังรูปที่ 1.2

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


7

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

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


8

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

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

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

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

ขั้นตอนการพัฒนาโปรแกรม addCustomer.html


9

1. เลือกหน้าต่าง Project แล้วคลิ๊กขวาที่โหนด WebApp เลือก New → HTML File ดังรูป 1.7

รูปที่ 1.6 การ new File HTML
2. กำหนด HTML File Name: เป็น addCustomer แล้วกด Finish ดังรูป 1.8

รูปที่ 1.7 การสร้างและตั้งชื่อ File HTML


10

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

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


11

- คลิกเลือกพื้นที่ว่างส่วนบนของหน้าจอ เลือก Show และ Palette

รูปที่ 1.9 การเรียกใช้ HTML Forms Icon ใน Palette Tools

- จะได้ Tab ชื่อ Palette อยู่ที่หน้าจอด้านล่าง คลิกที่ HTML 4.0 จะมี Icons ให้เลือก
สามารถที่จะ Drag & Drop ขึ้นไปวางด้านบนสุด (ลำดับที่3 ดังรูป 1.11)
และปรับค่า Attribute ของ Object นั้นๆโดย เลือกที่ Tab Properties(Tabถัดไปทางขวา) ได้

รูปที่ 1.10 การ Drag and Drop Forms Icon ไปที่หน้า Design
1.4 การทดสอบโปรแกรม


12

1. Deploy Web Project สู่ Web Application Server
โดยไปที่ Tab Server แล้ว Click ขวาที่ ชื่อ Tomcat v6.0 เลือก Add and Remove

รูปที่ 1.11 การ Drag and Drop Forms Icon ไปที่หน้า Design

จากนั้นเลือก WebApp แล้ว กดปุ่ม Add เพื่อเพิ่มเข้าไปที่ Web Application Server และกด Finish

รูปที่ 1.12 การ Deploy Project สู่ Web Application Server

2. Run โปรแกรม WebApp โดยคลิ๊กขวาที่ addCustomer.html → Run As → Run on Server

รูปที่ 1.13 การรัน File ที่ต้องการ Test
3. จะมีให้เลือกว่าจะให้รัน file นี้ที่ Server ไหน (กรณีเรานี้มี Server เดียว) กด Finish


13

รูปที่ 1.14 การเลือก Web Application Server ที่จะใช้รัน

4. จะได้ผลลัพธ์ดัง รูปที่ 1.15

รูปที่ 1.15 ผลลัพธ์ที่ได้จากการรัน File addCustomer.html
หมายเหตุ สังเกตที่ท้าย hostname จะหมายเลขพอร์ต ซึ่งก็คื อ port ที่ Tomcat Server ให้บริการอยู่
โดย Default จะเป็น 8080 ยกเว้นว่าจะกำหนดหมายเลขอื่น


14

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


15

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


16

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
3. กำหนดค่า URL Pattern(หรือ URL Mappings) เป็น /addCustomer.do


17

โดยคลิกเลือกชื่อ CustomerServlet, กดปุ่ม Edit
แล้วเปลี่ยน URL Mapping เป็น addCustomer.do และกด Finish ดังรูปที่ 2.3

รูปที่ 2.3 การกำหนด URL Pattern

4. จากนั้นเพิ่ม Method ที่ file CustomerServlet.java
สำหรับรับ action ที่Submit มาจาก Http-Request (HTML Form) ทั้งชนิด POST และ GET
โดยตั้งชื่อ Method ว่า processRequest( )
protected void processRequest(HttpServletRequest
request,HttpServletResponse response)
throws IOException {

// ให้ implement source code ตาม หัวข้อ 2.1.2
}


18

5. Implement Code เพิ่มใน Method doGet(),doPost()
เพื่อส่งต่อ Http-Request ให้ Method processRequest()
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 การรันทดสอบ addCustomer Servlet


19

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

รูปที่ 2.5 กรอกข้อมูลทดสอบ Servlet ผ่านหน้า addCustomer.html
3. โปรแกรมจะแสดงผล ดังรูปที่ 2.6

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


20

2.4 การปรับปรุงโปรแกรมเพื่อให้เรียกไฟล์ addCustomer.html เมื่อเริ่มต้น และ ให้แสดงผลภาษาไทยถูกต้อง
เราสามารถที่จะปรับปรุงโปรเจ็คนี้เพื่อให้เรียกไฟล์ addCustomer.html โดยไม่ต้องระบุชื่อ file ใน URL
เช่นเรียก http://localhost:8080/WebApp แล้วให้รัน Webpage addCustomer.html อัตโนมัติ
ทำได้โดยการกำหนดพารามิเตอร์ Welcome Files ให้เป็นไฟล์ดังกล่าว โดยมีขั้นตอนดังนี้
1. ในหน้าต่าง Projects ขยายโหนด WebApp → Deployment Descriptor → Welcome Page
2. Double click ที่ Welcome Pages แล้วเพิ่มชื่อของหน้า Page addCustomer.html ลงไปที่บรรทักแรก หลัง Tag
<Welcome-file-list> ดังรูปที่ 2.7 แล้ว save

รูปที่ 2.7 แก้ไข web.xml ให้ addCustomer.html เป็นหน้าแรกของ Project

3. ทำการทดสอบคือคลิ๊กขวาที่ Project WebApp → Run As → Run on Server

รูปที่ 2.8 ทดสอบรันหน้า addCustomer.html เพื่อเรียกใช้ CustomerServlet.java


21

รูปที่ 2.9 ทดสอบรันหน้า addCustomer.html เพื่อเรียกใช้ CustomerServlet.java
จะเห็นว่า เราไม่ได้ระบุชื่อ addCustomer.html ลงไป แต่เมื่อเรียก /WebApp, Application Server
จะทราบทันทีว่าต้องนำ File ไหนขึ้นมารัน เพื่อให้เป็น Page แรก (Tomcat อ่านจาก web.xml นั่นเอง)

4. กรณีถ้า Configuration ถูกเปลี่ยนค่า หรือมี class ใหม่เกิดขึ้น Tomcat จะมีการตอบสนองดังนี้
4.1 การเตือนที่ Status ที่ Tab Server

รูปที่ 2.10 Apache Tomcat เตือนให้ Restart Server

4.2 เมื่อสั่งรัน Application ดังข้อ 3 จะมี Dialog box ถาม เพื่อให้Confirm ว่าจะ Restart App Server หรือไม่
ถ้าต้องการให้ source code ที่แก้ไป มีผลทันที ให้เลือก Restart Server แล้วกดปุ่ม OK

รูปที่ 2.11 Apache Tomcat ขอ Confirm การ Restart Server

เมื่อได้ทำข้อ 4.1 หรือ 4.2 ข้อใดข้อหนึ่งแล้ว ให้ดูที่สถานะของ Tomcat จะพบว่าเป็น Synchronized


22

ก็จะทำให้ source code ที่ถูกแก้ไขไปนั้น ถูกใช้งาน

รูปที่ 2.12 Apache Tomcat ขณะพร้อมใช้งาน
นอกจากนี้ถ้าเราทดลองป้อนข้อมูลภาษาไทย ลงไปในจะพบว่าโปรแกรม Web Browser บางตัวจะแสดง
ผลลัพธ์ภาษาไทยไม่ถูกต้อง เราสามารถแก้ไขได้ โดยการกำหนดให้การเข้ารหัสของพารามิเตอร์ที่ส่งมาเป็น
UTF-8 โดยเพิ่มคำสั่งเข้าไปที่ Method processRequest โดยต่อจากบรรทัดของ PrintWriter out …. ดังนี้

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


23

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. แสดงผลการโหวต


24

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


25

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

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


26

2. กำหนด HTML File Name = vote แล้วกด Finish

รูปที่ 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>


27

4. เลือกหน้าต่าง Projects แล้วคลิ๊กขวาที่โหนด Voter เลือกคำสั่ง New > Servlet
กำหนด Package เป็น controller และ Class Name = VoteServlet.java
แล้วกด Next กำหนด URL Mapping = /processVote แล้วกด Finish

รูปที่ 3.4 การสร้าง Java Servlet ชื่อ VoteServlet.java และกำหนด URL Pattern (URL Mapping)


28

ในหน้าต่าง 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;

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

}
}


29

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

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

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


30

3.4 การปรับปรุงโปรแกรม VoteServlet.java
ให้ Set Welcome Page เมื่อเรียก http://localhost:8080/Voter/ ให้ไปที่ vote.html ทันที (ตัวอย่าง หน้าที่ 20)
เพื่อความสะดวก ไม่ต้องระบุชื่อ html page ขณะเรียกใช้งาน
ขั้นตอนนี้จะเป็นการปรับปรุงโปรแกรม 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());
}


31

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

import java.util.HashSet;


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


32

Exercise 4 การเชื่อมต่อกับ MySQL Database
เนื้อหาที่ต้องศึกษาก่อน -
แบบฝึกหัดนี้เป็นการเริ่มต้นใช้งาน Database Tool เพื่อเชื่อมต่อกับ Table test ในฐานข้อมูล MySQL
สำหรับเป็นตัวช่วยให้ทำงานได้เร็วขึ้น เช่นปกติถ้าจะ create table ก็ต้องเขียน SQL แต่ Tool นี้มี GUI มาช่วย
ทำให้ลดข้อผิดพลาด และ สะดวกในการทำงานมากขึ้น
4.1 การจัดการ Table
เปิดโปรแกรม MySQL Workbench

รูปที่ 4.1 การเรียกใช้งาน Program MySQL Workbench
1. Double Click Connection Name ใส่ Password ที่กำหนดไว้ในตอนติดตั้งโปรแกรม MySQL ซึ่งจะมีค่าเป็น
root ดังรูปที่ 4.2

รูปที่ 4.2 การแสดงการเชื่อมต่อ Connection เพื่อเข้าไปจัดการ Database


33

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. Double คลิ๊ก Add Table... ใส่ชื่อ table และ ชื่อ field แล้วกดปุ่ม Apply ดังตารางที่ 4.1

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


34

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


35

4.3 การใช้คำสั่ง SQL ใน MySQL WorkBench
ภายหลังจากที่มีการสร้าง Table ที่ชื่อ books เราสามารถใช้คำสั่ง SQL เพื่อที่จะติดต่อกับฐานข้อมูล
ในที่นี้จะแสดงการเพิ่มข้อมูลลงใน Table โดยมีขั้นตอนต่างๆดังนี้
1. Double Click ที่ Table books ด้านขวา จะได้ SQL Editor ให้ป้อนคำสั่ง SQL เป็น
INSERT INTO books VALUES ('123', 'JAVA', 'Thanisa', 2500.00);
INSERT INTO books VALUES ('456', 'SOA', 'Thanachart ', 3000.00) ;
แล้ว กด Icon สายฟ้าสีเหลือง ดังรูป 4.8 หรือกด Ctrl+Shift+Enter เพื่อรันคำสั่ง SQL ทั้งหมด

รูปที่ 4.5 การ Execute คำสั่งเพิ่มข้อมูลในตาราง


36

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

รูปที่ 4.6 การเรียกดูข้อมูลในตาราง


37

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 ตำแหน่งของ 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


38

5.2 การสร้าง Web Application Project
เลือกเมนู File → New Project เลือก Dynamic Web Application
กำหนดชื่อ Project Name = WebBaseDB (ตัวอย่างการสร้าง Project Web Application หน้า 24)
5.3 การพัฒนาโปรแกรม addBook.html
โปรแกรม addBook.html เป็นเว็บเพจที่ใช้แสดงฟอร์มสำหรับป้อนข้อมูลหนังสือใหม่เข้าในฐานข้อมูล
books ซึ่งมีลักษณะดังรูปที่ 5.2 โปรแกรม addBook.html

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

ขั้นตอนการพัฒนาดังนี้
1. คลิ๊กขวาที่โหนด WebBaseDB จากนั้นเลือกคำสั่ง New → HTML File (ตัวอย่าง หน้า 25)
กำหนด File Name: เป็น addBook แล้วกด Finish
2. เขียน source code ของไฟล์ addBook.html ตาม Listing ที่ 5.1
หรือ ลาก icon ประเภท HTML Forms ที่อยู่ในหน้าต่าง Palette เพื่อสามารถให้เขียนโปรแกรมได้ง่ายขึ้น
(ตัวอย่าง หน้า 9 โดยทำตาม รูปแบบที่ 2) ดังรูปที่ 5.3


39

รูปที่ 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>


40

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

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

<html>
<head>
<title>Thank you</title>
</head>
<body>
<H1>Thank you for inserting data </H1>
</body>
</html>

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


41

5.5.2 การเชื่อมต่อกับฐานข้อมูล
การดึงข้อมูลระหว่าง Application กับ MySQL Database มีขั้นตอนดังนี้
● เพิ่ม Resource ชนิด Data source ลงไปที่ Container ของ Tomcat

● เพิ่ม Resource Reference โดยทำการ Map DataSource ที่ Application ต้องการใช้

● เรียกใช้คำสั่ง SQL โดยใช้เมธอด executeQuery() หรือ executeUpdate()

1. เพิ่ม Resource ชนิด DataSource ลงไปที่ Tomcat
โดยสร้าง file context.xml ที่ Folder WebBaseDBWebContentMETA-INF ดังรูป 5.4
<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>

รูปที่ 5.4 เพิ่ม Resource ให้กับ Apache Tomcat


42

2. ทำการ Mapping Data source ที่ Application ต้องการเชื่อมต่อ
โดยแก้ไข Web Deployment Descriptor ของ Project (WEB-INFweb.xml) โดยเพิ่มดังนี้
<resource-ref>
<description>Test Database</description>
<res-ref-name>jdbc/test</res-ref-name>
<res-type>javax.sql.DataSource</res-type>
<res-auth>Container</res-auth>
</resource-ref>

รูปที่ 5.5 เพิ่ม Resource Reference ที่ Web Deployment Descriptor
3. การขอ Data source จะใช้ @annotation และบอกชื่อของ Data source ตัวที่เราต้องการ
ตย. source code เช่น
@Resource(name = "jdbc/test")
private DataSource jdbcTest;

เมื่อได้ Data source แล้ว เราก็จะสร้างทางติดต่อ โดย get Connection จากมันแล้วเก็บค่าไว้ที่ตัวแปร 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 เพิ่มรายชื่อหนังสือใหม่ลงในฐานข้อมูล


43

เมื่อเชื่อมต่อฐานข้อมูลและได้ออปเจ็คชนิด 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 ดังนี้

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


44

5.6 ขั้นตอนการพัฒนาโปรแกรม AddBookServlet.java
1. คลิ๊กขวาที่โหนด WebBaseDB จากนั้นเลือกคำสั่ง New → Servlet
กำหนด 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;

public class AddBookServlet extends HttpServlet {


try {
conn = jdbcTest.getConnection();
} catch (Exception ex) {
System.out.println(ex);
}
}

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


45

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 ไฟล์ไหน เรียกว่า การทำ Organize Imports

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

4. เพื่อความสะดวกในการเรียกใช้ Web Application อาจปรับให้ Welcome file เป็น addBook.html (ตัวอย่าง
Exercise 2 การเขียนโปรแกรม Java Servlet เพื่ออ่านค่าพารามิเตอร์ ที่หน้า 20)


46

5.7 ทดสอบโปรแกรม
1. ทำการ Deploy โปรแกรม WebBaseDB ซึ่งใน Eclipse ทำโดย Click ขวาที่ Add and Remove

2. เรียกใช้งานหน้า addBook.html แล้วทดสอบกรอกข้อมูลดังรูปที่ 5.7

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

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

รูปที่ 5.8 ผลลัพธ์ที่แสดงทาง Web Browser


47

4. เข้าไปดูข้อมูล โดยใช้ MySQLWorkbench เลือกคำสั่ง Select Rows -... จาก Table ที่ชื่อ books ดังรูปที่ 5.9

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


48

Exercise 6 โปรแกรมเว็บเพื่อสาธิตขอบเขตของออปเจ็ค
นื้อหาที่ต้องศึกษาก่อน การเขียนโปรแกรม Servlet เพื่ออ่านค่าพารามิเตอร์
แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม Java Servlet เพื่ออธิบายขอบเขตการทำงานของออปเจ็คใน
โปรแกรมแบบเว็บ (Object Scope) ที่มีอยู่สี่แบบคือ Page, Request, Session และ Web (Application) โดยจะทดลอง
ส่งค่าของออปเจ็คผ่านกันระหว่างโปรแกรม Servlet สองชุด
6.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 = “Thanisa”;
request.setAttribute(“RequestName”, name);

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

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


49

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

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

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

package servlet;

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

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

public class FirstServlet extends HttpServlet {

protected void processRequest(HttpServletRequest request, HttpServletResponse
response)


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

}

}

}
}


50

Listing ที่ 6.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();
}
}

}

}

}
}

6.1.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request
เราสามารถที่จะพัฒนาโปรแกรม ตามขั้นตอนดังนี้
1. เลือกเมนู File → New → Dynamic Web Application
กำหนด Project Name = ScopeDemo
2. คลิ๊กขวาที่โหนด ScopeDemo → New → Servlet
กำหนด Package = servlet , Class Name = FirstServlet แล้วกด Finish
ในหน้าต่าง Editor เขียน Source code ของ FirstServlet.java ดัง Listing ที่ 6.1 แล้ว Save


51

3. คลิ๊กขวาที่โหนด ScopeDemo อีกครั้ง
จากนั้นเลือกคำสั่ง New → Servlet
กำหนด Package = servlet , Class Name = SecondServlet แล้วกด Finish
4. ในหน้าต่าง Editor เขียน Source code ของ SecondServlet.java ดัง Listing ที่ 6.2 แล้ว Save
6.1.2 ขั้นตอนการทดสอบโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request
เราสามารถที่จะทดสอบโปรแกรม ตามขั้นตอนดังนี้
1. ทำการ Deploy โปรเจ็ค ScopeDemo โดยคลิ๊กขวาที่ Apache Tomcat แล้ว Add and Remove Project เข้าไป

รูปที่ 6.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


52

6.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");

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

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

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

}



53

}

}

}

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

package servlet;

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


public class SecondSessionServlet extends HttpServlet {

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

}

}

}

}


54

6.2.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Session
1. เลือกเมนู File → New แล้วเลือก Dynamic Web Application
2. คลิ๊กขวาที่โหนด ScopeDemo จากนั้นเลือกคำสั่ง New → Servlet
3. ในหน้าต่าง Editor เขียน Source code ของ FirstSessionServlet.java ดัง Listing ที่ 6.3 แล้ว Save
ในหน้าต่าง Editor เขียน Source code ของ SecondSessionServlet.java ดัง Listing ที่ 6.4 แล้ว Save
6.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 ใหม่แล้วสังเกตผลลัพธ์


55

6.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 ที่ 6.5 และ โปรแกรม SecondAppServlet ที่จะใช้ในการอ่านค่าของออปเจ็คที่ส่งออกมา
แล้วนำมาแสดงผล ซึ่งมี source code ตาม Listing ที่ 6.6
Listing ที่ 6.5 โปรแกรม FirstAppServlet.java
package servlet;
import java.io.*;
import java.net.*;

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


56

}

}

}
}

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

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

public class SecondAppServlet extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse
response)
try {
String name = (String) context.getAttribute("AppName");
out.println(name);
} finally {
out.close();
}
}
}
}
}


57

6.3.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Application
1. เลือกเมนู File → New แล้วเลือก Dynamic Web Application
2. คลิ๊กขวาที่โหนด ScopeDemo จากนั้นเลือกคำสั่ง New → Servlet
3. ในหน้าต่าง Editor เขียน Source code ของ FirstAppServlet.java ดัง Listing ที่ 6.5 แล้ว Save
ในหน้าต่าง Editor เขียน Source code ของ SecondAppServlet.java ดัง Listing ที่ 6.6 แล้ว Save
6.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 ใหม่แล้วสังเกตผลลัพธ์


58

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

เนื้อหาที่ต้องศึกษาก่อน การพัฒนาโปรแกรมเว็บเพื่อติดต่อกับฐานข้อมูล
แบบฝึกหัดนี้จะเป็นการปรับปรุงโปรเจ็ค Web Application ที่ชื่อ WebBaseDB ที่ใช้ในการเชื่อมโยงฐาน
ข้อมูลและใส่ข้อมูลลง Table โดยเพิ่มคลาสประเภท Web Listener เพื่อทำการเชื่อมต่อกับฐานข้อมูลแทนวิธีการเดิมที่
เชื่อมต่อในเมธอด init()
1. พัฒนาโปรแกรม Init.java
2. แก้ไขโปรแกรม AddBookServlet.java
7.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 นั้นๆ
3. เขียน Config ไฟล์เพิ่มที่ Web Deployment Descriptor web.xml เพื่อเพิ่ม คลาสประเภท Listener
โปรแกรม Init.java คือโปรแกรมที่เป็น ServletContextListener มันจะเชื่อมต่อกับฐานข้อมูล
เมื่อ Web Application เริ่มทำงาน แล้วเก็บออปเจ็ค Connection ไว้ภายใน ServletContext เพื่อลดจำนวนครั้งในการ
เชื่อมต่อฐานข้อมูล
เขียนคำสั่งเชื่อมต่อฐานข้อมูลทำที่ Method contextInitialized( ) ซึ่งจะถูกเรียกเมื่อ Web Application เริ่มต้น
การทำงาน


59

ขั้นตอนการพัฒนาโปรแกรม Init.java
1. คลิ๊กขวาที่โหนด WebBaseDB → New → Listener
กำหนด Package = listener , Class Name = Init
แล้วกด Finish ดังรูปที่ 7.1

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

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

60

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

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


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

5. นำ Connection ไปเก็บที่ ServletContext แล้ว กำหนดชื่อ context varible เป็น 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 ที่ 7.1

Listing ที่ 7.1 โปรแกรม Init.java
package listener;


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

public class Init implements ServletContextListener {

@Resource(name="jdbc/test")



61

public void contextInitialized(ServletContextEvent arg0) {
try {

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

try {
conn.close();
} catch (SQLException e) {e.printStackTrace();}
}
}

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

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

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

public class AddBookServlet extends HttpServlet {



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



62

out.println("<title>Add a new book</title>");
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");
}

out.println("Error " + ex);
return;
}
out.close();
}

HttpServletResponse response) throws ServletException,
IOException {
}

HttpServletResponse response) throws ServletException,
IOException {
}
}


63

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


64

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

เนื้อหาที่ต้องศึกษาก่อน การเขียนโปรแกรม Servlet เพื่ออ่านค่าพารามิเตอร์
แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม Web Application เพื่ออธิบายการใช้ Servlet Filter ในการตรวจ
สอบการ login เข้าสู่ระบบ โดยโปรแกรม Java Servlet บางโปรแกรมที่อยู่ใน Web Application จะถูก Filter เรียกเพื่อ
ตัวสอบสถานะการ login ก่อนที่จะสามารถใช้โปรแกรมนั้นได้
8.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
ใดๆ โดยการกำหนดค่าใน web.xml อาทิเช่นคำสั่ง
<filter>
<filter-name>LoginFilterName</filter-name>
<filter-class> LoginFilter </filter-class>
</filter>
<filter-mapping>
<filter-name>LoginFilterName</filter-name>
<url-pattern> /* </url-pattern>
</filter-mapping>

เป็นการกำหนดให้โปรแกรม URL ทุกตัวที่อยู่ใน Web Application นี้ ต้องถูกดักโดย Servlet Filter ที่
ชื่อ LoginFilter


65

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

รูปที่ 8.1 เว็บหน้า Login
Listing ที่ 8.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>


66

Listing ที่ 8.2 โปรแกรม LoginServlet.java
package controller;
import java.io.*;
import java.net.*;
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) {
e.printStackTrace();
}
}

}

}

}
}

ขั้นตอนการพัฒนาโปรแกรม
1. เลือกเมนู File → New → Dynamic Web Project กำหนด Project = FilterDemo
2. คลิ๊กขวาที่ FilterDemo → New → HTML File
กำหนด HTML File Name = login แล้วกด Finish
3. ในหน้าต่าง Editor เขียน Source code ของ login.html ดัง Listing ที่ 8.1 แล้ว Save
4. คลิ๊กขวาที่ FilterDemo → New → Servlet
กำหนด Package = controller , Class Name = LoginServlet.java แล้วกด Finish
ในหน้าต่าง Editor เขียน Source code ของ LoginServlet.java ดัง Listing ที่ 8.2 แล้ว Save


67

8.3 การเขียน Servlet Filter
โปรแกรม LoginFilter จะทำหน้าที่ในการเรียก attribute ที่ชื่อ loginFlag และหากไม่พบหรือมีค่าเป็น
false โปรแกรมจะระบุ HTTP Error 401 (Unauthorize) โปรแกรม LoginFilter จะมี source code หลัก
อยู่ที่ เมธอด doFilter() ดัง Listing ที่ 8.3
กรณีนี้จะกำหนดให้ URL เฉพาะที่เป็น *.do จึงจะเรียกใช้ Filter ที่ชื่อ LoginFilter
ให้ใช้ Eclipse สร้าง Filter

จะเห็นความเปลี่ยนแปลงที่ Web Deployment Descriptor คือมี Line เพิ่มขึ้นมาดังนี้
<filter>
<display-name>LoginFilter</display-name>
<filter-name>LoginFilter</filter-name>
<filter-class>filter.LoginFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>LoginFilter</filter-name>
<url-pattern>*.do</url-pattern>
</filter-mapping>

Listing ที่ 8.3 เมธอด doFilter() ของ โปรแกรม LoginFilter.java
package filter;
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();
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 {
}
}


68

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

รูปที่ 8.2 การกำหนดค่าของ Filter


69

5. โปรแกรมจะทำการแก้ไขไฟล์ web.xml เพื่อระบุ Filter ใหม่ที่สร้างขึ้น ซึ่งเราสามารถที่จะดูการแก้ไขนี้ได้
โดยการขยายโหนด FilterDemo → WebContent → WEB-INF แล้ว ดับเบิลคลิ๊กไฟล์ web.xml

รูปที่ 8.3 ดูผลลัพธ์ของ Web Deployment Descriptor (web.xml) เมื่อ add Filter สู่ Project
6. ในหน้าต่าง Editor เขียน Source code ของเมธอด doFilter() ของไฟล์ LoginFilter.java ดัง Listing ที่
8.3 แล้ว Save


70

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

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

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


71

รูปที่ 8.4 การกำหนดค่า URL pattern
3. ในหน้าต่าง Editor เขียน Source code ของ ShowServlet.java ดัง Listing ที่ 8.4 แล้วเลือกคำสั่ง Save


72

8.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
สังเกตว่าผลลัพธ์เป็นอย่างไร


73

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

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

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

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

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


74

Listing ที่ 9.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>

รูปที่ 9.2 ผลลัพธ์ของ hello.jsp
9.2 การพัฒนาโปรแกรม viewBook.jsp
โปรแกรม viewBook.jsp เป็นโปรแกรม JSP เพื่อแสดงข้อมูลของ Table ที่ชื่อ books โปรแกรมนี้จะเรียกใช้
standard tags ที่กำหนดไว้ใน JSTL ซึ่งทำให้ผู้เขียนโปรแกรม JSP ไม่ต้องเขียน source code ภาษา Java โดยมีคำสั่ง
ต่างๆ ที่สำคัญดังนี้
9.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"%>

9.2.2 การกำหนด Datasource
โปรแกรม JSP นี้จะทำการเชื่อมต่อกับฐานข้อมูล โดยจะต้องใช้ DataSource ของโปรเจ็ค โดยสามารถ
กำหนดได้สองวิธี
1. กรณีที่มี datasource ซึ่งเชื่อมต่อฐานข้อมูลที่ต้องการอยู่แล้ว ก็สามารถใช้อันเดิมได้เลย ตัวอย่างเช่น
jdbc/test โดยไม่จำเป็นต้องสร้าง dataSource ขึ้นใหม่อีก
2. กรณีที่ยังไม่มี datasource ให้ใช้คำสั่ง setDataSource เป็น Tag เพื่อให้เราสามารถกำหนดการเชื่อมต่อกับ
ฐานข้อมูล และกำหนดค่าไว้ในตัวแปรตามชื่อที่กำหนด
ถึงแม้ว่าโปรเจ็ค WebBaseDB จะมี Datasource อยู่แล้ว แต่แบบฝึกหัดนี้จะกำหนด Datasource ขึ้นมาใหม่
โดยกำหนดเป็นตัวแปรที่ชื่อ
newdatasource ดังนี้
<sql:setDataSource var="newdatasource" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql:///test" user="root" password="root"/>

เพื่อเป็นการเชื่อมต่อฐานข้อมูลที่อยู่ที่ URL ที่ชื่อ jdbc:mysql:///test


75

*สามารถใช้ 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>

9.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-impl-1.2.jar และ jstl-api-1.2.jar ที่นี่ http://jstl.java.net/download.html)
นำ .Jar File ทั้ง 2 ไปไว้ที่ folder {$TOMCAT}lib ซึ่งเป็น path ของที่ install Apache Tomcat ดังรูปที่ 9.3

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


76

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

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

รูปที่ 9.5 ผลลัพธ์ของ viewBook.jsp
Listing ที่ 9.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>


77

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

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

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

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

78


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

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


79

6. แสดง Context root และ Content directory ดังรูปที่ 10.2

รูปที่ 10.5 แสดงชื่อ Context root และ Content directory
7. คลิ๊กขวาที่ Project BookOnline → New → JSP File
กำหนด JSP File Name = selectBooks แล้วกด Finish
8. ในหน้าต่าง editor ให้แก้ไข source code ของไฟล์ selectBooks.jsp ให้เป็นไปตาม Listing ที่ 10.1
9. กดปุ่ม Save

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


80

Listing ที่ 10.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">
<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>


81

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

รูปที่ 10.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;


82

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

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


83

5. เลือกว่าจะสร้าง getters หรือ setters หรือทั้งสองอย่าง โดยการเลือก Check box

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

Listing ที่ 10.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;
}
}


84

10.3 การพัฒนาโปรแกรม Cart.java
โปรแกรม Cart.java เป็นคลาสที่ทำหน้าที่คล้ายกับ shopping cart เพื่อเก็บออปเจ็คชนิด Book ตามรายการ
หนังสือที่ผู้ใช้เลือก โดยอ้างอิงจากหมายเลข isbn ซึ่งโปรแกรมจะทำการค้นรายชื่อหนังสือจาก table ที่ชื่อ books
หมายเลข isbn ที่อ้างอิง แล้วจะแปลงเป็นออปเจ็คชนิด books ก่อนจะใส่ลงใน cart โปรแกรมนี้จะมี source code
ดัง Listing ที่ 10.3 และมีขั้นตอนการพัฒนาดังนี้
1.คลิ๊กขวาที่ Projects BookOnline → New → Class
กำหนด Package = model , Class Name = Cart.java กด Finish
2. ในหน้าต่าง editor ให้แก้ไข source code ของไฟล์ Cart.java ให้เป็นไปตาม Listing ที่ 10.3 แล้ว Save
Listing ที่ 10.3 โปรแกรม Cart.java
package model;
import java.sql.ResultSet;
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);
}
}catch (SQLException ex) {
ex.printStackTrace();
}
}

public List<Book> getBooks() {
return books;
}

public Cart(Connection conn) {
this.conn = conn;
books = new LinkedList<Book>();
}

public void removeItem(String isbn) {
books.remove(isbn);
}
}
10.4 การพัฒนาโปรแกรม ProcessSelection.java
โปรแกรม ProcessSelection.java เป็นโปรแกรม Java Servlet ที่ทำหน้าที่อ่านค่าพารามิเตอร์ที่ชื่อ isbn ซึ่ง
ส่งมาจากหน้า Web Form ของโปรแกรม selectBooks.java โดยใช้คำสั่ง getParameterValues ดังนี้

85

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

เมื่อได้ค่า 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 ที่ 10.4

ขั้นตอนการพัฒนาโปรแกรม ProcessSelection.java มีดังนี้

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


86

Listing ที่ 10.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

10.5 การพัฒนาโปรแกรม Init.java
โปรแกรม Init.java เป็นโปรแกรมประเภท ServletContextListener เพื่อเชื่อมต่อกับฐานข้อมูลเมื่อเริ่มต้น
แล้วเก็บออปเจ็ค connection ไว้ภายใน ServletContext โดยมีขั้นตอนการพัฒนาเช่นเดียวกับการพัฒนาโปรแกรม
Init.java ใน Exercise 7 การพัฒนา WebBase DB โดยคลาสประเภท Web Listener (หน้า 60)
และจะต้องมีการสร้างไฟล์ context.xml และแก้ไข web.xml แบบเดียวกันกับ Exercise ดังกล่าว
Listing ที่ 10.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
}
public void contextInitialized(ServletContextEvent arg0) {
try {
Connection conn;
System.out.println("Book Online : MySQL Connection Created ");
} catch (SQLException e) {
}
}
try {
conn.close();
System.out.println("Book Online : MySQL Connection Destroyed");

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


88

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


89

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

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


90

Exercise 11 การสร้าง Custom Tags สำหรับโปรแกรม JSP
เนื้อหาที่ต้องศึกษาก่อน

แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม JSP เพื่อสร้าง custom tag โดยจะเริ่มแสดงการพัฒนาโปรแกรม
ตั้งแต่การเขียน JSP โดยไม่ใช้ custom tags แล้วสร้าง tag โดยใช้ Tag Handler และขั้นตอนสุดท้ายจะเป็นการสร้าง
tag โดยใช้ Tag File โดยโปรแกรม JSP ที่เขียนจะเป็นการพิมพ์ข้อความว่า Hello xxxx จำนวนสิบครั้ง โดยที่ xxxx คือ
ชื่อที่ส่งมาทางพารามิเตอร์ที่ชื่อ name
11.1 การพัฒนาโปรแกรม hello.jsp
โปรแกรม hello.jsp เป็นโปรแกรม JSP ที่เขียนโดยใช้ scriptlet เรียกคำสั่งภาษาจาวา โดยจะมีคำสั่งในการ
อ่านพารามิเตอร์ของออปเจ็ค request ที่ชื่อ name แล้วจะพิมพ์ข้อความ Hello xxxx จำนวนสิบครั้ง โดยโปรแกรมนี้
จะมี source code ดัง Listing ที่ 11.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 ที่ 11.1
4. ทำการ Build และ Deploy โปรแกรม JSPDemo
5. ในหน้าต่าง Projects เลือกไฟล์ hello.jsp แล้วเลือก Run โปรแกรมโดยให้ส่งผ่านพารามิเตอร์ทาง URL เช่น
http://localhost:8080/JSPDemo/hello.jsp?name=Thanisa เราจะได้ผลการรันดังรูปที่ 11.1


91

Listing ที่ 11.1 โปรแกรม hello.jsp
<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>

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


92

11.2 การพัฒนาโปรแกรม 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] เป็นตัวอธิบาย attribute ต่างๆภายใน element ของ tag
ตัวอย่าง element และ attribute → <element attribute1=”A”> </element>
• สร้าง JSP file [helloTag.jsp] เพื่อเรียกใช้งาน Custom Tag

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


93

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

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


94

2. ทำการ Implement Method ชื่อ doTag( ) และ สร้าง method ประเภท setter เพิ่มชื่อ setName( )

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

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();
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);
}
}
}
11.2.2 สร้าง Tag Library Descriptor

95

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

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


96

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

รูปที่ 11.6 การสร้าง File Tag Library Descriptor
3. หน้าต่าง Editor จะแสดงไฟล์ที่ชื่อ MyTags.tld ที่อยู่ในโฟลเดอร์ WebContentWEB-INFtlds


97

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

Listing ที่ 11.3 โปรแกรม MyTags.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-version>1.0</tlib-version>
<short-name>MyTags</short-name>
<uri>/WEB-INF/tlds/MyTags</uri>
<tag>
<name>NameTagHandler</name>
<tag-class>tags.NameTagHandler</tag-class>
<body-content>scriptless</body-content>
<attribute>
<name>name</name>
<rtexprvalue>true</rtexprvalue>
<type>java.lang.String</type>
</attribute>
</tag>
</taglib>

11.2.3 เขียนโปรแกรม helloTag.jsp
จะเรียกใช้ Tag ที่ชื่อ NameTag โดยจะมี source code ดัง Listing ที่ 3 การสร้างโปรแกรม 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 ที่ 11.4
5. ทำการ run โปรแกรม จะได้ผลลัพธ์เช่นเดียวกับโปรแกรม hello.jsp

Listing ที่ 11.4 โปรแกรม helloTag.jsp
<%@taglib uri="/WEB-INF/tlds/MyTags" prefix="myTags"%>

<html>
<head>
</head>
<body>
<h1>JSP Demo</h1>
<myTags:NameTagHandler name="Thanisa" />
</body>
</html>

11.3 การพัฒนาโปรแกรม helloJSTL.jsp
โปรแกรม helloJSTL.jsp เป็นโปรแกรม JSP ที่ทำงานเช่นเดียวกับโปรแกรมที่ผ่านมาแต่จะทำการเรียกใช้

98

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

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

3. ในหน้าต่าง editor ให้แก้ไข source code ของไฟล์ helloJSTL.jsp ให้เป็นไปตาม Listing ที่ 11.5
4. ทำการ run โปรแกรม
โดยกำหนด URL เป็น http://localhost:8080/JSPDemo/helloJSTL.jsp?name=Thanisa
จะได้ผลลัพธ์เช่นเดียวกับโปรแกรม hello.jsp
Listing ที่ 11.5 โปรแกรม helloJSTL.jsp
<html>
<head>
</head>
<body>
<h1>JSP Demo</h1>
<c:forEach var="i" begin="1" end="10">
Hello ${param.name} <br>
</c:forEach>
</body>
</html>
11.4 การพัฒนาโปรแกรม helloTagFile.jsp
JSP 2.0 อนุญาตให้เราสร้าง custom tag โดยการเขียนไฟล์ html หรือ JSP แทนที่จะเขียนโปรแกรมภาษาจาวา
ซึ่งทำให้ง่ายต่อการพัฒนา ในที่นี้เราจะพัฒนาโปรแกรม helloTagFile.jsp ซึ่งจะทำการเรียกใช้ custom tag ที่ชื่อ
NameTagFile ที่เป็น tag file ซึ่งเป็นโปรแกรม JSP โดยมีขั้นตอนการพัฒนาดังนี้


99

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

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


100

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

Listing ที่ 11.6 โปรแกรม NameTagFile.tag
<%@tag description="Tag Name" pageEncoding="UTF-8"%>
<c:forEach var="i" begin="1" end="10">
Hello ${param.name} <br>
</c:forEach>

4. เนื่องจากมี Tag Name ใหม่มาเพิ่ม กรณีที่ File JSP มี Tag ชื่อนี้ถูกเรียกใช้
มันจะหา Tag Handler มาทำงาน โดยดูจาก <%@taglib uri="/WEB-INF/tlds/MyTags" prefix="myTags"
%>
ซึ่งก็คือ File MyTags.tld ที่เราสร้างขึ้นมา ดังนั้นต้องเพิ่ม Configuration ชื่อ Tag ใหม่ เข้าไป
ดัง Listing ที่ 11.7

Listing ที่ 11.7 เพิ่ม Tag Name ใหม่เข้าที่ Tag Library Descriptor (MyTags.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-version>1.0</tlib-version>
<short-name>MyTags</short-name>
<uri>/WEB-INF/tlds/MyTags</uri>
<tag>
<name>NameTagHandler</name>
<tag-class>tags.NameTagHandler</tag-class>
<body-content>scriptless</body-content>
<attribute>
<name>name</name>
</attribute>
</tag>

<tag-file>
<name>NameTagFile</name>
<path>/WEB-INF/tags/NameTagFile.tag</path>
<attribute>
<name>name</name>
</attribute>
</tag-file>


</taglib>

101

11.4.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 ที่ 11.8
4. ทำการ run โปรแกรม
โดยกำหนด URL เป็น http://localhost:8080/JSPDemo/helloTagFile.jsp?name=Thanisa
จะได้ผลลัพธ์เช่นเดียวกับโปรแกรม hello.jsp
Listing ที่ 11.8 โปรแกรม helloTagFile.jsp
<%@taglib uri="/WEB-INF/tlds/MyTags" prefix="myTags" %>
<html>
<head>
</head>
<body>
<h1>JSP Demo</h1>
<myTags:NameTagFile />
</body>
</html>


102

Exercise 12 การพัฒนาโปรแกรมเว็บโดยใช้ Strut Framework
แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม Web Application โดยใช้ Struts Framework โดยการปรับปรุง
โปรแกรมเว็บเพื่อติดต่อกับฐานข้อมูล เพื่อให้ส่วนของ Web User Interface สามารถที่จะตรวจสอบข้อมูล (Validate
Data) ที่ป้อนข้อมูลได้ และเปลี่ยนแปลงวิธีการอ่านพารามิเตอร์โดยใช้ Struts Framework

1. สร้างโปรเจ็ค StrutsDBApp ในรูปแบบ Struts Frameworks
2. พัฒนาโปรแกรม addBook.jsp [View ส่วนติดต่อ user]
3. พัฒนาโปรแกรม BookFormBean.java [Model เป็น Bean ซึ่งสอดคล้องกับส่วนของ View]
4. พัฒนาโปรแกรม Init.java เชื่อมต่อ Database [Model]
5. พัฒนาโปรแกรม AddBookAction.java [Model เมื่อมี Request เข้ามาจะเพิ่มข้อมูลไปที่ Table]
6. แก้ไขไฟล์ ApplicationResource.properties
7. พัฒนาโปรแกรม Thankyou.html
8. พัฒนาไฟล์ Struts-Config.xml


103

12.1 การสร้างโปรเจ็ค StrutsDBApp ในรูปแบบ Struts Frameworks
1. Download Struts Frameworks Release ที่ต้องการ ขณะนี้มีถึง Struts 2 แต่เพื่อความเข้าใจพื้นฐานของ โ
Framework จึงใช้ Struts 1 โดย Download http://archive.apache.org/dist/struts/binaries/struts-1.3.9-all.zip
2. ทำการเปิด File Zip ออกมา จะเห็น Folder ชื่อ apps ภายในจะมี war file ชื่อ struts-blank-1.3.9.war
ให้ทำการ Extract ออกมาไว้ที่ Temporary folder เช่น D:TEMP ก่อน

รูปที่ 12.1 Extract File Struts-blank
1. ทำการ Import Template เข้าสู่ Eclipse เพื่อเตรียม Environment ที่ Struts Framework ต้องการ

รูปที่ 12.2 Import เข้าสู่ Eclipse

2. ทำการ Rename ชื่อ Project โดยคลิ๊กขวาที่ Project → Refactor → Rename...
แล้วใส่ชื่อเป็น StrutsDBApp

รูปที่ 12.3 การ Refactor ชื่อ Project


104

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

รูปที่ 12.4 เว็บเพจที่ใช้แสดงฟอร์มสำหรับป้อนข้อมูล
ขั้นตอนการสร้างหน้า JSP เพื่อรับข้อมูล
1. File → New → JSP File กำหนดชื่อ addBook.jsp
2. พิมพ์ Label ออกหน้าจอ จะใช้งาน taglib ได้โดยมี 2 แบบคือ html และ bean
1. html คล้ายกับ HTML Tag ธรรมดา
2. bean เป็นการดึงข้อมูลตัวอักษรจาก configuration ที่ file MessageResources.properties
จึงต้องมีการนำข้อมูล ข้อความต่างๆ เตรียมไว้ก่อน เพื่อให้ Struts Tag ดึงไปใช้ได้ เช่นข้อความที่
ใช้เป็น Label , ใช้เพื่อแสดง Error ให้ผู้ใช้งานเห็น ดังรูปที่ 12.6 และ Listing ที่ 12.1

รูปที่ 12.5 เพิ่มข้อมูล label และ Error Message ที่ต้องการใน file /src/MessageResources.properties
Listing ที่ 12.1 แก้ไข Message ส่วนกลาง ที่ /src/MessageResources.properties

label.addbookform.display=Add New Book
label.addbookform.isbn=ISBN
label.addbookform.title=TITLE
label.addbookform.author=AUTHOR
label.addbookform.price=PRICE

error.isbn.required=Please correct ISBN length between 3-10 characters
error.title.required=Please correct TITLE length at least 3 characters
error.author.required=Please correct AUTHOR length at least 5 characters
error.price.required=Please correct PRICE must greater than zero


105

Listing ที่ 12.2โปรแกรม addBook.jsp
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title><bean:message key="label.addbookform.display" />
</title>
</head>
<body>
<html:form action="/addBookAction">
<font color="red"><html:errors /></font>
<bean:message key="label.addbookform.display" />
<br>
<bean:message key="label.addbookform.isbn" />
<html:text property="isbn" />
<br>
<bean:message key="label.addbookform.title" />
<html:text property="title" />
<br>
<bean:message key="label.addbookform.author" />
<html:text property="author" />
<br>
<bean:message key="label.addbookform.price" />
<html:text property="price" />
<br>
<html:submit></html:submit>
</html:form>
</body>
</html>

จาก source code จะเห็นว่า ใช้ bean ดึง message ออกมาจาก properties ที่เรา config
ถ้ามีหลายๆ page ใช้ข้อความเหมือนกัน ถ้าต้องการแก้ไขก็จะทำที่เดียวทำให้ไม่ต้องตามแก้ทุก page
ส่วนของ tag <html:errors /> ใช้รับ Error ที่ return มาจาก Method Validate นำมาแสดง
ตาม Logic ที่เขียนไว้ ที่ Validator Method ใน FormBean
(Validator Method จะแสดงให้เห็นในหัวข้อที่ 3 Override Method Validate Listing 12.3 หน้า 107)


106

12.3 การพัฒนาโปรแกรม BookFormBean.java และ AddBookAction
Struts Framework จะมีโปรแกรม Java ที่จะต้องพัฒนาอยู่ 2 ลักษณะคือ
1. FormBean : ทำหน้าที่ Mapping Parameter ในหน้าเว็บเพจที่รับข้อมูล และ Validate ตรวจสอบความถูก
ต้องของข้อมูลหน้านั้นๆ
2. Action : ทำหน้าที่รับค่าพารามิเตอร์ที่ป้อนมาแล้วนำไปประมวลผลตาม Business Logic ว่าต้องทำอะไร
บ้าง เช่น การจัดการข้อมูลแบบต่างๆ (CRUD = Create, Read, Update, Delete)

โปรแกรม FormBean จะเป็นโปรแกรม Java ที่มีค่า attribute สอดคล้อง กับ ชื่อพารามิเตอร์ที่รับ ทางหน้า
เว็บเพจ(addBook.jsp) และจะมีเมธอด getter และ setter ที่สอดคล้องกับ attribute ดังกล่าว

รูปที่ 12.6 ความสัมพันธ์ระหว่าง Tag JSP ที่สร้างหน้าจอ และ FormBean
นอกจากนี้อาจ Override เมธอดในการ Validate ตรวจสอบข้อมูล เพื่อให้สอดคล้องกับเงื่อนไขที่กำหนดไว้
ด้วย เช่น กำหนดให้ผู้ใช้ต้องป้อนพารามิเตอร์ที่มีชื่อและเงื่อนไขต่างๆดังนี้
▪ isbn เป็นชนิด String ที่มีตัวอักษรระหว่าง 3-10 ตัว

▪ title เป็นชนิด String ที่มีตัวอักษรอย่างน้อย 3 ตัว

▪ author เป็นชนิด String ที่มีตัวอักษรอย่างน้อย 5 ตัว

▪ price เป็นชนิด float ที่มีค่าเป็นมากกว่า 0.0

โดยจะดึงข้อมูลมาตรวจสอบ โดยให้แก้ไข หรือ Override Method Validate ดังขั้นตอนต่อไป
โดยดู source code ได้ใน Listing ที่ 12.3


107

ขั้นตอนการสร้าง BookFormBean
1. เลือก File → New → Class
กำหนด pagekage = model , name = BookFormBean , SuperClass = ActionForm

รูปที่ 12.7 สร้าง Java Class BookFormBean.java
2. ประกาศตัวแปร Instance Varible เป็น Private แล้ว Encapsulate
คลิ๊กขวาที่ source code แล้วเลือก Source → Generate Getters and Setters... ดังรูปที่ 12.9
private float price;

รูปที่ 12.8 ทำการ encapsulate instance variable
3. Override Method Validate โดย คลิ๊กขวาที่ source code แล้วเลือก Source → Override/Implement
Methods... ดังรูปที่ 12.10

รูปที่ 12.9 ทำการเลือก Override Method validate ของ ActionForm
Listing ที่ 12.3โปรแกรม BookFormBean.java [Model]
package model;


108

import org.apache.struts.action.ActionErrors;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.action.ActionMessage;

public class BookFormBean extends ActionForm {


public ActionErrors validate(ActionMapping mapping,
HttpServletRequest request) {

ActionErrors actionError = new ActionErrors();

if (getIsbn().equals(null) || (getIsbn().length() < 3 ||
getIsbn().length() > 10)){
actionError.add("isbn", new ActionMessage("error.isbn.required"));
}

if (getTitle().equals(null) || (getTitle().length() < 3)) {
actionError.add("title", new ActionMessage("error.title.required"));
}

if (getAuthor().equals(null) || (getAuthor().length() < 5)) {
actionError.add("author",new ActionMessage("error.author.required"));
}

if (getPrice() <= 0) {
actionError.add("price", new ActionMessage("error.price.required"));
}
return actionError;
}

public String getIsbn() {
return isbn;
}
public void setIsbn(String isbn) {
this.isbn = isbn;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getAuthor() {
return author;
}
public void setAuthor(String author) {
this.author = author;
}
public float getPrice() {
return price;
}
public void setPrice(float price) {
this.price = price;
}
}

หมายเหตุ
Method validate( ) จะ Return error object กลับไปให้หน้า JSP ที่ tag → <html:errors /> (หน้า 104)
รูปแบบการเพิ่ม Error คือ actionError.add(ดักจับที่ text properties ตัวไหน, ข้อความที่อยากให้แสดงเมื่อ properties นี้ Error);


109

12.4 การพัฒนาโปรแกรม AddBookAction.java
โปรแกรม AddBookAction.java เป็นโปรแกรม Action (Business Logic) ของ Struts Framework เพื่ออ่าน
ข้อมูลที่ผู้ใช้ป้อนเข้ามาจากหน้า AddBook.jsp แล้วเขียนข้อมูลลงใน table ที่ชื่อ Books โดยมีขั้นตอนการพัฒนาดังนี้
1. File → New → Class
กำหนด package = model , name = AddBookAction , SuperClass = Action ดังรูปที่ 12.11

รูปที่ 12.10 สร้าง Java Class BookFormBean.java
2. Override Method Validate โดย คลิ๊กขวาที่ source code
แล้วเลือก Source → Override/Implement Methods... ดังรูปที่ 12.12

รูปที่ 12.11 ทำการเลือก Override Method validate ของ ActionForm

3. ทำการแก้ไข Source code ที่ Method execute() ดัง Listing ที่ 12.4


110

Listing ที่ 12.4โปรแกรม AddBookAction.java [Model]
package model;



import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

public class AddBookAction extends Action {

public Connection getConnection(){
Connection conn=(Connection)getServlet().getServletContext().getAttribute("connection");
if(connection == null) System.out.println("Not Found Connection in Servlet Context");
return conn;
}

public ActionForward execute(ActionMapping mapping, ActionForm form,HttpServletRequest
request, HttpServletResponse response)throws Exception {
try {
BookFormBean bookform=(BookFormBean)form;
String isbn = bookform.getIsbn();
String title = bookform.getTitle();
String author = bookform.getAuthor();
float price = bookform.getPrice();

String sql = "insert into books (isbn,title,author,price) values " +
"('"+ isbn + "'" +
",'"+ title+ "'" +
",'"+ author+"'" +
",'"+ price +"')";
Statement stmt = getConnection().createStatement();
stmt.execute(sql);
System.out.println("SQL Statement :" + sql);
System.out.println("Insert Success");

} catch (SQLException sqlexp) {
System.out.println(sqlexp.getMessage());
sqlexp.printStackTrace();
throw new SQLException(sqlexp.getMessage());

} catch (Exception e) {
System.out.println("Action Error "+e.getMessage());
throw new Exception(e.getMessage());
}
return mapping.findForward("success");
}
}


111

12.5 การพัฒนาโปรแกรม Init.java และ Thankyou.html [View]
โปรแกรม Init.java เป็นโปรแกรมประเภท ServletContextListener เพื่อเชื่อมต่อกับฐานข้อมูลเมื่อเริ่มต้น
อาจมองว่าเป็นส่วนของ Model ก็ได้ โดยมีขั้นตอนการพัฒนาเช่นเดียวกับการพัฒนาโปรแกรม Init.java ใน Exercise
7 การพัฒนา WebBase DB โดยคลาสประเภท Web Listener (หน้า 60)
และจะต้องมีการสร้างไฟล์ context.xml และแก้ไข web.xml แบบเดียวกันกับ Exercise ดังกล่าว
โปรแกรม Thankyou.html เป็นเว็บเพจที่ใช้แสดงให้เห็นว่าข้อมูลได้ถูกเพิ่มเข้าไปในฐานข้อมูลแล้ว
โดยมี source code ดัง Listing ที่ 12.4
Listing ที่ 12.5 โปรแกรม Thankyou.html
<html>
<head>
<title>Thank you</title>
</head>
<body>
<H1>Thank you for inserting data </H1>
</body>
</html>

12.6 การพัฒนาไฟล์ struts-config.xml [Controller]
ไฟล์ Struts-config.xml เป็นไฟล์ในการควบคุมการทำงานของโปรแกรม Struts ซึ่งในที่นี้จะใช้ในการกำหนด
ลำดับการทำงานของเว็บ (Navigation Rule) โดยมีขั้นตอนการพัฒนาคือ เปิด Configuration ชื่อ
/WEB-INF/struts-config.xml ออกมา
1. เพิ่มให้ struts รู้จักกับ โปรแกรม Java ที่เราสร้างขึ้นมาคือ
- BookFormBean.java
- AddBookAction.java
โดยระบุ package.classname ลงไปที่ attribute type และชื่อเรียกคือ name

<form-beans>
<form-bean name="addBookAction" type="model.AddBookAction"></form-bean>
<form-bean name="BookFormBean" type="model.BookFormBean"></form-bean>
</form-beans>

112

2. ระบุการทำงาน สร้างความสัมพันธ์ให้กับ Struts ว่ากรณีมี หน้า Webpage JSP ส่งข้อมูลไปให้ Servlet เพื่อ
ให้บันทึกข้อมูลให้ Framework มาอ่าน Configuration ตรงนี้เพื่อตัดสินใจว่าให้ทำอะไร
1. Browser ส่งข้อมูลแบบ post เข้ามา
2. Controller ทำการแปล path โดยดูที่ attribute path=”/addBookAction”
หา action ว่าจะไปที่ไหน โดยดูจาก attribute type => “model.AddBookAction.java”
ต่อไปดูว่าข้อมูลมาจากหน้าจอไหน โดยดูที่ attribute input=”/addBook.jsp”
และ JSP ที่ส่งข้อมูลมานี้ จะเก็บข้อมูลลงที่ FormBean ชื่ออะไร ดู attribute name = BookFormBean
(จะไป map ชื่อ class ที่ tag <form-bean name="BookFormBean" type="model.BookFormBean"/>)
และเก็บไว้ใน scope ไหน ดูที่ attribute scope = “session”
เมื่อได้ข้อมูลเก็บลง FormBean แล้ว Action ก็จะทำงาน เสร็จสิ้นก็จะมีการ return ค่ากลับไปว่า
Business Logic ทำงานถูกหรือไม่ โดยกำหนดที่ tag <forward name="success" path="/Thankyou.html"/>
ถ้าถูกต้อง ภายในโปรแกรม Action ก็จะสั่งให้ return mapping.fndForward("success") กลับไป

<action-mappings>
<action
path="/addBookAction"
type="model.AddBookAction"
input="/addBook.jsp"
name="BookFormBean"
scope="session" >
<forward name="success" path="/Thankyou.html"/>
</action>

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

113

3. เลือก URL ของ Web Browser เป็น http://localhost:8080/StrutDBApp/AddBook.jsp ให้เรา ทดลองใส่
ข้อมูลดังรูปที่ 12.12

รูปที่ 12.12 ตัวอย่างการป้อนข้อมูลเข้า Table ชื่อ Books
4. เมื่อกดปุ่ม Add โปรแกรมก็จะใส่ข้อมูลลงใน Database
5. เราสามารถที่จะดูข้อมูลที่ป้อนเข้าไปได้ โดยไปที่ Tool ของ MySQL ชื่อ MySQL Workbench
ดังรูปที่ 12.14

รูปที่ 12.13 ตัวอย่างการป้อนข้อมูลเข้า Table ชื่อ Books


114

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

โปรแกรมในบทนี้จะเป็นการพัฒนาโปรแกรม Web Application โดยใช้ JSF Framework ทั้งนี้จะเป็นการ
ปรับปรุงโปรแกรมเว็บเพื่อติดต่อกับฐานข้อมูล โดยจะทำให้ผู้ใช้สามารถที่จะ Validate Data ที่ป้อนข้อมูลได้ และ
เปลี่ยนแปลงวิธีการอ่านพารามิเตอร์โดยใช้ Java Server Faces (JSF) Framework
1. สร้างโปรเจ็ค JSFDBApp โดยเตรียม Library ของ JSF Framework และ JSTL
2. สร้างหน้าจอรับ Input โดยสร้าง addBook.jsp และ พัฒนาส่วนตรวจสอบ(Validation ข้อมูล)
3. สร้างหน้าจอแสดงผลจาก การเพิ่มข้อมูล คือ thankyou.html , inserterror.html
4. สร้าง Business Logic ใช้ JSF Framework : BookBean.java และ Config Managed Bean
5. กำหนด Navigation Rule โดยการแก้ไข faces-config.xml

13.1 สร้างโปรเจ็ค JSFDBApp
1. เลือกเมนู File → New → Project
เลือกรูป Folder ชื่อ Web และเลือก Dynamic Web Project ดังรูปที่ 1.2

2. ให้กำหนด Project Name = JSFDBApp
เลือก Configuration = JavaServer Faces v1.2 Project


115

รูปที่ 13.2 การกำหนดชื่อ และเลือกใช้ JSF Frameworks ของ Web Project
3. กด Next เลือกที่เก็บ class , เลือก Web Module จนมาถึงหน้า JSF Capability
เลือก Disable Library Configuration กรณีที่ได้ Download JSF library มาแล้ว กด finish

รูปที่ 13.3 การกำหนดชื่อ และเลือกใช้ JSF Frameworks ของ Web Project


116

4. Configuration Library ที่ JSF ต้องการ ซึ่งจะมี JSF Frameworks และ JSTL Library
โดย Copy Library .jar file ไปวางที่ lib ของ Web Project ดังรูปที่ 13.4

รูปที่ 13.4 Configuration Library ที่ JSF ต้องการ
13.2 การพัฒนาโปรแกรม JSF Managed Bean
JSF Framework จะใช้ Java Bean เชื่อมโยงค่าพารามิเตอร์ระหว่าง JSP และ JAVA Class
JSF Managed Bean จะเป็นโปรแกรม Java ทีมีค่า attribute สอดคล้องกับชื่อพารามิเตอร์ที่จะป้อน
และจะมีเมธอด getter และ setter ที่สอดคล้องกับ attribute ดังกล่าว ซึ่งในแบบฝึกหัดนี้จะกำหนดให้ผู้ใช้ต้องป้อน
พารามิเตอร์ที่มีชื่อต่างๆ ดังนี้
● isbn เป็นชนิด String

● title เป็นชนิด String

● author เป็นชนิด String

● price เป็นชนิด float


117

ขั้นตอนการสร้าง BookBean
1. สร้าง Java Class ชื่อ BookBean.java โดยอยู่ใน package ชื่อ bean
2. กำหนด variable ตามที่เราต้องการรับค่าจากหน้าจอ JSP
3. คลิกขวาที่ source code แล้วเลือก source → Generate Getter
4. สร้าง Method addBook( ) เพื่อนำข้อมูลเก็บลงใน table
......
.......
public class BookBean {


public String addBook() throws SQLException {
try {
getDBConn();
String sql = "insert into books values ('"
+ getIsbn() + "','"
+ getTitle()+ "','"
+ getAuthor()+ "','"
+ getPrice()+ "')";
stmt.executeUpdate(sql);
return "success";
} catch (Exception e) {
}
return "failure";
}
public void getDBConn() throws SQLException {
if (conn == null) {
}
}
........
.......


118

13.3 สร้างหน้าจอรับ Input โดยสร้าง addBook.jsp และ พัฒนาส่วนตรวจสอบ(Validation ข้อมูล)

รูปที่ 13.5 หน้าจอ JSP เพื่อใช้ในการรับค่า
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JSF Books DB</title></head>
<body>
<b>Add A New Book</b>
<f:view>
<h:form>
<h:inputText id="isbn" value="#{bookBean.isbn}"
required="true" requiredMessage="ISBN is required!"
validatorMessage="Only 5 to 10 digits!">
<f:validateLength minimum="5" maximum="10" />
</h:inputText>
<h:message for="isbn" />
<br>
<h:inputText id="title" value="#{bookBean.title}"
required="true" requiredMessage="TITLE is required!">
<f:validateLength maximum="70" />
</h:inputText>
<h:message for="title" />
<br>
<h:inputText id="author" value="#{bookBean.author}"
required="true" requiredMessage="AUTHOR is required!">
<f:validateLength maximum="50" />
</h:inputText>
<h:message for="author" />
<br>
<h:inputText id="price" value="#{bookBean.price}"
required="true" requiredMessage="PRICE is required!"
validatorMessage="Only Numeric and at Least 1 baht">
<f:validateDoubleRange minimum="1" />
</h:inputText>
<h:message for="price" />
<br>
<h:commandButton type="submit" id="btnAddBook"
value="ADD"
action="#{bookBean.addBook}"/>
<br>
</h:form>
</f:view>
</body>
</html>

จาก Sourcecode jsp ด้านบน ประกอบไปด้วยการสร้าง Validation ที่ field โดยจะอยู่ภายใน <h:inputText >

119

ประกอบด้วย attribute ที่ใช้ตรวจสอบ เช่น
required="true" แสดงถึง field นี้ ต้องการข้อมูล และ ถ้าไม่มีข้อมูลก็จะแสดง attribute ที่เป็น message

ของ validator นั้นๆ ซึ่งก็คือ requiredMessage="ISBN is required!"
<f:validateDoubleRange minimum="1" /> แสดงถึง field นี้ ต้องการค่า double และอย่างน้อยต้องมี

value คือ 1 และถ้าค่านั้นไม่สามารถแปลงเป็น double หรือ มีค่าน้อยกว่า 1 ก็จะแสดง attribute ที่เป็น message ของ
validator นั้นๆ คือ validatorMessage="Only Numeric and at Least 1 baht"

13.4 สร้าง thankyou.html, error.html
13.5 การกำหนด Page Navigation
1. เปิด File WEB-INFfaces-config.xml
2. ไปที่ tab Navigation Rule
3. เปิด palette คลิกเลือก page แล้วไปคลิกที่ Screen ว่างๆ เพื่อสร้างมุมมองหน้า page นั้นๆ

รูปที่ 13.6 การวาง page ลงใน Navigator Area


120

4. เลือกให้ครบทั้ง 3 files

รูปที่ 13.7 แสดงการใช้ palette ช่วยสร้าง Navigator Rule
5. สร้างความสัมพันธ์โดยไปที่ palette เลือกที่ Link จากนั้นไปคลิกที่ addBook.jsp ลากลงมา drop ที่ icon ของ
thankyou.html และ inserterror.html

รูปที่ 13.8 เมื่อลาก Link เชื่อมต่อ ครบแล้ว


121

รูปที่ 13.9 สามารถปรับ Properties ในส่วนของ Link ได้
โดย double click ให้มาเอง

ดูจาก Method ที่จะมี Return เป็น String ออกมา รณีนี้ถ้าสำเร็จจะ return String=success ถ้าไม่
สำเร็จจะเป็น failure
ดังนั้นถ้า success ให้แสดงหน้า thankyou.html โดย set properties ที่ form-outcome เป็น success
และอีกเส้นก็ทำเช่นเดียวกัน from-outcome แต่เป็น failure

รูปที่ 13.10 การปรับแต่ง Link ที่เชื่อมต่อไม่ได้


122

6. จะได้เป็นรูปที่สมบูรณ์ออกมาดังรูป

รูปที่ 13.11 Navigator ที่มีการกำหนด properties เรียบร้อยแล้ว
1. Restart Server และ Run โปรแกรม JSFDBApp
2. เลือก URL ของ Web Browser เป็น http://localhost:8080/JSFDBApp/addBook.jsp
ให้ทดลองใส่ข้อมูล
3. เมื่อกดปุ่ม Add โปรแกรมก็จะใส่ข้อมูลลงใน Database
4. เราสามารถที่จะดูข้อมูลที่ป้อนเข้าไปได้ โดยไปที่ MySQL Workbench แล้วดูจาก Table ที่ชื่อ books
5. ถ้าผลลัพธ์หน้า thankyou.html ใน table ก็มีข้อมูลนั้นๆ อยู่


123

Exercise 14 การ Authentication โดยใช้ Tomcat
เนื้อหาที่ต้องศึกษาก่อน -

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

Listing ที่ 14.2 โปรแกรม user.html
<html>
<head>
<title>USER</title>
</head>
<body>
<h1>User Page</h1>
</body>
</html>

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


124

1. ให้ Project ชื่อ Servers เลือก ชื่อ Server → tomcat-users.xml
ดังตัวอย่างในรูปที่ 14.1 และทำการเพิ่ม user password ลงไปใน Tomcat Server
ใน Listing ที่ 14.3

รูปที่ 14.1 เพิ่ม user และ roles ที่ Apache Tomcat
Listing ที่ 14.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

14.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 เท่านั้น โดยมีขั้นตอนดังนี้


125

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

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

3. สร้างความสัมพันธ์ระหว่าง 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-name>Admin 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
<url-pattern>/user.html</url-pattern>
<web-resource-name>User Page</web-resource-name>
<auth-constraint>
</auth-constraint>


126

Listing ที่ 14.4 ไฟล์ tomcat-users.xml
.......
<login-config>
</login-config>

<security-role>
</security-role>
<security-role>
</security-role>

<url-pattern>/admin.html</url-pattern>
<web-resource-name>Admin Page</web-resource-name>
<auth-constraint>
</auth-constraint>

<url-pattern>/user.html</url-pattern>
<web-resource-name>User Page</web-resource-name>
<auth-constraint>
</auth-constraint>
.......

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

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


127

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

14.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 ที่ 14.5 โปรแกรม Login.html
<html>
<head>
<title></title>
</head>
<body>
<center>
<H1>Login 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>
</center>
</body>
</html>

Listing ที่ 14.6 โปรแกรม Error.html
<html>
<head><title>ERROR</title></head>
<body>
<H1>Error unauthorized user</H1>
</body>
</html>


128

Listing ที่ 14.7 โปรแกรม web.xml
.......
<login-config>
<auth-method>FORM</auth-method>
<realm-name>AdminApplication</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>
.......
14.6 การทดสอบโปรแกรม แบบ Form Authenticate
ใช้การทดสอบแบบเดียวกันกับ แบบ Basic Authenticate

14.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 ก็ได้
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 รูปสายฟ้าสีเหลืองเพื่อรัน หรือ Highlight คำสั่งแล้วกดปุ่ม Ctrl + Enter

2. ทดลองป้อนข้อมูลใส่ลงใน Table โดยต้องกำหนด password และ role
3. ทำการปรับปรุงไฟล์ server.xml ของ Apache Tomcat
โดยไปที่ Project Server → Tomcat v6.0 Server → Server.xml แล้ว เปลี่ยนจาก
<Realm className="org.apache.catalina.realm.UserDatabaseRealm"
resourceName="UserDatabase"/>


129

เป็น
<Realm className="org.apache.catalina.realm.JDBCRealm" debug="99"
driverName="com.mysql.jdbc.Driver"
connectionURL="jdbc:mysql://localhost/test"
connectionName="root"
connectionPassword="xxx"
userTable="users" userRoleTable="userrole"
userNameCol="user_name" userCredCol="pass_word"
roleNameCol="role_name" />

โดยที่ xxx คือ password ของฐานข้อมูล MySQL ในที่นี้ใช้ password = root
4. ทำการ Restart Tomcat เพื่อให้อ่าน config ที่แก้ไป
14.8 การทดสอบโปรแกรม แบบ Database Authenticate
ใช้การทดสอบแบบเดียวกันกับ แบบ Basic Authenticate


Java Web Programming (JSP/Servlet) Using Eclipse and Tomcat

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Java Web Programming (JSP/Servlet) Using Eclipse and Tomcat (20)

More from IMC Institute (20)

Java Web Programming (JSP/Servlet) Using Eclipse and Tomcat