月光林地的網頁技術部

網頁課程教材

0%

發表於 更新於 歸屬於 ， ，

依據題目描述，分類網誌不使用資料表也是可以的，但是因為我想節省一直開檔複製貼上的工作，所以我的做法是先把文章都匯入到資料庫，這樣後台的文章管理和前台的分類網誌、最新文章、人氣文章的功能都用得到
。

建立分類網誌畫面

./front/po.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!--建立一個麵包屑區塊，用來顯示當前的文章類別-->
<div class="nav">
    目前位置:首頁 > 分類網誌 > <span class="type">健康新知</span>
</div>
<!--建立分類項目區塊，其中data-type為設定分類編號，和資料表中的type欄位一致-->
        <fieldset class='types'>
    <legend>分類網誌</legend>
<a class='type-item' data-type="1">健康新知</a>
<a class='type-item' data-type="2">菸害防治</a>
<a class='type-item' data-type="3">癌症防治</a>
<a class='type-item' data-type="4">慢性病防治</a>
</fieldset>

<fieldset class='news-list'>
    <legend>文章列表</legend>
    <!--建立一個區塊用來放置文章標題列表-->
    <div class="list-items" style="display:none"></div>
    <!--建立一個區塊用來放置文章內容-->
    <div class="article" ></div>
</fieldset>

建立分類項目點擊置換上方導引文字功能

./front/po.php部份

1
2
3
4
5
6
7
8
9
10
11
12
//註冊class type-item的點擊事件
$(".type-item").on('click',function(){
    //取出點擊的文字並放入導航列中
    $(".type").text($(this).text())

    //點擊同時取得分類項目的代號
    let type=$(this).data('type')
    
    //執行取得分類文章列表函式
    getList(type)

})

建立取得分類項目文章標題列表功能

這裏我們使用ajax來取得分類項目的文章標題

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//先載入type=1的文章列表
getList(1);

//註冊class cat的點擊事件
$(".cat").on("click",function(){

    //取出點擊的文字並放入導航列中
    $("#header").text($(this).text());

    //執行取得分類列表函式
    let type=$(this).data('type')
    getList(type)
})

//取得分類列表函式
function getList(type){
    $.get("./api/get_list.php",{type},(list)=>{
        $(".list-items").html(list)
        $(".article").hide();
        $(".list-items").show();
    })
}

建立取得單一文章函式

1
2
3
4
5
6
7
8
//取得指定文章內容函式
function getNews(id){
    $.get("./api/get_news.php",{id},(news)=>{
        $(".article").html(news)
        $(".article").show();
        $(".list-items").hide();
    })
}

撰寫後端回傳文章標題列表程式

/api/get_list.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
include_once "db.php";

//取得所有指定分類的文章
$rows=$News->all(['type'=>$_GET['type'],'sh'=>1]);

//使用迴圈來印出title文字及link內容
foreach($rows as $row){
    echo "<div>";
    //在點擊title連結時的執行取得文章內容的函式，並傳入文章id
    echo    "<a href='Javascript:getNews({$row['id']})'>";
    echo    $row['title'];
    echo    "</a>";
    echo "</div>";
}

撰寫後端回傳文章程式

/api/get_news.php

1
2
3
4
5
6
7
8
9
10
include_once "db.php";
//取得指定id的文章
$news=$News->find($_GET['id']);

//顯示文章標題
echo "<span style='font-weight:bolder'>".$news['title']."</span>";
echo "<br>";

//利用nl2br()函式把文章的斷行加上<br>
echo nl2br($news['news']);

發表於 更新於 歸屬於 ， ，

主題內容區是以頁籤形式來呈現，在解題時，如果考場有附 DreamWeaver 的話，可以考慮使用 DreamWeaver 的頁籤功能來做就可以了，不用五分鐘可以搞定．
題目並沒有說明頁籤的內容是否要從資料庫來取得，從參考圖來看則感覺是純靜態的頁面，因此我們這裏嘗試使用另一種前端的方式來呈現頁籤功能，以防考場沒有 DreamWeaver。

閱讀全文 »

發表於 更新於 歸屬於 ， ，

題組的密碼尋回功能是以明碼方式在前台顯示出來，實務上千萬不要這麼做，這裏只是在測驗應檢人知道資料庫的應用方式。

建立密碼尋回畫面

./front/forget.php 畫面html碼

1
2
3
4
5
6
7
8
9
10
11
<fieldset>
    <legend>忘記密碼</legend>
    <div>請輸入信箱以查詢密碼</div>
    <div>
        <input type="text" name="email" id="email">
    </div>
    <div id="result"></div>
    <div>
        <button onclick="forget()">
    </div>
</fieldset>

撰寫ajax取回結果函式

/view/front/forgot.php

1
2
3
4
5
function forget(){
    $.get("./api/forget.php",{email:$("#email").val()},(res)=>{
        $("#result").text(res)
    })
}

撰寫後端回傳密碼程式

1
2
3
4
5
6
7
8
9
10
11
12
include_once "db.php";
//根據郵件來取得使用者資料
$user=$User->find(['email'=>$_GET['email']]);

//判斷是否有取得使用者資料
if(empty($user)){
    //回傳查無使用者的狀況
    echo "查無此資料";
}else{
    //回傳使用者密碼
    echo "您的密碼為：".$user['pw'];
}

發表於 更新於 歸屬於 ， ，

這邊其實幾乎算送分了，因為主選單的內容己經在版型檔案中先做好了，連背景圖都設定好了，所以這邊唯一需要做的是把動態文字廣告的字打上去即可，這邊要注意的是動態文字廣告區的右側要留點空間給登入資訊使用。

閱讀全文 »

發表於 更新於 歸屬於 ， ，

這邊我們先來處理網站標題區，這邊比較麻煩的是瀏灠人次不是採總計，而是分日計算然後再總計；雖然題目沒有指示是否要和第一題一樣的機制，但我們在設計上為了避免瀏灠人次一直跳動，所以還是採用 session 來紀錄使用者的進站狀況，關閉瀏灠器再開才會重新計算；

閱讀全文 »

發表於 更新於 歸屬於 ， ，

我們使用到了物件導向來宣告了一個類別DB，這個類別足夠可以處理題組一大多數的功能，為了更好的在解題是可以快速的應用到這個類別的功能，因為我們建立一個共用函式檔，將整個題組都會用到的變數及函式都集中放到這個檔案中，再透過include的方式將檔案匯入到最主要的index.php及back.php，由於這兩個檔案會再include各個子頁面，因此相當於所有的頁面都可以使用到這個共用函式檔的變數。

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

建立題組專用共用函式檔

api/db.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
session_start();       //啟用session功能
date_default_timezone_set("Asia/Taipei");   //設定網站的時區為亞洲台北

//簡易的自訂函式
/**
 * 用來顯示陣列內容-除錯時使用
 */
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={your db name}",'root','');
    return $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
}

//宣告各個類別的物件變數
$Total=new DB('total');
$User=new DB('user');
$News=new DB('news');
$Que=new DB('que');
$Log=new DB('log');

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

/index.php

1
2
3
4
5
<?php include_once "db.php";?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

/back.php

1
2
3
4
5
<?php include_once "db.php";?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">