Home
2009年1月25日 星期日
2009年 我與小崴崴工作日記 的新年期許
From: Polin Wei
又是一個新年的來到, 今年終於將 我與小崴崴的工作日記 版面作了一個大改版. 若您覺得本版面還不錯的話, 不妨參考 [Blogger Template] Layout Change 網誌版面全新改版 .
今年的新年期許呢...希望可以在免費的網站...[Free Space] 免費的網路空間 FREE PHP+MySQL+FTP+DNS 建立一個以 PHP 語言為主的網站. 並將嚐試利用 PHP 將 我與小崴崴的工作日記 , 我與小崴崴的生活日記 以及 我與小崴崴的電影日記 這三個網站作 RSS 的自動整理, 或許可以演變成一個部落格的聯播網站... 嗯...這樣是最好的.
在景氣不好的時期, 若能一邊整理文件於部落格之中, 還能賺錢那就更好了. 若您想要試試看寫文章賺獎金的活動, BlogAds 是個不錯的選擇, 不僅可以讓您的部落格提升知名度, 還能拿獎金. 嗯!! 何樂而不為呢? 本部落格就有加入哦!! 一起來搶錢大作戰吧.
2009年1月19日 星期一
[JQuery] Java Script 中 物件(objects) 與 陣列 (arrays) 的區分與值的取得
在 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 two. - 2
My id is three. - 3
My id is four. - 4
- 5
2009年1月18日 星期日
[JSON] JSON 資料在 JQuery 上的運用
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
例如,一個 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: EMP_ID , value: E007
key: Account , value: PolinWei
2009年1月13日 星期二
[JQuery] 選取 Form 表單上 #id , element 的應用
在撰寫 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 的視窗.
2009年1月12日 星期一
[DataBase] PreparedStatement & Statement 的差異
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);
2009年1月10日 星期六
[Free Space] 免費的網路空間 FREE PHP+MySQL+FTP+DNS
要架一個完全屬於自己的網頁空間,而且希望能完全由自已操控,最好還能有程式 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 就完成了
2009年1月8日 星期四
[Tomcat] apache-tomcat-6.x.zip 的起動方式
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 最新文章及最新留言網址
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
2009年1月7日 星期三
[Java] Date Type Write In DataBase 日期型態如何寫入資料庫
完整的程式如下:
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 物件來寫入
2009年1月4日 星期日
[Blogger Template] Layout Change 網誌版面全新改版
前一段時間忙著撰寫程式, 有一陣子沒有寫工作日誌, 在放四天假的這段時間, 重新整理一下網誌的 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>