项目主要效果如下
贴吧主页
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>php中文网贴吧</title> <meta charset="utf-8"> <style> body{ background-color:#dceffe; } *{ box-sizing:border-box; } .box{ background-color:#fff; font-family:楷体; margin:0px auto; width:400px; } .box a:link,.box a:visited,.box a:hover{color:#000000;text-decoration:none; } .head{ background-color:#0f8ff2; height:100px; } .tit{ padding: 20px 20px; font-size:25px; } .content{ width:400px; min-height:100px; border:1px solid #f0f0f0; padding:5px; } .list{ width:400px; } .hot{ margin-left:20px; width:400px; border-bottom:1px solid #f0f0f0; } .con_tit{ font-size:18px; margin:10px 0px 5px 0px; font-weight:bold; } .con_des{ text-indent:2em; font-size:16px; margin:5px 5px; } ul{ list-style:none; margin-left:-40px; } li{ margin:15px -15px 0px 0px; } .index{ margin:5px 0px 0px 50px ; } .info{ font-size: 12px; border-bottom:1px solid #f0f0f0; font-family:楷体; font-weight:bold; } .show_name{ float:left; margin-left:10px; } .show_time{ float:left; margin-left:20px; } .show_read{ float:right; margin-right:20px; } .show_discuss{ float:right; margin-right:10px; } .menu{ padding:5px 10px; } .wel{ margin-bottom: 10px } </style> </head> <body> <div class="box"> <div class="head"> <div class="tit">php中文网贴吧</div> </div> <div class="menu"> <div class="wel">欢迎您!admin</div> <span class="bg"><a href="home_publish.php">发布新帖</a></span> <span class="exit"><a href="home_exit.php">退出</a></span> </div> <div class="content"> <div class="hot"> <!-- 按浏览量排序,展示浏览量最高的两个 --> <div style="font-weight:bold;">热门帖子</div> <ul> <li><a href="home_details.php?id=23">环境配置不好</a></li> <li><a href="home_details.php?id=27">date()函数怎么使用啊</a></li> </ul> </div> <!-- 帖子列表--> <div class="list"> <!--内容部分--> <!--展示标题并设置链接--> <div class="con_tit"><a href="home_details.php?id=28">雾霾好大啊</a></div> <!--展示帖子内容--> <div class="con_des">今天的雾霾真大</div> <div class="info"> <div class="show_name"> 我是阿神 </div> <!--展示帖子发布时间--> <div class="show_time">11-19 09:22</div> <!--展示帖子浏览量--> <div class="show_read">浏览:4</div> <!--展示帖子回复量--> <div class="show_discuss">回复: 2 </div> <div style="clear:both"></div> </div> </div> <div class="list"> <!--内容部分--> <!--展示标题并设置链接--> <div class="con_tit"><a href="home_details.php?id=27">date()函数怎么使用啊</a></div> <!--展示帖子内容--> <div class="con_des">date()函数怎么使用啊,我总是写不对</div> <div class="info"> <div class="show_name"> 晴子 </div> <!--展示帖子发布时间--> <div class="show_time">11-18 11:52</div> <!--展示帖子浏览量--> <div class="show_read">浏览:113</div> <!--展示帖子回复量--> <div class="show_discuss">回复: 0 </div> <div style="clear:both"></div> </div> </div> <div class="list"> <!--内容部分--> <!--展示标题并设置链接--> <div class="con_tit"><a href="home_details.php?id=23">环境配置不好</a></div> <!--展示帖子内容--> <div class="con_des">想问下大家都是怎么样配置环境的</div> <div class="info"> <div class="show_name"> 我是阿神 </div> <!--展示帖子发布时间--> <div class="show_time">11-18 11:37</div> <!--展示帖子浏览量--> <div class="show_read">浏览:317</div> <!--展示帖子回复量--> <div class="show_discuss">回复: 2 </div> <div style="clear:both"></div> </div> </div> <div class="index"> <a href="home_index.php?page=1">首页</a> <a href="home_index.php?page=0">上一页</a> <a href="home_index.php?page=2">下一页</a> <a href="home_index.php?page=4">末页</a> </div> </div> </div> </body> </html>
主要实现功能:帖子展示,热门帖子展示,发布帖子
贴吧详情页
<html><head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>php中文网贴吧</title> <meta charset="utf-8"> <style> body{ background-color:#dceffe; } *{ box-sizing:border-box; } .box{ background-color:#fff; font-family:楷体; margin:0px auto; width:400px; } .box a:link,.box a:visited,.box a:hover{color:#000000;text-decoration:none; } .head{ background-color:#0f8ff2; height:100px; } .tit{ padding: 20px 20px; font-size:25px; } img{ width:200px; } .pic{ text-align:center; } .centre{ padding:10px; border-bottom: 1px solid #f0f0f0; } .floor,.name,.content,.pic{ margin-bottom:0px; } .floor{ font-size: 22px; margin-bottom:3px; } .name{ font-size: 12px; margin-bottom:3px; } .reply{ padding-top:10px; padding-left:10px; margin-bottom:3px; } .menu{ padding:5px 10px; border-bottom:1px solid #f0f0f0; } .wel{ margin-bottom: 10px } </style> </head> <body> <div class="box"> <div class="head"> <div class="tit">php中文网贴吧</div> </div> <div class="menu"> <div class="wel">欢迎您!admin</div> <span class="exit"><a href="home_index.php">首页</a></span> <span class="exit"><a href="home_exit.php">退出</a></span> </div> <div class="centre"> <div class="floor">1楼</div> <div class="name"> 晴子 11-18 11:36 </div> <div class="content">各位大神给些意见啊</div> </div> <div class="centre"> <div class="floor">2楼</div> <div class="name"> 我是阿神 11-18 11:39 </div> <div class="content">我也在学,大家一起加油啊</div> </div> <div class="centre"> <div class="floor">3楼</div> <div class="name"> admin 11-19 11:23 </div> <div class="content">认真去学会有收获的</div> </div> <!--回复部分--> <div class="reply"> <form method="post" action="home_reply.php?fId=22"> <div>回复内容:<br><textarea name="content" cols="40" rows="9"></textarea></div><br> <div><input type="submit" name="button" value="回复"></div><br> </form> </div> </div> </body></html>
主要实现功能:帖子详细内容展示,回复帖子
还有一些小功能,我们将在后面一一介绍
注:学习本课程之前,希望各位已经学习了我们网站的其它两门课程
本课程用到了其中的登录、注册、分页等部分程序。
文件夹主要包含文件如下:
公共文件
config.php:数据库配置信息
connect.php:数据库链接
function.php:自定义公共函数
paging.php:分页程序
登录注册文件
home_register.php:注册页面
home_regcheck.php:注册处理页面
home_login.php:登录页面
home_logincheck.php:登录处理页面
home_exit.php:退出程序
项目主页文件
home_index.php:贴吧主页
home_publish.php:发帖页面
home_publish_handle.php:发帖处理程序
项目详情页文件
home_details.php:帖子详情页
home_reply.php:帖子回复程序
下面我们来开始从零构建我们的项目吧。
nächsten Abschnitt