不管是安裝那一套,安裝前,請先關閉skype,不是因為他被微軟買走就唾棄他,而是因為它會暫住80port,導致網頁伺服器無法啟動。
一、Uniform Server下載
二、Uniform Server 完整版的安裝
<Directory "C:/UniServer/www"> Options Indexes Includes indexOptions FancyIndexing ScanHTMLTitles NameWidth=128 DescriptionWidth=256 HTMLTable VersionSort FoldersFirst AllowOverride All Require all granted </Directory>
更詳細資訊請參考資料來源
一、XAMPP 下載
二、XAMPP 完整版的安裝
網站網址 http://localhost 或 http://您的IP(建議用IP)
網頁目錄 C:\xampp\htdocs
(1) short_open_tag = On(約在226行,允許使用<?這種短標籤)
(2) date.timezone = Asia/Taipei(約在1013行,設定時區)
(3) magic_quotes_gpc = On(約在749行,自動把特殊字元加上拖曳符號)
(4) error_reporting = E_ALL | ~E_STRICT(約在516行,xampp 1.7.4 以後的版本才要改)
刪除底下資料夾:
<html> <head><title>PHP練習1</title></head> <body> <!--這是網頁用的註解,不可用在PHP模式中--> <?php /* 這是PHP的長註解 可以寫很多東西 */ echo "嗨!<font color=blue>您好!</font>"; //這是PHP的短註解,僅一行 ?> </body> </html>
PHP的變數很大一部份來自於表單,因此我們來看一下表單的寫法。
<form action="接收程式.php" method="傳送方式">表單</form>
<input type="格式" name="名稱" size="大小" value="預設值">
變數:就是用來暫時存個資料用的東西啦!
變數來源:自訂變數、外部變數(來自表單或session、Cookie、環境變數)
$a=123; //$a → integer整數 $a=12.3; //$a → double浮點數 $a="123"; //$a → string字串 $a=array(1,2,3); //$a → array陣列
$a = "2年級"; $b = "3年級" $c = $a + $b;
本頁名稱:$_SERVER['PHP_SELF
']
根目錄位置:$_SERVER['
DOCUMENT_ROOT
']
主機位置:$_SERVER['
HTTP_HOST
']
您的瀏覽器版本:$_SERVER['
HTTP_USER_AGENT
']
使用者的IP位置:$_SERVER['
REMOTE_ADDR
']
主機的IP位置:$_SERVER['
SERVER_ADDR
']
您用的網站伺服器是:$_SERVER['
SERVER_SOFTWARE
']
define("_USER_ID" , "tad"); define("_USER_PASSWD" , "5711438");
運算子
|
範例
|
用途
|
+
|
$a + $b
|
$a 和 $b 的和。 |
-
|
$a - $b
|
$a 和 $b 的差。 |
*
|
$a * $b
|
$a 和 $b 的乘積。 |
/
|
$a / $b
|
$a 除以 $b 的商。 |
%
|
$a % $b
|
$a 除以 $b 的餘數。 |
即「=」。意思是將「右邊的值」指定給「左邊的變數」。
所以在程式技巧中,可以把表示式簡寫為下列方式:
標準式
|
簡單式
|
$a = $a + $b
|
$a += $b
|
$a = $a - $b
|
$a -= $b
|
$a = $a * $b
|
$a *= $b
|
$a = $a / $b
|
$a /= $b
|
$a = $a % $b
|
$a %= $b
|
範例
|
名稱
|
解釋
|
$a == $b
|
等於
|
TRUE,如果 $a 等於 $b。 |
$a === $b
|
全等
|
TRUE,如果 $a 等於 $b,並且它們的類型也相同。 |
$a != $b
|
不等
|
TRUE,如果 $a 不等於 $b。 |
$a <> $b
|
不等
|
TRUE,如果 $a 不等於 $b。 |
$a !== $b
|
非全等
|
TRUE,如果 $a 不等於 $b,或者它們的類型不同。 |
$a < $b
|
小與
|
TRUE,如果 $a 小於 $b。 |
$a > $b
|
大於
|
TRUE,如果 $a 大於 $b。 |
$a <= $b
|
小於等於
|
TRUE,如果 $a 小於或者等於 $b。 |
$a >= $b
|
大於等於
|
TRUE,如果 $a 大於或者等於 $b。 |
三元運算符:
(expr1) ? (expr2) : (expr3);
如果 expr1 的值為 TRUE,則此運算式的值為 expr2,如果 expr1 的值為 FALSE,則此運算式的值為 expr3。
即「@」,放在運算式或函數前,可隱藏錯誤訊息。
即「`系統指令 `」,此為重音符號,非單引號。
邏輯運算子就是要用來作邏輯判斷用的!其中and可以用符號(&&)來替代,or可以用符號(||)來表示。
$a and $b | and(與) | 只有$a 與 $b兩者皆為真,結果才為真 |
$a && $b | and(與) | 只有$a 與 $b兩者皆為真,結果才為真 |
$a or $b | or(或) | 只要$a 或 $b兩者之一為真,結果就為真 |
$a || $b | or(或) | 只要$a 或 $b兩者之一為真,結果就為真 |
$a xor $b | exclusive or(互斥) | 只有$a 與 $b一為真、一為假時,結果才為真 |
!$a | not(否) | 只有$a為假時,結果才為真 |
即「.」,可連接字串與變數(或函數)。
即「+」,它把右邊的陣列附加到左邊的陣列後,但是重複的索引值不會被覆蓋。
$str1 = '這是純文字' ; $str2 = "這裡面有 $var 變數" ; //偷懶的寫法,遇到陣列就不行了 $str3 = "這裡面有{$var}變數" ; //建議寫法 $str4 = '這裡面有' . $var . '變數' ; //利用字串運算子元(.)的寫法
function 函數名稱($參數1="預設值1", $參數2="預設值2",...){ global 宣告為全域變數; 程式內容; 程式內容; return 傳回值; }
引入進來的檔案若是相同的,只會 include 或 require一次。
<input type='hidden' name='op' value='欲執行動作'>
if($_REQUEST['op'] == "欲執行動作"){ 執行動作; }
switch($變數名稱){ case "值1": 執行動作1; break; case "值2": 執行動作2; break; default: 預設執行動作; break; }
不曉得要跑幾圈的迴圈最適合用while迴圈
while (條件){ 敘述句 }
1. for迴圈適合用在已經知道要跑幾圈的情況。
for(expr1 ; expr2 ; expr3){ 敘述句… }
2. 在for( )裡面分別有三個部份,expr1 代表初始值, expr2 代表迴圈測試條件,條件若測試成立,迴圈繼續;條件測試失敗,迴圈停止,expr3 是條件成立後累進次數,"敘述句"代表每次繞一圈後所要進行的動作。
3. 假設,我們要列印出1到10的數字,那麼,我們可以這麼寫:
for($i=1;$i<=10;$i++){ echo $i; }
4. 整個執行流程,用文字來表示便是如下的5個步驟,您可以在腦海中試著運作一遍看看:
【步驟1】進入for迴圈,執行expr1,設定初始值,由於要列印1到10,所以我們設定變數 $i 的初始值是1。
【步驟2】進入expr2,也就是進入條件測試 $i<=10,若$i確實小於或等於10,則進行步驟3,若條件測試失敗($i>10時)則跳到步驟5。
【步驟3】執行{}中的敘述句「echo $i ;」,也就是印出 $i 的意思,執行完後,跳到步驟4。
【步驟4】執行expr3,也就是$i++,$i++的意思就是變數$i的值+1的意思!也就是變數$i的值從1變成2,接下來跳回步驟2。
【步驟5】結束迴圈
5. 上面的例子,您高興的話,這樣寫也行:
$i=1; for(;$i<=10;$i++){ echo $i; }
6. 或是這樣寫也行:
$i=1; for(;$i<=10;){ echo $i; $i++; }
7. 基本上,只要 for 迴圈做的到的動作,while迴圈也應該做得到。
1. foreach迴圈適合用在陣列上
foreach($陣列 as $值) { 敘述句 } //例如: $stud[1] = '張三'; $stud[2] = '李四'; $stud[3] = '王五'; foreach($stud as $name) { echo "<div>學生 {$name}</div>"; }
2. 也可以同時取出索引和值
foreach($陣列 as $索引=>$值) { 敘述句 } //例如: $stud[1] = '張三'; $stud[2] = '李四'; $stud[3] = '王五'; foreach($stud as $num => $name) { echo "<div>學生 {$name} 的座號是 {$num}</div>"; }
1. break 和 continue都是在迴圈裡使用的語法(break還可以用在switch中),一個是用來中斷迴圈,一個則是用來略過迴圈。
類型 | bytes | 範圍 | 選項 | 說明 |
TINYINT(M) | 1 | -128到127,unsigned狀態則為0到255 | unsigned、zerofill | TINYINT(非常小的整數)正整數僅到255,所以適合超小數值資料,例如:成績、座號、身高、體重...等資料。 |
SMALLINT(M) | 2 | -32768到32767,unsigned狀態則為0到65535 | unsigned、zerofill | SMALLINT(較小整數)正整數可以算到6萬左右的數字,適合小數值資料,例如:學校人數、萬元內的物品價錢...等。 |
MEDIUMINT(M) | 3 | -8388608到8388607,unsigned狀態則為0到16777215 | unsigned、zerofill | MEDIUMINT(中等整數)正整數可以計算到1600萬左右的數字,適合中型數值,例如:城市人口、土地大小、留言版的筆數序號...等。 |
INT(M) | 4 | -2147483648到2147483647unsigned狀態則為0到4294967295 | unsigned、zerofill | INT(標準整數)正整數已經可以用到42億左右的數字,適合用來做一國人口總數、公司營業額...等。 |
BIGINT(M) | 8 | -9223372036854775808到9223372036854775807unsigned狀態則為0到18446744073709551615 | unsigned、zerofill | 這個BIGINT(大整數)已經大到不像話了,正整數已經大到1800京左右了,工友想破頭也想不出要拿來記錄什麼非得用到這麼大不可,大概適用計算很精密的數字才用得到吧! |
FLOAT(M) | 4 | FLOAT(M,D)最小非零值:±1.175494351E - 38FLOAT(4)最大非零值:±3.402823466E + 38FLOAT(8)最大非零值:±1.7976931348623157E + 308 | zerofill | FLOAT單精確度浮點數,能夠記錄小數點,例如精密的成績計算、各類數值記錄...等都相當適合!此外,FLOAT(4) 和FLOAT(8) 是為了與ODBC相容而提供的。 |
DOUBLE(M) | 8 | 最小非零值:±2.2250738585072014E - 308 | zerofill | DOUBLE雙精度浮點數,和FLOAT差不多的用途,不過,DOUBLE所用掉的空間是FLOAT的兩倍,所以,除非特別需要高精度或範圍極大的值,一般來說用FLOAT來儲存資料應該是夠了。 |
DECIMAL(M,D) | M | 可變;其值的範圍依賴於M和D | zerofill | DECIMAL也是浮點數的一種,DECIMAL類型不同於FLOAT和DECIMAL,其中DECIMAL實際是以串存放的。DECIMAL可能的最大取值範圍與DOUBLE一樣,但是其有效的取值範圍由M和D的值決定。如果改變M而固定D,則其取值範圍將隨M的變大而變大。 |
底下的例子中,您會看到一堆的Y、M、D這些東西,Y代表的是年,YY代表2位數的年,如97年,YYYY代表4位數的年,如2001年,其餘的M(月)、D(日)依此類推。
類型 | bytes | 範圍 | 用途 | 說明 |
DATE | 3 | 1000-01-01到9999-12-31 | 以YYYY-MM-DD來儲存日期 |
MySQL接受以下的輸入方法:「2001/03/10」、「2001-3-10」、「01/3/10」、「2001@3@10」、「20010310」,換句話說,只要可以辨認的分隔符號,都能成功的輸入到MySQL中。 當年份數字在00-69之間,則會被當作2000-2069,若是在70-99之間,則當作1970-1999! |
DATETIME | 8 | 1000-01-01 00:00:00到9999-12-31 23:59:59 | 以YYYY-MM-DD hh:mm:ss來儲存日期時間 | 您在輸入DATETIME資料時,例如:2001年3月10日18時5分30秒,MySQL接受以下的輸入方法:「2001/03/10 18:05:30」、「2001-3-10 18+5+30」、「20010310180530」,換句話說,和DATE一樣,只要是可以辨認的分隔符號,都能成功的輸入到MySQL中。 |
TIMESTAMP(M) | 4 | 1970-01-01 00:00:00到2037 | 以YYYYMMDDhhmmss來記錄時間戳記 |
有些函數只接受TIMESTAMP的日期形態,因此,在某些情況下您是不得不用他的。 若是TIMESTAMP沒有特別去指定,則會以目前的時間來作記錄。 |
TIME | 3 | -838:59:59到838:59:59 | 以hh:mm:ss來記錄時間 |
MySQL接受以下的輸入方法:「18:05:30」、「18.5.30」、「180530」,沒錯,只要是可以辨認的分隔符號,都能成功的輸入到MySQL中。 若是只輸入「2212」,那麼會被當成「00:22:12」,換言之,若有位數不足的情況下,MySQL會自動在前方補0,因此,若是您想輸入11時22分,那麼,您得寫成「112200」喔!不然,若只寫「1122」則會被當作11分22秒 |
YEAR | 1 | 1901到2155 | 僅以YYYY來記錄年份 | YEAR只能記錄年份...用在什麼地方呢?例如大範圍的生日年份調查統計...等。老實說,並不太常用。 |
類型 | bytes | 範圍 | 用途 | 說明 |
CHAR(M) | M位元組(隨M值大小來決定) | 1<=M<=255 | 固定長度字串 |
CHAR固定長度字元,例如CHAR(4)則只能儲存4位元組(bytes)的資料,超出也不管...例如:CHAR(4)的欄位存入「abcdefg」的字串,則只剩下「abcd」四個字。所以哩!要用的時候,除非您確定字串不會超過某個範圍,例如IP都是固定15個位元組,在這種情形下再用CHAR吧! 請注意喔!CHAR(M)最多只能設到255。 |
VARCHAR(M) | 視實際字串位元組大小+1 | 1<=M<=255 | 變動長度字串 |
VARCHAR就比CHAR有智慧一點了,例如:VARCHAR(6)的欄位遇到「abcdefg」的字串,那麼該欄位一樣只能存「abcdef」,而且,他還要多用一個位元組來儲存資料長度,導致儲存「abcdef」會用到7個位元組,這也就是為什麼他所用的空間大小是「視實際字串位元組大小+1」的原因了。那這個VARCHAR不就很糟糕?還要比CHAR多佔用一點空間?不!他有個優點,假設他遇到「abc」這樣的字串,那麼他會自動縮小所需空間,只要4個位元組就夠囉!如此,就省下空間啦! VARCHAR (M)一樣最多也只能設到255。 |
TINYTEXT | 視實際內容所用之位元組大小+1 | 255個字元 | TINYTEXT 非常小的文本串 | TEXT適用來儲存大容量資料的欄位,例如留言內容、文章內容等等。這一系列的TEXT除了空間大小不一樣以外,其餘的相同!由於TEXT和BLOB這種欄位實在是太像了,所以,我們也先來介紹一下BLOB再一併做比較。 |
TEXT | 視實際內容所用之位元組大小+2 | 65535個字元 | TEXT小文本串 | |
MEDIUMTEXT | 視實際內容所用之位元組大小+3 | 16777215個字元 | MEDIUMTEXT中等文本串 | |
LONGTEXT | 視實際內容所用之位元組大小+4 | 4294967295個字元 | LONGTEXT大文本串 | |
TINYBLOB | 視實際內容所用之位元組大小+1 | 255個字元 | 超小型BLOB |
BLOB這種欄位格式可以用來儲存二進位的資料,例如圖像、音樂等,他和TEXT幾乎是一樣的功用!差別僅在於BLOB裡的資料是有分大小寫的,而TEXT裡的資料是不分大小寫。 BLOB和TEXT也都是和VARCHAR一樣,屬於可以自動判斷資料量而自動縮小其使用空間。例如您拿BLOB來存一個500個字元的資料,原本BLOB最大是可以存65535個位元組的,不過當他遇到這種情形時,他會自動縮小為502位元組而已(視實際內容所用之位元組大小+2),而不會真的用掉65535個位元組那麼多 BLOB或TEXT在ySQL 3.23以後版本中可以進行索引,不過再進行所以之前,您必須擷取前面幾個字元拿來當索引就好了!不然整個資料庫的速度可是會被拖垮的!因此,一般來說,我們也幾乎都不鼓勵用BLOB或TEXT來作為索引。 由於BLOB和TEXT值變化很大,尤其在常常刪減、更新的情形下,容易造成資料表資料破碎的情形產生,因此,我們應該定期地利用OPTIMIZE TABLE的指令,來讓資料表最佳化。 |
BLOB | 視實際內容所用之位元組大小+2 | 65535個字元 | 小型BLOB | |
MEDIUMBLOB | 視實際內容所用之位元組大小+3 | 16777215個字元 | 中型BLOB | |
LONGBLOB | 視實際內容所用之位元組大小+4 | 4294967295個字元 | 大型BLOB |
類型 | bytes | 範圍 | 用途 | 說明 |
ENUM | 1或2位元組 | 最多65535個選項 | 單選選項 |
ENUM簡單講就是單選題,您自己預設一些內容,該欄位只能存入您所設定的內容之一,例如:男、女;低年級、中年級、高年級...等,這些固定且單一答案的選項,都適合用ENUM資料欄位。 這種欄位是用機碼在運作的,因此速度相當快,所需空間小,而且不怕使用者亂填資料!因為使用者填寫的資料料若不在選項裡面,那他會當作是NULL值,因此,工友在此推薦,若您的欄位是固定選項、且單一資料,那一定要用ENUM。 |
SET | 1,2,3,4或8位元組 | 最多64個選項 | 複選選項 | SET和ENUM也差不多的意思,不過他可以複選,也就是同時可以儲存一個以上的資料項,例如:興趣調查、購物選購單...等。 |
CREATE TABLE 資料表名稱 (
欄位名稱1 資料類型 欄位設定選項,
欄位名稱2 資料類型 欄位設定選項,
︴
索引 欄位
);
mysql_connect("主機位置","資料庫帳號"," 資料庫密碼");
$link=mysql_connect("localhost","root","12345");
mysql_close($link);
mysql_query("SET NAMES 'utf8'");
寫入一筆資料到MySQL中,就要用insert的語法,insert的用法如下:
insert [into] 資料表名稱 [(欄位1,欄位2...)] values (值1,值2...)
insert into money (`name` , `salary` , `date`) values("tad" , "1000" , "2000/1/30" );
【範例說明】我們利用上面語法,在money資料表中新增了一筆資料,其中VALUES的左邊是欄位名稱,分別是「name」、「salary」、「date」這些欄位,VALUES的括號裡面則是這些欄位的值,例如對應「name」欄位的值就是tad。由於tad是字串,所以,都用雙引號""括起來。每個值之間以逗號分開。
insert into money values("","tad","1000","2000/1/30");
【範例說明】懶惰一點,不要輸入欄位名稱,這樣的話,您就必須確定,您的值是依照欄位順序來排列...不過,還是不建議您這樣做,因為出錯的機會實在是太大了!
insert into money (`name` , `salary` , `date`) values("bee" , "2000" , "2000/2/1" ) , ("frog" , "1000" , "1900/12/1" ) , ("apple" , "2000" , "2000/1/1" ) , ("tad" , "1500" , "2000/1/15" )
我們也可以一次輸入一堆的資料喔!像以上這一行,就可以一口氣輸入四筆資料!
insert LOW_PRIORITY into money (`name` , `salary` , `date`) values("tad" , "1000" ,"2000/1/30" );
insert DELAYED into money (`name` , `salary` , `date`) values("tad" , "1000" , "2000/1/30");
要讀出MySQL的資料,那您就要用select這指令。
SELECT 查詢內容 [FROM `資料表名稱` 篩選條件]
「篩選條件」有以下幾個東西!注意喔!由上到下就是其語法的先後順序喔!您可不能把LIMIT拿到WHERE的前面,那是錯誤的喔!
[where 篩選條件]
[group by 欄位名稱][having group的篩選條件]
[order by {unsigned_integer | 欄位名稱 | formula} [asc | desc]
,...]
[limit [起點,] 筆數]
select * from `money`;查詢money資料表中所有欄位的所有資料。則會把money資料表中的東西,通通列出來。
select `name` , `salary` from `money`;查詢money資料表中name和salary欄位中的所有資料。則只會列出每人的姓名(name)以及薪水(salary)的資料,其餘的資料,如發薪 日是不會列出來的。
select `salary` , `date` from `money` where `name` = 'tad' ;查詢money資料表中,「符合name欄位為tad」的salary和date欄位資料。也就是說,要找出資料庫中名字(name)為tad的薪水 (salary)和發薪日(date)的資料。
select `salary` , `date` from `money` where `name` = 'tad' and `salary` = '1000';篩選條件可以不只是一個,您可以用and(和)、or(或)...設很多個。
select `salary` from `money` group by `salary` ;查詢money資料表中,以相同的薪水為群組(group by salary),列出薪水欄位的資料。group by會把該欄位相同的值當作一個群組。
select `salary` , count(`salary`) from `money` group by `salary` ;通常,我們用這種方式可以了解資料庫中,某種資料的分類情形,這是相當實用的,底下我們利用MySQL的count()函數, 配合group by更能求出該群組的數目,如此,您便能得知,哪一種群組,各有多少人,我們留言板中,幾月份有幾個人留言,亦可利用此種方式算出。
select `name` , max(`salary`) from `money` group by `name` having max(`salary`) > 3500 ;這一行的意思就是,從各個name的群組(group by name)中,列出其中薪水最高max(salary)者的姓名以及其薪水。於是,首先資料庫會把姓名分四個群組,然後,根據having max(salary)>3500,他會把這四個群組中,最高薪有超過1500的人篩選出來
select `date` , `name` , `salary` from `money` order by `date` ;查詢money資料表中date,name,salary欄位的資料,並且以date欄位為準來排序(order by date)。
select `date` , `name` , `salary` from `money` order by `date` desc;正常來說,若是您使用「order by欄位名稱」的時候,沒指定用asc(小至大)或desc(大至小)來排,那MySQL會將資料自動從小排到大,也就是asc的排法,若是想從大排到小 怎麼辦?很簡單,加入desc就行了。
select `name` , `salary` from `money` limit 0,5;用 limit來限制列出資料的筆數是很常見的用法,尤其在做資料分頁的時候更是常用!limit後面有兩個數字,很多人會誤以為是「limit 起點,終點」,其實,這是錯的!第一個數字代表的是「筆數起點」沒錯,但第二個數字是「列出筆數」!也就是說limit 0,5就是從第0筆資料開始讀,一次讀5筆的意思!
更新資料庫的指令是update,通常,我們要修改某一筆資料的內容時,就是用update。我們來看看,update要如何使用!
update 資料表名稱 set 欄位1=值1,欄位2=值2,... [where 篩選條件] [limit 筆數]
serial | name | salary | date |
3 | frog | 1000 | 1999-12-01 |
serial | name | salary | date |
3 | frog | 1500 | 2000-01-01 |
update money set salary="1500",date="2000-01-01" where serial=3
update LOW_PRIORITY money set salary="1500",date="2000-01-01" where serial=3
update money set salary= salary+500
刪除資料的指令是delete,其指令如下:
delete from 資料表名稱 [where 篩選條件] [limit 筆數]
delete from money where name='tad'
delete LOW_PRIORITY from money where name='tad'
SET @newid=0;
update 表格名稱 set `主鍵`= (SELECT @newid:=@newid+ 1);
include_once('tbs_class.php'); $TBS =new clsTinyButStrong ; $TBS->LoadTemplate('theme.html',False) ; $TBS->Show() ;
http://www.my97.net/dp/down.asp(My97DatePicker.rar)
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/(formValidator.2.2.zip)
1.引入該物件
require_once "pagebar.php";
2.將以下語法,插入到 $sql 與 mysql_query() 之間。
//PageBar(資料數, 每頁顯示幾筆資料, 最多顯示幾個頁數選項);
mysql_query($sql);
$total=mysql_affected_rows();
$navbar = new PageBar($total, 20, 10);
$mybar = $navbar->makeBar();
$bar= "<p align='center'>{$mybar['left']}{$mybar['center']}{$mybar['right']}</p>";
$sql.=$mybar['sql'];
3.「$bar」即分頁工具,將之擺至適當位置即可。
方法一:
<script type='text/javascript' src='ckeditor/ckeditor.js'></script>
<textarea name='content' class='ckeditor'>
方法二:
<script type='text/javascript' src='ckeditor/ckeditor.js'></script>
<textarea name='content' cols=30 rows=5 id='editor'>請輸入內容</textarea>
<script type='text/javascript'>
CKEDITOR.replace('editor' , { skin : 'v2' , toolbar : 'Basic' } );
</script>
自行定義工具列:http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar
例如(config,js):
CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
{ name: 'clipboard', items : [ 'Undo','Redo' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','PageBreak' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','Outdent','Indent'] },
{ name: 'links', items : [ 'Link','Unlink' ] },
{ name: 'styles', items : [ 'Styles','Format' ] },
{ name: 'tools', items : [ 'Font','FontSize' ] }
];
};
1. 解壓縮,將 elfinder-1.x 目錄改名為 elfinder,並複製到 htdocs 下。
2. 設定FCKEditor
<textarea name='content' cols=30 rows=5 id='editor'>請輸入內容</textarea>
<script type='text/javascript'>
CKEDITOR.replace('editor',{skin : 'v2' , filebrowserBrowseUrl : 'elfinder.html'});
</script>
3. 建立上傳目錄,如 htdocs/files
4. 製作 elfinder 專頁 elfinder.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<div id='finder'></div>
<!-- jQuery and jQuery UI -->
<script src="elfinder/js/jquery-1.6.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="elfinder/js/jquery-ui-1.8.13.custom.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="elfinder/css/smoothness/jquery-ui-1.8.13.custom.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="elfinder/css/elfinder.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="elfinder/js/elfinder.min.js" type="text/javascript" charset="utf-8"></script>
<script src="elfinder/js/i18n/elfinder.zh_TW.js" type="text/javascript" charset="utf-8"></script>
<script type='text/javascript'>
$().ready(function() {
var funcNum = window.location.search.replace(/^.*CKEditorFuncNum=(\d+).*$/, "$1");
var langCode = window.location.search.replace(/^.*langCode=([a-z]{2}).*$/, "$1");
$('#finder').elfinder({
url : 'elfinder/connectors/php/connector.php',
lang : langCode,
editorCallback : function(url) {
window.opener.CKEDITOR.tools.callFunction(funcNum, url);
window.close();
}
})
})
</script>
</body>
</html>
5. 修改 elfinder/connectors/php/connector.php,設定 31、32 行,設定為正確位置,如:
'root' => '../../../files', // path to root directory
'URL' => 'http://localhost/files/', // root directory URL
將 42 行的 mimeDetect 註解取消,如此才能看得到縮圖。
1.貼上以下語法,自行修改正確路徑。
<!-- jQuery and jQuery UI -->
<script src="js/jquery-1.6.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.13.custom.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.13.custom.css" type="text/css" media="screen" charset="utf-8">
<!-- elRTE -->
<script src="js/elrte.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/elrte.min.css" type="text/css" media="screen" charset="utf-8">
<!-- elRTE translation messages -->
<script src="js/i18n/elrte.zh_TW.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$().ready(function() {
var opts = {
cssClass : 'el-rte',
lang : 'zh_TW',
width : 640,
height : 200,
toolbar : 'complete',
cssfiles : ['css/elrte-inner.css']
}
$('#editor').elrte(opts);
})
</script>
2.在表單中的編輯框裡加上 id="editor" ,如:
<textarea id="editor"></textarea>
3.修改 doctype 為:
Option | Type | Description |
---|---|---|
doctype | String | DocType of editor window (iframe). Default - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
cssClass | String | CSS class for editor |
cssfiles | Array | Array of css files which will be included in editor (iframe) |
absoluteURLs | Boolean | Make image URLs absolute |
allowSource | Boolean | Allow edit in HTML |
lang | String | Interface language (requires inclusion of language file), default - English |
styleWithCSS | Boolean | If true - text will be formated using span-tag with style attribute, else - semantic tags like strong, em and other |
height | Number | Height of editor window in pixels |
width | Number | Width of editor window in pixels |
fmAllow | Boolean | Allow use of file manager |
fmOpen | Function(callback) | Function which will be called to open file manager. Argument callback - function which editor passes to file manager on open. File manager must call this function with using URL of selected file as argument |
toolbar | String | Toolbar to use |
1.把elfinder 中的目錄複製到 elrte中,並覆蓋之。
2.將以下語法貼到檔案中:
<!-- elfinder -->
<link rel="stylesheet" href="css/elfinder.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="js/elfinder.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/i18n/elfinder.zh_TW.js" type="text/javascript" charset="utf-8"></script>
3.修改 elrte 的 js 設定:
<script type="text/javascript" charset="utf-8">
$().ready(function() {
var opts = {
cssClass : 'el-rte',
lang : 'zh_TW',
width : 640,
height : 200,
toolbar : 'complete',
cssfiles : ['css/elrte-inner.css'],
fmOpen : function(callback) {
$('<div id="myelfinder" />').elfinder({
url : 'connectors/php/connector.php',
lang : 'zh_TW',
dialog : { width : 900, modal : true, title : 'Files' }, // open in dialog window
closeOnEditorCallback : true, // close after file select
editorCallback : callback // pass callback to file manager
})
}
}
$('#editor').elrte(opts);
})
</script>
4.修改connectors/php/connector.php:(32行)
'URL' => 'http://localhost/files/', // root directory URL
1.加入以下語法:
<link rel='stylesheet' href='css/validationEngine.jquery.css' type='text/css' media='screen' charset='utf-8' />
<link rel='stylesheet' href='css/template.css' type='text/css' media='screen' title='no title' charset='utf-8' />
<script src='js/jquery-1.6.min.js' type='text/javascript'></script><!--端視之前有無引入 jquery-->
<script src='js/languages/jquery.validationEngine-tw.js' type='text/javascript'></script>
<script src='js/jquery.validationEngine.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#myform').validationEngine({
inlineValidation: true,
success : false,
failure : function() {}
});
});
</script>
(1) 提示的位置:「promptPosition: "topRight", 」選項有:topLeft, topRight, bottomLeft, centerRight, bottomRight
(2) 是否邊輸入邊檢查:「inlineValidation: true,」
2.表單要做的變化:記得在<form>中加入id="myform",要對應上面的$("#myform")。
在欄位中加入參數:<input name='id' type='text' id='id' class='validate[required , custom[onlyLetter] , length[0,10]]'>
4.單選鈕的寫法:<input name="sex" type="radio" value="男" class="validate[required] radio">
5.複選鈕的寫法:<input name="hobby" type="checkbox" id="hobby" value="琴" class="validate[minCheckbox[2]] checkbox">
讀出檔案會用到的函數:
官方網站:http://twitter.github.io/bootstrap/index.html
中文手冊:http://kkbruce.tw/
BootStrap 是一套CSS框架,您不懂CSS也沒關係,直接根據手冊說明,套用到網站上即可。
將下載的檔案解壓縮,並將解開的css、img、js 三個資料夾複製到程式的所在位置即可。
一個有套用Bootstrap的基本頁面:
<!DOCTYPE html> <html> <head> <title>標題</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> 主內容 <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
流動網格系統可適用在任何裝置上!一樣分為12格
<div class="row-fluid"> <div class="span4">左欄</div> <div class="span8">右欄</div> </div> <div class="row-fluid"> <div class="span3">左欄</div> <div class="span6">中欄</div> <div class="span3">右欄</div> </div>
<?php //連線資料庫 link_db("localhost" , "root" , "12345" , "tad"); //針對 op 變數進行整理 $op = isset($_REQUEST['op'])?$_REQUEST['op']:""; $sn = isset($_REQUEST['sn'])?intval($_REQUEST['sn']):""; //intval() 強制轉成數字 //流程控制 switch($op){ //儲存榮譽榜資料 case "insert": insert(); header("location:index.php"); break; //發布表單 case "post_form": $main = post_form($sn); break; //刪除 case "delete": delete($sn); header("location:index.php"); break; //更新榮譽榜資料 case "update": update($sn); header("location:index.php"); break; //列出所有榮譽榜 default: $main = list_all(); break; } ?> <!DOCTYPE html> <html> <head> <title>榮譽榜發布</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <div class="row-fluid"> <div class="span3"></div> <div class="span6"> <?php echo $main;?> </div> <div class="span3"></div> </div> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> <?php //連線資料庫 function link_db($location="localhost" , $id="" ,$passwd="" , $db=""){ $link = mysql_connect($location , $id , $passwd); if($link){ mysql_query("SET NAMES 'utf8'"); mysql_select_db($db); return $link; }else{ die("連線失敗!"); } } //新增到資料庫 function insert(){ $award_winner = addslashes($_POST['award_winner']); $award_date = addslashes($_POST['award_date']); $award_kind = addslashes($_POST['award_kind']); $award_content = addslashes($_POST['award_content']); $award_enable = addslashes($_POST['award_enable']); $sql = "INSERT INTO `honor`(`award_winner`, `award_date`, `award_kind`, `award_content`, `award_enable`, `post_date`) VALUES ('{$award_winner}' , '{$award_date}' , '{$award_kind}' , '{$award_content}' , '{$award_enable}' , now())"; mysql_query($sql) or die(mysql_error()); } //更新到資料庫 function update($sn=""){ $award_winner = addslashes($_POST['award_winner']); $award_date = addslashes($_POST['award_date']); $award_kind = addslashes($_POST['award_kind']); $award_content = addslashes($_POST['award_content']); $award_enable = addslashes($_POST['award_enable']); $sql = "UPDATE `honor` SET `award_winner` = '{$award_winner}', `award_date` = '{$award_date}', `award_kind` = '{$award_kind}', `award_content` = '{$award_content}', `award_enable` = '{$award_enable}', `post_date`= now() WHERE `sn`= '{$sn}'"; mysql_query($sql) or die(mysql_error()); } //列出所有內容 function list_all(){ $sql = "SELECT * FROM `honor` where `award_enable` = '1' order by `award_date` desc "; $result = mysql_query($sql) or die(mysql_error()); $table_content = ""; while($data = mysql_fetch_assoc($result)){ //將換行轉為<br> $award_content=nl2br($data['award_content']); $table_content .= " <tr> <td>{$data['award_winner']}</td> <td>{$data['award_date']}</td> <td>{$award_content}</td> <td nowrap> <a href='index.php?op=delete&sn={$data['sn']}' class='btn btn-danger btn-mini'>刪除</a> <a href='index.php?op=post_form&sn={$data['sn']}' class='btn btn-warning btn-mini'>修改</a> </td> </tr> "; } $main=" <h1> <img src='img/gold.png'>榮譽榜 <a href='index.php?op=post_form' class='btn btn-info'>發布</a> </h1> <table class='table table-striped table-bordered'> <tr> <th>獲獎者</th> <th>得獎日期</th> <th>事由</th> <th nowrap>功能</th> </tr> $table_content </table> "; return $main; } //發布表單 function post_form($sn=""){ $sql = "SELECT * FROM `honor` where `sn` = '{$sn}'"; $result = mysql_query($sql) or die(mysql_error()); $data = mysql_fetch_assoc($result); $date=empty($sn)?date("Y-m-d"):$data['award_date']; //還原下拉選單預設值 $selected_0 = ($data['award_kind']== "校內") ? "selected" : ""; $selected_1 = ($data['award_kind']== "校外") ? "selected" : ""; //還原單選鈕預設值 $award_enable0 = ($data['award_enable']!= "1") ? "checked" : ""; $award_enable1 = ($data['award_enable']== "1") ? "checked" : ""; $op = empty($sn)? "insert" : "update"; $form=" <h1 class='text-center'>榮譽榜發布</h1> <form action='index.php' method='post' class='form-horizontal'> <div class='well'> <div class='control-group'> <label class='control-label' for='award_winner'>得獎者名稱:</label> <div class='controls'> <input type='text' id='award_winner' name='award_winner' value='{$data['award_winner']}' class='span12' placeholder='請輸入得獎者名稱'> </div> </div> <div class='control-group'> <label class='control-label' for='award_date'>得獎日期:</label> <div class='controls'> <input type='text' id='award_date' name='award_date' value='{$date}' class='span12' placeholder='得獎日期格式:2013-07-09'> </div> </div> <div class='control-group'> <label class='control-label' for='award_kind'>類別:</label> <div class='controls'> <select name='award_kind' id='award_kind' class='span12'> <option value='校內' $selected_0>校內</option> <option value='校外' $selected_1>校外</option> </select> </div> </div> <div class='control-group'> <label class='control-label' for='award_content'>得獎事由:</label> <div class='controls'> <textarea name='award_content' id='award_content' rows='4' class='span12'>{$data['award_content']}</textarea> </div> </div> <div class='control-group'> <label class='control-label' for='award_enable'>是否發布:</label> <div class='controls'> <label class='radio'> <input type='radio' name='award_enable' id='award_enable1' value='1' {$award_enable1}>是,立即發布 </label> <label class='radio'> <input type='radio' name='award_enable' id='award_enable0' value='0' {$award_enable0}>否,暫時隱藏 </label> <input type='hidden' name='op' value='{$op}'> <input type='hidden' name='sn' value='{$sn}'> <a href='index.php' class='btn'>回上頁</a> <input type='submit' value='送出' class='btn btn-primary'> </div> </div> </div> </form> "; return $form; } //刪除 function delete($sn=""){ $sql = "DELETE FROM `honor` WHERE `sn` = '{$sn}'"; mysql_query($sql) or die(mysql_error()); } ?>