为了账号安全,请及时绑定邮箱和手机立即绑定

0067 如何编程开发一个新闻发布功能网站

标签:
PHP

上一节课完成了一个学生分数信息管理网页的全部功能,并初步学习了如何使用PHP编程语言调用MySQL数据库实现数据的动态管理。

这节课来学习编写开发一个完整的网站,包含后台数据管理功能和前台网站的展示功能,并学习多个数据表的关联管理,以及图片的后台上传和前台显示功能。这些内容可以要分几节课完成。

网站功能设计

来做一个新闻发布功能网站。主要功能分2部分:

第1部分是需要一个后台管理系统,可以登录,然后可以查询目前的新闻信息,并且可以新建、编辑和删除新闻信息。一个新闻有标题,作者,发布时间,然后包含有多个图片或者文字信息。

第2部分是需要在前台网站上一览显示新闻的标题作者和发布时间,点击标题之后,进入新闻详细显示页面,从上往下依次显示标题,作者,发布时间,然后下面是显示具体的多个图片或者文字信息。

接下来,使用PowerPoint软件来做界面设计,将脑海中设想的页面画出来,然后从头到尾进行确认逻辑的连贯性和完整性,确保设计是合理的,没有矛盾之处,并同时考虑界面设计的美观性,如果有可能的话,最好是由专业的美工人员使用专业的设计软件画出精确的界面设计图,然后编程人员就能够按照设计要求更准确的实现画面样式。

登录页面:

webp

image

后台主页面:

webp

image

为了练习和实践主菜单功能,将之前编写好的学生分数管理功能添加进来,这样就有2个菜单,可以学习如何编写菜单功能。

后台学生分数一览页面:

webp

image

后台新闻信息一览页面:

webp

image

后台新闻详细页面:

webp

image

前台新闻一览页面:

webp

image

前台新闻详细页面:

webp

image

数据库表结构设计

根据新闻信息一览和详细页面的显示内容进行分析,新闻信息的数据主要有2大块,1块是一个新闻信息的ID、标题、作者和发布时间。另外1块每一个新闻的具体内容有详细ID、序号、图片文件名或者文字内容。1个新闻信息可能包含多个详细内容。

这里的信息如果用一个表来存储的话就不是很方便,因为1个新闻包含多个详细内容,如果将详细内容作为记录的字段,则标题和作者和发布时间存在详细记录字段上就需要重复记录,这样会有数据冗余。

这时候,可以考虑采用主从表的方式。

新闻信息主表,里面的字段为新闻ID、新闻标题、作者和发布时间。

新闻信息从表,里面的字段为新闻ID、详细ID、序号、图片文件名和文字内容。

主从表之间通过相同的新闻ID进行关联。也就是新闻ID一致的话,则新闻信息主表就能找到对应的新闻信息从表了。

设计好的数据库结构如下:

webp

image

根据数据库的设计,使用数据库客户度软件手工创建表到数据库student里面。

创建表content如下:

webp

image

创建表contentdetail如下:

webp

image

程序结构设计

这里出现了很多个页面,有一些共通的页面,所以需要考虑程序的结构设计,将共通的功能抽取出来集中在一起,多个页面都可以复用,减少代码的冗余性,提高系统的可维护性。

一个系统要编写出来,事先要考虑很多东西,先想好再开始编写,可以更有的放矢,心中有一个清晰的结构,能有效的提高开发效率。

首先是给每个页面定义2个php文件如下:

登录页面:login.php 和 login_do.php

后台主页面:news_index.php

学生分数管理页面:保持原来的文件不变

后台新闻一览页面:news_list.php 和 news_list_do.php

后台新闻详细页面:news_detail.php 和 news_detail_do.php

前台新闻一览页面:f_news_list.php 和 f_news_list_do.php

前台新闻详细页面:f_news_detail.php 和 f_news_detail_do.php

然后考虑到多个页面的上方显示系统名和用户名和退出按钮以及主菜单栏都是一样的,可以做一个共同的top.php页面。

然后考虑将所有的CSS文件都放到一个news.css文件中。

然后将所有的JavaScript代码都放到一个news.js文件中。

然后将PHP代码中和数据库有关的代码都放到entity.php文件中。

然后将一些共通性的处理函数以及一些定义都放到common.php文件中。

然后将权限检查的代码放到一个check_auth.php文件中。

登录页面

后台管理系统是只能由特定的人员登录上去之后才能访问,处于安全考虑防止任何人都可以进入后台管理系统随意编辑新闻信息,因为需要一个登录页面,只有登录成功之后,才能进入新闻信息管理页面进行新增或编辑数据记录。

后台管理页面是需要登录才能访问的,而前台新闻一览页面和详细页面是不需要登录,任何人都可以访问的。这就是前台和后台的区别。

登录页面比较简单,就是一个账号输入框和一个密码输入框。

点击登录按钮后,检查账号和密码是否正确,正确的话则页面迁移到后台主页面,错误的话则显示消息。

账号和密码判断暂时就是固定的唯一的,未来可以考虑从数据库中查询后判断是否正确。

login.php文件如下:

webp

4-13-11.jpg

webp

image

login_do.php文件如下:

webp

image

news.css文件如下:

webp

4-13-14.jpg

webp

image

webp

4-13-16.jpg

news.js文件如下:

webp

image

common.php文件如下:

webp

image

使用浏览器打开网页:

webp

image

不输入账号和密码,点击登录:

webp

image

不输入账号,点击登录:

webp

image

不输入密码,点击登录:

webp

4-13-22.jpg

输入错误的账号或者密码,点击登录:

webp

image

可以看到错误消息提示。

输入正确的账号admin和密码123456,点击登录:

webp

4-13-24.jpg

由于后台主页面还没有开发,所以提示网页不存在。

使用session来控制权限

可以看到前面登录login_do.php文件当中有一段代码,也就是账号和密码正确之后的处理,除了页面迁移之外,还做了一件事情,就是将账号和用户名保存到session当中了。那么session是什么和怎么用呢?

session的主要作用就是为了保持多个页面之间的数据交互,在多个网页之间进行数据共享而设置的。

将某个数据保存在session当中之后,浏览器和Web服务器之间每次交互都会将这些数据来回传递,保证每次都能取得这些数据。

这样就不需要每个页面都去重复填写和提交这些数据,这个工作就交给浏览器和Web服务器来完成。

只用在需要的页面中通过session读取方法读取出这些存储的数据就可以达到多页面之间数据共享的目的了。

这里将登录账号和对应的用户名保存在session当中,目的就是为了后续页面访问显示出用户名,并且通过访问这2个变量是否存在数值,就可以判断出是否通过了登录页面,因为只有登录成功了才会有这2个数据,如果登录不成功则不会有这2个数据。因此在后面的页面中通过判断这2个数据就能知道是有权限进入的还是没有权限进入的页面。

来编写权限检查的文件,check_auth.php文件如下:

webp

image

如果检查到没有登录或者登录后长时间未动作导致Session超时,则跳转到login.php页面。

那么login.php就需要处理这个错误提示。

login.php修改如下:

webp

4-13-26.jpg

这个文件编写好之后,在需要检查权限的网页文件当中引用这个文件就可以达到检查权限的目的了。

编写后台主页面以及菜单功能

登录成功之后,进入一个后台主页面news_index.php,上面是调用top.php。

先来编写top.php文件如下:

webp

image

然后编写news_index.php文件如下:

webp

image

news.css文件修改如下:

webp

image

webp

4-13-30.jpg

webp

image

news.js文件修改如下:

webp

4-13-32.jpg

先来测试如果没有登录,直接去反问news_index.php网页是什么情况。

新开一个浏览器窗口,输入网址news_index.php:

webp

image

然后回车访问:

webp

image

可以看到提示了错误消息,页面跳转到登录页面了。

这里就是check_auth里面的代码起作用了。

由于news_index.php的文件开始的地方调用了check_auth.php,然后check_auth.php里面检查了是否有登录的账号和名称是否存储在session当中,如果检查发现没有则网页跳转到login.php并且带一个参数from=error。然后在login.php的下面根据fromtype获取了的值如果等于error,则说明是没有登录的错误,则提示相应的错误信息。

同样的,如果直接在浏览器网址输入top.php进行访问,也是一样的提示这个错误。

接下来,测试正常登录的情况。

然后打开登录页面,输入正确的账号admin和密码123456,点击登录按钮:

webp

image

这里可以看到进入了后台主页面,上面是top部分,有系统名称,登录名称和退出按钮。

下面是2个主菜单。

点击退出按钮,就会回到登录页面。

点击“学生分数”菜单:

webp

4-13-36.jpg

弹出一个新窗口,显示了学生分数一览查询页面。

点击“新闻信息”菜单:

webp

image



作者:零基础学编程by学哥


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消