月光林地的網頁技術部

網頁課程教材

0%

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

發表於 更新於 歸屬於 ， ，

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

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

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

預告片資料列表

  1. 在頁面中撰寫資料列表程式
    /back/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
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    <style>
        .item{
            display: flex;
            padding:3px;
            margin:3px;
            justify-content:space-between;
            align-items: center;
            background-color: white;
        }
        .item div{
            width:24.5%;
            margin:0 0.25%;
            text-align:center;
        }
    </style>
    <div>
    <h3 class='ct'>預告片清單</h3>
    <!--獨立一個區塊使用flex來放置欄位名稱-->
    <div style="display:flex;justify-content:space-between">
        <div class="ct" style="width:24.5%;margin:0 0.25%">預告片海報</div>
        <div class="ct" style="width:24.5%;margin:0 0.25%">預告片片名</div>
        <div class="ct" style="width:24.5%;margin:0 0.25%">預告片排序</div>
        <div class="ct" style="width:24.5%;margin:0 0.25%">操作</div>
    </div>
    <!--建立表單用來傳送需要編輯的資料-->
    <form action="./api/edit_poster.php" method="post">
    <!--設定編輯區塊的高度，並設定overflow:auto讓滾軸顯示-->    
    <div style="width: 100%;height: 190px;overflow:auto">
    <?php
    //取得所有的預告片海報資料，同時依照rank欄位進行排序
    $pos=$Poster->all(" order by rank");

    //使用迴圈來列出所有的預告片海報資料
    foreach($pos as $idx => $po){
    ?>
    <div class="item">
        <div>
            <!--顯示預告片海報圖片-->
            <img src="./img/<?=$po['img'];?>" style="width:60px;height:80px">
        </div>
        <div>
            <!--顯示預告片名稱-->
            <input type="text" name="name[]" value="<?=$po['name'];?>">
        </div>
        <div>
            <!--利用data屬性來計算出前一筆和下一筆的id-->
            <input class='btn' type="button" value="往上" 
                data-id="<?=$po['id'];?>" 
                data-sw="<?=($idx!==0)?$pos[$idx-1]['id']:$po['id'];?>">

            <input class='btn' type="button" value="往下" 
                data-id="<?=$po['id'];?>" 
                data-sw="<?=((count($pos)-1)!=$idx)?$pos[$idx+1]['id']:$po['id'];?>">
        </div>
        <div style='color:black'>
            <!--建立一個隱藏欄位id，在後端可用來做為資料比對用-->
            <input type="hidden" name="id[]" value="<?=$po['id'];?>">
            <!-- input:checkbox*2+select>option*3 -->
            <input type="checkbox" name="sh[]" value="<?=$po['id'];?>" <?=($po['sh']==1)?'checked':'';?>>顯示
            <input type="checkbox" name="del[]" value="<?=$po['id'];?>">刪除
            <select name="ani[]" id="">
                <option value="1" <?=($po['ani']==1)?'selected':'';?>>淡入淡出</option>
                <option value="2" <?=($po['ani']==2)?'selected':'';?>>縮收</option>
                <option value="3" <?=($po['ani']==3)?'selected':'';?>>滑入滑出</option>
            </select>
        </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
include_once "db.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['name']=$_POST['name'][$idx];
        $row['ani']=$_POST['ani'][$idx];
        $Poster->save($row);
    }
}

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