XML Technology Research Lab: Web

顯示具有 Web 標籤的文章。顯示所有文章

2012年10月13日星期六

如何讓一個 login 的網頁只能經由 https 來登入

問題蠻複雜的，好像需要瞭解的東西也不少，所以我們慢慢來建構這個網頁。
動機： 在開發網頁資訊系統的時候，我們經常需要讓使用者登入，而且我們希望使用者登入的帳號以及密碼不會在 Internet 傳遞的時候被竊聽或者竊取，這時我們就需要使用 https 來對資料進行加密。可是往往設計一個登入的網頁（例如：login.php），我們不但可以 http://xml.nchu.edu.tw/test/login.php，也可以 https://xml.nchu.edu.tw/test/login.php 來存取。為了確保使用者只能使用 https 來登入，我們需要把所有 http://xml.nchu.edu.tw/test/login.php 的連線都轉成 https://xml.nchu.edu.tw/test/login.php。

2012年10月1日星期一

安裝 Tomcat 5.5.x

This document is provided as is. You are welcomed to use it for non-commercial purpose.
Written by: 國立中興大學資管系呂瑞麟

請勿轉貼

看其他教材

支援一般連線

Tomcat 是一個讓開發者能夠執行 JSP/servlet 的伺服器（比較專業的說法是 container），其安裝步驟如下：

安裝 JDK 1.5.x 版或者更新的版本。

記得要設定環境變數 JAVA_HOME。假設 JDK 安裝在 c:\jdk，我們需要執行 set JAVA_HOME=c:\jdk或者在控制台內設定。

安裝 Tomcat（我們以 5.5.x 版為例；並假設 Tomcat 安裝於 d:\tomcat）。下列的設定不適用於 Tomcat 6.x 或者 Ttomcat 7.x 版。

2012年9月28日星期五

安裝 Tomcat 7.0.x

This document is provided as is. You are welcomed to use it for non-commercial purpose.
Written by: 國立中興大學資管系呂瑞麟

請勿轉貼

看其他教材

我個人最愛的 Tomcat 5.5.x 終於被宣布自 09/2012 起停止支援，甚至到了 12/2012 就無法下載了。在無奈之下，只好開始轉戰 Tomcat 7.0.x 版。 Tomcat 7.0.x 版的安裝對於 JSP 的開發並沒有太大的改變，改變最多的大概就是 servlet 的程式了；為了避免大幅修改 Java Servlet 入門，我會在本文中說明開發 servlet 程式時，web.xml 的必要修改。

支援一般連線

Tomcat 是一個讓開發者能夠執行 JSP/servlet 的伺服器（比較專業的說法是 container），其安裝步驟如下：

2012年9月26日星期三

JOFC2 - 混合圖表

The materials presented in this web page is provided as is and is used solely for educational purpose. Use at your own risks.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

我們假設你已經依據之前的文章完成的 OFC2 的安裝工作，也了解之前 OFC2 和 JSP 的合用方式。由於在本文中，我們將介紹如何混搭 BarChart 以及 LineChart，因此請讀者先熟讀 OFC2 - 第三個範例以及 OFC2 - LineChart 和 PieChart 中第六個範例。在進一步說明範例之前，我們要先說明的是：我們只針對跟之前不同的地方進行說明，相同的部分就不再贅述！簡單來說，如果需要在一個 Chart 物件中，加入（例如）BarChart 以及 LineChart，你需要分別產生 BarChart 以及 LineChart，並對他們進行設定；一旦設定完成，我們就可以將 BarChart 以及 LineChart 的物件加到 Chart 物件內。如果讀者依據我們的程式執行，應該可以看到類似如下的畫面：

而完整的程式碼列示如下：

<%@page contentType="text/plain" pageEncoding="UTF-8"
        import="jofc2.*,
                jofc2.model.*,
                jofc2.model.elements.*,
                jofc2.model.axis.*,
                jofc2.model.elements.BarChart.*,
                jofc2.model.elements.LineChart.*"%>
<%
  Chart cht = new Chart("存貨量線型圖");
  XAxis labels = new XAxis();
  labels.addLabels("北區", "中區", "南區", "離島");
  cht.setXAxis(labels);
  YAxis range = new YAxis();
  range.setRange(0, 60, 10);
  cht.setYAxis(range);
  BarChart bar = new BarChart(BarChart.Style.THREED);
  LineChart lin = new LineChart();
  bar.setColour("#669900");
  lin.setColour("#6666FF");
  bar.setText("存貨量");
  lin.setText("價格");

  for(int i=0; i<4; i++) {
    bar.addValues((int) (Math.random() * 60) + 1);
    lin.addValues((int) (Math.random() * 10) + 1);
  }

  cht.addElements(bar, lin);
  out.println(cht.toString());

Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

JOFC2 - LineChart 和 PieChart

The materials presented in this web page is provided as is and is used solely for educational purpose. Use at your own risks.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

我們假設你已經依據之前的文章完成的 OFC2 的安裝工作，也了解之前 OFC2 和 JSP 的合用方式。在本文中，我們簡單的介紹 LineChart 和 PieChart 的產生方式。由於這些圖表的產生方式跟之前 BarChart 非常類似，我們大多只列示其程式碼，並加上執行後的範例畫面。在進一步說明範例之前，我們要先說明的是：我們只針對跟之前不同的地方進行說明，相同的部分就不再贅述！

LineChart：jofc2.model.elements.LineChart 跟 BarChart 一樣，也是 jofc2.model.elements.Element 的子類別，因此使用的方式與 BarChart 非常類似。依據 JOFC2 LineChart 的文件，我們之前介紹 LineChart 的 Style 共有 LineChart.Style.DOT、LineChart.Style.HOLLOW、以及 LineChart.Style.NORMAL 三種；其中，只有 NORMAL 有效果，其它的，就算可以產生 json 檔，卻無法顯示。後來在我有空的時候，我仔細檢查了 JOFC2 LineChart 的原始碼之後，我發現 原來文件和原始碼是不一致的，請以下列的方式來開發，我也強烈懷疑，之前測不出來的效果，可能也是這個原因所造成的）。 在下列程式碼中，我們特別針對 LineChart 物件的產生方式說明一下；根據 JOFC2 的原始碼，我們說明在設定上彈性最高的一種建構元，該建構元總共有六個參數；
1. 第一個參數用來指定線型圖上每一個資料點的形狀：支援的形狀總共有 BOW, DOT, HALLOW_DOT, ANCHOR, STAR, 和 SOLID_DOT 六種。在範例中，我們使用了 STAR 和 HALLOW_DOT。
2. 第二個參數用來指定線型圖上每一個資料點的顏色：設定的方式是利用 #RGB 的方式；在範例中，我們分別指定紫色和紅色。
3. 第三個參數用來指定線型圖上每一個資料點的大小；在範例中，我們分別指定的大小為 8 和 5。
4. 第四個參數用來指定線型圖上每一個資料點與兩端線的距離；在範例中，我們分別指定的距離是 0 （也就是不留間隙）和 10。
5. 第五個參數用來設定轉動（rotate）每一個資料形狀的角度；在範例中，我們讓 STAR（星狀圖）轉動 90 （從畫面呈現的效果，90 應該不是代表 90 度）；而 DOT（圓餅）不轉動。
6. 第四個參數用來設定每一個資料點與兩端線的距離是否為真。目前測不出任何效果。
如果讀者依據我們的程式執行，應該可以看到類似如下的畫面；我們強烈建議讀者盡量測試各種的效果。

而完整的程式碼列示如下：
```
<%@page contentType="text/plain" pageEncoding="UTF-8"
        import="jofc2.*,
                jofc2.model.*,
                jofc2.model.elements.*,
                jofc2.model.axis.*,
                jofc2.model.elements.LineChart.*"%>
<%
  Chart cht = new Chart("存貨量線型圖");
  XAxis labels = new XAxis();
  labels.addLabels("北區", "中區", "南區", "離島");
  cht.setXAxis(labels);
  YAxis range = new YAxis();
  range.setRange(0, 60, 10);
  cht.setYAxis(range);

  // 初始化 LineChart，並分別設定線型圖的各種樣子
  // LineChart.Style 的第一個參數指的是每一個點的形狀；總共有 BOW, DOT, HALLOW_DOT,
  //                 ANCHOR, STAR, 和 SOLID_DOT
  // 第二個參數指的是點的顏色
  // 第三個參數指的是點的大小
  // 第四個參數指的是 halo （點以及線之間的距離）
  // 第五個參數指的是旋轉（rotate）點的角度
  // 第六個參數指的是是否要讓 halo 的值生效；目前測不出效果
  LineChart lin1 = new LineChart(new LineChart.Style(LineChart.Style.Type.STAR, 
                                 "#CC00CC", 8, 0, 90, false));
  LineChart lin2 = new LineChart(new LineChart.Style(LineChart.Style.Type.HALLOW_DOT, 
                                 "#CC0000", 5, 10, 0, true));

  // 設定線的的顏色
  lin1.setColour("#669900");
  lin2.setColour("#6666FF");

  // 設定線的的標題
  lin1.setText("存貨量");
  lin2.setText("價格");

  for(int i=0; i<4 data-blogger-escaped-10="" data-blogger-escaped-1="" data-blogger-escaped-60="" data-blogger-escaped-ath.random="" data-blogger-escaped-cht.addelements="" data-blogger-escaped-cht.tostring="" data-blogger-escaped-gt="" data-blogger-escaped-i="" data-blogger-escaped-int="" data-blogger-escaped-lin1.addvalues="" data-blogger-escaped-lin1="" data-blogger-escaped-lin2.addvalues="" data-blogger-escaped-lin2="" data-blogger-escaped-out.println="" data-blogger-escaped-pre="">
```

PieChart: jofc2.model.elements.PieChart 跟 BarChart 一樣，是 jofc2.model.elements.Element 的子類別，但是它跟之前介紹過的 BarChart 和 LineChart 有幾個比較不同的地方：第一個 PieChart 是一個圓餅圖，在一般的情形下，大概只有一系列的資料，而不會有多群的 Bars 或者 Lines；第二個差異在於 PieChart 沒有明顯的 X 和 Y 軸，因此一些 X 和 Y 軸的設定沒有必要。 PieChart 跟 BarChart 和 LineChart 一樣，可以直接把想表現的數值利用 addValues() 方法加進去，缺點是圓餅圖中的每一片（slice）的標籤就是該片的數值，不太方便。因此，可以使用如下的方式：

  pie.addSlice((int) (Math.random() * 10) + 1, "北區");

將數值以及其相對應的標籤一起家進去。如果讀者依據本程式執行，應該可以看到如下的畫面：

完整的程式碼如下：

<%@page contentType="text/plain" pageEncoding="UTF-8"
        import="jofc2.*,
                jofc2.model.*,
                jofc2.model.elements.*,
                jofc2.model.axis.*,
                jofc2.model.elements.PieChart.*"%>
<%
  Chart cht = new Chart("存貨量圓型圖");

  PieChart pie = new PieChart();
  pie.addSlice((int) (Math.random() * 10) + 1, "北區");
  pie.addSlice((int) (Math.random() * 10) + 1, "中區");
  pie.addSlice((int) (Math.random() * 10) + 1, "南區");
  pie.addSlice((int) (Math.random() * 10) + 1, "離島");
  
  // 請嘗試移除上列四個 pie.addSlice(), 並使用下列數值以觀察不同結果
/*
  for(int i=0; i<4 data-blogger-escaped-10="" data-blogger-escaped-1="" data-blogger-escaped-ath.random="" data-blogger-escaped-cht.addelements="" data-blogger-escaped-cht.tostring="" data-blogger-escaped-gt="" data-blogger-escaped-i="" data-blogger-escaped-int="" data-blogger-escaped-out.println="" data-blogger-escaped-pie.addvalues="" data-blogger-escaped-pie.setcolours="" data-blogger-escaped-pie.setradius="" data-blogger-escaped-pie="" data-blogger-escaped-pre="">

Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

JOFC2 - 第五個範例

The materials presented in this web page is provided as is and is used solely for educational purpose. Use at your own risks.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

我們假設你已經依據之前的文章完成的 OFC2 的安裝工作，也了解之前 OFC2 和 JSP 的合用方式。如果你熟悉 JSP 或者 Java servlet，但是不清楚 JSP/servlet 的生命週期，請仔細閱讀 JSP 的生命週期。由於我們在這個範例中不再使用亂數產生器來產生亂數，而是利用資料庫中現有的資料來呈現，而且我們使用的資料庫管理系統是 MySQL，我們假設讀者已經依據 MySQL Server 簡介中介紹的方式，完成了 MySQL 的安裝，並且已經新增了所需要的使用者（jlu）、資料庫（eric），以及其表格（Product）。如果讀者依據本文的介紹完成程式，顯示的畫面如下：

在進一步說明範例之前，我們要先說明的是：我們只針對跟之前不同的地方進行說明，相同的部分就不再贅述！

由於要與資料庫連接，我們需要下列敘述：
```
  import java.sql.*;
```

跟 MySQL Server 簡介中介紹的程式碼類似，跟資料庫連接，我們需要完成載入 JDBC 驅動程式，利用該驅動程式與資料庫產生連線，經由連線產生執行 SQL 語法的 Statement 物件，然後利用 Statement 物件來執行 SQL 語法，最後處理 SQL 的結果。其相關的程式碼如下：

    // 載入 MySQL JDBC 驅動程式
    Class.forName("com.mysql.jdbc.Driver");

    // 產生程式與資料庫之間的連線
    conn = DriverManager.getConnection("jdbc:mysql://127.0.0.1/eric", "jlu", PWD);

    // 產生用來執行 SQL 語法的 Statement 物件
    stmt = conn.createStatement();

    // 執行 Query
    ResultSet rs = stmt.executeQuery(qSQL);

    // 將查詢結果一筆一筆的取出來，並加入圖中
    while(rs.next()) {
      bar1.addValues(rs.getInt(1));
      bar2.addValues(rs.getInt(3));

      // 加 XAxis 的標籤
      labels.addLabels(rs.getString(2));
    }

    // ....
  } catch (Exception e) {
    System.out.println("Exception Occurs: " + e);
  } finally {
    try {
      stmt.close();
    } catch(Exception e) {
      System.out.println("Close error.");
    }
  }

為了完整性，我們將完整的 JSP 程式碼列示如下：

<%@page contentType="text/plain" pageEncoding="UTF-8"
        import="jofc2.*,
                java.sql.*,
                jofc2.model.*,
                jofc2.model.elements.*,
                jofc2.model.axis.*,
                jofc2.model.elements.BarChart.*"%>

<%!
    private Connection conn = null;

    public void jspInit() {
      try {
        Class.forName("com.mysql.jdbc.Driver");
        conn = DriverManager.getConnection("jdbc:mysql://127.0.0.1/eric", UID, PWD);
      }
      catch (Exception e) {
        System.out.println("Fail to connect to database.");
      }
    }

    public void jspDestroy() {
      try {
        conn.close();
      } catch (Exception e) {
        System.out.println("Fail to close connection.");
      }
    }
%>

<%
  // query 字串
  String qSQL = "select qty, name, price from Product";

  Chart cht = new Chart("存貨量長條圖");
  XAxis labels = new XAxis();
  YAxis range = new YAxis();
  range.setRange(0, 210, 10);
  cht.setYAxis(range);
  BarChart bar1 = new BarChart(BarChart.Style.NORMAL);
  BarChart bar2 = new BarChart(BarChart.Style.NORMAL);
  bar1.setColour("#669900");
  bar2.setColour("#6666FF");
  bar1.setText("存貨量");
  bar2.setText("價格");

  Statement stmt = null;
  try {
    stmt = conn.createStatement();
    ResultSet rs = stmt.executeQuery(qSQL);

    while(rs.next()) {
      bar1.addValues(rs.getInt(1));
      bar2.addValues(rs.getInt(3));

      // 加 XAxis 的標籤
      labels.addLabels(rs.getString(2));
    }

    cht.addElements(bar1, bar2);
    cht.setXAxis(labels);

    out.println(cht.toString());
  } catch (Exception e) {
    System.out.println("Exception Occurs: " + e);
  } finally {
    try {
      stmt.close();
    } catch(Exception e) {
      System.out.println("Close error.");
    }
  }
%>

Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

JOFC2 - 第三個範例

The materials presented in this web page is provided as is and is used solely for educational purpose. Use at your own risks.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

我們假設你已經依據之前的文章完成的 OFC2 的安裝工作，也了解之前 OFC2 和 JSP 的合用方式。在本文中，我們希望能夠更進一步的調整條型圖的內容，這次調整的內容是將兩個以上的 Bar 放到條型圖中；完成後，條型圖如下所示：

在進一步說明範例之前，我們要先說明的是：我們只針對跟之前不同的地方進行說明，相同的部分就不再贅述！

由於我們需要在 Chart 物件上加上兩個以上的 Bars；或者更明確的說，要加上兩個以上的 BarChart。因此，為了能產生兩個 BarChart 物件，我們宣告了以下敘述：
```
  BarChart bar1 = new BarChart(BarChart.Style.NORMAL),
           bar2 = new BarChart(BarChart.Style.NORMAL);
```
bar1 和 bar2 都會以預設的顏色（類紫色）來呈現，可是這樣的呈現效果不好；一般來說，不同的 Bar 會有不同的顏色。設定 Bar 顏色的方法為：
```
  bar1.setColour("#993300");
  bar2.setColour("#669933");
```
setColour() 的參數是一個字串，其格式為井字號（#）之後，加上 RGB 的十六進位數字。讀者可以利用繪圖工具或者 Table Tutor - Color Chart 來選擇顏色。
顏色設定完成之後，我們可以利用類似之前的迴圈將亂數值經由 addValues() 將資料加到 BarChart 內。最後，我們就可以利用下列方式將 bar1 和 bar2 加上 Chart 物件：
```
  cht.addElements(bar1, bar2);
```

為了完整性，我們將完整的 JSP 程式碼列示如下：

<%@page contentType="text/plain" pageEncoding="UTF-8"
        import="jofc2.*,
                jofc2.model.*,
                jofc2.model.elements.*,
                jofc2.model.elements.BarChart.*"%>
<%
  Chart cht = new Chart("亂數資料");

  // 產生兩串資料，分別由 bar1 和 bar2 代表
  BarChart bar1 = new BarChart(BarChart.Style.NORMAL),
           bar2 = new BarChart(BarChart.Style.NORMAL);
  bar1.setColour("#993300");
  bar2.setColour("#669933");
  for(int i=0; i<4; i++) {
    bar1.addValues((int) (Math.random() * 10) + 1);
    bar2.addValues((int) (Math.random() * 7) + 1);
  }
  cht.addElements(bar1, bar2);

  out.println(cht.toString());
%>

Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

OFC2 - 第四個範例

The materials presented in this web page is provided as is and is used solely for educational purpose. Use at your own risks.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

我們假設你已經依據之前的文章完成的 OFC2 的安裝工作，也了解之前 OFC2 和 JSP 的合用方式。在本文中，我們希望能夠更進一步的調整條型圖的內容，這次調整的內容包含修改圖表標題的顏色、大小，新增 X 軸的標籤，設定 Y 軸的最小值、最大值、間距，設定 Y 軸的標籤（從之前的說明，目前只支援英文），以及分別設定兩個 Bar 的值代表 2008 和 2009 的銷售量。程式修改後所呈現的畫面如下：

在進一步說明範例之前，我們要先說明的是：我們只針對跟之前不同的地方進行說明，相同的部分就不再贅述！

首先，我們修改圖表標題的字體大小、顏色，以及 alignment。為了設定標題，我們必須先宣告一個沒有標題的 Chart 物件，然後利用 setTitle() 的方法將標題文字以及格式（style；包含字體大小、顏色，以及 alignment）設定好。 setTitle() 的參數是一個 jofc2.model.Text 的物件，而產生 style 字串的方式是藉由 createStyle(字體大小, 顏色, alignment) 來完成，所以我們的程式碼如下所示：
```
  // 調整 title 的字體大小、顏色，以及 alignment
  cht.setTitle(new Text("亂數資料", Text.createStyle(20, "#9933FF", Text.TEXT_ALIGN_CENTER)));
```
我們必須使用 jofc2.model.axis.XAxis 來設定 X 軸的標籤：在產生完 XAxis 物件之後，我們利用其 addLabels() 方法將標籤加進去，最後我們利用 Chart 物件的 setXAxis() 的方法將 XAxis 設定為 Chart 的 X 軸物件。程式碼如下所示：
```
  // 調整 X 軸的標籤
  XAxis labels = new XAxis();
  labels.addLabels("北區", "中區", "南區", "離島");
  cht.setXAxis(labels); 
```
如果要調整 Y 軸的呈現方式，我們使用 jofc2.model.axis.YAxis 物件。 YAxis 物件提供 setRange(最小值, 最大值, 間距) 方法來設定 Y 軸的數值；另外，我們也可以使用 Chart 物件的 setYLengend() 的方法來改變 Y 軸的標籤。setYLengend() 的參數是一個 Text 物件，設定方式跟之前相同。原始碼如下所示：
```
  // 調整 Y 軸的標籤（目前只能英文）以及間距
  YAxis range = new YAxis();
  range.setRange(0, 60, 5);
  cht.setYAxis(range);
  cht.setYLegend(new Text("Quantity", Text.createStyle(12, "#736AFF", Text.TEXT_ALIGN_CENTER)));
```

最後，我們需要為 bar1 和 bar2 分別設定標籤，其設定方式如下：

  // 為 bar1 和 bar2 加上標籤
  bar1.setText("2008");
  bar2.setText("2009");

為了完整性，我們將完整的 JSP 程式碼列示如下：

<%@page contentType="text/plain" pageEncoding="UTF-8"
        import="jofc2.*,
                jofc2.model.*,
                jofc2.model.elements.*,
                jofc2.model.axis.*,
                jofc2.model.elements.BarChart.*"%>
<%
  Chart cht = new Chart();

  // 調整 title 的字體大小、顏色，以及 alignment
  cht.setTitle(new Text("亂數資料", Text.createStyle(20, "#9933FF", Text.TEXT_ALIGN_CENTER)));

  // 調整 X 軸的標籤
  XAxis labels = new XAxis();
  labels.addLabels("北區", "中區", "南區", "離島");
  cht.setXAxis(labels);  

  // 調整 Y 軸的標籤（目前只能英文）以及間距
  YAxis range = new YAxis();
  range.setRange(0, 60, 5);
  cht.setYAxis(range);
  cht.setYLegend(new Text("Quantity", Text.createStyle(12, "#736AFF", Text.TEXT_ALIGN_CENTER)));
  
  // 產生兩串資料，分別由 bar1 和 bar2 代表
  BarChart bar1 = new BarChart(BarChart.Style.NORMAL),
           bar2 = new BarChart(BarChart.Style.NORMAL);
  bar1.setColour("#993300");
  bar2.setColour("#669933");

  // 為 bar1 和 bar2 加上標籤
  bar1.setText("2008");
  bar2.setText("2009");

  for(int i=0; i<4 data-blogger-escaped-10="" data-blogger-escaped-1="" data-blogger-escaped-60="" data-blogger-escaped-ath.random="" data-blogger-escaped-bar1.addvalues="" data-blogger-escaped-bar1="" data-blogger-escaped-bar2.addvalues="" data-blogger-escaped-bar2="" data-blogger-escaped-cht.addelements="" data-blogger-escaped-cht.tostring="" data-blogger-escaped-gt="" data-blogger-escaped-i="" data-blogger-escaped-int="" data-blogger-escaped-out.println="" data-blogger-escaped-pre="">

Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

JOFC2 - 第二個範例

The materials presented in this web page is provided as is and is used solely for educational purpose. Use at your own risks.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

我們假設你已經依據之前的文章完成的 OFC2 的安裝工作。在本文中，我們開始說明如何將 OFC2 和 JSP 作結合。我們在本範例中，將以亂數來產生四個整數，並將這四個整數值以 BarChart（條型圖）呈現出來。我們在這一系列的教學文件中，都以條型圖為範例，至於其他的圖表，我們建議分別利用舊版的 Open Flash Chart 教學文件以及 JOFC2 的 JavaDoc 來學習。

首先我們來看 JSP 的程式碼：在所有 JOFC2 所產生的圖表都是由一個 jofc2.model.Chart 的物件所形成，而在形成 Chart 物件的時候，我們可以順便為這個圖表產生"標題"。產生 Chart 物件的方式：
```
import jofc2.model.Chart;

Chart cht = new Chart("亂數資料");
```
一旦 Chart 物件 cht 產生之後，我們就可以在這個物件上加上需要的圖表內常見的物件；例如，條型圖（BarChart）（或者其他圖，如 LineChart、PieChart 等），圖例（legend），以及 X、Y 軸等。由於我們希望能產生條型圖，所以我們需要產生一個 jofc2.model.elements.BarChart 物件（其實大多數圖表的物件都是屬於 jofc2.model.elements.Element 的子類別，例如 BarChart、 LineChart、PieChart 等），其產生的方式如下：
```
import jofc2.model.elements.*;

BarChart bc = new BarChart(BarChart.Style.NORMAL);
```
BarChart 的風格有三種，除了程式碼中的 BarChart.Style.NORMAL，還有 BarChart.Style.GLASS 以及 BarChart.Style.THREED 兩種。我們鼓勵讀者在看完本文的範例之後，可以試試看更改 BarChart 的風格。有了 BarChart 物件 bc 之後，我們可以開始為 bc 加上其所要表現的數字。將數字加入 bc 是利用其 addValues() 的方法，其程式碼如下：
```
  for(int i=0; i<4 data-blogger-escaped-10="" data-blogger-escaped-1="" data-blogger-escaped-ath.random="" data-blogger-escaped-bc.addvalues="" data-blogger-escaped-i="" data-blogger-escaped-int="" data-blogger-escaped-pre="">
```
完成了 BarChart 的設定之後，我們需要把它加到 cht 內，其方式如下：
```
  cht.addElements(bc);
```
最後，我們就可以把 cht 轉換成字串，並將它回傳給客戶端，其方式如下：
```
  out.println(cht.toString());
```
這個範例的完整繩式碼如下：
```
<%@page contentType="text/plain" pageEncoding="UTF-8"
        import="jofc2.*,
                jofc2.model.*,
                jofc2.model.elements.*,
                jofc2.model.elements.BarChart.*"%>
<%
  Chart cht = new Chart("亂數資料");

  // 產生 BarChart 並將資料新增到 BarChart
  BarChart bc = new BarChart(BarChart.Style.NORMAL);
  for(int i=0; i<4; i++)
    bc.addValues((int) (Math.random() * 10) + 1);

  cht.addElements(bc);
  out.println(cht.toString());
%>
```
請注意： 跟之前的資料檔一樣，請在儲存這個檔案的時候，務必要把它儲存成 UTF-8 的編碼方式，如此一來 OFC2 才能正確的顯示中文；另外，也請記得將 @page 的 pageEncoding 的值定義成 UTF-8。
請將上述程式檔置放於 tomcat\webapps\test 內，並先執行它以確保該程式能正確的回傳符合 json 格式的資料，而且也可以確定該程式可以正確無誤的執行。假設我們將該程式碼儲存為 ofc2.jsp，執行後的畫面如下：

如果程式可以正確無誤的執行，我們就可以為它開發一個相對應的 HTML 檔。這個檔案的內容跟之前的範例非常類似，差別只在我們為 data-file 設定的值為程式的名稱，也就是 ofc2.jsp。

<html>
<head>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "500", "250", "9.0.0",
                   "expressInstall.swf", {"data-file":"ofc2.jsp"});
</script>
</head>
<body>
 
<p>第二個範例：結合 OFC2 和 JSP</p>
<div id="my_chart"></div>
</body>
</html>

最後，我們可以載入 ofc2.html，其畫面如下：

由於條型圖的內容是由亂數產生器所產生的，因此每一次"重新載入"之後，條型圖的內容應該會改變；這個情形在 Firefox 是完全沒問題的，但是在 IE 8 時，卻往往看到 IE 8 只會繼續使用 cache 的內容，而不會每次都重新執行 ofc2.jsp 並使用其最新的值。日前，有位網友（Jackey）提供了一個解決方式，那就是利用亂數字串給 JSP 檔，如此一來，IE 認定無法重複使用 cache 的內容而必須重新執行。以本範例而言，只需將 {"data-file":"ofc2.jsp"} 改成 {"data-file":"ofc2.jsp?random=(new Date()).valueOf()"} 但是使用時，請切記，你的 JSP 檔（在本例中就是 ofc2.jsp）內不會讀取名為 random 的參數；如果有，請記得將名稱改成一個不用的參數名稱即可。

Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

OFC2 - 第一個範例

The materials presented in this web page is provided as is and is used solely for educational purpose. Use at your own risks.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

我們假設你已經依據之前的文章完成的 OFC2 的安裝工作，也已經把 ofc0.html 以及 data.json 放在適當的目錄下。在本文中，我們開始說明第一個範例的內容：

由於在資訊系統中，資料的內容常常會因為資料庫的內容改變而不同，因此系統開發時撰寫一份固定的資料檔（也就是範例中的 data.json）是沒什麼道理的。一般來說，data.json 的內容會由程式產生，在我們的教學文件中，這些資料是由 JSPs/servlets 來產生。除非讀者有意願開發一套類似 JOFC2 的套件，大多數開發人員是不需要知道 data.json 的內容的。
就像之前說明的，OFC2 是利用 open-flash-chart.swf 來讀取資料並將結果呈現在網頁中的，所以需要呈現 OFC2 圖表的網頁必須要有一個機制將該 swf 檔下載到瀏覽器；這個部分還蠻簡單的，因為 OFC2 的作者利用了一個 Javascript 檔（就是下列原始碼中的 swfobject.js）讓這個過程變的非常簡單。載入並使用 swfobject.js 的方式如下原始碼的綠色部分：在這段程式碼中，總共有兩段 <script>，第一段幾乎不必改變，可能需要改變以及說明的在第二段；這兩段 <script> 習慣上會置放於 <head> 標籤之間。在第二段 <script> 中，我們呼叫了 swfobject.embedSWF() 方法（定義於 swfobject.js 內），該方法共有五個參數，第一個參數用來載入 open-flash-chart.swf （這個部分大多不會變，除非你將該檔置放於其他位置），第二個參數在指出該圖表出現的地方；以我們這個範例來說，圖表會出現在一個 id 為 my_chart 的標籤內，也就是如原始碼紅色的部分所示。
```
<html>
<head>

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "500", "250", "9.0.0");
</script>

</head>
<body>
 
<p>第一個範例：使用 SWFObject.js</p>

<div id="my_chart"></div>

</body>
</html>
```
第三和第四個參數分別代表該圖表的 X 軸和 Y 軸的長度，以本範例來說，該圖表的大小為 500x250 的方形；最後一個參數代表 Flash 的版本數，從這裡看得出來， open-flash-chart.swf 是以 Flash 9 版所寫出來的。
練習題： 請將 my_chart 改成 first_chart，另將大小改成 800x400，並試著將圖表置放於網頁的中央。

在上述範例中，我們必須在瀏覽器的 URL 欄位中多輸入 ?ofc=data.json，雖然這個方法比較有彈性（讓使用者傳入不同的資料檔，例如之前的 wdata.json），但是如果資料檔是固定的，或者資料來源是一個固定的程式執行後的結果，那麼有沒有直接將檔案或者程式名稱寫在 HTML 檔案內的方式？答案是有的，請看下列程式碼：

<html>
<head>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "500", "250", "9.0.0",
                   "expressInstall.swf", {"data-file":"data.json"}
);
</script>
</head>
<body>
 
<p>第一個範例：使用固定來源名稱</p>
<div id="my_chart"></div>
</body>
</html>

這段原始碼跟之前的範例幾乎相同，不同的地方在於綠色部分：利用 swfobject.embedSWF() 來呼叫 expressInstall.swf，並利用它來讀取資料的來源，該資料來源的名稱必須是 data-file，而其值可以依據資料來源的不同而不同，利用想使用 wdata.json 的話，請將 data.json 改成 wdata.json；或者如果想呼叫遠端程式 ofc2.jsp 的話，請將 data.json 改成 ofc2.jsp 即可；讀者可以點一下測試頁並觀察 URL 欄位的值。

Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

OFC2 的準備工作

The materials presented in this web page is provided as is and is used solely for educational purpose. Use at your own risks.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

OFC2 的安裝工作包含兩個部分，一個是 OFC2 本身，另一個是用來產生 JSON 的 Java 套件；當然第二個部分不是必要的，因為 OFC2 本身已經包含了像是 php 之類的套件，如果你的開發環境不是 Java，你可以到 OFC2 的首頁確認你是否還需要下載安裝其他套件。另外，由於我們之後的範例是以 JSP 為主，因此我們假設讀者已經熟析 JSP，而且了解我們預設的 tomcat 設定如 JSP 入門所示；也就是說，我們的測試目錄是 tomcat/webapps/test。

安裝 OFC2：這個部分有點麻煩，第一個原因是該網頁中含有多個版本，至於哪個版本比較好也沒有清楚的說明；第二個原因是OFC2 開發的時間是 2009 年，似乎舊了一些。最近找到了另一個新版本，目前從測試的結果來看，似乎網頁上的範例都 OK，至於新版本有沒有提供新的功能，我需要找時間再試試看。以下針對我測試過的兩個版本進行說明：
1. Version 2 Lug Wyrm Charmer (28th, July 2009)：
  1. 請到 OFC2 下載網頁下載 Version 2 Lug Wyrm Charmer (28th, July 2009)，檔案名稱為 open-flash-chart-2-Lug-Wyrm-Charmer.zip。
  2. 請將該壓縮檔進行解壓縮。
  3. 解壓縮之後，它包含有 12 個目錄（如 js, php-ofc-library, php5-ofc-library 等）以及兩個檔案（分別是 README.txt 和 open-flash-chart.swf）；請將 open-flash-chart.swf 以及 js 目錄分別複製於 tomcat/webapps/test。
2. OFC2 Community Release：這個版本是在 OFC2 討論區中看到的。從討論區的字裡行間看出，似乎 OFC2 原作者已經不再進行更新了，因此 OFC2 社群中有人跳出來進行持續更新。
  1. 請到 OFC2 Community Release 下載網頁下載最新版本，我們正在測試 open-flash-chart-2-community-0.25.zip。
  2. 請將該壓縮檔進行解壓縮。
  3. 解壓縮之後，請將 open-flash-chart.swf 以及 js 目錄分別複製於 tomcat/webapps/test。
3. 從第一個範例中，我們可以知道目前介紹的 open-flash-chart.swf 是無法讓 Y 軸上的標籤出現中文的（例如，將 data.json 中的 "Open Flash Chart" 改成 "次數"， open-flash-chart.swf 是不會呈現任何結果的）。如果讀者一定需要在 Y 軸出現中文，甚至希望在 X 軸上的中文可以轉動某個角度，那麼可以下載這個版本；該版本的修改範圍如說明。請注意： 下載檔是一個 zip 檔，解壓縮之後的檔案為 open_flash_chart.swf（是底線），而該檔案的大小大約 7 個 MB，與原先不到 300 多 KB 的檔案比起來，明顯大很多，使用時要注意頻寬的問題。
安裝 OFC2 的 Java 套件：
1. 請到 JOFC2 - Java API for Open Flash Chart 2 下載 jofc2-1.0-0.zip。雖然 JOFC2 的首頁介紹了（開發中的）最新版 JOFC2，但是本文僅介紹原始版的。
2. 解壓縮該 ZIP 檔之後，請將 jofc2-1.0-0.jar 以及 xstream-1.3.1.jar（在解壓縮後的 lib 目錄內）複製到 tomcat\common\lib 或者 tomcat\shared\lib 內。

由於 JOFC2 的測試需要寫程式，所以這部份的測試留到開始介紹 JSP 程式時才說明，我們先測試 OFC2 的安裝是否正確。請將下列資料檔案，命名為 data.json 並將其放置於 tomcat/webapps/test。請注意： 當你編輯 data.json 的時候，由於 OFC2 只能正確的解讀 UTF-8 的資料，所以在資料中包含有中文的資料時，請以 UTF-8 的編碼方式儲存；以"記事本"為例，在儲存檔案時，請在"編碼"的地方，選擇 UTF-8。

{
  "title":{
    "text":  "測試資料",
    "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
  },
 
  "y_legend":{
    "text": "Open Flash Chart",
    "style": "{color: #736AFF; font-size: 12px;}"
  },
 
  "elements":[
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#9933CC",
      "text":      "Page views",
      "font-size": 10,
      "values" :   [9,6,7,9,5,7,6,9,7]
    },
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#CC9933",
      "text":      "Page views 2",
      "font-size": 10,
      "values" :   [6,7,9,5,7,6,9,7,3]
    }
  ],
 
  "x_axis":{
    "stroke":1,
    "tick_height":10,
    "colour":"#d000d0",
    "grid_colour":"#00ff00",
    "labels": {
        "labels": ["一月","二月","March","April","May","June","July","August","Spetember"]
    }
   },
 
  "y_axis":{
    "stroke":      4,
    "tick_length": 3,
    "colour":      "#d000d0",
    "grid_colour": "#00ff00",
    "offset":      0,
    "max":         20
  }
}

請利用編輯器將下列 HTML 檔存成 ofc0.html 檔：

<html>
<head>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "500", "250", "9.0.0");
</script>
</head>
<body>
 
<p>第一個範例：使用 SWFObject.js</p>
 
<div id="my_chart"></div>
 
</body>
</html>

最後，請在瀏覽器的 URL 欄輸入 http://localhost:8080/test/ofc0.html?ofc=data.json，你應該會看到類似之前的圖表；你也可以點一下測試頁來看一下結果。

在測試 OFC2 的過程中，我試圖將圖表中 Y 軸的標籤進行更改；例如我希望將範例圖表中的 "Open Flash Chart" 換成 "次數"，但是"次數"無法顯示出來，似乎 OFC2 無法將中文顯示在 Y 軸的標籤。練習題： 請試著將 data.json 中 y_legend 後的 Open Flash Chart 換成 次數，並將 data.json 轉存成 wdata.json，然後輸入 http://localhost:8080/test/ofc0.html?ofc=wdata.json 試試看！

Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

Open Flash Chart 2 簡介

The materials presented in this web page is provided as is and is used solely for educational purpose. Use at your own risks.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

開發以瀏覽器為介面的資訊系統是這幾年來系統開發的常態，而且常見的開發方式都能很輕易的顯示一些 HTML 的文字內容（如條列示、表格式），但是對於顯示圖表，卻往往發生找不到適當的中文教學文件的困擾，這篇文章就是希望能部分解決這個問題，也順便可以當作教學文件用。
由於我們系上的程式語言以 Java 為主，因此以 Java 和 Chart 的關鍵字搜尋之後，我們發現了 JFreeChart 以及 jCharts 這兩套免費的 Java 工具，可以讓程式開發人員簡單的產生各式各樣的圖表。這兩套工具又以 JFreeChart 可以找到的文件比較多，我也曾利用找到的教學資料：JFreeChart(JSP)學生學習評量曲線圖範例"、使用JFreeChart製作美觀易懂的圖表開發了一些能夠顯示工具提示（tooltip）的條型圖。在測試 JFreeChart 的過程中，我發現雖然它可以提供一般 Java Applications 使用，也能在 servlets/JSPs 的開發環境下使用，但是總覺得它的設計以及使用上實在太多於複雜。有幾次找尋資料的過程中，發現了 Open Flash Chart 2 的套件，於是決定試試看，並比較它們的優缺點。目前的感覺，我個人覺得 Open Flash Chart 2 似乎比較簡單，只是它僅限於以瀏覽器為介面的資訊系統開發中使用，所以決定先寫篇 Open Flash Chart 2 的教學文件（也就是本文）；或許哪一天心血來潮也會把之前的 JFreeChart 也寫一寫。
Open Flash Chart 2 是一個利用 Flash 物件來顯示圖表的一個工具，而且更妙的是這個工具不但是免費的，而且還是 Open Source（開放原始碼）的。在開始介紹 OFC2 之前，請點選這個範例，如果這樣的圖表能引起你的興趣，請繼續閱讀下去。
基本上，每一個 OFC2 的圖表都是由一個內嵌在網頁內的 Flash 物件所形成，而該 Flash 物件就是由 OFC2 所開發的 open-flash-chart.swf；當瀏覽器載入一個含有 OFC2 Flash 物件的網頁，該 Flash 物件會由伺服器端下載；當下載完成後，該 Flash 物件會開始讀取呈現圖表所需的資料檔案；OFC2 要求資料檔案必須符合 JSON 的格式，而該資料檔可以是一個固定的資料檔，或者是由一個程式（如 servlets/ JSPs）回傳給該 Flash 物件；資料讀取完成後，Flash 物件就把圖表顯示出來。

準備工作：這部分主要在於 OFC2 的安裝。由於 OFC2 物件可以讀取由程式所形成的 JSON 資料檔，因此我們需要安裝給 servlets/JSPs 的套件，以便於可以輕易、快速的產生 JSON 檔。
第一個範例：我們在這個範例中利用固定的資料檔案來呈現圖表。
第二個範例：我們在這個範例中利用 JSP 程式來產生資料，並由 HTML 檔呈現圖表。
第三個範例：這個範例主要在於呈現兩個 Bars 在條型圖中，並分別為它們設定各自的顏色。
第四個範例：這個範例主要在於為條型圖更進一步的調整，調整的部分包含設定 X 軸的標籤等。
第五個範例：這個範例主要在於將條型圖與資料庫結合；範例中使用的是 MySQL。
第六、七個範例：這兩個範例主要在於說明如何使用 JSP 分別產生 LineChart 以及圓餅圖。
第八個範例：這個範例主要在於說明如何在一個圖表中，建立兩種以上的不同圖表；範例中使用的是之前說過的 BarChart 以及 LineChart。

Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

利用純 JDBC 驅動程式來存取資料庫

MySQL Server 簡介

The materials presented in this web page is provided as is and is used solely for educational purpose. Use at your own risks.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

看其他教材

本文假設你已經安裝了 MySQL Server 5.1.x 版，而且你也依據之前的說明，建立了使用者 jlu，而且你也為 jlu 建立了一個資料庫 eric，並且在資料庫中，建立了表格 Product。在下列的步驟中，我們將說明如何利用純 JDBC 驅動程式來開發 Java 程式以便於對表格 Product 進行增、刪、改、查的動作。以下文件，我們假設讀者熟析 Java 程式；如果讀者想學習 Java 的物件導向設計的技巧，我們建議購買作者所寫的 呂瑞麟與陳宜惠著，Java 101: 物件導向程式設計，上奇出版，09/2008 以及其勘誤表。

為了讓 Java 程式（包含 JSP、Java Servlets 等）能夠存取資料庫，昇陽（Sun）定義了 JDBC 的介面，而各家的資料庫管理系統可以依據這些介面定義，開發出其資料庫系統的 JDBC 驅動程式。JDBC 驅動程式又分成四大類，其細節可以參考資料處理入門，在本文中，我們只針對 MySQL 提供的純 JDBC 驅動程式來說明。
純 JDBC 驅動程式：若要使用純 JDBC 驅動程式，請安裝 MySQL Connector/J。作者下載的是 5.1.x 版的 ZIP Archive，檔案名稱為 mysql-connector-java-5.1.x.zip。將檔案解壓縮之後，請在解壓縮的目錄內，將 mysql-connector-java-5.1.x-bin.jar 設定到適當的環境變數 CLASSPATH 內；如果你的開發環境包含 Tomcat，則我們建議你將 mysql-connector-java-5.1.x-bin.jar 放置於 tomcat\shared\lib 目錄內。假設 Tomcat 安裝於 e:\tomcat，請將該 jar 檔放置於 tomcat\shared\lib 目錄，並設定適當的環境變數 CLASSPATH。設定環境變數可以由控制台來完成，或者在"命令提示字元"視窗內輸入：
```
set CLASSPATH=.;e:\tomcat\shared\lib\mysql-connector-java-5.1.x-bin.jar;%CLASSPATH%
```
開發 JDBC 程式：一般來說，以 Java 語言（含 JSP 和 servlet）來連結資料庫，大多需要完成以下的步驟：
1. 利用 Class.forName(驅動程式的名稱); 載入 JDBC 的驅動程式；以 MySQL 的 JDBC 驅動程式的名稱為例，載入的用法為 Class.forName("com.mysql.jdbc.Driver");。每一種驅動程式都有其相對應的名稱，開發人員在使用之前必須先搞清楚。
2. 利用 Connection conn = DriverManager.getConnection(資料庫的位置, 帳號名稱, 密碼); 來產生一個 Java 程式和資料庫之間的連線（也就是 Connection 物件 conn）。 DriverManager.getConnection() 內有三個參數，第一個參數說明程式想要跟哪一個資料庫連線；同樣的，這個參數的值會因為使用的 JDBC 驅動程式不同而不同，以我們的範例為例，因為我們使用 MySQL 的 JDBC 驅動程式，而且因為 MySQL 的位置在本機（也就是 127.0.0.1），且因為資料庫的名稱為 "eric"，所以第一個參數值必須為 "jdbc:mysql://127.0.0.1/eric"（其中 jdbc:mysql: 是固定不變的，最後 "//IP 位址/資料庫名稱" 會隨著 MySQL 安裝的 IP 位址以及該 MySQL 上的資料庫名稱的不同而改變）。第二個以及第三個參數分別為連結該資料庫所需要的"帳號名稱"以及"密碼"。
3. 連線完成之後，我們可以開始執行 SQL 的指令了。執行 SQL 指令的方式是先借由 conn 來產生一個 Statement 的物件，然後再藉由 Statement 的物件來執行 SQL 指令。產生 Statement 物件的方式為 Statement aStatement = conn.createStatement();，其中 aStatement 即為 Statement 物件的名稱。
4. SQL 指令主要執行"增、刪、改、查"四個動作，而這四個動作中只有"查詢" 會回傳一個表格的資料，其他三種都只回傳一個代表執行是否成功的整數。
  1. 如果 SQL 指令執行"增、刪、改"，執行的方式為 aStatement.executeUpdate(SQL指令);，該方法回傳總共被改變的資料筆數。以在 Product 新增一筆編號 5 的產品為例，我們的程式碼即為 aStatement.executeUpdate("insert into Product values(5,'鍵盤',14.5,2)");；由於只有一筆資料被新增，所以執行後，aStatement.executeUpdate() 會回傳 1。
  2. 如果 SQL 指令執行"查詢"，執行的方式為 aStatement.executeQuery(SQL指令 );，該方法回傳查詢的結果；由於 SQL 查詢的結果也是一個表格，該表格由 Java 的 ResultSet 物件所代表。以查詢整個 Product 的資料為例，我們的程式碼即為 ResultSet rs = aStatement.executeQuery("select * from Product");。
5. 如果 SQL 指令是查詢，程式大多會進一步處理該查詢結果，也就是 ResultSet 物件。一個 ResultSet 物件包含兩種資料，一種是該回傳表格的 Metadata（由 ResultSetMetaData 物件所代表；該物件包含總共有幾個欄位、欄位的名稱、欄位的資料型態等資料），另一種是表格的資料。
  1. 我們可以經由 ResultSetMetaData rsmeta = rs.getMetaData(); 來取得 ResultSetMetaData 物件；然後經由 int cols = rsmeta.getColumnCount(); 來取得回傳表格的總欄位數；在得到總欄位數 cols 之後，我們就可以經由一個簡單的 for 迴圈，將每一個欄位的名稱以及資料型態，經由 rsmeta.getColumnLabel(i) 以及 rsmeta.getColumnType(i)。
  2. 經由 ResultSet 物件 rs 可以取得實際的查詢資料。在預設的情形下，一開始 rs 指向資料的第 0 筆，我們可以經由 rs.next() 來依序取得下一筆的資料，一旦下一筆資料不存在，rs.next() 會回傳 false。當 rs.next() 指向某一筆資料的時候，我們可以利用之前 rsmeta 來取得總欄位數，然後利用 rs.getString(i) 將一個一個欄位的資料以字串的方式取出。除了 getString(i) 的方式之外，我們也可以利用 getDate(i)、getTime(i)、getDouble(i)、 getInt(i) 等方法分別取出資料型態為 Date、Time、double、int 的資料。
6. 最後，但也是很重要的：在程式結束以前，我們必須將相關的資料庫資源釋放出來。資源釋放的方式是經由呼叫該物件的 close() 方法達成；若釋放 Statement 物件，則與該 Statement 物件相關的 ResultSet 物件也會被釋放。另外，在程式的最後，我們也必須經由 conn.close(); 將連線釋放。
由於這個程式跟之前的 NewODBC.java 幾乎一樣，我們只針對不同的地方（以綠色標示）作說明。
```
import java.sql.*;

public class NewJDBC {
  // 設定 JDBC 驅動程式的名稱：com.mysql.jdbc.Driver
  static String classname = "com.mysql.jdbc.Driver";

  // 設定 JDBC 的連線資訊，其中 jdbc:mysql:// 是固定不變的
  // 在 // 之後，首先加上 IP 或者主機名稱，在本例中是 127.0.0.1
  // IP 之後，請接上斜線（/）以及資料庫的名稱，在本例中是 eric
  static String jdbcURL = "jdbc:mysql://127.0.0.1/eric";
  static String UID = "jlu";
  static String PWD = "newpasswd";
  static Connection conn = null;

  public static void main( String argv[] ) {
    if(argv.length != 1) {
      System.out.println("Usage: java NewJDBC Product");
      System.exit(2);
    }
    String aQuery = "select * from " + argv[0];
    String iSQL = "insert into " + argv[0] + " values(5,'鍵盤',14.5,2)";
    String uSQL = "update " + argv[0] + " set Name='無線鍵盤' where ID=5";
    String dSQL = "delete from " + argv[0] + " where ID=5";

    try {
      // 載入 JDBC 驅動程式
      Class.forName(classname).newInstance();

      // connect to Database
      conn = DriverManager.getConnection(jdbcURL,UID,PWD);

      // Display current content
      System.out.println("Display current content");
      ShowResults(aQuery);

      // Insert a new record
      System.out.println("\nInserting a new record .....");
      InsertNew(iSQL);
      ShowResults(aQuery);

      // Update record
      System.out.println("\nUpdateing a record .....");
      UpdateNew(uSQL);
      ShowResults(aQuery);

      // Delete record
      System.out.println("\nDeleting a record .....");
      DeleteNew(dSQL);
      ShowResults(aQuery);

      conn.close();
    } catch (Exception sqle) {
      System.out.println(sqle);
      System.exit(1);
    }
  }

  private static void DeleteNew(String dSQL) {
    try {
      Statement aStatement = conn.createStatement();
      aStatement.executeUpdate(dSQL);
    } catch (Exception e) {
      System.out.println("Delete Error: " + e);
      System.exit(1);
    }
  }

  private static void UpdateNew(String uSQL) {
    try {
      Statement aStatement = conn.createStatement();
      aStatement.executeUpdate(uSQL);
    } catch (Exception e) {
      System.out.println("Update Error: " + e);
      System.exit(1);
    }
  }

  private static void InsertNew(String iSQL) {
    try {
      Statement aStatement = conn.createStatement();
      aStatement.executeUpdate(iSQL);
    } catch (Exception e) {
      System.out.println("Insert Error: " + e);
      System.exit(1);
    }
  }


  private static void ShowResults(String aQuery) {
    try {
      Statement aStatement = conn.createStatement();
      ResultSet rs = aStatement.executeQuery(aQuery);

      ResultSetMetaData rsmeta = rs.getMetaData();
      int cols = rsmeta.getColumnCount();

      // Display column headers
      for(int i=1; i<=cols; i++) {
        if(i > 1) System.out.print("\t");
        System.out.print(rsmeta.getColumnLabel(i));
      }
      System.out.print("\n");

      // Display query results.
      while(rs.next()) {
        for(int i=1; i<=cols; i++) {
          if (i > 1) System.out.print("\t");
          System.out.print(rs.getString(i)); 
        }
        System.out.print("\n");
      }

      // Clean up
      aStatement.close();
    }
    // a better exception handling can be used here.
    catch (Exception e) {
      System.out.println("Exception Occurs.");
    }
  }
}
```

Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

利用 JDBC-ODBC 驅動程式來存取資料庫

MySQL Server 簡介

The materials presented in this web page is provided as is and is used solely for educational purpose. Use at your own risks.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

看其他教材

本文假設你已經安裝了 MySQL Server 5.1.x 版，而且你也依據之前的說明，建立了使用者 jlu，而且你也為 jlu 建立了一個資料庫 eric，並且在資料庫中，建立了表格 Product。在下列的步驟中，我們將說明如何利用 JDBC 驅動程式來開發 Java 程式以便於對表格 Product 進行增、刪、改、查的動作。以下文件，我們假設讀者熟析 Java 程式；如果讀者想學習 Java 的物件導向設計的技巧，我們建議購買作者所寫的 呂瑞麟與陳宜惠著，Java 101: 物件導向程式設計，上奇出版，09/2008 以及其勘誤表。

為了讓 Java 程式（包含 JSP、Java Servlets 等）能夠存取資料庫，昇陽（Sun）定義了 JDBC 的介面，而各家的資料庫管理系統可以依據這些介面定義，開發出其資料庫系統的 JDBC 驅動程式。JDBC 驅動程式又分成四大類，其細節可以參考資料處理入門，在本文中，我們只針對 JDBC-ODBC 驅動程式來說明。
JDBC-ODBC 驅動程式：若要使用 JDBC-ODBC 驅動程式，請安裝 MySQL Connector/ODBC。作者下載的是 5.1.x 版的 ZIP Archive，檔案名稱為 mysql-connector-odbc-noinstall-5.1.x-win32.zip。將檔案解壓縮之後，請在解壓縮的目錄內，執行 install.bat 即可。請注意，如果你的開發環境不是 Windows，那麼你的作業環境必須安裝以下驅動程式之一：unixODBC, Apple iODBC, 或者 iODBC。安裝 JDBC-ODBC 驅動程式之後，你需要在控制台上設定 ODBC 的資訊，這些資訊包含連結資料庫的電腦在哪裡（IP 或者主機名稱）、資料庫名稱、帳號/密碼、以及代表以上資訊的一個名稱，該名稱為 Data Source Name（資料來源名稱；或簡稱 dsn）。你如果使用的是非 Windows 的 ODBC 驅動程式，則請依據該程式的設定方式進行。首先，在 Windows XP 的環境下，請利用控制台 --> 效能及維護 --> 系統管理工具 --> 資料來源 (ODBC)，並開啟"資料來源"，開啟後畫面如下：

然後，請在"系統資料來源名稱"上點一下，其畫面如下：

請在"新增"按鈕上點一下，螢幕上會出現"建立新資料來源"的對話視窗，將可以選擇的驅動程式清單往下拉，你會看到如以下畫面的 "MySQL ODBC 5.1 Driver"，請選擇它，並點一下"完成"按鈕。

在點選完"完成"按鈕後，螢幕會出現一個 MySQL Connector/ODBC 的設定畫面。

以這個範例來說，dsn 的名稱為 csie，因此請在第一個欄位填入 csie。第二個欄位（Description）是用來描述該 dsn 的；如果你建立了許多的 dsn，這個欄位的資料可以提醒你它的作用為何，在這個範例中，我們不填入任何資料。第三個欄位 Server 指的是 MySQL 的所在位置，它可以是遠端的 Server 或者是當地端的 localhost；因為我們都假設在同一步電腦上執行這些動作，所以這個欄位我們可以填入 127.0.0.1 或者 localhost。第四個欄位 Port 指的是 MySQL Server 的連線端口號，由於我們並未修改 MySQL 的設定，而 MySQL 的預設端口號就是 3306，因此這個部分不必修改；如果你認為使用標準端口號會造成比較大的網路安全漏洞，你可以在伺服器端和 dsn 同時修改連線端口號。
第五、六、七個欄位分別是使用者帳號（User）、密碼（Password）、以及資料庫名稱（Database）；依據之前的設定，我們可以分別填入 jlu、newpasswd、以及 eric。完成後的畫面如下：

填寫完以上資料之後，你可以點一下 "Test" 按鈕在測試一下設定是否正確，能不能完成連線等。如果一切沒問題，最後我們必須對資料庫連線的編碼方式進行設定，設定的方式是在 "Details>>" 按鈕點一下，然後依照以下畫面，在 "Misc Options" 上點一下，然後在 "Character Set:" 內選擇 "big5"。

設定完成並點選完 "OK" 按鈕後，以下的畫面會出現，我們也完成了全部的設定，這時就可以把該視窗關閉。

程式開發：一般來說，以 Java 語言（含 JSP 和 servlet）來連結資料庫，大多需要完成以下的步驟：

利用 Class.forName(驅動程式的名稱); 載入 JDBC 的驅動程式；以 JDBC-ODBC 驅動程式的名稱為例，載入的用法為 Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");。每一種驅動程式都有其相對應的名稱，開發人員在使用之前必須先搞清楚。
利用 Connection conn = DriverManager.getConnection(資料庫的位置, 帳號名稱, 密碼); 來產生一個 Java 程式和資料庫之間的連線（也就是 Connection 物件 conn）。 DriverManager.getConnection() 內有三個參數，第一個參數說明程式想要跟哪一個資料庫連線；同樣的，這個參數的值會因為使用的 JDBC 驅動程式不同而不同，以我們的範例為例，因為我們使用 JDBC-ODBC 驅動程式，而經由 ODBC 產生資料庫連線必須藉助"資料來源名稱"（DSN）；因為我們之前設定了一個名為 csie 的 DSN，所以第一個參數值必須為 "jdbc:odbc:csie"（其中 jdbc:odbc: 是固定不變的，最後一個會隨著之前設定的 DSN 名稱改變而變動）。第二個以及第三個參數分別為連結該資料庫所需要的"帳號名稱"以及"密碼"。
連線完成之後，我們可以開始執行 SQL 的指令了。執行 SQL 指令的方式是先借由 conn 來產生一個 Statement 的物件，然後再藉由 Statement 的物件來執行 SQL 指令。產生 Statement 物件的方式為 Statement aStatement = conn.createStatement();，其中 aStatement 即為 Statement 物件的名稱。
SQL 指令主要執行"增、刪、改、查"四個動作，而這四個動作中只有"查詢" 會回傳一個表格的資料，其他三種都只回傳一個代表執行是否成功的整數。
1. 如果 SQL 指令執行"增、刪、改"，執行的方式為 aStatement.executeUpdate(SQL指令);，該方法回傳總共被改變的資料筆數。以在 Product 新增一筆編號 5 的產品為例，我們的程式碼即為 aStatement.executeUpdate("insert into Product values(5,'鍵盤',14.5,2)");；由於只有一筆資料被新增，所以執行後，aStatement.executeUpdate() 會回傳 1。
2. 如果 SQL 指令執行"查詢"，執行的方式為 aStatement.executeQuery(SQL指令);，該方法回傳查詢的結果；由於 SQL 查詢的結果也是一個表格，該表格由 Java 的 ResultSet 物件所代表。以查詢整個 Product 的資料為例，我們的程式碼即為 ResultSet rs = aStatement.executeQuery("select * from Product");。
如果 SQL 指令是查詢，程式大多會進一步處理該查詢結果，也就是 ResultSet 物件。一個 ResultSet 物件包含兩種資料，一種是該回傳表格的 Metadata（由 ResultSetMetaData 物件所代表；該物件包含總共有幾個欄位、欄位的名稱、欄位的資料型態等資料），另一種是表格的資料。
1. 我們可以經由 ResultSetMetaData rsmeta = rs.getMetaData(); 來取得 ResultSetMetaData 物件；然後經由 int cols = rsmeta.getColumnCount(); 來取得回傳表格的總欄位數；在得到總欄位數 cols 之後，我們就可以經由一個簡單的 for 迴圈，將每一個欄位的名稱以及資料型態，經由 rsmeta.getColumnLabel(i) 以及 rsmeta.getColumnType(i)。
2. 經由 ResultSet 物件 rs 可以取得實際的查詢資料。在預設的情形下，一開始 rs 指向資料的第 0 筆，我們可以經由 rs.next() 來依序取得下一筆的資料，一旦下一筆資料不存在，rs.next() 會回傳 false。當 rs.next() 指向某一筆資料的時候，我們可以利用之前 rsmeta 來取得總欄位數，然後利用 rs.getString(i) 將一個一個欄位的資料以字串的方式取出。除了 getString(i) 的方式之外，我們也可以利用 getDate(i)、getTime(i)、getDouble(i)、 getInt(i) 等方法分別取出資料型態為 Date、Time、double、int 的資料。
最後，但也是很重要的：在程式結束以前，我們必須將相關的資料庫資源釋放出來。資源釋放的方式是經由呼叫該物件的 close() 方法達成；若釋放 Statement 物件，則與該 Statement 物件相關的 ResultSet 物件也會被釋放。另外，在程式的最後，我們也必須經由 conn.close(); 將連線釋放。

完成了以上的安裝以及設定之後，我們就可以開發 Java 程式來存取資料庫的資料。我們在下列程式中為 Product 新增一筆編號 5 的產品，新增之後，我們接著修改它、並檢查該資料是否被正確的修改；最後，再把編號 5 的產品資料刪除掉。這個範例程式還蠻簡單的，比較不一樣的地方，我們都加上註解了。

import java.sql.*;

public class NewODBC {
  // 試著將以下的設定以 properties 的檔案讀進來

  // 設定 ODBC-JDBC 驅動程式的名稱
  static String classname = "sun.jdbc.odbc.JdbcOdbcDriver";

  // ODBC's DNS 設為 csie，你也可以設成其他名稱
  static String jdbcURL = "jdbc:odbc:csie";
  static String UID = "jlu";
  static String PWD = "newpasswd";
  static Connection conn = null;

  public static void main( String argv[] ) {
    // 說明這個程式的使用方式為執行：java NewODBC Product
    if(argv.length != 1) {
      System.out.println("Usage: java NewODBC Product");
      System.exit(2);
    }

    // 查詢用的 SQL 字串
    String aQuery = "select * from " + argv[0];

    // 新增資料的 SQL 字串
    String iSQL = "insert into " + argv[0] + " values(5,'鍵盤',14.5,2)";

    // 修改資料的 SQL 字串
    String uSQL = "update " + argv[0] + " set Name='無線鍵盤' where ID=5";

    // 刪除資料的 SQL 字串
    String dSQL = "delete from " + argv[0] + " where ID=5";

    try {
      // 載入 JDBC-ODBC 驅動程式
      Class.forName(classname);

      // 連結資料庫（藉由 dns、帳號、密碼）
      conn = DriverManager.getConnection(jdbcURL,UID,PWD);

      // 顯示目前表格的內容
      System.out.println("Display current content");
      ShowResults(aQuery);

      // 新增資料並顯示目前表格的內容
      System.out.println("\nInserting a new record .....");
      InsertNew(iSQL);
      ShowResults(aQuery);

      // 修改資料並顯示目前表格的內容
      System.out.println("\nUpdateing a record .....");
      UpdateNew(uSQL);
      ShowResults(aQuery);

      // 刪除資料並顯示目前表格的內容
      System.out.println("\nDeleting a record .....");
      DeleteNew(dSQL);
      ShowResults(aQuery);

      conn.close();
    } catch (Exception sqle) {
      System.out.println(sqle);
      System.exit(1);
    }
  }

  private static void DeleteNew(String dSQL) {
    try {
      Statement aStatement = conn.createStatement();
      aStatement.executeUpdate(dSQL);
    } catch (Exception e) {
      System.out.println("Delete Error: " + e);
      System.exit(1);
    }
  }

  private static void UpdateNew(String uSQL) {
    try {
      Statement aStatement = conn.createStatement();
      aStatement.executeUpdate(uSQL);
    } catch (Exception e) {
      System.out.println("Update Error: " + e);
      System.exit(1);
    }
  }

  private static void InsertNew(String iSQL) {
    try {
      Statement aStatement = conn.createStatement();

      // 新增、修改、刪除都跟查詢一樣，在執行 SQL 字串前，必須先
      // 產生 statement 物件。但是跟查詢不一樣的地方在於，真正
      // 執行的方法用的是 executeUpdate()，而不是 executeQuery()
      aStatement.executeUpdate(iSQL);
    } catch (Exception e) {
      System.out.println("Insert Error: " + e);
      System.exit(1);
    }
  }


  private static void ShowResults(String aQuery) {
    try {
      // 產生一個 SQL statement 物件並利用之前建立的連線 conn
      // 送給 MySQL，然後在伺服器端執行該 statement 物件中的字串
      Statement aStatement = conn.createStatement();
      ResultSet rs = aStatement.executeQuery(aQuery);

      // 執行 SQL 字串後的結果被置放於一個 ResultSet 的物件
      // 依據 SQL 的原理，回傳的結果其實也是一個表格（table）
      // 因此 ResultSet 的物件包含該表格的 Metadata 以及資料

      // 表格的 Medata 可以經由 ResultSet 物件的 getMetaData 的
      // 方法取得，而取得的 Metadata 由一個 ResultSetMetaData 物件代表
      ResultSetMetaData rsmeta = rs.getMetaData();

      // 由 getColumnCount() 可以知道表格共有幾個欄位
      int cols = rsmeta.getColumnCount();

      // 經由 for 迴圈可以得出每一個欄位的名稱
      for(int i=1; i<=cols; i++)
      {
        if(i > 1) System.out.print("\t");

        // 由 getColumnLabel(i) 可以取得第 i 個欄位名稱
        System.out.print(rsmeta.getColumnLabel(i));
      }
      System.out.print("\n");

      // 經由 while 迴圈可以將資料一筆一筆取出來
      // rs.next() 是查詢是否還有下一筆；若有，為 true；反之，為 false
      while(rs.next()) {
        for(int i=1; i<=cols; i++)
        {
          if (i > 1) System.out.print("\t");

          // rs.getString(i) 取得第 i 欄的資料並以字串的方式回傳
          System.out.print(rs.getString(i));
        }
        System.out.print("\n");
      }

      // 將 rs 以及 statement 清掉。這個動作很重要，如果不清除的話，
      // 在資料量很大的情形下，Java 垃圾處理器來不及處理的話，就會出現異常
      aStatement.close();
    }
    // a better exception handling can be used here.
    catch (Exception e) {
      System.out.println("Exception Occurs.");
    }
  }
}

Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

2012年9月25日星期二

jQuery Mobile 的開發

(07/15/2012)

時間好像越來越少，想”玩”的東西卻越來越多。沒辦法寫入門教材，只好把看過的好教材紀錄在這裡：
Eric Sarrion, “The jQuery Mobile tutorial
我也試圖寫了幾個測試網頁，除了使用 jQuery Mobile 的介面之外，主要在於 jQuery Mobile 和 Ajax 的合用。這些網頁的好處是它們不但可以在一些比較新的瀏覽器上觀看之外，也非常適合如手機和平板的行動設備上觀看，請試試看！以下網頁隨時可能修改，跟 Ajax 合用的會註明，以後有空再把入門教材寫出來：

我的首頁 — 行動版（配合 CSS3 @media 的設計，給不同的解析度使用）
產生課程的 listview（僅利用 Ajax 產生課程清單，其他功能不完整）
成績查詢（Ajax）

以下是成績查詢功能在 HTC Desire HD 上顯示的畫面：

嘗試結合 Facebook

(12/14/2010)

以前就已經知道 Facebook 提供了”讚”或者”推薦”的按鈕給一般的網頁使用，但是也不覺得這會有什麼用處。最近把之前的教學網頁整理完了以後，就想能不能利用”讚”或者”推薦”的按鈕提供一個更豐富的連結網，也就是類似”網頁的社交圈”。

今天試著把”讚”或者”推薦”的按鈕加入了網頁，目前先加在 Eric’s Tutorials
~~AXIS 入門~~這個網頁內，讓它擺著一陣子之後，再看看需不需要加到其他的網頁。

網頁分析的結果

(11/05/2010)

使用 Google Analytics 已經有幾年了，最近想看看我的網頁究竟有沒有人看？熱門的文章（早期大多都是寫出來用來輔助上課用）有哪些？這些文章的熱門程度是否跟現在流行的科技有關？有沒有哪些網頁可以把追蹤碼移除，以降低 Analytics 的負擔，也可以讓網頁出現的快一些？
這時候，真的要感謝這個 blog 的記錄了。翻了一下，赫然發現：這個 blog 是在 2005 年 07 月就開張了（五年多了耶，我不記得有哪麼久啊），Analytics 是 2008 年 02 月開始使用的，由於一開始根本不是很清楚要怎麼放才正確，之後在 2008 年 12 月以及 2009 年 05 月分別修正了一次，目前看起來，收集到的資料還蠻正常的，所以趁今天就把目前的結果記錄下來，或許幾年後又可以做個比較。
我的網頁主要分佈在 web.nchu.edu.tw 以及 xml.nchu.edu.tw 上，我們先來看 xml.nchu.edu.tw 在過去一個月中，它的網頁被閱讀的情形：

我的 Google Adsense 看不到了！！

(03/22/2010)

驚！我在我的電腦上看不到 Google Adsense 的廣告了。原先是想”可能是 Google 變慢的情形下的才導致的”，也想”可能是 Google 不希望你自己看到自己網頁上的廣告”等等一些奇奇怪怪的理由；反正就是不是很想去解決這個問題（喔，我檢查過 Google Adsense 並確認自己的廣告沒被封鎖）。今天似乎是個解決問題的好時間（其實，今天已經做了一些不是很急迫要處理的事情，這就是其中一件），Google 了一下，有說是”使用 IP 分享器造成的”（感覺不太合理），另一個主要說法是防毒軟體。突然靈光一閃，我就到卡巴斯基的設定：間諜防護 –> 廣告橫幅防護 –> 設定，然後把 http://pagead2.googlesyndication.com/ （如果你的 URL 不一樣，請修改）加到”白名單”即可。記得，不要把 URL 後段的程式碼（如 pagead/show_ads.js）加上去。如果你使用其他防毒軟體，可以到防毒軟體的設定內找找看類似的設定。改完後，一切恢復正常！

點閱率是怎麼計算的？

(05/14/2009)

今天可以看的資料真多，從 iThome 的有效點閱怎麼算？IAB首次發布指導原則又發現了新大陸。先留著當紀錄，以後有機會再看看。

我的 Google Analytics 追蹤碼的調整

(03/13/2009)

就像之前的文章提過的，我對於有多少人來閱讀我寫過的文章非常好奇，所以就使用 Google Analytics 來追蹤分析。對網頁分析的結果越了解，我對於網頁分析的內容就越在乎；幾個月前我突然有一個想法，以目前最受歡迎的 AJAX 入門這篇文章來說，由於它的部分內容在 web.nchu.edu.tw 這部主機，而其他的內容卻在 xml.nchu.edu.tw；如果以之前安裝的追蹤碼，這將會出現在兩份不同的網頁分析報告上，除了網頁分析的結果不夠完整之外，也會造成跳出率（bounce rate）偏高，如何解決這個問題就成為我休閒活動的目標之ㄧ。上個星期趁空檔，上 Google Analytics 網站找了一下資料，也將其建議的作法測試了一下，只可惜作法不對而沒達到預期的目標。昨天，找到如何以一個設定檔追蹤網站的所有子網域？這篇文章，依照它的建議（雖然還是感覺說的不清不楚）重新設定了追蹤碼，並設定了篩選器。今天看了一下 Google Analytics 的分析結果，確定這次的修改是正確的，於是很開心的分享這項成果，對於需要調整的人，也可以縮短搜尋資料的時間。

———————————————————————————————————————
剛剛又想到，這次修改是正確了，但是也只顯示了昨天的分析結果，那麼 Google Analytics 能不能讓我把這項修改套用在以前的資料呢？

訂閱：文章 (Atom)

2012年10月13日 星期六

2012年10月1日 星期一

安裝 Tomcat 5.5.x

支援一般連線

2012年9月28日 星期五

安裝 Tomcat 7.0.x

支援一般連線

2012年9月26日 星期三

JOFC2 - 混合圖表

JOFC2 - LineChart 和 PieChart

JOFC2 - 第五個範例

JOFC2 - 第三個範例

OFC2 - 第四個範例

JOFC2 - 第二個範例

OFC2 - 第一個範例

OFC2 的準備工作

Open Flash Chart 2 簡介

MySQL Server 簡介

MySQL Server 簡介

2012年9月25日 星期二

2012年10月13日星期六

2012年10月1日星期一

2012年9月28日星期五

2012年9月26日星期三

2012年9月25日星期二