月光林地的網頁技術部

網頁課程教材

0%

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

發表於 更新於 歸屬於 ， ，
  1. 開立./css, ./js, ./upload, ./icon等常用目錄以利檔案分類及管理
  2. 將素材檔中的.css, .js, 及icon圖檔複製到相應的目錄下
  3. 更改版型素材的相關檔名，以符合解題的需要
    • 01P01.html => login.php
    • 01P02.html => index.php
    • 01P03.html => backend.php
    • 01P04.html => news.php
  4. 更改版型素材的相關連結及匯入檔內容
    • 修改 index.php,backend.php 中 <link> 及 <script> 中的連結路徑，指向正確的位置
    • 修改 ./css/css.css 中的圖片 url ，指向根目錄下的 ../icon 目錄
1
2
3
4
5
6
7
8
9
版型檔案 index.php、login.php、backend.php、news.php

    <link href="./Administrator Login_files/css.css" rel="stylesheet" type="text/css">
    <script src="./Administrator Login_files/jquery-1.9.1.min.js"></script>
    <script src="./Administrator Login_files/js.js"></script>
改成
    <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>
1
2
3
4
5
檔案css.css

	background:url(icon/menu.fw.png) center no-repeat;
改成
    background:url(../icon/menu.fw.png) center no-repeat;

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

  2. 建立 view 及 Controller 這兩個目錄，view 用來擺放所有的頁面檔案或模版，Controller用來擺放所有的類別檔案。

  3. 在 view 目錄下建立 front 、 backend 、 modal 三個目錄，一個代表前台的相關檔案，一個代表後台的相關檔案，最後則是用來放置彈出視窗的檔案.

  4. 從index.php及backend.php中分離出中間需要變動的區塊，採用include的方式來動態載入主要的內容區，可以利用f12的開發者工具來檢視要分離的區塊的位置

  5. 前台的 login.php 及 news.php 去除和 index.php 相同的部份，只留下中間區塊即可，並將兩個檔案移到 ./view/front 目錄下

  6. 前台的 index.php 控出的中間區塊成為獨立的 main.php 檔案，並搬移到 ./view/front/ 目錄下

  7. 後台的 backend.php 則挖出中間的區塊成為獨立的元件，並搬移到./view/backend/目錄下，先建立一個檔案名為title.php，之後會成為九個後台功能的基礎版型檔案。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

//index.php 
$do=(!empty($_GET['do']))?$_GET['do']:"main";

$file='./view/front/'.$do.".php";

if(file_exists($file)){

    include $file;

}else{

    include "./view/front/main.php";

}

//admin.php 
$do=(!empty($_GET['do']))?$_GET['do']:"title";

$file='./view/back/'.$do.".php";

if(file_exists($file)){

        include $file;

}else{
       
       include "./view/back/title.php";

}