透過 php 的簡單功能將網頁切割成固定與變動項目

第四堂課：使用 PHP 的簡單函式將網頁切割成數個固定與變動項目

所謂的『網站』應該是要有一致風格的項目，至少畫面風格、版面配置都得要有大略相同、相似的模樣才行。如果使用所見即所得的模式來處理，一開始使用複製的方式應該可以建立相當相同的網頁，只是，如果版面風格需要變動時，你得要每個檔案都拿出來重新修改才行。如果只是十幾二十個檔案，那修改的幅度還 OK 啊！如果像鳥哥的網站動不動就幾百個檔案，要修改完備，會要了你的老命～所以，這時透過將網頁『固定』的項目與『變動』的項目獨立出來，放在不同的檔案，以『變動的內容』為主體，去呼叫『固定不變的』檔案，那就能夠將整個網站組合起來。雖然使用框架 (frame) 也能夠達成此目標，不過，鳥哥不是很建議 frame 啦！畢竟我們現在設計的內容需要『瀏覽器看得懂』，不只是人眼看得懂而已。瀏覽器看得懂的話，未來他就能夠將資料帶給其他硬體。而使用 frame 恐怕會讓瀏覽器看不懂啦！

本章重點目標：

由於 header, nav, aside, footer 大多是固定的內容，而 content 才是變動的內容，因此我們將 header, nav, aside 放置於 include/header.php 檔案中，將 footer 放入 include/footer.php 檔案中，並且將 content 的 <div class="content"> 放在 header.php 檔案中，這樣變動的檔案內容可以更精簡，至於 content 的 </div>則可以放置到 footer.php 檔案中喔！也就是說，每次讀取任何一個網頁時，該網頁會這樣讀取：
1. 先到 include/header.php 讀取前面的部分 (包括 <head> 的宣告部分等等)
2. 然後是該網頁自己的內容
3. 最後再讀入 include/footer.php 的檔案內容，以完成全部的網頁資料
在這樣的條件下，每一個新的網頁都不需要 header.php, footer.php 的內容，只需要加入一點點資訊，就是一個完整的網頁。而當你修改了 footer.php 或 header.php 時，系統的所有網頁也都會同步更新顯示新的資料！
由於我們會用到 PHP 的功能，因此需要瞭解幾個重要的 PHP 網頁程式語言的說明：
- 副檔名一定要是 .php 才行！否則我們的瀏覽器並不會知道那是程式語言；
- PHP 的程式碼一定要包含在 <?php xxxxx ?> 當中，其中 xxxx 則是 PHP 所提供的程式語言，包括 include, if() 等等的函數功能呦！
- 最單純的呼叫其他檔案來到本檔案，可以使用 include("filename"); 來處理，注意每一行指令結尾必須是分號 (;) 喔！
修改你的 index.html 讓他變成 index.php，將『固定不變的』 header, nav, aside 搬動到前述的 header.php 檔案中，將 footer 搬動到 footer.php 檔案中，並將會持續變動的資料保存在 index.php 當中，再透過 include 或 require 的方式將這兩個檔案『呼叫到正確的位置』上，這樣，你的 index.php 內容將保持與原本相同喔！最終 index.php 會點像這樣：
```
<?php 
	include ('include/header.php');
?>
xxxxxx
xxxxxx
<?php 
	include ('include/footer.php');
?>
```
在撰寫連結時，你必須要知道所謂的【絕對路徑】與【相對路徑】的檔名，任何時刻，從主機名稱的網址列 (url) 的斜線(/)開始寫起的檔名，就是所謂的絕對路徑。而如果沒有從斜線開始寫的，就是相對路徑。相對路徑的呼叫與呼叫者網頁的位置有關係。常見的特別目錄有底下幾個：
- . 本目錄
- .. 上層目錄
將剛剛完成的 index.php 複製到 class/ 目錄下，且檔名設定為 class04_1.php 的檔案，然後嘗試直接在網址列輸入這個 class04_1.php，然後進行下列的修訂：
- 結果網頁內容是否能夠正常的顯示？如果不能，要如何進行修改？
- 在 class04_1.php 裡面，點選回首頁，能否回到首頁？
- 在 header.php 裡面，將所有的連結都使用絕對路徑 (/~xxxx/xxx....) 的方法來處理一下，這樣能否順利瀏覽？
- 思考一下，如果這個網頁被移動，那麼所有的超連結項目全部都要重新修訂，有沒有很複雜？ (雖然還是只改一個網頁)
任何在 header.php 或 footer.php 當中的超連結項目，請務必使用絕對路徑，亦即由根目錄寫起的路徑！舉例來說，本學期有 4070cxxx 的學生帳號，這個帳號的根目錄就是 /~4070cxxx/ ，你的所有超連結資料均須從這個連結寫起，否則由於不同的檔案放置到不同的目錄中，可能會有父目錄、子目錄的問題，可能會導致某些檔案的錯亂喔！這點特別留意！
```
<?php 
	$wwwroot="/~4070cxxx/";
	include ('include/header.php');
?>
...
	<a href="<?php echo $wwwroot; ?>/your/page.php">連結顯示</a>
```
請將 header.php 裡面，有關絕對路徑的位置，全部調整成上述的模樣 (透過變數來處理的樣式)
將上課的課程連結放置到網站根目錄的 mylink.php 檔案中，使用清單的模式來處理！並做一個名為 class 的子目錄，在此子目錄下建立 myclass_04.php 的檔案，內容為 mylink.php 的內容，只是在標題的部份可加入不同的說明就是了。請將 mylink.php 取代 nav 第一層選單的點選中，至於 myclass_04.php 則加入此項目的第二層選單中。再次去瞧一瞧有沒有正確的顯示，同時去感受一下，什麼叫做『絕對』與『相對』路徑的差異！非常重要的練習！
將所有作業的連結放入 nav 的第一層與第二層選單中，但是需要注意的是，之前某些課程中，包括 style1.css, style2.css, demo.html, demo2.html 等檔案，由於需要呼叫不同的 style 檔案風格，因此需要個別的需要獨立的頁面，不需要跟本周的處理方式結合。這是因為一個是網頁風格檔，一個是呼叫不同的 style 檔，所以需要進行分隔！
如果想要在 <title> 裡面加入不同的名詞時，可以在變動的網頁中最上方，加入類似『 $mytitle = "my title name"; 』的內容，然後修改 header.php 的資料，透過 <?php echo $mytitle ; ?> 來將這個資料取代出來～就能夠有每一頁的獨特顯示資料了！這也能夠展示『變數』對於網頁設計的重要性喔！
以後進行網頁設計時，均須將資料上傳到伺服器後，才能夠確認修改的正確性喔！因為使用了 PHP 呼叫了資料！

本章練習與習題：

讓整體網站風格一致化！可以簡化很多的管理問題！
『固定』的網頁部份，請使用絕對路徑，『變動』的部份則隨意均可！
將上述資料進行完畢，並於首頁加入正確的連結，將結果上傳後，到上傳網站查閱是否正確處理才可以！

第四堂課： 使用 PHP 的簡單函式將網頁切割成數個固定與變動項目

第四堂課：使用 PHP 的簡單函式將網頁切割成數個固定與變動項目