題組三的三個前台功能中，院線片清單算是簡單的，主要就是照題意來列出至少六部上映中的院線片再加上分頁功能就可以了；
但是由於素材提供的css樣式和題目的不一樣，所以css的部份，我們會採用自行撰寫來解決，內建的css我們可以先註解掉不使用。
1 | <!--這是預告片動畫的css檔，先註解或刪除不使用--> |
畫面建置
雖然題目素材有提供一個以table為基底的html碼，但是需要一格一格的去撰寫資料非常奇怪，因此我們捨棄素材提供的內容，以div 的區塊元素做為排列的基礎，透過css來完成符合題目要求的畫面呈現
- 在
/front/main.php中建立版面基本的html架構1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24<div class="half">
<h1>院線片清單</h1>
<div class="rb tab" style="width:95%;">
<div class="movies">
<div class="movie">
<div style="width:35%">
<a href='?do=intro&id='>
<img src="./img/" style="width:60px;border:3px solid white">
</a>
</div>
<div style="width:65%">
<div></div>
<div style="font-size:13px;">分級: <img src="" style="width:20px"></div>
<div style="font-size:13px;">上映日期:<?=$movie['ondate'];?></div>
</div>
<div style="width:100%">
<button onclick="location.href='?do=intro&id='">劇情介紹</button>
<button onclick="location.href='?do=order&id='">線上訂票</button>
</div>
</div>
</div>
<div class="ct"></div>
</div>
</div> - 建立css來美化版面及完成題目要求的排列方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<style>
.movies{
display:flex;
flex-wrap:wrap;
}
.movie{
display:flex;
flex-wrap:wrap;
box-sizing: border-box;
padding:2px;
margin:0.5%;
border:1px solid #ccc;
border-radius: 5px;
width:49%;
}
</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
54
55<div class="half">
<h1>院線片清單</h1>
<div class="rb tab" style="width:95%;">
<div class="movies">
<?php
$today=date("Y-m-d");
$ondate=date("Y-m-d",strtotime("-2 days"));
$total=$Movie->count(" where `ondate`>='$ondate' && `ondate` <='$today' && `sh`=1");
$div=4;
$pages=ceil($total/$div);
$now=$_GET['p']??1;
$start=($now-1)*$div;
$movies=$Movie->all(" where `ondate`>='$ondate' && `ondate` <='$today' && `sh`=1 order by rank limit $start,$div");
foreach($movies as $movie){
<div class="movie">
<div style="width:35%">
<a href='?do=intro&id=<?=$movie['id'];?>'>
<img src="./img/<?=$movie['poster'];?>" style="width:60px;border:3px solid white">
</a>
</div>
<div style="width:65%">
<div><?=$movie['name'];?></div>
<div style="font-size:13px;">分級: <img src="./icon/03C0<?=$movie['level'];?>.png" style="width:20px"></div>
<div style="font-size:13px;">上映日期:<?=$movie['ondate'];?></div>
</div>
<div style="width:100%">
<button onclick="location.href='?do=intro&id=<?=$movie['id'];?>'">劇情介紹</button>
<button onclick="location.href='?do=order&id=<?=$movie['id'];?>'">線上訂票</button>
</div>
</div>
<?php
}
?>
</div>
<div class="ct">
<?php
if($now-1>0){
$prev=$now-1;
echo "<a href='?p=$prev'> < </a>";
}
for($i=1 ;$i<=$pages ;$i++){
echo "<a href='?p=$i'> $i </a>";
}
if($now+1<=$pages){
$next=$now+1;
echo "<a href='?p=$next'> > </a>";
}
</div>
</div>
</div>