Archive for 二月, 2008

CGI 簡介

始的HTML語言是設計用來展現靜態的資料,它讓人使用一種簡單的語法展現出豐富的多媒體資料,就像廣告看板一樣。由於WWW具有相當大的商業用途,因此推出後大受歡迎。可是單純的靜態展示好像缺少了什麼? 如果使用者需要的資料具有時效性,必需時常更新,這時該怎麼辦呢? 又或者你想留下使用者的資料,讓你的網頁能跟使用者達到互動的效果,這時又該如何? 由於上述種種需求,於是就誕生了CGI這東東。

CGI是Common Gateway Interface的縮寫,中文翻做『共通閘道介面』。它是一種標準介面程式,能讓你的網頁跟WWW server溝通,達到跟使用者互動的效果。而且透過CGI程式,可以讓你動態的產生網頁,秀出server上的最新資料。當你link到一個CGI物件時,你取回的文件並非是一份靜態資料,而是一個藉由程式動態產生的HTML資料流。傳回來的資料也許分分秒秒都在更改,或者針對使用者的特殊查詢而有不同的反應,例如股票市場行情等等。簡單來說,CGI程式就是能夠動態產生WWW網頁,並讓一般使用者經由WWW取用現存在傳統資訊系統內的資料。

先,你得認清一個事實:如果資料是天天更新,你絕對不可能寫一個很大的HTML文件包含所有的這些更新資料。萬一放在WWW上的資料是分分秒秒都在變動的,那麼利用程式自動根據資料產生HTML文件顯然是你唯一的選擇。第二,CGI程式可以根據使用者輸入的要求自動產生HTML格式的資料。因為輸入資料是由WWW server負責接收,並非CGI程式本身,故得找出一個有效率的方法,來做使用者輸入參數和產生HTML文件程式間的溝通工作。 CGI本身制訂的標準有提到可以藉由環境變數來達成這個目的,而且CGI程式也有能力取得現存在各類資料庫裡的資料。這就是為什麼我們稱之為Common Gateway Interface,因為CGI程式通常就像橋樑或閘道一般,溝通著非WWW系統和WWW server (這和下面所說的Web server、HTTP server是一樣的,都是指一個架有HTTPd的伺服器)。

個例子來說,你是某家證券公司的大老闆,你的公司裡已經有一個相當完善的資料庫,裝滿了過去所有的股票價格資料,現在你想經由WWW提供這些資料給你的顧客們做參考,但是你的資料庫系統根本就不懂HTTP這種格式,這時你就需要一個閘道程式,當作股票價格資料庫和HTTP server間的橋樑通道,於是CGI程式就誕生了。它可以取得HTTP使用者送來的查詢指令,轉換成現存資料庫可以了解的指令,用以取得資料後,再將資料轉換為HTML格式,最後再經由HTTP server傳回給使用者,秀在使用者的瀏覽器上。

據上述這些要求,CGI程式的確可以用任何程式語言來撰寫,只要該語言具有讀寫檔案的能力且該資料檔可被存取即可。不過這也表示寫程式時需要注意安全性的問題,以免資料被使用者有意無意的破壞,否則到時候就真的欲哭無淚了。

下來我要說一些比較理論性的東西,但卻是寫CGI程式必備的基本知識。一部Web server上一定會跑起HTTPd,這是HTTP的server程式(daemon)。由於HTTPd牽涉到系統設定問題,所以除非你是系統管理者或是自己架一台server跑起HTTPd,否則一般使用者是沒有權跑自己寫的CGI程式的。不過現在另外有個程式叫CGI wrap,它可以透過一種特殊的方法讀取userhome/www/cgi-bin裡的CGI程式,並且以使用者的身份來執行這個CGI程式,所以不虞有被破站的危險。 ind.ntou.edu.tw這部Email and Web server就有裝上CGIwrap,並且全校師生都有帳號,是大家練習CGI程式的好去處(相關的使用方法請Email to root@ind.ntou.edu.tw)。

OK! 現在我們假設你的Web server已經設置好執行CGI的環境,並且你有存取cgi-bin目錄的權限 (至於HTTPd和TCPwrap的安裝與相關設定並不在本篇文章的討論範圍內,有興趣者請自行到各大bbs站相關佈告欄的精華區找找,一定可以找到你所需要的答案)。當使用者用瀏覽器link到一個CGI程式時,瀏覽器會透過HTTP這個通訊協定,送出一個請求(require)給遠端(remote)的Web server,Web server就會跑一個HTTPd process,這個process會去找指定的目錄下有沒有這個CGI程式,如果有的話HTTPd會啟動一個child process來跑這個CGI程式,也因此繼承了HTTPd所有的環境變數設定。這也就是說使用者所輸入的要求會經由HTTP通訊協定傳送到Web server的HTTPd,再經由環境變數或標準輸入裝置(STDIN)傳遞給CGI程式。CGI程式相關的環境變數列表於下:

Environment Variable Description
SERVER_SOFTWARE The type of Web server running the CGI program
SERVER_NAME The name of the Web server host
SERVER_PORT The port address of the Web server
GATEWAY_INTERFAC The version number of the CGI standard
SERVER_PROTOCOL The version of HTTP the server is running
REQUEST_METHOD The method of requesting data specified by the client
QUERY_STRING Request parameters supplied by the client
SCRIPT_NAME The resource locator of the CGI program
REMOTE_HOST The name of the client host
REMOTE_ADDR The Ipaddress if the client host
AUTH_TYPE Authorization method,often blank
REMOTE_USER The name of the user provided by the client
REMOTE_IDENT An identify fot the client user,not often available
REFERER_URL How the client got here
HTTP_ACCEPT The MIME types accepted by the client
HTTP_USER_AGENT The client browser type
CONTENT_TYPE The MIME type of data supplied with the request

CGI程式接收到使用者的需求,經過一番處理,然後會將標準輸出(執行結果)傳送給HTTPd,再經由HTTP交給客戶端(client)的瀏覽器秀出來。

http://ind.ntou.edu.tw/~dada/cgi/CGIintro.htm

發個留言

html 序號標籤用法

§ ol (Different Types)

<ol type=a|a|i|i|1 value>
[說明]: 各種有序號列式

Example 1:
    <ol type=A>
        <lh><i>special centers in tnua</i></lh>
        <li>technological arts center</li>
        <li>trditional arts center</li>
        <li>performance arts center</li>
        <li>computer center</li>
    </ol>

     Special Centers in tnua 

  1. Technological Arts Center

  2. Trditional Arts Center

  3. Performance Arts Center

  4. Computer Center

Example 2: 
    <ol type=A>      
        <lh><i>special centers in tnua</i></lh>       
        <li>technological arts center</li>       
        <li>trditional arts center</li>       
        <li>performance arts center</li>       
        <li>computer center</li>   
        </ol>

  
    Special Centers in tnua 
  a. Technological Arts Center
  b. Trditional Arts Center
  c. Performance Arts Center
  d. Computer Center

Example 3:
  <ol type=I>
  <lh><i>special centers in tnua</i></lh>
  <li>technological arts center</li>
  <li>trditional arts center</li>
  <li>performance arts center</li>
  <li>computer center</li>
  </ol>

    special centers in tnua

  1. technological arts center
  2. trditional arts center
  3. performance arts center
  4. computer center

Example 4:
  <ol type=i>
  <lh><i>special centers in tnua</i></lh>
  <li>technological arts center</li>
  <li>trditional arts center</li>
  <li>performance arts center</li>
  <li>computer center</li>
  </ol>

    special centers in tnua

  1. technological arts center
  2. trditional arts center
  3. performance arts center
  4. computer center

Example 5:
  <ol type=1>
  <lh><i>special centers in tnua</i></lh>
  <li>technological arts center</li>
  <li>trditional arts center</li>
  <li>performance arts center</li>
  <li>computer center</li>
  </ol>

    special centers in tnua

  1. technological arts center
  2. trditional arts center
  3. performance arts center
  4. computer center

§ ul (Different Types)

<ul type=square|disc|circle value>
[說明]: 各種無序號列式 (只適用Netscape)
Example 1:
<ul type=square>
<lh><i>special centers in tnua</i></lh>
<li>technological arts center</li>
<li>trditional arts center</li>
<li>performance arts center</li>
<li>computer center</li>
</ul>

    special centers in tnua

  • technological arts center
  • trditional arts center
  • performance arts center
  • computer center

Example 2:
<ul type=disk>
<lh><i>special centers in tnua</i></lh>
<li>technological arts center</li>
<li>trditional arts center</li>
<li>performance arts center</li>
<li>computer center</li>
</ul>

    special centers in tnua

  • technological arts center
  • trditional arts center
  • performance arts center
  • computer center

Example 3:
<ul type=circle>
<lh><i>special centers in tnua</i></lh>
<li>technological arts center</li>
<li>trditional arts center</li>
<li>performance arts center</li>
<li>computer center</li>
</ul>

    special centers in tnua

  • technological arts center
  • trditional arts center
  • performance arts center
  • computer center

Example 4:
<ol >
<li>red sox</li>
<li>cubs</li>
<li type=I>royals</li>
<li>dodgers</li>
<li>indians</li>
</ol>

  1. red sox
  2. cubs
  3. royals
  4. dodgers
  5. indians

Example 5:
<ul type=square>
<li>red sox</li>
<li>cubs</li>
<li type=circle>royals</li>
<li>dodgers</li>
<li>indians</li>
</ul>

  • red sox
  • cubs
  • royals
  • dodgers
  • indians

發個留言

英文的中式菜單

> 【早點】
> 燒餅   Clay oven rolls
> 油條   Fried bread stick
> 韭菜盒  Fried leek dumplings
> 水餃   Boiled dumplings
> 蒸餃   Steamed dumplings
> 饅頭   Steamed buns
> 割包   Steamed sandwich
> 飯糰   Rice and vegetable roll
> 蛋餅   Egg cakes
> 皮蛋   100-year egg
> 鹹鴨蛋  Salted duck egg
> 豆漿   Soybean milk
> 米漿   Rice & peanut milk
> 【飯類】
> 稀飯   Rice porridge
> 白飯   Plain white rice
> 油飯   Glutinous oil rice
> 糯米飯  Glutinous rice
> 滷肉飯  Braised pork rice
> 蛋炒飯  Fried rice with egg
> 地瓜粥  Sweet potato congee
> 【麵類】
> 餛飩麵  Wonton & noodles
> 刀削麵  Sliced noodles
> 麻辣麵  Spicy hot noodles
> 麻醬麵  Sesame paste noodles
> 鴨肉麵  Duck with noodles
> 鵝肉麵  Goose with noodles
> 鱔魚麵  Eel noodles
> 烏龍麵  Seafood noodles
> 蚵仔麵線 Oyster thin noodles
> 板條   Flat noodles
> 米粉   Rice noodles
> 炒米粉  Fried rice noodles
> 冬粉   Green bean noodle
> 榨菜肉絲麵  Pork , pickled mustard green noodles
> 【湯類】
> 魚丸湯  Fish ball soup
> 貢丸湯  Meat ball soup
> 蛋花湯  Egg & vegetable soup
> 蛤蜊湯  Clams soup
> 蚵仔湯  Oyster soup
> 紫菜湯  Seaweed soup
> 酸辣湯  Sweet & sour soup
> 餛飩湯  Wonton soup
> 豬腸湯  Pork intestine soup
> 肉羹湯  Pork thick soup
> 花枝湯  Squid soup
> 花枝羹  Squid thick soup
> 【甜點】
> 愛玉   Vegetarian gelatin
> 糖葫蘆  Tomatoes on sticks
> 長壽桃  Longevity Peaches
> 芝麻球  Glutinous rice sesame balls
> 麻花   Hemp flowers
> 雙胞胎  Horse hooves
> 【冰類】
> 綿綿冰  Mein mein ice
> 麥角冰  Oatmeal ice
> 地瓜冰  Sweet potato ice
> 八寶冰  Eight treasures ice
> 豆花   Tofu pudding
> 紅豆牛奶冰  Red bean with milk ice
> 【果汁】
> 甘蔗汁  Sugar cane juice
> 酸梅汁  Plum juice
> 楊桃汁  Star fruit juice
> 青草茶  Herb juice
> 【點心】
> 蚵仔煎  Oyster omelet
> 棺材板  Coffin
> 臭豆腐  Stinky tofu
> 油豆腐  Oily bean curd
> 麻辣豆腐 Spicy hot bean curd
> 天婦羅  Tenpura
> 蝦片   Prawn cracker
> 蝦球   Shrimp balls
> 春捲   Spring rolls
> 雞捲   Chicken rolls
> 碗糕   Salty rice pudding
> 筒仔米糕 Rice tube pudding
> 紅豆糕  Red bean cake
> 綠豆糕  Bean paste cake
> 豬血糕  Pigs blood cake
> 糯米糕  Glutinous rice cakes
> 芋頭糕  Taro cake
> 肉圓   Taiwanese Meatballs
> 水晶餃  Pyramid dumplings
> 肉丸   Rice-meat dumplings
> 蘿蔔糕  Fried white radish patty
> 豆干   Dried tofu
> 【其他】
> 當歸鴨  Angelica duck
> 檳榔   Betel nut

發個留言