简易文章发布系统——前台界面

原创

mb638413918930b 2022-11-28 18:28:49 博主文章分类：PHP ©著作权

文章标签 php 文章发布系统前台展示 ide mysql 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者mb638413918930b的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

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

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

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

简易文章发布系统——前台界面_文章发布系统

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

文章列表页 article.list.php

简易文章发布系统——前台界面_文章发布系统_02

样式 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如下：

<?php
  require_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">
      <?php
        if(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 ©right; 1995-2016, DreamBoy.NET, All Rights Reserved</p>
  </div>
</body>
</html>

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>

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

简易文章发布系统——前台界面_mysql_03

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

article.search.php

<?php
  require_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">
      <?php
        if(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 ©right; 1995-2016, DreamBoy.NET, All Rights Reserved</p>
  </div>
</body>
</html>