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

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

1. 建立 /view/backend/movie.php 檔案，並撰寫頁面基本架構，為避免標籤的css太過混亂，可以使用class來簡化html的內容，css的部份另外撰寫。

   <button onclick="location.href='?do=add_movie'">新增電影</button>
   <hr>
   <!--最外層可以簡單設定個高度及overflow，避免內容太多會拉長版面-->
   <div style="overflow:auto;height:450px">
   <div class="movie">
       <div class="col">
   
       </div>
       <div class="col">
           分級: 
       </div>
       <div class="col">
           <div class="row">
               <div class="info"></div>
               <div class="info"></div>
               <div class="info"></div>
           </div>
           <div class="row">
               <button class="show">顯示</button>
               <button class="sw">往上</button>
               <button class="sw">往下</button>
               <button>編輯電影</button>
               <button class="del">刪除電影</button>
           </div>
           <div class="row">劇情介紹:</div>
       </div>
   </div>
   </div>

2. 可以先把功能完成後再來加上css做美化，撰寫css時，儘量運用一些選擇器的特性，減少class的命名

   <style>
       .movie{
           display:flex;
           align-items: center;
           min-height:100px;
           background-color: white;
           color:black;
           margin:3px 0;
           padding:2px;
       }
       .col:nth-child(1),
       .col:nth-child(2){
           width:15%;
       }
       .col:nth-child(3){
           flex-grow:1;
           /* width:70%; */
       }
       .row:nth-child(1){
           display:flex;
           justify-content: space-between;
       }
   </style>

3. 在類別中建立後台頁面需要的方法及資料。
   /controller/Movie.php

   function backend(){
       $view=['rows'=>$this->all(" order by `rank`")];
       return $this->view("./view/backend/movie.php",$view);
   }

4. 在頁面中以迴圈來呈現資料列表

5. 排序按鈕的功能在預告片海報時已經做過了，所以可以直複製相關的程式碼過來使用

6. 由於此功能我們使用了不少的js控制，為了方便，所以按鈕都會建立一個 class 名稱
   /view/backend/movie.php

   <button onclick="location.href='?do=add_movie'">新增電影</button>
   <hr>
   <div style="overflow:auto;height:450px">
   <?php
   foreach($rows as $idx=> $row){
       //從/view/backend/poster.php中複製過來使用
       $prev=($idx==0)?$row['id']:$rows[$idx-1]['id'];
       $next=($idx==array_key_last($rows))?$row['id']:$rows[$idx+1]['id'];    
   ?>
   <div class="movie">
       <div class="col">
           <img src="./upload/<?=$row['poster'];?>" style="width:80px;height:110px;">
       </div>
       <div class="col">
           分級: <img src="./icon/03C0<?=$row['level'];?>.png" style="width:25px;height:25px">
       </div>
       <div class="col">
           <div class="row">
               <div class="info">片名:<?=$row['name'];?></div>
               <div class="info">片長:<?=$row['length'];?></div>
               <div class="info">上映時間:<?=$row['ondate'];?></div>
           </div>
           <div class="row">
               <!--在按鈕中利用data-id屬性來加入資料方便之後jquery操作--><!--按鈕文字透過判斷式來決定-->
               <button class="show" data-id="<?=$row['id'];?>"><?=($row['sh']==1)?"顯示":"隱藏";?></button>
               
               <!--從/view/backend/poster.php中複製過來使用-->
               <button class="sw" data-sw="<?=$row['id'];?>-<?=$prev;?>">往上</button>
               <button class="sw" data-sw="<?=$row['id'];?>-<?=$next;?>">往下</button>
               
               <!--和新增電影按鈕一樣的直接導向，但要記得加上網址參數id-->
               <button onclick="location.href='?do=edit_movie&id=<?=$row['id'];?>'">編輯電影</button>
               <button class="del" data-id="<?=$row['id'];?>">刪除電影</button>
           </div>
           <div class="row">
               劇情介紹:<?=$row['intro'];?>
           </div>
       </div>
   </div>
   <?php　}　?>
   </div>

7. 使用和題組二按讚功能類似的方式來處理前端切換顯示文字的功能，後端資料的更新則是利用ajax來完成
   /view/backend/movie.php

   $(".show").on("click",function(){
   
       //將按鈕中的id資料傳向後端的show.php
       $.post("./api/show.php",{id:$(this).data('id')},()=>{
   
           //使用按鈕的文字來進行判斷
           switch($(this).text()){
               case "顯示":
                   $(this).text("隱藏")
               break;
               case "隱藏":
                   $(this).text("顯示")
               break;
           }
       })
   })

   /api/show.php

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

8. 複製預告片海報管理的排序js程式碼，只要變更資料表名就可以直接套用原本的後端 /api/sw.php 程式，不用再寫新的後端程式

   $(".sw").on("click",function(){
       //利用split()函式讓id字串切成一個id陣列
       let id=$(this).data('sw').split("-")
   
       //將id陣列傳向後端sw.php，並加上table名
       $.post("./api/sw.php",{table:'movie',id},()=>{
   
           //資料交換完成後重整頁面
           location.reload();
       })
   })