index table
I believe that through studying in the previous chapter, you have already processed all the templates. This chapter mainly explains to you the list page of the column and the adding page
First change the name and link address of the left column list we separated from the previous lesson
The following code is the left side template we separated
<div class="sidebar-wrap"> <div class="sidebar-title"> <h1>菜單</h1> </div> <div class="sidebar-content"> <ul class="sidebar-list"> <li> <a href="#"><i class="icon-font"></i>常用操作</a> <ul class="sub-menu"> <li><a href="design.html"><i class="icon-font"></i>作品管理</a></li> <li><a href="design.html"><i class="icon-font"></i>博文管理</a></li> <li><a href="design.html"><i class="icon-font"></i>分類管理</a></li> <li><a href="design.html"><i class="icon-font"></i>留言管理</a></li> <li><a href="design.html"><i class="icon-font"></i>評(píng)論管理</a></li> <li><a href="design.html"><i class="icon-font"></i>友情鏈接</a></li> <li><a href="design.html"><i class="icon-font"></i>廣告管理</a></li> </ul> </li> <li> <a href="#"><i class="icon-font"></i>系統(tǒng)管理</a> <ul class="sub-menu"> <li><a href="system.html"><i class="icon-font"></i>系統(tǒng)設(shè)置</a></li> <li><a href="system.html"><i class="icon-font"></i>清理緩存</a></li> <li><a href="system.html"><i class="icon-font"></i>數(shù)據(jù)備份</a></li> <li><a href="system.html"><i class="icon-font"></i>數(shù)據(jù)還原</a></li> </ul> </li> </ul> </div> </div>
We changed the work management to column management, and changed the url link address
<div class="sidebar-wrap"> <div class="sidebar-title"> <h1>菜單</h1> </div> <div class="sidebar-content"> <ul class="sidebar-list"> <li> <a href="#"><i class="icon-font"></i>常用操作</a> <ul class="sub-menu"> <li><a href="cate/cate_list.php"><i class="icon-font"></i>欄目管理</a></li> <li><a href="design.html"><i class="icon-font"></i>博文管理</a></li> <li><a href="design.html"><i class="icon-font"></i>分類管理</a></li> <li><a href="design.html"><i class="icon-font"></i>留言管理</a></li> <li><a href="design.html"><i class="icon-font"></i>評(píng)論管理</a></li> <li><a href="design.html"><i class="icon-font"></i>友情鏈接</a></li> <li><a href="design.html"><i class="icon-font"></i>廣告管理</a></li> </ul> </li> <li> <a href="#"><i class="icon-font"></i>系統(tǒng)管理</a> <ul class="sub-menu"> <li><a href="system.html"><i class="icon-font"></i>系統(tǒng)設(shè)置</a></li> <li><a href="system.html"><i class="icon-font"></i>清理緩存</a></li> <li><a href="system.html"><i class="icon-font"></i>數(shù)據(jù)備份</a></li> <li><a href="system.html"><i class="icon-font"></i>數(shù)據(jù)還原</a></li> </ul> </li> </ul> </div> </div>
Then open our column list page, and the page after opening will be like
Now the above content is all the content that comes with the template. Let’s ignore this page for now. We click on the new work to enter the new work page. The page is as follows:
We want to add data to the database, so the database is indispensable. You create a database locally, and then create a table in the database. The table creation code is as follows:
CREATE TABLE `cate` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `name` varchar(30) NOT NULL DEFAULT '' COMMENT '欄目分類名稱', `pid` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '上級(jí)分類', `modelid` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '所屬模型', `type` tinyint(4) NOT NULL DEFAULT '0' COMMENT '類別', `keywords` varchar(50) DEFAULT '' COMMENT '關(guān)鍵字', `content` text COMMENT '內(nèi)容', `status` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '顯示', `sort` smallint(6) NOT NULL DEFAULT '100' COMMENT '排序', PRIMARY KEY (`id`), KEY `pid` (`pid`) ) ENGINE=MyISAM AUTO_INCREMENT=612 DEFAULT CHARSET=utf8 COMMENT='欄目分類表';
After creating the table, Modify our add page, the code is as follows
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>后臺(tái)管理</title>
<link rel="stylesheet" type="text/css" href="../../public/style/css/common.css"/>
<link rel="stylesheet" type="text/css" href="../../public/style/css/main.css"/>
<script type="text/javascript" src="../../public/style/js/libs/modernizr.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../public/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="../../public/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../public/ueditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<?php include_once("../../common/top.php"); ?>
<div class="container clearfix">
<?php include("../../common/left.php"); ?>
<!--/sidebar-->
<div class="main-wrap">
<div class="crumb-wrap">
<div class="crumb-list"><i class="icon-font"></i><a href="../index.php">首頁(yè)</a><span class="crumb-step">></span><a class="crumb-name" href="cate_list.php">欄目管理</a><span class="crumb-step">></span><span>新增作品</span></div>
</div>
<div class="result-wrap">
<div class="result-content">
<form action="cate_add_form.php" method="post" id="myform" name="myform" enctype="multipart/form-data">
<table class="insert-tab" width="100%">
<tbody><tr>
<th width="120"><i class="require-red">*</i>分類：</th>
<td>
<select name="pid" id="catid" class="required">
<option value="0"> |--頂級(jí)欄目</option>
<?php
foreach($rs as $k=>$v){
?>
<option value='<?php echo $v['id']; ?>' ><?php echo $v['name']; ?> </option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<th><i class="require-red">*</i>欄目標(biāo)題：</th>
<td>
<input class="common-text required" id="title" name="name" size="50" value="" type="text">
</td>
</tr>
<tr>
<th><i class="require-red">*</i>欄目類型：</th>
<td>
<select name="modelid" class="form-control">
<option value="1">文章模型</option>
<option value="2">單頁(yè)模型</option>
<option value="3">產(chǎn)品模型</option>
<option value="4">圖片模型</option>
</select>
</td>
</tr>
<tr>
<th><i class="require-red">*</i>欄目狀態(tài)：</th>
<td>
<input type="radio" name="status" value="1" checked="checked">顯示
<input type="radio" name="status" value="0">隱藏
</td>
<tr>
<th>關(guān)鍵詞：</th>
<td>
<input class="common-text required" id="title" name="keywords" size="50" value="" type="text">
</td>
</tr>
<tr>
<th>內(nèi)容：</th>
<td><textarea name="content" class="common-textarea" id="content" cols="30" style="width: 98%;" rows="10"></textarea></td>
</tr>
<tr>
<th></th>
<td>
<input class="btn btn-primary btn6 mr10" value="提交" type="submit">
<input class="btn btn6" onclick="history.go(-1)" value="返回" type="button">
</td>
</tr>
</tbody></table>
</form>
</div>
</div>
</div>
<!--/main-->
</div>
</body>
</html>
<script type="text/javascript">
UE.getEditor('content',{initialFrameWidth:1100,initialFrameHeight:400,});
</script>The current add page is like this, as shown below
In the add page we introduced Baidu Editor, if you want to reference Baidu Editor, you need to download the editor installation package. The download link is as follows:
After decompression Introduce the files inside into the code. First introduce the JS file and so on
<script type="text/javascript" charset="utf-8" src="../../public/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="../../public/ueditor/ueditor.all.min.js"></script> <script type="text/javascript" charset="utf-8" src="../../public/ueditor/lang/zh-cn/zh-cn.js"></script>
Then add the following code at the bottom of the code,
<script type="text/javascript">
UE.getEditor('content',{initialFrameWidth:1100,initialFrameHeight:400,});
</script>That’s it. Add the page We used Infinitus classification. The Infinitus classification code is as follows:
<?php
function getList($pid=0,&$result=array(),$spac=0)
{
$conn=mysqli_connect("localhost","root","root","company")or die('數(shù)據(jù)庫(kù)連接失敗');
mysqli_set_charset($conn,'utf8'); //設(shè)定字符集
$spac +=4;
$sql = "select * from cate where pid = $pid";
$res = mysqli_query($conn,$sql);
while($rows=mysqli_fetch_array($res))
{
$rows["name"] = str_repeat(' ',$spac).'|--'.$rows["name"];
$result[] = $rows;
getList($rows['id'],$result,$spac);
}
return $result;
}
$rs=getList();
//print_r($rs);
//die;
?>Just add the Infinitus classification code at the top of the page. The complete page code is as follows:
<?php
function getList($pid=0,&$result=array(),$spac=0)
{
$conn=mysqli_connect("localhost","root","root","company")or die('數(shù)據(jù)庫(kù)連接失敗');
mysqli_set_charset($conn,'utf8'); //設(shè)定字符集
$spac +=4;
$sql = "select * from cate where pid = $pid";
$res = mysqli_query($conn,$sql);
while($rows=mysqli_fetch_array($res))
{
$rows["name"] = str_repeat(' ',$spac).'|--'.$rows["name"];
$result[] = $rows;
getList($rows['id'],$result,$spac);
}
return $result;
}
$rs=getList();
//print_r($rs);
//die;
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>后臺(tái)管理</title>
<link rel="stylesheet" type="text/css" href="../../public/style/css/common.css"/>
<link rel="stylesheet" type="text/css" href="../../public/style/css/main.css"/>
<script type="text/javascript" src="../../public/style/js/libs/modernizr.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../public/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="../../public/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../public/ueditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<?php include_once("../../common/top.php"); ?>
<div class="container clearfix">
<?php include("../../common/left.php"); ?>
<!--/sidebar-->
<div class="main-wrap">
<div class="crumb-wrap">
<div class="crumb-list"><i class="icon-font"></i><a href="../index.php">首頁(yè)</a><span class="crumb-step">></span><a class="crumb-name" href="cate_list.php">欄目管理</a><span class="crumb-step">></span><span>新增作品</span></div>
</div>
<div class="result-wrap">
<div class="result-content">
<form action="cate_add_form.php" method="post" id="myform" name="myform" enctype="multipart/form-data">
<table class="insert-tab" width="100%">
<tbody><tr>
<th width="120"><i class="require-red">*</i>分類：</th>
<td>
<select name="pid" id="catid" class="required">
<option value="0"> |--頂級(jí)欄目</option>
<?php
foreach($rs as $k=>$v){
?>
<option value='<?php echo $v['id']; ?>' ><?php echo $v['name']; ?> </option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<th><i class="require-red">*</i>欄目標(biāo)題：</th>
<td>
<input class="common-text required" id="title" name="name" size="50" value="" type="text">
</td>
</tr>
<tr>
<th><i class="require-red">*</i>欄目類型：</th>
<td>
<select name="modelid" class="form-control">
<option value="1">文章模型</option>
<option value="2">單頁(yè)模型</option>
<option value="3">產(chǎn)品模型</option>
<option value="4">圖片模型</option>
</select>
</td>
</tr>
<tr>
<th><i class="require-red">*</i>欄目狀態(tài)：</th>
<td>
<input type="radio" name="status" value="1" checked="checked">顯示
<input type="radio" name="status" value="0">隱藏
</td>
<tr>
<th>關(guān)鍵詞：</th>
<td>
<input class="common-text required" id="title" name="keywords" size="50" value="" type="text">
</td>
</tr>
<tr>
<th>內(nèi)容：</th>
<td><textarea name="content" class="common-textarea" id="content" cols="30" style="width: 98%;" rows="10"></textarea></td>
</tr>
<tr>
<th></th>
<td>
<input class="btn btn-primary btn6 mr10" value="提交" type="submit">
<input class="btn btn6" onclick="history.go(-1)" value="返回" type="button">
</td>
</tr>
</tbody></table>
</form>
</div>
</div>
</div>
<!--/main-->
</div>
</body>
</html>
<script type="text/javascript">
UE.getEditor('content',{initialFrameWidth:1100,initialFrameHeight:400,});
</script>PS : Note that the input fields in the form must correspond to the fields in the database. Next, we only need to send the form database to the receiving page and save the data to the database. The code is as follows:
<?php
include_once('../../common/config.php');
if($_POST){
$name=$_POST['name'];
$pid=$_POST['pid'];
$modelid=$_POST['modelid'];
$status=$_POST['status'];
$keywords=$_POST['keywords'];
$content=$_POST['content'];
$sql= "INSERT INTO cate(pid,name,modelid,status,keywords,content) VALUES ('$pid','$name','$modelid','$status','$keywords','$content')";
$que=mysqli_query($conn,$sql);
if($que){
echo "<script>alert('發(fā)布成功，返回欄目列表頁(yè)');location.href='cate_list.php';</script>";
}else{
echo "<script>alert('發(fā)布失敗');location='" . $_SERVER['HTTP_REFERER'] . "'</script>";
exit;
}
} Above The config.php is a public file linked to the database, which contains the database connection statement
<?php
session_start();
define('ROOTURL','http://localhost/company/');
header("content-type:text/html;charset=utf8");
$conn=mysqli_connect("localhost","root","root","company")or die('數(shù)據(jù)庫(kù)連接失敗');
mysqli_set_charset($conn,'utf8'); //設(shè)定字符集So far, the data can be saved to the middle of the database. Next, we will process our column list,
This page only needs to take out the data we saved in the database. The complete code is as follows:
<?php
include_once('../../common/config.php');
include_once('../login/session.php');
function getList($pid=0,&$result=array(),$spac=0)
{
global $conn;
$spac +=4;
$sqlfy = "select * from cate where pid = $pid ";
$res = mysqli_query($conn,$sqlfy);
while($rows=mysqli_fetch_array($res))
{
$rows["name"] = str_repeat(' ',$spac).'|--'.$rows["name"];
$result[] = $rows;
getList($rows['id'],$result,$spac);
}
return $result;
}
$rs=getList();
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>欄目管理-后臺(tái)管理</title>
<link rel="stylesheet" type="text/css" href="../../public/style/css/common.css"/>
<link rel="stylesheet" type="text/css" href="../../public/style/css/main.css"/>
<script type="text/javascript" src="../../public/style/js/libs/modernizr.min.js"></script>
</head>
<body>
<?php include_once("../../common/top.php"); ?>
<div class="container clearfix">
<?php include("../../common/left.php"); ?>
<!--/sidebar-->
<div class="main-wrap">
<div class="crumb-wrap">
<div class="crumb-list"><i class="icon-font"></i><a href="../index.php">首頁(yè)</a><span class="crumb-step">></span><span class="crumb-name">欄目管理</span></div>
</div>
<div class="search-wrap">
<div class="search-content">
<form action="" method="post">
<table class="search-tab">
<tr>
<th width="120">選擇分類:</th>
<td>
<select name="search-sort" id="">
<option value="">全部</option>
<option value="19">標(biāo)題</option>
<option value="20">id</option>
</select>
</td>
<th width="70">關(guān)鍵字:</th>
<td><input class="common-text" placeholder="關(guān)鍵字" name="kws" value="" id="" type="text"></td>
<td><input class="btn btn-primary btn2" name="sub" value="查詢" type="submit"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="result-wrap">
<form name="myform" id="myform" method="post" action="">
<div class="result-title">
<div class="result-list">
<a href="cate_add.php"><i class="icon-font"></i>新增欄目</a>
<!-- <a id="updateOrd" href="cate_sort.php"><i class="icon-font"></i>更新排序</a>-->
</div>
</div>
<div class="result-content">
<table class="result-tab" width="100%">
<tr>
<th>ID</th>
<th>名稱</th>
<th>所屬模型</th>
<th>顯示</th>
<th>排序</th>
<th>操作</th>
</tr>
<?php
foreach($rs as $k=>$v){
?>
<tr>
<td><?php echo $v['id'];?></td>
<td><?php echo $v["name"]?></td>
<td><?php if($v['modelid']==1){
echo"文章模型";
}elseif($v['modelid']==2){
echo "單頁(yè)模型";
}elseif($v['modelid']==3)
{
echo "產(chǎn)品模型";
}else{
echo "圖片模型";
}
?></td>
<td><?php if($v['status']==1){
echo "顯示";
}else{
echo "隱藏";
}
?></td>
<td><input type="text" name="sort" size="5" value="<?php echo $v['sort']; ?>"></td>
<td>
<a class="link-update" href="cate_edit.php?id=<?php echo $v['id'];?>">修改</a>
<a class="link-del" onclick="return confirm('確定刪除當(dāng)前數(shù)據(jù)？')" href="cate_del.php?id=<?php echo $v['id']; ?>">刪除</a>
</td>
</tr>
<?php }
?>
</table>
</div>
</form>
</div>
</div>
<!--/main-->
</div>
</body>
</html>The final page effect is as follows:
In the modification and deletion links in our code, the ID of the corresponding column has been given to prepare for our deletion and modification below.
