Java Web Programming Using NetBeans 6.5

1

Hand-on
Exercises

การเขยนโปรแกรมเวบ
Java Servlet / JSP
โดยใช
GlassFish and NetBeans 6.5

Dr.Thanachart Numnonda
and
Asst Prof.Thanisa Kruawaisayawan

July 2009

การเขยนโปรแกรม Java Servet / JSP Thanachart Numnonda / Thanisa Kruawaisayawan

2

สารบญ
Exercise 1 การสรางโปรเจค Web Application และไฟล HTML........................................................................5
1.1 การสราง Web Application Project..................................................................................................5
1.2 การพฒนาโปรแกรม addCustomer.html................................................................................................9
1.3 การทดสอบโปรแกรม..........................................................................................................................11
Exercise 2 การเขยนโปรแกรม Java Servlet เพ!ออ"านค"าพาราม#เตอร.........................................................................13
2.1 การพฒนาโปรแกรม CustomerServlet.java.........................................................................................13
2.1.1 การอ"านค"าพาราม#เตอรจาก addCustomer.html ...............................................................................13
2.1.2 การแสดงรายละเอยดของค"าต"างๆ.......................................................................................................14
2.2 ข&นตอนการพฒนาโปรแกรม CustomerServlet.java ...............................................................................14
2.3 การทดสอบโปรแกรม..........................................................................................................................19
2.4 การปรบปร'งโปรแกรมเพ!อใหแสดงผลภาษาไทยและเรยกไฟล addCustomer.html เม!อเร#!มตน......................................20
Exercise 3 โปรแกรมเวบส.าหรบการท.าโพล........................................................................................................22
3.1 การพฒนาโปรแกรม vote.html............................................................................................................22
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..............................................................................................29
3.4.1 ก.าหนดตวแปร voters................................................................................................................29
3.4.2 การอ"านหมายเลขไอพของผ/ใช..........................................................................................................29
Exercise 4 การเช!อมต"อกบ MySQL Database.............................................................................................32
4.1 การต#ดต&งโปรแกรมฐานขอม/ล MySQL....................................................................................................32
4.2 การสราง Database Connection.....................................................................................................32
4.3 การสรางตาราง books.......................................................................................................................35
4.4 การใชค.าส!ง SQL ใน NetBeans........................................................................................................37
Exercise 5 การพฒนาโปรแกมเวบเพ!อต#ดต"อกบฐานขอม/ล..........................................................................................39
5.1 การสราง Web Application Project................................................................................................39
5.2 การพฒนาโปรแกรม addBook.html....................................................................................................39
5.3 การพฒนาโปรแกรม Thankyou.html...................................................................................................41
5.4 การพฒนาโปรแกรม AddBookServlet.java.........................................................................................41
5.4.1 การอ"านค"าพาราม#เตอรจาก addBook.html ......................................................................................42
5.4.2 การเช!อมต"อกบฐานขอม/ล...............................................................................................................42
5.4.3 เพ#!มรายช!อหนงสอใหม"ลงในฐานขอม/ล ................................................................................................43
5.4.4 การเรยกเวบเพจ Thankyou.html ...............................................................................................43
5.5 ข&นตอนการพฒนาโปรแกรม AddBookServlet.java ...............................................................................45
5.6 ทดสอบโปรแกรม..............................................................................................................................47
Exercise 6 โปรแกรมเวบเพ!อสาธ#ตขอบเขตของออปเจค............................................................................................49
6.1 การพฒนาโปรแกรมเพ!อสาธ#ตขอบเขตของ Object แบบ Request .....................................................................49
6.1.1 ข&นตอนการพฒนาโปรแกรมเพ!อสาธ#ตขอบเขตของ Object แบบ Request ....................................................52
6.1.2 ข&นตอนการทดสอบโปรแกรมเพ!อสาธ#ตขอบเขตของ Object แบบ Request....................................................52


3

6.2 การพฒนาโปรแกรมเพ!อสาธ#ตขอบเขตของ Object แบบ Session .....................................................................52
6.2.1 ข&นตอนการพฒนาโปรแกรมเพ!อสาธ#ตขอบเขตของ Object แบบ Session .....................................................55
6.2.2 ข&นตอนการทดสอบโปรแกรมเพ!อสาธ#ตขอบเขตของ Object แบบ Session ...................................................55
6.3 การพฒนาโปรแกรมเพ!อสาธ#ตขอบเขตของ Object แบบ Application................................................................55
6.3.1 ข&นตอนการพฒนาโปรแกรมเพ!อสาธ#ตขอบเขตของ Object แบบ Application...............................................58
6.3.2 ข&นตอนการทดสอบโปรแกรมเพ!อสาธ#ตขอบเขตของ Object แบบ Application..............................................58
Exercise 7 การพฒนาโปรแกรม Servlet โดยใชคลาสประเภท Web Listener..........................................................59
7.1 การพฒนาโปรแกรม Init.java..............................................................................................................59
7.2 การปรบปร'งโปรแกรม AddBookServlet.java .....................................................................................64
7.3 ทดสอบโปรแกรม..............................................................................................................................65
Exercise 8 การพฒนาโปรแกรม Servlet Filter ..............................................................................................67
8.1 การพฒนาโปรแกรม Servlet Filter......................................................................................................67
8.2 การเขยนหนา Login.........................................................................................................................68
8.2.1 ข&นตอนการพฒนาโปรแกรม ...........................................................................................................69
8.3 การเขยน Servlet Filter..................................................................................................................70
8.4 การเขยนโปรแกรม ShowServlet .......................................................................................................73
8.5 ข&นตอนการทดสอบโปรแกรม .................................................................................................................74
Exercise 9 การเขยนโปรแกรม JSP เพ!อแสดงผลลพธ............................................................................................75
9.1 การพฒนาโปรแกรม hello.jsp.............................................................................................................75
9.2 การพฒนาโปรแกรม viewBook.jsp....................................................................................................76
9.2.1 การก.าหนด Tag Library .........................................................................................................76
9.2.2 การก.าหนด Datasource ..........................................................................................................76
9.2.3 การใชค.าส!ง sql:query .............................................................................................................77
9.2.4 การใชค.าส!ง c:forEach เพ!อแสดงผล ..............................................................................................77
Exercise 10 การพฒนาโปรแกรมเวบ Online Book Store................................................................................80
10.1 การพฒนาโปรแกรม selectBooks.jsp................................................................................................80
10.2 การพฒนาโปรแกรม Book.java.........................................................................................................84
3
10.3 การพฒนาโปรแกรม Cart.java...........................................................................................................85
3
10.4 การพฒนาโปรแกรม ProcessSelection.java......................................................................................86
10.5 การพฒนาโปรแกรม Init.java ...........................................................................................................88
10.6 การพฒนาโปรแกรม viewCart.jsp.....................................................................................................88
10.7 ข&นตอนการทดสอบโปรแกรม ...............................................................................................................89
Exercise 11 การสราง Custom Tags ส.าหรบโปรแกรม JSP...............................................................................92
11.1 การพฒนาโปรแกรม hello.jsp............................................................................................................92
11.2 การพฒนาโปรแกรม helloTag.jsp.....................................................................................................94
11.2.1 สราง Tag Library Descriptor.............................................................................................94
11.2.2 สรางไฟล Tag Handler.........................................................................................................95
11.2.3 เขยนโปรแกรม helloTag.jsp...................................................................................................97
11.3 การพฒนาโปรแกรม helloJSTL.jsp...................................................................................................98
11.4 การพฒนาโปรแกรม helloTagFile.jsp...............................................................................................98
11.4.1 สราง Tag File....................................................................................................................99


4

11.4.2 เขยนโปรแกรม helloTagFile.jsp...........................................................................................100
Exercise 12 การพฒนาโปรแกรมเวบโดยใช Strut Framework .........................................................................101
12.1 การสราง Web Application Project............................................................................................101
12.2 การพฒนาโปรแกรม BookActionForm.java...................................................................................101
12.3 การพฒนาโปรแกรม AddBook.jsp..................................................................................................106
12.4 การพฒนาโปรแกรม AddBookAction.java.....................................................................................107
12.5 การพฒนาไฟล ApplicationResource.properties..........................................................................109
12.6 การพฒนาโปรแกรม Init.java และ Thankyou.html...........................................................................109
12.7 การพฒนาไฟล Struts-config.xml.................................................................................................109
12.8 การทดสอบโปรแกรม......................................................................................................................110
Exercise 13 การพฒนาโปรแกรมเวบโดยใช JSF Framework............................................................................112
13.2 การพฒนาโปรแกรม JSF Managed Bean........................................................................................113
13.3 การพฒนาโปรแกรม PriceValidator.java........................................................................................115
13.4 การพฒนาโปรแกรม AddBook.jsp..................................................................................................116
13.5 การก.าหนด Page Navigation......................................................................................................117
13.6 การก.าหนด Error Message.........................................................................................................118
13.7 การพฒนาโปรแกรม Thankyou.html, error.html และ Init.java.........................................................119
13.8 การพฒนาโปรแกรม AddBookServlet.java.....................................................................................119
Exercise 14 การพฒนาโปรแกรมเวบโดยใช Visual JSF....................................................................................122
14.2 การพฒนาโปรแกรม HelloWeb......................................................................................................122
14.4 การปรบปร'งโปรแกรม HelloWeb....................................................................................................127


5

Exercise 1 การสรางโปรเจค Web Application และไฟล
HTML
แบบฝกหดนจะเปนการสรางโปรเจค Web Application และพฒนาหนาเวบเพจเพอใหผ#ใชป%อนขอม#ล
ของล#กคา โดยเวบเพจจะพฒนาดวยภาษา HTML ซ,งจะท.าหนาเปนส/วนอ0นพ1ตของโปรแกรมเพอใหผ#ใชป%อน
ขอม#ลผ/าน Web Browser

ขนตอนในการพฒนาโปรแกรม
1. สรางโปรเจค Web Application
2. พฒนาโปรแกรม addCustomer.html

1.1 การสราง Web Application Project

เราจะเร0มตนสรางโปรแกรม Web-Base Application โดยการสราง Project ใหม/ข,นมาใน NetBeans
ซ,งมขนตอนดงน
1. เลอกเมน# File > New Project
2. ในไดอะลอก New Project ใหเลอก Categories เปน Java Web และเลอก Projects เปน Web
Application ดงร#ปท 1.1

รปท 1.1 การสรางโปรเจค Web Application
3. กด Next ก.าหนด Project Name: เปน WebApp แลวเลอก Project Location: เปน Directory ทเรา


6

ตองการจะเกบไฟล5ไว ดงร#ปท 1.2

รปท 1.2 การกาหนดชอโปรเจค

4. จากนนใหเลอก Server เปน Apache Tomcat 6.0.18 ดงร#ปท 1.3

รปท 1.3 การเลอก Server ทจะตดตงโปรเจค


7

5. กดป16ม Finish โปรแกรมจะท.าการสราง Projects และสรางไฟล5ต/างๆ ข,นมาโดยมโครงสรางของไฟล5ดง
ร#ปท

รปท 1.4 โครงสรางไฟล!ของโปรเจค WebApp

1.2 การพฒนาโปรแกรม addCustomer.html

โปรแกรม addCustomer.html เปนเวบเพจทใชแสดงฟอร5มส.าหรบป%อนขอม#ลล#กคา เขาในฐานขอม#ล
customers ซ,งจะสรางข,นในแบบฝกหดถดไป โดยมร#ปแบบดงร#ปท 1.5 โปรแกรม addBook.html มขนตอนการ
พฒนาดงน
1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด WebApp จากนนเลอกค.าสง New > Other
2. ในไดอะลอก New File ใหเลอก Categories ทชอ Web ซ,งโปรแกรมกจะแสดง File Types ต/างๆ ภาย
ใต Category น ใหเราเลอก HTML แลวกด Next
3. ก.าหนด HTML File Name: เปน addCustomer แลวกด Finish
4. เขยน source code ของไฟล5 addCustomer.html ตาม Listing ท 1.1 โดยเราสามารถทจะลาก icon
ประเภท HTML Forms ทอย#/ในหนาต/าง Palette เพอสามารถใหเขยนโปรแกรมไดง/ายข,น


8

รปท 1.5 หนาเวบเพจ addCustomer.html

Listing ท 1.1 โปรแกรม addCustomer.html

<html>
<head>
<title> Add Customer </title>
</head>
<body>
<H1> Add a new customer profile </H1>
<p>
<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>

1.3 การทดสอบโปรแกรม

1. ท.าการ Clean and Build และ Undeploy and Deploy โปรแกรม WebApp
2. Run โปรแกรม WebApp
3. ท Web Browser เปลยน URL เปน http://localhost:8080/WebApp/addCustomer.html จะได
ผลลพธ5ดงร#ปท 1.6

9

หมายเหต1 หมายเลขพอร5ตโดยพนฐานจะเปน 8080 ยกเวนว/าจะก.าหนดหมายเลขอน

รปท 1.6 ผลลพธ!ทไดจากการรนโปรแกรม addCustomer.html


10

Exercise 2 การเขยนโปรแกรม Java Servlet เพออ!านค!า
พาราม"เตอร

เนอหาทตองศกษากอน การสรางโปรเจค Web Application และสรางไฟล5 HTML

แบบฝกหดนจะเปนการพฒนาโปรแกรม Java Servlet เพอแสดงรายละเอยดของค/าพาราม0เตอร5ทผ#ใช
ป%อนเขามาออกทางโปรแกรม Web Browser และแสดงผลการออกออกทาง Web Browser

2.1 การพฒนาโปรแกรม CustomerServlet.java

โปรแกรม CustomerServlet.java เปนโปรแกรมทถ#กเรยกใชโดย addCustomer.html เมอผ#ใชกดป16ม
Add โปรแกรมนจะท.าหนาทน.าค/าพาราม0เตอร5ต/างๆ ทผ#ใชป%อนมาแสดงผล โดยมขนตอนการท.างานดงน

1. อ/านค/าพาราม0เตอร5ต/างๆ ทส/งมาจาก addCustomer.html
2. แสดงรายละเอยดของค/าต/างๆ

2.1.1 การอ/านค/าพาราม0เตอร5จาก addCustomer.html

เวบเพจ addCustomer.html จะส/งขอม#ลของรายชอหนงสอใหม/ผ/านมาทางพาราม0เตอร5ต/างๆ ดงน
● id รหสของล#กคา

● name ชอล#กคา

● addr ทอย#/ล#กคา

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

● fax หมายเลข fax

● email ของล#กคา

พาราม0เตอร5ต/างๆ เหล/านจะถ#กส/งผ/านโปรโตคอล Http และในโปรแกรมเราสามารถทจะอ/านค/าพารา-
ม0เตอร5เหล/านไดจากออปเจค 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");


11

2.1.2 การแสดงรายละเอยดของค/าต/างๆ

โปรแกรม Servlet จะสามารถแสดงผลออกทาง Web Browser ไดโดยการเขยนโคด HTML ภายใน ค.าสง
out.println() โดยมค.าสงในเมธอด processRequest() ดงน

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

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

2.2 ขนตอนการพฒนาโปรแกรม CustomerServlet.java

เราสามารถทจะพฒนาโปรแกรม CustomerServlet.java ตามขนตอนดงน

1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด WebApp จากนนเลอกค.าสง New > Other...
ใต Category น ใหเราเลอก Servlet แลวกด Next ดงร#ปท 2.1


12

รปท 2.1 การเลอกไฟล!ประเภท Servlet

3. ก.าหนด Class Name: เปน CustomerServlet และก.าหนด Package เปน servlet ดงร#ปท 2.2

รปท 2.2 การกาหนดชอ Servlet

4. กด Next ก.าหนด URL Pattern(s): เปน /addCustomer.do ดงร#ปท 2.3


13

รปท 2.3 การกาหนด URL Pattern

5. กด Finish โปรแกรม NetBeans จะสรางไฟล5 CustomerServlet.java ไวภายใต Source Packages
โดยจะอย#/ใน Directory ชอ servlet
6. ในหนาต/าง editor ใหแกไข sourcecode ของไฟล5 CustomerServlet.java โดยม source code ของ
เมธอด processRequest ตามหวขอ 2.1.2


1. ท.าการ Build และ Deploy โปรแกรม WebApp
2. Run โปรแกรม WebApp
3. ท Web Browser เปลยน URL เปน http://localhost:8080/WebApp/addCustomer.html
4. ทดลองป%อนขอม#ลดงร#ป
5. โปรแกรมจะแสดงผลดงร/ปท! 2.4 และ 2.5


14

รปท 2.4 การป+อนขอมลหนา addCustomer.html

รปท 2.5 ผลลพธ!จากการเรยกโปรแกรม CustomerServlet


15

2.4 การปรบปรงโปรแกรมเพอใหแสดงผลภาษาไทยและเร%ยกไฟล' addCustomer.html เมอเร(มตน

เราสามารถท!จะปรบปร'งโปรเจคน&เพ!อใหเรยกไฟล addCustomer.html โดยอตโนมต#เม!อเร#!มตนรน
โปรแกรม โดยการก.าหนดพาราม#เตอร Welcome Files ใหเป6นไฟลดงกล"าว โดยมข&นตอนดงน&

1. ในหนาต/าง Projects ขยายโหนด WebApp > Web Pages > WEB-INF
2. เลอกไฟล5 web.xml แลวเลอกแทป Pages ท.าการแกไข Welcome Files เปน addCustomer.html ดง
ร#ปท 2.6

รปท 2.6 การจดการไฟล! web.xml

นอกจากนถาเราทดลองป%อนขอม#ลภาษาไทย ลงไปในจะพบว/า โปรแกรม Web Browser บางตวจะแสดง
ผลลพธ5ภาษาไทยไม/ถ#กตอง เราสามารถแกไขไดโดยการก.าหนดใหการเขารหสของพาราม0เตอร5ทส/งมาเปน UTF-
8 โดยเพ0มค.าสงดงน

request.setCharacterEncoding("UTF-8");


16

Exercise 3 โปรแกรมเวบส%าหรบการท%าโพล

เนอหาทตองศกษากอน การเขยนโปรแกรม Java Servlet เพออ/านค/าพาราม0เตอร5

แบบฝกหดนจะเปนการพฒนาโปรแกรม Java Servlet เพอท.า Poll โดยใหผ#ใชสามารถทจะโหวตเลอก
ภาษาคอมพ0วเตอร5ทชอบได แลวโปรแกรมจะแสดงผลการโหวตทาง Web Browser

3.1 การพฒนาโปรแกรม vote.html

โปรแกรม vote.html เปนหนาเวบทใหผ#ใชสามารถทจะท.าการโหวตเลอกภาษาคอมพ0วเตอร5ได โดยเมอผ#
ใชกดป16ม Vote โปรแกรมเวบกจะไปท.าการเรยก url ทชอ processVote โปรแกรมนมหนาเวบดงร#ปท 3.1

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

และม sourcecode ดง 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>


17

<input type="submit" value="Vote" />

</form>
</body>
</html>

3.2 การพฒนาโปรแกรม VoteServlet.java

โปรแกรม VoteServlet.java เปนโปรแกรมทถ#กเรยกใชโดย vote.html เมอผ#ใชกดป16ม Vote โปรแกรม
นจะท.าหนาทเพอน.าค/าทผ#ใชโหวตมาประมวลผล โดยมขนตอนการท.างานดงน

1. ก.าหนดตวแปร counter และ lang
2. อ/านค/าพาราม0เตอร5ต/างๆทส/งมาจาก vote.html และท.าการประมวลผล
3. แสดงผลการโหวต

3.2.1 ก.าหนดตวแปร counter และ lang

ตวแปร count เปนอะเรย5เพอทจะเกบจ.านวนผลโหวตของภาษาคอมพ0วเตอร5แต/ละภาษา และตวแปร lang
เปนอะเรย5ของ String เพอทจะเกบรายชอภาษาคอมพ0วเตอร5 ตวแปรทงสองเปนตวแปรของออปเจคทจะประกาศ
นอกเมธอด โดยมค.าสงประกาศดงน
String []lang ={"Java", "C#", "C", "Pascal"};
int []count = new int[4];

3.2.2 อ/านค/าพาราม0เตอร5ต/างๆทส/งมาจาก vote.html และท.าการประมวลผล

เวบเพจ vote.html จะส/งขอม#ลของการโหวตมาในพาราม0เตอร5ทชอ lang โดยจะมค/าเปนหมายเลข 1-
4 ในทนจะมค.าสง request.getParameter เพอจะอ/านค/าทโหวตมา จากนนจะท.าการแปลงค/าซ,งเปน String ให
เปนค/าจ.านวนเตม จากนนจะเปนการเพ0มจ.านวนโหวตในตวแปร 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>");


18

}

โปรแกรม VoteServlet.java จะม sourcecode ดง Listing ท 3.2

Listing ท 3.2 โปรแกรม VoteServlet.java

import java.io.*;
import java.util.HashSet;

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

public class VoteServlet extends HttpServlet {


protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
int voteNum = Integer.parseInt(vote) - 1;
count[voteNum]++;

out.println("<title>Servlet VoteServlet</title>");
out.println("<h1>Servlet VoteServlet at " + request.getContextPath() + "</h1>");
}


out.close();
}

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

protected void doPost(HttpServletRequest request, HttpServletResponse response)
}


19

public String getServletInfo() {
return "Short description";
}
// </editor-fold>
}

3.3 ขนตอนการพฒนาโปรเจ*ค Voter

เราสามารถทจะพฒนาแบบฝกหดนทชอโปรเจค Voter ตามขนตอนดงน

1. เลอกค.าสงสราง New Project > Web Application จากนนก.าหนดชอโปรเจคเปน Voter ดงร#ปท 3.2

รปท 3.2 การสรางโปรเจค Web Application

2. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด Voter จากนนเลอกค.าสง New > Other...
3. ในไดอะลอก New File ใหเลอก Categories ทชอ Java Web ซ,งโปรแกรมกจะแสดง File Types ต/างๆ
ภายใต Category น ใหเราเลอก HTML แลวกด Next
4. ก.าหนด HTML File Name: เปน vote แลวกด Finish
5. ในหนาต/าง Editor เขยน Source code ของ vote.html ดง Listing ท 3.1
6. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด Voter จากนนเลอกค.าสง New > Servlet
7. ก.าหนด Class Name: เปน VoteServlet.java และ Package เปน controller แลวกด Next ก.าหนด
URL Pattern(s): เปน /processVote แลวกด Finish
8. ในหนาต/าง Editor เขยน Source code ของ VoteServlet.java ดง Listing ท 3.2
9. กด Save แลวท.าการ run โปรเจคเพอทดสอบโปรแกรมโดยเรยก URL ท


20

http://localhost:8080/Voter/vote.html โดยจะไดผลลพธ5ดงตวอย/างในร#ปท3.3

รปท 3.3 ตวอย-างผลลพธ!ของโปรเจค Voter

3.4 การปรบปรงโปรแกรม VoteServlet.java

ขนตอนนจะเปนการปรบปร1งโปรแกรม VoteServlet.java เพอป%องกนการโหวตซ.าทงนจะไม/อน1ญาตให
ผ#ใชทใชหมายเลขไอพเดยวกนโหวตซ.าได โดยจะเกบหมายเลขไอพทท.าการโหวตแลวในออปเจคชน0ด HashSet
การพฒนาโปรแกรมนมค.าสงเพ0มเต0มทส.าคญดงน
1. ก.าหนดตวแปร voters
2. อ/านหมายเลขไอพของผ#โหวตและเพ0มคะแนนการโหวตหากหมายเลขไอพนไม/เคยโหวต

3.4.1 ก.าหนดตวแปร voters

ตวแปร voters เปนตวแปรชน0ด HashSet ทจะเกบหมายเลขไอพของผ#โหวต โดยจะประกาศเปนตวแปร
ออปเจคทมค.าสงประกาศดงน
HashSet voters = new HashSet();

3.4.2 การอ/านหมายเลขไอพของผ#ใช

การอ/านหมายเลขไอพของผ#ใชท.าไดโดยเรยกใช ค.าสง getRemoteAddr() ในออปเจค request เมอ
ทราบหมายเลขไอพ เราสามารถทจะตรวจสอบไดว/าหมายเลขนเคยโหวตแลวหรอไม/ โดยการตรวจสอบว/าออปเจค
voters มค/าหมายเลขไอพนหรอไม/โดยใชค.าสง contain() หากยงไม/เคยโหวตกใหเพ0มค/าตวนบและเพ0มหมายเลข
ไอพนในออปเจค voters โดยมค.าสงดงน
String ip = request.getRemoteAddr();


21

if (!voters.contains(ip)) {
count[voteNum]++;
voters.add(ip);
} else {
out.println("This IP address has been voted");
}

ส.าหรบโปรแกรม VoteServlet.java ทปรบปร1งใหม/จะม sourcecode ดง Listing ท 3.3

Listing ท 3.3 โปรแกรม VoteServlet.java เพอป%องกนการโหวตซ.า

import java.io.*;
import java.util.HashSet;


public class VoteServlet extends HttpServlet {


HashSet voters = new HashSet();

int voteNum = Integer.parseInt(vote) - 1;
String ip = request.getRemoteAddr();
if (!voters.contains(ip)) {
count[voteNum]++;
voters.add(ip);
} else {
out.println("This IP address has been voted");
}
out.println("<title>Servlet VoteServlet</title>");
out.println("<h1>Servlet VoteServlet at " + request.getContextPath() + "</h1>");
}

out.close();
}


22

}

}

}


23

Exercise 4 การเชอมต!อกบ MySQL Database

เนอหาทตองศกษากอน -

แบบฝ8กหดน&เป6นข&นตอนการต#ดต&ง NetBeans เพ!อเช!อมต"อกบโปรแกรมฐานขอม/ล MySQL ท!เป6น
โปรแกรมฐานขอม/ล OpenSource แบบ FreeWare ซ:!งปกต#จะมตวอย"างฐานขอม/ลท!สรางมาพรอมแลวอย/"หลาย
ช'ด หน:!งในน&นคอฐานขอม/ลท!ช!อ test ท!เราจะใชในการทดสอบการเช!อมต"อกบโปรแกรม NetBeans

4.1 การต(ดตงโปรแกรมฐานขอม-ล MySQL

ขนตอนนเปนการต0ดตงโปรแกรม MySQL Server 5.0 โดยมขนตอนดงน

1. ท.าการดาวน5โหลดโปรแกรม MySQL Server 5.0 จาก URL ทชอ http://www.mysql.com/
2. ท.าการ unzip โปรแกรม mysql-5.0.xx-win32.zip
3. รนโปรแกรม setup.exe เพอท.าการต0ดตงโปรแกรม MySQL Server 5.0 โดยโปรแกรมจะแสดง
ไดอะลอกดงร#ปท 4.1

รปท 4.1 การตดตง MySQL Server

4. กดป16ม Next แลวท.าการต0ดตงโปรแกรมตามขนตอนต/างๆ โดยใหก.าหนดไดเรกทอรทตองการต0ดตงตาม
ความเหมาะสม

4.2 การสราง Database Connection

เม!อต#ดต&ง Database แลว เราสามารถท!จะใช NetBeans เพ!อเช!อมต"อ Database โดยใช JDBC Driver


24

ซ:!งในท!น&จะใช Driver ท!ช!อ MySQL Connector/J ซ:!งเป6น Driver ท!พฒนาโดยใชภาษาจาวาและต#ดต"อโดยตรง
กบ Database และโปรแกรม NetBeans 6.5 ไดต#ดต&งมาไวใหแลว เราสามารถท!จะเช!อมต"อกบ Database โดยใช
Driver ดงกล"าวได โดยมข&นตอนดงน&

1. ในโปรแกรม NetBeans เลอกแทป Services แลวขยายโหนด Databases > Drivers
2. เลอกโหนด MySQL(Connector/J Driver) จากน&นคล#;กขวาเลอก Connect Using.. ดงร/ปท! 4.2

รปท 4.2 การเลอกคาสงเชอมต-อ Database

3. ในไดอะลอก New Database Connection ใหระบ'
● Host: เป6น localhost

● Port: เป6น 3306

● Database: เป6น test

● User Name: เป6น root

4. ส.าหรบ Password: ใหใส"ค"าตามท!ก.าหนดไวในตอนต#ดต&งโปรแกรม MySQL ซ:!งในท!น&จะมค"าเป6น
root


25

5. ท.าการเลอก Remember password โดยไดอะลอกจะแสดงผลไดดงร/ปท! 4.3

รปท 4.3 การกาหนดค-าในการเชอมต-อ Database

6. กดป'<ม OK เม!อไดอะลอกแสดงขอความใหเลอก database schema.ใหกดป'<ม OK อกคร&งซ:!งตอนน&ถา
ขยายแทบ Database ในหนาต"าง Runtime จะเหน Connection ใหม"ดงร/ปท! 4.4


26

รปท 4.4 การแสดงการเชอมต-อ

4.3 การสรางตาราง books

ในท!น&จะก.าหนดใหสราง Table ท!ช!อ books โดยใหอย/"ภายใต Schema ท!ช!อ test โดย Table น&ก.าหนด
ใหม Column ต"างๆ ดงตารางท! 4.1

ตารางท! 4.1Table books

ชอ ชนด ขนาด
isbn varchar 20
title varchar 70
author varchar 50
price float -

เราจะใชโปรแกม NetBeans ในการท!จะสราง Table น&โดยมข&นตอนต"างๆ ดงน&

1. ในหนาต"าง Runtime ขยายแทบ Databases > jdbc:mysql://localhost:3306/test แลวจะเหนรายการ
Tables


27

2. คล#;กขวาท! Tables แลวเลอก Create Table... ดงร/ปท! 4.5

รปท 4.5 การเลอกคาสงสรางตาราง

3. ภายในไดอะลอก Create Table ใหก.าหนด Table Name เป6น books แลวใส" Column ต"างๆ ดงตารางท!
4.1 และก.าหนดให isbn เป6น Key โดยไดอะลอกจะแสดงผลไดดงร/ปท! 4.6

รปท 4.6 การสรางตารางชอ books

4. แลวกด OK ซ:!งตอนน&ในหนาต"าง Runtime ถาขยายแทบ Tables > books จะเหน Column ต"างๆ ดงร/ป
ท! 4.7


28

รปท 4.7 ผลลพธ!จากการสรางตาราง

4.4 การใชค/าสง SQL ใน NetBeans

ภายหลงจากท!มการสราง Table ท!ช!อ books เราสามารถท!จะใชโปรแกรม NetBeans สรางค.าส!ง SQL
เพ!อท!จะต#ดต"อกบฐานขอม/ล ในท!น&จะแสดงการเพ#!มขอม/ลลงใน Table โดยมข&นตอนต"างๆดงน&

1. ตรงโหนด Procedures คล#;กขวาท!โหนดแลวเลอกค.าส!ง Execute Command... หนาต"าง SQL Editor
จะปรากฎข:&นมา
2. ใหป>อนค.าส!ง SQL เป6น
INSERT INTO books VALUES ('123', 'Intro to Java Programming', 'Thanachart', 500.00)

3. กด Enter หรอ (Ctrl-Shift-E) เพ!อรนค.าส!ง SQL
4. เราสามารถท!จะด/ขอม/ลท!ป>อนเขาไปได โดยเลอกค.าส!ง View Data.. จาก Table ท!ช!อ books ดงร/ปท! 4.8

รปท 4.8 การเรยกคาสงดขอมลในตาราง


29

Exercise 5 การพฒนาโปรแกมเวบเพอต"ดต!อกบฐานขอม,ล

เนอหาทตองศกษากอน การเชอมต/อกบ MySQL Database

แบบฝกหดนจะเปนการพฒนาโปรแกรม Web Application โดยใช Java Servlet เพอเชอมต/อกบฐาน
ขอม#ล ในทนก.าหนดใหใชฐานขอม#ล MySQL ซ,งม Table ทชอ books โปรแกรมทจะพฒนาข,นเปนการเพ0ม
ขอม#ลลงใน Table ดงกล/าว โดยก.าหนดใหผ#ใชป%อนรายละเอยดขอม#ลผ/านเวบเพจทชอ addBook.html ซ,งเมอผ#
ใชกดป16ม Add โปรแกรมกจะไปเรยกโปรแกรม Servlet ทชอ AddBookServlet ซ,งจะมค.าสงในอ/านค/า
parameter ทผ#ใชป%อนเขามาและท.าการใส/ขอม#ลลงใน Table ดงกล/าว โดยใชช1ดค.าสง JDBC

1. สรางโปรเจค WebBaseDB
2. พฒนาโปรแกรม addBook.html และ Thankyou.html
3. พฒนาโปรแกรม AddBookServlet.java


เราจะเร0มตนสรางโปรแกรม Web-Base Database โดยการสราง Project ใหม/ข,นมาใน NetBeans ซ,งม
ขนตอนดงน

1. เลอกเมน# File > New Project..
Application แลวกด Next
3. ก.าหนด Project Name: เปน WebBaseDB แลวเลอก Project Location: เปน Director ทเราตองการ
จะเกบไฟล5ไว จากนนเลอก Server เปน Apache Tomcat 6.0.18 แลวกด Finish

5.2 การพฒนาโปรแกรม addBook.html

โปรแกรม addBook.html เปนเวบเพจทใชแสดงฟอร5มส.าหรบป%อนขอม#ลหนงสอใหม/เขาในฐานขอม#ล
books ซ,งมลกษณะดงร#ปท 5.1 โปรแกรม addBook.html มขนตอนการพฒนาดงน

1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด WebBaseDB จากนนเลอกค.าสง New > Other...
ใต Category น ใหเราเลอก HTML แลวกด Next


30

3. ก.าหนด HTML File Name: เปน addBook แลวกด Finish
4. เขยน source code ของไฟล5 addBook.html ตาม Listing ท 5.1 โดยเราสามารถทจะลาก icon ประเภท
HTML Forms ทอย#/ในหนาต/าง Palette ดงร#ปท 5.2 เพอสามารถใหเขยนโปรแกรมไดง/ายข,น

รปท 5.1 หนาเวบเพจ addBook.html

รปท 5.2 ตวอย-างหนาต-าง 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>


31

<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.3 การพฒนาโปรแกรม Thankyou.html

โปรแกรม Thankyou.html เปนเวบเพจทใชแสดงใหเหนว/าขอม#ลไดถ#กเพ0มเขาไปในฐานขอม#ลแลว โดย
ม sourcecode ดง Listing ท 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.4 การพฒนาโปรแกรม AddBookServlet.java

โปรแกรม AddBookServlet.java เปนโปรแกรมทถ#กเรยกใชโดย addBook.html เมอผ#ใชกดป16ม Add
โปรแกรมนจะท.าหนาทเพอต0ดต/อกบฐานขอม#ลโดยมขนตอนการท.างานดงน
1. อ/านค/าพาราม0เตอร5ต/างๆทส/งมาจาก addBook.html
2. เชอมต/อกบฐานขอม#ล books
3. เพ0มรายชอหนงสอใหม/ลงในฐานขอม#ล books
4. เรยกเวบเพจ Thankyou.html


32

5.4.1 การอ/านค/าพาราม0เตอร5จาก addBook.html

เวบเพจ addBook.html จะส/งขอม#ลของรายชอหนงสอใหม/ผ/านมาทางพาราม0เตอร5ต/างๆดงน
● isbn หมายเลข ISBN ของหนงสอ

● title ชอหนงสอ

● author ชอผ#แต/ง

● price ราคาหนงสอ

พาราม0เตอร5ต/างๆเหล/านจะถ#กส/งผ/านโปรโตคอล Http และในโปรแกรมเราสามารถทจะอ/านค/า
พาราม0เตอร5เหล/านไดจากออปเจค request โดยเรยกใชเมธอด getParameter() ซ,งโปรแกรมส/วนนจะมค.าสง
ต/างๆดงน
String isbn = request.getParameter("isbn");
String author = request.getParameter("author");
String title = request.getParameter("title");
String priceStr = request.getParameter("price");

5.4.2 การเชอมต/อกบฐานขอม#ล

การเขยนโปรแกรมเพอเชอมต/อกบฐานขอม#ลเพอเปนการเรยกใชค.าสง SQL ซ,งจะตองใช JDBC
API โดยจะมขนตอนดงน

● ท.าการโหลด Driver ส.าหรบ Database Server ทตองการเชอมต/อ ผ/าน DriverManager หรอ
โหลด DataSource จาก JNDI
● ด,งออปเจคชน0ด Connection จาก Driver หรอ Datasource
● ด,งออปเจคชน0ด Statement จากออปเจคชน0ด Connection
● เรยกใชค.าสง SQL โดยใชเมธอด executeQuery() หรอ executeUpdate() ของออปเจคชน0ด
Statement

โปรแกรม AddBookServlet จะใชว0ธการโหลด DataSource จาก JNDI ซ,งเราไม/จ.าเปนทจะตองโหลด
ท1กครงทมการเรยกใชโปรแกรม Servlet นแต/จะท.าการโหลดครงแรกทมการเรยกใช Servlet น ดงนนเราจะเขยน
sourcecode ส/วนนทเมธอด init() ดงน

private Connection conn;

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


33

}
}

5.4.3 เพ0มรายชอหนงสอใหม/ลงในฐานขอม#ล

เมอเชอมต/อฐานขอม#ลและไดออปเจคชน0ด Connection มาแลว เราสามารถทจะเรยกใชค.าสง SQL ได
ซ,งในทนคอค.าสง INSERT ซ,งจะมร#ปแบบของค.าสงดงน
INSERT INTO books VALUES(....)

โดยเราจะใชค/าจากพาราม0เตอร5ต/างๆทรบมา ดงนนถาขอม#ลทป%อนเขามาถ#กตองเราสามารถทจะเพ0มรายชอ
หนงสอใหม/ลงในฐานขอม#ลโดยใชค.าสงดงน
Statement stmt = conn.createStatement();

String sql = "INSERT INTO books VALUES('"+isbn+"','" + title +"','" +author +"',"+price
+")";
int numRow = stmt.executeUpdate(sql);

5.4.4 การเรยกเวบเพจ Thankyou.html

เมอขอม#ลไดถ#กเพ0มลงไปในฐานขอม#ลแลว โปรแกรม AddBookServlet จะท.าการเรยกเวบเพจ
Thankyou.html โดยการเรยกใช RequestDispatcher ดงน

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

โปรแกรม AddBookServlet.java จะม sourcecode ทงหมดดง Listing ท 5.3

Listing ท 5.3 โปรแกรม AddBookServlet.java

package controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.SQLException;
import java.sql.Statement;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;


34

public class AddBookServlet extends HttpServlet {

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

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

try {
float price = Float.parseFloat(priceStr);


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

}

} catch (SQLException ex) {
out.println("Error " + ex);
return;
}


out.close();
}



35

}

}

}

5.5 ขนตอนการพฒนาโปรแกรม AddBookServlet.java

เราสามารถทจะพฒนาโปรแกรม AddBookServlet.java ตามขนตอนดงน

ใต Category น ใหเราเลอก Servlet แลวกด Next
3. ก.าหนด Class Name: เปน AddBookServlet และก.าหนด Package เปน controller แลวกด Next
4. ก.าหนด URL Pattern(s): เปน /addBook.do แลวกด Finish
5. โปรแกรม NetBeans จะสรางไฟล5 AddBookServlet.java ไวภายใต Source Packages โดยจะอย#/ใน
Directory ชอ controller
6. ในหนา Editor ใหคล0;กขวาเลอก Insert Code... > Use Database ดงร#ปท 5.3

รปท 5.3 การเลอกคาสง Use Database

7. ในไดอะลอก Choose Database กดป16ม Add...
8. ในไดอะลอก Add Data Source Reference กดป16ม Add...
9. ในไดอะลอก Create Data Source ก.าหนด JNDI Name เปน jdbc/test และเลอก Database
Connection เปน jdbc:mysql//localhost:3306/test ดงร#ปท 5.4


36

รปท 5.4 การกาหนดค-า JNDI

10. กดป16ม OK โปรแกรมจะกลบไปแสดงไดอะลอก Add Data Source Reference ใหก.าหนด Reference
Name: เปน jdbc/test ดงร#ปท 5.5

รปท 5.5 การกาหนดค-า Reference Name

11. กดป16ม OK จะไดไดอะลอก Choose Database ดงร#ปท 5.6

รปท 5.6 หนาไดอะลอก Choose Database

12. กดป16ม OK โปรแกรม NetBeans จะเพ0ม context.xml ใหอตโนมต0 โดยสามารถด#ไดจากการ ขยายโหนด
WebBaseDB > Web Pages > META-INF [หมายเหต1 ในกรณทใช GlassFish Server ค.าสงนจะ
เขยนในไฟล5 sun-web.xml]
13. โปรแกรมจะเพ0ม sourcecode ใหดงน


37


14. ในหนาต/าง editor ใหแกไข sourcecode ของไฟล5 AddBookServlet.java ใหเปนไปตาม Listing ท
5.3
15. โปรแกรมจะมขอผ0ดพลาดอย#/เนองจากยงไม/ไดท.าการ import คลาสต/างๆ เราสามารถแกไขไดโดยคล0;ก
ขวาในหนาต/าง editor แลวเลอก Fix Imports หรอกด Ctrl+Shift+I โปรแกรมจะแสดงชอคลาสต/างๆ ท
ตอง Import มาใหเลอก ในทนจะตองเลอกคลาสใหถ#กตองดงร#ปท 5.7

รปท 5.7 การกาหนดคลาสทตอง import

16. ท.าการ Save โปรแกรมโดยการกด Ctrl+S
17. ตรวจสอบไฟล5 context.xml จะเปนดง Listing ท 5.4

Listing ท 5.4 ไฟล5 context.xml

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

5.6 ทดสอบโปรแกรม

1. ท.าการ Build และ Deploy โปรแกรม WebBaseDB
2. Run โปรแกรม WebBaseDB ทงนตองท.าการรน MySQL Database Server ก/อน
3. โปรแกรมจะแสดงหนา addBook.html ใหเราใส/ขอม#ล ลองทดลองใส/ขอม#ลดงร#ปท 5.8


38

รปท 5.8 ตวอย-างการป+อนขอมล Books

4. เมอกดป16ม Add โปรแกรมกจะใส/ขอม#ลลงใน Database และแสดงผลลพธ5ดงร#ปท 5.9

รปท 5.9 ผลลพธ!ทแสดงทาง Web Browser

5. เราสามารถทจะด#ขอม#ลทป%อนเขาไปได โดยไปทหนาต/าง Services ของโปรแกรม NetBeans แลวเลอก
ค.าสง View Data.. จาก Table ทชอ books ดงร#ปท 5.10

รปท 5.10 ขอมลทถกป+อนเขา Table ทชอ books


39

Exercise 6 โปรแกรมเวบเพอสาธ"ตขอบเขตของออปเจค

เนอหาทตองศกษากอน การเขยนโปรแกรม Servlet เพออ/านค/าพาราม0เตอร5

แบบฝกหดนจะเปนการพฒนาโปรแกรม Java Servlet เพออธ0บายขอบเขตการท.างานของออปเจคใน
โปรแกรมแบบเวบ (Object Scope) ทมอย#/สแบบคอ Page, Request, Session และ Web (Application) โดย
จะทดลองส/งค/าของออปเจคผ/านกนระหว/างโปรแกรม Servlet สองช1ด

6.1 การพฒนาโปรแกรมเพอสาธ(ตขอบเขตของ Object แบบ Request

ออปเจคทสรางข,นในโปรแกรม Java Servlet ในแต/โปรแกรมจะมขอบเขตการใชงาน (scope) อย#/เพยง
แค/โปรแกรมนนๆ (url นนๆ) ไม/สามารถทจะใชโปรแกรม Java Servlet หรอ JSP ตวอนเรยกใชออปเจคตวนน
ได การจะใหโปรแกรม Servlet หรอ JSP อนๆ เรยกออปเจคใดๆ ไดนน จะตองมการเขยน source code เพอส/ง
ผ/านค/าของออปเจคนนไปยงออปเจคอนๆ ทงนเราสามารถก.าหนดขอบเขตการใชงานเพ0มเต0มไดอก 3 แบบคอ
● Request ออปเจคสามารถถ#กเรยกใชเมอมการเรยกมาจากโปรแกรม Servlet/JSP อน

● Session ออปเจคจะเกบอย#/ใน Session ของ Web Browser ตราบเท/าทยงมการใชงานอย#/

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

Application เดยวกน

การส/งค/าของออปเจคจาก url หน,งมายง url อนท.าไดหลายว0ธ แบบฝกหดทผ/านมาเปนการแสดงใหเหนถ,ง
การส/งค/าพาราม0เตอร5ทอย#/ในฟอร5มของไฟล5 HTML ไปยงโปรแกรม Java Servlet ทสามารถเรยกใชไดโดย ค.าสง
request.getParameter()

นอกจากนเรายงสามารถทจะส/งออปเจคไปยง โปรแกรม Java Servlet หรอ JSP อนโดยการใชค.าสง
setAttribute() อาท0เช/นส/งค/าของตวแปร String ชอว/า name โดยจะเกบไวใน attribute ทชอ RequestName
และมร#ปแบบค.าสงดงน
String name = “Thanisa”;
request.setAttribute(“RequestName”, name);

ซ,งจะท.าให url ทท.าการเรยกถดไปสามารถเรยกใช attribute ทชอ RequestName และด,งค/าของตวแปร
name ออกมาได โดยใชค.าสง getAttribute() โดยมร#ปแบบดงน

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

ส/วนค.าสงทใชในการทจะ forward จากโปรแกรม Servlet ตวหน,งไปยง url อนจะเปนค.าสงทมร#ปแบบ


40

ดงน
RequestDispatcher obj = request.getRequestDispatcher("SecondServlet");

โดยท SecondServlet คอชอ url ทตองการ forward

ในขนตอนนจะเปนการพฒนาโปรแกรมเพอสาธ0ตการท.างานของขอบเขตการท.างานของ Object แบบ
request โดยการพฒนาโปรแกรม Servlet ข,นมาสองโปรแกรมคอ FirstServlet ทจะใชในการส/งออปเจคซ,งม
source code ตาม Listing ท 6.1 และ โปรแกรม SecondServlet ทจะใช/ในการอ/านค/าของออปเจคทส/งออกมา
แลวน.ามาแสดงผล ซ,งม source code ตาม Listing ท 6.2

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

package servlet;

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


public class FirstServlet extends HttpServlet {

try {
String name = "Thanisa";
request.setAttribute("RequestName", name);
RequestDispatcher obj = request.getRequestDispatcher("SecondServlet");
obj.forward(request, response);

} finally {
out.close();
}
}

}



41

}

}
// </editor-fold>
}

Listing ท 6.2 โปรแกรม SecondServlet.java

package servlet;

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


public class SecondServlet extends HttpServlet {

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

}

}

}
// </editor-fold>
}


42

6.1.1 ขนตอนการพฒนาโปรแกรมเพอสาธ0ตขอบเขตของ Object แบบ Request

เราสามารถทจะพฒนาโปรแกรม ตามขนตอนดงน

1. เลอกค.าสงสราง New Project จากเมน# เลอก Java Web แลวเลอก Web Application ก.าหนดชอโปร
เจคเปน ScopeDemo เลอก Server เปน Apache Tomcat 6.0.18 และ Java EE Version เปน Java
EE5 แลวกด Finish
2. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด ScopeDemo จากนนเลอกค.าสง New > Servlet
3. ก.าหนด Class Name: เปน FirstServlet.java และ Package เปน servlet แลวกด Finish
4. ในหนาต/าง Editor เขยน Source code ของ FirstServlet.java ดง Listing ท 6.1 แลวเลอกค.าสง Save
6. ก.าหนด Class Name: เปน SecondServlet.java และ Package เปน servlet แลวกด Finish
7. ในหนาต/าง Editor เขยน Source code ของ SecondServlet.java ดง Listing ท 6.2 แลวเลอกค.าสง
Save

6.1.2 ขนตอนการทดสอบโปรแกรมเพอสาธ0ตขอบเขตของ Object แบบ Request

เราสามารถทจะทดสอบโปรแกรม ตามขนตอนดงน

1. ท.าการ Build และ Deploy โปรเจค ScopeDemo
2. ท.าการ Run โปรเจค ScopeDemo
3. ในโปรแกรม Web Browser เลอก url ทชอ http://localhost:8080/ScopeDemo/FirstServlet
แลวสงเกต1ผลลพธ5
4. ทดลองรน url ทชอ http://localhost:8080/ScopeDemo/SecondServlet โดยตรง แลวสงเกตผลลพธ5
อกครงจะเหนว/า ค/าทแสดงเปน null ทงนเนองจากโปรแกรมไม/ไดมการส/ง request มาจาก FirstServlet

6.2 การพฒนาโปรแกรมเพอสาธ(ตขอบเขตของ Object แบบ Session

ขอบเขตการใชงานของออปเจคแบบ Request จะส/งผ/านค/าของออปเจคตาม request ของ url ทงนไม/
สามารถทจะใชงานไดโดยการเรยก url นนโดยไม/มการส/ง request มาดงแสดงในขนตอนทผ/านมา เราสามารถท
จะก.าหนดขอบเขตของการใชงานของออปเจค ใหใชงานผ/านใน session ของ Web Browser ได (ตราบเท/าท
Browser ยงใช session นนอย#) โดยการก.าหนด Attribute ลงในออปเจคชน0ด HttpSession ซ,งจะเปนออปเจคท
/
เกบขอม#ล session ของ Web Browser อาท0เช/นเกบค/าของตวแปร String ชอว/า name ไวใน attribute
ของ session ทชอ SessionName โดยมร#ปแบบค.าสงดงน
String name = “Thanisa”;


43

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

โปรแกรม Java Servlet อนๆสามารถทจะเรยกใช attribute ของ Session ทชอ SessionName และด,ง
ค/าของตวแปร name ออกมาได โดยใชค.าสง getAttribute() เพอเรยกค/าจาก Session โดยมร#ปแบบดงน
String name = (String) session.getAttribute(“SessionName”);

session โดยการพฒนาโปรแกรม Servlet ข,นมาสองโปรแกรมคอ FirstSessionServlet ทจะใชในการส/งออป
เจคซ,งม source code ตาม Listing ท 6.3 และ โปรแกรม SecondSessionServlet ทจะใช/ในการอ/านค/าของออป
เจคทส/งออกมาแลวน.ามาแสดงผล ซ,งม source code ตาม Listing ท 6.4

Listing ท 6.3 โปรแกรม FirstSessionServlet.java

package servlet;

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


public class FirstSessionServlet extends HttpServlet {

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

}



44

}

}
// </editor-fold>
}

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

package servlet;

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


public class SecondSessionServlet extends HttpServlet {

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

}

}

}
// </editor-fold>
}


45

6.2.1 ขนตอนการพฒนาโปรแกรมเพอสาธ0ตขอบเขตของ Object แบบ Session


2. ก.าหนด Class Name: เปน FirstSessionServlet.java และ Package เปน servlet แลวกด Finish
3. ในหนาต/าง Editor เขยน Source code ของ FirstSessionServlet.java ดง Listing ท 6.3 แลวเลอกค.า
สง Save
5. ก.าหนด Class Name: เปน SecondSessionServlet.java และ Package เปน servlet แลวกด Finish
6. ในหนาต/าง Editor เขยน Source code ของ SecondSessionServlet.java ดง Listing ท 6.4 แลวเลอก
ค.าสง Save

6.2.2 ขนตอนการทดสอบโปรแกรมเพอสาธ0ตขอบเขตของ Object แบบ Session


3. ในโปรแกรม Web Browser เลอก url ทชอ
http://localhost:8080/ScopeDemo/FirstSessionServlet
4. ทดลองรน url ทชอ http://localhost:8080/ScopeDemo/SecondSessionServlet แลวสงเกตผลลพธ5
5. ทดลองป@ด Web Browser แลวเป@ดข,นมาใหม/แลวทดลองรน url ทชอ
http://localhost:8080/ScopeDemo/SecondSessionServlet ใหม/แลวสงเกตผลลพธ5

6.3 การพฒนาโปรแกรมเพอสาธ(ตขอบเขตของ Object แบบ Application

เราสามารถทจะก.าหนดขอบเขตการใชงานของออปเจคใหเปนแบบ Application กล/าวคอสามารถใชกบ
โปรแกรม Java Servlet หรอ JSP ท1กโปรแกรมทอย#/ภายใน Web Application เดยวกนตราบใดท Web Server
ยง deploy โปรแกรม Web Application ดงกล/าวอย#/ ถ,งแมว/า Web Browser ของฝABง client จะป@ดไปแลวกตาม
การก.าหนดขอบเขตแบบ Application สามารถท.าไดโดยใชค.าสง setAttribute() กบออปเจคชน0ด
ServletContext ซ,งเปนออปเจคทเกบขอม#ลของ Web Application ซ,งในแต/ละ Web Application จะมออปเจ
คชน0ด ServletContext อย#/หน,งตว และสามารถเรยกมาไดโดยใชค.าสง getServletContext()

ตวอย/างค.าสงในการเกบออปเจคชน0ด String ทชอ name ไวใน attribute ทชอ AppName ของออปเจค


46

ชน0ด ServletContext จะมร#ปแบบค.าสงดงน
ServletContext context = getServletContext();
context.setAttribute("AppName", name);

โปรแกรม Java Servlet อนๆสามารถทจะเรยกใช attribute ของออปเจคชน0ด ServletContext ทชอ
AppName และด,งค/าของตวแปร name ออกมาได โดยใชค.าสง getAttribute() เพอเรยกค/าจากออปเจคชน0ด
ServletContext โดยมร#ปแบบดงน

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

application โดยการพฒนาโปรแกรม Servlet ข,นมาสองโปรแกรมคอ FirstAppServlet ทจะใชในการส/งออป
เจคซ,งม source code ตาม Listing ท 6.5 และ โปรแกรม SecondAppServlet ทจะใชในการอ/านค/าของออปเจค
ทส/งออกมาแลวน.ามาแสดงผล ซ,งม source code ตาม Listing ท 6.6

Listing ท 6.5 โปรแกรม FirstAppServlet.java

package servlet;

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


package servlet;

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


public class FirstAppServlet extends HttpServlet {

try {


47

context.setAttribute("AppName", name);
} finally {
out.close();
}
}

}

}

}
// </editor-fold>
}

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

package servlet;

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


public class SecondAppServlet extends HttpServlet {

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



48

}

}

}
// </editor-fold>
}

6.3.1 ขนตอนการพฒนาโปรแกรมเพอสาธ0ตขอบเขตของ Object แบบ Application


2. ก.าหนด Class Name: เปน FirstAppServlet.java และ Package เปน servlet แลวกด Finish
3. ในหนาต/าง Editor เขยน Source code ของ FirstAppServlet.java ดง Listing ท 6.5 แลวเลอกค.าสง
Save
5. ก.าหนด Class Name: เปน SecondAppServlet.java และ Package เปน servlet แลวกด Finish
6. ในหนาต/าง Editor เขยน Source code ของ SecondAppServlet.java ดง Listing ท 6.6 แลวเลอกค.า
สง Save

6.3.2 ขนตอนการทดสอบโปรแกรมเพอสาธ0ตขอบเขตของ Object แบบ Application


3. ในโปรแกรม Web Browser เลอก url ทชอ http://localhost:8080/ScopeDemo/FirstAppServlet
4. ทดลองรน url ทชอ http://localhost:8080/ScopeDemo/SecondAppServlet แลวสงเกตผลลพธ5
5. ทดลองป@ด Web Browser แลวเป@ดข,นมาใหม/แลวทดลองรน url ทชอ
http://localhost:8080/ScopeDemo/SecondAppServlet ใหม/แลวสงเกตผลลพธ5


49

Exercise 7 การพฒนาโปรแกรม Servlet โดยใชคลาสประเภท
Web Listener

เนอหาทตองศกษากอน การพฒนาโปรแกรมเวบเพอต0ดต/อกบฐานขอม#ล

แบบฝกหดนจะเปนการปรบปร1งโปรเจค Web Application ทชอ WebBaseDB ทใชในการเชอมโยง
ฐานขอม#ลและใส/ขอม#ลลง Table โดยเพ0มคลาสประเภท Web Listener เพอท.าการเชอมต/อกบฐานขอม#ลแทนว0ธ
การเด0มทเชอมต/อในเมธอด init()


1. พฒนาโปรแกรม Init.java
2. แกไขโปรแกรม AddBookServlet.java

7.1 การพฒนาโปรแกรม Init.java

โปรแกรม AddBookServlet ก.าหนดค.าสงในการเชอมต/อกบขอม#ลทอย#/ในเมธอด init() ซ,งเปนว0ธการท
ไม/เหมาะสมมากนก เนองจากโปรแกรม Servlet ท1กโปรแกรมทจะเชอมต/อกบฐานขอม#ลตองเขยนโปรแกรมใน
ส/วนของเมธอด init() ทซ.ากน แบบฝกหดนจะปรบปร1งโปรแกรมในส/วนนโดยการใช ContextListener

โปรแกรม Servlet จะม Listener อย#/สองชน0ดคอ ContextListener และ SessionListener โดยท
ContextListener จะถ#กเรยกเมอ Web Application เร0มตนการท.างานหรอส0นส1ดการท.างาน เราสามารถทจะ
เขยนโปรแกรมประเภท Servlet Listener ไดโดยมขนตอนดงน

1. พฒนาคลาสท implements Listener ทตองการอาท0เช/น ServletContextListener
2. เขยนเมธอดทตอง implements ใน Listener นนๆ
3. config ไฟล5 web.xml เพอเพ0มคลาสประเภท Listener

โปรแกรม Init.java จะเปนโปรแกรมทเปน ServletContextListener เพอเชอมต/อกบฐานขอม#ลเมอเร0ม
ตน แลวเกบออปเจค Connection ไวภายใน ServletContext โปรแกรมจะเขยนค.าสงเหล/านภายในเมธอด
contextInitialized() ซ,งจะถ#กเรยกเมอ Web Application เร0มตนการท.างาน

ขนตอนการพฒนาโปรแกรม Init.java เปนดงน



50

ใต Category น ใหเราเลอก Web Application Listener แลวกด Next
3. ก.าหนด Class Name เปน Init และ Package เปน listener แลวกด Finish ดงร#ปท 7.1

รปท 7.1 การสรางคลาสประเภท Web Listener

4. ในหนา Editor ใหคล0;กขวาเลอก Insert Code... > Use Database
5. ในไดอะลอก Choose Database กดป'<ม Add...
6. ในไดอะลอก Add Data Source Reference ใหก.าหนด Reference Name: เปน jdbc/test ดงร#ปท 7.2

รปท 7.2 การกาหนด Reference Name

7. โปรแกมจะปรากฏ sourcecode ดงนในไฟล5 Init.java


51

private DataSource getJdbcTest() throws NamingException {
Context c = new InitialContext();
return (DataSource) c.lookup("java:comp/env/jdbc/test");
}

8. ใหท.าการเพ0ม sourcecode ดงต/อไปนในเมธอด contextInitialized
conn = getJdbcTest().getConnection();
arg0.getServletContext().setAttribute("connection", conn);

9. จากนนใหท.าการ Fix Imports และ จะท.าให sourcecode ของไฟล5 Init.java ดงน
public void contextInitialized(ServletContextEvent arg0) {
try {
Logger.getLogger(Init.class.getName()).log(Level.SEVERE, null, ex);
} catch (NamingException ex) {
}
}

10. จากนนควรเพ0มเต0มค.าสงต/อไปนในเมธอด contextDestroyed

public void contextDestroyed(ServletContextEvent arg0) {
try {
conn.close();
}
}

เราจะได sourcecode ของไฟล5 Init.java ดง Listing ท 7.1

Listing ท 7.1 โปรแกรม Init.java

public class Init implements ServletContextListener {


public void contextInitialized(ServletContextEvent arg0) {
try {
} catch (NamingException ex) {


52

}
}

public void contextDestroyed(ServletContextEvent sce) {
try {
conn.close();
}
}

private DataSource getJdbcTest() throws NamingException {
Context c = new InitialContext();
return (DataSource) c.lookup("java:comp/env/jdbc/test");
}
}

7.2 การปรบปรงโปรแกรม AddBookServlet.java

โปรแกรม Init.java จะม.าหนาทในการเชอมต/อกบฐานขอม#ล ดงนนเราจ,งตองแกไขค.าสงการเชอมโยง
ฐานขอม#ลทอย#/ในไฟล5 AddBookServlet.java โดยมขนตอนดงน

1. ใหลบค.าสง

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

เราจะไดโปรแกรม AddBookServlet.java ใหม/ดง Listing ท 7.2

Lisitng ท 7.2 โปรแกรม AddBookServlet.java

....



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



53


try {
float price = Float.parseFloat(priceStr);


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

obj.forward(request, response);
}

return;
}


out.close();
}
....
}

7.3 ทดสอบโปรแกรม

2. Run โปรแกรม WebBaseDB ทงนตองท.าการรน MySQL Database Server ก/อน
6. โปรแกรมจะแสดงหนา addBook.html ใหเราใส/ขอม#ล :ซงเมอใส/ขอม#ลจะไดผลลพ5เช/นเดยวกบแบบ
ฝกหดก/อน


54

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

เนอหาทตองศกษากอน การเขยนโปรแกรม Servlet เพออ/านค/าพาราม0เตอร5

แบบฝกหดนจะเปนการพฒนาโปรแกรม Web Application เพออธ0บายการใช Servlet Filter ในการ
ตรวจสอบการ login เขาส#/ระบบ โดยโปรแกรม Java Servlet บางโปรแกรมทอย#/ใน Web Application จะถ#ก
Filter เรยกเพอตวสอบสถานะการ login ก/อนทจะสามารถใชโปรแกรมนนได

8.1 การพฒนาโปรแกรม Servlet Filter

โปรแกรม Servlet Filter เปนโปรแกรม Java ทก.าหนดข,นมาใน Web Application ซ,งจะดกการท.างาน
ของโปรแกรม Java Servlet ใดๆ แลวสามารถทจะแกไขค/าของออปเจคชน0ด request และ response ก/อนท
โปรแกรม Java Servlet นนจะถ#กเรยกใชต/อไป ตวอย/างของการพฒนาโปรแกรม Servlet Filter คอ

● การควบค1มการใชงาน Servlet หรอการท.า Authentication
● การบลอกการใชงาน Servlet หรอตรวจสอบการใชงาน Servlet
● การเปลยนแปลงขอม#ลของออปเจค request

โปรแกรม Servlet Filter จะเปน โปรแกรม Java ท implements อ0นเตอร5เฟสทชอ Filter และมเมธอด
หลกคอ init(), destroy() และ doFilter()

เราสามารถทจะก.าหนดให url ใดๆ ในโปรแกรม Web Application ถ#ก Filter จากโปรแกรม Servlet
Filter ใดๆ โดยการก.าหนดค/าใน web.xml อาท0เช/นค.าสง

<filter>
<filter-name>LoginFilter</filter-name>
<filter-class>LoginFilter</filter-class>
</filter>
<filter-mapping>
<url-pattern>/*</url-pattern>
</filter-mapping>

เปนการก.าหนดใหโปรแกรม url ท1กตวทอย#/ใน Web Application น ตองถ#กดกโดย Servlet Filter ทชอ
LoginFilter

แบบฝกหดนจะก.าหนดใหม web form ทชอ login.html ซ,งจะท.าการเรยกโปรแกรม LoginServlet ซ,ง
จะตรวจสอบค/า username และ password ทป%อนเขามา หากถ#กตองกจะก.าหนดใหค/าของออปเจคทชอ
loginFlag เปน true แลวก.าหนดใหขอบเขตของออปเจค loginFlag เปนแบบ Session โดยการ setAttribute


55

ใหกบออปเจคชน0ด HttpSession

โปรแกรม Web Application นยงม Servlet Filter ทชอ LoginFilter ซ,งจะท.าหนาทอ/านค/าของออป
เจค LoginFlag ทอย#/ในออปเจคชน0ด HttpSession ถาหากไม/พบหรอมค/าเปน false โปรแกรมจะระบ1 HTTP
Error 401 (This request requires HTTP authentication . )

ส1ดทายจะมการเขยนโปรแกรม Java Servlet ทชอ ShowServlet เพอแสดงขอความว/า HelloWorld
เพอแสดงใหเหนว/าโปรแกรมจะถ#กดกโดย LoginFilter

8.2 การเข%ยนหนา Login

หนา Login จะมโปรแกรมสองโปรแกรมคอ login.html ซ,งจะเปน web page ทมลกษณะดงร#ป และม
source code ตาม Listing ท 8.1 นอกจากจะมโปรแกรม LoginServlet ซ,งจะท.าหนาทในการอ/านพาราม0เตอร5ท
ชอ username และ password พรอมทงตรวจสอบว/ามค/าเปน thana และ secret หรอไม/ หากใช/กจะก.าหนดค/า
ตวแปร loginFlag เปน true แลวเกบลงในออปเจคชน0ด HttpSession โปรแกรมนจะม source code ดง Listing
ท 8.2

รปท 8.1 เวบหนา Login

Listing ท 8.1 โปรแกรม login.html

<html>
<head>
<title>Login Page</title>
</head>
<body>
<form action="LoginServlet" method="POST">
UserName: <input name="username" /> <br>
Password: <input type="password" name="password" /> <br>
<input type="submit" value="Login" />
</form>
</body>
</html>


56

Listing ท 8.2 โปรแกรม LoginServlet.java

package controller;

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


public class LoginServlet extends HttpServlet {

try {
boolean loginFlag = false;
String username = request.getParameter("username");
String password = request.getParameter("password");
if (username.equals("thana") && password.equals("secret")) {
loginFlag = true;
}
session.setAttribute("loginFlag", loginFlag);

response.sendRedirect("show.do");

} finally {
out.close();
}
}

}

}

}
}

8.2.1 ขนตอนการพฒนาโปรแกรม

เราสามารถทจะพฒนาโปรแกรมนตามขนตอนดงน


57

1. เลอกค.าสงสราง New Project จากเมน# เลอก Java Web แลวเลอก Web Application ก.าหนดชอ โปร
เจคเปน FilterDemo เลอก Server เปน Apache Tomcat 6.0.18 และ Java EE Version เปน Java
EE5 แลวกด Finish
2. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด FilterDemo จากนนเลอกค.าสง New > HTML..
3. ก.าหนด HTML File Name: เปน login แลวกด Finish
4. ในหนาต/าง Editor เขยน Source code ของ login.html ดง Listing ท 8.1 แลวเลอกค.าสง Save
5. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด FilterDemo จากนนเลอกค.าสง New > Servlet...
6. ก.าหนด Class Name: เปน LoginServlet.java และ Package เปน controller แลวกด Finish
7. ในหนาต/าง Editor เขยน Source code ของ LoginServlet.java ดง Listing ท 8.2 แลวเลอกค.าสง
Save

8.3 การเข%ยน Servlet Filter

โปรแกรม LoginFilter จะท.าหนาทในการเรยก attribute ทชอ loginFlag และหากไม/พบหรอมค/าเปน
false โปรแกรมจะระบ1 HTTP Error 401 โปรแกรม LoginFilter จะม source code หลกอย#/ท เมธอด
doFilter() ดง Listing ท 8.3

นอกจากนกรณนจะก.าหนดให url เฉพาะชอ *.do เท/านนทจะเรยกใช Filter ทชอ LoginFilter ซ,ง
จะตองมการแกไข web.xml ดงน
<filter>
<filter-class>filter.LoginFilter</filter-class>
</filter>
<filter-mapping>
<url-pattern>*.do</url-pattern>
</filter-mapping>

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

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

if (debug) {
log("LoginFilter:doFilter()");
}

doBeforeProcessing(request, response);


58

HttpServletRequest req = (HttpServletRequest) request;
HttpSession session = req.getSession();
Boolean flag = (Boolean) session.getAttribute("loginFlag");
boolean loginFlag;
if (flag == null) {
loginFlag = false;
} else {
loginFlag = flag;
}
if (!loginFlag) {
HttpServletResponse res = (HttpServletResponse) response;
res.sendError(HttpServletResponse.SC_UNAUTHORIZED);
return;
}

Throwable problem = null;

try {
chain.doFilter(request, response);
} catch (Throwable t) {

problem = t;
t.printStackTrace();
}

doAfterProcessing(request, response);

if (problem != null) {
if (problem instanceof ServletException) {
throw (ServletException) problem;
}
if (problem instanceof IOException) {
throw (IOException) problem;
}
sendProcessingError(problem, response);
}
}



1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด FilterDemo จากนนเลอกค.าสง New > Other..
ใต Category น ใหเราเลอก Filter แลวกด Next
3. ก.าหนด Class Name: เปน LoginFilter และ Package เปน filter แลวกด Next
4. ในหนาถดไป ใหใชค/าทก.าหนดไว ดงร#ปท 8.2 แลวกด Finish


59

รปท 8.2 การกาหนดค-าของ Filter

5. โปรแกรมจะท.าการแกไขไฟล5 web.xml เพอระบ1 Filter ใหม/ทสรางข,น ซ,งเราสามารถทจะด#การแกไขน
ไดโดยการขยายโหนด FilterDemo > Web Pages >WEB-INF แลวเลอกไฟล5 web.xml จะเหน
หนาต/างดงร#ปท 8.3

รปท 8.3 หนาต-างไฟล! web.xml

6. ในส/วนของ Filter Mappings ใหเลอก LoginFilter แลวกด Edit เพอแกไข Applies To เปน *.do ดง
ร#ปท 8.4

รปท 8.4 การกาหนดค-า Filter Mapping


60

7. ในหนาต/าง Editor เขยน Source code ของเมธอด doFilter() ของไฟล5 LoginFilter.java ดง Listing
ท 8.3 แลวเลอกค.าสง Save

8.4 การเข%ยนโปรแกรม ShowServlet

โปรแกรม ShowServlet จะท.าหนาทเพอแสดงขอความว/า Hello World และม source code ของเมธอด
processRequest() ดง Listing ท 8.4

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

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



1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด FilterDemo จากนนเลอกค.าสง New > Servlet..
2. ก.าหนด Class Name: เปน ShowServlet.java และ Package เปน view แลวกด Next
3. ก.าหนด URL Pattern(s) เปน /show.do ดงร#ปท 8.5 แลวกด Finish


61

รปท 8.5 การกาหนดค-า URL pattern

4. ในหนาต/าง Editor เขยน Source code ของ ShowServlet.java ดง Listing ท 8.4 แลวเลอกค.าสง Save

8.5 ขนตอนการทดสอบโปรแกรม


1. ท.าการ Build และ Deploy โปรเจค FilterDemo
2. ท.าการ Run โปรเจค FilterDemo
3. ทดลองรน url ทชอ http://localhost:8080/FilterDemo/show.do แลวสงเกตผลลพธ5จะเหนว/าแสดงขอ
ผ0ดพลาด HTTP 401
4. ทดลองรน url ทชอ http://localhost:8080/FilterDemo/login.html แลวป%อน username เปน thana
และ password เปน secret


62

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


แบบฝกหดนจะเปนการพฒนาโปรแกรม JSP เพอแสดงขอม#ลจากฐานขอม#ล ออกทางโปรแกรม Web
Browser โดยจะเปนการพฒนาโปรเจค WebbaseDB เพอเต0ม

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

โปรแกรม hello.jsp เปนโปรแกรม JSP เพอแสดงขอความและวนเวลาของ Web Server โปรแกรมนจะ
เปนการแสดงผลแบบ dynamic content จ,งตองพฒนาโดยใชภาษา JSP โดยมขนตอนการพฒนาโปรแกรมดงน

1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด WebBaseDB จากนนเลอกค.าสง New > Other..
2. ในไดอะลอก New File ใหเลอก Categories ทชอ Web ซ,งโปรแกรมกจะแสดง File Types ต/างๆภาย
ใต Category น ใหเราเลอก JSP แลวกด Next
3. ก.าหนด JSP File Name: เปน hello แลวกด Finish
4. ในหนาต/าง editor ใหแกไข sourcecode ของไฟล5 hello.jsp ใหเปนไปตาม Listing ท 9.1
E
6. ในหนาต/าง Projects เลอกไฟล5 hello.jsp แลวเลอก Run โปรแกรม
7. โปรแกรมจะแสดงผลดงร#ปท 1

Listing ท 9.1 โปรแกรม hello.jsp

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<html>
<head>
<title>Hello JSP</title>
</head>
<body>

<h1>My First JSP</h1>

Hello : Current time is : <%= new java.util.Date() %>

</body>
</html>


63

รปท 9.1 ผลลพธ!ของ hello.jsp

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

โปรแกรม viewBook.jsp เปนโปรแกรม JSP เพอแสดงขอม#ลของ Table ทชอ books โปรแกรมนจะ
เรยกใช standard tags ทก.าหนดไวใน JSTL 1.1 ซ,งท.าใหผ#เขยนโปรแกรม JSP ไม/ตองเขยน source code ภาษา
Java โดยมค.าสงต/างๆ ทส.าคญดงน

9.2.1 การก.าหนด Tag Library

โปรแกรม viewBook.jsp จะเรยกใช JSTL 1.0 เราจ,งจ.าเปนตองมค.าสง Taglib เพอทจะประกาศ
Library ดงน

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>

9.2.2 การก.าหนด Datasource

โปรแกรม JSP นจะท.าการเชอมต/อกบฐานขอม#ล โดยจะตองใช datasource ของโปรเจค โดยสามารถ
ก.าหนดไดสองว0ธ

● กรณทม datasource ซ,งเชอมต/อฐานขอม#ลทตองการอย#/แลว กสามารถใชอนเด0มไดเลย ตวอย/างเช/น
jdbc/test โดยไม/จ.าเปนตองสราง dataSource ข,นใหม/อก
● กรณทยงไม/ม datasource ใหใชค.าสง setDataSource เปน Tag เพอใหเราสามารถก.าหนดการเชอมต/อ
กบฐานขอม#ล และก.าหนดค/าไวในตวแปรตามชอทก.าหนด


64

ถ,งแมว/าโปรเจค WebBaseDB จะม datasource อย#/แลว แต/แบบฝกหดนจะก.าหนด datasource ข,นมา
ใหม/อกหน,งช1ด ก.าหนดเปนตวแปรทชอ newdatasource โดยจะก.าหนดค.าสงเปน
<sql:setDataSource var="newdatasource" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql:///test" user="root" password="root" />

เพอเปนการเชอมต/อฐานขอม#ลทอย#/ท url ทชอ jdbc:mysql:///test

9.2.3 การใชค.าสง sql:query

ค.าสง sql:query เปนค.าสงทจะเรยกด#ขอม#ลของฐานขอม#ลทเชอมต/อใน datasource ทเปน jdbc/test
หรอตวแปร newdatasource ในโปรแกรม viewBook.jsp เราจะท.าการเรยกใชค.าสง SQL คอ select *
from books โดยใชค.าสง sql:query ดงน

<sql:query var="db" dataSource="/jdbc/test">
SELECT * FROM books
</sql:query>

หรอ
<sql:query var="db" dataSource="${newdatasource}">
SELECT * FROM books
</sql:query>

9.2.4 การใชค.าสง c:forEach เพอแสดงผล

การแสดงค/าของผลลพธ5ทไดจากการ Query ฐานขอม#ล สามารถท.าได การแจงขอม#ลทละแถวโดยใชค.าสง
c:forEach โดยโปรแกรมนจะแสดงขอม#ลชอหนงสอ และชอผ#แต/ง โดยมค.าสงดงน

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

ส.าหรบขนตอนการพฒนาโปรแกรมน มดงน

3. ก.าหนด JSP File Name: เปน viewBook แลวกด Finish
4. ขยายโหนด WebBaseDB คล0;กขวาทโหนด Libraries เลอกค.าสง Add Libraries..


65

5. ในไดอะลอก Add Library เลอก JSTL1.1 แลวกดป16ม Add Library ดงร#ปท 9.2

รปท 9.2 การเพม Library ในโปรเจค

6. ในหนาต/าง editor ใหแกไข sourcecode ของไฟล5 viewBook.jsp ใหเปนไปตาม Listing ท 9.2
8. ในหนาต/าง Projects เลอกไฟล5 viewBook.jsp แลวเลอก Run โปรแกรม
9. ท Web Browser เปลยน URL เปน http://localhost:8080/WebBaseDB/viewBook.jsp จะได
ผลลพธ5ดงตวอย/างในร#ปท 9.3

รปท 9.3 ผลลพธ!ของ viewBook.jsp

Listing ท 9.2 โปรแกรม viewBook.jsp



66


<html>
<head>
<title>JSP Page</title>
</head>
<body>

<h1>JSP Page</h1>

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

<sql:query var="db" dataSource="${newdatasource}">
SELECT * FROM books
</sql:query>

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

</body>
</html>


67

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

เนอหาทตองศกษากอน การพฒนาโปรแกรมเวบเพอต0ดต/อกบฐานขอม#ล และ
การพฒนาโปรแกรมเวบเพอต0ดต/อกบฐานขอม#ล

แบบฝกหดนจะเปนการพฒนาโปรแกรม JSP เพอสราง Web Form ใหผ#ใชเลอกรายการหนงสอต/างๆ ทม
อย#/ใน table ทชอ books จากนนจะแสดงรายการทผ#ใชเลอกออกมาทางเวบเพจ

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

โปรแกรม selectBooks.jsp เปนโปรแกรม JSP ทเขยนเพอแสดงรายการหนงสอทมอย#/ใน table ทชอ
books ออกมาแสดงในร#ปแบบของ Web Form เพอใหผ#ใชเลอกรายการหนงสอและจ.านวนดงร#ปท 10.1 ทงน
Web Form นจะเรยก url ทชอ processSelection เมอมการกดป16ม Select โปรแกรมนจะเรยกใช SQL tags ของ
JSTL เพอแสดงรายการขอม#ลรายชอหนงสอ โดยม source code ดงแสดงใน Listing ท 10.1 และมขนตอนการ
พฒนาโปรแกรมดงน

1) เลอกเมน# File > New Project..
2) ในไดอะลอก New Project ใหเลอก Categories เปน Java Web และเลอก Projects เปน Web
3) ก.าหนด Project Name: เปน BookOnline แลวเลอก Project Location: เปน Director ทเราตองการจะ
เกบไฟล5ไว จากนนเลอก Server เปน Apache Tomcat 6.0.18 แลวกด Finish
4) เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด BookOnline จากนนเลอกค.าสง New > Other...
5) ในไดอะลอก New File ใหเลอก Categories ทชอ Web ซ,งโปรแกรมกจะแสดง File Types ต/างๆ ภาย
6) ก.าหนด JSP File Name: เปน selectBooks แลวกด Finish
7) ในหนาต/าง editor ใหแกไข source code ของไฟล5 selectBooks.jsp ใหเปนไปตาม Listing ท 10.1
8) กดป16ม Save


68

รปท 10.1 ตวอย-างผลลพธ!ของโปรแกรม selectBooks.jsp

Listing ท 10.1 โปรแกรม selectBooks.jsp


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JSP Page</title>
</head>
<body>

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

<sql:query var="rs" dataSource="${ds}">
select * from books
</sql:query>

<h1>Select Books</h1>
<form action="ProcessSelection" method="POST">
<table border="1">
<thead>
<tr>
<th></th>
<th> Title </th>


69

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

10.2 การพฒนาโปรแกรม 1Book.java

โปรแกรม Book.java เปนคลาสทม attribute ทสอดคลองกบ table ทชอ books โดยม source code ดง
Listing ท 10.2 และมขนตอนการพฒนาดงน

1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด BookOnline จากนนเลอกค.าสง New > Java Class..
2. ก.าหนด Class Name: เปน Book.java และ Package เปน model แลวกด Next
3. เขยน Source code ของไฟล5ดงน เพ0ม attribute ภายในคลาส BookActionForm ดงน
String isbn;
String title;
String author;
double price;
4. ท.าการ encapsulate attribute (ก.าหนด attribute ใหเปน private และ สรางเมธอด getter และ setter)
โดยการคล0;กขวาภายในหนาต/าง editor ของ source code แลวเลอก Refactor > Encapsulate Field..
5. กดป16ม Refactor แลวกดป16ม Save

Listing ท 10.2 โปรแกรม Book.java

package model;

public class Book {
private String isbn;
private String author;
private String title;
private double price;


70

public String getIsbn() {
return isbn;
}

public void setIsbn(String isbn) {
this.isbn = isbn;
}

public String getAuthor() {
return author;
}

public void setAuthor(String author) {
this.author = author;
}

public String getTitle() {
return title;
}

public void setTitle(String title) {
this.title = title;
}

public double getPrice() {
return price;
}

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

}

10.3 การพฒนาโปรแกรม 1Cart.java

โปรแกรม Cart.java เปนคลาสทท.าหนาทคลายกบ shopping cart เพอเกบออปเจคชน0ด Book ตาม
รายการหนงสอทผ#ใชเลอก โดยอางอ0งจากหมายเลข isbn ซ,งโปรแกรมจะท.าการคนรายชอหนงสอจาก table ทชอ
books หมายเลข isbn ทอางอ0ง แลวจะแปลงเปนออปเจคชน0ด books ก/อนจะใส/ลงใน cart โปรแกรมนจะม
source code ดง Listing ท 10.3 และมขนตอนการพฒนาดงน

1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด BookOnline จากนนเลอกค.าสง New > Java Class..
2. ก.าหนด Class Name: เปน Cart.java และ Package เปน model แลวกด Next
3. ในหนาต/าง editor ใหแกไข source code ของไฟล5 Cart.java ใหเปนไปตาม Listing ท 10.3
4. กดป16ม Save


71

Listing ท 10.3 โปรแกรม Cart.java

package model;

import java.sql.ResultSet;
import java.util.LinkedList;
import java.util.List;

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

public void addItem(String isbn) {
try {
String sql = "SELECT * from books where isbn='" + isbn + "'";
ResultSet rs = stmt.executeQuery(sql);
while (rs.next()) {
Book bk = new Book();
bk.setIsbn(isbn);
bk.setAuthor(rs.getString("author"));
bk.setTitle(rs.getString("title"));
bk.setPrice(rs.getFloat("price"));
books.add(bk);
}
}catch (SQLException ex) {
ex.printStackTrace();
}
}

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

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

public void removeItem(String isbn) {
books.remove(isbn);
}

}

10.4 การพฒนาโปรแกรม ProcessSelection.java

โปรแกรม ProcessSelection.java เปนโปรแกรม Java Servlet ทท.าหนาทอ/านค/าพาราม0เตอร5ทชอ isbn
ซ,งส/งมาจากหนา Web Form ของโปรแกรม selectBooks.java โดยใชค.าสง getParameterValues ดงน

72

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

จากนนจะท.าการเรยก session เพอเรยก attribute ทชอ cart ออกมาโดยใชค.าสงดงน
HttpSession session = request.getSession(true);
Cart cart = (Cart) session.getAttribute("cart");

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

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

เมอส0นส1ดการท.างานโปรแกรมกจะไปเรยก url ทชอ view.cart ต/อไป โดยใชค.าสงดงน
RequestDispatcher pg = request.getRequestDispatcher("viewCart.jsp");
pg.forward(request, response)

ส.าหรบโปรแกรมนจะม source code ของเมธอด processRequest ดง Listing ท 10.4 และจะมขนตอน
ดงการพฒนาโปรแกรมดงน

1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด BookOnline จากนนเลอกค.าสง New > Servlet..
2. ก.าหนด Class Name: เปน ProcessSelection.java และ Package เปน controller แลวกด Next
3. ก.าหนด URL Pattern(s) เปน /ProcessSelection ดงร#ป แลวกด Finish
4. ในหนาต/าง Editor เขยน Source code ของ ProcessSelection.java ดง Listing ท 10.4 แลวเลอกค.า
สง Save

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



73

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

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

out.close();
}

10.5 การพฒนาโปรแกรม Init.java

โปรแกรม Init.java เปนโปรแกรมประเภท ServletContextListener เพอเชอมต/อกบฐานขอม#ลเมอเร0ม
ตน แลวเกบออปเจค connection ไวภายใน ServletContext โดยมขนตอนการพฒนาเช/นเดยวกบการพฒนา
โปรแกรม Init.java ในแบบฝกหดการพฒนาโปรแกรม Servlet โดยใชคลาสประเภท Listener และจะตองมการ
แกไขไฟล5 context.xml และ web.xml ดงแบบฝกหดดงกล/าว

10.6 การพฒนาโปรแกรม viewCart.jsp

โปรแกรม viewCart.jsp เปนโปรแกรม JSP ทเขยนเพอแสดงรายการหนงสอทผ#ใชเลอก และเกบใน
shopping cart ออกมาแสดง โปรแกรมนจะใช Expression Language เพอแสดงขอม#ลใน session ดง Listing
ท 10.5 และมขนตอนการพฒนาดงน

1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด BookOnline จากนนเลอกค.าสง New > JSP
2. ก.าหนด JSP File Name: เปน viewCart แลวกด Finish
3. ในหนาต/าง editor ใหแกไข source code ของไฟล5 viewCart.jsp ใหเปนไปตาม Listing ท 10.5

Listing ท 10.5 โปรแกรม viewCart.jsp



74

<html>
<head>
<title>Cart</title>
</head>
<body>
<h1>Selected Books in Cart</h1>
<c:forEach var="book" items="${sessionScope.cart.books}">
${book.title} <br>
</c:forEach>

</body>
</html>

10.7 ขนตอนการทดสอบโปรแกรม


1. ท.าการ Build และ Deploy โปรเจค BookOnline
2. ท.าการ Run โปรเจค BookOnline
3. ทดลองรน url ทชอ http://localhost:8080/BookOnline/selectBooks.jsp แลวทดลองเลอกรายการ
หนงสอ แลวกดป16ม Select
4. โปรแกรมจะเรยก url ทชอ http://localhost:8080/BookOnline/processSelection เพอแสดงรายการ
ใน Cart ดงร#ปท 10.2
5. ทดลองกลบไปเลอกรายการหนงสอเพ0มเต0ม หรอเรยก url ทชอ
http://localhost:8080/BookOnline/viewCart.jsp โดยตรงแลวสงเกตผลลพธ5

รปท 10.2 การแสดงขอมลใน Cart


75

Exercise 11 การสราง Custom Tags ส%าหรบโปรแกรม JSP

เนอหาทตองศกษากอน

แบบฝกหดนจะเปนการพฒนาโปรแกรม JSP เพอสราง custom tag โดยจะเร0มแสดงการพฒนาโปรแกรม
ตงแต/การเขยน JSP โดยไม/ใช custom tags แลวสราง tag โดยใช Tag Handler และขนตอนส1ดทายจะเปนการ
สราง tag โดยใช Tag File โดยโปรแกรม JSP ทเขยนจะเปนการพ0มพ5ขอความว/า Hello xxxx จ.านวนส0บครง
โดยท xxxx คอชอทส/งมาทางพาราม0เตอร5ทชอ name

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

โปรแกรม hello.jsp เปนโปรแกรม JSP ทเขยนโดยใช scriptlet เรยกค.าสงภาษาจาวา โดยจะมค.าสงใน
การอ/านพาราม0เตอร5ของออปเจค request ทชอ name แลวจะพ0มพ5ขอความ Hello xxxx จ.านวนส0บครง โดย
โปรแกรมนจะม sourcecode ดง Listing ท 11.1 และมขนตอนการพฒนาโปรแกรมดงน

3. ก.าหนด Project Name: เปน JSPDemo แลวเลอก Project Location: เปน Director ทเราตองการจะ
เกบไฟล5ไว จากนนเลอก Server เปน Apache Tomcat 6.0.18 แลวกด Finish
4. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด JSPDemo จากนนเลอกค.าสง New > Other...
6. ก.าหนด JSP File Name: เปน hello แลวกด Finish
7. ในหนาต/าง editor ใหแกไข source code ของไฟล5 hello.jsp ใหเปนไปตาม Listing ท 11.1
8. ท.าการ Build และ Deploy โปรแกรม JSPDemo
9. ในหนาต/าง Projects เลอกไฟล5 hello.jsp แลวเลอก Run โปรแกรมโดยใหส/งผ/านพาราม0เตอร5ทาง URL
เช/น http://localhost:8080/JSPDemo/hello.jsp?name=Thanisa เราจะไดผลการรนดงร#ปท 11.1


76

รปท 11.1 ผลลพธ!ของโปรแกรม hello.jsp

Listing ท 11.1 โปรแกรม hello.jsp


<html>
<head>
<title>JSP Demo</title>
</head>
<body>

<h1>JSP Demo</h1>

<% String name = request.getParameter("name"); %>
<% for (int i = 0; i < 10; i++) { %>
Hello <%= name %> <br>
<% } %>

</body>
</html>


77

11.2 การพฒนาโปรแกรม helloTag.jsp

โปรแกรม helloTag.jsp เปนโปรแกรม JSP ทท.างานแบบเดยวกบโปรแกรม hello.jsp แต/การพฒนา
โปรแกรมนจะเขยนโดยการสราง custom tag ทชอ nameTag การสราง custom Tag จะตองมการพฒนาโปรแก
รมหลายๆ ส/วนดงน

11.2.1 สราง Tag Library Descriptor

ไฟล5นจะใชเกบ รายชอ Tag ต/างๆ ทมอย#/เพอสามารถน.า tag ต/างๆ มาใชในโปรแกรม JSP โดยใชค.าสง
<%@taglib ...%> การสราง Tag Library Descriptor จะมขนตอนดงน

ใต Category น ใหเราเลอก Tag Library Descriptor แลวกด Next
3. ก.าหนด TLD Name: เปน MyTags และค/า Folder เปน WEB-INFtlds ส/วนค/าอนๆ ใหเปนตามทตง
ไวดงร#ปท 11.2 แลวกด Finish

รปท 11.2 การก#าหนด Tag Library Descriptor

4. หนาต/าง Editor จะแสดงไฟล5ทชอ MyTags.tld ทอย#/ในโฟลเดอร5 Web PagesWEB-INFtlds


78

11.2.2 สรางไฟล5 Tag Handler

ไฟล5 Tag Handler จะเปนโปรแกรมจาวาทพฒนาข,นเพอระบ1ว/า เมอเรยกใช tag แลวจะตองท.าค.าสง
อย/างไร ในทนจะก.าหนดชอ Tag เปน NameTag และโปรแกรมจาวาเปน NameTagHandler โดยโปรแกรมจะ
ท.าการอ/านค/าพาราม0เตอร5 name และพ0มพ5ขอความ Hello xxxx จ.านวนส0บครง การสรางไฟล5 Tag Handler จะม

ใต Category น ใหเราเลอก Tag Handler แลวกด Next
3. ก.าหนด Class Name: เปน NameTagHandler ค/า Package เปน tags ส/วนค/าอนๆ ใหเปนตามทตงไว
ดงร#ปท 11.3 แลวกด Next

รปท 11.3 การก#าหนดคา Tag Handler

4. กดป16ม Browse เลอก TLD File: เปน MyTags.tld
5. กดป16ม New เพอเพ0ม Attribute
6. ในไดอะลอก Add New Attribute ก.าหนด Attribute Name: เปน name ค/า Attribute Type เปน
java.lang.String และเลอก required Attribute แลวกด Next
7. เราจะไดไดอะลอก New File ดงร#ปท 11.4 แลวกด Finish
8. หนาต/าง Editor จะแสดงไฟล5 NameTagHandler.java ใหเขยน source code ดง Listing ท 11.2


79

รปท 11.4 การกาหนดขอมล TLD ของไฟล! NameTagHandler

Listing ท 11.2 โปรแกรม NameTagHandler.java

package tags;

import javax.servlet.jsp.tagext.*;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.JspException;

public class NameTagHandler extends SimpleTagSupport {

/**
* Initialization of name property.
*/
private java.lang.String name;

/**Called by the container to invoke this tag.
* The implementation of this method is provided by the tag library developer,
* and handles all tag processing, body iteration, etc.
*/
public void doTag() throws JspException {

JspWriter out=getJspContext().getOut();

try {

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

for (int i = 0; i < 10; i++) {
out.println("Hello " + name + "<br>");


80

}

} catch (java.io.IOException ex) {
throw new JspException(ex.getMessage());
}

}

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

11.2.3 เขยนโปรแกรม helloTag.jsp

โปรแกรม helloTag.jsp จะเรยกใช Tag ทชอ NameTag โดยจะม source code ดง Listing ท 3 การ
สรางโปรแกรม helloTag.jsp จะมขนตอนดงน

3. ก.าหนด JSP File Name: เปน helloTag แลวกด Finish
4. ในหนาต/าง editor ใหแกไข source code ของไฟล5 helloTag.jsp ใหเปนไปตาม Listing ท 11.3
5. ท.าการ run โปรแกรม จะไดผลลพธ5เช/นเดยวกบโปรแกรม hello.jsp

Listing ท 11.3 โปรแกรม helloTag.jsp

<%@taglib uri="/WEB-INF/tlds/MyTags" prefix="myTags" %>

<html>
<head>
</head>
<body>
<h1>JSP Demo</h1>

<myTags:NameTagHandler name="Thanisa" />

</body>
</html>


81

11.3 การพฒนาโปรแกรม helloJSTL.jsp

โปรแกรม helloJSTL.jsp เปนโปรแกรม JSP ทท.างานเช/นเดยวกบโปรแกรมทผ/านมาแต/จะท.าการเรยก
ใช JSP Standard Tag Library ในการพ0มพ5ขอความ Hello xxx ส0บครง แทนการเขยนค.าสง scriptlet โดย
โปรแกรมนจะม source code ดง Listing ท 11.4 และจะมขนตอนการพฒนาโปรแกรมดงน

3. ก.าหนด JSP File Name: เปน helloJSTL แลวกด Finish
4. ขยายโหนด JSP Demo แลวเลอกโหนด Libraries คล0;กขวาเลอก Add Library
5. ในไดอะลอก Add Library เลอกไฟล5 JSTL 1.1 แลวกดป16ม Add Library
6. ในหนาต/าง editor ใหแกไข source code ของไฟล5 helloJSTL.jsp ใหเปนไปตาม Listing ท 11.4
7. ท.าการ run โปรแกรม ดยก.าหนด URL เปน http://localhost:8080/JSPDemo/helloJSTL.jsp?
name=Thanisa จะไดผลลพธ5เช/นเดยวกบโปรแกรม hello.jsp

Listing ท 11.4 โปรแกรม helloJSTL.jsp


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

</body>
</html>

11.4 การพฒนาโปรแกรม helloTagFile.jsp

JSP 2.0 อน1ญาตใหเราสราง custom tag โดยการเขยนไฟล5 html หรอ JSP แทนทจะเขยนโปรแกรม
ภาษาจาวา ซ,งท.าใหง/ายต/อการพฒนา ในทนเราจะพฒนาโปรแกรม helloTagFile.jsp ซ,งจะท.าการเรยกใช
custom tag ทชอ nameTagFile ทเปน tag file ซ,งเปนโปรแกรม JSP โดยมขนตอนการพฒนาดงน


82

11.4.1 สราง Tag File

ไฟล5นจะท.าหนานเปนตวจดการ Tag โดยเขยนเปนโปรแกรม JSP และมขนตอนการพฒนาดงน

ใต Category น ใหเราเลอก Tag File แลวกด Next
3. ก.าหนด Tag File Name: เปน NameTagFile
4. เลอก Add Tag File to Tag Library Descriptor แลวเลอกไฟล5 MyTags.tld ดงร#ปท 11.5 แลวกด
Finish

รปท 11.5 การก#าหนดคา Tag File

5. หนาต/าง Editor จะแสดงไฟล5ทชอ NameTagFile.tag ทอย#/ในโฟลเดอร5 Web Pages.WEB-INF.tags
6. เขยน source code ดง Listing ท 11.5

Listing ท 11.5 โปรแกรม NameTagFile.tag

<%@tag description="Tag Name" pageEncoding="UTF-8"%>

<c:forEach var="i" begin="1" end="10">
Hello ${param.name} <br>
</c:forEach>


83

11.4.2 เขยนโปรแกรม helloTagFile.jsp

โปรแกรม helloTagFile.jsp จะเรยกใช Tag ทชอ NameTagFile โดยจะม source code ดง Listing
ท การสรางโปรแกรม helloTagFile.jsp จะมขนตอนดงน

3. ก.าหนด JSP File Name: เปน helloTagFile แลวกด Finish
4. ในหนาต/าง editor ใหแกไข source code ของไฟล5 helloTagFile.jsp ใหเปนไปตาม Listing ท 11.6
5. ท.าการ run โปรแกรมโดยก.าหนด URL เปน http://localhost:8080/JSPDemo/helloTagFile.jsp?
name=Thanisa จะไดผลลพธ5เช/นเดยวกบโปรแกรม hello.jsp

Listing ท 11.6 โปรแกรม helloTagFile.jsp

<%@taglib uri="/WEB-INF/tlds/MyTags" prefix="myTags" %>

<html>
<head>
</head>
<body>
<h1>JSP Demo</h1>

<myTags:NameTagFile />

</body>
</html>


84

Exercise 12 การพฒนาโปรแกรมเวบโดยใช Strut Framework


แบบฝกหดนจะเปนการพฒนาโปรแกรม Web Application โดยใช Struts Framework โดยการ
ปรบปร1งโปรแกรมเวบเพอต0ดต/อกบฐานขอม#ล เพอใหส/วนของ Web User Interface สามารถทจะตรวจสอบ
ขอม#ล (Validate Data) ทป%อนขอม#ลได และเปลยนแปลงว0ธการอ/านพาราม0เตอร5โดยใช Struts Framework

1. สรางโปรเจค StrutDBApp
2. พฒนาโปรแกรม BookActionForm
3. พฒนาโปรแกรม addBook.jsp
4. พฒนาโปรแกรม AddBookAction.java
5. แกไขไฟล5 ApplicationResource.properties
6. พฒนาโปรแกรม Init.java และ Thankyou.html
7. แกไขไฟล5 Struts-Config.xml


เราจะเร0มตนสรางโปรแกรม WebBase Database โดยการสราง Project ใหม/ข,นมาใน NetBeans ซ,งม

3. ก.าหนด Project Name เปน StrutDBApp แลวเลอก Project Location เปน Director ทเราตองการจะ
เกบไฟล5ไว จากนนเลอก Server เปน Apache Tomcat 6.0.18 จากนนกด Next
4. ในช/อง Frameworks ใหเลอก Struts และเลอก Add Strut TLDs จากนนกด Finish

12.2 การพฒนาโปรแกรม BookActionForm.java

Struts Framework จะมโปรแกรม Java ทจะตองพฒนาอย#/สองโปรแกรมคอ FormBean และ Action
Class โดยส/วน FormBean จะท.าหนาทในการตรวจสอบพาราม0เตอร5ทผ#ใชจะป%อนขอม#ลในหนาเวบเพจ ส/วน
Action Class จะเปนโปรแกรมทอ/านค/าพาราม0เตอร5ทป%อนมาเพอประมวลผลต/อไป


85

โปรแกรม FormBean จะเปนโปรแกรม Java ทมค/า attribute สอดคลองกบชอพาราม0เตอร5ทจะป%อน
และจะมเมธอด getter และ setter ทสอดคลองกบ attribute ดงกล/าว นอกจากนอาจมเมธอดในการ validate
ขอม#ล เพอใหสอดคลองกบเงอนไขของขอม#ลทตองการจะก.าหนดไว

ในทนจะก.าหนดใหไฟล5ชอ addBook.jsp เปนเวบเพจทใชแสดงฟอร5มส.าหรบป%อนขอม#ลหนงสอใหม/เขา
ในฐานขอม#ล books ซ,งมลกษณะดงร#ปท 12.1

รปท 12.1 เวบเพจทใชแสดงฟอร!มสาหรบป+อนขอมล

และก.าหนดใหผ#ใชตองป%อนพาราม0เตอร5ทมชอและเงอนไขต/างๆดงน

● isbn เปนชน0ด String ทมตวอกษรระหว/าง 3-10 ตว
● titleเปนชน0ด String ทมตวอกษรอย/างนอย 3 ตว
● author เปนชน0ด String ทมตวอกษรอย/างนอย 5 ตว
● price เปนชน0ด float ทมค/าเปนมากกว/า 0.0

แบบฝกหดนก.าหนดใหโปรแกรม FormBean มชอว/า BookActionForm.java โดยมขนตอนการพฒนา
ดงน

1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด StrutDBApp จากนนเลอกค.าสง New > Other..
2. ในไดอะลอก New File ใหเลอก Categories ทชอ Struts ซ,งโปรแกรมกจะแสดง File Types ต/างๆภาย
ใต Category น ใหเราเลอก Struts ActionForm Bean แลวกด Next
3. ก.าหนด Class Name เปน BookActionForm และ Package เปน com.myapp.struts ดงแสดงในร#ปท
12.2


86

รปท 12.2 การกาหนดค-า Struts ActionForm Bean

4. กด Finish แลวเขยน Source code ของไฟล5ดงน
5. เพ0ม attribute ภายในคลาส BookActionForm ดงน
String isbn;
String title;
String author;
float price;
6. ท.าการ encapsulate attribute (ก.าหนด attribute ใหเปน private และ สรางเมธอด getter และ setter)
โดยการคล0;กขวาภายในหนาต/าง editor ของ source code แลวเลอก Refactor > Encapsulate Field..
7. โปรแกรมจะแสดง Fields ต/างๆใหเลอกดงร#ปท 12.3


87

รปท 12.3 หนาไดอะลอก Encapsulate Fields

8. ในไดอะลอก Encapsulate Fields ใหคงค/าทเลอกไวท1ก Field ตามทโปรแกรมก.าหนดไวแลวกดป16ม
Refactor
9. โปรแกรมจะเพ0ม source code โดยก.าหนดให field ต/างๆม access modifier เปน private แลวเพ0ม
เมธอด setter และ getter
10. แกไขโคดในเมธอด validate ดงน

public ActionErrors validate(ActionMapping mapping, HttpServletRequest request) {
ActionErrors errors = new ActionErrors();
if (getIsbn() == null || getIsbn().length() < 3
|| getIsbn().length() > 10) {
errors.add("isbn", new ActionMessage("error.isbn.required"));
}
if (getTitle() == null || getTitle().length() < 3) {
errors.add("title", new ActionMessage("error.title.required"));
}
if (getAuthor() == null || getAuthor().length() < 5) {
errors.add("author", new ActionMessage("error.author.required"));
}
if (getPrice() < 0) {
errors.add("price", new ActionMessage("error.price.required"));
}
return errors;
}

11. กดป16ม Save จะไดโปรแกรมดง Listing ท 12.1


88

Listing ท 12.1 โปรแกรม BookActionForm.java

package com.myapp.struts;

import javax.servlet.http.HttpServletRequest;
import org.apache.struts.action.ActionErrors;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.action.ActionMessage;

public class BookActionForm extends org.apache.struts.action.ActionForm {

private float price;

private String name;

public String getName() {
return name;
}

public void setName(String string) {
name = string;
}

public BookActionForm() {
super();
// TODO Auto-generated constructor stub
}

public ActionErrors validate(ActionMapping mapping, HttpServletRequest request) {
ActionErrors errors = new ActionErrors();
if (getIsbn() == null || getIsbn().length() < 3 || getIsbn().length() > 10) {
errors.add("isbn", new ActionMessage("error.isbn.required"));
}
if (getTitle() == null || getTitle().length() < 3) {
errors.add("title", new ActionMessage("error.title.required"));
}
if (getAuthor() == null || getAuthor().length() < 5) {
errors.add("author", new ActionMessage("error.author.required"));
}
if (getPrice() < 0) {
errors.add("price", new ActionMessage("error.price.required"));
}
return errors;
}

return isbn;
}

this.isbn = isbn;


89

}

return title;
}

this.title = title;
}

return author;
}

}

public float getPrice() {
return price;
}

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

12.3 การพฒนาโปรแกรม AddBook.jsp

โปรแกรม AddBook.jsp เปนโปรแกรม JSP ทใช Tags ของ Strut Framework เพอแสดงหนาเวบเพจ
ส.าหรบการกรอกขอม#ล โดยมขนตอนการพฒนาดงน

1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด StrutDBApp จากนนเลอกค.าสง New > Other...
3. ก.าหนด JSP File Name: เปน AddBook แลวกด Finish
4. เขยน Source code ในหนาต/าง Editor ตาม Listing ท 12.2 แลวป16ม Save

Listing ท 12.2 โปรแกรม AddBook.jsp

<%@taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@taglib uri="http://struts.apache.org/tags-html" prefix="html" %>




90

<html>
<head>
<title><bean:message key="title.message"/> </title>
</head>
<body>
<h1><bean:message key="title.message"/></h1>
<html:errors/>
<html:form action="AddBook">
ISBN : <html:text property="isbn" size="15"/> <BR>
Title : <html:text property="title" size="50"/> <BR>

Author : <html:text property="author" size="50"/> <BR>
Price : <html:text property="price" size="10"/> <BR>

<html:submit value="Add" />
</html:form>

</body>
</html>

12.4 การพฒนาโปรแกรม AddBookAction.java

โปรแกรม AddBookAction.java เปนโปรแกรม ActionForm ของ Struts Framework เพออ/านขอม#ล
ทผ#ใชป%อนเขามาจากหนา AddBook.jsp แลวเขยนขอม#ลลงใน table ทชอ Books โดยมขนตอนการพฒนาดงน

1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด StrutDBApp จากนนเลอกค.าสง New => Other..
2. ในไดอะลอก New File ใหเลอก Categories ทชอ Struts ซ,งโปรแกรมกจะแสดง File Types ต/างๆภาย
ใต Category น ใหเราเลอก Struts Action แลวกด Next
3. ก.าหนด Class Name: เปน AddBookAction เลอก Package: เปน com.myapp.struts และก.าหนด
Action Path : เปน /AddBook จะไดไดอะลอก New Struts Action ดงร#ปท 12.4


91

รปท 12.4 การกาหนดค-า Struts Action

4. แลวกด Next ในหนาถดไปของไดอะลอก ใหเลอก Input Resource : เปน /AddBook.jsp แลวกด
Finish
5. ใหแกไข source code ในเมธอด execute() ดงน
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
BookActionForm bkForm = (BookActionForm) form;
String isbn = bkForm.getIsbn();
String title = bkForm.getTitle();
String author = bkForm.getAuthor();
float price = bkForm.getPrice();

try {
ServletContext context = getServlet().getServletContext();
Connection conn = (Connection) context.getAttribute("connection");


String sql = "INSERT INTO books VALUES('"+isbn+"','" + title +"','" + author +"',"+price +")";
stmt.executeUpdate(sql);
return mapping.findForward(SUCCESS);

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



92

12.5 การพฒนาไฟล' ApplicationResource.properties

ไฟล5 ApplicationResource.properties เปนไฟล5ทโปรแกรม Struts จะอ/านค/าคงทต/างๆทเราก.าหนดข,น
ซ,งในทนไดก.าหนดขอความทเกยวกบ error message และ title ไว โดยมขนตอนการพฒนาดงน

1. เลอกหนาต/าง Projects แลวขยายแทป StrutDBWeb > Source Packages > com.myapp.struts
2. ดบเบ0ลคล0;กเลอกไฟล5 ApplicationResource.properties
3. ในหนาต/าง Editor ใหเพ0มขอความดงน
error.isbn.required=Please enter correct ISBN
error.title.required=Please enter correct Title
error.author.required=Please enter correct author
error.price.required=Price must greater than zero
title.message=Add a new Book


12.6 การพฒนาโปรแกรม Init.java และ Thankyou.html

โปรแกรม Init.java ในแบบฝกหดการพฒนาโปรแกรม Servlet โดยใชคลาสประเภท Listener และจะตองมการ
แกไขไฟล5 context.xml และ web.xml ดงแบบฝกหดดงกล/าว

โปรแกรม Thankyou.html เปนหนาเวบเพจทจะแสดงเมอ โปรแกรมไดใส/ขอม#ลลงฐานขอม#ลเรยบรอย
แลว โดยโปรแกรมนจะม source code เช/นเดยวกบโปรแกรม Thankyou.html ในแบบฝกหดการพฒนา
โปรแกรมเวบเพอต0ดต/อกบฐานขอม#ล

12.7 การพฒนาไฟล' Struts-config.xml

ไฟล5 Struts-config.xml เปนไฟล5ในการควบค1มการท.างานของโปรแกรม Struts ซ,งในทนจะใชในการ
ก.าหนดล.าดบการท.างานของเวบ (Navigation Rule) โดยมขนตอนการพฒนาดงน

1. เลอกหนาต/าง Projects แลวขยายแทป StrutDBApp > Configuration Files
2. ดบเบ0ลคล0;กเลอกไฟล5 Struts-config.xml
3. ในหนาต/าง Editor คล0;กขวาแลวเลอก Struts > Add Forward
4. ในไดอะลอก Add Forward ก.าหนด Forward Name: เปน success ส/วน Forward To: เปน
Resource File: /Thankyou.html และ Location เปน Action : /AddBook โดยจะไดไดอะลอกดงร#ป
ท 12.5


93

รปท 12.5 การกาหนดค-า Add Forward

5. กดป16ม Add และกดป16ม Save จะมค.าสงใน struts-config.xml เพ0มข,นมาดงน
<action-mappings>
<action input="/AddBook.jsp" name="BookActionForm" path="/AddBook" scope="session"
type="com.myapp.struts.AddBookAction">
<forward name="success" path="/Thankyou.html"/>
</action>

</action-mappings>


1. ท.าการ Build และ Deploy โปรแกรม StrutDBApp
2. Run โปรแกรม StrutDBApp ทงนตองท.าการรน MySQL Database Server ก/อน
3. เลอก URL ของ Web Browser เปน http://localhost:8080/StrutDBApp/AddBook.jsp ใหเรา
ทดลองใส/ขอม#ลดงร#ปท 12.6


94

รปท 12.6 ตวอย-างการป+อนขอมลเขา Table ชอ Books

4. เมอกดป16ม Add โปรแกรมกจะใส/ขอม#ลลงใน Database
5. เราสามารถทจะด#ขอม#ลทป%อนเขาไปได โดยไปทหนาต/าง Runtime ของโปรแกรม NetBeans แลวเลอก
ค.าสง View Data.. จาก Table ทชอ Books


95

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


โปรแกรมในบทนจะเปนการพฒนาโปรแกรม Web Application โดยใช JSF Framework ทงนจะ
เปนการปรบปร1งโปรแกรมเวบเพอต0ดต/อกบฐานขอม#ล เพอปรบปร1งส/วน Web User Interface โดยจะท.าใหผ#ใช
สามารถทจะ Validate Data ทป%อนขอม#ลได และเปลยนแปลงว0ธการอ/านพาราม0เตอร5โดยใช Java Server Faces
(JSF) Framework

1. สรางโปรเจค JSFDBApp
2. พฒนาโปรแกรม JSF Managed Bean
3. พฒนาโปรแกรม Validator
4. พฒนาโปรแกรม AddBook.jsp
5. ก.าหนด Page Navigation
6. ก.าหนด Error Messages
7. ก.าหนด JNDI Name
8. พฒนาโปรแกรม Init.java และ Thankyou.html
9. พฒนาโปรแกรม AddBookServlet.java


เราจะเร0มตนสรางโปรแกรม Web Base Application โดยใช JSF Framework โดยการสราง Project
ใหม/ข,นมาใน NetBeans ซ,งมขนตอนดงน

3. ก.าหนด Project Name เปน JSFDBApp แลวเลอก Project Location เปน Director ทเราตองการจะ
เกบไฟล5ไว จากนนเลอก Server เปน Apache Tomcat 6.0.18 จากนนกด Next
4. ในช/อง Frameworks ใหเลอก Java Server Faces จากนนกด Finish


96

13.2 การพฒนาโปรแกรม JSF Managed Bean

JSF Framework จะใชโปรแกรม Java Bean ในการเชอมโยงค/าพาราม0เตอร5ส.าหรบโปรแกรม JSP หรอ
Servlet ภายใน Framework โปรแกรม JSF Managed Bean จะเปนโปรแกรม Java ทมค/า attribute สอดคลอง
กบชอพาราม0เตอร5ทจะป%อน และจะมเมธอด getter และ setter ทสอดคลองกบ attribute ดงกล/าว ซ,งในแบบ
ฝกหดนจะก.าหนดใหผ#ใชตองป%อนพาราม0เตอร5ทมชอต/างๆ ดงน
● isbn เปนชน0ด String

● title เปนชน0ด String

● author เปนชน0ด String

● price เปนชน0ด float ทมค/าเปนมากกว/า 0.0

และจะตองพฒนาโปรแกรม JSF Managed Bean โดยมขนตอนดงน

1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด JSFDBApp จากนนเลอกค.าสง New > Other..
2. ในไดอะลอก New File ใหเลอก Categories ทชอ JavaServer Faces ซ,งโปรแกรมกจะแสดง File
Types ต/างๆภายใต Category น ใหเราเลอก JSF Managed Bean แลวกด Next
3. ก.าหนด Class Name เปน BookBean และ Package เปน bean ส/วนค/าอนๆใหคลตามทก.าหนดไว ดง
ร#ปท 13.1 แลวกด Finish

รปท 13.1 การกาหนดค-า JSF Managed Bean

97

4. เขยน source code โดยเพ0ม attribute ภายในคลาส BookBean ดงน
String isbn;
String title;
String author;
float price;
5. ท.าการ encapsulate attribute โดยคล0;กขวาภายในหนาต/าง editor ของ source code แลวเลอก
Refactor > Encapsulate Field..
6. ในไดอะลอก Encapsulate Fields ใหคงค/าทเลอกไวท1ก Field ตามทโปรแกรมก.าหนดไวแลวแลวกดป16ม
Refactor
7. กดป16ม Save โปรแกรมจะม Source code ดง Listing ท 13.1
8. เลอกไฟล5 faces-config.xml จะเหนค.าสงดงน
<managed-bean>
<managed-bean-name>BookBean</managed-bean-name>
<managed-bean-class>bean.BookBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>

Listing ท 13.1 โปรแกรม BookBean.java

package bean;

public class BookBean {
private float price;

return isbn;
}

this.isbn = isbn;
}

return title;
}

this.title = title;
}

return author;
}


98

}

public float getPrice() {
return price;
}

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

}

13.3 การพฒนาโปรแกรม PriceValidator.java

โปรแกรม PriceValidator.java เปนโปรแกรม JSF Validator ทพฒนาข,นมาเพอตรวจสอบความถ#ก
ตองของขอม#ลราคาหนงสอทผ#ใชป%อนเขามาว/าจะตองมค/ามากกว/า 0.0 โปรแกรมนจะตอง implements
อ0นเตอร5เฟสชอ javax.faces.validator.Validator และจะตองมการปรบปร'งไฟล faces-
config.xml เพอระบ1ช!อคลาส PriceValidator ว"าเป6น Validator แบบหน:!ง ขนตอนการพฒนาโปรแกรมนม
ดงน
1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด JSFDBApp จากนนเลอกค.าสง New > Java Class...
2. ก.าหนด Class Name เปน PriceValidator และ Package เปน validator แลวกด Finish
3. ใหเพ0มค.าสง implements Validator ในการประกาศคลาส ดงน
public class PriceValidator implements Validator
4. กด Alt+Shift+F เพอการ Fix Imports โดยใหเลอกคลาส
javax.faces.validator.Validator
5. ใช Hint เพอทจะ implements เมธอดต/างๆของอ0นเตอร5เฟส Validator ดงร#ป

6. ใหแกไข source code ในเมธอด validate() ดงน
public void validate(FacesContext context, UIComponent component, Object value) throws
ValidatorException {
Float priceObj = (Float) value;
boolean flag = true;
try {
float price = priceObj;
if (price < 0) {


99

flag = false;
}
} catch(ArithmeticException ex) {
flag = false;
}
if (!flag) {
FacesMessage message = new FacesMessage();
message.setDetail("Price is not valid - The price must greater than 0.0");
message.setSummary("Email not valid - The price must greater than 0.0");
message.setSeverity(FacesMessage.SEVERITY_ERROR);
throw new ValidatorException(message);
}

}

8. เลอกไฟล5 faces-config.xml ซ,งอย#/ภายใตแทป Configuration Files แลวเพ0มขอความภายในแทก
</faces-config> ดงน

<validator>
<validator-id>validator.PriceValidator</validator-id>
<validator-class>validator.PriceValidator</validator-class>
</validator>


13.4 การพฒนาโปรแกรม AddBook.jsp

โปรแกรม AddBook.jsp เปนโปรแกรม JSP ทใช Tags ของ JSF Framework เพอแสดงหนาเวบเพจ
ใหผ#ใชกรอกขอม#ล โดยจะแสดงผลเช/นเดยวกบหนาเวบเพจ addBook.html ในโปรแกรม Web Base Database
Application ในแบบฝกหดทผ/าน โดยจะมขนตอนการพฒนาดงน

1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด JSFDBApp จากนนเลอกค.าสง New > Other..
2. ในไดอะลอก New File ใหเลอก Categories ทชอ JavaServer Faces ซ,งโปรแกรมกจะแสดง File
Types ต/างๆภายใต Category น ใหเราเลอก JSF JSP Page แลวกด Next
3. ก.าหนด JSP File Name: เปน AddBook แลวกด Finish
4. ภายใน Source code ของโปรแกรม AddBook.jsp จะมการประกาศ tag libraries ดงนโดยอตโนมต0
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>

5. แกไขขอความใน tag ทชอ <title> และ <h1> เปน Add a new Book
6. ในส/วนของฟอร5ม เราจะใช JSF tag โดยใหลาก ป16ม JSF Form ในหนาต/าง Palette มาไวใน source
code โปรแกรม NetBeans จะแสดงไดอะลอก Insert JSF Form ใหเลอกช/อง Empty Form แลวกด


100

OK
7. หลงจากนนใหเขยน code โดยใช คอมโพเนนท5 inputText และ commandButton โดยจะได source
code ดงน

<f:view>
...
<h:form>
ISBN : <h:inputText value="#{BookBean.isbn}"
required="true" id="isbn"
size="15"/> <h:message for="isbn" /> <BR>
Title : <h:inputText value="#{BookBean.title}"
required="true" id="title"
size="50"/> <h:message for="title" /><BR>

Author : <h:inputText value="#{BookBean.author}"
required="true" id="author"
size="50"/> <h:message for="author" /> <BR>
Price : <h:inputText value="#{BookBean.price}"
required="true" id="price"
size="10" >
<f:validator validatorId="validator.PriceValidator" /></h:inputText>
<h:message for="price" /> <BR>

<h:commandButton value="Submit" action="submit" />
</h:form>
....
</f:view>


13.5 การก/าหนด Page Navigation

JSF Framework จะก.าหนดล.าดบการท.างานของเวบเพจต/างๆ (Page Navigation) โดยการก.าหนด
configuration ในไฟล5 faces-config.xml ในทนจะก.าหนดใหโปรแกรม AddBook.jsp เรยก url ชอ
/addBook.do เมอกดป16ม Submit ซ,งการแกไขไฟล5 faces-config.xml จะมขนตอนการพฒนาดงน

1. เลอกไฟล5 faces-config.xml ซ,งอย#/ภายใตแทป Configuration Files
2. คล0;กขวาในหนาต/าง Editor เลอกแทป XML แลวเลอก Java ServerFaces > Add Navigation Rule
3. ในไดอะลอก Add Navigation Rule ใหก.าหนดค/า Rule From View: เปน /AddBook.jsp แลวกดป16ม
Add
4. คล0;กขวาในหนาต/าง Editor แลวเลอก Java ServerFaces > Add Navigation Case
5. ในไดอะลอก Add Navigation Case ใหก.าหนดค/า From View: เปน /AddBook.jsp ค/า From
Outcome: เปน submit และ To View: เปน /addBook.do แลวกดป16ม Add
6. ไฟล5 faces-config.xml จะมค.าสงเพ0มดงน


101

<navigation-rule>
<description>

</description>
<from-view-id>/AddBook.jsp</from-view-id>
<navigation-case>
<from-outcome>submit</from-outcome>
<to-view-id>/addBook.do</to-view-id>
</navigation-case>
</navigation-rule>
7. และถาเลอกแทป PageFlow จะเหนความสมพนธ5ของไฟล5ดงร#ปท 13.2

รปท 13.2 การแสดง PageFlow

13.6 การก/าหนด Error Message

JSF Framework ก.าหนดใหไฟล5 Message.properties ท.าหนาทในการแสดงขอความเมอขอม#ลทผ#ใช
ป%อนไม/สอดคลองกบเงอนไขทก.าหนดไว ไฟล5 Message.properties จะอย#/ในแพคเกจ javax.faces ซ,งเรา
สามารถทจะเรยกด#ไดโดยการขยายแทป Libraries > jsf-impl.jar > javax.faces ในกรณทเราตองการจะ
ก.าหนด Error Message เองเราจะตองสรางไฟล5 property ข,นมาใหม/ โดยจะมขนตอนการพฒนาดงน

1. เลอกหนาต/าง Projects แลวคล0;กขวาทโหนด JSFDBApp จากนนเลอกค.าสง New => File/Folder..


102

2. ในไดอะลอก New File ใหเลอก Categories ทชอ Other ซ,งโปรแกรมกจะแสดง File Types ต/างๆภาย
ใต Category น ใหเราเลอก Properties File แลวกด Next
3. ในไดอะลอก New Properties File ก.าหนด File Name: เปน MyMessage และ Folder: เปน
src/java/properties
4. ในหนาต/าง editor ใหแกไขไฟล5 MyMessages.properties โดยเพ0มขอความดงน
javax.faces.component.UIInput.REQUIRED=Please enter a value for this field.
6. เลอกไฟล5 faces-config.xml ซ,งอย#/ภายใตแทป Configuration Files แลวเพ0มขอความดงน
<application>
<message-bundle>properties.MyMessages</message-bundle>
</application>

13.7 การพฒนาโปรแกรม Thankyou.html, error.html และ Init.java

โปรแกรม Thankyou.html เปนหนาเวบเพจทจะแสดงเมอ โปรแกรมไดใส/ขอม#ลลงฐานขอม#ลเรยบรอย
แลว โดยโปรแกรมนจะม sourcecode เช/นเดยวกบโปรแกรม Thankyou.html ในแบบฝกหดการพฒนา
โปรแกรมเวบเพอต0ดต/อกบฐานขอม#ล ส/วน error.html เปนหนาเวบเพจทจะแสดงเมอ โปรแกรมไม/สามารถใส/
ขอม#ลลงฐานขอม#ลได โดยม sourcecode ดง Listing ท 13.2

Listing ท 13.2 โปรแกรม error.html

<html>
<head>
<title>Error!</title>
</head>
<body>
<H1>Cannot Add!!</H1>
</body>
</html>

โปรแกรม Init.java ในแบบฝกหดการพฒนาโปรแกรม Servlet โดยใชคลาสประเภท Listener

13.8 การพฒนาโปรแกรม AddBookServlet.java

โปรแกรม AddBookServlet จะเปนโปรแกรมท JSF Frameworks เรยกใชหลงจากทผ#ใชกดป16ม
Submit ในหนา AddBook.jsp โปรแกรมนจะม url เปน /addBook.do และจะม sourcecode คลายกบ


103

โปรแกรม AddBookServlet.java ในแบบฝกหดการพฒนา โปรแกรมเวบเพอต0ดต/อกบฐานขอม#ล แต/จะมค.าสง
อ/านค/าพาราม0เตอร5ทผ#ใชป%อนเขามาแตกต/างจากเด0ม เพราะกรณนจะใชจาก attribute ของโปรแกรม JSF
Managed Bean ทชอ BookBean ซ,งเปน attribute ทเกบไวใน request session โดยมค.าสงดงน

BookBean obj = (BookBean) request.getAttribute("BookBean");
String isbn = obj.getIsbn();
String author = obj.getAuthor();
String title = obj.getTitle();
float price = obj.getPrice();

โปรแกรม AddBookServlet จะมขนตอนในการพฒนาเช/นเดยวกบแบบฝกหดการพฒนา โปรแกรมเวบ
เพอต0ดต/อกบฐานขอม#ล และจะม source code ดง Listing ท 13.3 โดยจะตองก.าหนดใหม URL pattern เปน
/addBook.do

Listing ท 13.3 โปรแกรม AddBookServlet.java

package controller;

import bean.BookBean;
import java.io.IOException;
import java.io.PrintWriter;



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


try {
BookBean obj = (BookBean) request.getAttribute("BookBean");
String isbn = obj.getIsbn();
String author = obj.getAuthor();


104

String title = obj.getTitle();
float price = obj.getPrice();


String sql = "INSERT INTO books VALUES('"+isbn+"','" + title +"','" + author +"',"+price
+")";
int row = stmt.executeUpdate(sql);
if (row == 1) {
response.sendRedirect(“Thankyou.html”);
} else {
response.sendRedirect(“error.html”);
}
return;
}


out.close();

}

}

}

}
}


1. ท.าการ Build และ Deploy โปรแกรม JSFDBApp
2. Run โปรแกรม JSFDBApp
3. เลอก URL ของ Web Browser เปน http://localhost:8080/JSFDBApp/AddBook.jsp ใหเรา
ทดลองใส/ขอม#ล
4. เมอกดป16ม Add โปรแกรมกจะใส/ขอม#ลลงใน Database
5. เราสามารถทจะด#ขอม#ลทป%อนเขาไปได โดยไปทหนาต/าง Services ของโปรแกรม NetBeans แลวเลอก
ค.าสง View Data.. จาก Table ทชอ books


105

Exercise 14 การพฒนาโปรแกรมเวบโดยใช Visual JSF

เนอหาทตองศกษากอน -

แบบฝกหดนจะเปนการพฒนาโปรแกรม JSF Frameworks โดยใชโมด#ลของ NetBeans ทชอ Visual
Web JavaServer Faces ซ,งช/วยท.าใหเราสามารถพฒนาโปรแกรม Web Application ไดโดยง/ายในร#ปแบบ
Drag and Drop และท.าใหเราเขยน source code นอยลง


เราจะเร0มตนสรางโปรแกรม Web Base Application โดยใช JSF Framework โดยการสราง Project
ใหม/ข,นมาใน NetBeans ซ,งมขนตอนดงน

3. ก.าหนด Project Name เปน HelloVisualWebApp แลวเลอก Project Location เปน Director ทเรา
ตองการจะเกบไฟล5ไว จากนนเลอก Server เปน GlassFish V2 จากนนกด Next
4. ในช/อง Frameworks ใหเลอก Visual Web JavaServer Faces จากนนกด Finish [ในกรณทไม/ม
Visual JSF Framework ใหเลอก เราจะตองท.าการต0ดตง Visual JSF Plugin ของ NetBeans ก/อน]

14.2 การพฒนาโปรแกรม HelloWeb

โปรแกรม HelloWeb เปนโปรแกรมทจะพฒนาข,นในโปรเจค HelloVisualWebApp โดยตองการจะให
มหนาจอส/วนต0ดต/อผ#ใชดงร#ปท 14.1 โดยผ#ใชสามารถป%อนขอความใน TextField และเมอกดป16ม Say
Sawaddee โปรแกรมจะแสดงขอความบนต.าแหน/ง Static Text โดยมขนตอนการพฒนาโปรแกรมดงน


106

รปท 14.1 การสรางหนาเวบเพจ JSF โดยใช Visual Editor

1. ในโปรเจค HelloVisualWebApp ใหเลอกไฟล5 Page1.jsp หนาต/าง Editor จะแสดงไฟล5นในโหมด
Design
2. ในหนาต/าง Properties ใหก.าหนดค/าของ Title เปน Hello Web ดงร#ปท 14.2

รปท 14.2 การกาหนดค-า Properties ของ Page1

3. ในหนาต"าง Palette ลากไอคอน Label ท!อย/"ภายในโหนด Basic มาไวในหนาต"างการออกแบบของ
Page1.jsp แลวแกไขขอความเป6น Name: แลวกด Enter (จะสงเกตเหนว"าค"าของ text ในหนาต"าง
Properties ส.าหรบ label1:text จะถ/กเปล!ยนเป6น Name: ดวย)
4. ลากไอคอน TextField ท!อย/"ภายในโหนด Basic มาไวในหนาต"างการออกแบบของ Page1.jsp ใน
ต.าแหน"งดงร/ปท!แสดงขางตน แลวแกไขขอความเป6น Enter your name แลวกด Enter
5. ในหนาต"าง Properties ส.าหรบ TextField1 ใหเปล!ยนค"า id จาก textField1 เป6น nameTf
6. ใหท.าการคล#;กขวาท! nameTf แลวเลอก Add Binding Attribute ดงแสดงในร/ปท! 14.3


107

รปท 14.3 การใชคาสง Add Binding Attribute

7. ลากไอคอน Button ท!อย/"ภายในโหนด Basic มาไวในหนาต"างการออกแบบของ Page1.jsp ในต.าแหน"ง
ดงร/ปท!แสดงขางตน แลวแกไขขอความเป6น Say Sawaddee
8. ในหนาต"าง Properties ส.าหรบ Button ใหเปล!ยนค"า id จาก button1 เป6น hiButton
9. ลากไอคอน Static Text ท!อย/"ภายในโหนด Basic มาไวในหนาต"างการออกแบบของ Page1.jsp ใน
ต.าแหน"งดงร/ปท! 14.1
10. ในหนาต"าง Properties ส.าหรบ Static Text ใหเปล!ยนค"า id จาก staticText1 เป6น hiText
11. ใหท.าการคล#;กขวาท! hiText แลวเลอก Add Binding Attribute
12. ลากไอคอน Message Group ท!อย/"ภายในโหนด Basic มาไวในหนาต"างการออกแบบของ Page1.jsp
ในต.าแหน"งดงร/ปท! 14.1 (Message Group สามารถเอาไวใชในการแสดง Error Message)
13. ในหนาต/าง editor ใหเลอกแทป JSP เราจะเหน sourcecode ของไฟล5 Page1.jsp ซ,งจะม Tags ของ
JSF อย#/ ใหสงเกตการเขยนโปรแกรมดงกล/าว

ขนตอนถดมาจะเปนการเขยน Source code เพอก.าหนดการท.างานของการกดป16ม Say Sawaddee โดยม
ขนตอนการท.างานดงน

14. ในหนาต/าง editor ใหกลบมาเลอกแทป Design แลวกดดบเบ0ลคล0;กทป16ม Say Sawaddee
15. หนาต/าง editor จะแสดงแทป Java และแสดง source code ในค.าสง action ของป16ม Say Sawaddee
ใหแกไข source code ดงน
public String hiButton_action() {
String name = (String) nameTf.getText();
hiText.setText("Sawaddee " +name);
return null;
}


1. ท.าการ Build และ Deploy โปรแกรม HelloVisualWebApp


108

2. Run โปรแกรม HelloVisualWebApp
3. ทดลองป>อนขอความลงใน Text Field จะไดตวอย"างผลลพธดงร/ปท! 14.4

รปท 14.4 ผลลพธ!การรนโปรแกรม HelloVisualWebApp

14.4 การปรบปรงโปรแกรม HelloWeb

ขนตอนนจะเปนการปรบปร1งโปรเจค HelloVisualWebApp ใหม Drop-Down List ทน.าชอมาจาก
table ในฐานขอม#ล โดยจะมหนาจอส/วนต0ดต/อผ#ใชดงร#ปท 14.5 และมขนตอนการพฒนาโปรแกรมดงน

รปท 14.5 ส-วนตดต-อกบผใชของโปรแกรม VisualWebApp ทจะปรบปร1งใหม-


109

1. ในโปรเจค HelloVisualWebApp ใหเลอกไฟล Page1.jsp หนาต"าง Editor จะแสดงไฟลน&ในโหมด
Design
2. ลบ TextField ออก แลวลากไอคอน Drop Down List ท!อย/"ภายในโหนด Basic มาแทนท!
3. ในหนาต"าง Properties ส.าหรบ Drop Down List ใหเปล!ยนค"า id จาก dropDown1 เป6น
nameDropDown
4. ใหท.าการคล#;กขวาท! nameDropDown แลวเลอก Add Binding Attribute
5. ในหนาต"าง Services ขยายโหนด Databases แลวคล#;กขวาท!โหนด jdbc:mysql://localhost:3306/test
แลวเลอก Connect เพ!อเช!อมต"อฐานขอม/ล
6. ขยายโหนด Tables จะเหน table ท!ช!อ books ซ:!งสรางมาในแบบฝ8กหดการเช!อมต"อกบ MySQL
Database ดงร/ปท! 14.6

รปท 14.6 การแสดง Table ทชอ books

7. ลากไอคอนของ table ท!ช!อ books ไปลงใน Drop Down List
8. คล#;กขวาท! Drop Down List แลวเลอก3 Bind to Data
9. ในไดอะลอก Bind to Data เลอก Value field: เป6น books.author และ Display field: เป6น
books.author ดงร/ปท! 14.7 แลวกดป'<ม OK


110

รปท 14.7 การกาหนดค-า Bind to Data
10. กดดบเบ0ลคล0;กทป16ม Say Sawaddee หนาต/าง editor จะแสดงแทป Java ใหแกไข source code ดงน

public String hiButton_action() {
String name =(String)nameDropDown.getSelected();
hiText.setText("Sawaddee " + name);
return null;
}

11. ในแทป Java ใหแกไข source code ของเมธอด prerender() เพอก.าหนดค/าเร0มตนของการเลอก Drop
Down List ดงน

public void prerender() {
if (nameDropDown.getSelected() == null) {
booksDataProvider.cursorFirst();
nameDropDown.setSelected
((String)booksDataProvider.getValue("books.author"));
}
}


1. ท.าการ Build และ Deploy โปรแกรม HelloVisualWebApp
2. Run โปรแกรม HelloVisualWebApp
3. ทดลองเลอกชอใน Drop Down List จะไดตวอย/างผลลพธ5ดงร#ป 14.8


111

รปท 14.8 ตวอย-างการรนโปรแกรม HelloVisualWebApp


Java Web Programming Using NetBeans 6.5

More Related Content

Similar to Java Web Programming Using NetBeans 6.5

More from Thanachart Numnonda

Java Web Programming Using NetBeans 6.5