Archive for the Category Webdev

 
 

[jQuery] addSizes.js

addSizes.js是一隻可以自動顯示網頁中,連結檔案類型和大小的script。舉例而言,如果有一個連結是「按此下載檔案」,那麼會自動轉換為「按此下載檔案(pdf 1.2 MB)」,非常聰明。

這隻script是利用Google App Engine的json-head,無須下載整個檔案,便可取得其大小資訊。

使用前必須先引入jQuery,此外,如果Google App Engine掛點,這隻script就沒用了。根據addSizes.js的原始碼,目前支援顯示的檔案類型有:PDF, DOC, MP3, M4U,有興趣的人可以再自行增加種類。成品請參考我的範例網頁。[via WebResourcesDepot]

在網頁中動態顯示年份

在網頁中需要動態顯示年份的話,最常見的應用應該是在Copyright的宣告上:

Copyright © 2005 – 2008 Idea Grapes

在這邊我們通常會希望後面的年份,可以動態顯示至當年度的年份,也就是明年就自動改為2009。如果主機是在PHP環境底下,可以這麼寫:

Copyright &copy; 2005 - <?php echo date("Y"); ?> Idea Grapes

若是主機端不支援動態程式的話,也可以使用javascript來顯示今年年度:

<script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script>

除了動態顯示年份之外,還要注意,版權符號請使用&copy;,可以通過W3C的XHTML驗證,也不會有字元集設定不同,造成顯示為亂碼的問題。[via Design Shack]

[PHP] 如何保護Querystring?

David Walsh的文章:Tips for Protecting Querystring Keys & Values in PHP,建議了以下五種保護Querystring參數和值的方法:

  1. 整數需指定資料型態(Typecast Value when Expecting Numbers):確保整數不會被當成字串而造成錯誤。
  2. $id = (int) $_GET['i'];
  3. 淨化輸入值(Sanitize Input):建立各種類型資料的處理函式,確保資料傳遞時的一致性與安全性。類似在Dreamweaver裡面的GetSQLValueString函式。
  4. 關閉REGISTER_GLOBALS(Make Sure REGISTER_GLOBALS is Off)。
  5. 不使用有意義的變數名稱(Don’t Make Variable Names Meaningful):David原本的建議如下,但是有一位仁兄在回應中則持反對的意見,認為這並無助於安全性(還是可以從數值的一致性猜出變數的意義)。
  6. <!-- no! -->
    <a href="/profile.php?user_id=<?php echo $user_id; ?>">Your Profile</a>
    <!-- yes! -->
    <a href="/profile.php?q=<?php echo $user_id; ?>">Your Profile</a>
    
  7. 將數值加密(Encrypt Querystring Values):使用md5來加密參數值。
  8. <a href="/profile.php?i=<?php echo md5($user_id); ?>">Click here</a>

最後,請問有人知道「Querystring」的中文怎麼翻譯嗎?

[jQuery] 用Jeditable快速更新MySQL資料

Jeditable是一個用來達成「就地編輯」(Edit In Place)目的的jQuery plugin,以下簡單介紹這個外掛的用法,以及如何將編輯完成的內容更新到MySQL資料表中。

在本文的範例中,要更新的是如下的資料表:

通常我們會把資料表的資料拉到網頁裡,如下圖,前兩個欄位即是要利用Jeditable來編輯的資料。第一欄(對應資料表category欄)要使用文字框(text input)來編輯,第二欄(對應資料表parent欄)則是用下拉選單(select)編輯。

將要更新的資料以div包住,並加上class和id屬性。請注意id值的數字是用php動態產生的,即是資料表的cId欄位值

<div class="category" id="category_13">日文</div>
<div class="parent" id="parent_1">語文類</div>

使用這個外掛的語法如下:

$(document).ready(function() {
	$(".category").editable("save.php", {
		cancel: '取消',
		submit: '修改',
		indicator: "儲存中...",
		tooltip: '滑鼠點此可編輯...',
		width: "70px"
	});

	$(".parent").editable("save.php", {
		loadurl : "parents.php",
		type: "select",
		cancel: '取消',
		submit : "修改",
		indicator: "儲存中...",
	});
});

在這幾個參數裡面,第一個參數「save.php」即是將更新內容存入資料庫的後端處理程序,其他的參數應該不難理解;比較值得介紹的是「loadurl」這個參數,如果我們希望動態產生下拉選單的內容,就必須使用loadurl來加入外部資料。這個部份請參閱Jeditable官方網頁的「How to use selects?」一節。

完成上述步驟後,就地編輯就會開始作用了。點擊可編輯的文字時,Jeditable會自動產生一張表單,在本例中會依照「type」參數的設定,出現文字框或下拉選單:

按下「修改」送出表單時,Jeditable預設後端(save.php)會接收到兩個POST變數:$_POST['id']和$_POST['value'](變數名稱也是預設的,可以使用id和name兩個參數修改)。$_POST['id']的值等於前述放在div裡的id值,$_POST['value']則是在表單欄位內輸入的值。

後端(save.php)更新資料表的程式碼如下(參考來源:DeviLib.com):

< ?php
$id = $_POST['id'];
$value = $_POST['value'];

//將$_POST['id']用explode函式拆解為$field和$id兩個變數
list($field, $id) = explode('_', $id);

//mysql query
mysql_query("UPDATE tb_category SET $field='$value' WHERE cId='$id'");

//將值傳回前端
echo $value;
?>

完成後的成品網頁請按此測試。有個缺憾是,這個外掛無法直接搭配jQuery Validation一起使用,必須另行客製(有善心人士可以提供嗎?),所以我是用php在後端做資料驗證的。想了解更多資訊,請務必到Jeditable官方網頁一遊。有任何的問題指教,也歡迎與我討論。

RegExr:線上正則表達式測試工具

2008-05-08_1909

RegExr是由Grant Skinner開發的線上正則表達式(Regular Expressions,RegExp / RegEx)測試工具,它提供了一個簡單的介面讓使用者輸入正則表達式,並即時在可編輯的文字區內標示搜尋結果。在視窗的右側,還提供常用的語法片段與參考範例,透過不斷試誤的過程,讓使用者了解如何運用正則表達式。

RexExr採用Flex 3開發,使用的是ActionScript 3(不十分完美)的正則表達式引擎,所以搜尋的結果未必百分百正確。如果你的電腦(Windows、OSX或Lunix)有安裝AIR 1.0 runtime的話,你也可以使用可安裝的版本

此外,如果寫程式碰到要用到正則表達式卻不知從何寫起時,不妨到Regular Expression Library挖寶,可能一不小心就把答案翻出來了,會節省很多時間喔。

Pages: « 1 2 3 4 5 6 ...10 11 12 »