Jax 的工作紀錄

2009-04-10 14:10

IE6 在負邊界( margin )上的異常問題[CSS]

當負邊界( margin )加上 float 屬性時在 IE6 上會出現詭異的邏輯問題設定的數值會乘於二也就是 margin:-100px; 會變成 margin:-200px; 解決這個問題只好做特別做修正設定

HTML 與 CSS 設定：

   .widget{
       padding-left:35px;
   }
   .widget .image{
       width:30px;
       float:left;
       margin-left:-30px;
       _margin-left:-15px;/*for IE6*/
   }

<div class="widget">
   <div class="image"><img /></div>
   <div>text text</div>
</div>

2009-04-09 20:20

[PHP] 解析 URL 字串 parse_url , parse_str

parse_url 會解析一個標準的 URL 字串


<?php
$urlStr="http://user:passwd@host:80/path?a1=v1&a2=v2#anchor";
$url=parse_url($urlStr);
print_r($url);
/* output:
Array
(
    [scheme] => http
    [host] => host
    [port] => 80
    [user] => user
    [pass] => passwd
    [path] => /path
    [query] => a1=v1&a2=v2
    [fragment] => anchor
)
*/

echo parse_url($url, PHP_URL_SCHEME);
// prints:  http

echo parse_url($url, PHP_URL_HOST);
// prints: host

echo parse_url($url, PHP_URL_PORT);
// prints: 80

echo parse_url($url, PHP_URL_USER);
// prints: user

echo parse_url($url, PHP_URL_PASS);
// prints: passwd

echo parse_url($url, PHP_URL_PATH);
// prints: /path

echo parse_url($url, PHP_URL_QUERY);
// prints: a1=v1&a2=v2

echo parse_url($url, PHP_URL_FRAGMENT);
// prints: anchor

?>

parse_str 會解析 URL Query 格式的字串
這裡特別注意，別使用下面的第一種方式直接解析 URL 上的 query
這會造成資安上的漏洞，這會讓外部可以直接修改裡面的變數值


<?php
$url_query = "city=new+york&id=3456&paid%5Bcurrency%5D=euro&paid%5Bamount%5D=345&paid%5Breceipt%5D=fgf"
parse_str($url_query);

echo $city;
// prints: new york

echo $id;
// prints: 3456

print_r($paid);
/* output:
Array
(
    [currency] => euro
    [amount] => 345
    [receipt] => fgf
)
*/

/* 不建議上面的作法，因為會複寫原本的變數
 * 造成資安上的漏洞
 * */

parse_str($url_query, $query);
print_r($query);
/* output :
Array
(
    [city] => new york
    [id] => 3456
    [paid] => Array
    (
        [currency] => euro
        [amount] => 345
        [receipt] => fgf
    )

)*/
?>

參考來源：
Easy way to build GET query strings in php

2009-04-08 22:05

HTML 中 Flash 遮蓋問題的解決方法

flash 在頁面中會顯示在最上層
想要用其他元素覆蓋在上面時
必須做以一下參數設定
但不管有沒有元素覆蓋
最好還是加入這個參數
避免意料之外的版面問題

<object ... >
    <param name="wmode" value="transparent"/>
    <!-- ... -->
    <embed wmode="transparent" ... />
</object>

wmode 的參數值：

Window
Opaque
Transparent

參考來源：
【求助】关于下拉菜单被FLASH遮盖，怎样解决
wmode 三選一

2009-03-31 22:43

REPLACE INTO 和 INSERT INTO 的區别[MySQL]

REPLACE 與INSERT 在 Syntax 及功能上都很類似
在插入資料遇到 PRIMARY KEY 或 UNIQUE KEY 碰撞時
REPLACE 會將原本的資料刪除再執行新增的動作

這裡特別要注意的是會將資料刪除
並不只是使用複寫方式去處理的

利用 REPLACE for SELECT 來處理資料真的很方便
不必擔心資料碰撞的問題
但請記得 REPLACE 的特性
有時候事情不是想像中那麼快樂的

REPLACE Syntax：

REPLACE [LOW_PRIORITY | DELAYED]
    [INTO] tbl_name [(col_name,...)]
    {VALUES | VALUE} ({expr | DEFAULT},...),(...),...

-- 或:

REPLACE [LOW_PRIORITY | DELAYED]
    [INTO] tbl_name
    SET col_name={expr | DEFAULT}, ...

-- 或:

REPLACE [LOW_PRIORITY | DELAYED]
    [INTO] tbl_name [(col_name,...)]
    SELECT ...

參考來源：
MySQL Replace INTO的使用
MySQL 5.0 REPLACE Syntax

2009-03-31 21:24

將查詢結果更新至資料表 UPDATE for SELECT [MySQL]

今天又學到一個 MySQL 新方法，原本就在找利用 SELECT 的結果 UPDATE 至資料表的方法，最後終於在 MySQL 官網中的回應裡找到了

UPDATE
    `t1` AS A,
    (SELECT `b1`, COUNT(*) AS `total` FROM `t2` GROUP BY `c1`) AS B
SET A.`a2`=B.`total`
WHERE A.`a1`=B.`a1`

MySQL5.0: UPDATE Syntax

2009-03-29 08:09

iGoogle 小工具製作心得

iGoogle 小工具主要是以 XML 為主體，再加上 HTML、CSS 及 JavaScript 所組成的，基本上只要會後面三種語言，要開發 iGoogle 小工具是非常快樂的一件事。

在這裡我只做一些的教學及心得分享，詳細的規範及 API 說明，請察看官方網站 Google 小工具 API 開發人員指南，開發指南裡面寫的很清楚，還有很多的範例可以參考。

心得建議：

再開發時建議 XML 的檔名不要太正式，iGoogle 的平台會 cache XML，造成檢視上會出現不一致情況，等到要發佈時再取一個正式的檔名，避免不必要的問題發生。
如果要使用 session 和 cookie 做登入驗證的話，最好使用 <iframe> 去處理，會比較容易達成且安全問題也比較少。
在 ModulePrefs 中的 category 屬性也記得加上去，在官方的開發人員指南中並沒有說明，共有：
- politics
- tools
- funandgames
- lifestyle
- finance
- communication
- 等...。

多利用[便條簿]做測試可以減少不少時間。
在測試時最好在 iGoogle 上另開一個[分頁]，免得自己原本常用的小工具被打亂。
在測試的[分頁]中最好加上[開發人員小工具]這個小工具去管理 cache 問題。

小工具範例：


<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs
    title="單位換算"
    description="更方便的介面處理單位制度上的換算"
    directory_title="單位換算"
    author="Jax"
    author_email="weskerjax+feed@gmail.com"
    thumbnail=
      "http://weskerjax.googlepages.com/unit_converter_thumbnail.png"
    screenshot=
      "http://weskerjax.googlepages.com/unit_converter_screenshot.png"
    title_url="http://jax-work-archive.blogspot.com/"
    category="tools"
    height="300">
    <Locale lang="zh-tw" country="TW"/>
    <Require feature="tabs"/>
    <Require feature="dynamic-height"/>
  </ModulePrefs>
  <UserPref
   name="type"
   display_name="預設開啟的頁籤"
   default_value="長度"
   datatype="enum">
    <EnumValue value="長度"/>
    <EnumValue value="重量"/>
    <EnumValue value="面積"/>
    <EnumValue value="體積"/>
  </UserPref>
  <Content type="html">
  <![CDATA[
<style type="text/css">
.JContent table{
    margin-top:5px;
    width:100%;
}
.JContent th{
    background-color:#99CCFF;
    padding-top:5px;
}
.JContent label{
    text-align:center;
    padding:3px;
    display:block;
    font-size:12px;
}
.JContent label input{
    display:block;
    text-align:left;
    line-height:1.1em;
    font-size:11px;
    width:95%;
}
</style>
<script type="text/javascript">
var prefs = new _IG_Prefs(__MODULE_ID__);
function set_event__MODULE_ID__(tabId){
    var inputs=_gel(tabId).getElementsByTagName('input');
    for (var i=0, j=inputs.length; i<j; i++){
        el=inputs[i];
        /*設定 onkeyup 時處理單位換算*/
        el.onkeyup=function(){
            this.value=this.value.match(/[0-9]+[\.]?[0-9]*/);
            var rate=this.getAttribute('rate');
            var value=parseFloat(this.value)/parseFloat(rate);

            var table=this;
            while(table.tagName!="TABLE"){table=table.parentNode;}

            var inputs=table.getElementsByTagName('input');
            for (var i=0, j=inputs.length; i<j; i++){
                chg=inputs[i];
                r=chg.getAttribute('rate');
                if(r==rate){continue;}

                if(this.value){chg.value=value*parseFloat(r);}
                else{chg.value='';}
            };
        };
        /*設定 onfocus 選取所有文字*/
        el.onfocus=function(){this.select()};
    };
    /*讓小工具能夠自行調整大小*/
    _IG_AdjustIFrameHeight();
}
function init() {
    /*建立頁籤並選定預選頁籤*/
    var tabs = new _IG_Tabs(__MODULE_ID__,prefs.getString("type"));
    tabs.addTab("長度","J_length",set_event__MODULE_ID__);
    tabs.addTab("重量","J_weight",set_event__MODULE_ID__);
    tabs.addTab("面積","J_area",set_event__MODULE_ID__);
    tabs.addTab("體積","J_volume",set_event__MODULE_ID__);
}
_IG_RegisterOnloadHandler(init);/*載入時呼叫的事件處理常式*/
</script>
<div class="JContent" id="J_length">
  <table border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td><label>公尺<input rate="1" type="text" /></label></td>
      <td><label>公里<input rate="0.001" type="text" /></label></td>
      <td><label>海里<input rate="0.00053996" type="text" /></label></td>
    <tr>
      <td><label>英吋<input rate="39.370" type="text" /></label></td>
      <td><label>英呎<input rate="3.2808" type="text" /></label></td>
      <td><label>英碼<input rate="1.0936" type="text" /></label></td>
    </tr>
      <td><label>台尺<input rate="3.3003" type="text" /></label></td>
      <td><label>市里<input rate="2e-3" type="text" /></label></td>
      <td><label>市引<input rate="0.03" type="text" /></label></td>
    </tr>
  </table>
</div>
<div class="JContent" id="J_weight">
  <table border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td><label>公斤<input rate="1" type="text" /></label></td>
      <td><label>公克<input rate="1e+3" type="text" /></label></td>
      <td><label>公噸<input rate="1e-3" type="text" /></label></td>
    </tr>
    <tr>
      <td><label>英磅<input rate="2.2046" type="text" /></label></td>
      <td><label>盎司<input rate="35.273" type="text" /></label></td>
      <td><label>英噸<input rate="9.8421e-4" type="text" /></label></td>
    </tr>
    <tr>
      <td><label>美噸<input rate="0.0011023" type="text" /></label></td>
      <td><label>格令<input rate="15432" type="text" /></label></td>
      <td><label>克拉<input rate="5000" type="text" /></label></td>
    </tr>
    <tr>
      <td><label>台斤<input rate="1.6667" type="text" /></label></td>
      <td><label>台兩<input rate="26.667" type="text" /></label></td>
      <td><label>市擔<input rate="0.02" type="text" /></label></td>
    </tr>
  </table>
</div>
<div class="JContent" id="J_area">
  <table border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td><label>公畝<input rate="100.00" type="text" /></label></td>
      <td><label>公頃<input rate="1" type="text" /></label></td>
      <td><label>平方公里<input rate="0.01" type="text" /></label></td>
    </tr>
    <tr>
      <td><label>平方英寸<input rate="155e+5" type="text" /></label></td>
      <td><label>平方英尺<input rate="107640" type="text" /></label></td>
      <td><label>平方碼<input rate="11960" type="text" /></label></td>
    </tr>
    <tr>
      <td><label>英畝<input rate="2.4711" type="text" /></label></td>
      <td><label>平方英里<input rate="0.003861" type="text" /></label></td>
      <td> </td>
    </tr>
  </table>
</div>
<div class="JContent" id="J_volume">
  <table border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td><label>立方公尺<input rate="1" type="text" /></label></td>
      <td><label>公升<input rate="1e+3" type="text" /></label></td>
      <td><label>毫升<input rate="1e+6" type="text" /></label></td>
    </tr>
    <tr>
      <td><label>英國加侖<input rate="219.97" type="text" /></label></td>
      <td><label>液體加侖<input rate="264.17" type="text" /></label></td>
      <td><label>固體加侖<input rate="227.02" type="text" /></label></td>
    </tr>
  </table>
</div>
  ]]>
  </Content>
</Module>

範例預覽：

範例原始檔：unit_converter.xml

第一個開發的小工具：

2009-03-27 12:41

[PHP] 利用表單傳遞多維陣列

有時候在表單傳遞上會需要具有結構性的變數傳遞，在後端的資料處理上會比較方便，不會在變數名稱上的處理花時間，PHP 有提供可以處理多維陣列的傳遞方式，在多維陣列處理上必須要有 inedx 名稱，如果只要傳遞一維無序陣列就不用設定 inedx 名稱，只需要將 name="data[]"就可以了。表單的命名方式：

<form action="" method="post">
<ul>
<li>
  <input type="checkbox" name="data[0][is]" value="1" />
  <input type="text" name="data[0][value]" value="1" />
  <select name="data[0][unit]">
    <option value="km">公里</option>
    <option value="m">公尺</option>
    <option value="cm">公分</option>
  </select>
</li>
<li>
  <input type="checkbox" name="data[1][is]" value="1" />
  <input type="text" name="data[1][value]" value="1" />
  <select name="data[1][unit]">
    <option value="km">公里</option>
    <option value="m">公尺</option>
    <option value="cm">公分</option>
  </select>
</li>
<li>
  <input type="checkbox" name="data[2][is]" value="1" />
  <input type="text" name="data[2][value]" value="1" />
  <select name="data[2][unit]">
    <option value="km">公里</option>
    <option value="m">公尺</option>
    <option value="cm">公分</option>
  </select>
</li>
</ul>
  <input type="submit" />
</form>

PHP 的接收格式：

<?php
print_r($_POST['data']);
/*
Array
(
  [0] => Array
  (
    [is] => 1
    [value] => 1
    [unit] => km
  )

  [1] => Array
  (
    [is] => 1
    [value] => 1
    [unit] => m
  )

  [2] => Array
  (
    [is] => 1
    [value] => 1
    [unit] => cm
  )

)
*/
?>