2009年 我與小崴崴工作日記 的新年期許

From: Polin Wei

又是一個新年的來到, 今年終於將 我與小崴崴的工作日記 版面作了一個大改版. 若您覺得本版面還不錯的話, 不妨參考 [Blogger Template] Layout Change 網誌版面全新改版 .



今年的新年期許呢...希望可以在免費的網站...[Free Space] 免費的網路空間 FREE PHP+MySQL+FTP+DNS 建立一個以 PHP 語言為主的網站. 並將嚐試利用 PHP 將 我與小崴崴的工作日記 , 我與小崴崴的生活日記 以及 我與小崴崴的電影日記 這三個網站作 RSS 的自動整理, 或許可以演變成一個部落格的聯播網站... 嗯...這樣是最好的.

在景氣不好的時期, 若能一邊整理文件於部落格之中, 還能賺錢那就更好了. 若您想要試試看寫文章賺獎金的活動, BlogAds 是個不錯的選擇, 不僅可以讓您的部落格提升知名度, 還能拿獎金. 嗯!! 何樂而不為呢? 本部落格就有加入哦!! 一起來搶錢大作戰吧.

[JQuery] Java Script 中 物件(objects) 與 陣列 (arrays) 的區分與值的取得

From: Polin Wei

在 Java Script 中, 物件 objects 與 陣列 arrays , 常會令人困惑, 查了一下 JQuery 的官方網站. 它所舉的例子就淺而易懂了.

整理一下 物件(objects) 與 陣列 (arrays) 的區分如下:

物件(objects):
1. 以 {} 包含
2. 有 Key & Value , 如: var obj = { one:1, two:2, three:3, four:4, five:5 };

陣列 (arrays):
1. 以 [] 包含
2. 只有 Value , 但內含 index , 如: var arr = [ "one", "two", "three", "four", "five" ]; 所以 arr[0] = one , arr[1] = two ...

知道這樣的特性後, 就可以用 JQuery 的函數 $.each() 來取得 物件(objects) 與 陣列 (arrays) 的值了. 再來看一下程式碼:
<script>
$(document).ready(function(){

    var arr = [ "one", "two", "three", "four", "five" ]; ==> 這是陣列 , 陣列只有 值, 內含 index
    var obj = { one:1, two:2, three:3, four:4, five:5 }; ==> 這是物件 (one,two,three,four,five) 是 Key , 相對應的 值 為 (1,2,3,4,5)

   jQuery.each(arr, function() {
      $("#" + this).text("My id is " + this + ".");
      return (this != "four"); // will stop running to skip "five"
   });

   jQuery.each(obj, function(i, val) {
      $("#" + i).append(document.createTextNode(" - " + val));
   });

});
</script>


執行結果為
My id is one. - 1
My id is two. - 2
My id is three. - 3
My id is four. - 4
- 5

[JSON] JSON 資料在 JQuery 上的運用

From: Polin Wei

JSON 即 JavaScript Object Natation，它是一種羽量級的資料交換格式，非常適合於伺服器與 JavaScript 的交互使用。JSON 也為 Web 應用開發者提供了另一種資料交換格式；JSON 同 XML 或 HTML 片段相比，JSON 提供了更好的簡單性和靈活性。

JSON 資料格式解析
和 XML 一樣，JSON 也是基於純文本的資料格式。由於 JSON 天生是為 JavaScript 準備的，因此，JSON 的資料格式非常簡單，您可以用 JSON 傳輸一個簡單的 String，Number，Boolean，也可以傳輸一個陣列，或者一個複雜的 Object 物件。 至於 物件 objects 與 陣列 arrays 的區分, 可以看這一篇文章 [JQuery] Java Script 中 物件(objects) 與 陣列 (arrays) 的區分與值的取得 取得瞭解

String，Number 和 Boolean 用 JSON 表示非常簡單。例如，用 JSON 表示一個簡單的 String "abc"，其格式為："abc"

除了字元 "，\，/ 和一些控制符（\b，\f，\n，\r，\t）需要編碼外，其他 Unicode 字元可以直接輸出。

Boolean 類型表示為 true 或 false 。此外，JavaScript 中的 null 被表示為 null，注意，true、false 和 null 都沒有雙引號，否則將被視為一個 String 。

JSON 還可以表示一個陣列物件，使用 [] 包含所有元素，每個元素用逗號分隔，元素可以是任意的 Value，例如，以下陣列包含了一個 String，Number，Boolean 和一個 null：
["PolinWei",25,true,null]

Object 物件在 JSON 中是用 {} 包含一系列無序的 Key-Value 鍵值對表示的，實際上此處的 Object 相當於 Java 中的 Map，而不是 Java 的 Class 。注意 Key 只能用 String 表示。
例如，一個 Address 物件包含如下 Key-Value：

country: Taiwan
City: Taichung
postcode: 420


用 JSON 表示如下：
{"country":"Taiwan","City":"Taichung","postcode":420}

其中 Value 也可以是另一個 Object 或者陣列，因此，複雜的 Object 可以嵌套表示，例如，一個 申請者APPLIER 物件包含 員工基本資料( NAME, EMP_ID, Account) 和 簽核流程FLOW 物件 包含( ORDER, NAME, EMP_ID, COMPANY_NAME, DEPT_NAME)，可以表示如下：

{"APPLIER":[{"NAME":"王大明","EMP_ID":"E007","Account":"PolinWei"}],"FLOW":[
{"NAME":"張三","EMP_ID":"E002","COMPANY_NAME":"我與小崴崴股份有限公司","ORDER":0,"DEPT_NAME":"財務總處"},{"NAME"
:"李四","EMP_ID":"E001","COMPANY_NAME":"我與小崴崴股份有限公司","ORDER":1,"DEPT_NAME":"總經理室"}]}

假設伺服器返回的 JSON 資料是上面 code 裡的資料：

則在 JQuery 中, 可以這樣取得資料:
$(document).ready(function(){
        $.getJSON("DocFlow.do?reqCode=chgApplierJSON",{ function(userData){
            alert(userData.APPLIER[0].EMP_ID);  ==> 取得 APPLIER 物件第一筆的 EMP_ID 值
            alert(userData.APPLIER[0].NAME);    ==> 取得 APPLIER 物件第一筆的 NAME 值
            alert(userData.FLOW[0].EMP_ID);      ==> 取得 FLOW 物件第一筆的 EMP_ID 值
            alert(userData.FLOW[1].EMP_ID);      ==> 取得 FLOW 物件第二筆的 EMP_ID 值
        });
});


若想要快速取得物件中的資料, 則可以參考 JQuery 的 $.each() 函數, 例如要取得 JSON 回傳資料中的APPLIER 物件. 程式可以這樣寫
$.each(userData, function(i, val){
    if (i=="APPLIER"){
        $.each(val[0] , function(applier, a_val){
            alert("key:"+applier+" , value:"+a_val)
        });               
    }
});


取得的資料如下:
key: NAME , value: 王大明
key: EMP_ID , value: E007
key: Account , value: PolinWei

[JQuery] 選取 Form 表單上 #id , element 的應用

From: Polin Wei

在撰寫 HTML 時, 常需要取得 Selectors 的 #id , element 來作適當的處理, 使用 JQuery 可以直覺式取得您想要的, 並且給您更多. 若對 JQuery 不是很瞭解的話, 不妨可以先看這一篇文章 [教學] How jQuery Works 如何讓 jQuery 正常運作

首先, 先來看下面這一段 HTML 的程式碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){

$("#APPLIER").change(function(){
alert( $(this).val() );
});

$("input[name^='nextSign']").change(function(){
alert( $(this).val() );
});

$("form[name='form2'] input[name='docNo']").change(function(){
alert( $(this).val() );
});

});
</script>
</head>
<body>

<form name="form1">
申請人:<input id="APPLIER" type="text" name="APPLIER" value="PolinWei"><br/>
文件編號:<input type="text" name="docNo" value="doc-123"><br/>
下一個員工編號:<input type="text" name="nextSignEmpNo" value="E123"><br/>
下一個部門編號:<input type="text" name="nextSignDeptNo" value="D001"><br/>
</form>

<form name="form2">
申請人:<input id="nextAPPLIER" type="text" name="APPLIER" value="Jamie"><br/>
文件編號:<input type="text" name="docNo" value="doc-456"><br/>
下一個員工編號:<input type="text" name="nextSignEmpNo" value="E456"><br/>
下一個部門編號:<input type="text" name="nextSignDeptNo" value="D002"><br/>
</form>

</body>
</html>

程式碼解說:

1.取得 id 值為 APPLIER $("#APPLIER")
2.取得所有 element 值為 input , 且 name 的開頭符合 nextSign $("input[name^='nextSign']")
3.取得 form=form2 , element=input , name=docNo $("form[name='form2'] input[name='docNo']")

當改變這些欄位內的值時, 才會 alert 出改變後的值, 否則就不會出現 alert 的視窗.

[DataBase] PreparedStatement & Statement 的差異

From: Polin Wei

Java 程式語言在寫入資料庫有兩種方式 PreparedStatement 與 Statement , [Java] Date Type Write In DataBase 日期型態如何寫入資料庫 一文中有 PreparedStatement 的程式範例, 至於 Statement 的程式碼如下:

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public void writeInDB(){
Connection conn = null;
String sql ;
Statement pstmt ;
ResultSet rs;
try {
    sql = "Select id,name FROM mydate where id='" + PolinWei + "'";
    stmt = conn.createStatement();
    rs = stmt.executeQuery(sql);
    if ( rs.next() ){
       name = rs.getString("NAME");
       System.out.println("name: " + name);           
    }
    rs.close();
    stmt.close();
} catch (Exception e) {
    System.err.println(e);
} finally {
    try {
    conn.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
}

}


看似 Statement 比 PreparedStatement 的程式為簡單, 且程式碼較為精簡 , 但若這支程式的使用率很頻繁, 且 WHERE 條件中的值也每次都不一樣時, 建議應使用 PreparedStatement , 因為這會讓後端的資料庫在作 Parse 時, 負載會減輕很多.

附註: 若希望 ResultSet 可以上一筆, 下一筆的查詢. 則在宣告 Statement stmt 時要加入 ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_READ_ONLY 這兩個參數, 如:

Statement stmt=conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_READ_ONLY);

[Free Space] 免費的網路空間 FREE PHP+MySQL+FTP+DNS

From: Polin Wei

　　要架一個完全屬於自己的網頁空間，而且希望能完全由自已操控，最好還能有程式 PHP + 資料庫 MySQL 的支援，最好是不要有廣告來干擾。現在有一個更好的選擇了。

　　000webhost.com 它標榜Free Web Hosting with PHP，MySQL and cPanel，沒有任何廣告 ( No Ads )，這對一個專業級的程計設計師, 或者是沒有 $ money money $ 的學生來說，它真的是一個非常好的平台，而本站就是架設在這個免費的網路空間 ( Free Web Hosting ) 上。

000webhost.com 它提供了下面的功能:

1. 1500 MB 空間, 100 GB 資料的傳輸量 

2. PHP with MySQL Database Support * PHP mail() function and Sendmail * Curl, GD2 library, ImageMagick, Zend * fopen() and PHP sockets * safe_mode is OFF, file uploads ON * Zend Optimizer support, Ioncube loader.. and much more features are enabled 

3. cPanel Control Panel (友善的後端管理介面) 

4. 免費的網域名稱 而且 000webhost.com 還可以支援下列的套裝軟體: 

Drupal, Geeklog, Joomla, Xoops, WordPress, b2evolution, Support Logic Helpdesk, phpBB2, SMF, OS Commerce, ViPER Guestbook, Coppermine Photo Gallery, PhpWiki, PHPauction, WebCalendar 



按Sing Up 進入 註冊的畫面如下: 

 



欄位說明: 

1. 若自已已有網域就在第一欄填寫, 不然就在第二欄填入你想要的網域名稱 

2. 第三,四欄填入你的 E-Mail Address (這就是日後進入這平台的帳號, 所以不要亂填, 否則你就無法收到註冊成功的通知信了) 

3. 第五,六欄填入日後要管理這個平台的密碼 最後輸入驗證碼, 並同意它的條款後, 按 Create My Account 就完成了

[Tomcat] apache-tomcat-6.x.zip 的起動方式

From: Polin Wei

Tomcat 在 Window 的平台可以不用安裝就可以起動執行. 從 http://tomcat.apache.org/index.html 下載 apache-tomcat-6.x.x.zip 的壓縮檔, 解開後執行 %CATALINA_HOME%\bin\startup.bat 卻沒啟動 ? 為何?

正確的步驟應如下:
1. 將 http://tomcat.apache.org/index.html 下載 apache-tomcat-6.x.x.zip 的壓縮檔解壓到 C:\AppServ\apache-tomcat-6.0.14
2. 在 %CATALINA_HOME%\bin 目錄新增一個檔案 project_start.bat 內容如下:

@echo off

set CATALINA_HOME=C:\AppServ\apache-tomcat-6.0.14
rem JAVA_HOME must point to a full JSDK, not just a JRE
set JAVA_HOME=D:\Progs\jdk1.6.0_07

rem Quite possibly gratuitous
set PATH=%JAVA_HOME%\jre\bin;%JAVA_HOME%\bin;%PATH%

rem Adjust the following heap settings as necessary
set JAVA_OPTS=-server -Xms256M -Xmx256M -Djava.awt.headless=true -Dwt.context.defaultLocalResourcesOnly=true


rem Enable local JMX connections in Java 5
set JAVA_OPTS=%JAVA_OPTS% -Dcom.sun.management.jmxremote

rem Un-rem next line to enable debugger attaching to this instance of Tomcat
rem set JAVA_OPTS=%JAVA_OPTS% -Xnoagent -Xdebug -Xrunjdwp:transport=dt_shmem,address=tomcat,server=y,suspend=n

"%CATALINA_HOME%\bin\startup.bat"


3. 編輯 %CATALINA_HOME%\conf\server.xml , 在設定檔區間要寫入您專案的名字
<Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true" xmlNamespaceAware="false" xmlValidation="false">
   [ JAVA 的專案名稱要放在這裡 ]
</Host>


如下:
<Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true" xmlNamespaceAware="false" xmlValidation="false">
    <Context docBase="D:/myProj" path="/myProj" reloadable="true" crossContext="true" source="org.eclipse.jst.j2ee.server:myProj"/>
</Host>


這樣就可以執行了

[Blogger] Recent Post & Comments’ feed 最新文章及最新留言網址

From: Polin Wei

Blogger 最新文章及最新留言的網址一直以來令人困擾, 最近在 Google 看到一篇文章寫到

If your blog’s address is http://polinwei.blogspot.com/, it means

Your posts’ feed : http://polinwei.blogspot.com/feeds/posts/default
Your comments’ feed : http://polinwei.blogspot.com/feeds/comments/default


原來我的 Blog 的網址若為 http://polinwei.blogspot.com/ , 那它相關的網址如下

最新文章網址: http://polinwei.blogspot.com/feeds/posts/default
最新留言網址: http://polinwei.blogspot.com/feeds/comments/default

[Java] Date Type Write In DataBase 日期型態如何寫入資料庫

From: Polin Wei

完整的程式如下:

import java.util.Date;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.text.SimpleDateFormat;
import java.util.TimeZone;

public void DateWriteInDB(){
Connection conn = null;
String sql ;
PreparedStatement pstmt ;
ResultSet rs;
try {
java.util.Date now = new java.util.Date(); //取得現在時間
SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
sf.setTimeZone(TimeZone.getTimeZone("GMT")); // 設定時區為格林威治 GMT 時區
String sGMT = sf.format(now);
java.sql.Timestamp createDate = Timestamp.valueOf(sGMT); // 要轉換成 java.sql.Date 的物件才可以寫入資料庫

sql = "INSERT INTO mydate (id, create_date) VALUES (?,?)";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, "01");
pstmt.setTimestamp(2, createDate);
pstmt.execute();
} catch (Exception e) {
System.err.println(e);
} finally {
try {
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}


PS: 日期型態要寫入資料庫, 需要用 java.sql.PreparedStatement 物件來寫入

[Blogger Template] Layout Change 網誌版面全新改版

From: Polin Wei

前一段時間忙著撰寫程式, 有一陣子沒有寫工作日誌, 在放四天假的這段時間, 重新整理一下網誌的 Layout , 讓它更有質感些. 也趁著這次瞭解 Blogger Template 的寫法. 其實它真的一點也不難. 步驟有二.

Step 1: 設計一個 CSS
Step 2: 將 Blogger 的 網頁元素 放在這 CSS 的 Div 中, 就可以了.

Blogger Template 的 CSS & 網頁元素 . 可以參考 bloganol.com , btemplates.com , themelib.com 這幾個網站, 挑選一個您喜歡的, 再作修改一下, 就可以讓您的網誌更有質感囉. 本站的 Layout 就是從 themelib.com 下載 Personal-Mag-magazine-blogger-template.zip 修改而來的.



圖中 新增小工具 的功能也很簡單, 只要記著 新增小工具 的 id 不能重覆即可, 以 Footer 來舉例,只要加入 <b:section class='footer' id='footer'/> 就可以了. 如下:
<div id='footer_wrap'>
    <b:section class='footer' id='footer'/>
</div>