jsf

JSF – Làm việc với CƠ SỞ DỮ LIỆU

JSF – Làm việc với CƠ SỞ DỮ LIỆU

Trong bài này, chúng ta làm việc với JSF kết nối cơ sở dữ liệu sử dụng JDBC thể liệt kê 1 bảng dữ

liệu, thêm mẫu tin mới, cập nhật thông tin của dòng dữ liệu cũng như xóa 1 dòng dữ liệu. Giả sử

Database được thiết kế như sau:

Sau khi hoàn tất, ta có giao diện như sau:

Khi nhấn link “Insert New” sẽ cho ta trang thêm Lớp học mới

Khi nhấn Link Edit, sẽ load thông tin của dòng được chọn và cho hiệu chỉnh

http://vovanhai.files.wordpress.com/2010/12/clip_image0021.jpg


http://vovanhai.files.wordpress.com/2010/12/clip_image005.png

Khi nhấn link Delete, sẽ xóa dòng được chọn.

Trong ví dụ này tôi dùng NetBeans IDE để thiết kế (Eclipse hay IDE khác cũng vậy)

Bước 1: Tạo 1 Web Application mới, chọn Framework là Java Server Faces như hình


Bước 2: Tạo Manage-bean

001 package vovanhai.wordpress.com;

002

003 import java.sql.Connection;

004 import java.sql.DriverManager;005 import java.sql.PreparedStatement;

006 import java.sql.ResultSet;

007 import java.util.ArrayList;

008 import javax.faces.component.UIComponent;009 import javax.faces.component.html.HtmlDataTable;

010 import javax.faces.event.ActionEvent;

011

012 /**

013 *

014 * @author VoVanHai

015 */


016 public class LophocBean {

017

018 private String msLop;

019 private String tenLop;

020 private String tenGVCN;

021

022 /** Creates a new instance of LophocBean */

023 public LophocBean() {

024 }

025

026 public LophocBean(String msLop, String tenLop, String tenGVCN) {

027 this.msLop = msLop;

028 this.tenLop = tenLop;029 this.tenGVCN = tenGVCN;

030 }

031

032 public String getMsLop() {033 return msLop;

034 }

035

036 public void setMsLop(String msLop) {037 this.msLop = msLop;

038 }

039

040 public String getTenGVCN() {041 return tenGVCN;

042 }

043

044 public void setTenGVCN(String tenGVCN) {045 this.tenGVCN = tenGVCN;

046 }

047

048 public String getTenLop() {049 return tenLop;

050 }

051

052 public void setTenLop(String tenLop) {053 this.tenLop = tenLop;

054 }

055

056 /**057 * Liệt kê các record của bảng lớp học để hiển thị lên table

058 * @return

059 */

060 public ArrayList<LophocBean> getAllLophoc() {061 ArrayList<LophocBean> lst = new ArrayList<LophocBean>();

062 try {

063

Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");

064

Connection con = DriverManager.getConnection("jdbc:sqlserver://localhost:1433;databaseName=GC0563", "sa", "");

065 ResultSet rs = con.createStatement().executeQuery("select * from Lophoc");

066 while (rs.next()) {

067 LophocBean lh = new LophocBean(

068 rs.getString(1),

069 rs.getString(2),

070 rs.getString(3));071 lst.add(lh);

072 }

073 con.close();

074 } catch (Exception e) {075 e.printStackTrace();

076 }

077

078 return lst;079 }

080

081 /**

082 * Action dùng để insert 1 mẫu tin mới083 * @return success nếu thành công

084 */

085 public String InsertNew() {

086 try {

087


088


089 String sql = "insert into lophoc values(?,?,?)";

090 PreparedStatement ps = con.prepareStatement(sql);

091 ps.setString(1, msLop);

092 ps.setString(2, tenLop);

093 ps.setString(3, tenGVCN);

094 int x = ps.executeUpdate();

095 if (x > 0) {

096 return "success";

097 }

098 } catch (Exception e) {099 e.printStackTrace();

100 }

101 return "failed";

102 }

103

104 /**105 * Action delete dùng để xóa mẫu tin được chọn

106 * @param evt

107 */

108 public void deleteAction(ActionEvent evt) {

109 // We get the table object

110 HtmlDataTable table = getParentDatatable((UIComponent) evt.getSource());

111 // We get the object on the selected line.

112 Object o = table.getRowData();

113 LophocBean selLh = (LophocBean) o;

114 try {

115


116


117 String sql = "delete lophoc where msLop=?";

118 PreparedStatement ps = con.prepareStatement(sql);119 ps.setString(1, selLh.msLop);

120 ps.executeUpdate();

121 } catch (Exception e) {

122 e.printStackTrace();123 }

124 }

125

126 /**127 * Action dùng để chọn mẫu tin cần cập nhật

128 * @param evt

129 */

130 public void editBook(ActionEvent evt) {

131 // We get the table object

132 HtmlDataTable table = getParentDatatable((UIComponent) evt.getSource());

133 // We get the object on the selected line.

134 Object o = table.getRowData();

135 LophocBean lh = (LophocBean) o;

136 this.msLop = lh.msLop;

137 this.tenLop = lh.tenLop;

138 this.tenGVCN = lh.tenGVCN;139 }

140

141 // Method to get the HtmlDataTable.

142 private HtmlDataTable getParentDatatable(UIComponent compo) {143 if (compo == null) {

144 return null;

145 }

146 if (compo instanceof HtmlDataTable) {147 return (HtmlDataTable) compo;

148 }

149 return getParentDatatable(compo.getParent());

150 }

151

152 /**153 * Cập nhật dữ liệu được chọn lên cơ sở dữ liệu.

154 * @return

155 */

156 public String update() {

157 try {

158 Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");

159


160

String sql = "update lophoc set tenLop=?, tenGVCN=? where msLop=?";

161 PreparedStatement ps = con.prepareStatement(sql);

162 ps.setString(1, tenLop);

163 ps.setString(2, tenGVCN);

164 ps.setString(3, msLop);

165 int x = ps.executeUpdate();

166 if (x > 0) {

167 return "success";

168 }

169 } catch (Exception e) {

170 e.printStackTrace();

171 }

172 return "failed";173 }

174 }

Bước 3: Thiết kế giao diện

Tạo trang liệt kê danh sách các lớp học: Lophoc.jsp

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

02

03 <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>04 <%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

05

06 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"07 "http://www.w3.org/TR/html4/loose.dtd">

08 <f:view>

09 <html>

10 <head>

11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

12 <title>JSP Page</title>

13 </head>

14 <body>

15 <h1 align="center">DANH SÁCH LỚP HỌC</h1>

16 <h:form id="frm">

17 <h:dataTable width="100%" border="1"

18 var="lh" id="table"

19 value="#{lophoc.allLophoc}"

20 >

21 <h:column id="ms" headerClass="headertext">

22 <f:facet name="header">

23 <h:outputText style="headerText" value="Mã số Lớp"/>

24 </f:facet>

25 <h:outputText id="ml" value="#{lh.msLop}"/>

26 </h:column>

27 <h:column id="ten" headerClass="headertext">


29 <h:outputText style="headerText" value="tên Lớp"/>

30 </f:facet>

31 <h:outputText id="tl" value="#{lh.tenLop}"/>

32 </h:column>

33 <h:column id="gv" headerClass="headertext">


35 <h:outputText style="headerText" value="Giáo viên chủ nhiệm"/>

36 </f:facet>

37 <h:outputText id="gvcn" value="#{lh.tenGVCN}"/>

38 </h:column>

39 <h:column id="actions" headerClass="headertext">


41 <h:commandLink value="Insert New" action="insert" immediate="true"/>

42 </f:facet>

43 <h:commandLink value="Edit" immediate="true"

44

actionListener="#{lophoc.editB

ook}" action="edit"/> -45

<h:commandLink value="Delete" actionListener="#{lophoc.deleteAction}"/>

46 </h:column>

47

48 <%--<f:facet name="footer">

49 <h:panelGroup style="align:right">

50 <h:outputLabel value="Number of records"/>

51 </h:panelGroup>

52 </f:facet>--%>

53 </h:dataTable>

54 </h:form>

55 </body>

56 </html>

57 </f:view>

Trang edit.jsp



04

05 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

06 "http://www.w3.org/TR/html4/loose.dtd">

07

08 <f:view>

09 <html>

10 <head>



13 </head>

14 <body>

15 <h1 align="center"><h:outputText value="Hiệu chỉnh thông tin học sinh"/></h1>

16 <h:form>

17 <h:panelGrid columns="2">

18 <h:outputLabel for="ms" value="Mã số lớp"/>

19 <h:inputText id="ms" value="#{lophoc.msLop}" readonly="true"/>

20

21 <h:outputLabel for="ht" value="Tên lớp"/>

22 <h:inputText id="ht" value="#{lophoc.tenLop}"/>

23

24 <h:outputLabel for="gv" value="Tên GVCN"/>25 <h:inputText id="gv" value="#{lophoc.tenGVCN}"/>

26 </h:panelGrid>

27 <h:commandButton value="Update" action="#{lophoc.update}"/>

28 </h:form>

29 </body>

30 </html>

31 </f:view>

Trang insert.jsp



04



07

08 <f:view>

09 <html>

10 <head>



13 </head>

14 <body>

15 <h1 align="center"><h:outputText value="Thêm lớp học mới"/></h1>

16 <h:form>

17 <h:panelGrid columns="2">

18 <h:outputLabel for="ms" value="Mã số lớp"/>19 <h:inputText id="ms" value="#{lophoc.msLop}"/>

20 <h:outputLabel for="ht" value="Tên lớp"/>

21 <h:inputText id="ht" value="#{lophoc.tenLop}"/>

22 <h:outputLabel for="gv" value="Tên GVCN"/>

23 <h:inputText id="gv" value="#{lophoc.tenGVCN}"/>

24 </h:panelGrid>

25 <h:commandButton value="Insert" action="#{lophoc.InsertNew}"/>

26 </h:form>

27 </body>

28 </html>

29 </f:view>

Trang error.jsp cho việc hiển thị lỗi



04



07

08 <f:view>

09 <html>

10 <head>



13 </head>

14 <body>

15 <h1><h:outputText value="Error"/></h1>

16 </body>

17 </html>

18 </f:view>

Bước 4: Cấu hình

Facees-config.xml ở dạng PageFlow

dạng XML

01 <?xml version='1.0' encoding='UTF-8'?>

02

03 <faces-config version="1.2"

04 xmlns="http://java.sun.com/xml/ns/javaee"05 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"06 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee


07 http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">

08 <managed-bean>

09 <managed-bean-name>lophoc</managed-bean-name>

10 <managed-bean-class>vovanhai.wordpress.com.LophocBean</managed-bean-class>

11 <managed-bean-scope>session</managed-bean-scope>

12 </managed-bean>

13 <navigation-rule>

14

15 </navigation-rule>


17 <from-view-id>/Lophoc.jsp</from-view-id>

18 <navigation-case>

19 <from-outcome>insert</from-outcome>

20 <to-view-id>/insert.jsp</to-view-id>21 </navigation-case>


23 <from-outcome>edit</from-outcome>

24 <to-view-id>/edit.jsp</to-view-id>25 </navigation-case>



28 <from-view-id>/insert.jsp</from-view-id>


30 <from-outcome>success</from-outcome>31 <to-view-id>/Lophoc.jsp</to-view-id>

32 </navigation-case>


34 <from-outcome>error</from-outcome>35 <to-view-id>/error.jsp</to-view-id>

36 </navigation-case>



39 <from-view-id>/edit.jsp</from-view-id>


41 <from-outcome>success</from-outcome>42 <to-view-id>/Lophoc.jsp</to-view-id>43 </navigation-case>


45 <from-outcome>failed</from-outcome>46 <to-view-id>/error.jsp</to-view-id>47 </navigation-case>


49 </faces-config>

Cấu trúc chương trình sau khi hoàn tất

Bước 5: Thực thi chương trình và thưởng thức

Chúc thành công!

LikeBe the first to like this.

22 Responses to “JSF – Làm việc với CƠ SỞ DỮ LIỆU”


1.

Sgboy17 said

May 4, 2011 at 2:22 am

Chào anh, e nghĩ mãi không ra cách sắp xếp để thêm phần search book. Vấn đề chính là

sau khi nhấn vào nút search, sẽ chuyển qua trang kết quả. Nhưng không thể truyền tham

số search về cho server để thực thi. (thuộc tính value của chưa nhận được giá trị với sql

query có where) .

2.

Đỉnh said

May 31, 2011 at 4:30 am

Dear thầy!

Thầy ơi cho em hỏi, khi em load trang viewAccount.jsp,nó báo là:

‘#{RegisterBean1.getAllAccount}’ Property ‘getAllAccount’ not found on type

demo.RegisterBean1. ( cai getAllAccount cua em chinh la getAllLophoc cua thầy.)

3.

Đỉnh said

May 31, 2011 at 4:46 am

Cai allLophoc la cai nào vậy thầy? nếu là getAllLophoc thì nó là 1 hàm, sao nam trong

thuoc tinh value dc?

4.

Võ Văn Hải said

May 31, 2011 at 2:20 pm

Tữ động nó sẽ bỏ get, viết thường chữ đầu xuống. Đây là nguyên tắc cơ bản.

5.

Đỉnh said

June 1, 2011 at 1:56 am

Yeah! cam on thay, giờ thi em đã hiểu.

6.

Quangtrieu said

September 16, 2011 at 8:33 am

Hi Thay,

Thay cho em hoi chut ah, e lam chuong trinh nhu vi du cua Thay ma khong chay duoc,

Nguyen nhan la no khong mo duoc connec den DB

Chuoi connec cua em la:

Class.forName(“com.microsoft.sqlserver.jdbc.SQLServerDriver”);

Connection con =

DriverManager.getConnection(“jdbc:sqlserver:192.168.100.221;databaseName=qlsv”,

“sa”, “BacAdm1n”);

Kinh mong thay chi dum!

7.

Võ Văn Hải said

September 16, 2011 at 2:25 pm

Bạn chắc là có mở cổng 1433 không đấy? Nếu bạn dùng SQL Studio 2005, 2008 thì mặc

định TCP/IP port bị disable và bạn phải enable nó lên như sau:

Mở “SQL Server Configuration Manager” lên sau đó chọn server instance bên trái, double

mục TCP/IP bên phải, chọn enable=Yes, mở Tab “IP address” gõ port 1433 vào IPAll hoặc

vào tất cả IP.

8.

Trần Công Vương said

October 30, 2011 at 7:57 pm

Em chào thầy ạ.Thầy có thể ví dụ thêm về phần view được không ạ?Bên cạnh 2

commanlink EDIT va DELETE có thêm 1 commanlink la VIEW để khi ta click VIEW thì nó sẽ

qua form khác và trên form đó sẽ hiển thị lên tất cả thông tin của GiaoVienChuNhiem đó

được không ạ?

Mong thầy sẽ cho ví dụ sớm.Em cảm ơn thầy trước.

9.

Khoa said

November 4, 2011 at 5:07 am

javax.faces.el.EvaluationException: java.lang.NullPointerException

at

javax.faces.component.MethodBindingMethodExpressionAdapter.invoke(MethodBindingMe

thodExpressionAdapter.java:102)

at

com.sun.faces.application.ActionListenerImpl.processAction(ActionListenerImpl.java:102)

at javax.faces.component.UICommand.broadcast(UICommand.java:315)

at javax.faces.component.UIViewRoot.broadcastEvents(UIViewRoot.java:794)

at javax.faces.component.UIViewRoot.processApplication(UIViewRoot.java:1259)

at

com.sun.faces.lifecycle.InvokeApplicationPhase.execute(InvokeApplicationPhase.java:81)

at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101)

at com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:118)

at javax.faces.webapp.FacesServlet.service(FacesServlet.java:409)

at

org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java

:290)

at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)

at

org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)

at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)

at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:127)

at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)

at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)

at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:291)

at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:859)

at

org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protoc

ol.java:602)

at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:489)

at java.lang.Thread.run(Thread.java:619)

Caused by: java.lang.NullPointerException

at model.User.checkUser(User.java:85)

at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)

at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)

at

sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)

at java.lang.reflect.Method.invoke(Method.java:597)

at org.apache.el.parser.AstValue.invoke(AstValue.java:191)

at org.apache.el.MethodExpressionImpl.invoke(MethodExpressionImpl.java:276)

at com.sun.faces.facelets.el.TagMethodExpression.invoke(TagMethodExpression.java:105)

at

javax.faces.component.MethodBindingMethodExpressionAdapter.invoke(MethodBindingMe

thodExpressionAdapter.java:88)

… 20 more

Em chào thầy , mong này giúp em sửa lỗi này. Em làm giống vd của thầy.

public String checkUser(){

String sql =”SELECT * FROM users WHERE username=? AND password=?”;

try{

PreparedStatement prepare= getConnectPlane().prepareStatement(sql);

prepare.setString(1, name);

prepare.setString(2, password);

ResultSet rs = prepare.executeQuery();

while(rs.next()){

return “index”;

}

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

return “login”;

}

public Connection getConnectPlane(){

Connection con=null;

try{

Class.forName(“com.mysql.jdbc.Driver”);

con =DriverManager.getConnection(“jdbc:mysql://localhost:3306/phplogin”,”root”,”root”);

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

return con;

}

10.

JSF said


Em chào thầy, em đang làm JSF, để có thể làm được các ví dụ

em cần phải có những bộ thư viện nòa ạ. MOng thầy cung cấp cho em.

Em xin cảm ơn thầy.

11.

JSF said


a4j:ajax event=”keyup” render=”out”

12.

Khoa said


Em chào thầy.

Chúng ta có thẻ truyền tham số vào phần value=”#{lophoc.allLophoc}” dược không ạ.

Giả sử em chỉ muốn search các em lớp 6 or lớp 7 tùy vào mình

public ArrayList getAllLopHoc(int lop_may)

{

tim kiếm trong database WHERE lop=lop_may

}

. SAu khi searcg xong , em muốn trình bày tên của 4 em trên 1 hàng được không ạ.

Mong thầy giúp đỡ.

Em cảm ơn thầy

13.

Khoa said


Em chào thầy , thầy có thể cho em biết em cần những gói thư viện nào để có thể làm các

vd liên quan tới các tag <a4j <rich

Em muốn làm các vd giông trong trang này

http://richfaces-showcase.appspot.com/richfaces/component-sample.jsf?

demo=dataGrid&skin=blueSky

Hiện tại em đang có thư viện JSF 2.1, JSTL1.1

Mong thầy giúp đỡ

14.

Võ Văn Hải said

November 10, 2011 at 1:36 pm

2 thư viện chuẩn của JSF là jsf-api-….jar và jsf-impl-…jar, cái thẻ là thẻ của richfaces, bạn

có thể tìm hiểu thêm ở bài này

15.

Võ Văn Hải said


“Em chào thầy, em đang làm JSF, để có thể làm được các ví dụ

em cần phải có những bộ thư viện nòa ạ. MOng thầy cung cấp cho em.

Em xin cảm ơn thầy.”

Vui lòng tìm kỹ trong blog này sẽ có cau trả lời

16.

Võ Văn Hải said


Nó báo lỗi: Caused by: java.lang.NullPointerException

at model.User.checkUser(User.java:85)

Em coi thử chỗ dòng 85 của file User đó có đảm bảo connection đã thể hiện chưa?

17.

Khoa said

December 7, 2011 at 9:41 am

Thầy có thể chỉ cho em cách chen 1 trang jsf vào 1 trang khác được không.

Ví dụ em tạo ra 1 trang menu, sau đó em chen trang này cho các trang khác.

Trong jsp em dùng jsp:include, còn trong jsf em không biết.

Mong thầy giúp đỡ. Em chúc thầy mạnh khỏe.

18.

Do Dung said

February 23, 2012 at 3:07 pm

anh cho em hoi, trong cai vi du nay cua khi ta xoa duoc roi nhung lam the nao de loading

lai du lieu o chinh cai trang do a

19.

Ken said

May 11, 2012 at 3:25 pm

chao thay! e thac mat la khi minh nhan nut delete thi lam seo biet truyen tham so id cho

no a. thay co the giai thich ro hon dc hk a. mong thay giup do!

20.

Ken said

May 11, 2012 at 3:34 pm

Neu mh truyen tham 1 tham so cho nhu the nay:

Thi ben Lophocbean mh lam seo de nhan tham so nay ha Thay? va lieu e viet nhu vay co

dung chua?…Kinh mong thay giup dum e!

21.

Minh Phúc said

August 8, 2012 at 4:06 am

Chào a, tôi có 2 trang. Trên trang 1 tôi hiển thị dữ liệu từ bean được thiết lập là

SessionScoped, từ trang 1 chuyển qua trang 2 để thực hiện thao tác dữ liệu. Nhưng sau khi

thay đổi dữ liệu thành công và database đã thay đổi nhưng khi quay về trang 1 dữ liệu vẫn

ko thay đổi. Nếu dùng ViewScoped thì ko thể chuyển dữ liệu qua trang 2 được hoặc a có

cách nào giúp chuyển dữ liệu qua trang 2 từ trang 1 ko (trang 2 và trang 1 dùng cùng 1

bean). A có cách nào giúp tôi giải quyết được vấn đề đó ko?

22.

Võ Văn Hải said

August 29, 2012 at 4:08 am

Chào a, tôi có 2 trang. Trên trang 1 tôi hiển thị dữ liệu từ bean được thiết lập là

SessionScoped, từ trang 1 chuyển qua trang 2 để thực hiện thao tác dữ liệu. Nhưng sau khi

thay đổi dữ liệu thành công và database đã thay đổi nhưng khi quay về trang 1 dữ liệu vẫn

ko thay đổi. Nếu dùng ViewScoped thì ko thể chuyển dữ liệu qua trang 2 được hoặc a có

cách nào giúp chuyển dữ liệu qua trang 2 từ trang 1 ko (trang 2 và trang 1 dùng cùng 1

bean). A có cách nào giúp tôi giải quyết được vấn đề đó ko?

Anh có thể send mail cho tôi demo của anh không? nói vầy thật khó trả lời.

jsf

Documents

string tenlop

string tengvcn

selected line

string mslop

tenlop tenlop

tengvcn tengvcn

gt

actionevent