月光林地的網頁技術部

網頁課程教材

0%

[技能檢定]題組三 步驟9 後台院線片管理-新增

發表於 更新於 歸屬於 ， ，

院線片的新增算是比較花時間的功能，主要是在建立新增表單會比較花時間，這邊要熟練基礎HTML的表單語法。

新增電影

  1. /back/movie.php 建立新增電影按鈕

    1
    <button onclick="location.href='?do=add_movie'">新增電影</button>

  2. 建立 /back/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
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    <style>
        /*使用text-align-last讓第一欄的文字內容可以左右對齊*/
        .form td:nth-child(1){
            text-align-last: justify;
            padding:3px 5px;
        }
    </style>
    <h2 class="ct">新增院線片</h2>
    <form action="./api/save_movie.php" method="post" enctype="multipart/form-data">
    <div style="display:flex;align-items:start">
        <div style="width:15%;">影片資料</div>
        <div style="width:85%;">
            <table class="ts form">
                <tr>
                    <td class="ct" width="20%">片名</td>
                    <td><input type="text" name="name" id=""></td>
                </tr>
                <tr>
                    <td class="ct">分級</td>
                    <td>
                        <select name="level" id="">
                            <option value="1">普遍級</option>
                            <option value="2">輔導級</option>
                            <option value="3">保護級</option>
                            <option value="4">限制級</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="ct">片長</td>
                    <td><input type="text" name="length" id=""></td>
                </tr>
                <tr>
                    <td class="ct">上映日期</td>
                    <td>
                        <select name="year" id="">
                            <option value="2024">2024</option>
                            <option value="2025">2025</option>
                        </select>年
                        <select name="month" id="">
                            <!--使用PHP的for迴圈來產生選單內容會比較快一些-->
                        <?php
                            for($i=1;$i<=12;$i++){
                                echo "<option value='$i'>$i</option>";
                            }
                        ?>
                        </select>月
                        <select name="date" id="">
                            <!--使用PHP的for迴圈來產生選單內容會比較快一些-->
                        <?php
                            for($i=1;$i<=31;$i++){
                                echo "<option value='$i'>$i</option>";
                            }
                        ?>
                        </select>日  

                    </td>
                </tr>
                <tr>
                    <td class="ct">發行商</td>
                    <td><input type="text" name="publish" id=""></td>
                </tr>
                <tr>
                    <td class="ct">導演</td>
                    <td><input type="text" name="director" id=""></td>
                </tr>
                <tr>
                    <td class="ct">預告影片</td>
                    <td><input type="file" name="trailer" id=""></td>
                </tr>
                <tr>
                    <td class="ct">電影海報</td>
                    <td><input type="file" name="poster" id=""></td>
                </tr>
            </table>
        </div>
    </div>
    <div style="display:flex;align-items:start">
        <div style="width:15%;">劇情簡介</div>
        <div style="width:85%;">
            <textarea name="intro"  style="width:99%;height:100px;"></textarea>
        </div>
    </div>
    <div class="ct">
        <input type="submit" value="新增">
        <input type="reset" value="重置">
    </div>
    </form>

  3. 建立 /api/save_movie.php 檔案，並撰寫新增院線片的後端程式

  4. 要注意有兩個上傳檔案欄位要處理

  5. 日期欄位要整合成一個欄位

    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
    include_once 'db.php';

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

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

    //將三個欄位的年月日整併為一個ondate欄位資料
    $_POST['ondate']=$_POST['year']."-".$_POST['month']."-".$_POST['date'];
    //刪除原本$_POST中有的年月日欄位
    unset($_POST['year'],$_POST['month'],$_POST['date']);

    //判斷$_POST中是否有id，有id為編輯，無id為新增
    if(!isset($_POST['id'])){
        //顯示欄位預設為1
        $_POST['sh']=1;
        //利用id欄位最大值加1的方式來建立排序值的預設值
        $_POST['rank']=$Movie->max('id')+1;
    }

    $Movie->save($_POST);
    to("../back.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']);