月光林地的網頁技術部

網頁課程教材

0%

[技能檢定]題組三 步驟10 後台院線片管理-列表、顯示、排序

發表於 更新於 歸屬於 ， ，

院線片的後台功能配分不多，但是刻畫面和做功能滿花時間的，因此在處理這個功能時，要考慮一下解題的策略，安排適合的步驟來進行，才能在有限的時間內完成，避免花太多時在這裏而擔誤了其它功能的製作

院線片列表

  1. 建立 /back/movie.php 檔案，並撰寫院線片列表，為避免標籤的css太過混亂，可以使用class來簡化html的內容，css的部份另外撰寫。
    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
    <style>
    .item div{
        box-sizing: border-box;
        color:black;
    }
    .item{
        background-color: white;
        width:100%;
        display:flex;
        padding:3px;
        box-sizing: border-box;
        margin:3px 0;
    }    
    .item > div:nth-child(1){
        width:15%;
    }
    .item > div:nth-child(2){
        width:12%;
    }
    .item > div:nth-child(3){
        width:73%;
    }
    </style>
    <!--最外層可以簡單設定個高度及overflow，避免內容太多會拉長版面-->
    <div style="width:100%;height:415px;overflow:auto">
    <?php
    $movies=$Movie->all(" order by rank");
    foreach($movies as $idx => $movie){
    ?>

    <div class="item">
        <div>
            <img src="./img/<?=$movie['poster'];?>" style="width:100%">
        </div>
        <div>
            分級:<img src='./icon/03C0<?=$movie['level'];?>.png' style='width:25px'>
        </div>
        <div>
            <div style="display:flex;width:100%">
                <div style="width:33.33%">
                    片名:<?=$movie['name'];?>
                </div>
                <div style="width:33.33%">
                    片長:<?=$movie['length'];?>
                </div>
                <div style="width:33.33%">
                    上映時間:<?=$movie['ondate'];?>
                </div>
            </div>
            <div>
                <button class='show-btn' data-id="<?=$movie['id'];?>"><?=($movie['sh']==1)?'顯示':'隱蔵';?></button>
                <button class='sw-btn'  
                      data-id="<?=$movie['id'];?>" 
                      data-sw="<?=($idx!==0)?$movies[$idx-1]['id']:$movie['id'];?>">往上</button>
                <button class='sw-btn' 
                      data-id="<?=$movie['id'];?>" 
                      data-sw="<?=((count($movies)-1)!=$idx)?$movies[$idx+1]['id']:$movie['id'];?>">往下</button>
                <button class="edit-btn" data-id="<?=$movie['id'];?>">編輯電影</button>
                <button class="del-btn" data-id="<?=$movie['id'];?>">刪除電影</button>
            </div>
            <div>
                劇情介紹:<?=$movie['intro'];?>
            </div>
        </div>
    </div>
    <?php  }  ?>
    </div>

顯示/隱藏按鈕

  1. 使用和題組二按讚功能類似的方式來處理前端切換顯示文字的功能，後端資料的更新則是利用ajax來完成
    /back/movie.php
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    $(".show-btn").on("click",function(){
        //取得按鈕資料的id
        let id=$(this).data('id');
        //將按鈕中的id資料傳向後端的show.php
        $.post("./api/show.php",{id},()=>{
            location.reload()
            //$(this).text(($(this).text()=='顯示')?"隱藏":"顯示");
    /*         switch($(this).text()){
                case "隱藏":
                    $(this).text("顯示")
                break;
                case "顯示":
                    $(this).text("隱藏")
                break;
            } */
        })
    })
  2. 撰寫後端更新顯示狀態程式
    /api/show.php
    1
    2
    3
    4
    5
    6
    include_once "db.php";

    $row=$Movie->find($_POST['id']);
    //利用餘數原理讓顯示值在1及0做切換
    $row['sh']=($row['sh']+1)%2;
    $Movie->save($row);

排序按鈕

  1. 複製預告片海報管理的排序js程式碼，只要變更資料表名就可以直接套用原本的後端 /api/sw.php 程式，不用再寫新的後端程式
    1
    2
    3
    4
    5
    6
    7
    8
    $(".sw-btn").on("click",function(){
        let id=$(this).data('id');
        let sw=$(this).data('sw');
        let table='movie'
        $.post("./api/sw.php",{id,sw,table},()=>{
            location.reload()
        })
    })