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 เข้าไปที่นี่
}

2.3 การทดสอบโปรแกรม
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();
}

protected void doGet(HttpServletRequest request, HttpServletResponse response)
processRequest(request, response);
}

protected void doPost(HttpServletRequest request, HttpServletResponse 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 {

@Resource(name = "jdbc/test")
private DataSource jdbcTest;
private Connection conn;

public void init() {
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 {
String isbn = request.getParameter("isbn");
String author = request.getParameter("author");
String title = request.getParameter("title");
String priceStr = request.getParameter("price");
float price = Float.parseFloat(priceStr);
Statement stmt = conn.createStatement();
String sql = "INSERT INTO books VALUES('"
+ isbn + "','" + title
+ "','" + author + "'," + price + ")";

int numRow = stmt.executeUpdate(sql);

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

protected void doGet(HttpServletRequest request,
}

protected void doPost(HttpServletRequest request,
}
}

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


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

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

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

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

Plus de IMC Institute

Plus de IMC Institute (20)

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