月光林地的網頁技術部

網頁課程教材

0%

[技能檢定]題組二 步驟15 建置最新文章列表、分頁及按讚功能

發表於 更新於 歸屬於 ， ，

最新文章區和人氣文章區的功能非常類似，只差在顯示文章內容和排序方式而，所以先做最新文章區，做完後可以直接複製到人氣文章區做修改即可，這邊比較麻煩的地方就在於登入前和登入後的顯示內容及功能會不同，而且同時會影響到三張資料表，因此在製作上要格外小心和細心：

  1. 建立 ./view/front/news.php 檔案

  2. 在 news.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
    <fieldset>
        <legend>目前位置：首頁 > 最新文章區</legend>
        <table>
            <tr>
                <td width="30%">標題</td>
                <td width="40%">內容</td>
                <td></td>
            </tr>
        <?php
        $rows=$News->paginate(5,['sh'=>1]);
        foreach($rows as $row){
        ?>        
            <tr>
                <td width="30%" class='title'><?=$row['title'];?></td>
                <td width="40%" class='content'>
                    <!--建立兩個區塊分別放置部份內容及全部內容-->
                    <div class='short'><?=mb_substr($row['text'],0,25);?>...</div>
                    <!--全部內容預設為不顯示-->
                    <div class="all" style="display:none"><?=$row['text'];?></div>
                </td>
                <td></td>
            </tr>
        <?php  } ?>        
        </table>
        <div><?=$News->links();?></div>
    </fieldset>

  3. 在 news.php 檔案中撰寫控制顯示文章內容的js程式碼

    1
    2
    3
    4
    5
    6
    //同時對class title及content進行點擊事件註冊
    $(".title,.content").on("click",function(){

        //利用dom tree找到class short及all，進行顯示切換
        $(this).parent().find(".short,.all").toggle()
    })

  4. 在類別中建立判斷要顯示按讚文字的方法
    /Controller/Log.php

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function showGoods($news){
        //根據使用者的登入及傳入的文章id來判斷使用者是否點讚過這篇文章
        $chk=$this->count(['user'=>$_SESSION['user'],'news'=>$news]);
        if($chk>0){
            return "收回讚";
        }else{
            return "讚";
        }
    }

  5. 在第三欄中加入根據登入狀態來顯示讚的程式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <td>
        <?php
        if(isset($_SESSION['user'])){
            echo "<a href='#' class='goods' data-id='{$row['id']}'>";
            echo $Log->showGoods($row['id']);
            echo "</a>";
        }
        ?>
    </td>

  6. 撰寫紀錄按讚功能的程式，這邊使用ajax來完成

    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
    $(".goods").on("click",function(){
        let news,type
        //取得點擊文章的id
        news=$(this).data("id")

        //根據點擊的文字來決定動作
        switch($(this).text()){
            case "讚":
                //如果按下的字是"讚"，則替換成"收回讚"
                $(this).text("收回讚");
                //設定動作類型為1
                type=1;

            break;
            case "收回讚":
                //如果按下的字是"收回讚"，則替換成"讚"
                $(this).text("讚")
                //設定動作類型為2
                type=2;
            break;
            }
            //使用ajax的方式將文章id及動作類型傳送到後端去處理
            $.post("./api/goods.php",{news,type})
        })

  7. 撰寫後端按讚紀錄程式
    /api/goods.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
    include_once "../base.php";

    //取得動作類型
    $type=$_POST['type'];

    //將動作type變數從$_POST陣列中移除
    unset($_POST['type']);

    //在$_POST陣列中增加登入的使用者帳號
    $_POST['user']=$_SESSION['user'];

    //根據文章id找到文章資料
    $news=$News->find($_POST['news']);

    //依據動作類型來進行不同的作業
    switch($type){
        case 1: //按讚->新增log
            //增加一筆log紀錄文章id及帳號
            $Log->save($_POST);
            //文章的按讚數加1
            $news['goods']++;
        break;
        case 2:
            //依據文章id及登入帳號刪除按讚紀錄
            $Log->del($_POST);
            //文章按讚數減1
            $news['goods']--;
        break;
        ;
    }

    //更新文章資料
    $News->save($news);

  1. 複製 news.php 為 pop.php 人氣文章的列表、分頁、按讚和最新文章是一樣的