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

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

package vovanhai.wordpress.com;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import javax.faces.component.UIComponent;
import javax.faces.component.html.HtmlDataTable;
import javax.faces.event.ActionEvent;

/**
 *
 * @author VoVanHai
 */
public class LophocBean {

    private String msLop;
    private String tenLop;
    private String tenGVCN;

    /** Creates a new instance of LophocBean */
    public LophocBean() {
    }

    public LophocBean(String msLop, String tenLop, String tenGVCN) {
        this.msLop = msLop;
        this.tenLop = tenLop;
        this.tenGVCN = tenGVCN;
    }

    public String getMsLop() {
        return msLop;
    }

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

    public String getTenGVCN() {
        return tenGVCN;
    }

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

    public String getTenLop() {
        return tenLop;
    }

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

    /**
     * Liệt kê các record của bảng lớp học để hiển thị lên table
     * @return
     */
    public ArrayList<LophocBean> getAllLophoc() {
        ArrayList<LophocBean> lst = new ArrayList<LophocBean>();
        try {
            Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
            Connection con = DriverManager.getConnection("jdbc:sqlserver://localhost:1433;databaseName=GC0563", "sa", "");
            ResultSet rs = con.createStatement().executeQuery("select * from Lophoc");
            while (rs.next()) {
                LophocBean lh = new LophocBean(
                        rs.getString(1),
                        rs.getString(2),
                        rs.getString(3));
                lst.add(lh);
            }
            con.close();
        } catch (Exception e) {
            e.printStackTrace();
        }

        return lst;
    }

    /**
     * Action dùng để insert 1 mẫu tin mới
     * @return success nếu thành công
     */
    public String InsertNew() {
        try {
            Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
            Connection con = DriverManager.getConnection("jdbc:sqlserver://localhost:1433;databaseName=GC0563", "sa", "");
            String sql = "insert into lophoc values(?,?,?)";
            PreparedStatement ps = con.prepareStatement(sql);
            ps.setString(1, msLop);
            ps.setString(2, tenLop);
            ps.setString(3, tenGVCN);
            int x = ps.executeUpdate();
            if (x > 0) {
                return "success";
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "failed";
    }

    /**
     * Action delete dùng để xóa mẫu tin được chọn
     * @param evt
     */
    public void deleteAction(ActionEvent evt) {
        // We get the table object
        HtmlDataTable table = getParentDatatable((UIComponent) evt.getSource());
        // We get the object on the selected line.
        Object o = table.getRowData();
        LophocBean selLh = (LophocBean) o;
        try {
            Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
            Connection con = DriverManager.getConnection("jdbc:sqlserver://localhost:1433;databaseName=GC0563", "sa", "");
            String sql = "delete lophoc where msLop=?";
            PreparedStatement ps = con.prepareStatement(sql);
            ps.setString(1, selLh.msLop);
            ps.executeUpdate();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * Action dùng để chọn mẫu tin cần cập nhật
     * @param evt
     */
    public void editBook(ActionEvent evt) {
        // We get the table object
        HtmlDataTable table = getParentDatatable((UIComponent) evt.getSource());
        // We get the object on the selected line.
        Object o = table.getRowData();
        LophocBean lh = (LophocBean) o;
        this.msLop = lh.msLop;
        this.tenLop = lh.tenLop;
        this.tenGVCN = lh.tenGVCN;
    }

    // Method to get the HtmlDataTable.
    private HtmlDataTable getParentDatatable(UIComponent compo) {
        if (compo == null) {
            return null;
        }
        if (compo instanceof HtmlDataTable) {
            return (HtmlDataTable) compo;
        }
        return getParentDatatable(compo.getParent());
    }

    /**
     * Cập nhật dữ liệu được chọn lên cơ sở dữ liệu.
     * @return
     */
    public String update() {
        try {
            Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
            Connection con = DriverManager.getConnection("jdbc:sqlserver://localhost:1433;databaseName=GC0563", "sa", "");
            String sql = "update lophoc set tenLop=?, tenGVCN=? where msLop=?";
            PreparedStatement ps = con.prepareStatement(sql);
            ps.setString(1, tenLop);
            ps.setString(2, tenGVCN);
            ps.setString(3, msLop);
            int x = ps.executeUpdate();
            if (x > 0) {
                return "success";
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "failed";
    }
}

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

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

<%@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">
<f:view>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>JSP Page</title>
        </head>
        <body>
            <h1 align="center">DANH SÁCH LỚP HỌC</h1>
            <h:form id="frm">
                <h:dataTable width="100%" border="1"                             
                             var="lh" id="table"
                             value="#{lophoc.allLophoc}"
                             >
                    <h:column id="ms" headerClass="headertext">
                        <f:facet name="header">
                            <h:outputText style="headerText" value="Mã số Lớp"/>
                        </f:facet>
                        <h:outputText id="ml" value="#{lh.msLop}"/>
                    </h:column>
                    <h:column id="ten" headerClass="headertext">
                        <f:facet name="header">
                            <h:outputText style="headerText" value="tên Lớp"/>
                        </f:facet>
                        <h:outputText id="tl" value="#{lh.tenLop}"/>
                    </h:column>
                    <h:column id="gv" headerClass="headertext">
                        <f:facet name="header">
                            <h:outputText style="headerText" value="Giáo viên chủ nhiệm"/>
                        </f:facet>
                        <h:outputText id="gvcn" value="#{lh.tenGVCN}"/>
                    </h:column>
                    <h:column id="actions" headerClass="headertext">
                        <f:facet name="header">
                            <h:commandLink value="Insert New"  action="insert" immediate="true"/>
                        </f:facet>
                        <h:commandLink value="Edit" immediate="true" 
                                       actionListener="#{lophoc.editBook}" action="edit"/> -
                        <h:commandLink value="Delete" actionListener="#{lophoc.deleteAction}"/>
                    </h:column>

                    <%--<f:facet name="footer">
                        <h:panelGroup style="align:right">
                            <h:outputLabel value="Number of records"/>
                        </h:panelGroup>
                    </f:facet>--%>
                </h:dataTable>
            </h:form>
        </body>
    </html>
</f:view>

Trang edit.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@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">

<f:view>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>JSP Page</title>
        </head>
        <body>
            <h1 align="center"><h:outputText value="Hiệu chỉnh thông tin học sinh"/></h1>
            <h:form>
                <h:panelGrid columns="2">
                    <h:outputLabel for="ms" value="Mã số lớp"/>
                    <h:inputText id="ms" value="#{lophoc.msLop}" readonly="true"/>

                    <h:outputLabel for="ht" value="Tên lớp"/>
                    <h:inputText id="ht" value="#{lophoc.tenLop}"/>
                    
                    <h:outputLabel for="gv" value="Tên GVCN"/>
                    <h:inputText id="gv" value="#{lophoc.tenGVCN}"/>
                </h:panelGrid>
                <h:commandButton value="Update" action="#{lophoc.update}"/>
            </h:form>
        </body>
    </html>
</f:view>

Trang insert.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@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">

<f:view>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>JSP Page</title>
        </head>
        <body>
            <h1 align="center"><h:outputText value="Thêm lớp học mới"/></h1>
            <h:form>
                <h:panelGrid columns="2">
                    <h:outputLabel for="ms" value="Mã số lớp"/>
                    <h:inputText id="ms" value="#{lophoc.msLop}"/>
                    <h:outputLabel for="ht" value="Tên lớp"/>
                    <h:inputText id="ht" value="#{lophoc.tenLop}"/>
                    <h:outputLabel for="gv" value="Tên GVCN"/>
                    <h:inputText id="gv" value="#{lophoc.tenGVCN}"/>
                </h:panelGrid>
                <h:commandButton value="Insert" action="#{lophoc.InsertNew}"/>
            </h:form>
        </body>
    </html>
</f:view>

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

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@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">

<f:view>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>JSP Page</title>
        </head>
        <body>
            <h1><h:outputText value="Error"/></h1>
        </body>
    </html>
</f:view>

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

Facees-config.xml ở dạng PageFlow

dạng XML

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

<faces-config version="1.2" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
    <managed-bean>
        <managed-bean-name>lophoc</managed-bean-name>
        <managed-bean-class>vovanhai.wordpress.com.LophocBean</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>
    <navigation-rule>

    </navigation-rule>
    <navigation-rule>
        <from-view-id>/Lophoc.jsp</from-view-id>
        <navigation-case>
            <from-outcome>insert</from-outcome>
            <to-view-id>/insert.jsp</to-view-id>
        </navigation-case>
        <navigation-case>
            <from-outcome>edit</from-outcome>
            <to-view-id>/edit.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
    <navigation-rule>
        <from-view-id>/insert.jsp</from-view-id>
        <navigation-case>
            <from-outcome>success</from-outcome>
            <to-view-id>/Lophoc.jsp</to-view-id>
        </navigation-case>
        <navigation-case>
            <from-outcome>error</from-outcome>
            <to-view-id>/error.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
    <navigation-rule>
        <from-view-id>/edit.jsp</from-view-id>
        <navigation-case>
            <from-outcome>success</from-outcome>
            <to-view-id>/Lophoc.jsp</to-view-id>
        </navigation-case>
        <navigation-case>
            <from-outcome>failed</from-outcome>
            <to-view-id>/error.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
</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!