[技能檢定]題組三 步驟12 前台院線片清單製作

題組三的三個前台功能中，院線片清單算是簡單的，主要就是照題意來列出至少六部上映中的院線片再加上分頁功能就可以了；

但是由於素材提供的css樣式和題目的不一樣，所以css的部份，我們會採用自行撰寫來解決，內建的css我們可以先註解掉不使用。

<!--這是預告片動畫的css檔，先註解或刪除不使用-->
<!--<link href="./css/s2.css" rel="stylesheet" type="text/css">-->

資料建置

1. 先在類別中建立院線片前端需要的資料，條件是：
   • 設定為顯示(sh=1)的院線片
   • 在觀看當天(含)前三天內上映的影片(今天，昨天，前天上映的影片)
   • 資料需排序
   • 一頁最多四筆資料
2. 類別還需要建立一個方法可以回傳對應分級代號的中文字
   /controller/Movie.php

   function movies(){
       //取得今天的日期
       $today=date("Y-m-d");
   
       //計算兩天前的日期
       $prevDate=date("Y-m-d",strtotime("-2 days"));
   
       //取得兩天前到今天為止，設為顯示的院線片，並以4筆為一頁的方式回傳
       $rows=$this->paginate(4," where `sh`='1' && 
                           `ondate` between '{$prevDate}' AND '{$today}' order by `rank`");
       
       return $rows;
   }
   
   function level($level){
       //建立字串陣列
       $str=[
           1=>"普遍級",
           2=>"輔導級",
           3=>"保護級",
           4=>"限制級"
       ];
       //根據代入的分級代號來回傳對應的分級字串
       return $str[$level];
   }

畫面建置

雖然題目素材有提供一個以table為基底的html碼，但是需要一格一格的去撰寫資料非常奇怪，因此我們捨棄素材提供的內容，以div 的區塊元素做為排列的基礎，透過css來完成符合題目要求的畫面呈現

1. 在 /view/front/main.php 中建立版面基本的html架構

   <div class="half">
       <h1>院線片清單</h1>
       <div class="rb tab" style="width:95%;">
           <!--院線片區塊-->
           <div class="movies">
           <div class="movie">
               <!--上方海報及電影資訊區塊-->
               <div class="row">
                   <div class="img">
                       <img src="" alt="">
                   </div>
                   <div class="info">
                       <div></div>
                       <div>分級:</div>
                       <div>上映日期:</div>
                   </div>
               </div>
               <!--下方按鈕區塊-->
               <div class="row ct">
                   <button>劇情簡介</button>
                   <button>線上訂票</button>
               </div>
           </div>
           </div>
            <!--分頁連結區塊-->
           <div class="ct"></div>
       </div>
   </div>

2. 建立css來美化版面及完成題目要求的排列方式

   <style>
       .movies *{
           box-sizing: border-box;
       }
       .movies{
           display:flex;
           flex-wrap:wrap;
       }
       .movie{
           width:48%;
           margin:1%;
           border:1px solid white;
           border-radius:5px;
           padding:5px;
       }
       .movie .row{
           display:flex;
       }
       .movie .info div{
           margin:3px 0;
       }
       .movie .info div:nth-child(2),
       .movie .info div:nth-child(3){
           font-size:12px;
       }
   </style>

3. 執行類別中的 movies() 方法來取得這一頁需要的院線片資料，並帶入對應的位置中

   <div class="half">
       <h1>院線片清單</h1>
       <div class="rb tab" style="width:95%;">
       <div class="movies">
       <?php
           $rows=$Movie->movies();
           foreach($rows as $row){
       ?>
           <div class="movie">
               <div class="row">
                   <div class="img">
                       <a href="?do=intro&id=<?=$row['id'];?>">
                           <img src="./upload/<?=$row['poster'];?>" style="width:60px;height:80px;">
                       </a>
                   </div>
                   <div class="info">
                       <div><?=$row['name'];?></div>
                       <div>分級:
                           <img src="./icon/03C0<?=$row['level'];?>.png" style="width:20px;height:20px;">
                           <?=$Movie->level($row['level']);?>
                       </div>
                       <div>上映日期:<?=$row['ondate'];?></div>
                   </div>
               </div>
               <div class="row ct">
                   <button onclick="location.href='?do=intro&id=<?=$row['id'];?>'">劇情簡介</button>
                   <button onclick="location.href='?do=order&id=<?=$row['id'];?>'">線上訂票</button>
               </div>
           </div>
       <?php
           }
       ?>    
       </div>
       <div class="ct"><?=$Movie->links();?></div>
       </div>
   </div>