-index.php
<?php include_once 'include/header.php' ?>
<?php
define($total, 0);
$conn = mysqli_connect('localhost','root','0115','test');
$query = "select * from books";
$result = mysqli_query($conn, $query);
$total = mysqli_num_rows($result);
// echo $total;
// 한 페이지당 레코드 개수
$list_num = 3;
// 한 블럭당 페이지 수
$page_num = 2;
// 현재 페이지
$page = isset($_GET['page']) ? $_GET['page'] : 1;
// 전체 페이지수 = 전체 레코드 수 / 한 페이지당 레코드 개수
// 전체 데이터가 20개라 하면, 20 / 5 => 4
$total_page = ceil($total / $list_num);
// 전체 블럭수 = 전체 페이지 수 / 블럭당 페이지 수
$total_block = ceil($total_page / $page_num);
// 현재 블럭 번호 = 현재 페이지 번호/ 블럭당 페이지 수
// 1 / 3 1 7 / 3
$now_block = ceil($page / $page_num);
// 블럭 당 시작 페이지 번호 = (해당글의 블럭번호 -1) * 블럭당 페이지수 + 1
$s_pageNum = ($now_block -1 ) * $page_num+1;
// 데이터가 0개인 경우
if($s_pageNum <= 0) {
$s_pageNum = 1;
}
// 블럭 당 마지막 페이지 번호
$e_pageNum = $now_block * $page_num;
// 마지막 페이지 번호가 전체 페이지 수를 넘지 않도록 설정
if($e_pageNum > $total_page) {
$e_pageNum = $total_page;
}
// 시작번호 0, 5, 10, 15 ...
$start = ($page-1) * $list_num;
// 쿼리작성
$sql = "select * from books limit $start, $list_num;";
$result2 = mysqli_query($conn, $sql);
function printList() {
global $result2;
global $total;
while($row = mysqli_fetch_array($result2)){
echo "<tr>
<td>{$row['id']}</td>
<td><a href=\"detail.php?id={$row['id']}\">{$row['제목']}</a></td>
<td>{$row['글쓴이']}</td>
<td>{$row['출판사']}</td>
<td>{$row['가격']}원</td>
<td>{$row['출판일']}</td>
</tr>";
}
}
?>
<div id="spinnerwrap">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<div id="contents_page" class="inner">
<h2>도서목록</h2>
<h3>최신 도서목록입니다. </h3>
<table>
<tr>
<th>아이디</th>
<th>제목</th>
<th>글쓴이</th>
<th>출판사</th>
<th>가격</th>
<th>출판일</th>
</tr>
<?php printList(); ?>
</table>
<p class="pager">
<!-- 이전버튼 -->
<?php
if($page <= 1){ ?>
<a href="index.php?page=1">이전</a>
<?php
}
else{ ?>
<a href="index.php?page=<?=($page-1)?>">이전</a>
<?php
}
?>
<?php
for($print_page = $s_pageNum; $print_page <= $e_pageNum; $print_page++) {
?>
<a href="index.php?page=<?=$print_page?>"><?=$print_page?></a>
<?php
}
?>
<!-- 다음버튼 -->
<?php
if($page >= $total_page){
?>
<a href="index.php?page=<?=$total_page?>">다음</a>
<?php
}else{
?>
<a href="index.php?page=<?=($page+1)?>">다음</a>
<?php
}
?>
</p>
<div id="searchDiv">
<form action="search.php" method="post">
<span>검색하기</span>
<select name="search_m" id="search">
<option value="title">제목</option>
<option value="writer">글쓴이</option>
<option value="publisher">출판사</option>
</select>
<input type="text" name="search" required>
<button id="searchBtn">검색하기</button>
</form>
<button id="rightBtn"><a href="create.php">도서등록</a></button>
</div>
</div>
<script>
function hideLoading(){
let spinner = document.querySelector('#spinnerwrap');
spinner.style.display = 'none';
}
// window.onload = function(){
// hideLoading();
// }
setTimeout(()=>{
hideLoading();
}, 3000);
</script>
<?php include_once 'include/footer.php' ?>-style.css
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box;}
li { list-style: none;}
a { color: inherit; text-decoration: none;}
:root {
--main-color: mediumseagreen;
}
body {
font-family: 'Varela Round', sans-serif;
font-size: 16px;
line-height: 1.6;
color: #222;
}
header {
display: flex;
justify-content: space-between;
height: 80px;
align-items: center;
padding: 0 30px;
}
header ul {
display: flex;
}
header ul li {
padding: 0 20px;
}
#contents {
background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
padding: 60px 0;
}
.inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
color: #fff;
}
.inner h2 {
border-bottom: 1px solid #fff;
margin-bottom: 30px;
font-size: 36px;
font-weight: normal;
}
table {
border-collapse: collapse;
width: 100%;
line-height: 46px;
margin: 20px 0;
text-align: center;
}
#contents_page table th {
background: var(--main-color);
}
#contents_page table td {
border-bottom: 1px solid #fff;
}
#searchDiv {
padding: 30px;
}
#searchDiv span {
padding-right: 50px;
}
#searchDiv input {
width: 300px;
line-height: 30px;
border: none;
outline: none;
}
#searchDiv #searchBtn {
background: var(--main-color);
width: 100px;
color: #fff;
border: none;
outline: none;
line-height: 30px;
}
#searchDiv #rightBtn {
float: right;
width: 100px;
color: #222;
border: none;
outline: none;
background: #fff;
text-align: center;
line-height: 30px;
}
footer {
padding: 50px;
}
#write_book table td {
border-bottom: 1px solid #fff;
padding: 8px;
}
#write_book table td:nth-child(1) {
width: 30%;
}
#write_book table td:nth-child(2) {
width: 70%;
text-align: left;
}
#write_book input, #write_book textarea {
width: 80%;
line-height: 30px;
padding-left: 20px;
border: none;
outline: none;
}
#write_book button {
background: #fff;
width: 120px;
border-radius: 6px;
border: none;
outline: none;
text-align: center;
color: #222;
line-height: 40px;
}
select {
width: 100px;
height: 28px;
border: none;
outline: none;
}
#bestSeller_page ul {
display: flex;
flex-wrap: wrap;
}
#bestSeller_page ul li {
width: 33.3333%;
padding: 80px 0;
text-align: center;
}
#bestSeller_page ul li img {
width: 70%;
}
#best_book table {
border-collapse: collapse;
}
#best_book table .td {
border-bottom: 1px solid #fff;
text-align: left;
padding: 6px 16px;
}
#best_book table .tdcenter {
text-align: center;
}
#best_book button {
background: #fff;
width: 120px;
border-radius: 6px;
border: none;
outline: none;
text-align: center;
color: #222;
line-height: 40px;
}
.file {
border: 1px solid #ccc;
background: #eee;
padding: 8px 16px;
color: #333;
border-radius: 4px;
}
/* //로딩 스피너 */
#spinnerwrap {
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 100%;
height: 100%;
}
.spinner {
margin: 100px auto 0;
width: 70px;
text-align: center;
}
.spinner > div {
width: 18px;
height: 18px;
background-color: #333;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}