PHP development article publishing system front-end article list page
The general layout of the front-end article list page is as follows:
The flow chart of the front-end list program is as follows:
<?php
//引入分頁(yè)程序
require_once("../paging.php");
//取出列表頁(yè)3條數(shù)據(jù)，存于數(shù)組$data中
if($info&&mysqli_num_rows($info)){
while($row=mysqli_fetch_assoc($info)){
$data[]=$row;
}
}else{
$data=array();
}
//取最新添加的6條編號(hào)、標(biāo)題信息，存于數(shù)組$data_title
if($info_title&&mysqli_num_rows($info_title)){
while($row_title=mysqli_fetch_assoc($info_title)){
$data_title[]=$row_title;
}
}else{
$data_title=array();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<title>文章列表</title>
<meta charset="utf-8" />
<style>
*{
box-sizing:border-box;
}
.box{
font-family: 宋體;
margin:0px auto;
width:400px;
}
.box a:link,.box a:visited,.box a:hover{color:#000000;text-decoration:underline; }
.head{
background-color:#0f8ff2;
height:80px;
}
.tit{
padding: 20px 20px;
font-size:25px;
}
.content{
width:400px;
min-height:100px;
border:1px solid red;
}
.top_con{
width:400px;
padding:10px;
}
.bottom_con{
margin-left:20px;
width:400px;
}
.con_tit{
font-size:18px;
margin:10px 0px 10px 10px;
font-weight:bold;
}
.con_des{
text-indent:2em;
font-size:18px;
}
.con_det{
padding: 0px 0px 0px 300px;
}
ul{
list-style:none;
margin-left:-40px;
}
li{
margin:15px 0px 0px 0px;
}
.index{
margin:-5px 0px 0px 0px ;
}
.bg{
position:relative;
top: -6px;
background-color:#fff;
margin-left:335px;
}
</style>
</head>
<body>
<div class="box">
<div class="head"><div class="tit">php資訊站</div><span class="bg"><a href="../admin/admin_manage.php">后臺(tái)入口</a></span></div>
<div class="content">
<div class="top_con">
<?php
//將$data中的數(shù)據(jù)通過(guò)foreach循環(huán)出來(lái)，顯示在相應(yīng)div里面
if(!empty($data)){
foreach($data as $value){
?>
<div class="con_tit"><?php echo $value['title']?></div>
<div class="con_des"><?php echo $value['description']?></div>
<div class="con_det"><a href="home_show.php?id=<?php echo $value[id];?>">查看詳細(xì)</a></div>
<?php
}
}
//初始化首頁(yè)、上一頁(yè)、下一頁(yè)、末頁(yè)的值，通過(guò)<a>標(biāo)簽進(jìn)行跳轉(zhuǎn)到當(dāng)前頁(yè)面，傳入$page的值
$first=1;
$prev=$page-1;
$next=$page+1;
$last=$pagenum;
?>
<div class="index">
<a href="home_list.php?page=<?php echo $first ?>">首頁(yè)</a>
<a href="home_list.php?page=<?php echo $prev ?>">上一頁(yè)</a>
<a href="home_list.php?page=<?php echo $next ?>">下一頁(yè)</a>
<a href="home_list.php?page=<?php echo $last ?>">末頁(yè)</a>
</div>
</div>
<div class="bottom_con">
<div style="margin-left:10px;margin-top:20px,font-size:20px;">最新資訊</div>
<ul>
<?php
//將$data_title中的數(shù)據(jù)通過(guò)foreach循環(huán)出來(lái)，顯示在相應(yīng)div里面
if(!empty($data_title)){
foreach($data_title as $value_title){
?>
<li><a href="home_show.php?id=<?php echo $value_title['id']?>"><?php echo $value_title['title']?></a></li>
<?php
}
}
?>
</ul>
</div>
</div>
</div>
</body>
</html>
Code Comments
- The PHP code added is mainly to display the data queried in the paging program in a loop
- The paging part mainly calculates the value of the new $page through the $page of the current page. Click on the previous page or next page to calculate the value of the new $page and pass it to the paging processing program. The paging program will calculate the value of the new $page based on the $page. page, re-fetch the corresponding page information from the data set
- The comments in the program part are very clear, you can copy it locally and test it yourself
