101
11.4.2 เขยี นโปรแกรม helloTagFile.jsp
โปรแกรม helloTagFile.jsp จะเรยี กใช้ Tag ทีช่ ่ือ NameTagFile มีข้นั ตอนดังนี้
1. คลกิ๊ ขวาที่ Project JSPDemo จากน้นั เลอื กคำสั่ง New → JSP File
2. กำหนด File Name = helloTagFile แลว้ กด Finish
3. ในหนา้ ต่าง editor ให้แกไ้ ข source code ของไฟล์ helloTagFile.jsp ให้เปน็ ไปตาม Listing ที่ 11.8
4. ทำการ run โปรแกรม
โดยกำหนด URL เป็น http://localhost:8080/JSPDemo/helloTagFile.jsp?name=Thanisa
จะได้ผลลพั ธ์เชน่ เดยี วกับโปรแกรม hello.jsp
Listing ท่ี 11.8 โปรแกรม helloTagFile.jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/tlds/MyTags" prefix="myTags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Demo</title>
</head>
<body>
<h1>JSP Demo</h1>
<myTags:NameTagFile />
</body>
</html>
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
102
Exercise 12 การพฒั นาโปรแกรมเว็บโดยใช้ Strut Framework
เนือ้ หาทีต่ ้องศึกษาก่อน การพัฒนาโปรแกรมเวบ็ เพื่อตดิ ตอ่ กบั ฐานข้อมูล
แบบฝกึ หัดน้ีจะเป็นการพฒั นาโปรแกรม Web Application โดยใช้ Struts Framework โดยการปรบั ปรุง
โปรแกรมเวบ็ เพอ่ื ตดิ ต่อกบั ฐานขอ้ มลู เพอ่ื ให้ส่วนของ Web User Interface สามารถทจี่ ะตรวจสอบข้อมลู (Validate
Data) ท่ีปอ้ นข้อมูลได้ และเปลี่ยนแปลงวิธกี ารอ่านพารามเิ ตอรโ์ ดยใช้ Struts Framework
ข้ันตอนในการพัฒนาโปรแกรม
1. สรา้ งโปรเจ็ค StrutsDBApp ในรปู แบบ Struts Frameworks
2. พัฒนาโปรแกรม addBook.jsp [View ส่วนติดต่อ user]
3. พฒั นาโปรแกรม BookFormBean.java [Model เป็น Bean ซึง่ สอดคลอ้ งกบั สว่ นของ View]
4. พฒั นาโปรแกรม Init.java เชื่อมต่อ Database [Model]
5. พฒั นาโปรแกรม AddBookAction.java [Model เมือ่ มี Request เขา้ มาจะเพิ่มขอ้ มูลไปท่ี Table]
6. แก้ไขไฟล์ ApplicationResource.properties
7. พัฒนาโปรแกรม Thankyou.html
8. พฒั นาไฟล์ Struts-Config.xml
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
103
12.1 การสร้างโปรเจ็ค StrutsDBApp ในรปู แบบ Struts Frameworks
1. Download Struts Frameworks Release ทต่ี อ้ งการ ขณะนมี้ ถี ึง Struts 2 แต่เพือ่ ความเขา้ ใจพนื้ ฐานของ โ
Framework จงึ ใช้ Struts 1 โดย Download http://archive.apache.org/dist/struts/binaries/struts-1.3.9-all.zip
2. ทำการเปดิ File Zip ออกมา จะเหน็ Folder ชือ่ apps ภายในจะมี war file ช่อื struts-blank-1.3.9.war
ใหท้ ำการ Extract ออกมาไวท้ ี่ Temporary folder เช่น D:\TEMP\ กอ่ น
รูปท่ี 12.1 Extract File Struts-blank
1. ทำการ Import Template เขา้ สู่ Eclipse เพื่อเตรียม Environment ท่ี Struts Framework ต้องการ
รูปท่ี 12.2 Import เขา้ สู่ Eclipse
2. ทำการ Rename ช่ือ Project โดยคล๊กิ ขวาท่ี Project → Refactor → Rename...
แลว้ ใสช่ อ่ื เปน็ StrutsDBApp
รปู ที่ 12.3 การ Refactor ชื่อ Project
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
104
12.2 การพฒั นาโปรแกรม addBook.jsp
สรา้ งเวบ็ เพจเพอ่ื ใช้สำหรบั ปอ้ นขอ้ มลู หนังสอื ใหม่ เขา้ ในฐานข้อมูล books ซ่ึงมีลกั ษณะดงั รูปที่ 12.4
รปู ที่ 12.4 เวบ็ เพจทีใ่ ช้แสดงฟอร์มสำหรับปอ้ นข้อมูล
ข้นั ตอนการสร้างหนา้ JSP เพ่ือรับข้อมูล
1. File → New → JSP File กำหนดช่อื addBook.jsp
2. พมิ พ์ Label ออกหนา้ จอ จะใช้งาน taglib ได้โดยมี 2 แบบคือ html และ bean
1. html คล้ายกับ HTML Tag ธรรมดา
2. bean เปน็ การดึงขอ้ มลู ตัวอกั ษรจาก configuration ท่ี file MessageResources.properties
จึงตอ้ งมีการนำขอ้ มลู ข้อความต่างๆ เตรยี มไว้ก่อน เพอื่ ให้ Struts Tag ดงึ ไปใชไ้ ด้ เชน่ ขอ้ ความที่
ใชเ้ ปน็ Label , ใชเ้ พอื่ แสดง Error ให้ผ้ใู ชง้ านเห็น ดังรูปท่ี 12.6 และ Listing ท่ี 12.1
รปู ที่ 12.5 เพ่มิ ขอ้ มูล label และ Error Message ท่ตี ้องการใน file /src/MessageResources.properties
Listing ท่ี 12.1 แก้ไข Message สว่ นกลาง ท่ี /src/MessageResources.properties
label.addbookform.display=Add New Book
label.addbookform.isbn=ISBN
label.addbookform.title=TITLE
label.addbookform.author=AUTHOR
label.addbookform.price=PRICE
error.isbn.required=Please correct ISBN length between 3-10 characters
error.title.required=Please correct TITLE length at least 3 characters
error.author.required=Please correct AUTHOR length at least 5 characters
error.price.required=Please correct PRICE must greater than zero
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
105
Listing ท่ี 12.2โปรแกรม addBook.jsp
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title><bean:message key="label.addbookform.display" />
</title>
</head>
<body>
<html:form action="/addBookAction">
<font color="red"><html:errors /></font>
<bean:message key="label.addbookform.display" />
<br>
<bean:message key="label.addbookform.isbn" />
<html:text property="isbn" />
<br>
<bean:message key="label.addbookform.title" />
<html:text property="title" />
<br>
<bean:message key="label.addbookform.author" />
<html:text property="author" />
<br>
<bean:message key="label.addbookform.price" />
<html:text property="price" />
<br>
<html:submit></html:submit>
</html:form>
</body>
</html>
จาก source code จะเห็นวา่ ใช้ bean ดึง message ออกมาจาก properties ทเี่ รา config
ถ้ามีหลายๆ page ใช้ขอ้ ความเหมือนกัน ถ้าต้องการแกไ้ ขกจ็ ะทำที่เดยี วทำใหไ้ ม่ต้องตามแก้ทกุ page
ส่วนของ tag <html:errors /> ใช้รบั Error ที่ return มาจาก Method Validate นำมาแสดง
ตาม Logic ทีเ่ ขียนไว้ ที่ Validator Method ใน FormBean
(Validator Method จะแสดงให้เหน็ ในหัวขอ้ ท่ี 3 Override Method Validate Listing 12.3 หนา้ 107)
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
106
12.3 การพฒั นาโปรแกรม BookFormBean.java และ AddBookAction
Struts Framework จะมโี ปรแกรม Java ทจี่ ะต้องพฒั นาอยู่ 2 ลกั ษณะคือ
1. FormBean : ทำหนา้ ท่ี Mapping Parameter ในหน้าเว็บเพจท่รี ับขอ้ มลู และ Validate ตรวจสอบความถกู
ต้องของขอ้ มูลหน้านัน้ ๆ
2. Action : ทำหนา้ ท่ีรบั คา่ พารามิเตอร์ทปี่ อ้ นมาแลว้ นำไปประมวลผลตาม Business Logic วา่ ต้องทำอะไร
บ้าง เช่น การจดั การข้อมลู แบบต่างๆ (CRUD = Create, Read, Update, Delete)
โปรแกรม FormBean จะเปน็ โปรแกรม Java ทีม่ คี ่า attribute สอดคล้อง กับ ช่อื พารามเิ ตอร์ท่รี ับ ทางหน้า
เว็บเพจ(addBook.jsp) และจะมเี มธอด getter และ setter ทสี่ อดคลอ้ งกบั attribute ดังกล่าว
รปู ท่ี 12.6 ความสมั พนั ธ์ระหวา่ ง Tag JSP ที่สร้างหน้าจอ และ FormBean
นอกจากนี้อาจ Override เมธอดในการ Validate ตรวจสอบขอ้ มูล เพื่อใหส้ อดคล้องกบั เงื่อนไขทีก่ ำหนดไว้
ด้วย เชน่ กำหนดใหผ้ ู้ใชต้ อ้ งป้อนพารามิเตอร์ทมี่ ีช่ือและเง่ือนไขตา่ งๆดงั น้ี
▪ isbn เปน็ ชนิด String ท่ีมตี ัวอกั ษรระหว่าง 3-10 ตัว
▪ title เป็นชนดิ String ท่มี ีตัวอักษรอยา่ งนอ้ ย 3 ตวั
▪ author เปน็ ชนดิ String ทม่ี ตี วั อกั ษรอย่างน้อย 5 ตวั
▪ price เปน็ ชนิด float ท่มี คี า่ เป็นมากกว่า 0.0
โดยจะดึงขอ้ มูลมาตรวจสอบ โดยใหแ้ กไ้ ข หรือ Override Method Validate ดงั ข้นั ตอนต่อไป
โดยดู source code ไดใ้ น Listing ท่ี 12.3
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
107
ขนั้ ตอนการสรา้ ง BookFormBean
1. เลอื ก File → New → Class
กำหนด pagekage = model , name = BookFormBean , SuperClass = ActionForm
รูปท่ี 12.7 สรา้ ง Java Class BookFormBean.java
2. ประกาศตัวแปร Instance Varible เปน็ Private แลว้ Encapsulate
คลกิ๊ ขวาท่ี source code แล้วเลือก Source → Generate Getters and Setters... ดงั รปู ที่ 12.9
private String isbn;
private String title;
private String author;
private float price;
รปู ท่ี 12.8 ทำการ encapsulate instance variable
3. Override Method Validate โดย คล๊ิกขวาที่ source code แล้วเลอื ก Source → Override/Implement
Methods... ดงั รูปที่ 12.10
รูปที่ 12.9 ทำการเลอื ก Override Method validate ของ ActionForm
Listing ที่ 12.3โปรแกรม BookFormBean.java [Model]
package model;
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
108
import javax.servlet.http.HttpServletRequest;
import org.apache.struts.action.ActionErrors;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.action.ActionMessage;
public class BookFormBean extends ActionForm {
private static final long serialVersionUID = 1L;
private String isbn;
private String title;
private String author;
private float price;
public ActionErrors validate(ActionMapping mapping,
HttpServletRequest request) {
ActionErrors actionError = new ActionErrors();
if (getIsbn().equals(null) || (getIsbn().length() < 3 ||
getIsbn().length() > 10)){
actionError.add("isbn", new ActionMessage("error.isbn.required"));
}
if (getTitle().equals(null) || (getTitle().length() < 3)) {
actionError.add("title", new ActionMessage("error.title.required"));
}
if (getAuthor().equals(null) || (getAuthor().length() < 5)) {
actionError.add("author",new ActionMessage("error.author.required"));
}
if (getPrice() <= 0) {
actionError.add("price", new ActionMessage("error.price.required"));
}
return actionError;
}
public String getIsbn() {
return isbn;
}
public void setIsbn(String isbn) {
this.isbn = isbn;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getAuthor() {
return author;
}
public void setAuthor(String author) {
this.author = author;
}
public float getPrice() {
return price;
}
public void setPrice(float price) {
this.price = price;
}
}
หมายเหตุ
Method validate( ) จะ Return error object กลับไปให้หน้า JSP ท่ี tag → <html:errors /> (หน้า 104)
รปู แบบการเพ่ิม Error คือ actionError.add(ดักจับท่ี text properties ตัวไหน, ขอ้ ความทอ่ี ยากใหแ้ สดงเม่ือ properties นี้ Error);
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
109
12.4 การพฒั นาโปรแกรม AddBookAction.java
โปรแกรม AddBookAction.java เป็นโปรแกรม Action (Business Logic) ของ Struts Framework เพอื่ อา่ น
ขอ้ มลู ทผ่ี ใู้ ช้ป้อนเขา้ มาจากหน้า AddBook.jsp แลว้ เขยี นข้อมลู ลงใน table ท่ีชือ่ Books โดยมขี ั้นตอนการพฒั นาดงั น้ี
1. File → New → Class
กำหนด package = model , name = AddBookAction , SuperClass = Action ดังรูปที่ 12.11
รปู ที่ 12.10 สร้าง Java Class BookFormBean.java
2. Override Method Validate โดย คลิก๊ ขวาท่ี source code
แลว้ เลือก Source → Override/Implement Methods... ดังรปู ท่ี 12.12
รปู ที่ 12.11 ทำการเลือก Override Method validate ของ ActionForm
3. ทำการแก้ไข Source code ที่ Method execute() ดัง Listing ที่ 12.4
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
110
Listing ที่ 12.4โปรแกรม AddBookAction.java [Model]
package model;
import java.sql.Connection;
import java.sql.SQLException;
import java.sql.Statement;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
public class AddBookAction extends Action {
public Connection getConnection(){
Connection conn=(Connection)getServlet().getServletContext().getAttribute("connection");
if(connection == null) System.out.println("Not Found Connection in Servlet Context");
return conn;
}
public ActionForward execute(ActionMapping mapping, ActionForm form,HttpServletRequest
request, HttpServletResponse response)throws Exception {
try {
BookFormBean bookform=(BookFormBean)form;
String isbn = bookform.getIsbn();
String title = bookform.getTitle();
String author = bookform.getAuthor();
float price = bookform.getPrice();
String sql = "insert into books (isbn,title,author,price) values " +
"('"+ isbn + "'" +
",'"+ title+ "'" +
",'"+ author+"'" +
",'"+ price +"')";
Statement stmt = getConnection().createStatement();
stmt.execute(sql);
System.out.println("SQL Statement :" + sql);
System.out.println("Insert Success");
} catch (SQLException sqlexp) {
System.out.println(sqlexp.getMessage());
sqlexp.printStackTrace();
throw new SQLException(sqlexp.getMessage());
} catch (Exception e) {
System.out.println("Action Error "+e.getMessage());
e.printStackTrace();
throw new Exception(e.getMessage());
}
return mapping.findForward("success");
}
}
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
111
12.5 การพัฒนาโปรแกรม Init.java และ Thankyou.html [View]
โปรแกรม Init.java เป็นโปรแกรมประเภท ServletContextListener เพอื่ เชอื่ มต่อกับฐานขอ้ มลู เมอื่ เรมิ่ ต้น
อาจมองวา่ เป็นสว่ นของ Model ก็ได้ โดยมขี ้ันตอนการพฒั นาเชน่ เดยี วกับการพฒั นาโปรแกรม Init.java ใน Exercise
7 การพฒั นา WebBase DB โดยคลาสประเภท Web Listener (หนา้ 60)
และจะต้องมีการสรา้ งไฟล์ context.xml และแก้ไข web.xml แบบเดียวกันกบั Exercise ดงั กลา่ ว
โปรแกรม Thankyou.html เป็นเวบ็ เพจท่ีใช้แสดงให้เห็นว่าข้อมูลได้ถูกเพิ่มเข้าไปในฐานข้อมลู แลว้
โดยมี source code ดัง Listing ที่ 12.4
Listing ท่ี 12.5 โปรแกรม Thankyou.html
<html>
<head>
<title>Thank you</title>
</head>
<body>
<H1>Thank you for inserting data </H1>
</body>
</html>
12.6 การพัฒนาไฟล์ struts-config.xml [Controller]
ไฟล์ Struts-config.xml เปน็ ไฟล์ในการควบคมุ การทำงานของโปรแกรม Struts ซงึ่ ในทน่ี ้จี ะใช้ในการกำหนด
ลำดับการทำงานของเวบ็ (Navigation Rule) โดยมีขั้นตอนการพฒั นาคือ เปดิ Configuration ช่ือ
/WEB-INF/struts-config.xml ออกมา
1. เพิ่มให้ struts ร้จู กั กบั โปรแกรม Java ท่เี ราสร้างขึ้นมาคือ
- BookFormBean.java
- AddBookAction.java
โดยระบุ package.classname ลงไปที่ attribute type และชือ่ เรียกคอื name
<!-- ======= Form Bean Definitions -->
<form-beans>
<form-bean name="addBookAction" type="model.AddBookAction"></form-bean>
<form-bean name="BookFormBean" type="model.BookFormBean"></form-bean>
</form-beans>
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
112
2. ระบุการทำงาน สร้างความสัมพนั ธใ์ หก้ ับ Struts วา่ กรณมี ี หน้า Webpage JSP ส่งขอ้ มลู ไปให้ Servlet เพอ่ื
ใหบ้ ันทึกข้อมลู ให้ Framework มาอ่าน Configuration ตรงนเ้ี พื่อตดั สินใจว่าใหท้ ำอะไร
1. Browser สง่ ขอ้ มลู แบบ post เข้ามา
2. Controller ทำการแปล path โดยดทู ี่ attribute path=”/addBookAction”
หา action ว่าจะไปทไี่ หน โดยดูจาก attribute type => “model.AddBookAction.java”
ตอ่ ไปดูวา่ ข้อมูลมาจากหน้าจอไหน โดยดูที่ attribute input=”/addBook.jsp”
และ JSP ทีส่ ง่ ข้อมลู มาน้ี จะเก็บขอ้ มูลลงท่ี FormBean ชื่ออะไร ดู attribute name = BookFormBean
(จะไป map ช่อื class ท่ี tag <form-bean name="BookFormBean" type="model.BookFormBean"/>)
และเก็บไวใ้ น scope ไหน ดทู ี่ attribute scope = “session”
เมื่อได้ขอ้ มลู เกบ็ ลง FormBean แล้ว Action ก็จะทำงาน เสร็จส้ินก็จะมกี าร return คา่ กลับไปว่า
Business Logic ทำงานถูกหรอื ไม่ โดยกำหนดที่ tag <forward name="success" path="/Thankyou.html"/>
ถ้าถูกตอ้ ง ภายในโปรแกรม Action ก็จะสง่ั ให้ return mapping.fndForward("success") กลับไป
<!-- ============= Action Mapping Definitions -->
<action-mappings>
<action
path="/addBookAction"
type="model.AddBookAction"
input="/addBook.jsp"
name="BookFormBean"
scope="session" >
<forward name="success" path="/Thankyou.html"/>
</action>
12.7 การทดสอบโปรแกรม
1. ทำการ Build และ Deploy โปรแกรม StrutDBApp
2. Run โปรแกรม StrutDBApp
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
113
3. เลือก URL ของ Web Browser เปน็ http://localhost:8080/StrutDBApp/AddBook.jsp ใหเ้ รา ทดลองใส่
ขอ้ มลู ดังรปู ที่ 12.12
รูปที่ 12.12 ตวั อยา่ งการป้อนขอ้ มลู เขา้ Table ชื่อ Books
4. เม่ือกดป่มุ Add โปรแกรมกจ็ ะใสข่ อ้ มลู ลงใน Database
5. เราสามารถทจ่ี ะดูข้อมลู ท่ีปอ้ นเขา้ ไปได้ โดยไปที่ Tool ของ MySQL ช่อื MySQL Workbench
ดงั รปู ท่ี 12.14
รปู ท่ี 12.13 ตวั อยา่ งการป้อนขอ้ มลู เข้า Table ชื่อ Books
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
114
Exercise 13 การพัฒนาโปรแกรมเว็บโดยใช้ JSF Framework
เนอื้ หาทีต่ ้องศกึ ษาก่อน การพัฒนาโปรแกรมเว็บเพ่ือตดิ ต่อกับฐานข้อมูล
โปรแกรมในบทน้ีจะเป็นการพฒั นาโปรแกรม Web Application โดยใช้ JSF Framework ทัง้ นจ้ี ะเป็นการ
ปรบั ปรงุ โปรแกรมเว็บเพ่อื ติดตอ่ กบั ฐานข้อมลู โดยจะทำให้ผู้ใชส้ ามารถทจี่ ะ Validate Data ที่ป้อนขอ้ มูลได้ และ
เปลี่ยนแปลงวิธีการอ่านพารามิเตอรโ์ ดยใช้ Java Server Faces (JSF) Framework
ขนั้ ตอนในการพฒั นาโปรแกรม
1. สร้างโปรเจค็ JSFDBApp โดยเตรียม Library ของ JSF Framework และ JSTL
2. สรา้ งหนา้ จอรับ Input โดยสร้าง addBook.jsp และ พฒั นาสว่ นตรวจสอบ(Validation ขอ้ มลู )
3. สรา้ งหน้าจอแสดงผลจาก การเพ่ิมขอ้ มูล คือ thankyou.html , inserterror.html
4. สร้าง Business Logic ใช้ JSF Framework : BookBean.java และ Config Managed Bean
5. กำหนด Navigation Rule โดยการแก้ไข faces-config.xml
13.1 สร้างโปรเจ็ค JSFDBApp
1. เลอื กเมนู File → New → Project
เลอื กรูป Folder ช่อื Web และเลอื ก Dynamic Web Project ดงั รูปท่ี 1.2
รปู ที่ 13.1 การสร้างโปรเจค็ Web Application
2. ให้กำหนด Project Name = JSFDBApp
เลอื ก Configuration = JavaServer Faces v1.2 Project
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
115
รปู ท่ี 13.2 การกำหนดชอ่ื และเลอื กใช้ JSF Frameworks ของ Web Project
3. กด Next เลอื กทเี่ กบ็ class , เลอื ก Web Module จนมาถึงหน้า JSF Capability
เลือก Disable Library Configuration กรณีทไี่ ด้ Download JSF library มาแล้ว กด finish
รูปที่ 13.3 การกำหนดชื่อ และเลือกใช้ JSF Frameworks ของ Web Project
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
116
4. Configuration Library ท่ี JSF ต้องการ ซึง่ จะมี JSF Frameworks และ JSTL Library
โดย Copy Library .jar file ไปวางท่ี lib ของ Web Project ดังรูปที่ 13.4
รปู ที่ 13.4 Configuration Library ที่ JSF ตอ้ งการ
13.2 การพัฒนาโปรแกรม JSF Managed Bean
JSF Framework จะใช้ Java Bean เชื่อมโยงค่าพารามิเตอรร์ ะหวา่ ง JSP และ JAVA Class
JSF Managed Bean จะเปน็ โปรแกรม Java ทมี ีค่า attribute สอดคลอ้ งกบั ชอ่ื พารามเิ ตอรท์ จี่ ะปอ้ น
และจะมเี มธอด getter และ setter ที่สอดคลอ้ งกับ attribute ดงั กล่าว ซึง่ ในแบบฝึกหดั นจี้ ะกำหนดให้ผ้ใู ชต้ อ้ งป้อน
พารามเิ ตอร์ทมี่ ชี ่ือตา่ งๆ ดังนี้
● isbn เปน็ ชนิด String
● title เปน็ ชนดิ String
● author เป็นชนิด String
● price เปน็ ชนดิ float
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
117
ข้นั ตอนการสร้าง BookBean
1. สร้าง Java Class ช่ือ BookBean.java โดยอยู่ใน package ชอื่ bean
2. กำหนด variable ตามที่เราต้องการรบั คา่ จากหนา้ จอ JSP
private String isbn;
private String title;
private String author;
private float price;
3. คลิกขวาท่ี source code แลว้ เลอื ก source → Generate Getter
4. สรา้ ง Method addBook( ) เพื่อนำข้อมูลเกบ็ ลงใน table
......
.......
public class BookBean {
private String isbn;
private String title;
private String author;
private float price;
@Resource(name = "jdbc/test")
private DataSource ds;
private Connection conn;
public String addBook() throws SQLException {
try {
getDBConn();
Statement stmt = conn.createStatement();
String sql = "insert into books values ('"
+ getIsbn() + "','"
+ getTitle()+ "','"
+ getAuthor()+ "','"
+ getPrice()+ "')";
stmt.executeUpdate(sql);
return "success";
} catch (Exception e) {
e.printStackTrace();
}
return "failure";
}
public void getDBConn() throws SQLException {
if (conn == null) {
conn = ds.getConnection();
}
}
........
.......
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
118
13.3 สร้างหน้าจอรับ Input โดยสรา้ ง addBook.jsp และ พัฒนาสว่ นตรวจสอบ(Validation ขอ้ มูล)
รปู ท่ี 13.5 หน้าจอ JSP เพอื่ ใชใ้ นการรบั คา่
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JSF Books DB</title></head>
<body>
<b>Add A New Book</b>
<f:view>
<h:form>
<h:inputText id="isbn" value="#{bookBean.isbn}"
required="true" requiredMessage="ISBN is required!"
validatorMessage="Only 5 to 10 digits!">
<f:validateLength minimum="5" maximum="10" />
</h:inputText>
<h:message for="isbn" />
<br>
<h:inputText id="title" value="#{bookBean.title}"
required="true" requiredMessage="TITLE is required!">
<f:validateLength maximum="70" />
</h:inputText>
<h:message for="title" />
<br>
<h:inputText id="author" value="#{bookBean.author}"
required="true" requiredMessage="AUTHOR is required!">
<f:validateLength maximum="50" />
</h:inputText>
<h:message for="author" />
<br>
<h:inputText id="price" value="#{bookBean.price}"
required="true" requiredMessage="PRICE is required!"
validatorMessage="Only Numeric and at Least 1 baht">
<f:validateDoubleRange minimum="1" />
</h:inputText>
<h:message for="price" />
<br>
<h:commandButton type="submit" id="btnAddBook"
value="ADD"
action="#{bookBean.addBook}"/>
<br>
</h:form>
</f:view>
</body>
</html>
จาก Sourcecode jsp ดา้ นบน ประกอบไปด้วยการสรา้ ง Validation ที่ field โดยจะอย่ภู ายใน <h:inputText >
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
119
ประกอบดว้ ย attribute ท่ีใชต้ รวจสอบ เช่น
required="true" แสดงถงึ field น้ี ต้องการข้อมูล และ ถ้าไม่มขี ้อมลู ก็จะแสดง attribute ทเี่ ป็น message
ของ validator นัน้ ๆ ซ่ึงกค็ อื requiredMessage="ISBN is required!"
<f:validateDoubleRange minimum="1" /> แสดงถงึ field นี้ ต้องการค่า double และอยา่ งนอ้ ยตอ้ งมี
value คอื 1 และถา้ ค่านัน้ ไมส่ ามารถแปลงเป็น double หรือ มคี ่าน้อยกวา่ 1 ก็จะแสดง attribute ท่เี ปน็ message ของ
นน้ั ๆ คือvalidator validatorMessage="Only Numeric and at Least 1 baht"
13.4 สร้าง thankyou.html, error.html
13.5 การกำหนด Page Navigation
1. เปิด File \WEB-INF\faces-config.xml
2. ไปท่ี tab Navigation Rule
3. เปิด palette คลิกเลือก page แลว้ ไปคลิกท่ี Screen ว่างๆ เพอ่ื สรา้ งมุมมองหน้า page นัน้ ๆ
รูปที่ 13.6 การวาง page ลงใน Navigator Area
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
120
4. เลอื กใหค้ รบทั้ง 3 files
รูปที่ 13.7 แสดงการใช้ palette ช่วยสรา้ ง Navigator Rule
5. สรา้ งความสมั พันธ์โดยไปที่ palette เลอื กที่ Link จากนน้ั ไปคลิกที่ addBook.jsp ลากลงมา drop ที่ icon ของ
thankyou.html และ inserterror.html
รูปท่ี 13.8 เม่อื ลาก Link เชอื่ มต่อ ครบแลว้
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
121
รปู ท่ี 13.9 สามารถปรับ Properties ในสว่ นของ Link ได้
โดย double click ให้มาเอง
ดูจาก Method ทจี่ ะมี Return เป็น String ออกมา รณนี ้ถี า้ สำเรจ็ จะ return String=success ถ้าไม่
สำเร็จจะเปน็ failure
ดังน้นั ถา้ success ให้แสดงหน้า thankyou.html โดย set properties ที่ form-outcome เปน็ success
และอีกเสน้ กท็ ำเชน่ เดยี วกัน from-outcome แตเ่ ปน็ failure
รูปท่ี 13.10 การปรับแตง่ Link ท่เี ช่ือมตอ่ ไม่ได้
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
122
6. จะไดเ้ ป็นรปู ท่สี มบรู ณอ์ อกมาดงั รูป
รปู ที่ 13.11 Navigator ที่มกี ารกำหนด properties เรยี บร้อยแลว้
13.6 การทดสอบโปรแกรม
1. Restart Server และ Run โปรแกรม JSFDBApp
2. เลอื ก URL ของ Web Browser เปน็ http://localhost:8080/JSFDBApp/addBook.jsp
ใหท้ ดลองใสข่ ้อมลู
3. เมื่อกดปุ่ม Add โปรแกรมก็จะใส่ข้อมลู ลงใน Database
4. เราสามารถท่ีจะดขู ้อมลู ที่ป้อนเข้าไปได้ โดยไปที่ MySQL Workbench แล้วดูจาก Table ที่ชือ่ books
5. ถา้ ผลลัพธห์ น้า thankyou.html ใน table ก็มขี ้อมูลนนั้ ๆ อยู่
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
123
Exercise 14 การ Authentication โดยใช้ Tomcat
เน้อื หาที่ต้องศึกษากอ่ น -
แบบฝกึ หัดนี้จะเป็นการพฒั นาโปรแกรมเว็บทต่ี ้องมกี ารทำ Authentication โดยการต้ังคา่ configuration ของ
Tomcat Web Server โดยจะเปน็ การล็อกอนิ โดยใช้ Basic Configuration และ Form Based Configuration
และ จะทดสอบการเปลย่ี น realm ของ Tomcat จากไฟล์ tomcat-users.xml เปน็ การใช้ MySQL Database
14.1 สรา้ ง Web Application Project
1. เลอื กเมนู File → New → Dynamic Web Project
กำหนด Project Name = SecurityWebApp
2. ทำการพัฒนาโปรแกรม admin.html ดงั Listing ที่ 14.1
3. ทำการพัฒนาโปรแกรม user.html ดัง Listing ท่ี 14.2
Listing ที่ 14.1 โปรแกรม admin.html
<html>
<head>
<title>ADMIN</title>
</head>
<body>
<h1>Admin Page</h1>
</body>
</html>
Listing ที่ 14.2 โปรแกรม user.html
<html>
<head>
<title>USER</title>
</head>
<body>
<h1>User Page</h1>
</body>
</html>
14.2 เพ่มิ User ของ Tomcat Web Server
โดยทั่วไป Tomcat-Web-Server จะใช้ Realm ที่เป็น Flat File โดยเกบ็ ไว้ใน File ทช่ี ือ่ tomcat-users.xml ขนั้
ตอนน้ีจะเปน็ การเพมิ่ User โดยการปรบั ปรงุ ไฟล์ดังกลา่ วโดยมีข้ันตอนการพฒั นาโปรแกรมดังน้ี
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
124
1. ให้ Project ชือ่ Servers เลือก ชือ่ Server → tomcat-users.xml
ดงั ตัวอยา่ งในรูปท่ี 14.1 และทำการเพมิ่ user password ลงไปใน Tomcat Server
ใน Listing ที่ 14.3
รูปท่ี 14.1 เพม่ิ user และ roles ที่ Apache Tomcat
Listing ท่ี 14.3 ไฟล์ tomcat-users.xml
.......
<role rolename="admin"/>
<role rolename="user"/>
<user username="admin" password="admin" roles="admin" />
<user username="tomcat" password="tomcat" roles="admin" />
<user username="user" password="user" roles="user" />
.......
2. Restart Tomcat เพอ่ื ใหอ้ า่ น config ใหมท่ เ่ี ราแก้เขา้ ไป
โดยไปท่ี tab Server → คลิกขวาท่ีชอื่ server แลว้ เลอื ก restart
14.3 การ Config ไฟล์ web.xml ของ Web Application ที่ต้องการใช้ Tomcat user
เราสามารถท่จี ะกำหนดใหม้ กี ารทำ Authenticate และ Authorization ผใู้ ช้ทีจ่ ะเขา้ URL ใดๆของ Web
Application และกำหนดสทิ ธใิ นการเขา้ โดยองิ กบั role (Role Based Authorization)โดย config ไฟล์ web-xml
ในข้ันตอนนีจ้ ะเป็นการกำหนดใหผ้ ้ใู ชท้ ม่ี ี role เปน็ admin สามารถที่จะเขา้ ใช้ไฟล์ admin.html และ user.html ได้
สว่ นผใู้ ชท้ ีม่ ี role เป็น user สามารถท่ีจะเขา้ ใชไ้ ด้เฉพาะไฟล์ user.html เท่านนั้ โดยมขี ั้นตอนดงั น้ี
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
125
ขนั้ ตอนการ Configuration
1. เปดิ ไฟล์ web.xml ของ Project ทีช่ ่ือ SecurityWebApp
เพ่มิ บรรทัด บอกวา่ เป็นการ authen แบบ Basic
<login-config>
<auth-method>BASIC</auth-method>
</login-config>
2. เพม่ิ บรรทดั ระบุ Security Roles = 2 roles คอื user และ admin
<security-role>
<role-name>admin</role-name>
</security-role>
<security-role>
<role-name>user</role-name>
</security-role>
3. สรา้ งความสมั พันธ์ระหวา่ ง Web page ของ Project กับ User บน Tomcat
@@ กรณหี น้า admin.html เขา้ ถงึ โดยผูม้ ี role เป็น admin เทา่ นนั้
กำหนดURL Pattern ที่ตอ้ งการจำกดั การเข้าถึงเป็น /admin.html
กำหนด Name เป็น Admin Page
กำหนด ผเู้ ข้าถงึ URL น้ีได้ คือผทู้ ่ีอยใู่ น Roles = admin เท่าน้นั
<security-constraint>
<web-resource-collection>
<url-pattern>/admin.html</url-pattern>
<web-resource-name>Admin Page</web-resource-name>
</web-resource-collection>
<auth-constraint>
<role-name>admin</role-name>
</auth-constraint>
</security-constraint>
@@ กรณหี นา้ user.html เข้าถึงโดยผูม้ ี role เป็น user และ admin
กำหนดURL Pattern ทตี่ อ้ งการจำกัดการเขา้ ถึงเป็น /user.html
กำหนด Name เปน็ User Page
กำหนด ผ้เู ข้าถงึ URL นีไ้ ด้ คอื ผู้ที่อย่ใู น Roles = admin
<security-constraint>
<web-resource-collection>
<url-pattern>/user.html</url-pattern>
<web-resource-name>User Page</web-resource-name>
</web-resource-collection>
<auth-constraint>
<role-name>user</role-name>
<role-name>admin</role-name>
</auth-constraint>
</security-constraint>
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
126
Listing ที่ 14.4 ไฟล์ tomcat-users.xml
.......
<login-config>
<auth-method>BASIC</auth-method>
</login-config>
<security-role>
<role-name>admin</role-name>
</security-role>
<security-role>
<role-name>user</role-name>
</security-role>
<security-constraint>
<web-resource-collection>
<url-pattern>/admin.html</url-pattern>
<web-resource-name>Admin Page</web-resource-name>
</web-resource-collection>
<auth-constraint>
<role-name>admin</role-name>
</auth-constraint>
</security-constraint>
<security-constraint>
<web-resource-collection>
<url-pattern>/user.html</url-pattern>
<web-resource-name>User Page</web-resource-name>
</web-resource-collection>
<auth-constraint>
<role-name>user</role-name>
<role-name>admin</role-name>
</auth-constraint>
</security-constraint>
.......
14.4 การทดสอบโปรแกรมแบบ Basic Authenticate
1. ทำการ Build และ Deploy โปรเจ็ค SecurityWebApp
2. รนั โปรแกรม http://localhost:8080/SecurityWebApp/admin.html โปรแกรมเวบ็ Browser จะแสดง
ไดอะลอ็ กล็อกอินให้ผู้ใช้ปอ้ นดังรปู ที่ 14.2
รูปที่ 14.2 หน้าตา่ งลอ็ กอนิ
3. ใหท้ ดลองป้อนชือ่ ผู้ใชแ้ ละรหสั ผ่านเปน็ admin และ admin โปรแกรมจะสามารถแสดงขอ้ ความในหนา้ เวบ็
admin.html ได้
4. ปดิ โปรแกรมเว็บ Browser จากนน้ั เปดิ ขึ้นมาใหม่ แลว้ ทดลองปอ้ นช่ือผใู้ ชแ้ ละรหสั ผ่านเป็น user และ user
จะเห็นว่าไมส่ ามารถเขา้ หน้าเว็บน้ีได้
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
127
5. ทดลองทำซ้ำกบั URL ช่ือ http://localhost:8080/SecurityWebApp/user.html จะเห็นว่า url นี้จะอนุญาตให้
user ท้ังสองใชไ้ ด้
14.5 การปรับปรงุ โปรแกรมเพือ่ ให้ใช้ Login Form
ขนั้ ตอนน้ีจะเปน็ การปรบั ปรงุ โปรเจค็ SecurityWebApp ใหม้ ีทำการล็อกอนิ โดยใช้ Form ท่ีสรา้ งข้ึนโดยใช้
ไฟล์ Login.html ซึง่ ถา้ ไม่สามารถล็อกอนิ ได้ ให้สง่ ตอ่ ไปท่ี Error.html โดยมีขั้นตอนการพฒั นาโปรแกรมดังนี้
1. สร้างหนา้ page เพอื่ ใช้ login ชื่อ login.html ดงั Listing ท่ี 14.4
2. สรา้ งหน้า error.html เมอ่ื กรณปี อ้ น username หรอื password ไม่ถูก ดงั Listing ที่ 14.5
3. แกไ้ ข web.xml เพอ่ื ระบรุ ปู แบบใหเ้ ปน็ Form โดยใช้หนา้ Form คือ login.html รับค่า username
และ password โดยเปลีย่ นจาก
<login-config>
<auth-method>BASIC</auth-method>
</login-config>
เป็นดงั Listing ที่ 14.7
Listing ท่ี 14.5 โปรแกรม Login.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<center>
<H1>Login Form : Sample</H1>
<FORM ACTION="j_security_check" METHOD="POST">
User name :
<INPUT TYPE="TEXT" NAME="j_username" /> <br>
Password :
<INPUT TYPE="PASSWORD" NAME="j_password" /> <br>
<input type="submit" value="Login" />
</FORM>
</center>
</body>
</html>
Listing ที่ 14.6 โปรแกรม Error.html
<html>
<head><title>ERROR</title></head>
<body>
<H1>Error unauthorized user</H1>
</body>
</html>
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
128
Listing ท่ี 14.7 โปรแกรม web.xml
14.6 .......
<login-config>
<auth-method>FORM</auth-method>
<realm-name>AdminApplication</realm-name>
<form-login-config>
<form-login-page>/login.html</form-login-page>
<form-error-page>/error.html</form-error-page>
</form-login-config>
</login-config>
.......
การทดสอบโปรแกรม แบบ Form Authenticate
ใช้การทดสอบแบบเดยี วกนั กบั แบบ Basic Authenticate
14.7 การปรบั ปรุงโปรแกรม เพื่อใช้ Authenticate โดยอา่ นจาก Database MySQL
เราสามารถเลอื ก Realm ของ Tomcat Web Server ในรปู แบบอน่ื ๆได้นอกเหนือจากการใช้ไฟล์
เช่นการใช้ Database หรอื Directory Server ในที่น้จี ะทดลองกำหนด Realm ให้เปน็ MySQL
จะต้องทำการสร้าง Table ขนึ้ มาสองชดุ คือ users และ userrole โดยมีข้นั ตอนการพัฒนาโปรแกรมดงั น้ี
1. เปิดโปรแกรม MySQL Workbench แล้วทำการสร้าง Table ขน้ึ มา 2 tables
โดยใช้ Tool ทเี่ ป็น Wizard หรือ SQL Statement กไ็ ด้
SQL Statement เพอ่ื สร้าง table
create table users (
user_name varchar(45) not null primary key,
pass_word varchar(45) not null
);
create table userrole (
user_name varchar(45) not null,
role_name varchar(45) not null,
primary key (user_name, role_name)
);
จากนัน้ กด Icon รปู สายฟ้าสีเหลอื งเพอื่ รนั หรือ Highlight คำสั่งแล้วกดปมุ่ Ctrl + Enter
2. ทดลองปอ้ นข้อมลู ใส่ลงใน Table โดยต้องกำหนด password และ role
3. ทำการปรบั ปรุงไฟล์ server.xml ของ Apache Tomcat
โดยไปท่ี Project Server → Tomcat v6.0 Server → Server.xml แลว้ เปลี่ยนจาก
<Realm className="org.apache.catalina.realm.UserDatabaseRealm"
resourceName="UserDatabase"/>
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
129
เป็น
<Realm className="org.apache.catalina.realm.JDBCRealm" debug="99"
driverName="com.mysql.jdbc.Driver"
connectionURL="jdbc:mysql://localhost/test"
connectionName="root"
connectionPassword="xxx"
userTable="users" userRoleTable="userrole"
userNameCol="user_name" userCredCol="pass_word"
roleNameCol="role_name" />
โดยที่ xxx คอื password ของฐานขอ้ มูล MySQL ในทน่ี ีใ้ ช้ password = root
4. ทำการ Restart Tomcat เพ่ือให้อ่าน config ทแ่ี กไ้ ป
14.8 การทดสอบโปรแกรม แบบ Database Authenticate
ใช้การทดสอบแบบเดยี วกนั กับ แบบ Basic Authenticate
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
webprogramming-eclipse
Discover the best professional documents and content resources in AnyFlip Document Base.
Search