訂單管理功能也算是相對簡單的功能，如果不想等做完訂票功能才來做後台訂單管理的話，可以參考院線片新增假資料的做法，先利用程式的方式來產生數筆訂單資料，這樣就可以先來完成訂單管理功能了。
畫面構成
- 先在類別中建立後台需要的
backend()方法，並帶入需要的資料
/controller/Order.php1
2
3
4
5
6
7function backend(){
//訂單資料要依據訂單編號由大到小排序
$view=['rows'=>$this->all(' order by `no` desc'),
//利用group by 來找出資料表中有多少電影
'movies'=>$this->q("select `movie` from $this->table GROUP BY `movie`")];
return $this->view("./view/backend/order.php",$view);
} - 建立
./view/backend/order.php檔案，並撰寫訂單管理功能需要的基本版面內容：
back/order.php1
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<h3 class="ct">訂單清單</h3>
<div>
快速刪除:
<input type="radio" name="type" value="date" checked>依日期
<input type="text" name="date" id="">
<input type="radio" name="type" value="movie">依電影
<select name="movie" id=""></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="order-list">
<div class="order">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>
<button class="del">刪除</button>
</div>
</div>
<hr>
</div> - 加上css 設定，完成基本的美化和排列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<style>
.header,
.order{
display:flex;
justify-content: space-between;
align-items: center;
}
.header div{
width:calc(100% / 7);
background-color: #aaa;
text-align: center;
margin:0 1px;
}
.order div{
width:calc(100% / 7);
text-align: center;
margin:0 1px;
}
.order-list{
overflow:auto;
height:400px;
}
</style> - 將資料帶入，完成訂單列表功能
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<h3 class="ct">訂單清單</h3>
<div>
快速刪除:
<input type="radio" name="type" value="date" checked>依日期
<input type="text" name="date" id="">
<input type="radio" name="type" value="movie">依電影
<select name="movie" id="">
<!--建立訂單資料表中的電影選單-->
<?php
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="order-list">
<?php
foreach($rows as $row){
<div class="order">
<div><?=$row['no'];?></div>
<div><?=$row['movie'];?></div>
<div><?=$row['date'];?></div>
<div><?=$row['session'];?></div>
<div><?=$row['qt'];?></div>
<div><?php
$seats=unserialize($row['seats']);
foreach($seats as $seat){
//透過商數與餘數來計算出座位的排與位置號碼
echo (floor($seat/5)+1)."排".(($seat%5)+1)."號";
echo "<br>";
}
</div>
<div>
<!--在按鈕上建立資料id，方便jquery取用-->
<button class="del" data-id="<?=$row['id'];?>">刪除</button>
</div>
</div>
<hr>
<?php } ?>
</div>
前端js功能撰寫
- 刪除單筆資料功能可以從
/view/backend/movie.php中複製刪除電影的程式來使用，後端的刪除程式是可以延用的，只需要帶入不同的table名即可1
2
3
4
5
6$(".del").on("click",function(){
//記得table改成Order才會刪除訂單資料
$.post("./api/del.php",{table:'Order',id:$(this).data('id')},()=>{
location.reload();
})
}) - 在
/view/backend/order.php中建立qDel()js函式，並撰寫相關的取值及確認動作 - 建立
/api/qdel.php檔案，依照前端傳過來的條件刪除資料
back/order.php1
<button onclick='qDel()'>刪除</button>
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
32function qDel(){
//取得要刪除的類型是日期還是電影
let type=$("input[name='type']:checked").val()
//宣告一個變數來儲存要刪除的資料條件
let target
//根據類型來取得不同的資料目標
switch(type){
case "date":
//取得日期輸入欄位的內容
target=$("input[name='date']").val();
break;
case "movie":
//取得電影下拉選單的內容
target=$("select[name='movie']").val();
break;
}
//建立確認彈出視窗，並取得回傳值
//按下確定=>true ，按下取消=>false
let chk=confirm(`你確定要刪除全部 ${target} 的訂單資料嗎?`)
if(chk){
//如果chk是true,則將類型和資料送到後端
$.post("./api/qdel.php",{type,target},()=>{
//刪除完畢後重整頁面來查看結果
location.reload()
})
}
}
後端api功能撰寫
/api/qdel.php
1 | include_once "../base.php"; |