欄目列表
相信大家通過上一章的學(xué)習(xí)，已經(jīng)把所有的模板都初步處理好了，本章節(jié)呢主要給大家講解欄目的列表頁，與添加頁面
先把我們上一節(jié)課分離出來的左側(cè)欄目列表的名稱與鏈接地址改一下
下面的代碼是我們分離出來的左側(cè)模板
<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>評論管理</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>
我們將作品管理改成欄目管理了，url鏈接地址改一下
<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>評論管理</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>
然后打開我們的欄目列表頁，打開之后的頁面如
現(xiàn)在上面的內(nèi)容都是模板自帶的內(nèi)容，我們先不管這個頁面，我們點擊新增作品，進(jìn)入到新增作品頁面，頁面如下：
我們是要將數(shù)據(jù)添加到數(shù)據(jù)庫中，所以數(shù)據(jù)庫是不能少的，你在本地建立一個數(shù)據(jù)庫，然后在數(shù)據(jù)庫中建一張表，建表代碼如下：
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 '上級分類', `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='欄目分類表';
建完表之后，將我們的添加頁面修改一下，代碼如下
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>后臺管理</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">首頁</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"> |--頂級欄目</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">單頁模型</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>現(xiàn)在的添加頁面是這樣的，如下圖
在添加頁面中我們引入了百度編輯器，你如果想要引用百度編輯器，你需要下載編輯器安裝包，下載鏈接如下：
解壓之后將里面的文件在代碼中引入一下，首先引入JS文件之類的
<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>
然后再在代碼的底部加上下面的代碼，
<script type="text/javascript">
UE.getEditor('content',{initialFrameWidth:1100,initialFrameHeight:400,});
</script>這樣就行了，在添加頁面中我們運用了無限極分類，無限極分類代碼如下：
<?php
function getList($pid=0,&$result=array(),$spac=0)
{
$conn=mysqli_connect("localhost","root","root","company")or die('數(shù)據(jù)庫連接失敗');
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;
?>將無限極分類代碼加在頁面的最上方就可以，完整的添加頁面代碼如下：
<?php
function getList($pid=0,&$result=array(),$spac=0)
{
$conn=mysqli_connect("localhost","root","root","company")or die('數(shù)據(jù)庫連接失敗');
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>后臺管理</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">首頁</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"> |--頂級欄目</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">單頁模型</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:注意form表單中的input字段一定要和數(shù)據(jù)庫的字段相對應(yīng)，下面我們就只要將form的數(shù)據(jù)庫發(fā)送到接收頁面，將數(shù)據(jù)保存到數(shù)據(jù)庫中就行了，代碼如下：
<?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ā)布成功，返回欄目列表頁');location.href='cate_list.php';</script>";
}else{
echo "<script>alert('發(fā)布失敗');location='" . $_SERVER['HTTP_REFERER'] . "'</script>";
exit;
}
}上方的config.php是一個鏈接數(shù)據(jù)庫的公共文件，里面是數(shù)據(jù)庫連接語句
<?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ù)庫連接失敗');
mysqli_set_charset($conn,'utf8'); //設(shè)定字符集到目前，就能把數(shù)據(jù)保存到數(shù)據(jù)庫中路，下面處理我們的欄目列表，
這個頁面就只要將我們存到數(shù)據(jù)庫里面的數(shù)據(jù)取出來就可以了，完整代碼如下：
<?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>欄目管理-后臺管理</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">首頁</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 "單頁模型";
}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>最終的頁面效果如下：
我們代碼中的修改與刪除鏈接中，已經(jīng)給了相應(yīng)欄目的id，為我們下面的刪除與修改做準(zhǔn)備。
