發表文章

目前顯示的是 二月, 2012的文章

Rewrite ! 修改網址的URL 入門

我們在做動態網站的時候,通常都會利用GET的方式來將一些參數交給頁面處理,我們的網址中就會多出很多的=&等這些符號,如果我們並不想要讓使用者看到這個樣子呢?我們就可以用rewrite的方式來把網址做個改寫的動作。

首先,我們要在網站的根目錄製作一個 .htaccess 檔案,這個檔案中輸入 RewriteEngine On 這段文字是告訴這個網站要啟用改寫網址的引擎 RewriteEngine
下面的例子就要實作最基礎的網址改寫 RewriteEngine On
RewriteRule ^([0-9A-Za-z]+)_([0-9A-Za-z]+)$ index.php?id=$1&name=$2 第一行解釋過了,就是開啟rewrite
RewriteRule就是要改寫的規則,表示方式如下:
RewriteRule (第一個變數的規則)_(第二個變數的規則)$ 舊的規則
在舊的規則中,我們會看到$1和$2,就是用來套用到每一組變數規則,也就是說id這個參數會被套用到第一個規則name會被套用到第二個規則中。 第一個變數規則和第二個變數規則的兩個括號()_()中有包夾一個底線_
這是用來分隔兩個變數的分隔符號,我們可以自訂各種符號作為分隔例如:/_等都可以喔 原先的網址如果是
http://127.0.0.1/index.php?id=1&name=jameswolf

就會被改寫成
http://127.0.0.1/1_jameswolf 這樣php在讀取$_GET['id']就會是1,$_GET['name']則會是jameswolf

這樣可以讓網站多人使用的情況下看起來會好像幫每個人建立自己的資料夾。試試看吧!



相關網站:
http://lamp.linux.gov.cn/Apache/ApacheMenu/mod/mod_rewrite.html

php 撰寫 xml格式

我們在製作網站的時候如果有要和其他的介面串接,最常使用的方式就是用xml的格式。
不過我們要製作XML格式的檔案時,因為產生的副檔名一樣都是.php,所以大部分的瀏覽器都只會把它當作有XML內容的網頁,雖然對方"應該"也是可以正常解析,但是不太適合閱讀。

其實我們只需要在php的檔案裡面下header就可以克服這個問題。


header('Content-Type: text/xml');
如此一來就可以告訴瀏覽器這個文件請用XML的方式讀取。
剩下的就請按照XML的標準階層寫法echo出來吧!

PHP IDE 編輯器推薦 NetBeans 7.1 中文版 [現在只剩下殘體中文]

圖片
之前小灰狼在編輯網頁的時候使用的php編輯器都是用notepad++這套軟體,老實說已經很好用了。有支援顏色的區別還可以直接ssh連線到linux上面修改內容。非常方便,重點是輕薄短小不占記憶體。


不過現在有了新歡 NetBeans 7.1 中文版,這是我在找尋Zend Framework的時候順便發現的。早期的版本好像不支援中文和Zend不過現在通通都是標準配備摟!連下載的頁面也是中文了(雖然中文化的程度有點不足,大約只有一半左右)


有沒有看到有沒有看到!
你可以直接選擇PHP的項目下載,他會連同外掛一起幫你裝好好的!夠貼心吧!上面有一個選項IDE語言記得要挑選"正體中文"喔!


推薦NetBeans 7.1的理由:


完整支援PHP語言,包含debug的項目都幫你做進去了!也就是說終於不用肉眼除錯了!效率up up支援CSS,丟掉DreamWave吧!想要編輯CSS又不想記完整語法的看過來, NetBeans 他對於CSS的支援程度超乎你的想像,甚至是你用的語法支援什麼瀏覽器、怎麼用通通都告訴你。

還不快去使用看看!

NetBeans 官網出現php_exif.dll錯誤這樣解決ubuntu 推薦php編輯器 Geany


jQuuery UI 打造美觀的 alert 介面

圖片
早期我們在編寫網頁的時候如果要出現彈出警告,通常都會用JS的alert語法。例如:

alert("錯誤訊息");
這樣產生出來的訊息就只會是這樣:

其實我們在jQuery UI的協助下可以做出比較美觀的介面。像這樣:

這次我們選用Dialog這個樣式功能,它的原理其實很簡單,先建立一個專屬的div這個div的名稱將會和jQuery的程式與法對應。如下圖: 由於這個function的原理是呼叫一個div出來顯示,所以你裡面想要包什麼東西都可以。圖檔、連結、表格等等通通可以塞進去。
其實最簡單乾淨的語法只是這樣就可以執行: $(function() { $( "#dialog-modal" ).dialog(); });
其他的東西都是參數而已,例如我們如果要再加上背景遮罩的話就在.dialog()動作中再加上
modal: true
變成 $(function() { $( "#dialog-modal" ).dialog({ modal: true }); });


大家試試看吧!還有更多的細部設定都可以在jQuery UI的官方網站中找到 http://jqueryui.com/demos/dialog/

利用jQuery UI 快速擁有常用的網頁功能icon css

圖片
上篇自訂你的 jQuery UI中,小灰狼提到jQuery UI中有多項自訂的UI風格。而我們網站上常用的icon其實也是其中一個jQuery UI有提供的項目。
和一般的用法不太相同的是,他是使用一張icon的總覽圖,藉由指定不同的位置來顯示不同的icon 就像上面那張圖,jQuery提供了這樣的一整個icon表。讓我們快速的使用在網站中,這樣在網站上面要用到的icon風格就可以很簡單統一啦!真是佛心來的。
不過有一個問題就是:要怎樣可以快速地挑選到我們要的那個icon呢?

快速挑選jQuery UI icon小秘訣 step1:先下載並解壓縮
打開index.html 是的!這個頁面算是一個簡單的demo頁面。很剛好的裡面就有所有的icon圖檔,我們可以用firebug看一下。就可以看到相對應的樣式名稱。夠簡單吧!


後記: 經過布丁大大的指點,這個技術叫做css sprite。簡單的說就是把一堆icon拼貼成一張圖以後再定位的CSS手法。既然都已經知道是這樣做了那麼我們就補充一下線上的產生工具吧!
http://tw.spritegen.website-performance.org/