上次的課程中,我已經預告,這次要進入真正寫PHP程式的進度了,讓我們來看看今天的程式碼。
今天一共有12行,非常非常非常基本!請仔細的記憶與思考,記得,最前面有寫行數,那是不包含在程式裡的,是為了標示第幾行用的,當你在撰寫的時候,不要把那1 2 3....也寫進程式裡去嘍:
1 <?
2 $target="settings.php";
3 $cntinfo="<?\n\$DB_SERVER=\"localhost\";\n\$DB_ADMIN=\"$db_admin\";\n\$DB_PWD=\"$db_password\";?>";
4 $fp=fopen($target,"w");
5 if($fp){
6 $length=fwrite($fp,$cntinfo);
7 fclose($fp);
8 echo "<table border=\"1\" BORDERCOLOR=\"blue\"><tr><td>初步設定檔已寫入</td></tr></table>";
9 }else{
10 echo "設定檔寫入失敗,請檢查";
11 }
12 ?>
這就是PHP的程式碼,這個PHP檔案我們將存為「setupdata1.php」,這個檔名有沒有很熟悉?這就是上次我們寫的那個HTML檔案之中的表單部分裡面,一開始寫到的:「<form action="setupdata1.php" method="post" id="setupdata1">」這一行中,表單用「action=」這個指示,呼叫「setupdata1.php」這個檔案來做事。
讓我們來好好看一下這個PHP檔案的開頭〈第1行〉和結尾〈第12行〉這2行,這就是PHP程式的表示,在「<?」和「?>」這兩組符號包裹之中的部分,瀏覽器就會解讀:「啊!這裡是PHP的程式碼!我來仔細看看他要說什麼!」,正規的寫法是以「<?php」做為開頭,不過現在的版本已經可以接受這樣的短寫法,我們學這種簡單且能前後對應的方式就行了。
接著,我們看第2行,「$target="settings.php";」,從這行開始大家就要頭大了,如果你沒有程式語言的經驗,從這裡開始要多留意學了喔!!這一行一開始的「$target」是一個「變數」,「target」是我們取的名稱,在這個名稱前面加一個「$」符號,就成了變數,「$target」的意思就是「這是個名為target的變數」,我們可以想像變數是一個袋子,袋子裡要裝東西,這是一個叫做「target」的袋子,而袋子裡的東西可以換,不過每次要裝一個新的東西進去時,就要把之前裝的東西給拿丟掉再裝新的東西,就好比說把一隻企鵝裝進冰箱要三個步驟,一,打開冰箱,二,把企鵝裝進去,三,關上冰箱。而把長頸鹿裝進冰箱則需要四個步驟,一,打開冰箱,二,把企鵝拿出來,三,把長頸鹿放進去,四,關上冰箱。好冷的笑話,是嗎?很重要的觀念喔!冰箱是同一個,已經裝了企鵝了,當然要再裝長頸鹿,就要先把企鵝拿出來啦!變數也是相同,如果要給同一個變數另一個不一樣的新內容,那前一個內容就會像企鵝一樣,被先拿出來再說啦。
這個叫做target的袋子現在要裝什麼東西呢?就是後面的「settings.php」這一串字,注意了!我們這裡寫的是「$target="settings.php";」,不是「$target=settings.php;」,為什麼呢?因為settings.php雖然我們知道那將會是一個檔案的名稱,但是我們只要那個檔名就好了,而檔名是一個「字串」,當我們要在變數這個袋子裡裝入一個字串,就要把這個字串用「"」前後包起來。
用檔名來講會比較複雜,用數字來說明會比較清楚些,例如我們這裡準備了兩個袋子....兩個變數啦,一個叫做$a,一個叫做$b,我們在$a袋子裡裝入「2」這個「字串」,在$b袋子裡裝入「5」這個「字串」,那我們會寫成:
$a="2";
$b="5";
我們可以想像這兩個袋子裡裝的分別是「2」和「5」兩個生日蛋糕上插的那種數字蠟燭。好,當我們把這兩個袋子放在一起加起來,也就是「$a+$b」時,會發生什麼狀況呢?就像從袋子裡將那兩個蠟燭拿出來放在一起,也就是「25」啦!
如果我們不是要像蠟燭排在一起的方式來表示相加的結果,而是真的要計算2+5這個「值」會是多少,那我們的變數就要寫成:
$a=2;
$b=5;
如此「$a+$b」才會等於「7」喔!這樣有了解嗎?所以,當變數這個袋子要裝字串的時候,記得要在前後加上引號「"」。
這一行最後有個「;」,表示「這一行的敘述我寫完了,下面一行是下一個敘述的新開始了喔!」,這是一開始學寫程式的人最容易忽略的錯誤,記得養成習慣!
第2行解釋完,第3行就簡單理解了,$cntinfo這是第二個我們設定的變數,就好比除了「$target」這個袋子外,我又準備了一個叫「$cntinfo」的袋子,這個「$cntinfo」袋子裡我要裝什麼呢?就是要裝「<?\n\$DB_SERVER=\"localhost\";\n\$DB_ADMIN=\"$db_admin\";\n\$DB_PWD=\"$db_password\";?>";」這一堆字串。
後!這一段好長耶!對啊!就是因為長,所以把它裝在這叫做$cntinfo的袋子裡,再來我們要用到這一串字的時候,只要把袋子整個拿過來用就好了,這就是變數的一個重要功能。
這一串字基本上也含有好幾個變數在裡頭,我待會再回頭解釋這一串文字的意思,你可以先思考看看。
先看第4行,「$fp=fopen($target,"w");」又是一個袋子,這次的袋子叫做「$fp」,只不過這個袋子裡裝的東西不是字串,而是一個「函式」,什麼是函式呢?簡單的說就是PHP的內建功能之一,你可以把函式想像成一個個的工具,當我們要做一些工作的時候,不必辛苦的自己打造工具,只要利用這些既有的工具來完成就可以了,這個叫做$fp的袋子裡就裝著個叫做「fopen( )」的工具,這個fopen( )的工具要做的工作是「開啟一個檔案,並且準備對這檔案的內容進行一些事」,而我們在括弧裡寫上「$target,"w"」,就是告訴這個工具「我們要開啟的檔案名稱是那個裝在$target袋子裡的那個字串,並且用"w"這個附加選項表示我們準備將一些資訊從那個檔案的一開頭位置來寫進去!如果資料夾裡找不到和$target袋子裡裝的字串一樣名字的檔案時,那就新增一個和$target袋子裡裝的字串一樣名字的檔案以後再來進行這個寫入工作準備!」
關於fopen( )函示的用法和參數,可以參考:http://php.net/manual/en/function.fopen.php
看不懂沒關係,知道現在這個用法就可以了,接下來我們還有可能會用到這個函式,並且用不同的參數去進行不同的工作,現在只要知道,fopen( )這個函式是拿來開啟檔案工作用的函式,但是!這裡說的「開啟檔案」和你在現在眼前的這部電腦上面找個檔案點兩下,然後你就「看到那個程式在你眼前被打開了」的情況有點不一樣,用這個函式是直接告訴程式「程式啊,你自己去找到並且打開那個檔案喔,找不到的就自己先建立一個同名的檔案再打開,我待會告訴你打開檔案以後要做的事,然後程式你自己去處理就好了,不必開給我看你是怎麼處理的!OK~?」,所以,你不會「看到」有個檔案被打開來這樣的情形,瞭嗎?(唉....如果現在還是DOS時代.....那可能就比較容易理解了.....當時的人類面對電腦螢幕時,似乎比較有想像力,只有個電腦游標閃啊閃的,也可以想像很多的情境.....)
而$target袋子裡裝的字串叫什麼?前面說了喔!叫做「settings.php」啊!所以基本上這一行也可以寫成「$fp=fopen("settings.php","w");」,注意嘍!當我不是用變數$target而是直接把檔名settings.php寫在括弧裡時,我會在前後加上「"」,變成「"settings.php"」,注意到了沒?用變數來表示的時候就不必加「"」了。這樣是不是更進一步理解變數的用法了呢?
今天先學到這裡,先休息一下,明天繼續把後面幾行解釋完,對第一次接觸PHP的人就解釋函式,我一定瘋了!
最新文章
2010年6月15日 星期二
2010年6月11日 星期五
一日十行-PHP教學3
今天仍然是還在HTML的階段,下一回就可以進入真正的第一支PHP程式了。我們打開昨天的檔案繼續編輯,只有多2行新的原始碼,另外2行則是補充參數的部分,廣義的算起來有4行的新原始碼。
一樣,已經解釋過的部份用藍色,新增的原始碼用淺棕色來表示。
今天的進度如下:
1 <META HTTPEQUIV="Content-Type" CONTENT="text/html;CHARSET=big5">
2 <html>
3 <head>
4 <title>一日十行-PHP教學3</title>
5 </head>
6 <body>
7 <form action="setupdata1.php" method="post" id="setupdata1">
8 <table>
9 <tr><td colspan="2" align="center">寫入設定檔</td></tr>
10 <tr><td>資料庫管理員名稱</td><td><input type="text" name="db_admin" id="db_admin"></td></tr>
11 <tr><td>資料庫管理員密碼</td><td><input type="text" name="db_password" id="db_password"></td></tr>
12 <tr><td colspan="2" align="center"><input type="submit" value="送出"></td></tr>
13 </table>
14 </form>
15 </body>
16 </html>
先解釋新增的第7行和第14行,<form action="setupdata1.php" method="post" id="setupdata1">以及</form>這兩個標籤是一對,記不記得昨天說過,這是一個表單,而表單需要程式來支援才有作用,所以在「form」的後面加一個參數「action="setupdata1.php"」,呼叫支援表單的程式〈action就是「動作」的意思,還蠻容易理解的吧〉,後面的「method」就是「方式」的意思,指的是「資料傳遞的方式」,而這裡寫的是「method="post"」就是「用post的方式傳遞表單內容」,資料傳遞的方式有post和get兩種,這裡我們用的是「post」,而post和get的差異主要是安全性會有點不同,但是有時還是要利用get的方式會比較便利、省資源,其中的差異日後我們再詳談,暫時我們都先用post來進行。所以,這一對標籤就是在告訴瀏覽器:「這兩個標籤所包住的這個表單各欄位是要靠一支叫做『setupdata1.php』的程式來運作〈action="setupdata1.php"〉,而表單各欄位的資料是用post的方式傳遞到目的地去的喔!」
接下來我們看第10和第11行的新增部分「name="db_admin" id="db_admin"」和「name="db_password" id="db_password"」,上面有說到,我們要用另一支叫做「setupdata1.php」的程式來支援這個表單,那一支程式要先接收這個表單裡欄位的內容之後進行處理,再把表單裡的資料送到目的地去,而setupdata1.php這個程式和現在這個表單的各個欄位又不熟,不知道哪個資料串是從哪個欄位傳過來的,所以,為了讓setupdata1.php分辨資料的來源,我們必須給每個欄位即將輸入的內容預設一個代號,也就是「name」了,而後面的「id」則是這個欄位在這個表單之中的名稱,如果我們以後為了要檢查某個欄位是否依照我們規定的輸入規則進行資料填寫時,就要用這個「id」去找那特定的欄位了。
這個觀念有一點容易混淆,明明name是名字的意思,但是為什麼欄位的名稱卻是id?沒關係,這個疑問日後你開始寫程式之後,慢慢你就會淡忘理解的,為了避免一些困擾,我們把name和id都設成一樣就不會有太大的問題了。
進一步說吧,在表單的資料傳遞時,會以name所設的名稱為代號把資料傳出去,例如第10行「name="db_admin"」,想像一下,你在那個欄位裡填的資料庫管理員名稱假設是「IAMGOD」在按下送出鍵時,「IAMGOD」會被一個叫做「db_admin」的盒子包起來後傳遞出去,程式接到了這個「db_admin」的盒子,就帶著它去找某處有個標示著「我要接收db_admin這個包裹!」的目的地,找到以後就把「db_admin」打開,然後把「IAMGOD」拿出來,放到目的地去。
而id的作用則是在資料傳遞之前的事情,一樣用想像的,如果我們付予程式一個任務,就是在傳遞盒子之前,先檢查一下那個盒子裡裝的物品規格合不合規定,而程式裡執行任務的小尖兵就會在盒子傳遞出去之前先跑去表單裡找那個盒子,這時後小尖兵的依循標準就是id這個名稱,如果盒子裡的東西不合規格,就不能以name的包裝傳送出去,並且小尖兵還可能會大叫一聲:「喂!這裡裝的東西不太對勁喔!」,這個概念如果沒有遇到實際的狀況會比較難理解,總之,我們在做每個表單欄位時就給個「name」和「id」會是不錯習慣。
好,今天把這4行都解釋完了,存檔吧,下一回這個檔案會先放著,我們要做的是讓這個表單活起來的程式,也就是真的進入PHP的領域了。下課!
一樣,已經解釋過的部份用藍色,新增的原始碼用淺棕色來表示。
今天的進度如下:
1 <META HTTPEQUIV="Content-Type" CONTENT="text/html;CHARSET=big5">
2 <html>
3 <head>
4 <title>一日十行-PHP教學3</title>
5 </head>
6 <body>
7 <form action="setupdata1.php" method="post" id="setupdata1">
8 <table>
9 <tr><td colspan="2" align="center">寫入設定檔</td></tr>
10 <tr><td>資料庫管理員名稱</td><td><input type="text" name="db_admin" id="db_admin"></td></tr>
11 <tr><td>資料庫管理員密碼</td><td><input type="text" name="db_password" id="db_password"></td></tr>
12 <tr><td colspan="2" align="center"><input type="submit" value="送出"></td></tr>
13 </table>
14 </form>
15 </body>
16 </html>
先解釋新增的第7行和第14行,<form action="setupdata1.php" method="post" id="setupdata1">以及</form>這兩個標籤是一對,記不記得昨天說過,這是一個表單,而表單需要程式來支援才有作用,所以在「form」的後面加一個參數「action="setupdata1.php"」,呼叫支援表單的程式〈action就是「動作」的意思,還蠻容易理解的吧〉,後面的「method」就是「方式」的意思,指的是「資料傳遞的方式」,而這裡寫的是「method="post"」就是「用post的方式傳遞表單內容」,資料傳遞的方式有post和get兩種,這裡我們用的是「post」,而post和get的差異主要是安全性會有點不同,但是有時還是要利用get的方式會比較便利、省資源,其中的差異日後我們再詳談,暫時我們都先用post來進行。所以,這一對標籤就是在告訴瀏覽器:「這兩個標籤所包住的這個表單各欄位是要靠一支叫做『setupdata1.php』的程式來運作〈action="setupdata1.php"〉,而表單各欄位的資料是用post的方式傳遞到目的地去的喔!」
接下來我們看第10和第11行的新增部分「name="db_admin" id="db_admin"」和「name="db_password" id="db_password"」,上面有說到,我們要用另一支叫做「setupdata1.php」的程式來支援這個表單,那一支程式要先接收這個表單裡欄位的內容之後進行處理,再把表單裡的資料送到目的地去,而setupdata1.php這個程式和現在這個表單的各個欄位又不熟,不知道哪個資料串是從哪個欄位傳過來的,所以,為了讓setupdata1.php分辨資料的來源,我們必須給每個欄位即將輸入的內容預設一個代號,也就是「name」了,而後面的「id」則是這個欄位在這個表單之中的名稱,如果我們以後為了要檢查某個欄位是否依照我們規定的輸入規則進行資料填寫時,就要用這個「id」去找那特定的欄位了。
這個觀念有一點容易混淆,明明name是名字的意思,但是為什麼欄位的名稱卻是id?沒關係,這個疑問日後你開始寫程式之後,慢慢你就會
進一步說吧,在表單的資料傳遞時,會以name所設的名稱為代號把資料傳出去,例如第10行「name="db_admin"」,想像一下,你在那個欄位裡填的資料庫管理員名稱假設是「IAMGOD」在按下送出鍵時,「IAMGOD」會被一個叫做「db_admin」的盒子包起來後傳遞出去,程式接到了這個「db_admin」的盒子,就帶著它去找某處有個標示著「我要接收db_admin這個包裹!」的目的地,找到以後就把「db_admin」打開,然後把「IAMGOD」拿出來,放到目的地去。
而id的作用則是在資料傳遞之前的事情,一樣用想像的,如果我們付予程式一個任務,就是在傳遞盒子之前,先檢查一下那個盒子裡裝的物品規格合不合規定,而程式裡執行任務的小尖兵就會在盒子傳遞出去之前先跑去表單裡找那個盒子,這時後小尖兵的依循標準就是id這個名稱,如果盒子裡的東西不合規格,就不能以name的包裝傳送出去,並且小尖兵還可能會大叫一聲:「喂!這裡裝的東西不太對勁喔!」,這個概念如果沒有遇到實際的狀況會比較難理解,總之,我們在做每個表單欄位時就給個「name」和「id」會是不錯習慣。
好,今天把這4行都解釋完了,存檔吧,下一回這個檔案會先放著,我們要做的是讓這個表單活起來的程式,也就是真的進入PHP的領域了。下課!
2010年6月10日 星期四
一日十行-PHP教學2
昨天寫的網頁檔其實還不算是程式,我們要進入PHP的步驟還有幾個階梯要爬,那個網頁檔只是用HTML標籤語法來標示出瀏覽器解讀的內容而已,而今天我們可能還沒辦法那麼快的接觸到PHP的程式語言部分,讓我們用編輯的方式打開昨天的檔案(有鑑於昨天的原始碼因版面的關係會換行在沒有預期換行的地方,今天把每一行加入了行號,這樣也比較好敘述是第幾行,你在學著寫的時候不必把行號部份寫進去,像昨天那樣寫就行了):
1 <META HTTPEQUIV="Content-Type" CONTENT="text/html;CHARSET=big5">
2 <html>
3 <head>
4 <title>一日十行-PHP教學1</title>
5 </head>
6 <body>
7 頁面內容第一行<br>
8 頁面內容第二行<p>
9 </body>
10 </html>
今天我們要加入的內容是以棕色的字體來標示的,我們直接學寫表單,不過,原檔案裡面的文字斷行範例的說明,也就是
.
.
.
7 頁面內容第一行<br>
8 頁面內容第二行<p>
.
.
這2行我們先刪掉,那只是做例子解說用的,今天只有6行,但是要解釋的東西不少,所以今天的原始碼總共會有14行,原始碼如下:
1 <META HTTPEQUIV="Content-Type" CONTENT="text/html;CHARSET=big5">
2 <html>
3 <head>
4 <title>一日十行-PHP教學2</title>
5 </head>
6 <body>
7 <table>
8 <tr><td colspan="2" align="center">寫入設定檔</td></tr>
9 <tr><td>資料庫管理員名稱</td><td><input type="text"></td></tr>
10 <tr><td>資料庫管理員密碼</td><td><input type="text"></td></tr>
11 <tr><td colspan="2" align="center"><input type="submit" value="送出"></td></tr>
12 </table>
13 </body>
14 </html>
藍色的部分我們就不再說明了,我們來說明今天的棕色部分。
棕色第1行(7行)的<table>和棕色最後1行(12行)的</table>是成對的標籤,這個標籤標示了在這一對標籤裡的部分是「表格」的意思,是告訴瀏覽器:「這裡開始到那裡之間有一個表格喔!」
第8行的<tr>和這一行最後面的</tr>這兩個標籤包起來的部份是一「列」的意思,在第9、10、11行的開頭和結尾也都可以看得到,也就是說這個表格有幾列,就會有幾組<tr>和</tr>的標籤,這樣理解乎?
很多人「列」和「欄」分不清楚,那是因為我們中文還有個「行」的概念也可以用在表格上,在面對表格時,我們先忘記「行」吧,表格只有「列」和「欄」,我下面如果提到「行」,就是指要你去看原始碼的「第幾行」,OK?如果你還是搞不太清楚列和欄怎麼分,就打開你的Word,插入一個表格,他就會問你要插入的表格是幾欄、幾列,你不必改預設值插入看看,應該會有一個二列五欄的表格呈現在畫面上,你看了大概就清楚哪個是欄哪個是列了。
....我不放心,看來還是做一下範例好了....下面這個表格就是二列三欄,瞭解哪個是「列」哪個是「欄」了嗎:
剛剛已經說過列要怎麼用標籤標出來,但是一個表格不管大小,都必須有「列」和「欄」的交叉結構才能成立,即使只有一列一欄,也要把那個欄給標示出來,而「一個欄」的標示標籤用的是<td>和</td>這一組標籤標出來的範圍。
先讓我們看第9行,這一列有兩欄,所以用了兩組的<td>和</td>標籤,在標籤之中就是欄的空間,可以放入文字、圖片、表單等要呈現的東西,第10行也是一樣,也就是說,一列二欄的寫法是:<tr><td>第一欄內容</td><td>第二欄內容</td></tr>。如果是一列三欄則是<tr><td>第一欄內容</td><td>第二欄內容</td><td>第三欄內容</td></tr>。這樣瞭解了嗎?
這兩列的原始碼寫法比較沒問題。可是我們回頭看第8行和第11行的原始碼,在;<td>這個標籤裏面還寫了一些其他的參數:「colspan="2" align="center"」在其中,這是什麼意思呢?
colspan="2"是表示這一個欄位和下方〈或上方〉的欄位排在一起時,這一個欄位會跨兩欄的範圍,也就是合併兩欄的欄位,使用這個參數的時候多練習一下,如果合併的欄位數設錯了,表格會看起來怪怪的,例如這個表格只有兩欄,可是你設成了colspan="3",也就是合併了三欄,版面可能就會很詭異了,你可以試試看做一個多一點欄位的表格,然後有的合併兩欄,有的合併三欄甚至四欄來實驗一下。
跨兩欄的情況就像這樣:
有關這個表格,最後說明一下跟在colspan="2"後面的align="center"這個參數,「align」在表格欄位的標籤之中是拿來指定這個欄位裡的文字、圖片、控制按鈕等東西在這個欄位裡的垂直位置,後面設成了「center」就是置中的意思,同理,如果要靠左對齊,就寫成「align="left"」當然,要靠右的話則是「align="right"」了。
表格的部分目前已經說完了,以後還會加入其他的參數,例如表格的邊線、顏色、底色等等,一樣,秉持著一日十行系列的精神,遇到時再來解釋。
接下來要講的是第9行和第10行的「<input type="text">」和第11行的「<input type="submit" value="送出">」這三個標籤。
這三個標籤叫做「表單標籤」,表單標籤必須靠程式的配合才會有作用,今天我們還沒講到程式部分,只是先做這個面板出來,晚一點我們會講到如何呼叫出讓這些表單標籤發揮作用的程式,先了解怎麼做表單。先來看前面兩個「<input type="text">」標籤,表單是用來蒐集資訊用的東西,如果要讓人家輸入文字,就用「input type="text"」這個標籤來做一個文字輸入框,後面一定得跟些參數的,但是我們明天再說,今天先學怎麼用表單標籤來做文字輸入框和下面要教的提交按鈕。
這就是可以輸入文字的文字輸入框:
第11行有沒有看到那個標籤也是一樣為「input type」開頭?這也是表單標籤,這一行裡寫的是「input type="submit"」,是用來製作提交表單各欄位輸入內容的「按鈕」〈比對一下雙引號裡的,做文字輸入框用的是「text」,而這裡是做按鈕用的「submit」,看出來不一樣了吧?!〉,在「input type="submit"」後頭會跟一個參數「value="送出"」,這是你要按鈕上面險是什麼字,例如你不是想要做一個 這樣的按鈕,而是想做一個 這樣的按鈕,那你就寫成<input type="submit" value="沒錯我已經完全寫好了!">即可。
今天的課程到此,雖然只有多6行,說明卻比昨天還多,仔細讀,多出來的部分請不要偷懶用複製、貼上的方式加到昨天的檔案裡,耐心一點一個字一個字打吧!這樣你如果出錯了,才會花心思去想哪裡有問題,也才真正學得起來。一樣,檔案寫好以後存檔,今天就按直接存檔就可以了,和昨天一樣打開來看看今日的成果如何,似乎看起來稍微鳥鳥的,按了送出按鈕也沒反應〈當然!〉,沒關係,慢慢的我們把它做起來就不鳥了。
下課!
1 <META HTTPEQUIV="Content-Type" CONTENT="text/html;CHARSET=big5">
2 <html>
3 <head>
4 <title>一日十行-PHP教學1</title>
5 </head>
6 <body>
7 頁面內容第一行<br>
8 頁面內容第二行<p>
9 </body>
10 </html>
今天我們要加入的內容是以棕色的字體來標示的,我們直接學寫表單,不過,原檔案裡面的文字斷行範例的說明,也就是
.
.
.
7 頁面內容第一行<br>
8 頁面內容第二行<p>
.
.
這2行我們先刪掉,那只是做例子解說用的,今天只有6行,但是要解釋的東西不少,所以今天的原始碼總共會有14行,原始碼如下:
1 <META HTTPEQUIV="Content-Type" CONTENT="text/html;CHARSET=big5">
2 <html>
3 <head>
4 <title>一日十行-PHP教學2</title>
5 </head>
6 <body>
7 <table>
8 <tr><td colspan="2" align="center">寫入設定檔</td></tr>
9 <tr><td>資料庫管理員名稱</td><td><input type="text"></td></tr>
10 <tr><td>資料庫管理員密碼</td><td><input type="text"></td></tr>
11 <tr><td colspan="2" align="center"><input type="submit" value="送出"></td></tr>
12 </table>
13 </body>
14 </html>
藍色的部分我們就不再說明了,我們來說明今天的棕色部分。
棕色第1行(7行)的<table>和棕色最後1行(12行)的</table>是成對的標籤,這個標籤標示了在這一對標籤裡的部分是「表格」的意思,是告訴瀏覽器:「這裡開始到那裡之間有一個表格喔!」
第8行的<tr>和這一行最後面的</tr>這兩個標籤包起來的部份是一「列」的意思,在第9、10、11行的開頭和結尾也都可以看得到,也就是說這個表格有幾列,就會有幾組<tr>和</tr>的標籤,這樣理解乎?
很多人「列」和「欄」分不清楚,那是因為我們中文還有個「行」的概念也可以用在表格上,在面對表格時,我們先忘記「行」吧,表格只有「列」和「欄」,我下面如果提到「行」,就是指要你去看原始碼的「第幾行」,OK?如果你還是搞不太清楚列和欄怎麼分,就打開你的Word,插入一個表格,他就會問你要插入的表格是幾欄、幾列,你不必改預設值插入看看,應該會有一個二列五欄的表格呈現在畫面上,你看了大概就清楚哪個是欄哪個是列了。
....我不放心,看來還是做一下範例好了....下面這個表格就是二列三欄,瞭解哪個是「列」哪個是「欄」了嗎:
| 第一列第一欄 | 第一列第二欄 | 第一列第三欄 |
| 第二列第一欄 | 第二列第二欄 | 第二列第三欄 |
剛剛已經說過列要怎麼用標籤標出來,但是一個表格不管大小,都必須有「列」和「欄」的交叉結構才能成立,即使只有一列一欄,也要把那個欄給標示出來,而「一個欄」的標示標籤用的是<td>和</td>這一組標籤標出來的範圍。
先讓我們看第9行,這一列有兩欄,所以用了兩組的<td>和</td>標籤,在標籤之中就是欄的空間,可以放入文字、圖片、表單等要呈現的東西,第10行也是一樣,也就是說,一列二欄的寫法是:<tr><td>第一欄內容</td><td>第二欄內容</td></tr>。如果是一列三欄則是<tr><td>第一欄內容</td><td>第二欄內容</td><td>第三欄內容</td></tr>。這樣瞭解了嗎?
這兩列的原始碼寫法比較沒問題。可是我們回頭看第8行和第11行的原始碼,在;<td>這個標籤裏面還寫了一些其他的參數:「colspan="2" align="center"」在其中,這是什麼意思呢?
colspan="2"是表示這一個欄位和下方〈或上方〉的欄位排在一起時,這一個欄位會跨兩欄的範圍,也就是合併兩欄的欄位,使用這個參數的時候多練習一下,如果合併的欄位數設錯了,表格會看起來怪怪的,例如這個表格只有兩欄,可是你設成了colspan="3",也就是合併了三欄,版面可能就會很詭異了,你可以試試看做一個多一點欄位的表格,然後有的合併兩欄,有的合併三欄甚至四欄來實驗一下。
跨兩欄的情況就像這樣:
| 第一列的一欄跨兩欄 | |
| 第二列第一欄 | 第二列第二欄 |
有關這個表格,最後說明一下跟在colspan="2"後面的align="center"這個參數,「align」在表格欄位的標籤之中是拿來指定這個欄位裡的文字、圖片、控制按鈕等東西在這個欄位裡的垂直位置,後面設成了「center」就是置中的意思,同理,如果要靠左對齊,就寫成「align="left"」當然,要靠右的話則是「align="right"」了。
表格的部分目前已經說完了,以後還會加入其他的參數,例如表格的邊線、顏色、底色等等,一樣,秉持著一日十行系列的精神,遇到時再來解釋。
接下來要講的是第9行和第10行的「<input type="text">」和第11行的「<input type="submit" value="送出">」這三個標籤。
這三個標籤叫做「表單標籤」,表單標籤必須靠程式的配合才會有作用,今天我們還沒講到程式部分,只是先做這個面板出來,晚一點我們會講到如何呼叫出讓這些表單標籤發揮作用的程式,先了解怎麼做表單。先來看前面兩個「<input type="text">」標籤,表單是用來蒐集資訊用的東西,如果要讓人家輸入文字,就用「input type="text"」這個標籤來做一個文字輸入框,後面一定得跟些參數的,但是我們明天再說,今天先學怎麼用表單標籤來做文字輸入框和下面要教的提交按鈕。
這就是可以輸入文字的文字輸入框:
第11行有沒有看到那個標籤也是一樣為「input type」開頭?這也是表單標籤,這一行裡寫的是「input type="submit"」,是用來製作提交表單各欄位輸入內容的「按鈕」〈比對一下雙引號裡的,做文字輸入框用的是「text」,而這裡是做按鈕用的「submit」,看出來不一樣了吧?!〉,在「input type="submit"」後頭會跟一個參數「value="送出"」,這是你要按鈕上面險是什麼字,例如你不是想要做一個 這樣的按鈕,而是想做一個 這樣的按鈕,那你就寫成<input type="submit" value="沒錯我已經完全寫好了!">即可。
今天的課程到此,雖然只有多6行,說明卻比昨天還多,仔細讀,多出來的部分請不要偷懶用複製、貼上的方式加到昨天的檔案裡,耐心一點一個字一個字打吧!這樣你如果出錯了,才會花心思去想哪裡有問題,也才真正學得起來。一樣,檔案寫好以後存檔,今天就按直接存檔就可以了,和昨天一樣打開來看看今日的成果如何,似乎看起來稍微鳥鳥的,按了送出按鈕也沒反應〈當然!〉,沒關係,慢慢的我們把它做起來就不鳥了。
下課!
2010年6月9日 星期三
一日十行-PHP教學1
你把APM安裝好之後,應該沒有忘記MySQL資料庫的管理員名稱和密碼吧?很好,要記得,一定要記得!!因為之後我們會常使用這個名稱和密碼(可能明天的進度就會用到了)。
<META HTTPEQUIV="Content-Type" CONTENT="text/html;CHARSET=big5">
<html>
<head>
<title>一日十行-PHP教學1</title>
</head>
<body>
頁面內容第一行<br>
頁面內容第二行<p>
</body>
</html>
今天就這10行
第1行是在告訴瀏覽器一些資訊,包括頁面內容,編碼方式...等,這行先背起來,以後我們可能會改變部份的內容或多寫幾行類似的標籤,尤其是CHARSET=big5這一個地方,現在我們越來越多使用CHARSET=utf-8的編碼了,這要和資料庫的編碼方式相配合,如果你的資料庫編碼選擇是utf-8的話,這裡請也寫成CHARSET=utf-8。基本上這一行大多會寫在<html>的下一行,不過沒關係,寫這裡也可以,今天把這一行寫這裡的原因就是因為這一行是單行的,不必成對,如果寫在<html>下面的話比較難解釋成對標籤的觀念,所以放在也可以的地方說明。
接下來,注意一下第2行和最後1行(也就是第10行),有沒有看到一個是<html>,一個是</html>,這就是成對的標籤,這對標籤是在標示「這兩個標籤裡面的東西就是HTML網頁嘍,瀏覽器請準備好翻譯工作!」,所以,背起來。
第3行的<head>和第5行的</head>是一對,看英文也知道,是「頭」的意思,我們的瀏覽器看網頁的部份叫做「身體」,在身體上面就是「頭」了,頭裡面裝的是腦,可以想很多事情,今天我們先不管腦裡想什麼,把臉寫出來就好,臉的地方就是第4行的<title>和</title>這一對標籤包起來的東西,這個呈現就是瀏覽器最上面一行,像你現在看的這一頁,瀏覽器最上面那一條(就是你要關或縮小這個視窗的那個x或-按鈕那一行上面的字)寫的是「從頭開始學」。你想在那裡呈現什麼字就打什麼字,不是很了沒關係,待會我們做完今天的進度,你修改這對標籤裡的字後存檔,再看看瀏覽器會有什麼改變就會明白了。
剛剛說到頁面的身體部份,標籤真的就叫身體,也就是第6行和第9行的<body>和</body>這對標籤裡所包裹的部份,也就是頁面內容的呈現部份,這個標籤,背起來。
OK,基本上今天想教的就只有這樣而已,第7和第8行其實是為了湊一日十行寫的,順便說明一下,網頁裡的編輯都是要靠標籤去標明呈現狀況的,包含字體的大小、顏色還有在哪裡斷行等等,今天教兩個斷行的標籤,這兩個標籤可以單獨用,不必成對的包,只要放在你想斷行的地方即可,主要有兩個,一個是<br>,一個是<p> ,這兩個標籤的差別在於你在想斷行的地方寫了<br>這個標籤時,就是斷行而已,可是如果你用的是<p>這個標籤,那就會斷行,並且兩行中間還會多插一行的行高空間,先記得這兩個斷行用的標籤就好,以後你可以自己看要用哪一個比較適合你當時的版面編排需求,我們再來會很常利用這兩個標籤,所以不用背,到時候你就會很熟悉,並且知道有什麼不一樣。
現在,今天的10行已經講完,打開你系統內建的「筆記本」程式,也就是天下無敵的Notepad(我假定你就是M$ Windows的使用者),我的要求是,用打字的方式把今天講的內容一個字一個字的Key到筆記本上去,然後按檔案、另存新檔,在存檔類型的地方選擇「所有檔案」,然後檔名打上learn01.html,如果你一開始第一行的地方寫的是<META HTTPEQUIV="Content-Type" CONTENT="text/html;CHARSET=utf-8">而不是<META HTTPEQUIV="Content-Type" CONTENT="text/html;CHARSET=big5">,那你的編碼也要選成UTF-8才行,存檔的資料夾請選擇www資料夾〈就是你安裝伺服器完成之後,放置網頁的根目錄,不太清楚這意思的,表示你昨天沒有依照指示去把伺服器環境安裝好〉,存好以後,你會看到你存檔的地方會有個網頁檔,就是這個檔案了,雙擊這個檔案或是打開瀏覽器,在網址列打上「http://localhost/learn01.html」看看你剛剛寫的網頁檔吧。
今天,就上到這裡,明天開始,我已經教過並且不再解釋的部份會用藍色的字體標示,新增的行數會用棕色一類的顏色標示,今天這個檔案我們會繼續用,你就留著吧,要繼續編輯,則打開筆記本,用開啟舊檔,到這個檔案位置的資料夾中,選擇「所有檔案」的模式就可以看到這個檔案來開啟了(或是你臭屁,說可以在檔案上按右鍵,選擇用Notepad來開啟這個檔案也行,廢話!)。
下課。
我們昨天說到,PHP是和HTML標籤語法配合的一種程式語言,所以,當然我們要對HTML有點認識,如果你完全不會HTML那也沒關係,HTML語法的學習是累積式的,我們遇到要用什麼再來學什麼就好了,只要記得,絕大多數的HTML標籤語法是成對的,像是括號的感覺,哪一段文字或物件要在瀏覽器中的網頁頁面中呈現什麼效果,我們就在那之前和之後把它括起來,被括起來的部份就會隨著標籤的指示內容去呈現,這樣理解就可以了,當然,也有不是成對的(其實應該也算是,只不過可以單獨用一個也行),我們遇到了再說。(遇到了再說是我們一日十行的教學方法,不然一日十行怎麼學咧,對吧!不過每天的十行都要把用法或內容記起來,一日十行也不願意記憶的話,那.....你就不用學了!)
今天我們就把最最最基礎的HTML標籤學起來,這個部份要背,只有十行,而且幾乎你寫HTML一定會用到,放心,我會解釋。
先看一下原始碼:
<META HTTPEQUIV="Content-Type" CONTENT="text/html;CHARSET=big5">
<html>
<head>
<title>一日十行-PHP教學1</title>
</head>
<body>
頁面內容第一行<br>
頁面內容第二行<p>
</body>
</html>
今天就這10行
第1行是在告訴瀏覽器一些資訊,包括頁面內容,編碼方式...等,這行先背起來,以後我們可能會改變部份的內容或多寫幾行類似的標籤,尤其是CHARSET=big5這一個地方,現在我們越來越多使用CHARSET=utf-8的編碼了,這要和資料庫的編碼方式相配合,如果你的資料庫編碼選擇是utf-8的話,這裡請也寫成CHARSET=utf-8。基本上這一行大多會寫在<html>的下一行,不過沒關係,寫這裡也可以,今天把這一行寫這裡的原因就是因為這一行是單行的,不必成對,如果寫在<html>下面的話比較難解釋成對標籤的觀念,所以放在也可以的地方說明。
接下來,注意一下第2行和最後1行(也就是第10行),有沒有看到一個是<html>,一個是</html>,這就是成對的標籤,這對標籤是在標示「這兩個標籤裡面的東西就是HTML網頁嘍,瀏覽器請準備好翻譯工作!」,所以,背起來。
第3行的<head>和第5行的</head>是一對,看英文也知道,是「頭」的意思,我們的瀏覽器看網頁的部份叫做「身體」,在身體上面就是「頭」了,頭裡面裝的是腦,可以想很多事情,今天我們先不管腦裡想什麼,把臉寫出來就好,臉的地方就是第4行的<title>和</title>這一對標籤包起來的東西,這個呈現就是瀏覽器最上面一行,像你現在看的這一頁,瀏覽器最上面那一條(就是你要關或縮小這個視窗的那個x或-按鈕那一行上面的字)寫的是「從頭開始學」。你想在那裡呈現什麼字就打什麼字,不是很了沒關係,待會我們做完今天的進度,你修改這對標籤裡的字後存檔,再看看瀏覽器會有什麼改變就會明白了。
剛剛說到頁面的身體部份,標籤真的就叫身體,也就是第6行和第9行的<body>和</body>這對標籤裡所包裹的部份,也就是頁面內容的呈現部份,這個標籤,背起來。
OK,基本上今天想教的就只有這樣而已,第7和第8行其實是為了湊一日十行寫的,順便說明一下,網頁裡的編輯都是要靠標籤去標明呈現狀況的,包含字體的大小、顏色還有在哪裡斷行等等,今天教兩個斷行的標籤,這兩個標籤可以單獨用,不必成對的包,只要放在你想斷行的地方即可,主要有兩個,一個是<br>,一個是<p> ,這兩個標籤的差別在於你在想斷行的地方寫了<br>這個標籤時,就是斷行而已,可是如果你用的是<p>這個標籤,那就會斷行,並且兩行中間還會多插一行的行高空間,先記得這兩個斷行用的標籤就好,以後你可以自己看要用哪一個比較適合你當時的版面編排需求,我們再來會很常利用這兩個標籤,所以不用背,到時候你就會很熟悉,並且知道有什麼不一樣。
現在,今天的10行已經講完,打開你系統內建的「筆記本」程式,也就是天下無敵的Notepad(我假定你就是M$ Windows的使用者),我的要求是,用打字的方式把今天講的內容一個字一個字的Key到筆記本上去,然後按檔案、另存新檔,在存檔類型的地方選擇「所有檔案」,然後檔名打上learn01.html,如果你一開始第一行的地方寫的是<META HTTPEQUIV="Content-Type" CONTENT="text/html;CHARSET=utf-8">而不是<META HTTPEQUIV="Content-Type" CONTENT="text/html;CHARSET=big5">,那你的編碼也要選成UTF-8才行,存檔的資料夾請選擇www資料夾〈就是你安裝伺服器完成之後,放置網頁的根目錄,不太清楚這意思的,表示你昨天沒有依照指示去把伺服器環境安裝好〉,存好以後,你會看到你存檔的地方會有個網頁檔,就是這個檔案了,雙擊這個檔案或是打開瀏覽器,在網址列打上「http://localhost/learn01.html」看看你剛剛寫的網頁檔吧。
今天,就上到這裡,明天開始,我已經教過並且不再解釋的部份會用藍色的字體標示,新增的行數會用棕色一類的顏色標示,今天這個檔案我們會繼續用,你就留著吧,要繼續編輯,則打開筆記本,用開啟舊檔,到這個檔案位置的資料夾中,選擇「所有檔案」的模式就可以看到這個檔案來開啟了(或是你臭屁,說可以在檔案上按右鍵,選擇用Notepad來開啟這個檔案也行,廢話!)。
下課。
2010年6月8日 星期二
一日十行-PHP教學0
沒錯,是一日十行,不是一目十行,因為從今天起,我打算來寫PHP的教學文章,對象是已經大概知道PHP是什麼東西(不必很懂沒關係,只要知道PHP是與HTML配合,拿來寫互動式網頁的一種語言,並且可以和資料庫連結,透過網頁的表單頁面把資料寫入資料庫或讀出資料庫的資料呈現在網頁上,這樣就夠了),想學又不知道該從何入手的朋友們。
教學的方式是一天學個十行左右的程式碼,當然,這是理想,有時候十行左右的程式碼不夠完成一個功能時,大概會多個幾行,或是當天本大爺因身體不適、小孩吵鬧、心情欠佳、公出辦事或純粹偷懶等因素,說不定就停擺一下,而星期假日則是休假的機會比較大,屆時請各位也跟著本大爺一起休息一下吧。
這個教學系列我不會從一般的「Hello, World!」這種程式教學123開始,而是一開始就要教如何利用PHP程式來連結資料庫並建立資料表開始,我也不知道這樣的教法會不會成功的讓你學會PHP這種程式語法,但是就讓我們試試看吧!遇到不會的地方請不用客氣,利用這裡的回應功能問我,我想辦法給你回答。
可是話說在前頭,本系列的基本準備工作就不在這次教學文章的範圍之中了,請到書局去買一本有關如何用Xoops架站的書籍,越是標榜著「快速」、「馬上」的那種越好,不要買太厚太貴的,因為那種書的內容你看到一半的時候,大概後半本就不必再讀,因為基本上後半本的內容你大概已經會了或在沒有PHP基礎的情況下根本看不太懂,我要你從那種書中學的部份只有前面可能不到五分之一,有關如何安裝具備PHP(的語法翻譯功能)和MySQL(資料庫引擎)功能(叫做Apache的)網站伺服器部份《前面三個括弧裡的文字是要給你連著讀的,不是前面英文字的註解》,請仔細的研讀,內容並不多,也不難,甚至不必完全理解為什麼,只要按照書中的步驟,把稱之為APM的伺服器套件安裝好就可以了。當然你也可以物盡其用,依照書中指示,把Xoops給架起來,這一整套的架站程式未來也可以當作是你在寫PHP程式時很不錯的參考。有了個可以運行PHP和MySQL的環境,我們利用起來就方便了。
所以說,如果你還沒有把這個環境建立起來,那就不要繼續往下讀了,先聽話,把伺服器安裝好以後再說,乖喔!今天的課程就到這裡,記得,不要買很厚重又貴兮兮的那種,買便宜、圖又多的那種就好了!
如果!如果!我是說如果!如果你真的那麼懶,又那麼省,沒關係,本大爺很久以前曾經寫過一份講義和打包了一份所謂的APM,不建議你在沒有老師講解的情況下自己安裝,因為講義之中幾乎沒有提到相關原理的部份,而且打包起來的程式版本其實很舊了,如果你真的、真的、真的不想去買本書來用,那我也只好勉為其難的告訴你那份雖然基本上架構相同但是版本已經有點過期的講義和程式檔案下載的位置:
過時的網站伺服器架設講義
版本頗舊的網站伺服器APM程式包
等你架設好之後,我們就可以進入第二天真正「一日十行」的進度了。
好,下課。
教學的方式是一天學個十行左右的程式碼,當然,這是理想,有時候十行左右的程式碼不夠完成一個功能時,大概會多個幾行,或是當天本大爺因身體不適、小孩吵鬧、心情欠佳、公出辦事或純粹偷懶等因素,說不定就停擺一下,而星期假日則是休假的機會比較大,屆時請各位也跟著本大爺一起休息一下吧。
這個教學系列我不會從一般的「Hello, World!」這種程式教學123開始,而是一開始就要教如何利用PHP程式來連結資料庫並建立資料表開始,我也不知道這樣的教法會不會成功的讓你學會PHP這種程式語法,但是就讓我們試試看吧!遇到不會的地方請不用客氣,利用這裡的回應功能問我,我想辦法給你回答。
可是話說在前頭,本系列的基本準備工作就不在這次教學文章的範圍之中了,請到書局去買一本有關如何用Xoops架站的書籍,越是標榜著「快速」、「馬上」的那種越好,不要買太厚太貴的,因為那種書的內容你看到一半的時候,大概後半本就不必再讀,因為基本上後半本的內容你大概已經會了或在沒有PHP基礎的情況下根本看不太懂,我要你從那種書中學的部份只有前面可能不到五分之一,有關如何安裝具備PHP(的語法翻譯功能)和MySQL(資料庫引擎)功能(叫做Apache的)網站伺服器部份《前面三個括弧裡的文字是要給你連著讀的,不是前面英文字的註解》,請仔細的研讀,內容並不多,也不難,甚至不必完全理解為什麼,只要按照書中的步驟,把稱之為APM的伺服器套件安裝好就可以了。當然你也可以物盡其用,依照書中指示,把Xoops給架起來,這一整套的架站程式未來也可以當作是你在寫PHP程式時很不錯的參考。有了個可以運行PHP和MySQL的環境,我們利用起來就方便了。
所以說,如果你還沒有把這個環境建立起來,那就不要繼續往下讀了,先聽話,把伺服器安裝好以後再說,乖喔!今天的課程就到這裡,記得,不要買很厚重又貴兮兮的那種,買便宜、圖又多的那種就好了!
如果!如果!我是說如果!如果你真的那麼懶,又那麼省,沒關係,本大爺很久以前曾經寫過一份講義和打包了一份所謂的APM,不建議你在沒有老師講解的情況下自己安裝,因為講義之中幾乎沒有提到相關原理的部份,而且打包起來的程式版本其實很舊了,如果你真的、真的、真的不想去買本書來用,那我也只好勉為其難的告訴你那份雖然基本上架構相同但是版本已經有點過期的講義和程式檔案下載的位置:
等你架設好之後,我們就可以進入第二天真正「一日十行」的進度了。
好,下課。
訂閱:
文章 (Atom)