Archive for the ‘網頁設計’ Category

TemplatePower注意事項

星期日, 十月 5th, 2008

今天寫外包案時碰到一個詭異的現象,就是套上TemplatePower樣板系統時,一直出現部份HTML被吃掉的情況,這是我用這套兩年多以來從沒發生過的...@_@

最後發現...
原來是這次設計師給我的HTML,用Emeditor(文字編輯器)打開看換行方式是「不改變」,這會使樣板解析時出現誤判,另存為CR+LF後就正常了。
換行方式

CR = Carriage Return(歸位) = \r
LF = Linefeed(換行) = \n

Smarty不知道會不會也被換行方式影響齁...?!

取得兩個日期區間內所有天數

星期三, 九月 10th, 2008
$date1 = '20080830';
$date2 = '20080903';

u_date_range2days($date1,$date2);

function u_date_range2days($date1,$date2) {
  $i = 0;
  while (1) {
    if ($i==0) {
      $days[] = date('Ymd',strtotime($date1));
    } else {
      $days[] = date('Ymd',strtotime($date1.' +'.$i.' days'));
    }
    $i++;
    if ($days[$i-1]==$date2) break;
  }
  return $days;
}

/*
return $days
Array
(
    [0] => 20080830
    [1] => 20080831
    [2] => 20080901
    [3] => 20080902
    [4] => 20080903
)
*/

合併多筆資料到單一欄位

星期三, 九月 3rd, 2008

MySQL 4.1以後有支援一個方便的函數GROUP_CONCAT()

GROUP_CONCAT([DISTINCT] expr [,expr ...]
             [ORDER BY {unsigned_integer | col_name | expr}
                 [ASC | DESC] [,col_name ...]]
             [SEPARATOR str_val])

請直接看執行範例。XD

使用前:

SELECT empno AS '人員代號',ap_id '可用系統' FROM `ct` WHERE empno IN ('0770019','0770485') ORDER BY empno,ap_id
+----------+----------+
| 人員代號 | 可用系統 |
+----------+----------+
| 0770019  | erpchk   |
| 0770019  | erp_qa   |
| 0770019  | msg      |
| 0770485  | erpchk   |
| 0770485  | erp_qa   |
| 0770485  | msg      |
+----------+----------+

使用後:

SELECT empno AS '人員代號', group_concat(ap_id separator ',') AS '可用系統' FROM `ct` WHERE empno IN ('0770019','0770485') GROUP BY empno ORDER BY empno
+----------+-------------------+
| 人員代號 | 可用系統          |
+----------+-------------------+
| 0770019  | erpchk,erp_qa,msg |
| 0770485  | erpchk,erp_qa,msg |
+----------+-------------------+

登入phpBB並轉送回其他網址

星期三, 七月 23rd, 2008

今天寫CASE時浪費了些時間,因其中一個需求是可由網站首頁登入phpBB,並於登入後自動轉回首頁。
沒想到...

這是phpBB內建的功能啊~~~(吶喊)

將下列隱藏的input隨送出登入帳號密碼的form一起塞給phpBB/login.php

<input type="hidden" name="redirect" value="redirect.php" />

在redirect.php中加上轉送目的地,然後將檔案丟到phpBB目錄

header("location: http://mydomain ");

唉,只能怪自己蠢了...

[PHP]fgetcsv處理中文解決方案

星期三, 六月 25th, 2008

使用fgetcsv取得csv檔資料時,中文首字元會有被截掉的問題,上PHP官網翻了一下,原來加上setlocale即可解決。
原本用PHP4沒出現這問題,大概是PHP5才會這樣吧...

// utf-8
setlocale(LC_ALL, 'en_US.UTF-8');
// big5
setlocale(LC_ALL, 'zh_TW.BIG5');

Modify 2008-06-29:
PHP5透過PEAR作檔案上傳的動作時,若發生檔案名稱首位中文前半個字元被吃掉的問題時,用上述方式也可解決。
(more...)

[PHP]隨機撲克牌

星期四, 五月 15th, 2008

網路上看到滿有趣的作業題目,試作。XD

<?php
  /*
  撲克牌共有四種花色:Spade、Heart、Diamond、Club
  以簡單隨機方式發給「兩家各五張不重複牌」
  並讓雙方的牌依照「黑桃、紅心、方塊、梅花」排列
  */

  // 建立花色陣列
  $map = array('0.S1','0.S2','0.S3','0.S4','0.S5','0.S6','0.S7','0.S8','0.S9','0.S10','0.S11','0.S12','0.S13',
               '1.H1','1.H2','1.H3','1.H4','1.H5','1.H6','1.H7','1.H8','1.H9','1.H10','1.H11','1.H12','1.H13',
               '2.D1','2.D2','2.D3','2.D4','2.D5','2.D6','2.D7','2.D8','2.D9','2.D10','2.D11','2.D12','2.D13',
               '3.C1','3.C2','3.C3','3.C4','3.C5','3.C6','3.C7','3.C8','3.C9','3.C10','3.C11','3.C12','3.C13');
  // 總張數
  $max_card = 51;

  // 取出張數
  $get_card = 10;
 
  $line = 0;
  for ($i=0; $i<$get_card; $i++) {
    $num = rand(0, $max_card);
    if ($i>0 && $i%5==0) $line++;
    $out[$line][substr($map[$num],0,1).$i] = substr($map[$num],2,3);
    ksort($out[$line]);
    $map[$num] = $map[$max_card];
    $max_card--;
  }
 
  print_r($out);
 
  /*
  Array
  (
      [0] => Array
          (
              [02] => S12
              [03] => S10
              [10] => H6
              [14] => H8
              [21] => D4
          )

      [1] => Array
          (
              [07] => S7
              [19] => H9
              [25] => D10
              [36] => C8
              [38] => C7
          )

  )
  */
?>

Javascript版Super Mario

星期一, 四月 14th, 2008

JS Super Marionihilogic: Super Mario in 14kB Javascript

有實力又有閒。XD

Google Maps API運用經驗

星期二, 三月 11th, 2008

因公司內幾台車頭有安裝GPS定位的設備,就來玩看看Google Maps API,能不能協助讓我更輕易的掌握各台車頭的行蹤:P

該設備回傳到資料庫的定位格式為WGS84經緯度(E/N),為順利套用到GMap,需先轉為WGS84 TM2座標。

換算方式
E = 12047.883 = 120 + (47.883/60)
N = 2435.245 = 24 + (35.245/60)

X = 120.79805
Y = 24.587416666667

※ 使用Google Maps API的網頁編碼需為UTF-8(若使用BIG5編碼,於IE會無法顯示,原因不明)

網頁開頭宣告DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

在head內引入Google Maps API的Javascript檔,此處將以v2版為例。
key值請前往Sign Up for the Google Maps API申請即可。

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAQfRFdSPVX2zgzzcm-u8wzhR73b70vbYnqlQzPoG6vMTmUQULnBR4BZoRIhZ47CWMvpmgGocSL8S51A" type="text/javascript"></script>

為避免瀏覽器尚未載入API就先跑Script造成錯誤,需於body內設定onload,另於離開時呼叫GUnload()釋放記憶體。

<body onload="initialize()" onunload="GUnload()">

增加地圖顯示的圖層,可隨意指定大小。

<div id="map" style="width:100%;height:500px;margin:0 auto;">

接下來就是主角上場...

<script type="text/javascript">
function initialize() {
  // 檢查瀏覽器是否可正確執行
  if (GBrowserIsCompatible()) {
    // 指定GMap使用的圖層
    var map = new GMap2(document.getElementById("map"));
   
    // 地圖控制列
    map.addControl(new GLargeMapControl()); // 左側控制列
    map.addControl(new GMapTypeControl()); // 右上控制列
   
    // 座標
    var point = new GLatLng(24.587416666667, 120.79805);
    // 座標x/y於API v1/v2的擺放位址是相反的
    map.setCenter(point, 13); // 放大倍率

    // 自訂圖標
    var TruckIcon = new GIcon(G_DEFAULT_ICON);
    TruckIcon.image = "./truck.png";
    // 自訂圖標大小
    TruckIcon.iconSize = new GSize(32, 22);
          markerOptions = { icon:TruckIcon };
   
    // 設定座標點使用自訂圖標
    var marker = new GMarker(point, markerOptions);
    map.addOverlay(marker);
   
    // 訊息
    map.openInfoWindow(map.getCenter(), document.createTextNode("顯示於地圖中央的訊息"));
       
    // 行車軌跡、顏色、線粗細設定(可定義多個座標點)
    var polyline = new GPolyline([new GLatLng(24.524333333333,120.726366666667),
                                   new GLatLng(24.528066666667,120.729766666667),
                                   new GLatLng(24.531316666667,120.733283333333),
                                   new GLatLng(24.534733333333,120.73665),
                                   new GLatLng(24.538466666667,120.739483333333),
                                   new GLatLng(24.542083333333,120.741733333333),
                                   new GLatLng(24.5458,120.74395),
                                   new GLatLng(24.5495,120.746433333333),
                                   new GLatLng(24.5529,120.749216666667)
                                  ], "#ff0000", 6);
    map.addOverlay(polyline);
  } else {
    alert("您的瀏覽器不支援Google Maps!!");
  }
}
</script>

※ 以上方式可適用於Firefox/Opera/IE6等...主流瀏覽器,IE5.5還是不行...但應該很少人使用IE5.5了吧=_=\

按此瀏覽Google Maps API測試網頁


翻開那發黃的扉頁,命運將它裝得極為拙劣,我一讀再讀才發現,青春是一本太倉促的書。