月光林地的網頁技術部

網頁課程教材

0%

[技能檢定]題組三 步驟6 後台預告片海報管理

發表於 更新於 歸屬於 ， ，

示意圖給的做法是把新增和管理都做在同一個畫面中，我們也採用一樣的畫面配置，但是美化先不考量；

另外，示意圖中並沒有給出轉場動畫的設定方式為何，因此要採用全區設定也可以，我這邊使用的做法是每個海報都可以單獨設定一個轉場動畫。

由於我們已經在資料表中預建資料了，所以可以不用先做新增的功能，我們先依照題目的示意圖來列出所有的預告片海報；要注意的是，由於同一個畫面要同時有列表與新增的功能，因此要分配一下兩個不同功能的高度。

預告片資料列表

  1. 先在類別中建立預告片海報管理的後台方法
    /controller/Poster.php
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function backend(){
        $view=[
            //取後所有的預告片海報資料，同時依照rank欄位進行排序
            "rows"=>$this->all(" order by `rank`"),
        ];

        //利用view()方法載入頁面並帶入頁面需要的資料
        $this->view("./view/backend/poster.php",$view);
    }
  2. 在頁面中撰寫資料列表程式
    /view/backend/poster.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
    <div class="ct">預告片清單</div>
    <!--獨立一個區塊使用flex來放置欄位名稱-->
    <div style="display:flex;justify-content:space-between;text-align:center">
        <div style="width:22%;background:#999">預告片海報</div>
        <div style="width:22%;background:#999">預告片片名</div>
        <div style="width:22%;background:#999">預告片排序</div>
        <div style="width:32%;background:#999">操作</div>
    </div>
    <!--建立表單用來傳送需要編輯的資料-->
    <form action="./api/edit_posters.php" method="post">
    <!--設定編輯區塊的高度，並設定overflow:auto讓滾軸顯示-->
    <div style="overflow:auto;height:250px;">
    <?php
    //使用迴圈來列出所有的預告片海報資料
    foreach($rows as $idx => $row){
        //取得上一筆資料的id，如果是第一筆資料，則上一筆為自己
        $prev=($idx==0)?$row['id']:$rows[$idx-1]['id'];

        //取得下一筆資料的id，如果是最後一筆資料，則下一筆為自己
        $next=($idx==array_key_last($rows))?$row['id']:$rows[$idx+1]['id'];
    ?>
        <!--撰寫部份css來美化資料的呈現-->
    <div style="background:white;margin:1px 0 ;width:100%;display:flex;
                justify-content:space-between;text-align:center;
                padding:5px 0;align-items:center;">
        <div style="width:22%">
            <!--顯示預告片海報圖片-->
            <img src="./upload/<?=$row['img'];?>" style="width:60px;height:80px;">
        </div>
        <div style="width:22%">
            <!--顯示預告片名稱-->
            <input type="text" name="name[]" value="<?=$row['name'];?>">
        </div>
        <div style="width:22%">
            <!--在按鈕資料中填入本身和上下資料的id，做為排序功能的依據-->
            <input type="button" class="sw" data-sw="<?=$row['id'];?>-<?=$prev;?>" value="往上">
            <input type="button" class="sw" data-sw="<?=$row['id'];?>-<?=$next;?>" value="往下">
        </div>
        <div style="width:32%;color:black">
            <input type="checkbox" name="sh[]" value="<?=$row['id'];?>" <?=($row['sh']==1)?'checked':'';?>>顯示
            <input type="checkbox" name="del[]" value="<?=$row['id'];?>">刪除
            <select name="ani[]">
                <option value="1" <?=($row['ani']==1)?"selected":'';?>>淡入淡出</option>
                <option value="2" <?=($row['ani']==2)?"selected":'';?>>縮放</option>
                <option value="3" <?=($row['ani']==3)?"selected":'';?>>滑入滑出</option>
            </select>
            <!--建立一個隱藏欄位id，在後端可用來做為資料比對用-->
            <input type="hidden" name="id[]" value="<?=$row['id'];?>">
        </div>
    </div>
    <?php }  ?>
    </div>
    <div class="ct">
        <input type="submit" value="編輯確定"><input type="reset" value="重置">
    </div>
    </form>

預告片資料編輯

預告片編輯功能的示意圖和題組一的後台很像，因此我們在前一步列表時，已經在表單欄位中以陣列的方式來建立傳送的資料，這裏只要處理後端收到表單後的更新作業就可以了。

/api/edit_poster.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php include_once "../base.php";

foreach($_POST['id'] as $idx =>$id){
    if(isset($_POST['del']) && in_array($id,$_POST['del'])){
        $Poster->del($id);
    }else{
        $row=$Poster->find($id);
        $row['sh']=(isset($_POST['sh']) && in_array($id,$_POST['sh']))?1:0;
        $row['ani']=$_POST['ani'][$idx];
        $row['name']=$_POST['name'][$idx];
        $Poster->save($row);
    }
}

to("../backend.php?do=poster");