Hand-on Exercise Java Web Programming

IMC Institute

Java Web
Programming
Using Cloud Platform

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

1

Hand-on
Exercises

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

Assoc.Prof.Dr.Thanachart Numnonda
Software Park Thailand

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

February 2013

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

2

สารบัญ
Exercise 1 การสร้างโปรเจ็ค Web Application และไฟล์ HTML..........................................................................5
1.1 การติดตั้ง Web Server...................................................................................................................... 5
1.2 การสร้าง Web Application Project.................................................................................................. 7
1.3 การพัฒนาโปรแกรม addCustomer.html................................................................................................ 9
1.4 การทดสอบโปรแกรม...........................................................................................................................13
Exercise 2 การเขียนโปรแกรม Java Servlet เพื่ออ่านค่าพารามิเตอร์..........................................................................15
2.1 การพัฒนาโปรแกรม CustomerServlet.java......................................................................................... 15
2.1.1 การอ่านค่าพารามิเตอร์จาก addCustomer.html ............................................................................... 15
2.1.2 การแสดงรายละเอียดของค่าต่างๆ.......................................................................................................16
2.2 ขั้นตอนการพัฒนาโปรแกรม CustomerServlet.java ................................................................................17
2.3 การทดสอบโปรแกรม...........................................................................................................................19
Exercise 3 โปรแกรมเว็บสำหรับการทำโพล......................................................................................................... 21
3.1 โปรแกรม vote.html....................................................................................................................... 21
3.2 การพัฒนาโปรแกรม VoteServlet.java................................................................................................. 21
3.2.1 กำหนดตัวแปร counter และ lang ................................................................................................22
3.2.2 อ่านค่าพารามิเตอร์ต่างๆ ที่ส่งมาจาก vote.html และทำการประมวลผล........................................................... 22
3.2.3 การแสดงผลการโหวต...................................................................................................................22
3.3 ขั้นตอนการพัฒนาโปรเจ็ค Voter ............................................................................................................ 23
3.4 การปรับปรุงโปรแกรม VoteServlet.java............................................................................................... 28
3.4.1 กำหนดตัวแปร voters................................................................................................................28
3.4.2 การอ่านหมายเลขไอพีของผู้ใช้.......................................................................................................... 28
Exercise 4 การเชื่อมต่อกับ MySQL Database............................................................................................. 30
4.1 การเชื่อมต่อ MySQL โดยโปรแกรม MySQL Workbench....................................................................... 30
4.2 การสร้างตาราง books....................................................................................................................... 31
4.3 การใช้คำสั่ง SQL ใน MySQL WorkBench........................................................................................33
Exercise 5 การพัฒนาโปรแกรมเว็บ เพื่อติดต่อกับฐานข้อมูล........................................................................................ 35
5.1 การ Config Apache Tomcat ให้สามารถใช้งาน JDBC Driver...............................................................35
5.2 การสร้าง Web Application Project................................................................................................ 36
5.3 การพัฒนาโปรแกรม addBook.html..................................................................................................... 36
5.4 การพัฒนาโปรแกรม thankyou.html.................................................................................................... 37
5.5 การพัฒนาโปรแกรม AddBookServlet.java......................................................................................... 38
5.5.1 การอ่านค่าพารามิเตอร์จาก addBook.html ......................................................................................38
5.5.2 การเชื่อมต่อกับฐานข้อมูล...............................................................................................................38
5.5.3 เพิ่มรายชื่อหนังสือใหม่ลงในฐานข้อมูล ................................................................................................ 39
5.5.4 การเรียกเว็บเพจ thankyou.html ................................................................................................ 39
5.6 ขั้นตอนการพัฒนาโปรแกรม AddBookServlet.java ................................................................................40
5.7 ทดสอบโปรแกรม...............................................................................................................................41
Exercise 6 การพัฒนาโปรแกรมเว็บเพื่อติดต่อฐานข้อมูล MongoDB.......................................................................... 43
6.1 การติดตั้ง MongoDB..................................................................................................................... 43
6.2 การใช้ MongoDB......................................................................................................................... 44
6.3 การเขียนโปรแกรม Java Servlet เพื่อเชื่อมต่อกับ MongoDB.......................................................................45
6.4 ทดสอบโปรแกรม...............................................................................................................................47
Exercise 7 โปรแกรมเว็บเพื่อสาธิตขอบเขตของออปเจ็ค............................................................................................ 48
7.1 การพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request ..................................................................... 48
7.1.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request .....................................................50
7.1.2 ขั้นตอนการทดสอบโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Request.................................................... 50
7.2 การพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Session ......................................................................51

Thanachart Numnonda and Thanisa Kruawaisayawan

3

7.2.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Session ......................................................53
7.2.2 ขั้นตอนการทดสอบโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Session .................................................... 53
7.3 การพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Application................................................................ 54
7.3.1 ขั้นตอนการพัฒนาโปรแกรมเพื่อสาธิตขอบเขตของ Application................................................................. 55
7.3.2 ขั้นตอนการทดสอบโปรแกรมเพื่อสาธิตขอบเขตของ Object แบบ Application.............................................. 56
Exercise 8 การพัฒนา WebBase DB โดยคลาสประเภท Web Listener............................................................... 57
8.1 การพัฒนาโปรแกรม Init.java.............................................................................................................. 57
8.2 การปรับปรุงโปรแกรม AddBookServlet.java ......................................................................................60
8.3 ทดสอบโปรแกรม...............................................................................................................................61
Exercise 9 การพัฒนาโปรแกรม Servlet Filter ...............................................................................................62
9.1 การพัฒนาโปรแกรม Servlet Filter.......................................................................................................62
9.2 การเขียนหน้า Login......................................................................................................................... 63
9.3 การเขียน Servlet Filter.................................................................................................................. 64
9.4 การเขียนโปรแกรม ShowServlet ........................................................................................................67
9.5 ขั้นตอนการทดสอบโปรแกรม ..................................................................................................................68
Exercise 10 การเขียนโปรแกรม JSP เพื่อแสดงผลลัพธ์...........................................................................................69
10.1 การพัฒนาโปรแกรม hello.jsp........................................................................................................... 69
10.2 การพัฒนาโปรแกรม viewBook.jsp................................................................................................... 70
10.2.1 การกำหนด Tag Library........................................................................................................ 70
10.2.2 การกำหนด Datasource......................................................................................................... 70
10.2.3 การใช้คำสั่ง c:forEach เพื่อแสดงผล ............................................................................................ 71
Exercise 11 การพัฒนาโปรแกรมเว็บ Online Book Store................................................................................. 73
11.1 การพัฒนาโปรแกรม selectBooks.jsp.................................................................................................73
11.2 การพัฒนาโปรแกรม Book.java......................................................................................................... 80
11.3 การพัฒนาโปรแกรม Cart.java........................................................................................................... 83
11.4 การพัฒนาโปรแกรม ProcessSelection.java....................................................................................... 84
11.5 การพัฒนาโปรแกรม Init.java ............................................................................................................87
11.6 การพัฒนาโปรแกรม viewCart.jsp..................................................................................................... 87
11.7 ขั้นตอนการทดสอบโปรแกรม ................................................................................................................88
Exercise 12 การสร้าง Custom Tags สำหรับโปรแกรม JSP................................................................................89
12.1 การพัฒนาโปรแกรม hello.jsp............................................................................................................ 89
12.2 การพัฒนาโปรแกรม helloJSTL.jsp................................................................................................... 95
12.3 การพัฒนาโปรแกรม helloTagFile.jsp................................................................................................96
12.3.1 สร้าง Tag File.....................................................................................................................96
12.3.2 เขียนโปรแกรม helloTagFile.jsp..............................................................................................97
12.4 การพัฒนาโปรแกรม helloTag.jsp...................................................................................................... 97
12.4.1 สร้างไฟล์ Java ClassTag Handler.........................................................................................98
12.4.2 สร้าง Tag Library Descriptor........................................................................................... 101
12.4.3 เขียนโปรแกรม helloTag.jsp.................................................................................................. 103
Exercise 13 การพัฒนาโปรแกรมเว็บโดยใช้ Struts 2 Framework...................................................................... 104
13.1 การสร้างโปรเจ็ค StrutsDBApp โดยใช้ Struts 2 Framework..............................................................104
13.2 การพัฒนาโปรแกรม addBook.jsp [View]....................................................................................... 105
13.3 การพัฒนาโปรแกรม AddBookAction.java [Model]....................................................................... 108
13.4 การพัฒนาโปรแกรม success.jsp [View].......................................................................................... 111
13.5 การแก้ไขไฟล์ struts.xml............................................................................................................... 111
13.6 การทดสอบโปรแกรม....................................................................................................................... 111
Exercise 14 การพัฒนาโปรแกรมเว็บโดยใช้ Spring Framework........................................................................ 113
14.1 การสร้างโปรเจ็ค SpringDBApp โดยใช้ Spring Framework.............................................................. 113
14.2 พัฒนาไฟล์ Controller................................................................................................................. 114
14.3 พัฒนาไฟล์ JSP............................................................................................................................114


4

14.4 พัฒนาไฟล์ mvc-dispatcher-servlet.xml...................................................................................... 115
14.5 พัฒนาไฟล์ web.xml.................................................................................................................... 115
14.6 การทดสอบโปรแกรม.......................................................................................................................116
14.7 พัฒนาโปรแกรมเพื่อเชื่อมต่อกับฐานข้อมูล................................................................................................. 116
Exercise 15 การ Authentication โดยใช้ Tomcat .....................................................................................121
15.1 สร้าง Web Application Project................................................................................................ 121
15.2 เพิ่ม User ของ Tomcat Web Server........................................................................................... 121
15.3 การ Config ไฟล์ web.xml ของ Web Application ที่ต้องการใช้ Tomcat user .....................................122
15.4 การทดสอบโปรแกรมแบบ Basic Authenticate...................................................................................124
15.5 การปรับปรุงโปรแกรมเพื่อให้ใช้ Login Form........................................................................................ 125
15.6 การทดสอบโปรแกรม แบบ Form Authenticate.................................................................................. 126
15.7 การปรับปรุงโปรแกรม เพื่อใช้ Authenticate โดยอ่านจาก Database MySQL.............................................. 126
15.8 การทดสอบโปรแกรม แบบ Database Authenticate............................................................................ 127
Exercise 16 การพัฒนาโปรแกรมเว็บโดยใช้ Google App Engine...................................................................... 128
16.1 การติดตั้งและเริ่มต้นการใช้งาน Google App Engine............................................................................ 128
16.2 การสร้าง Web Application Project............................................................................................ 129
16.3 การพัฒนาโปรแกรม Servlet เพื่อรันบน Google App Engine................................................................ 133
16.4 การพัฒนาโปรแกรมเพื่อติดต่อกับ Google Account................................................................................135
Exercise 17 การพัฒนาโปรแกรม Google App Engine เพื่อติดต่อกับฐานข้อมูล โดยใช้ JPA........................................ 138
17.1 การสร้างโปรเจ็ค Google App Engine............................................................................................138
17.2 การพัฒนาโปรแกรม Book Entity Class..........................................................................................138
17.3 การพัฒนาโปรแกรม EMF.java........................................................................................................ 139
17.4 การพัฒนาโปรแกรม addBook.html................................................................................................. 140
17.5 การพัฒนาโปรแกรม OnlineBookServlet เพื่อรันบน Google App Engine............................................140
17.6 การพัฒนาโปรแกรมเพื่อแสดงข้อมูลใน Books ......................................................................................... 142


5

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

1.1 การติดตั้ง Web Server
ขั้นตอนแรกจะต้องปรับกำหนด Perspective ของ Eclipse ให้เป็น Java EE โดยการเลือกคำสั่ง Windows >
Open Perspective > Other ..จากนั้นเลือก Java EE ใน Dialog Box จะได้ Perspective ดังรูปที่ 1.1

รูปที่ 1.1 Perspective สำหรับ Java EE
ขั้นตอนถัดไปจะเป็นการเพิ่ม Tomcat Web Server เพื่อให้ Eclipse สามารถควบคุมและ Deploy โปรแกรมลง
ได้ โดยมีขั้นตอนต่างๆ ดังรูปที่ 1.2 ดังนี้
ให้เลือกแทป Servers คลิ๊กขวาภายใน Window แล้วเลือก New → Server
เลือกชื่อ Apache → Tomcat 6.0 Server (หรือ Version อื่น) และ Browse ไปยัง folder Tomcat ที่ติดตั้งไว้
จากนั้นกด OK และ Finish


6

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

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

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


7

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

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

รูปที่ 1.5 การสร้างโปรเจ็ค Web Application


8

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

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

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


9

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

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

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

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


10

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

รูปที่ 1.10 การสร้างไฟล์ HTML

2. กำหนด HTML File Name: เป็น addCustomer แล้วกด Finish ดังรูป 1.11

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


11

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

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

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


12

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

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

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

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


13

1.4 การทดสอบโปรแกรม
1. ทำการติดตั้ง (Deploy) Web Project บน Tomcat WebServer
โดยให้เลือกแทป Server แล้วคลิ๊กขวาที่ชื่อ Tomcat Server แล้วเลือกคำสั่ง Add and Remove ดังรูปที่ 1.15

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

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

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

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

รูปที่ 1.17 การรัน File ที่ต้องการ Test

14

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

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

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

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


15

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

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

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

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

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

● fax หมายเลข fax

● email ของลูกค้า

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


16

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

PrintWriter out = response.getWriter();

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

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

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

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

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

out.close();
}


17

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

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

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

18

3. กำหนดค่า URL Pattern(หรือ URL Mappings) เป็น /addCustomer.do
โดยคลิ๊กเลือกชื่อ CustomerServlet แล้ว กดปุ่ม Edit
แล้วเปลี่ยน URL Mapping เป็น addCustomer.do และกด Finish ดังรูปที่ 2.3

รูปที่ 2.3 การกำหนด URL Pattern
4. จากนั้นเพิ่มเมธอดที่ไฟล์ CustomerServlet.java
สำหรับรับ action ที่Submit มาจาก Http-Request (HTML Form) ทั้งชนิด POST และ GET
โดยตั้งชื่อเมธอดว่า processRequest( ) โดยเขียน source code ตาม หัวข้อ 2.1.2
protected void processRequest(HttpServletRequest
request,HttpServletResponse response)
throws IOException {

// ให้เขียน source code ตาม หัวข้อ 2.1.2
}


19

5. เขียน source Code เพิ่มในเมธอด doGet(),doPost()
เพื่อส่งต่อ Http-Request ไปยังเมธอด processRequest() โดยเขียน code ดังนี้
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response); //เพิ่ม Code เข้าไปที่นี่
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
processRequest(request, response); //เพิ่ม Code เข้าไปที่นี่
}

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

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


20

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

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

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

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


21

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

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

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


22

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

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

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


23

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

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


24

2. สร้างไฟล์ HTML ชื่อ vote ดังรูปที่ 3.3

รูปที่ 3.3 การสร้าง HTML Page ชื่อ vote.html

3. ในหน้าต่าง Editor เขียน Source code ของ vote.html ดัง Listing ที่ 3.1
Listing ที่ 3.1 โปรแกรม vote.html

<html>
<head><title>Web Voting</title></head>
<body>
<form action="processVote" method="POST">
Select a computer language <BR>
<input type="radio" name="lang" value="1" /> Java <br>
<input type="radio" name="lang" value="2" /> C# <br>
<input type="radio" name="lang" value="3" /> C <br>
<input type="radio" name="lang" value="4" /> Pascal <br>
<input type="submit" value="Vote" />
</form>
</body>
</html>


25

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

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


26

ในหน้าต่าง Editor เขียน Source code ของ VoteServlet.java ดัง Listing ที่ 3.2
Listing ที่ 3.2 โปรแกรม VoteServlet.java

package controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

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

private static final long serialVersionUID = 1L;
String []lang ={"Java", "C#", "C", "Pascal"};
int []count = new int[4];

protected void processRequest(HttpServletRequest request,HttpServletResponse response)


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


out.close();
}

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

protected void doPost(HttpServletRequest request, HttpServletResponse response)
}
}


27

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

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

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

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

28

3.4 การปรับปรุงโปรแกรม VoteServlet.java
ขั้นตอนนี้จะเป็นการปรับปรุงโปรแกรม VoteServlet.java เพื่อป้องกันการโหวตซ้ำทั้งนี้จะไม่อนุญาตให้ ผู้ใช้
ที่ใช้หมายเลขไอพีเดียวกันโหวตซ้ำได้ โดยจะเก็บหมายเลขไอพีที่ทำการโหวตแล้วในออปเจ็คชนิด HashSet การ
พัฒนาโปรแกรมนี้มีคำสั่งเพิ่มเติมที่สำคัญดังนี้
1. กำหนดตัวแปร voters
2. อ่านหมายเลขไอพีของผู้โหวตและเพิ่มคะแนนการโหวต หากหมายเลขไอพีนี้ไม่เคยโหวต

3.4.1 กำหนดตัวแปร voters
ตัวแปร voters เป็นตัวแปรชนิด HashSet ( Set ไม่เก็บข้อมูลซ้ำ ไม่จำลำดับข้อมูลว่าเข้าก่อนหรือหลัง
และไม่เรียงลำดับ) เก็บหมายเลขไอพีของผู้โหวต โดยจะประกาศเป็นตัวแปร ออปเจ็คที่มีคำสั่งประกาศดังนี้
HashSet voters = new HashSet();

3.4.2 การอ่านหมายเลขไอพีของผู้ใช้
การอ่านหมายเลขไอพีของผู้ใช้ทำได้โดยเรียกใช้ คำสั่ง getRemoteAddr() ในออปเจ็ค request เมื่อทราบ
หมายเลขไอพี เราสามารถที่จะตรวจสอบได้ว่าหมายเลขนี้เคยโหวตแล้วหรือไม่ โดยการตรวจสอบว่าออปเจ็ค voters
มีค่าหมายเลขไอพีนี้หรือไม่โดยใช้คำสั่ง contain() หากยังไม่เคยโหวตก็ให้เพิ่มค่าตัวนับและเพิ่มหมายเลขไอพีนี้ใน
ออปเจ็ค voters โดยมีคำสั่งดังนี้
String ip = request.getRemoteAddr();
if(voter.contains(request.getRemoteAddr())){
out.print("This IP Address has been voted");
} else {
count[voteNum]++;
voter.add(request.getRemoteAddr());
}


29

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

import java.util.HashSet;


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

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

HttpServletResponse response) throws ServletException, IOException {


int voteNum = Integer.parseInt(vote) - 1;

if (voter.contains(request.getRemoteAddr())) {
out.print("<font color=red>This IP Address has been voted</font>");
} else {
voter.add(request.getRemoteAddr());
count[voteNum]++;
}
out.println("<title>Servlet VoteServlet</title>");
out.println("<h1>Servlet VoteServlet at " + request.getContextPath()
+ "</h1>");
out.println(lang[i] + " = " + count[i] + "<BR>");
}
out.close();
}
protected void doGet(HttpServletRequest request,
}
protected void doPost(HttpServletRequest request,
}

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


30

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

ให้เปิดโปรแกรม MySQL Workbench ดังรูปที่ 4.1 จากนั้นทำตามขั้นตอนดังนี้

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

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


31

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

ตารางที่ 4.1 Table books

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

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

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


32

2. หรือใช้คำสั่ง SQL Statement ก็ได้ โดยนำไปใส่ที่หน้าต่าง Query1 แล้ว กด icon สายฟ้าสีเหลืองเพื่อรัน
CREATE TABLE BOOKS (
ISBN VARCHAR(20) NOT NULL ,
TITLE VARCHAR(70) NULL ,
AUTHOR VARCHAR(50) NULL ,
PRICE FLOAT NULL ,
PRIMARY KEY (ISBN) );

3. เปิด Tables books จะเห็น Column ต่างๆ ดังรูปที่ 4.4

รูปที่ 4.4 ผลลัพธ์จากการสร้างตาราง


33

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

แล้ว คลิ๊กที่ icon สายฟ้าสีเหลือง ดังรูปที่ 4.5 หรือกด Ctrl+Shift+Enter เพื่อรันคำสั่ง SQL ทั้งหมด

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


34

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

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


35

Exercise 5 การพัฒนาโปรแกรมเว็บ เพื่อติดต่อกับฐานข้อมูล
เนื้อหาที่ต้องศึกษาก่อน การใช้งาน Tool ที่ติดต่อกับ MySQL Database
แบบฝึกหัดนี้จะเป็นการพัฒนาโปรแกรม Web Application โดยใช้ Java Servlet เพื่อเชื่อมต่อกับฐานข้อมูล
ในที่นี้ใช้ฐานข้อมูล MySQL ซึ่งมี Database ชื่อ test และสร้าง Table ที่ชื่อ books ไว้แล้วจาก ที่ Exercise 4 (หน้า 34)
การทำงานของโปรแกรม เป็นการเพิ่มข้อมูลลงใน Table ดังกล่าว โดยกำหนดให้ผู้ใช้ป้อนรายละเอียดข้อมูล
ผ่านเว็บเพจที่ชื่อ addBook.html ซึ่งเมื่อผู้ใช้กดปุ่ม Add โปรแกรมก็จะไปเรียกโปรแกรม Servlet ที่ชื่อ
AddBookServlet ซึ่งจะมีคำสั่งในอ่านค่า parameter ที่ผู้ใช้ป้อนเข้ามาและทำการบันทึกข้อมูลลงใน Table books ซึ่ง
ใช้ชุดคำสั่ง SQL ผ่าน JDBC API
1. Config Apache Tomcat ให้สามารถใช้งาน JDBC Driver
2. สร้างโปรเจ็ค WebBaseDB
3. พัฒนา Web page addBook.html
4. พัฒนา Web page Thankyou.html
5. พัฒนาโปรแกรม AddBookServlet.java
5.1 การ Config Apache Tomcat ให้สามารถใช้งาน JDBC Driver
ในที่นี้จะใช้ Driver ที่ชื่อ MySQL Connector/J ซึ่งเป็น JDBC Driver ที่ใช้ติดต่อกับ MySQL
File ที่จำเป็น คือ mysql-connector-java-5.1.15-bin.jar โดยให้ Copy ไปวางที่ directory /lib ของ Apache Tomcat
Default อยู่ที่ C:Program FilesApache Software FoundationTomcat 6.0lib ดังรูปที่ 5.1

รูปที่ 5.1 ตำแหน่งของ File JDBC Driver ใน Folder lib ของ Apache Tomcat

โดยสามารถ Download MySQL Connector/J ได้ที่
http://mysql.cs.pu.edu.tw/Downloads/Connector-J/mysql-connector-java-5.1.15.zip


36

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

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

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


37

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

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

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

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


38

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

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

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

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

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

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

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

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

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


39

1. เพิ่ม Resource ชนิด DataSource ลงไปที่ Tomcat
โดยสร้าง file context.xml ที่ Folder WebBaseDBWebContentMETA-INF โดยเรามาคลิ๊กขวาที่
Folder ที่ชื่อ WebContent > META-INF แล้วเลือกเมนู New > Others > XML File แล้วกำหนดชื่อไฟล์เป็น
context.xml แล้วเขียน sourcecode ดังนี้

<?xml version="1.0" encoding="UTF-8"?>
<Context>
<Resource
name="jdbc/test"
auth="Container"
driverClassName="com.mysql.jdbc.Driver"
type="javax.sql.DataSource"
url="jdbc:mysql://localhost:3306/test"
username="root"
password="root" >
</Resource>
</Context>

2. การขอ Data source จะใช้ @annotation และบอกชื่อของ Data source ตัวที่เราต้องการ
ตัวอย่าง source code เช่น
@Resource(name = "jdbc/test")
private DataSource jdbcTest;

เมื่อได้ Data source แล้ว เราก็จะสร้างทางติดต่อ โดย getConnection จากมันแล้วเก็บค่าไว้ที่ตัวแปร conn
โดยเขียน source code ส่วนนี้ที่ method init( )
private Connection conn;

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

5.5.3 เพิ่มรายชื่อหนังสือใหม่ลงในฐานข้อมูล
เมื่อเชื่อมต่อฐานข้อมูลและได้ออปเจ็คชนิด Connection มาแล้ว เราสามารถที่จะเรียกใช้คำสั่ง SQL ได้ ซึ่ง
ในที่นี้คือคำสั่ง INSERT ซึ่งจะมีรูปแบบของคำสั่งดังนี้
INSERT INTO books VALUES(....)

โดยเราจะใช้ค่าจากพารามิเตอร์ต่างๆที่รับมา ดังนั้นถ้าข้อมูลที่ป้อนเข้ามาถูกต้องเราสามารถที่จะเพิ่มรายชื่อ
หนังสือใหม่ลงในฐานข้อมูลโดยใช้คำสั่งดังนี้
Statement stmt = conn.createStatement();
String sql = "INSERT INTO books VALUES('"
+ isbn + "','" + title +"','"
+ author +"',"+ price +")";
int numRow = stmt.executeUpdate(sql);

5.5.4 การเรียกเว็บเพจ thankyou.html
เมื่อข้อมูลได้ถูกเพิ่มลงไปในฐานข้อมูลแล้ว โปรแกรม AddBookServlet จะทำการเรียกเว็บเพจ
thankyou.html โดยการเรียกใช้ RequestDispatcher ดังนี้


40

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

5.6 ขั้นตอนการพัฒนาโปรแกรม AddBookServlet.java
โปรแกรมมีขั้นตอนในการพัฒนาดังนี้
1. คลิ๊กขวาที่โหนด WebBaseDB จากนั้นเลือกคำสั่ง New → Servlet
กำหนด Java Package เป็น controller , Class Name เป็น AddBookServlet และ
URL Mapping เป็น /addBook.do แล้วกด Finish
2. ในหน้าต่าง editor ให้แก้ไข source code ของไฟล์ AddBookServlet.java
ให้เป็นไปตาม Listing ที่ 5.3
Listing ที่ 5.3 โปรแกรม AddBookServlet.java

package controller;

import java.sql.Connection;
import java.sql.SQLException;
import java.sql.Statement;

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

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

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


41

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

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

int numRow = stmt.executeUpdate(sql);

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

protected void doGet(HttpServletRequest request,
}

protected void doPost(HttpServletRequest request,
}
}

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

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

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


42

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

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

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

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


43

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

6.1 การติดตั้ง MongoDB

โปรแกรมฐานข้อมูล MongoDB สามารถทำงานในระบบปฎิบัติการที่หลากหลายทั้ง Windows, Mac OS
หรือ Linux สำหรับบนระบบปฎิบัติการ Windows สามารถติดตั้งได้โดยการดาวน์โหลดไฟล์ Binary จากเว็บไซต์
http://www.mongodb.org/downloads ซึ่งเมื่อทำการดาวน์โหลดไฟล์ดังกล่าวแล้วให้ทำการ unzip เก็บไฟล์ไว้ใน
ไดเร็กทอรี่ที่ต้องการโดยเราจะมีไฟล์ต่างๆดังรูป

รูปที่ 6.1 ไฟล์ไบนารี่ต่างๆของ MongoDB

ซึ่งไฟล์ที่สำคัญก็คือ
• mongod.exe ที่เป็น Database Server
• mongo.exe ที่เป็นหน้่าจอของ admin

โดย Default MongoDB จะเก็บข้อมูลไว้ที่ไดเร็กทอรี่ datadb ซึ่งเราจะต้องไปสร้างไดเร็กทอรี่ดังกล่าวภายใต้
Drive C


44

6.2 การใช้ MongoDB
เราสามารถที่จะทดลองการใช้งาน MongoDB โดยการเปิดโปรแกรม Mongo.exe ซึ่งก็จะเป็นโปรแกรม
command shell ของ administrator และโดย Default ก็จะกำหนดใช้ ฐานข้อมูลที่ชื่อ test ซึ่งเราสามารถที่จะแสดง
ฐานข้อมูลที่ใช้อยู่โดยการพิมพ์คำสั่ง
> db

คำสั่งที่จะแสดงรายชื่อฐานข้อมูล (database)ทั้งหมดคือ
>show dbs

เราสามารถที่จะสร้างฐานข้อมูลใหม่ที่ชื่อว่า mydatabase โดยใช้คำสั่ง
>use mydatabase

คำสั่งที่จะแสดง Tables ทั้งหมดในฐานข้อมูลคือ
>show collections

และเราสามารถที่จะเรียกดูคำสั่งในการช่วยเหลือโดย
>help

สำหรับในตัวอย่างนี้เราจะทำการทดลองสร้างข้อมูลของหนังสือ สองเล่มดังนี้
> db.books.insert({isbn:"555123", author:"thanachart", title:"Introduction to MongoDB", price:1200})

และสามารถทำการเพิ่มข้อมูลได้โดยคำสั่งต่อไปนี้
> new_book = {isbn:"555124", author:"James Gosling", title: "Java SE", price: 1400}
> db.books.insert(new_book)

เราสามารถที่จะดูข้อมูลของหนังสือทั้งหมดได้จากคำสั่ง
> db.books.find()

ซึ่งก็จะได้ผลลัพธ์ดังนี้
{ "_id" : ObjectId("511fb0387c199204a9f733a5"), "isbn" : "555123", "author" : "thanachart", "title" :
"Introduction to MongoDB", "price" : 1200 }
{ "_id" : ObjectId("511fb24e7c199204a9f733a6"), "isbn" : "555124", "author" : "James Gosling", "title" : "Java
SE", "price" : 1400 }

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

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


Hand-on Exercise Java Web Programming

Hand-on Exercise Java Web Programming

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Hand-on Exercise Java Web Programming

Ähnlich wie Hand-on Exercise Java Web Programming (20)

Mehr von IMC Institute

Mehr von IMC Institute (20)

Hand-on Exercise Java Web Programming