[技能檢定]題組二 步驟1 切版、建置前後台畫面

1. 開立./css, ./js, ./icon, ./api 等常用目錄以利檔案分類及管理

2. 將素材檔中的.css, .js, 及icon圖檔複製到相應的目錄下

3. 更改版型素材的相關檔名，以符合解題的需要，雖然素材僅提供一個html檔，但根據題意，我們需要有一個後台的功能在，只不過標題區和登入及頁尾區的內容都是一樣的，因此我們會把這些地方的功能完成後，再直接複製成兩個檔案一個做為前台的版型，一個做為後台的版型。

   • 02P01.htm => index.php
   • 02P01.htm => back.php (先不做，之後做完共同的功能後再複製改名)

4. 更改版型素材的相關連結及匯入檔內容

   • 修改 index.php 中 <link> 及 <script> 中的連結路徑，指向正確的位置
   • 修改 ./css/css.css 中的圖片 url ，指向根目錄下的 ../icon 目錄

   index.php
   

   <link href="./css/css.css" rel="stylesheet" type="text/css">
   <script src="./js/jquery-1.9.1.min.js"></script>
   <script src="./js/js.js"></script>

   • 刪除 index.php 中的 <iframe>...</iframe> ，我們會使用 ajax 來取代 <iframe>

5. 開啟 xampp 及 apache 伺服器，使用 localhost 或 127.0.0.1 檢視網頁是否正確顯示，css 的載入是否正確

6. 建立 front及 back 兩個目錄，一個代表前台的相關檔案，一個代表後台的頁面相關檔案。

7. 可以考慮分離出頁首標題及頁尾頁腳的區塊成為 header.php 及 footer.php，不過因為此題的頁首頁尾是寫死的，所以不切出來也沒有關係。

8. 在 index.php 中找到右側主要內容區的區塊。

9. 使用 include 指令來重新組合 index.php 頁面，並加上判斷式來確保要組合的檔案是存在的。

10. 以 get 的方式來傳遞各頁面要組合的元件內容，比如 do=login 表示要看到的是登入頁面，因此在前台的 include 中可以併入 login.php 來呈現。

index.php

<div class="">
<?php
    //取得網址參數
    $do=$_GET['do']??'main';

    //建立頁面檔案所在路徑
    $file="./front/{$do}.php";

    //判斷檔案及變數
    if(file_exists($file)){

        //載入對應的頁面檔案
        include $file;
    }else{

        //如果沒有對應的頁面檔案，則直接載入main.php
        include "./front/main.php";
    }
?>
</div>

11. 在 ./front 及 ./back 目錄中，先建立一個 main.php 來當成預設內容，隨便打幾個字讓頁面不會出現找不到檔案的錯誤就可以了。