月光林地的網頁技術部

網頁課程教材

0%

發表於 更新於 歸屬於 ， ，

由題組提供的參考圖，原題意是要求可以同時編輯更新多筆資料，因此我們將資料列表及可輸入資料的表單元件都放在同一個 <form> 表單中，這樣當按下送出按鈕時，所有的表單資料都會被送往後端去處理。
我們的設計希望一支api可以儘可能的處理更多的功能，因此我們設計了隱藏欄位來增加各種屬性，提供後端程式做為判斷的依據。

閱讀全文 »

發表於 更新於 歸屬於 ， ，

完成新增資料後，接下來就是要可以在畫面上看到新增資料的結果，我們把這個工作拉回類別中，由類別中的 view() 方法來引入html模版，而畫面中需要的資料會打包成一個陣列後，在引入模版前透過extract()這個函式把陣列中的變數都解封，如此一來就可以直接在html模版中使用這些變數了。

閱讀全文 »

發表於 更新於 歸屬於 ， ，

題組一中除了total和bottom沒有新增功能外，其它的功能都是能新增資料的，因此我們在設計後台儲存時，希望能使用一支程式就可以完成所有資料表的新增資料，所以我們要考慮如何判斷表單過來的資料是那一張資料表，同時有些功能可以上傳圖片，因此也要考慮是否有上傳圖片的情形。

閱讀全文 »

發表於 更新於 歸屬於 ， ，

我們使用到了物件導向來宣告了一個類別DB，這個類別足夠可以處理題組一大多數的功能，但為了可以更好的利用到物件導向的特性，所以我們打算透過繼承來建立各個資料表專屬的子類別，並將各資料表專屬的功能寫在各自的類別中，這樣一來前端頁面需要的邏輯會變少，而各自類別的內容都是專屬的，藉此提高了程式碼的可讀性及簡化之後的維護及除錯工作。

同時我們也把一些好用的小函式集中放在一個檔案中，透過include的方式讓各個頁面都能使用到這些類別及函式。

建立各資料表的繼承類別

DB類別請參考先前關於DB class的解釋:
[技能檢定]網頁乙級檢定-前置作業-程式功能整合測試

在 Controller 目錄下建立以下檔案，原則上是一張資料表對應一個檔案，其中 DB.php 是父類別:

接著在每個類別檔中引入DB.php，並且建立繼承的類別：

Controller/Title.php

1
2
3
4
5
6
7
8
9
include_once "DB.php";

class Title extends DB{

    function __construct()
    {
        parent::__construct('title');
    }
}

Controller/Ad.php

1
2
3
4
5
6
7
8
9
include_once "DB.php";

class Ad extends DB{

    function __construct()
    {
        parent::__construct('ad');
    }
}

Controller/Mvim.php

1
2
3
4
5
6
7
8
9
include_once "DB.php";

class Mvim extends DB{

    function __construct()
    {
        parent::__construct('mvim');
    }
}

Controller/Image.php

1
2
3
4
5
6
7
8
9
include_once "DB.php";

class Image extends DB{

    function __construct()
    {
        parent::__construct('image');
    }
}

Controller/Total.php

1
2
3
4
5
6
7
8
9
include_once "DB.php";

class Total extends DB{

    function __construct()
    {
        parent::__construct('total');
    }
}

Controller/Bottom.php

1
2
3
4
5
6
7
8
9
include_once "DB.php";

class Bottom extends DB{

    function __construct()
    {
        parent::__construct('bottom');
    }
}

Controller/News.php

1
2
3
4
5
6
7
8
9
include_once "DB.php";

class News extends DB{

    function __construct()
    {
        parent::__construct('news');
    }
}

Controller/Admin.php

1
2
3
4
5
6
7
8
9
include_once "DB.php";

class Admin extends DB{

    function __construct()
    {
        parent::__construct('admin');
    }
}

Controller/Menu.php

1
2
3
4
5
6
7
8
9
include_once "DB.php";

class Menu extends DB{

    function __construct()
    {
        parent::__construct('menu');
    }
}

建完各個類別後，為了後續的操作方便，我們將這些類別都引入到一個檔案中，而這個檔案又會分別被 index.php 及 backend.php 引入，相當於整個網站的所有頁面都可以引用到這個檔案的內容。

/base.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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
session_start();       //啟用session功能
date_default_timezone_set("Asia/Taipei");   //設定網站的時區為亞洲台北

//這邊我們可以透過__DIR__或$_SERVER['DOCUMENT_ROOT']來取得當前目錄的絕對路徑
//這是用來避免在不同的目錄下引用base.php時，路徑可能會錯誤的問題
$DIR=__DIR__;
or
$DIR=$_SERVER['DOCUMENT_ROOT'];

//將各個類別引入到這個共用檔中
include_once $DIR . "/Controller/Title.php";
include_once $DIR . "/Controller/Ad.php";
include_once $DIR . "/Controller/Mvim.php";
include_once $DIR . "/Controller/Image.php";
include_once $DIR . "/Controller/Total.php";
include_once $DIR . "/Controller/Bottom.php";
include_once $DIR . "/Controller/News.php";
include_once $DIR . "/Controller/Admin.php";
include_once $DIR . "/Controller/Menu.php";


//簡易的自訂函式
/**
 * 用來顯示陣列內容-除錯時使用
 */
function dd($array){
    echo "<pre>";
    print_r($array);
    echo "</pre>";
}

/**
 * 簡化header('location:')的使用
 * 將請求導向其他檔案或頁面
 */
function to($url){
    header("location:".$url);
}

/**
 * 用來處理較複雜的sql語句，比如子查詢或聯表查詢
 * 預設回傳的資料是2維陣列
 */
function q($sql){
    $pdo=new PDO("mysql:host=localhost;charset=utf8;dbname=db13",'root','');
    return $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
}

//宣告各個類別的物件變數
$Title=new Title;
$Ad=new Ad;
$Mvim=new Mvim;
$Image=new Image;
$Total=new Total;
$Bottom=new Bottom;
$News=new News;
$Admin=new Admin;
$Menu=new Menu;

接著將這個檔案引入到 index.php 及 backend.php 中：

/index.php

1
2
3
4
5
<?php include_once "base.php";?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0040)http://127.0.0.1/test/exercise/collage/? -->
<html xmlns="http://www.w3.org/1999/xhtml">

/backend.php

1
2
3
4
5
<?php include_once "base.php";?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0068)?do=admin&redo=title -->
<html xmlns="http://www.w3.org/1999/xhtml">

發表於 更新於 歸屬於 ， ，

每個題組依狀況不同，在這一步有不同的做法，視自己對題目的熟悉程度來做應變，可以一次把全部資料表建完，也可以視解題的進度來逐步建立或修改資料表。
這裏我們採用的做法是利用phpmyadmin的複製資料表功能，快速的複製五張欄位雷同的資料表（title,ad,mvim,image,news)，
，依據需要再去修改欄位的內容，也可以不用改，五張類似的資料表並不是所有的欄位都會用得上，我們只是取巧來節省建資料表的時間。

閱讀全文 »