STRUTS
1 範例簡介

這個範例取自於 STRUTS2 完全學習手冊第十九章的範例，我把它改成比較簡單的形式。
這個範例主要使用到 STRUTS2、MYSQL、CSS、JAVASCRIPT。
這個範例使用 APACHE ANT 構建網頁應用程式。

jsp

講先解 APACHE ANT 工具的功能和運作原理，以及編譯後如何部署到 TOMCAT 環境中運作。

目錄結構：

jsp
目錄路徑說明
C:\myweb2根目錄，放置 ANT 編譯的檔案和其他子目錄，檔案包括 build.xml 和 build.properties。
C:\myweb2\build子目錄 build 放置編譯好的類別檔。
C:\myweb2\dist子目錄 dist 放置壓縮好的 WAR 檔，用於部署網頁應用程式。把這裡的檔案放到 %TOMCAT%\webapps 目錄後，TOMCAT 會自動解壓縮。
C:\myweb2\lib_external子目錄 lib_external 放置編譯 JAVA 程式檔過程中會使用到的外部函式庫。目前是空的。
C:\myweb2\src子目錄 src 放置 JAVA 原始程式碼目錄。
C:\myweb2\WebContent子目錄 WebContent 放置網頁應用程式，放置除 JAVA 類別檔之外，所有的網頁應用程式的檔案，包括 JSP 檔、JAR 檔、web.xml、struts.xml 等檔案。其中的 JAR 檔就是應用程式內部函式庫。
PART I: ANT 編譯原理與網頁執行

2 BUILD.PROPERTIES

檔案 build.properties 定義了幾個參數的值，這些參數值會加入到 build.xml，做為編譯參數。

網頁應用程式的名稱與版本字串。 

   C:\myweb2\build.properties
01 app.name=myweb2
01 app.version=0.1

路徑字串參數，用於編譯與複製檔案。
包括 JAVA 程式原始碼的目錄 src，
外部函式庫目錄 lib_external，
網頁應用程式框架目錄 WebContent，
網頁應用程式構建目錄 build，
網頁應用程式部署檔 WAR 的目錄 dist。 

   C:\myweb2\build.properties
01 source.home=./src
01 lib.home=./WebContent/WEB-INF/lib
01 lib.external=./lib_external
01 webapp.home=./WebContent
01 build.home=./build
01 dist.home=./dist

編譯參數，這些參數是 JAVA 編譯程式 JAVAC.EXE 的參數。 包括致能偵錯訊息，最佳化設定等。 

   C:\myweb2\build.properties
01 compile.debug=true
01 compile.deprecation=false
01 compile.optimize=true

3 BUILD.XML

宣告此 XML 檔的規則是 XML 1.0。 

   C:\myweb2\build.xml
01 <?xml version="1.0" encoding="UTF-8"?>

所有關於編譯的內容和資訊都會包含在 project 的標籤內。 在 project 的標籤內宣告案子的名稱為 myweb2，內定完成的目標是 archive。 只要目標 archive 完成，編譯工作便結束。 

   C:\myweb2\build.xml
01 <project name="myweb2" default="archive" basedir=".">
01 ....
01 </project>

設定描述器，用於說明案子的用途。 

   C:\myweb2\build.xml
01 <description>
01        myweb2
01 </description>

引入編譯的屬性檔，此檔案提供數個在編譯過程中會使用到的參數，包括目錄參數和其他參數。 

   C:\myweb2\build.xml
01 <property file="build.properties"/>

目標一，清除 build 和 dist 目錄，這個動作的用意是清除先前編譯的結果。 

   C:\myweb2\build.xml
01 <target name="clean" description="Delete old build and dist directories">
01     <delete dir="${dist.home}"/>
01     <delete dir="${build.home}"/>
01 </target>

目標二，建立 build 目錄，用來存放編譯後的 JAVA 類別檔(.class)。 

   C:\myweb2\build.xml
01 <target name="init" depends="clean"  description="Create build directory">
01     <mkdir dir="${build.home}" />
01 </target>

目標三，執行編譯工作，用來存放編譯後的 JAVA 類別檔(.class)。 

   C:\myweb2\build.xml
01 <target name="compile" depends="init" description="Compile Java sources">
01     <mkdir dir="${build.home}/WEB-INF/classes" />
01     <javac srcdir="${source.home}"
01             destdir="${build.home}/WEB-INF/classes"
01             debug="${compile.debug}"
01             deprecation="${compile.deprecation}"
01             optimize="${compile.optimize}"
01              source="1.6" target="1.6">
01         <classpath>
01             <path>
01                 <fileset dir="${lib.home}" />
01                 <fileset dir="${lib.external}" />
01             </path>
01         </classpath>
01     </javac>
01 </target>

目標四，將網頁應用程式的檔案從 WebContent 複製到 build 目錄，包括 JSP 檔、XML 檔、JAR 檔等。 

   C:\myweb2\build.xml
01 <target name="build" depends="compile" description="Copies all non Java classes to build directoy">
01     <copy todir="${build.home}">
01         <fileset dir="${webapp.home}" excludes="SVN,**/*.class" />
01     </copy>
01     <copy todir="${build.home}/WEB-INF/classes">
01         <fileset dir="${source.home}" excludes="SVN,**/*.java" />
01     </copy>
01 </target>

目標五，製作 WAR 檔，將 dist 目錄的所有檔案製作成 dist\myweb2.war。 這個 WAR 檔可以放到 %TOMCAT%\webapps ，起動 TOMCAT 時就會自動解壓縮成網頁應用程式目錄 myweb2。 此時再以 http://localhost:8080/myweb2/ 就可以執行此網頁應用程式。 

   C:\myweb2\build.xml
01 <target name="archive" depends="build" description="Create binary archive of all files in dist.home">
01     <mkdir     dir="${dist.home}" />
01     <jar jarfile="${dist.home}/${app.name}.war"
01             basedir="${build.home}" />
01 </target>

4 編譯與執行

到目錄 C:\myweb2，打入 ant，執行 ANT 編譯程序。
畫面中可以看到執行的目標是 clean，再來的順序依次是 init、compile、build、archive。

 Buildfile: C:\myweb2\build.xml

步驟一，執行目標 clean 清除了兩個目錄 dist、build。

 clean:
    [delete] Deleting directory C:\myweb2\dist
    [delete] Deleting directory C:\myweb2\build

步驟二，執行目標 init 重新建立 build 目錄。

 init:
     [mkdir] Created dir: C:\myweb2\build

步驟三，執行目標 compile 在 build 目錄建立 WEB-INF\classes 目錄，執行 javac 編譯 JAVA 程式碼。編譯產生了類別檔都會放在 classes 目錄。

 compile:
     [mkdir] Created dir: C:\myweb2\build\WEB-INF\classes
     [javac] C:\myweb2\build.xml:70: warning: 'includeantruntime' was not set, defaulting to build.sysclasspath=last; set to false for repeatable builds
     [javac] Compiling 14 source files to C:\myweb2\build\WEB-INF\classes
     [javac] warning: [options] bootstrap class path not set in conjunction with -source 1.6
     [javac] 1 warning

步驟四，執行目標 build 將網頁應用程式的相關檔案從 src 和 WebContent 目錄依照檔案路徑複製到 build 目錄的相對路徑。

 build:
      [copy] Copying 519 files to C:\myweb2\build
      [copy] Copying 1 file to C:\myweb2\build\WEB-INF\classes

步驟五，執行目標 archive 建立 dist 目錄，執行 jar 將 build 目錄中的檔案壓縮成 myweb2.war。 

 archive:
     [mkdir] Created dir: C:\myweb2\dist
       [jar] Building jar: C:\myweb2\dist\myweb2.war
 BUILD SUCCESSFUL
 Total time: 7 seconds

將檔案 myweb2.war 複製到 C:\apache-tomcat-7.0.25\webapps。
TOMCAT 啟動過程中會自動將 webapps 目錄中的 WAR 檔解壓縮。
TOMCAT 啟動完成後，執行網頁瀏覽器，輸入網址 http://localhost:8080/myweb2/。

執行 C:\apache-tomcat-7.0.25\bin\startup.bat。

jsp

TOMCAT 啟動完成會出現 Server startup in ???? ms。

jsp

TOMCAT 啟動完成後，執行網頁瀏覽器，輸入網址 http://localhost:8080/myweb2/，進入 index.jsp。

jsp
PART II : 資料庫

5 建立資料庫

假設已經安裝好 MYSQL 5.5，安裝目錄是 C:\mysql。準備建立資料庫 ch19，和資料內容。

登入 MYSQL，帳號 root，密碼 1234。 

01 C:\mysql\MySQL Server 5.5\bin>mysql -h localhost -u root -p
01 Enter password: ****
01 ....
01 mysql>

如果資料庫 ch19 已經存在，想刪除它，可以使用下列語法。 

01 mysql>drop ch19;

建立資料庫 ch19。 

01 mysql>create database ch19;

使用資料庫 user。 

01 mysql>use ch19;

如果資料表 user 和 manager 已經存在，想刪除它們，可以使用下列語法。 

01 mysql> drop table manager;
01 Query OK, 0 rows affected (0.05 sec)
01 
01 mysql> drop table user;
01 Query OK, 0 rows affected (0.05 sec)


01 mysql>drop ch19;

在資料庫 ch19 中，建立資料表 user。 

01 mysql> create table user(
01     -> id int not null auto_increment primary key,
01     -> username varchar(16) not null,
01     -> password varchar(16) not null,
01     -> email varchar(50) not null,
01     -> gender varchar(4),
01     -> nickname varchar(20),
01     -> birthday datetime,
01     -> qq varchar(24),
01     -> phone varchar(24),
01     -> description varchar(100),
01     -> regtime datetime);
01 Query OK, 0 rows affected (0.08 sec)

在資料表 user 中，建立一筆個人資料。 

01 mysql> insert into user values(
01     -> null,
01     -> 'bookysc',
01     -> '1234',
01     -> 'bookysc@hotmail.com',
01     -> 'male',
01     -> 'book',
01     -> '2000-01-01 00:00:00',
01     -> '12345678',
01     -> '12345678',
01     -> 'Hello,I am Book',
01     -> '2012-03-17 00:00:00');
01 Query OK, 0 rows affected (0.16 sec)

在資料庫 ch19 中，建立資料表 manager。 

01 mysql> create table manager(
01     -> id int not null auto_increment primary key,
01     -> username varchar(16) not null,
01     -> password varchar(16) not null);
01 Query OK, 0 rows affected (0.08 sec)

在資料表 manager 中，建立一筆個人資料。 

01 mysql> insert into person values( 
01      ->null,
01      ->'bookysc',
01      ->'1234');
01 Query OK, 1 row affected (0.03 sec)

離開資料庫。 

01 mysql>quit

PART III : 網頁應用程式

網頁應用程式的內容包含網頁部署檔 WEB.XML、STRUTS2 組態檔 STRUTS.XML、、JSP 網頁檔、CSS 網頁樣式檔、JAVASCRIPT 程式檔、JAVA 類別檔等。

6 WEB.XML

WEB.XML 是 STRUTS 2 的部署描述器，用來宣告網頁應用程式的伺服程式(SERVLET)，伺服程式會在網路伺服器的容器中執行。 一支網頁應用程式只會有一個 WEB.XML 檔案，可以在這個檔案中宣告多支支伺服程式和攔截器(FILTER)。

宣告此 XML 檔的版本規格，版本 XML 1.0，文字的編碼規格為 ISO-8859-1。 

   WEB-INF\WEB.XML
01 <?xml version="1.0" encoding="UTF-8"?>

宣告此 XML 檔為網路應用程式 web-app，版本 2.4。 XML 命名空間為 http://java.sun.com/xml/ns/j2ee。 內容類型為網路應用程式 Web Application 2.2，根據的文件類型定義檔為 web-app_2_2.dtd。 後面的 

   WEB-INF\WEB.XML
01 <web-app id="WebApp_ID" version="2.4" 
01 xmlns="http://java.sun.com/xml/ns/j2ee" 
01 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
01 xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

定義顯示的網路應用程式名稱。 

   WEB-INF\WEB.XML
01 <display-name>myweb2</display-name>

設定歡迎頁為應用程式根目錄的網頁檔 index.html。 

   WEB-INF\web.xml
01 <welcome-file-list>
01     <welcome-file>index.jsp</welcome-file>
01 </welcome-file-list>

宣告過濾分配器，名稱為 struts2，執行的類別為 FilterDispatcher。 過濾分配器的用途是在網頁伺服器中，將屬於這個網頁應用程式的要求過濾並分配到所屬的攔截器，因此稱為過濾分配器。 

   WEB-INF\WEB.XML
01 <filter>
01    <filter-name>struts2</filter-name>
01    <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
01 </filter>

因為這個網頁應用程式沒有其他的伺服程式，所以要求攔截器接受所有要求。 當攔截器識別 STRUTS 2 的要求，基本上就是字尾是 .action 的要求，交由 STRUTS 2 系統處理。 

   WEB-INF\WEB.XML
01 <filter-mapping>
01    <filter-name>struts2</filter-name>
01    <url-pattern>/*</url-pattern>
01 </filter-mapping>

7 STRUTS.XML

STRUTS 2 的網頁應用程式組態檔是在 WEB-INF\classes\struts.xml。 不同於 WEB.XML 是被網頁伺服器讀取，STRUTS.XML 是由網頁應用程式的伺服程式讀取，用來設定網頁應用程式的內部執行參數。

宣告文件為 XML 1.0 規範。 

   WEB-INF\classes\struts.xml
01 <?xml version="1.0" encoding="UTF-8" ?>

宣告文件為 STRUTS 2.0 的組態檔。 

   WEB-INF\classes\struts.xml
01 <!DOCTYPE struts PUBLIC
01     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
01     "http://struts.apache.org/dtds/struts-2.0.dtd">

啟用 devMode，這使得當要求所載入的資源出錯時，可以在錯誤頁上顯示相關資訊。
定義動作映射，當執行 allPersons.action 時，會轉送到 index.jsp。
定義動作映射，當執行 pageAction.action 時，會先執行動作類別 HelloWorldAction，再執行動作 allPersons，最後轉送到 index.jsp。

   WEB-INF\classes\struts.xml
01 <struts>
01     <constant name="struts.devMode" value="true" />
01     <package name="basicstruts2" extends="struts-default">
01          <action name="allPersons" class="action.AllPersons">
01             <result name="success">/index.jsp</result>
01         </action>
01         <action name="pageAction" class="action.PageAction">
01             <result type="redirect">/allPersons.action?pageNumber=${pageNumber}&totalPage=${totalPage}&pageSize=${pageSize}</result>
01         </action>
01     </package>
01 </struts>

10 JSP 網頁檔

JSP 網頁檔呈現所有網頁畫面，分布在網頁應用程式根目錄、MANAGER 目錄、USER 目錄。
根目錄的 JSP 檔有 adminlogin.jsp、error.jsp、index.jsp、login.jsp、managerLogin.jsp、register.jsp。
MANAGER 目錄的 JSP 檔有 footer.jsp、header.jsp、manager.jsp。
USER 目錄的 JSP 檔有 userInfo.jsp。

9 INDEX.JSP

歡迎頁 INDEX.JSP 是使用者要求所觸發的第一個網頁檔。

jsp

網頁檔開頭，宣告使用 java 語言，java 函式庫 java.util.*，網頁編碼為大陸的簡體中文 GB2312。 

01 <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>

宣告這是一個 HTML4 的文件。 

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

網頁中只會顯示 JSP Page!!!。 

01 <html>
01   <head>    
01     <title></title>
01 	<meta http-equiv="pragma" content="no-cache">
01 	<meta http-equiv="cache-control" content="no-cache">
01 	<meta http-equiv="expires" content="0">    
01 	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
01 	<meta http-equiv="description" content="This is my page">
01   </head>
01   <body>
01 	<center>
01 		<div>
01 			JSP Page!!!
01 		</div>
01 	</center>
01   </body>
01 </html>

9 REGISTER.JSP

註冊頁 REGISTER.JSP 是。

jsp

網頁檔開頭。 

01 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
01 <%@ taglib prefix="s" uri="/struts-tags" %>
01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
01 <html>
01 <head>
01 	<s:head theme="ajax"/>    
01 	<title>歡迎註冊</title>
01 	<link rel="stylesheet" type="text/css" href="reg.css">
01 </head>
01 <body>  
01 <center>

引入 JAVASCRIPT 函式庫。 

01         <script src="js/common.js"></script>
01         <script src="js/ajax.js"></script>
01         <script src="js/menu.js"></script>

網頁上部程式。 

01         <!--頂部-->
01         <div id="header">

網頁上左畫面程式。 

01             <div class="h_lt">
01                 <a href="http://www.itzcn.com"><img src="images/logo.gif" /> </a>
01             </div>

網頁上右畫面程式。 

01         <div class="h_rt">
01                 您好，
01                 <s:if test="%{#session.loginUser == null}">
01                     遊客 | 請
01                     <A href="register.jsp">註冊</A> 或
01                     <A href="login.jsp">登錄</A><br/>
01                 </s:if>
01                 <s:else>
01                     <s:property value="#session.loginUser.username"/>
01                     |
01                     <a href="exit.action">退出</a> |
01                     <a href="userInfo.action">個人中心</a>
01                 </s:else>
01                 |
01                 <A href="http://school.itzcn.com/help.html" target=_blank>協助中心</A> |
01                 <A onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('{$site_url}')" href="#">設為首頁</A> |
01                 <A href="javascript:window.external.addfavorite('{$SiteURL}','$seo_title')">加入收藏</A> </div>
01         </div>

網頁中左段畫面程式，取用 CSS 樣式類別 c_lt。 

01         <div id="center" style="text-align: left;">
01             <div class="c_lt">

網頁中左段畫面程式，取用 CSS 樣式類別 tt。 

01                 <div class="tt">
01                     只要填四項就可以註冊窗內
01                     <font color="#FF0000">（必填）</font>
01                 </div>

使用 STRUTS2 的表單標籤，關聯動作為 register.action。 

01                 <s:form action="register" theme="simple">
01                     <div class="content">

表單欄位，顯示一個文字方塊，功能是輸入名字。 

01                         <p>
01                             <label for="email">
01                                 您的登錄名字：
01                             </label>
01                             <s:textfield cssClass="input" name="register.username" maxlength="16"/>
01                         </p>

表單欄位，顯示一個文字方塊，功能是輸入密碼。 

01                         <p>
01                             <label for="email">
01                                 登錄密碼：
01                             </label>
01                             <s:password cssClass="input" onkeyup="EvalPwdStrength(this.value)" id="password" name="register.password" maxlength="16"/>
01                         </p>

密碼強中弱的顯示方塊。 

01                         <p>
01                         <DIV class=ob_pws id=pws>
01                             <DIV class=ob_pws0 id=idSM1>
01                                 <SPAN style="FONT-SIZE: 1px"> </SPAN><SPAN id=idSMT1>弱</SPAN>
01                             </DIV>
01                             <DIV class=ob_pws0 id=idSM2
01                                 style="BORDER-LEFT: #dedede 1px solid">
01                                 <SPAN style="FONT-SIZE: 1px"> </SPAN><SPAN id=idSMT2>中</SPAN>
01                             </DIV>
01                             <DIV class=ob_pws0 id=idSM3
01                                 style="BORDER-LEFT: #dedede 1px solid">
01                                 <SPAN style="FONT-SIZE: 1px"> </SPAN><SPAN id=idSMT3>?</SPAN>
01                             </DIV>
01                         </DIV>
01                         <br />
01                         <br />
01                         </p>

表單欄位，顯示一個文字方塊，功能是輸入密碼，用於確認。 

01                         <p>
01                             <label for="email">
01                                 密碼確認：
01                             </label>
01                             <s:password cssClass="input" name="password2" maxlength="16"/>
01                         </p>

表單欄位，顯示一個文字方塊，功能是輸入電子郵件位址。 

01                         <p>
01                             <label for="email">
01                                 電子信箱：
01                             </label>
01                             <s:textfield  cssClass="input" name="register.email" maxlength="50"/>
01                         </p>

表單欄位，顯示一個勾選圓圈，功能是啟動或取消高級選項。 

01                         <p>
01                             <label for="email">
01                                 高級選項：
01                             </label>
01                             <input class="input_checkedbox" id="advshow" name="advshow"
01                                 type="checkbox" value="0"
01                                 onclick="hide($('advselect'), 'auto');" tabindex="7" />
01                             <cite>顯示高級用戶設定選項</cite>
01                         </p>

當勾選上述的勾選圓圈，就會顯示這一部分的內容，包括性別、暱稱、生日、QQ、自我介紹等資訊的輸入欄位。 這些資訊會同帳號名稱、密碼一同存入資料庫。 

01                         <div style="display: none" id="advselect">
01                             <h5>
01                                 擴展訊息
01                             </h5>
01                             <div class="login_radio">
01                                 <p>
01                                     <label for="gender">
01                                         性別：
01                                     </label>
01                                     <s:select name="register.gender" key="男" value="'男'"
01                                     list="#{'男':'男', '女':'女', '保密':'保密'}" listKey="key" listValue="value" 
01                                     />
01                             </div>
01                             <p class="login_minput">
01                                 <label for="nickname">
01                                     暱稱：
01                                 </label>
01                                 <s:textfield cssClass="input_text" name="register.nickname" maxlength="10"/>
01                             </p>
01                             <p class="login_minput">
01                                 <label for="birthday">
01                                     生日：
01                                 </label>
01                                 <s:datetimepicker cssClass="input_text"
01                                     name="register.birthday" value="1985-01-01" />
01                             </p>
01                             <p class="login_minput">
01                                 <label for="qq">
01                                     QQ：
01                                 </label>
01                                 <s:textfield cssClass="input_text" name="register.qq" maxlength="12"/>
01                             </p>
01                             <p class="login_minput">
01                                 <label for="phone">
01                                     ??：
01                                 </label>
01                                 <s:textfield cssClass="input_text" name="register.phone" maxlength="12"/>
01                             </p>
01                             <p>
01                                 <label>
01                                     自我介紹：
01                                 </label>
01                                 <s:textarea cols="40" rows="5" name="register.description"/>
01                             </p>
01                         </div>

表單的確認欄位按鈕，點入後，資料就會存入網站的資料庫系統。 

01                         <p>
01                             <s:submit type="image" src="images/login_tj.gif" cssStyle="width:81px;height:35px;"/>
01                             <s:fielderror/>
01                             <s:actionerror/>
01                         </p>
01                     </div>
01                 </s:form>
01                 <div class="ft"></div>
01             </div>

網頁中右段程式，使用 CSS 樣式庫的 c_rt 類別。 

01             <div class="c_rt">
01                 <ul>

超連結一。 

01                     <li>
01                         <b><a href="http://school.itzcn.com">我要學程式設計</a> </b>
01                         <p>
01                             免費看視頻,輕鬆學程式設計.
01                         </p>
01                     </li>

超連結二。 

01                     <li class="zq">
01                         <b><a href="http://home.itzcn.com">我想交朋友</a> </b>
01                         <p>
01                             窗內-真實社交網路
01                         </p>
01                     </li>

顯示網站資訊。 

01                     <li class="sj">
01                         <b>你知道這些數據嗎</b>
01                         <p>
01                             窗內目前匯集:
01                             <font color="#FE5301">92166</font>個人才   共有:
01                             <font color="#FE5301">4314</font>視頻
01                         </p>
01                     </li>
01                 </ul>
01             </div>
01             <div class="clear"></div>
01         </div>

內嵌 JAVASCRIPT 程式。 

01         <!--底部-->
01         <script>
01         <!-- JAVASCRIPT CODE -->
01         </script>
01 </html>

10 JAVA 函式庫

為了存取資料庫的資料，需要設計相關的動作程式碼和資料模型。
資料模型層的類別是 entity\Person.java。
資料存取層的類別是 dao\PersonDao.java、dao\PageDao.java。
資料操作層的類別是 action\PageAction.java、action\AllPersons.java。
資料庫連結層的類別是 org\DbPool.java。

11 JAVASCRIPT 函式庫

JAVASCRIPT 是一種執行於客端的網頁瀏覽器的語言，可以讓網頁畫面內容更豐富，網頁資料的運算也很靈活。
JAVASCRIPT 程式碼是散佈在各個 JSP 網頁檔，有的則是共用的 JAVASCRIPT 函式庫。
底層 JSP 檔共同使用的 JAVASCRIPT 函式庫是放在 WebContent\js 目錄，有三個檔案 AJAX.JS、COMMON.JS、MENU.JS。
MANAGER 層 JSP 檔共同使用的 JAVASCRIPT 函式庫是放在 WebContent\manager/js 目錄，有三個檔案 AJAX.JS、COMMON.JS、MENU.JS、CALENDAR.JS、CHECK.JS。
USER 層 JSP 檔共同使用的 JAVASCRIPT 函式庫是放在 WebContent\user/js 目錄，有三個檔案 AJAX.JS、COMMON.JS、MENU.JS、CALENDAR.JS、CHECK.JS。

11 CSS 樣式庫

CSS 是 CASCADE STYLE SHEET 的簡寫，功能是設定頁面的樣式。
CSS 提供數種不同的語法，將樣式運用到網頁檔的標籤。

底層有有二個 CSS 檔案 LOGIN2.CSS、REG.CSS。
USER 層有五個 CSS 檔案 HELP.CSS、LOGIN2.CSS、MANAGE.CSS、REG.CSS、STYLE.CSS。