续 简易 文章发布系统——后台管理系统 

源自 慕课网 的学习

       关于简易文章发布系统——后台管理系统大致已经制作完毕，但是从安全方面来看，程序质量不高，只适合初学者进行学习开发，掌握php的开发流程和开发技巧，为以后引擎模板的学习打下基础。

       针对 后台管理系统，制作 简易文章发布系统的前台界面，用于用户的查看。

       使用同样的数据库和数据表，基于原来的目录结构进行设计：

       先来看下，前台文章展示的效果页：

       文章列表页 article.list.php

      样式 default.css

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/body {margin: 0;padding: 0;background: #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size: 13px;color: #6D6D6D;
}h1, h2, h3 {margin: 0;text-transform: lowercase;font-weight: normal;color: #78CC00;
}h1 {letter-spacing: -1px;font-size: 32px;
}h2 {font-size: 23px;
}p, ul, ol {margin: 0 0 2em 0;text-align: justify;line-height: 26px;
}a:link {color: #7AD000;
}a:hover, a:active {text-decoration: none;color: #7AD000;
}a:visited {color: #7AD000;
}img {border: none;
}img.left {float: left;margin: 7px 15px 0 0;
}img.right {float: right;margin: 7px 0 0 15px;
}/* Form */form {margin: 0;padding: 0;
}fieldset {margin: 0;padding: 0;border: none;
}legend {display: none;
}input, textarea, select {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-size: 13px;color: #333333;
}#wrapper {background: #7ACF00 url(images/img03.jpg);
}/* Header */#header {width: 900px;height: 80px;margin: 0 auto 20px auto;padding-top: 10px;
}#logo {float: left;height: 120px;margin-left: 30px;
}#logo h1 {font-size: 38px;color: #3399CC;
}#logo h1 sup {vertical-align: text-top;font-size: 24px;
}#logo h1 a {color: #FFFFFF;
}#logo h2 {text-transform: uppercase;font-family: Arial, Helvetica, sans-serif;font-size: 10px;color: #FFFFFF;
}#logo a {text-decoration: none;color: #FFFFFF;
}/* Menu */#menu {float: right;
}#menu ul {margin: 0;padding: 28px 0 0 0;list-style: none;
}#menu li {display: inline;
}#menu a {display: block;float: left;margin-left: 5px;background: #6AB000;padding: 7px 10px;text-decoration: none;font-size: 15px;color: #FFFFFF;
}#menu a:hover {text-decoration: underline;
}#menu .active a {
}/* Page */#page {width: 900px;margin: 0 auto;padding: 20px 20px;
}/* Content */#content {float: left;width: 590px;padding: 0px 30px 0px 30px;
}/* Post */.post {
}.post .title {margin-bottom: 20px;padding-bottom: 5px;border-bottom: 10px solid #EDEDED;
}.post .entry {
}.post .meta {margin: 0;padding: 0 0 60px 0;background: url(images/img04.jpg) repeat-x left 30%;
}.post .meta p {margin: 0;line-height: normal;
}.post .meta .byline {float: left;color: #0000FF;
}.post .meta .links {float: left;
}.post .meta .more {width: 185px;height: 35px;padding: 5px 0px 5px 0px;text-transform: uppercase;text-decoration: none;font-size: 11px;
}.post .meta .comments {padding: 5px 0px 5px 0px;text-transform: uppercase;text-decoration: none;font-size: 11px;
}.post .meta b {display: none;
}/* Sidebar */#sidebar {float: right;width: 230px;
}#sidebar ul {margin: 0;padding: 10px 0 0 0;list-style: none;
}#sidebar li {margin-bottom: 40px;
}#sidebar li ul {
}#sidebar li li {margin: 0;padding: 3px 0;border-bottom: 1px dashed #D1D1D1;
}#sidebar li li a {margin: 0;padding-left: 25px;background: url(images/img01.png) no-repeat left 50%;
}#sidebar h2 {margin-bottom: 10px;padding-bottom: 5px;border-bottom: 10px solid #EDEDED;font-size: 18px;font-weight: normal;
}#sidebar a {text-decoration: none;color: #6D6D6D;
}/* Search */#search {
}#search h2 {margin-bottom: 20px;
}#s {width: 150px;margin-right: 5px;padding: 3px;border: 1px solid #F0F0F0;
}#x {padding: 3px;background: #ECECEC url(images/img08.gif) repeat-x left bottom;border: none;text-transform: lowercase;font-size: 11px;color: #4F4F4F;
}/* Boxes */.box1 {padding: 20px;background: url(images/img05.gif) no-repeat;
}.box2 {color: #BABABA;
}.box2 h2 {margin-bottom: 15px;background: url(images/img10.gif) repeat-x left bottom;font-size: 16px;color: #FFFFFF;
}.box2 ul {margin: 0;padding: 0;list-style: none;
}.box2 a:link, .box2 a:hover, .box2 a:active, .box2 a:visited  {color: #EDEDED;
}/* Footer */#footer {height: 400px;min-height: 74px;padding: 10px 0 0 0;background: #979797 url(images/img02.jpg) repeat-x left top;font-family: Tahoma, Arial, Helvetica, sans-serif;
}html>body #footer {height: auto;
}#legal {clear: both;padding-top: 20px;text-align: center;text-transform: uppercase;font-size: 10px;color: #353535;
}#legal a {font-weight: bold;color: #FFFFFF;
}

通过对数据库info进行所有的文章显示即可， article.list.php如下：

<?phprequire_once('connect.php');$sql = "select * from article order by dateline desc";$query = mysql_query($sql);if($query && mysql_num_rows($query)) {while($row = mysql_fetch_assoc($query)) {$data[] = $row;}} else {$data = [];}
?>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文章发布系统</title><meta name="keywords" content=""/><meta name="description" content="文章发布系统"/><link rel="stylesheet" href="default.css" type="text/css">
</head>
<body><div id="wrapper"><div id="header"><div id="logo"><h1><a href="#">php与mysql<sup></sup></a></h1><h2></h2></div><div id="menu"><ul><li class="active"><a href="article.list.php">文章</a></li><li><a href="about.php">关于我们</a></li><li><a href="contact.php">联系我们</a></li></ul></div></div></div><div id="page"><div id="content"><?phpif(empty($data)) {echo "当前没有文章，请管理员在后台添加文章";} else {foreach ($data as $value) {?><div class="post"><h1 class="title"><?php echo $value['title']; ?><span style="color:#CCC; font-size:14px;">　　作者：<?php echo $value['author'];?></span></h1><div class="entry"><?php echo $value['description']; ?></div><div class="meta"><p class="links"><a href="article.show.php?id=<?php echo $value['id']; ?>" class="more">查看详细</a>  »  </p></div></div><?php}}?></div><div id="sidebar"><ul><li id="search"><h2><b class="text1">Search</b></h2><form action="article.search.php" method="get"><fieldset><input type="text" id="s" name="key" value=""><input type="submit" id="x" value="Search"></fieldset></form></li></ul></div><div style="clear: both;"> </div></div><div id="footer"><p id="legal">Copyright &copyright; 1995-2016, DreamBoy.NET, All Rights Reserved</p></div>
</body>
</html>

点击“查看详细”即可查看该篇文章的详细内容，通过传递对应文章的id到 article.show.php， article.show.php 查询该文章所有信息进行展示。

       article.show.php

<?php require_once('connect.php');$id = intval($_GET['id']); // intval 转化为 整数，有非法字符会转化为0，防止sql注入$sql = "select * from article where id = $id";$query = mysql_query($sql);if($query && mysql_num_rows($query)) {$row = mysql_fetch_assoc($query);} else {echo "这篇文章不存在";exit;}
?>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文章详情页</title><link rel="stylesheet" href="default.css" type="text/css">
</head>
<body><div id="wrapper"><!-- start header --><div id="header"><div id="logo"><h1><a href="#">php与mysql<sup></sup></a></h1><h2></h2></div><div id="menu"><ul><li class="active"><a href="article.list.php">文章</a></li><li><a href="#">关于我们</a></li><li><a href="#">联系我们</a></li></ul></div></div><!-- end header --></div><!-- start page --><div id="page"><!-- start content --><div id="content"><div class="post"><h1 class="title"><!--文章标题放置到这里--><?php echo $row['title']?><span style="color:#ccc;font-size:14px;">　　作者：<!--作者放置到这里--><?php echo $row['author'];?></span></h1><div class="entry"><!--文章内容放置到这里--><?php echo $row['content']?></div></div></div><!-- end content --><!-- start sidebar --><div id="sidebar"><ul><li id="search"><h2><b class="text1">Search</b></h2><form method="get" action="article.search.php"><fieldset><input type="text" id="s" name="key" value="" /><input type="submit" id="x" value="Search" /></fieldset></form></li></ul></div><!-- end sidebar --><div style="clear: both;"> </div></div><!-- end page --><!-- start footer --><div id="footer"><p id="legal"></p></div><!-- end footer -->
</body>
</html>

如 点击查看一篇文章，结果如下：

       此外，在 article.list.php 即文章列表页，提供一个搜索功能，搜索含 关键字 的文章。点击“search”按钮，将要搜索的关键字发送给 article.search.php 进行搜索查找。

       article.search.php

<?phprequire_once('connect.php');$key = $_GET['key'];$sql = "select * from article where title like '%$key%' order by dateline desc";$query = mysql_query($sql);if($query && mysql_num_rows($query)) {while($row = mysql_fetch_assoc($query)) {$data[] = $row;}} else {$data = [];}
?>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文章发布系统</title><meta name="keywords" content=""/><meta name="description" content="文章发布系统"/><link rel="stylesheet" href="default.css" type="text/css">
</head>
<body><div id="wrapper"><div id="header"><div id="logo"><h1><a href="#">php与mysql<sup></sup></a></h1><h2></h2></div><div id="menu"><ul><li class="active"><a href="article.list.php">文章</a></li><li><a href="about.php">关于我们</a></li><li><a href="contact.php">联系我们</a></li></ul></div></div></div><div id="page"><div id="content"><?phpif(empty($data)) {echo "当前没有文章，请管理员在后台添加文章";} else {foreach ($data as $value) {?><div class="post"><h1 class="title"><?php echo $value['title']; ?><span style="color:#CCC; font-size:14px;">　　作者：<?php echo $value['author'];?></span></h1><div class="entry"><?php echo $value['description']; ?></div><div class="meta"><p class="links"><a href="article.show.php?id=<?php echo $value['id']; ?>" class="more">查看详细</a>  »  </p></div></div><?php}}?></div><div id="sidebar"><ul><li id="search"><h2><b class="text1">Search</b></h2><form action="article.search.php" method="get"><fieldset><input type="text" id="s" name="key" value=""><input type="submit" id="x" value="Search"></fieldset></form></li></ul></div><div style="clear: both;"> </div></div><div id="footer"><p id="legal">Copyright &copyright; 1995-2016, DreamBoy.NET, All Rights Reserved</p></div>
</body>
</html>