Eclipse 是由 Open Sommunity 所創建開發軟體，並被廣泛地 使用在許多不同的領續。例如：可作為Java 應用程式與 Android App 的開發環境。大多數人都知道 Eclipse 是 IDE。至今，他已佔 據超過全世界Java 開發環境的 50%。Eclipse 計劃是由 Eclipse 基 金會所管理。Eclipse 基金會是一個非營利性的組織，大多由以科 技公司為背景成為所組成。
Eclipse 需要安裝 Java Runtime。建議使用 Java 7（又稱為 Java 1.7）或 Java 6，Java 提供兩種版本，Java Runtime
Environment（JRE）和 Java Development Kit（JDK），JRE 只 包含用來啟動Java 程式的必要功能，而 JDK 則包含額外的開發工具， Prompt(如果您使用的是 Windows，可透過以下方式來啟動：
WIN + R，輸入"cmd" 按下 Enter 鍵) ，並輸入以下指令，來做測 試。
安裝Java。
3-1 Eclipse 下載與 Tomcat 設定
第一個使用的工具是Eclipse IDE for jave EE，從網站「http://www.eclipse.org/downloads/
」 ，如圖
5 所示圖5 Eclipse 下載點
要注意作業系統的位元是否符合，接下來下載
Tomcat「http://tomcat.apache.org/
」 ，如圖
6 所示。圖6 Tomcat 下載點
為了在Eclipse 上能使用，我們要在 Eclipse 上安裝 Tomcat 的外
掛，在Eclipse 資料夾裡找 ，把Tomcat 外掛放進去，如圖
7 所示。
圖7 Eclpise 安裝 Tomcat 外掛
重新進入Eclipse 裡，Eclipse 工具上就會看到 ，表示成
功，下載後，還不算完成，要在Tomcat 資料夾裡面的 ，在
找到 ，開啟，才算真的完成。
開啟startup 它會自己設定，如圖 8 所示。
圖8 startup 開啓畫面
為了確認Tomcat 有開啓，在瀏覽器上打
『http://localhost:8080/
』 ，如圖
9 所示。圖9 Tomcat 測試成功畫面
3-2 Java 環境設定
Java 一般需要設定 3 個環境變數，「電腦」->「內容」->「環境 變數」，如圖10 所示。
圖10 內容裡面
進入環境變數後點選『新增』，如圖11 所示。
圖11 環境變數
變數名稱『JAVA_HOME』，圖中變數值是根據 JDK 的安裝目錄，
如圖12 所示。
圖12 設定 JAVA_HOME
在系統變數找到『Path』，如圖 13 所示。
圖13 Patg 設定
『Path』的變數值加上『%JAVA_HOME%\bin;%』，如圖 14 所 示。
圖14
在新增『CLASSPATH』，變數值沒有限制如何設定，設定成如圖 15 所示即可。
圖15
3-3 安裝與設定 MySql
安裝MYSQL「http://dev.mysql.com/downloads/mysql/」，如 圖16 所示。
圖16 MYSQL 下載點
MYSQL 安裝畫面，如圖 17 所示。
圖17 MYSQL 安裝畫面 1
開始按照步驟安裝進入安裝過程，如圖18 所示。
圖18 MYSQL 安裝畫面 2
選擇『Detailed Configuration』，如圖 19 所示。
圖19 MYSQL 安裝畫面 3
選擇「Developer Machine」，如圖 20 所示。
圖21 MYSQL 安裝畫面 5
選擇「Manul Selected Default Character Set」另外選擇
「utf8」如圖 22 所示。
圖22 MYSQL 安裝畫面 6
「Execfe」->安裝完成,四個選項都會打勾，如圖 23 所示。
圖23 MYSQL 安裝畫面 7
開啟eclipse，如圖 24 所示。
圖24 eclipse 開啟介面
接下來開啟eclipse 時選擇工作區，如圖 25 所示。
圖25 eclipse 工作區選擇
開始設定Eclipse，「widow」->「Preference」，如圖 26 所示。
圖26 Eclipse 導引
接下來「Jave」->「Install JREs」，如圖 27 所示。
圖28 新增 Standard
在JRE Home 輸入 jdk 安裝路徑，如圖 29 所示。
圖29 設定 JDK 路徑
重新進入「Preferences」，選擇「Sever」->「Runtime Environmenrs」，如圖 30 所示。
圖30 設定 Sever
點選「Browse」設定 Tomcat 安裝路徑，如圖 31 所示。
圖31 設定 Tomcat 安裝路徑
圖32 Tomcat 路徑
選擇「Tomcat」的「Advanced」進行相關設定，如圖 33 所示。
圖33 Tomcat 設定-1
選擇「Tomcat」的「JVM Settings」設定 JRE，如圖 34 所示。
點選功能表列中的「Window」->「Open
Perspective」->「Other」指令，選擇「Database Development」，如圖 35 所示。
圖35 Eclipse 設定 MYSQL
「Databases」點選 New，如圖 36 所示。
圖36 Eclipse 設定 Mysql-1
選擇『Mysql』，如圖 37 所示。
圖37 Eclipse 設定 Mysql-2
選擇Mysql 驅動版本，如圖 38 所示。
圖38 Eclipse 設定 Mysql-3
選擇預設驅動jar 套件設定路徑，如圖 39 所示。
在Eclipse 設定「驅動名字」,「用戶 ID」,「密碼」，如圖 40 所示。
圖40 Eclipse 設定 Myslq-5
在圖41 中「Enter password」輸入 root。
圖41 MYSQL 設定
如顯示圖42 中的「Ping succeeded!」表示資料庫連接測試成功。
圖42 設定 MYSQL 密碼
點選->File->New->SQL File，建立 SQL 指令檔，如圖 43 所示。
圖43 建立 SQL
建立SQL 指令檔精靈，如圖 44 所示。
圖44 設定 SQL
建立UserInfo.sql 資料庫指令檔後，讀者可在 UserInfo.sql 中編寫 SQL 腳本，如圖 45 所示。
圖45 建立 UserInfo.sql
3-4 建立專案
點選「File」->「Ｎ ew」->「Dynamic Web Project」建立Ｗ eb 專案，如圖 46 所示。
圖46 建立新專案
輸入專案名稱，設定專案路徑，如圖47 所示。
在圖48「Name」的地方輸入「UserInfo」,在 chapa 建立 java 類別
圖48 設定專案
宣告「使用者名字」，「密碼」，「性別」的程式碼如下：
package chapa;
public class UserInfo { private String userName;
private String password;
private String sex;
public String getUserName() { return userName;
}
public void setUserName(String userName) { this.userName = userName;
}
public String getPassword() { return password;
public void setPassword(String password) { this.password = password;
}
public String getSex() { return sex;
}
public void setSex(String sex) { this.sex = sex;
} }
建立Database 類別，用來進行操作資料庫，用了三種方法「獲取 資料庫連接」，「關閉資料庫連接」,「註冊」。把 Mysql 驅動程式
「mysql-connector-java-5.1.15bin.jar」複製到
「WrbContent」->「WEB-INF」->「lib」下，Database 程式 碼如下。
package chapa;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
public class Database {
private static String userName = "root";
private static String password = "root";
private Connection connection;
//打開資料庫連接
public Connection getConnection() throws ClassNotFoundException, SQLException {
Class.forName(driver);
connection = DriverManager.getConnection(url, userName,
password);
return connection;
}
//關閉資料庫連接
public void closeConnection() throws SQLException { if (connection != null && !connection.isClosed())
connection.close();
connection = null;
}
//註冊
public void register(UserInfo userInfo) throws SQLException, ClassNotFoundException {
String sql = "insert into userinfo values(?, ?, ?);";
ps.setString(i++, userInfo.getUserName());
ps.setString(i++, userInfo.getPassword());
ps.setString(i++, userInfo.getSex());
ps.executeUpdate();
closeConnection();
} }
滑鼠點選「WebContent」右鍵->「New」->「JSP」，彈出建立 JSP 頁面精靈，如圖 49 所示。
圖 49 JSP 建立精靈
註冊頁程式碼，頁面碼採用UTF-8，預設 ISO-8859-1 不支援中文
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<center>
<form action="registerProcess.jsp" method="post">
帳號：<input type="text" name="userName"><br>
密碼：<input type="password" name="password"><br>
性別：<select>
<option value="男">男</option><option value="女">女</option>
</select>
<input type="submit" value="註冊">
</form>
</center>
</body>
</html>
以下程式碼為顯示註冊成功資訊。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%request.setCharacterEncoding("UTF-8"); %>
<jsp:useBean id="userInfo" class="chapa.UserInfo" scope="session"/>
<jsp:setProperty property="*" name="userInfo"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<center>
註冊成功，歡迎你！<br>
用戶名為：<jsp:getProperty name="userInfo" property="userName"/>
密碼為：<jsp:getProperty name="userInfo" property="password"/>
性別為：<jsp:getProperty name="userInfo" property="sex"/>
的用戶！
</center>
</body>
</html>
在專案名字「ChapA」按右鍵，彈出快顯功能表，選擇「Run As」->「Run on Server」選項，彈出如圖 50 所示。
圖50 Tomcat 執行
圖51 為基本架構圖，接下來開始美工，添加一些裝飾。
圖51 基本架構