月光林地的網頁技術部

網頁課程教材

0%

[技能檢定]題組三 步驟10 後台院線片管理-新增、編輯、刪除

發表於 更新於 歸屬於 ， ，

完成列表功能及部份按鈕功能後，接下來製作新增、編輯、刪除的功能，示意圖中不像預告片那邊有一個確認編輯的按鈕，因此我們可以理解為每部院線片的相關功能操作都是每筆資料獨立的，我們儘可能使用ajax來完成所有按鈕功能的操作，每一次的操作也只針對一筆資料來處理。

新增電影

  1. 建立 /view/backend/add_movie.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
    <h3 class="ct">新增院線片</h3>
    <form action="./api/add_movie.php" method="post" enctype="multipart/form-data">
    <div style="display:flex">
        <div>影片資料</div>
        <div>
            <div>
                <label for="">片名:</label>
                <input type="text" name="name" value="">
            </div>
            <div>
                <label for="">分級:</label>
                <select name="level" value="">
                    <option value="1">普遍級</option>
                    <option value="2">輔導級</option>
                    <option value="3">保護級</option>
                    <option value="4">限制級</option>
                </select>
            </div>
            <div>
                <label for="">片長:</label>
                <input type="text" name="length" value="">
            </div>
            <div>
                <label for="">上映日期:</label>
                <select name="year" value="">
                    <option value="2023">2023</option>
                    <option value="2024">2024</option>
                    <option value="2025">2025</option>
                </select>年
                <select name="month" value="">
                    <!--使用PHP的for迴圈來產生選單內容會比較快一些-->
                    <?php 
                        for($i=1;$i<=12;$i++){
                            echo "<option value='$i'>$i</option>";
                        }
                    ?>
                </select>月
                <select name="day" value="">
                    <!--使用PHP的for迴圈來產生選單內容會比較快一些-->
                    <?php 
                        for($i=1;$i<=31;$i++){
                            echo "<option value='$i'>$i</option>";
                        }
                    ?>
                </select>日
            </div>
            <div>
                <label for="">發行商:</label>
                <input type="text" name="publish" value="">
            </div>
            <div>
                <label for="">導演:</label>
                <input type="text" name="director" value="">
            </div>
            <div>
                <label for="">預告影片:</label>
                <input type="file" name="trailer" value="">
            </div>
            <div>
                <label for="">電影海報:</label>
                <input type="file" name="poster" value="">
            </div>
        </div>
    </div>
    <div style="display:flex">
        <div>劇情簡介</div>
        <div>
            <textarea name="intro" id="" style="width:98%;height:60px"></textarea>
        </div>
    </div>
    <hr>
    <div class="ct">
        <input type="submit" value="新增">
        <input type="reset" value="重置">
    </div>
    </form>
  2. 建立 /api/add_movie.php 檔案，並撰寫新增院線片的後端程式
  3. 要注意有兩個上傳檔案欄位要處理
  4. 日期欄位要整合成一個欄位
    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
    include_once "../base.php";

    if(!empty($_FILES['trailer']['tmp_name'])){
        $_POST['trailer']=$_FILES['trailer']['name'];
        move_uploaded_file($_FILES['trailer']['tmp_name'],"../upload/".$_FILES['trailer']['name']);
    }
    if(!empty($_FILES['poster']['tmp_name'])){
        $_POST['poster']=$_FILES['poster']['name'];
        move_uploaded_file($_FILES['poster']['tmp_name'],"../upload/".$_FILES['poster']['name']);
    }

    //將三個欄位的年月日整併為一個ondate欄位資料
    $_POST['ondate']=join("-",[$_POST['year'],$_POST['month'],$_POST['day']]);

    //刪除原本$_POST中有的年月日欄位
    unset($_POST['year'],$_POST['month'],$_POST['day']);

    //顯示欄位預設為1
    $_POST['sh']=1;

    //利用id欄位最大值加1的方式來建立排序值的預設值
    $_POST['rank']=$Movie->max('id')+1;

    $Movie->save($_POST);

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

編輯電影

  1. 在編輯電影的按鈕中有設定要編輯電影的id，因此在載入編輯電影檔案時可以利用id來取得電影的資料
  2. 建立 /view/backend/edit_movie.php 檔案，並撰寫表單html碼，由於表單欄位和新增電影是一樣的，因此可以直接從新增電影複製過來使用
  3. 將新增電影表單中的id屬性都改為value，並填入對應的電影資料
    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
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    //利用網址帶的id取得電影資料
    $row=$Movie->find($_GET['id']);

    //將年月日資料拆成三個不同的變數
    $year=explode("-",$row['ondate'])[0];
    $month=explode("-",$row['ondate'])[1];
    $day=explode("-",$row['ondate'])[2];

    /**
     * 另一種拆解變數的方式，利用三個函式來完成，只需一行程式
     * 
     * extract(array_combine(['year','month','day'],explode("-",$row['ondate'])));
     * 
     * explode() - 將日期欄位以'-'拆成陣列
     * array_combine() - 將兩個陣列結合成 key-value的陣列
     * extract() - 將key-value的陣列拆成變數
     */
    ?>
    <h3 class="ct">編輯院線片</h3>
    <form action="./api/edit_movie.php" method="post" enctype="multipart/form-data">
    <div style="display:flex">
        <div>影片資料</div>
        <div>
            <div>
                <label for="">片名:</label>
                <input type="text" name="name" value="<?=$row['name'];?>">
            </div>
            <div>
                <label for="">分級:</label>
                <select name="level" value="">
                    <option value="1" <?=($row['level']==1)?'selected':'';?>>普遍級</option>
                    <option value="2" <?=($row['level']==2)?'selected':'';?>>輔導級</option>
                    <option value="3" <?=($row['level']==3)?'selected':'';?>>保護級</option>
                    <option value="4" <?=($row['level']==4)?'selected':'';?>>限制級</option>
                </select>
            </div>
            <div>
                <label for="">片長:</label>
                <input type="text" name="length" value="<?=$row['length'];?>">
            </div>
            <div>
                <label for="">上映日期:</label>
                <select name="year" value="">
                    <!--利用判斷式來決定選項要定位在那一年-->
                    <option value="2023" <?=($year==2023)?'selected':'';?>>2023</option>
                    <option value="2024" <?=($year==2024)?'selected':'';?>>2024</option>
                    <option value="2025" <?=($year==2025)?'selected':'';?>>2025</option>
                </select>年
                <select name="month" value="">
                <!--利用判斷式來決定選項要定位在那一月-->
                <?php 
                    for($i=1;$i<=12;$i++){
                        $selected=($month==$i)?'selected':'';
                        echo "<option value='$i' $selected>$i</option>";
                    }
                ?>
                </select>月
                <select name="day" value="">
                <!--利用判斷式來決定選項要定位在那一天-->
                <?php 
                    for($i=1;$i<=31;$i++){
                        $selected=($day==$i)?'selected':'';
                        echo "<option value='$i' $selected>$i</option>";
                    }
                ?>
                </select>日
            </div>
            <div>
                <label for="">發行商:</label>
                <input type="text" name="publish" value="<?=$row['publish'];?>">
            </div>
            <div>
                <label for="">導演:</label>
                <input type="text" name="director" value="<?=$row['director'];?>">
            </div>
            <div>
                <label for="">預告影片:</label>
                <input type="file" name="trailer" value="<?=$row['trailer'];?>">
            </div>
            <div>
                <label for="">電影海報:</label>
                <input type="file" name="poster" value="<?=$row['poster'];?>">
            </div>
        </div>
    </div>
    <div style="display:flex">
        <div>劇情簡介</div>
        <div>
            <textarea name="intro" id="" style="width:98%;height:60px"><?=$row['intro'];?></textarea>
        </div>
    </div>
    <hr>
    <div class="ct">
        <!--增加一個隱藏欄位id，讓後端知道這是那一筆資料-->
        <input type="hidden" name="id" value="<?=$row['id'];?>">
        <input type="submit" value="編輯">
        <input type="reset" value="重置">
    </div>
    </form>
  4. 建立 /api/edit_movie.php 檔案，並撰寫電影資料更新的相關程式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    include_once "../base.php";

    if(!empty($_FILES['trailer']['tmp_name'])){
        $_POST['trailer']=$_FILES['trailer']['name'];
        move_uploaded_file($_FILES['trailer']['tmp_name'],"../upload/".$_FILES['trailer']['name']);
    }
    if(!empty($_FILES['poster']['tmp_name'])){
        $_POST['poster']=$_FILES['poster']['name'];
        move_uploaded_file($_FILES['poster']['tmp_name'],"../upload/".$_FILES['poster']['name']);
    }

    //將三個欄位的年月日整併為一個ondate欄位資料
    $_POST['ondate']=join("-",[$_POST['year'],$_POST['month'],$_POST['day']]);

    //刪除原本$_POST中有的年月日欄位
    unset($_POST['year'],$_POST['month'],$_POST['day']);

    //將$_POST存回資料表
    $Movie->save($_POST);

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

刪除電影

刪除電影的做法一樣使用ajax的方式來進行，只需要傳遞table名和id給後端就可以了，後端刪除完畢後，前端再重整頁面，就可以看到刪除的結果
/view/backend/movie.php

1
2
3
4
5
$(".del").on("click",function(){
    $.post("./api/del.php",{table:'Movie',id:$(this).data('id')},()=>{
        location.reload()
    })
})

/view/backend/del.php

1
2
3
4
include_once "../base.php";

//使用$$變數來引用物件並直接刪除資料
${$_POST['table']}->del($_POST['id']);