月光林地的網頁技術部

網頁課程教材

0%

[技能檢定]題組三 步驟18 後台電影票訂單管理

發表於 更新於 歸屬於 ， ，

訂單管理功能也算是相對簡單的功能，如果不想等做完訂票功能才來做後台訂單管理的話，可以參考院線片新增假資料的做法，先利用程式的方式來產生數筆訂單資料，這樣就可以先來完成訂單管理功能了。

畫面構成

  1. 建立 ./back/order.php 檔案，並撰寫訂單管理功能需要的基本版面內容：
    back/order.php

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <h2 class="ct">訂單清單</h2>
    <div class="qdel">
        快速刪除：
        <input type="radio" name="type" value='date' checked>依日期
        <input type="text" name="date" id="date">
        <input type="radio" name="type" value="movie">依電影
        <select name="movie" id="movie">
        </select>
        <button>刪除</button>
    </div>
    <div class="lists">
        <div class="item">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div>
                <button>刪除</button>
            </div>
        </div>
    </div>

  2. 加上css 設定，完成基本的美化和排列

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .lists{
     overflow: auto;
     height:330px;
     width:100%;
    } 
    .item{
     width:100%;
     display:flex;
     align-items: center;
     justify-content: center;
    }
    .header{
     display:flex;
     justify-content: space-between;
    }
    .header div,
    .item div{
     width:calc(100% /7);
    }

  3. 將資料帶入，完成訂單列表功能

    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
    <h2 class="ct">訂單清單</h2>
    <div class="qdel">
        快速刪除：
        <input type="radio" name="type" value='date' checked>依日期
        <input type="text" name="date" id="date">
        <input type="radio" name="type" value="movie">依電影
        <select name="movie" id="movie">
        <?php
        $movies=$Order->q("select `movie` from `orders` Group by `movie`");
        foreach($movies as $movie){
            echo "<option value='{$movie['movie']}'>{$movie['movie']}</option>";
        }
        ?>
        </select>
        <button onclick='qdel()'>刪除</button>
    </div>
    <div class="header">
        <div>訂單編號</div>
        <div>電影名稱</div>
        <div>日期</div>
        <div>場次時間</div>
        <div>訂購數量</div>
        <div>訂購位置</div>
        <div>操作</div>
    </div>
    <div class="lists">
    <?php 
    $orders=$Order->all();
    foreach($orders as $order){
    ?>
        <div class="item">
            <div><?=$order['no'];?></div>
            <div><?=$order['movie'];?></div>
            <div><?=$order['date'];?></div>
            <div><?=$order['session'];?></div>
            <div><?=$order['qt'];?></div>
            <div>
            <?php
                $seats=unserialize($order['seats']);
                foreach($seats as $seat){
                    echo (floor($seat/5)+1) . "排";
                    echo (($seat%5)+1) . "號";
                    echo "<br>";
                }
            ?>
            </div>
            <div>
                <button onclick="del(<?=$order['id'];?>)">刪除</button>
            </div>
        </div>
    <?php  }  ?>
    </div>

前端js功能撰寫

  1. 刪除單筆資料功能可以從 /back/movie.php 中複製刪除電影的程式來使用，後端的刪除程式是可以延用的，只需要帶入不同的table名即可

    1
    2
    3
    4
    5
    function del(id){
        $.post("./api/del.php",{table:'orders',id},()=>{
            location.reload();
        })
    }

  2. 在 /back/order.php 中建立 qDel() js函式，並撰寫相關的取值及確認動作

  3. 建立 /api/qdel.php 檔案，依照前端傳過來的條件刪除資料
    ./back/order.php

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    function qdel(){
        //取得要刪除的類型是日期還是電影
        let type=$("input[name='type']:checked").val()

        //取得要刪除的類型所對應的欄位值
        let val=$("#"+type).val()

        //跳出確認視窗
        let chk=confirm(`你確定要刪除${type}為${val}的所有資料嗎?`)

        //如果使用者按下確定，就執行刪除
        if(chk){

            //將類型與欄位值傳給後端
            $.post("./api/qdel.php",{type,val},()=>{
                
                //重新載入頁面
                location.reload();
            })
        }
    }

後端api功能撰寫

/api/qdel.php

1
2
3
4
5
6
include_once "db.php";

//取得要刪除的類型是日期還是電影，並將其對應的欄位值存入$data陣列
$data[$_POST['type']]=$_POST['val'];
//刪除訂單資料
$Order->del($data);