網頁設計 – 第 8 頁

ASP.Net(VB) JS訊息窗

假設有一個按鈕觸發的事件需要經過確認
只要在button.onClientConfirm屬性
設定你要他先跳出來的訊息就好
比如
Button.OnClientClick=(“return confirm(‘確定執行嗎？’);”

[轉貼]ASP.NET(VB) 參數傳遞

ViewState、Session、Cookies、Application State比較
http://www.dotblogs.com.tw/hatelove/archive/2009/06/28/viewstate-session-cache-cookies-application-of-user-state.aspx

ASP.NET application、session、cookie、Viewstate、Postback
http://blog.xuite.net/tolarku/blog/27528606-ASP.NET+application%E3%80%81session%E3%80%81cookie%E3%80%81Viewstate%E3%80%81Postback

簡單整理一下重點：

單純傳遞可能被修改
在網址列可以查看
String格式存放
常製作於分頁切換

Post

單純傳遞可能被修改
原始碼內會被查看

使用方式：Response.Cookies(“變數名稱”).Value=變數值
設定 Cookie 有效期限 Response.Cookies(“變數名稱”).Expires=Now.AddDays(180) ‘180天後到期
單一使用者，存在client端，讀的到就活著。
需注意安全性考量，通常用在個人化portal或profile。
有些single sign on會透過cookie(加密)來存放帳號資訊。
String格式存放
將資料存在使用者的電腦中，大多瀏覽器限制檔案大小不得超過 4096 Bytes，每個網站最多存放20個 Cookie。

以下ASP.Net特有

ViewState

只存在於正在執行那一頁，通常用於postback記值(因為http無狀態)。
原理是HTML上的hidden field，會透過Base-64編碼
webconfig裡可以透過設定來加密：<pages viewStateEncryptionMode=”Always” />
通常server control會透過viewstate來保存其屬性值，也是傳統ASP.NET web form重整頁面最容易碰到的效率問題。可透過EnableViewState屬性開關。
可存放可序列化的Object (一般程式用到普遍最大的應該也只是hash table吧 )

Session

使用方式：session(“變數名稱”)=變數值
可存在於該連線，不同頁面，通常用來跨多頁傳些比較重要、需要安全的值。如果是前後頁面關連性的值，只需要用URL parameter即可。Session的意義比較像是在什麼樣的情況下，開始或變更了某個Session的值。
類似跨網頁的全域變數
佔用Server端記憶體，連線數量一暴增，記憶體很可能被操掛。
預設存在記憶體裡，可以改存在Session State Server或DB。(如果放在Session State Server或者DB，存放的物件也必須是可序列化的)
可設定存活時間，但發生錯誤或特定情況時，會導致Session遺失，請參考：[ASP.NET]Session遺失的幾種可能
可存放可序列化的Object

Application

使用方式：application(“變數名稱”)=變數值
在Server上所有User存取同一份。
當Web application重起或關閉時結束。
吃Server記憶體。
可存放可序列化的Object
Q：因為該變數是共用，所以會有互相搶用的問題，所以在修改該值時都應該先 Lock。Application.Lock() → Application(“count”)+=1 → Application.UnLock()

Cache

吃Server記憶體。
可設定時間、hit rate或先進先出來當作條件。
通常應用在靜態網頁快取。

[轉貼]PHP: 完美實現ASP.NET MasterPage的方法

ASP.NET中的MasterPage實在是太好用了，而在PHP裏面如果只是用傳統的方法，那麼只能夠把主要版面分段，然後個別使用include()的方式將主要版面湊出來，總覺得說不出來的彆扭。而且如果切割不好，那麼主要版面一旦改版，那麼內容頁就會改到死。使用傳統方法的程式碼大概像這樣:

<body>
<div><?php include('menu.php');?></div>
<div><?php include($page_content);?></div>
<div><?php include('footer.php');?></div>
</body>

如果沒有想過這個問題，也不會去找網路資源，原來早就有人找到方法了。主板頁面就是很一般的頁面，主要用了兩個變數$pagetitle和$pagemaincontent，看名字就知道是頁面標題和主要內容。

<?php
define('app_root',$_SERVER['DOCUMENT_ROOT']);

require_once(app_root."/shared/opendb.inc");
?>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title><?php echo $pagetitle ?></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="./style/globalreset.css" rel="stylesheet" media="screen" type="text/css" />
    <link href="./style/layout.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body>
    <div id="page">
        <div id="header">
            <div id="title">
                <h1><a href="./index.php"><img src='./images/logo_full.jpg' height='50' /></a></h1>
            </div>
            <div id="cart">
<?php //require_once(app_root."/shared/login.inc"); ?>        
            </div>
        </div>
        <div id="wrapper">
            <div id="sidebar">
                <div id="menubox">
<?php //require_once(app_root."/shared/navigation.inc"); ?>        
                </div>
            </div>
            <div id="mainbox">
                <div id="mainarea">
<?php echo $pagemaincontent; ?>        
                </div>
            </div>
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>

而內容頁面只要定義$pagetitle就好了，完整頁面的輸出就請看注解的部份。雖然這樣子做可能會小小的造成伺服器的負擔，但是跟維護比較起來，這一點點的負擔是絕對值得的。

<?php
define('app_root',$_SERVER['DOCUMENT_ROOT']);
require_once(app_root."/shared/opendb.inc");
$pagetitle = "頁面標題";
//將整個頁面輸出放到緩衝區
ob_start();
?>
頁面內容，隨便你輸出
<?php
//將緩衝區的內容放到變數裏面，然後清除緩衝區
$pagemaincontent = ob_get_contents();
ob_end_clean();
//套用主板頁面
include(app_root."/shared/master.php");
?>

php抓取網頁特定div區塊及圖片

[部分轉貼]php抓取網頁特定div區塊及圖片

//舉一反三

<?php

//取得指定位址的內容，並儲存至text

$text=file_get_contents(‘http://www.moea.gov.tw/Mns/populace/activephoto/ActivePhoto.aspx?menu_id=3874&ap_id=1666’);

//取出div標籤且id為PostContent的內容，並儲存至陣列match

preg_match(‘/<div[^>]*style=”margin-left: 37px”[^>]*>(.*?) </div>/si’,$text,$match);

//印出match

//print_r($match);

$length = count($match);

while ($i <= $length) {

echo($match[$i]);

$i++;

}

昨天有個朋友在問我說，php怎麼抓取網頁某個div區塊的內容。像funp推推王那樣每次推文都會顯示文章內的圖片，提供縮圖撰擇，又是怎麼做到的？其實這語法出乎意料的簡短…

1. 取得指定網頁內的所有圖片：測試

純文字複製列印?
<?php  
//取得指定位址的內容，並儲存至text  
$text=file_get_contents(‘http://andy.diimii.com/’);   
  
//取得所有img標籤，並儲存至二維陣列match  
preg_match_all(‘#<img[^>]*>#i’, $text, $match);  
  
//印出match  
print_r($match);  
?>  

2. 取得指定網頁內的第一張圖片：測試

純文字複製列印?
<?php  
//取得指定位址的內容，並儲存至text  
$text=file_get_contents(‘http://andy.diimii.com/’);  
  
//取得第一個img標籤，並儲存至陣列match（regex語法與上述同義）  
preg_match(‘/<img[^>]*>/Ui’, $text, $match);  
  
//印出match  
print_r($match);  
?>  

3. 取得指定網頁內的特定div區塊（藉由id判斷）：測試

純文字複製列印?
<?php  
//取得指定位址的內容，並儲存至text  
$text=file_get_contents(‘http://andy.diimii.com/2009/01/seo%e5%8c%96%e7%9a%84%e9%97%9c%e9%8d%b5%e5%ad%97%e5%bb%a3%e5%91%8a%e9%80%a3%e7%b5%90/’);   
  
//去除換行及空白字元（序列化內容才需使用）  
//$text=str_replace(array(“r”,”n”,”t”,”s”), ”, $text);     
  
//取出div標籤且id為PostContent的內容，並儲存至陣列match  
preg_match(‘/<div[^>]*id=”PostContent”[^>]*>(.*?) </div>/si’,$text,$match);  
  
//印出match[0]  
print($match[0]);  
?>  

4. 上述2及3的結合：測試

純文字複製列印?
<?php  
//取得指定位址的內容，並儲存至text  
$text=file_get_contents(‘http://andy.diimii.com/2009/01/seo%e5%8c%96%e7%9a%84%e9%97%9c%e9%8d%b5%e5%ad%97%e5%bb%a3%e5%91%8a%e9%80%a3%e7%b5%90/’);      
  
//取出div標籤且id為PostContent的內容，並儲存至陣列match  
preg_match(‘/<div[^>]*id=”PostContent”[^>]*>(.*?) </div>/si’,$text,$match);     
  
//取得第一個img標籤，並儲存至陣列match2  
preg_match(‘/<img[^>]*>/Ui’, $match[0], $match2);   
  
//印出match2[0]  
print_r($match2[0]);  
?>  

後記：用正規表達式Regex來做真的很方便，但老實說我規則常會忘掉，記錄一下幾篇文章好了（Regular Expression Details| PCRE Functions | Introduction to PHP Regex | 天殺的正規表示式…）

參考：Fetching the contents of a div tag by id

[轉貼]CSS圖片透明

http://www.dotblogs.com.tw/rab/archive/2011/01/21/css-cross-browser-support-alpha-display.aspx

要如何設定網頁中物件的透明度，又讓眾家瀏覽器都能閱讀，可利用下列的設定方式

  
.div_alpha{
 filter:alpha(Opacity=50, Style=0);/*for ie*/ 
 -moz-opacity:0.5;/* Moz + FF */ 
 opacity: 0.5;/* CSS3的標準語法，FOR支援CSS3的瀏覽器（FF 1.5）*/
}

filter:alpha(opacity)是屬於IE的私有屬性，-moz-opacity是屬於Mozilla跟FireFox的私有屬性，opacity則是標準的CSS規則，部分Moz Family也支援CSS3。後面的數值以百分比為單位，IE的Filter數值為0~100，-moz與opacity兩種數值為0~1之間，三種都設定可以確保透明的效果在以上的瀏覽器裡正確執行。

至於Mac上的Opera並不支援透明度屬性的設定，可是他支援png圖檔，所以可以利用png半透明圖檔設定為背景，也可以達到半透明背景的效果。

設定透明度會讓物件本身與子元素都一起半透明，所以文字也會一起變半透明，如果是要作遮罩效果，記得要將物件拆開設定，才不會讓文字也一併被透明化了喔!!

範例網址 / css_alpha_setting.htm