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

最新推荐文章于 2024-08-14 16:49:04 发布
最新推荐文章于 2024-08-14 16:49:04 发布
阅读量3.7k 收藏 7
点赞数 1
源自 慕课网 的学习
       关于简易文章发布系统——后台管理系统大致已经制作完毕，但是从安全方面来看，程序质量不高，只适合初学者进行学习开发，掌握php的开发流程和开发技巧，为以后引擎模板的学习打下基础。
       针对 后台管理系统，制作 简易文章发布系统的前台界面，用于用户的查看。
       使用同样的数据库和数据表，基于原来的目录结构进行设计：

       先来看下，前台文章展示的效果页：
       文章列表页 article.list.php

      样式 default.css
[css] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. /* 
  2. Design by Free CSS Templates 
  3. http://www.freecsstemplates.org 
  4. Released for free under a Creative Commons Attribution 2.5 License 
  5. */  
  6.   
  7. body {  
  8.     margin: 0;  
  9.     padding: 0;  
  10.     background: #FFFFFF;  
  11.     font-family: Arial, Helvetica, sans-serif;  
  12.     font-size: 13px;  
  13.     color: #6D6D6D;  
  14. }  
  15.   
  16. h1, h2, h3 {  
  17.     margin: 0;  
  18.     text-transform: lowercase;  
  19.     font-weight: normal;  
  20.     color: #78CC00;  
  21. }  
  22.   
  23. h1 {  
  24.     letter-spacing: -1px;  
  25.     font-size: 32px;  
  26. }  
  27.   
  28. h2 {  
  29.     font-size: 23px;  
  30. }  
  31.   
  32. p, ul, ol {  
  33.     margin: 0 0 2em 0;  
  34.     text-align: justify;  
  35.     line-height: 26px;  
  36. }  
  37.   
  38. a:link {  
  39.     color: #7AD000;  
  40. }  
  41.   
  42. a:hover, a:active {  
  43.     text-decoration: none;  
  44.     color: #7AD000;  
  45. }  
  46.   
  47. a:visited {  
  48.     color: #7AD000;  
  49. }  
  50.   
  51. img {  
  52.     border: none;  
  53. }  
  54.   
  55. img.left {  
  56.     float: left;  
  57.     margin: 7px 15px 0 0;  
  58. }  
  59.   
  60. img.right {  
  61.     float: right;  
  62.     margin: 7px 0 0 15px;  
  63. }  
  64.   
  65. /* Form */  
  66.   
  67. form {  
  68.     margin: 0;  
  69.     padding: 0;  
  70. }  
  71.   
  72. fieldset {  
  73.     margin: 0;  
  74.     padding: 0;  
  75.     border: none;  
  76. }  
  77.   
  78. legend {  
  79.     display: none;  
  80. }  
  81.   
  82. input, textarea, select {  
  83.     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
  84.     font-size: 13px;  
  85.     color: #333333;  
  86. }  
  87.   
  88. #wrapper {  
  89.     background: #7ACF00 url(images/img03.jpg);  
  90. }  
  91.   
  92. /* Header */  
  93.   
  94. #header {  
  95.     width: 900px;  
  96.     height: 80px;  
  97.     margin: 0 auto 20px auto;  
  98.     padding-top: 10px;  
  99. }  
  100.   
  101. #logo {  
  102.     float: left;  
  103.     height: 120px;  
  104.     margin-left: 30px;  
  105. }  
  106.   
  107. #logo h1 {  
  108.     font-size: 38px;  
  109.     color: #3399CC;  
  110. }  
  111.   
  112. #logo h1 sup {  
  113.     vertical-align: text-top;  
  114.     font-size: 24px;  
  115. }  
  116.   
  117. #logo h1 a {  
  118.     color: #FFFFFF;  
  119. }  
  120.   
  121. #logo h2 {  
  122.     text-transform: uppercase;  
  123.     font-family: Arial, Helvetica, sans-serif;  
  124.     font-size: 10px;  
  125.     color: #FFFFFF;  
  126. }  
  127.   
  128. #logo a {  
  129.     text-decoration: none;  
  130.     color: #FFFFFF;  
  131. }  
  132.   
  133. /* Menu */  
  134.   
  135. #menu {  
  136.     float: right;  
  137. }  
  138.   
  139. #menu ul {  
  140.     margin: 0;  
  141.     padding: 28px 0 0 0;  
  142.     list-style: none;  
  143. }  
  144.   
  145. #menu li {  
  146.     display: inline;  
  147. }  
  148.   
  149. #menu a {  
  150.     display: block;  
  151.     float: left;  
  152.     margin-left: 5px;  
  153.     background: #6AB000;  
  154.     padding: 7px 10px;  
  155.     text-decoration: none;  
  156.     font-size: 15px;  
  157.     color: #FFFFFF;  
  158. }  
  159.   
  160. #menu a:hover {  
  161.     text-decoration: underline;  
  162. }  
  163.   
  164. #menu .active a {  
  165. }  
  166.   
  167. /* Page */  
  168.   
  169. #page {  
  170.     width: 900px;  
  171.     margin: 0 auto;  
  172.     padding: 20px 20px;  
  173. }  
  174.   
  175. /* Content */  
  176.   
  177. #content {  
  178.     float: left;  
  179.     width: 590px;  
  180.     padding: 0px 30px 0px 30px;  
  181. }  
  182.   
  183. /* Post */  
  184.   
  185. .post {  
  186. }  
  187.   
  188. .post .title {  
  189.     margin-bottom: 20px;  
  190.     padding-bottom: 5px;  
  191.     border-bottom: 10px solid #EDEDED;  
  192. }  
  193.   
  194. .post .entry {  
  195. }  
  196.   
  197. .post .meta {  
  198.     margin: 0;  
  199.     padding: 0 0 60px 0;  
  200.     background: url(images/img04.jpg) repeat-x left 30%;  
  201. }  
  202.   
  203. .post .meta p {  
  204.     margin: 0;  
  205.     line-height: normal;  
  206. }  
  207.   
  208. .post .meta .byline {  
  209.     float: left;  
  210.     color: #0000FF;  
  211. }  
  212.   
  213. .post .meta .links {  
  214.     float: left;  
  215. }  
  216.   
  217. .post .meta .more {  
  218.     width: 185px;  
  219.     height: 35px;  
  220.     padding: 5px 0px 5px 0px;  
  221.     text-transform: uppercase;  
  222.     text-decoration: none;  
  223.     font-size: 11px;  
  224. }  
  225.   
  226. .post .meta .comments {  
  227.     padding: 5px 0px 5px 0px;  
  228.     text-transform: uppercase;  
  229.     text-decoration: none;  
  230.     font-size: 11px;  
  231. }  
  232.   
  233. .post .meta b {  
  234.     display: none;  
  235. }  
  236.   
  237. /* Sidebar */  
  238.   
  239. #sidebar {  
  240.     float: right;  
  241.     width: 230px;  
  242. }  
  243.   
  244. #sidebar ul {  
  245.     margin: 0;  
  246.     padding: 10px 0 0 0;  
  247.     list-style: none;  
  248. }  
  249.   
  250. #sidebar li {  
  251.     margin-bottom: 40px;  
  252. }  
  253.   
  254. #sidebar li ul {  
  255. }  
  256.   
  257. #sidebar li li {  
  258.     margin: 0;  
  259.     padding: 3px 0;  
  260.     border-bottom: 1px dashed #D1D1D1;  
  261. }  
  262.   
  263. #sidebar li li a {  
  264.     margin: 0;  
  265.     padding-left: 25px;  
  266.     background: url(images/img01.png) no-repeat left 50%;  
  267. }  
  268.   
  269. #sidebar h2 {  
  270.     margin-bottom: 10px;  
  271.     padding-bottom: 5px;  
  272.     border-bottom: 10px solid #EDEDED;  
  273.     font-size: 18px;  
  274.     font-weight: normal;  
  275. }  
  276.   
  277. #sidebar a {  
  278.     text-decoration: none;  
  279.     color: #6D6D6D;  
  280. }  
  281.   
  282. /* Search */  
  283.   
  284. #search {  
  285. }  
  286.   
  287. #search h2 {  
  288.     margin-bottom: 20px;  
  289. }  
  290.   
  291. #s {  
  292.     width: 150px;  
  293.     margin-right: 5px;  
  294.     padding: 3px;  
  295.     border: 1px solid #F0F0F0;  
  296. }  
  297.   
  298. #x {  
  299.     padding: 3px;  
  300.     background: #ECECEC url(images/img08.gif) repeat-x left bottom;  
  301.     border: none;  
  302.     text-transform: lowercase;  
  303.     font-size: 11px;  
  304.     color: #4F4F4F;  
  305. }  
  306.   
  307. /* Boxes */  
  308.   
  309. .box1 {  
  310.     padding: 20px;  
  311.     background: url(images/img05.gif) no-repeat;  
  312. }  
  313.   
  314. .box2 {  
  315.     color: #BABABA;  
  316. }  
  317.   
  318. .box2 h2 {  
  319.     margin-bottom: 15px;  
  320.     background: url(images/img10.gif) repeat-x left bottom;  
  321.     font-size: 16px;  
  322.     color: #FFFFFF;  
  323. }  
  324.   
  325. .box2 ul {  
  326.     margin: 0;  
  327.     padding: 0;  
  328.     list-style: none;  
  329. }  
  330.   
  331. .box2 a:link, .box2 a:hover, .box2 a:active, .box2 a:visited  {  
  332.     color: #EDEDED;  
  333. }  
  334.   
  335. /* Footer */  
  336.   
  337. #footer {  
  338.     height: 400px;  
  339.     min-height: 74px;  
  340.     padding: 10px 0 0 0;  
  341.     background: #979797 url(images/img02.jpg) repeat-x left top;  
  342.     font-family: Tahoma, Arial, Helvetica, sans-serif;  
  343. }  
  344.   
  345. html>body #footer {  
  346.     height: auto;  
  347. }  
  348.   
  349. #legal {  
  350.     clear: both;  
  351.     padding-top: 20px;  
  352.     text-align: center;  
  353.     text-transform: uppercase;  
  354.     font-size: 10px;  
  355.     color: #353535;  
  356. }  
  357.   
  358. #legal a {  
  359.     font-weight: bold;  
  360.     color: #FFFFFF;  
  361. }  
/*
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] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. <?php  
  2.     require_once('connect.php');  
  3.     $sql = "select * from article order by dateline desc";  
  4.     $query = mysql_query($sql);  
  5.     if($query && mysql_num_rows($query)) {  
  6.         while($row = mysql_fetch_assoc($query)) {  
  7.             $data[] = $row;  
  8.         }  
  9.     } else {  
  10.         $data = [];  
  11.     }  
  12. ?>  
  13. <!DOCTYPE html>  
  14. <html lang="en">  
  15. <head>  
  16.     <meta charset="UTF-8">  
  17.     <title>文章发布系统</title>  
  18.     <meta name="keywords" content=""/>  
  19.     <meta name="description" content="文章发布系统"/>  
  20.     <link rel="stylesheet" href="default.css" type="text/css">  
  21. </head>  
  22. <body>  
  23.     <div id="wrapper">  
  24.         <div id="header">  
  25.             <div id="logo">  
  26.                 <h1><a href="#">php与mysql<sup></sup></a></h1>  
  27.                 <h2></h2>  
  28.             </div>  
  29.   
  30.             <div id="menu">  
  31.                 <ul>  
  32.                     <li class="active"><a href="article.list.php">文章</a></li>  
  33.                     <li><a href="about.php">关于我们</a></li>  
  34.                     <li><a href="contact.php">联系我们</a></li>  
  35.                 </ul>  
  36.             </div>  
  37.         </div>  
  38.     </div>  
  39.   
  40.     <div id="page">  
  41.         <div id="content">  
  42.             <?php  
  43.                 if(empty($data)) {  
  44.                     echo "当前没有文章，请管理员在后台添加文章";  
  45.                 } else {  
  46.                     foreach ($data as $value) {  
  47.             ?>  
  48.                   
  49.                 <div class="post">  
  50.                     <h1 class="title"><?php echo $value['title']; ?><span style="color:#CCC; font-size:14px;">　　作者：<?php echo $value['author'];?></span></h1>  
  51.                     <div class="entry">  
  52.                         <?php echo $value['description']; ?>  
  53.                     </div>  
  54.                     <div class="meta">  
  55.                         <p class="links"><a href="article.show.php?id=<?php echo $value['id']; ?>" class="more">查看详细</a>  »  </p>  
  56.                     </div>  
  57.                 </div>  
  58.   
  59.             <?php  
  60.                     }  
  61.                 }  
  62.             ?>  
  63.         </div>  
  64.   
  65.         <div id="sidebar">  
  66.             <ul>  
  67.                 <li id="search">  
  68.                     <h2><b class="text1">Search</b></h2>  
  69.                     <form action="article.search.php" method="get">  
  70.                         <fieldset>  
  71.                             <input type="text" id="s" name="key" value="">  
  72.                             <input type="submit" id="x" value="Search">  
  73.                         </fieldset>  
  74.                     </form>  
  75.                 </li>  
  76.             </ul>  
  77.         </div>  
  78.   
  79.         <div style="clear: both;"> </div>  
  80.     </div>  
  81.   
  82.     <div id="footer">  
  83.         <p id="legal">Copyright &copyright; 1995-2016, DreamBoy.NET, All Rights Reserved</p>  
  84.     </div>  
  85. </body>  
  86. </html>  
<?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 &copyright; 1995-2016, DreamBoy.NET, All Rights Reserved</p>
	</div>
</body>
</html>
       点击“查看详细”即可查看该篇文章的详细内容，通过传递对应文章的id到 article.show.php， article.show.php 查询该文章所有信息进行展示。
       article.show.php
[php] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. <?php   
  2.     require_once('connect.php');  
  3.     $id = intval($_GET['id']); // intval 转化为 整数，有非法字符会转化为0，防止sql注入  
  4.     $sql = "select * from article where id = $id";  
  5.     $query = mysql_query($sql);  
  6.     if($query && mysql_num_rows($query)) {  
  7.         $row = mysql_fetch_assoc($query);  
  8.     } else {  
  9.         echo "这篇文章不存在";  
  10.         exit;  
  11.     }  
  12. ?>  
  13. <!DOCTYPE html>  
  14. <html lang="en">  
  15. <head>  
  16.     <meta charset="UTF-8">  
  17.     <title>文章详情页</title>  
  18.     <link rel="stylesheet" href="default.css" type="text/css">  
  19. </head>  
  20. <body>  
  21.     <div id="wrapper">  
  22.         <!-- start header -->  
  23.         <div id="header">  
  24.             <div id="logo">  
  25.                 <h1><a href="#">php与mysql<sup></sup></a></h1>  
  26.                 <h2></h2>  
  27.             </div>  
  28.             <div id="menu">  
  29.                 <ul>  
  30.                     <li class="active"><a href="article.list.php">文章</a></li>  
  31.                     <li><a href="#">关于我们</a></li>  
  32.                     <li><a href="#">联系我们</a></li>  
  33.                 </ul>  
  34.             </div>  
  35.         </div>  
  36.         <!-- end header -->  
  37.     </div>  
  38.   
  39.     <!-- start page -->  
  40.     <div id="page">  
  41.         <!-- start content -->  
  42.         <div id="content">  
  43.             <div class="post">  
  44.                 <h1 class="title"><!--文章标题放置到这里--><?php echo $row['title']?><span style="color:#ccc;font-size:14px;">　　作者：<!--作者放置到这里--><?php echo $row['author'];?></span></h1>  
  45.                 <div class="entry">  
  46.                     <!--文章内容放置到这里-->  
  47.                     <?php echo $row['content']?>  
  48.                 </div>  
  49.             </div>  
  50.         </div>  
  51.         <!-- end content -->  
  52.         <!-- start sidebar -->  
  53.         <div id="sidebar">  
  54.             <ul>  
  55.                 <li id="search">  
  56.                     <h2><b class="text1">Search</b></h2>  
  57.                     <form method="get" action="article.search.php">  
  58.                         <fieldset>  
  59.                         <input type="text" id="s" name="key" value="" />  
  60.                         <input type="submit" id="x" value="Search" />  
  61.                         </fieldset>  
  62.                     </form>  
  63.                 </li>  
  64.             </ul>  
  65.         </div>  
  66.         <!-- end sidebar -->  
  67.         <div style="clear: both;"> </div>  
  68.     </div>  
  69.     <!-- end page -->  
  70.     <!-- start footer -->  
  71.     <div id="footer">  
  72.         <p id="legal"></p>  
  73.     </div>  
  74.     <!-- end footer -->  
  75. </body>  
  76. </html>  
<?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
[php] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. <?php  
  2.     require_once('connect.php');  
  3.     $key = $_GET['key'];  
  4.     $sql = "select * from article where title like '%$key%' order by dateline desc";  
  5.     $query = mysql_query($sql);  
  6.     if($query && mysql_num_rows($query)) {  
  7.         while($row = mysql_fetch_assoc($query)) {  
  8.             $data[] = $row;  
  9.         }  
  10.     } else {  
  11.         $data = [];  
  12.     }  
  13. ?>  
  14. <!DOCTYPE html>  
  15. <html lang="en">  
  16. <head>  
  17.     <meta charset="UTF-8">  
  18.     <title>文章发布系统</title>  
  19.     <meta name="keywords" content=""/>  
  20.     <meta name="description" content="文章发布系统"/>  
  21.     <link rel="stylesheet" href="default.css" type="text/css">  
  22. </head>  
  23. <body>  
  24.     <div id="wrapper">  
  25.         <div id="header">  
  26.             <div id="logo">  
  27.                 <h1><a href="#">php与mysql<sup></sup></a></h1>  
  28.                 <h2></h2>  
  29.             </div>  
  30.   
  31.             <div id="menu">  
  32.                 <ul>  
  33.                     <li class="active"><a href="article.list.php">文章</a></li>  
  34.                     <li><a href="about.php">关于我们</a></li>  
  35.                     <li><a href="contact.php">联系我们</a></li>  
  36.                 </ul>  
  37.             </div>  
  38.         </div>  
  39.     </div>  
  40.   
  41.     <div id="page">  
  42.         <div id="content">  
  43.             <?php  
  44.                 if(empty($data)) {  
  45.                     echo "当前没有文章，请管理员在后台添加文章";  
  46.                 } else {  
  47.                     foreach ($data as $value) {  
  48.             ?>  
  49.                   
  50.                 <div class="post">  
  51.                     <h1 class="title"><?php echo $value['title']; ?><span style="color:#CCC; font-size:14px;">　　作者：<?php echo $value['author'];?></span></h1>  
  52.                     <div class="entry">  
  53.                         <?php echo $value['description']; ?>  
  54.                     </div>  
  55.                     <div class="meta">  
  56.                         <p class="links"><a href="article.show.php?id=<?php echo $value['id']; ?>" class="more">查看详细</a>  »  </p>  
  57.                     </div>  
  58.                 </div>  
  59.   
  60.             <?php  
  61.                     }  
  62.                 }  
  63.             ?>  
  64.         </div>  
  65.   
  66.         <div id="sidebar">  
  67.             <ul>  
  68.                 <li id="search">  
  69.                     <h2><b class="text1">Search</b></h2>  
  70.                     <form action="article.search.php" method="get">  
  71.                         <fieldset>  
  72.                             <input type="text" id="s" name="key" value="">  
  73.                             <input type="submit" id="x" value="Search">  
  74.                         </fieldset>  
  75.                     </form>  
  76.                 </li>  
  77.             </ul>  
  78.         </div>  
  79.   
  80.         <div style="clear: both;"> </div>  
  81.     </div>  
  82.   
  83.     <div id="footer">  
  84.         <p id="legal">Copyright &copyright; 1995-2016, DreamBoy.NET, All Rights Reserved</p>  
  85.     </div>  
  86. </body>  
  87. </html>  
<?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 &copyright; 1995-2016, DreamBoy.NET, All Rights Reserved</p>
	</div>
</body>
</html>


weishoupao
关注
纯前端实现—用户注册登录界面
孤寒者的博客
10-20 4万+
理想实现效果： 1.注册界面的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册界面</title> <link rel="stylesheet" href="RESETCSS.css"> <style> div{ width: 300px;
使用layui+express+node.js实现发布帖子页面（图片上传模块使用阿里云OSS对象存储）前端部分
zzcxy11的博客
12-09 814
使用layui+express+node.js实现发布帖子页面（图片上传模块使用阿里云OSS对象存储）
基于JAVA的文章发布系统的设计与实现
最新发布
weixin_46879314的博客
08-14 802
基于JAVA的文章发布系统的设计与实现
CSDN博客全新改版中欢迎关注－发表文章界面（有图）
CSDN 官方博客
04-10 2万+
呵呵，好不容易征得我们的技术经理的同意提前公布了我们的一个后台界面，是我们最常用的发表文章的界面，大家提提建议！（声明这不是最终版本，大家的意见也许会融合到我们的最终版本中） 
第一次发表文章 关于界面设计
zhanglijian007的博客
09-26 469
本系统用户界面设计遵循简单、方便、一致、图形化操作的原则，为用户提供友好的操作环境。用户界面设计保持风格一致，系统与各子系统的命令和菜单应具有相同或相似的形式；数据输入界面的设计以方便输入为准，充分利用各种快捷方式；在各种操作界面上，尽可能提供在线帮助功能。 该系统的界面分五大块： 菜单：XX投资项目管理系统的所有功能都能从菜单中调用。使用方法与Windows风格一致。 实用工具栏：位于菜单
实战react技术栈+express前后端博客项目（9）-- 前端管理界面发表文章功能+后端对应接口...
weixin_34236869的博客
10-17 306
项目地址：github.com/Nealyang/Re… 本想等项目做完再连载一波系列博客，随着开发的进行，也是的确遇到了不少坑，请教了不少人。遂想，何不一边记录踩坑，一边分享收获呢。分享当然是好的，如果能做到集思广益，那岂不是更美。我们的口号是：坚决不会烂尾 本博客为连载代码博客同步更新博客，随着项目往后开发可能会遇到前面写的不合适的地方会再回头修改。如有不妥~欢迎兄弟们不啬赐教。谢谢！ 效...
J2EE项目——简易银行管理系统
Yiky的博客
07-08 2527
BankManager JavaWeb快速入门的J2EE项目 项目简介 技术栈 Servlet + Jsp + Tomcat比较适合新手入门练手 项目用到的技术如下： Java：Java SE基础 前端： HTML , CSS , JavaScript , jQuery LayUI（前端模板框架） J2EE： Tomcat , Servlet , JSP , Filter 数据库： MySQL 业务需求 后台管理页 1.管理员登录 1.1 新增用户信息 1.2 新增银行卡信息 1.3 修改银行卡信息
简易公司招聘员工系统
09-07
《简易公司招聘员工系统——构建高效人力资源平台》 在当今竞争激烈的商业环境中，拥有一个高效、易用的招聘系统对于企业来说至关重要。"简易公司招聘员工系统"正是为解决这一需求而设计的，它集成了前台操作和后台...
简易酒店管理操作系统 采用C/S架构编写
06-09
《简易酒店管理操作系统——基于C/S架构的JAVA SWING实现》 酒店管理操作系统是现代酒店运营中的重要组成部分，它能够高效地协调各项业务流程，提高工作效率，降低运营成本。本系统名为“简易酒店管理操作系统”，...
毕设项目——智慧小区系统（Java Spring Boot+Vue ElementUI）
zjn1174962912的博客
06-16 5662
毕设项目——智慧小区系统项目初衷（最真实版）系统技术分析前端界面后端及数据库系统功能介绍小区业主端物业人员端系统界面展示登录界面首页信息列表界面新增界面删除提示界面修改界面查询界面业主查看物流信息界面小结 项目初衷（最真实版） 其实一开始，笔者只想做一个最最简单的管理系统，通篇只有增删改查的那种，但是马上就被老师批斗说工作量太少了，不得已最后做了个前台后台的完整版。不仅有后台的物业管理，也有前台的对小区业主服务，只不过都是简易版，本科毕设，大家宽容哈。 系统技术分析 前端界面 后端及数据库 系统功能介绍
管理系统前台页面模版
07-18
企业管理系统前台页面模版，可用SSH嵌套开发。非常简单经典的CSS HTML模版。
简易文章发布系统
11-25
简易文章发布系统简易文章发布系统简易文章发布系统
简单新闻发布系统!初学的！！
06-18
分享下这代码，简单的新闻发布系统，基本功能都有了！界面基本上没有，哈哈！
html——简单文章发布html页面及富文本编辑器wangEditor的使用
知北行的博客
04-22 7911
实现结果截图： 说明： 1、主要组件使用了bootstrap4，富文本编辑器使用wangEditor，在使用前需要下载wangEditor的js文件，地址参考 wangEditor3使用手册 2、所用图片就导航栏的两张，可以自己换成自己的，这里就不贴了。 3、对于简单的文本编辑需求，wangEditor3使用简单，上手快，推荐使用。 下面直接上代码： <!DOCTYPE ...
文章发布系统
凡凡的博客
06-21 2048
文章前台展示 文章列表页 文章内容页 文章检索 文章发布系统后台管理 1.文章管理列表 2.文章发布程序 3.文章修改程序 4.文章删除程序 1. 2. 数据库设计 数据库表设计article id title author content discription admin list.php show.ph
前端文章推荐
Fuohua的博客
07-26 1076
typescript TypeScript，初次见面，请多指教 可能是你需要的react + typescript 50条规范和经验 一些使用规范 CSS css加载会造成阻塞吗 不可思议的纯 CSS 滚动进度条效果 CSS实现水平垂直居中的1010种方式（史上最全） rem布局解析 布局的下一次革新 彻底搞懂word-break、word-wrap、w...
前端学习（1730）：前端系列javascript之发布窗口布局上
歌谣的博客
07-20 198
index.vue <template> <view class="content"> <view class="todo-header"> <view class="todo-header_left"> <text class="active-text">全部</text> <text>10条</text> </view> <view class..
简单新闻发布系统前台界面（html+css）
热门推荐
梦空间
03-03 3万+
运行效果如下：        图片素材： bg.jpg header_shadow.png news-icon.png        index.html 新闻发布系统 首页 关于我们
Node.js实战：简易文章发布系统开发教程
本篇文章是一份关于Node.js教程的实践指南，主要目标是创建一个简单的文章发布系统。系统包含几个关键功能： 1. **新闻类型管理**：系统设计之初考虑到了对不同类型新闻的管理，这涉及到数据结构的设计和分类逻辑的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值