php增添删改界面,0070 PHP编程前端网站增加新闻信息显示功能

news/2024/5/8 20:38:31/文章来源:https://blog.csdn.net/weixin_31645409/article/details/115390220

原标题:0070 PHP编程前端网站增加新闻信息显示功能

上节课完成了整个后台网站的功能开发,可以新建编辑删除查询新闻信息数据。

这节课来到前端网站,增加新闻信息一览显示页面和详细页面。

编写新闻一览网页

一览页面可以参照后台的一览查询页面,但是不需要查询条件了,而且翻页的方式要修改一下,确保每次传递的数据只有当前页的数据。

f_news_list.php代码如下:

272cc72b7903c7119679efc8efd77576.png

89d5e7129f5f7ff907e5d31876742899.png

f_news_list_do.php代码如下:

95a44717b341c193fd91cd101eeaf3dd.png

news.css代码修改如下:

20db3ed9b1e67bde708424fd4234cb19.png

先登录到后台网页,增加记录数总共5条:

022386b9616e565012e12f032176091c.png

然后通过浏览器直接访问网页url地址:

8928381594dc0c0a2c5525f009bf09e2.png

可以看到当前页显示了2个新闻,并且出现了页数,点击第2页:

61d0fc274ffa3dfa1ac04773dd66ee6e.png

可以看到正确的数据显示出来了。

编写新闻详细显示网页

详细页面就是除了要显示主表信息,同时通过循环显示详细表的信息。

f_news_detail.php代码如下:

ae00890717deeefbeba64c72c8e03e3b.png

1b7104c39353576adb3e1b9f30e94bb1.png

f_news_detail_do.php代码如下:

eaf8e1fef96fe8a1ce5ba3dc9153438a.png

news.css代码修改如下:

13726cc3d2c5e248d5608fe5e2de4f8c.png

通过浏览器访问新闻一览页面:

eb59a508cb00d628648e7f026f29c3da.png

然后点击第一个新闻,进入详细页面:

fedf704f15520a66ef8b48595f4aab4b.png

可以看到,按照设置的数据,正常显示了内容和图片等信息。

去后台管理功能页面,将此新闻的详细增加到2个图和2段文字:

689ec641ed564ef0d78df7f763367d0b.png

然后回到前台新闻详细页面,刷新:

ce424979b4f3ec89f193615eec5b0102.png

可以看到显出出2个图片和对应的文字内容了。

整体测试

将之前的翻页的参数调整一下,修改为10条记录翻页:

news_list_do.php修改如下:

5bb23aa65b49da606d49342a1a82041a.png

f_news_list_do.php修改如下:

57dd487781707726e1aa044989552485.png

然后在之前编写的index.html当中增加一个链接,可以链接到新闻一览显示页面。

index.html修改如下:

74d24b627c4727cdbf3385f4476e6d07.png

刷新index.html网页:

00c603865c996fb6910f2cd53afa44f2.png

点击“新闻信息一览”按钮:

29c6808cffc6a7698a3e8d0b73340774.png

然后通过后台管理页面,增加更多的数据,然后通过前端页面去浏览看看是否功能正常。

云服务器创建数据库和表结构

首先,要到云服务器的数据库系统中创建数据库student以及对应的表studentscore、content和contentdetail。

创建之前,需要先准备好创建数据库和表的SQL语句。

可以从之前的数据库客户端软件当中导出。

打开数据库客户端软件,并打开连接和数据库:

a77c79339f596a070e2ebabf98c6f79d.png

然后在数据库student上面右键,选择菜单“转储SQL文件”:

1b84fd0d952acf01d3a56edca4456518.png

然后点击“保存”按钮:

b7cba9163a043dacdf0ed9654d981909.png

可以看到生成完成。点击关闭按钮。

然后去文件管理器当中找到这个student.sql文件,用文本编辑器打开:

4b6e39498124d3ff5cde95c01f2d8228.png

可以看到是关于创建表结构的SQL语句,以及新增数据的SQL语句。删除掉注释语句和新增数据的SQL语句,最后保留如下:

529ed7409a1982d24c38517052e02bd3.png

然后将此文件student.sql通过scp命令或者winscp软件上传到云服务器的home目录下:

6654335a3c180b49d6ae41dbb5fea955.png

然后,通过ssh命令或者putty程序远程登录到云服务器,并进入/home目录,通过ls命令查看是否存在student.sql软件:

979184ccc0d484feadadb335fe709052.png

确保存在此文件,然后运行以下命令,进入mysql客户端软件程序,进行创建数据库的操作和创建数据表的操作

#mysql -uroot -p回车

输入数据库密码

mysql>show databases;回车

显示当前有几个数据库

mysql>create database student default character set utf8 collate utf8_general_ci;回车

创建一个数据库名字是student,字符集是utf8

mysql>show databases;回车

显示当前有几个数据库,应该多了一个student数据库

mysql>use student;回车

进入student数据库

mysql>show tables;回车

查看当前数据库有几个表

mysql>source /home/student.sql; 回车

执行sql文件

mysql>show tables;回车

查看当前数据库有几个表,应该看到多了3个表studentscore、content和contentdetail

mysql>select * from content;回车

查询content表中的数据,应该没有记录

mysql>quit回车

退出mysql客户端程序,回到linux系统环境

以上步骤就是创建一个数据库student以及创建3个表的过程。

步骤截图如下:

58c380fb053c55cf82906866637385a3.png

5ee114f6e1042f430c55dee26b368e80.png

如果完成以上步骤,下一次再进入数据库,查询数据的话,就只需要以下步骤即可。

#mysql -uroot -p

mysql>use student;

mysql>select * from content; 或者其它SQL语句

mysql>quit

代码更新部署到云服务器

将需要更新的文件整理一下,然后上传到云服务器。

更新文件列表如下:

check_auth.php

common.php

entity.php

f_news_detail_do.php

f_news_detail.php

f_news_list_do.php

f_news_list.php

index.html

login_do.php

login.php

news_detail_do.php

news_detail.php

news_index.php

news_list_do.php

news_list.php

news.css

news.js

top.php

上传之前,需要注意如果云服务器的MySQL设置的root用户的密码和本地服务器的MySQL设置的密码如果不一样的话,需要修改:

entity.php修改如下:

2dc452f6d83db4d609cd5c7fd4f9ebac.png

然后到云服务器的Web目录下增加upload目录,例如ubuntu服务器创建/usr/share/nginx/html/upload目录。

并将改目录的权限修改为755:

#cd /usr/share/nginx/html

#mkdir upload

#sudo chmod 777 -R upload

步骤截图如下:

1323bc3207774c159f1ab4d93239be48.png

上传完成之后目录文件如下:

dec561722ca8334f1bfbf2ec4e012f13.png

通过域名访问云服务器并测试

然后通过域名访问网站:

262766be6da0e8d4a387bf84433f211a.png

可以看到多了一按钮,点击“新闻信息一览”按钮:

cf3ea77bdf3b7d515d300369564b6d61.png

发现页面没有打开新的窗口并显示新闻信息一览页面,反而是变成了下载php文件,这是因为之前云服务器没有做php的相关配置。

通过ssh或者putty登录到云服务器,执行如下命令:

#sudo apt-get install -y php5 php5-mysql php5-fpm

#sudo vi /etc/nginx/site-enabled/default

修改成以下这样:

cb01d8025030f613952f4316b4138222.png

然后输入:wq,保存退出。

完成编辑配置文件之后,运行命令重启php5-fpm和nginx:

sudo service php5-fpm restart

sudo service nginx restart

然后重新刷新首页,点击“新闻信息一览”按钮:

43a89406313af3853987c2351dd4488c.png

可以看到进入了新闻信息一览查看页面,但是由于数据库没有新增数据,所以是空的页面。

通过直接输入url地址进入后台管理功能页面,进行新闻信息的管理:

af6fe0b6cdc4f2ce2764a5f4dce5b117.png

输入用户名和密码,点击登录,发现提示错误“登录超时或没有权限,请重新登录!”,经过检查,发现login_do.php有一个问题,在第一行缺少一句session_start();函数调用。由于之前的运行环境是phpStudy,这个和ubuntu的php配置是不一样的。所以必须要增加这一句。

login_do.php修改如下:

a63df4502ae3407a61f3a4ea63b3540c.png

修改之后,重新上传此文件到云服务器,然后重新登录,这次可以进入后台主页面:

7bb774148b218821d8fef1325b87b54e.png

然后点击菜单进入新闻信息管理页面:

00b4b32ebcbd265001f6e4e027d0d9ae.png

然后可以进行数据维护操作。插入2条数据:

8641de3b806f3a3a3e65acb805ed136a.png

回到前端新闻信息一览查看页面,刷新页面:

23a38d45a793a75afd7a325a2e6de7e4.png

点击某个新闻,进入详细页面:

7c374ce3a19f1b20f8a40f29c1c5ae5d.png

可以看到正常信息的显示。

第4章小结

第4章主要介绍了PHP语言,并结合HTML、CSS和Java编写动态数据网站,同时学习了SQL语言的基本知识,并学会使用MySQL数据库进行数据查询和更新操作。

然后通过2个实例,学生分数信息管理和新闻信息发布管理,来练习如果将所有的知识融会贯通,实现最基础的网站页面功能。

下一章,将通过一个更接近实用的例子:图书馆管理系统,来复习和巩固前面学习的知识:HTML+CSS+Java+PHP+MySQL实现经典网站。返回搜狐,查看更多

责任编辑:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_760005.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于django的视频点播网站开发-step7-我的收藏喜欢功能...

从本讲起,我们会讲到个人菜单中另外两个比较重要的功能,“我的收藏”与“我的喜欢”。感兴趣的同学可以点击网站的右上角,即可弹出个人菜单,你就能看到“我的收藏”与“我的喜欢”了。通过学习这两个功能,我们会加深对…

SEO优化,网站沙盒期,到底存在吗?

对于SEO人员而言,特别是新建立的网站,我们经常会遇到一个非常常见的问题: 那就是新建页面长时间不被收录,而网站索引量却在不断增加。 网站日志中的爬行,也非常频繁。 这个时候有人讲,网站进入沙盒期…

大型网站技术架构(二)架构模式

2019独角兽企业重金招聘Python工程师标准>>> 每一个模式描述了一个在我们周围不断重复发生的问题及该问题解决方案的核心。这样,你就能一次又一次地使用该方案而不必做重复工作。 所谓网站架构模式即为了解决大型网站面临的高并发访问、海量数据、高可靠…

hexo 本地编辑md文件_「原创」手把手教你使用Hexo和GitHub搭建自己的个人博客网站...

安装nodejs环境这个直接搜索安装即可,安装完成之后,通过如下命令检测环境变量是否安装成功:λ node -v# 输出版本号v12.13.1正确输入版本号即可。安装cnpmcnpm是淘宝镜像,可以加快依赖的安装速度npm install cnpm -g --registryht…

第一次网站设计 请大家多多指点

第一次做网站设计 这是一个ASP.NET 鲜花网 希望大家能多提点意见 改善它完善它。谢谢了! 转载于:https://www.cnblogs.com/Simcoder/archive/2010/04/06/1705220.html

漂亮的html静态页面_静态网页对网站建设越来友好

企业网站建设开发设计了网站內容智能管理系统,这就引起一个问題,针对企业公司来讲,在执行网站建设新项目的情况下,静态数据化的html网页页面,更合适企业进行互联网营销。就算有时候有网站內容升级,要是不经…

html搜索框_SEO搜索引擎的工作原理

了解一下搜索引擎优化的原理,就会知道为什么要这样做了。第一步:蜘蛛爬行轨迹搜索引擎是通过一种特定规律的程序跟踪网页的链接,从一个链接爬到另外一个链接,像蜘蛛在蜘蛛网上爬行一样,所以被称为“蜘蛛”也被称为“机…

We7荣获“政府网站群建设最佳产品奖”

8月23日,由中国信息化推进联盟、中国计算机行业协会、中国计算机报社等国家信息化领域权威机构和权威媒体共同组织开展的“第四届中国行业信息化奖项评选活动暨2012中国行业信息化颁奖盛典”在北京国宾酒店隆重举办。来自行业信息化领域的500余位企业代表、政府领导…

蜘蛛搜索引擎_搜索引擎蜘蛛为什么对网站不爬行呢?

在网站的优化过程中,很多优化人员都会遇到网站不经常收录,或者网站日志里都没有蜘蛛爬行的情况,如果新站遇到这样的问题还算正常,但是长期网站不被收录,网站就不会有排名和权重,更不会给企业带来更多的好处…

两青年更改源代码 “黑”十多家政府网站, 不是技术高,是政府网站安全性太低...

[提要] 两名19岁青年,利用后门程序先后侵入最高检察院等十多个政府机关的官方网站后台,更改网页源代码为其他网站牟利。公诉人提出,范某、文某侵入国家事务领域的计算机信息系统,多次利用后门程序非法控制非国家事务、国防建设和…

python plt画图_「figure」【Python】 【绘图】plt.figure()的使用 - seo实验室

figure 1.figure语法及操作 (1)figure语法说明 figure(numNone, figsizeNone, dpiNone, facecolorNone, edgecolorNone, frameonTrue) num:图像编号或名称,数字为编号 ,字符串为名称 figsize:指定figure的宽和高,单位为英寸; dpi参…

从零开始编写自己的C#框架(25)——网站部署

导航 1、关掉访问保护 2、发布网站 3、复制网站到服务器 4、添加新网站 5、设置网站访问权限 6、设置文件夹访问权限 7、控制可更新文件夹执行权限 8、设置“应用程序池”.net版本与模式 9、附加数据库 10、添加数据库访问用户 11、设置数据库链接 12、部署注意事项 对于网站的…

转载——网站转接支付宝解决方案

大型网上购物系统除了能让会员选择货到付款结账方式外,还应该提供一些更方便快捷的网上支付方式。如果网上商店没有足够的实力提供会员直接在网站中建立现金账户的功能,就可以将订单信息转接到支付宝,让会员从支付宝付款。当然就算会员可以在…

网站回到顶部按钮JS

为什么80%的码农都做不了架构师&#xff1f;>>> <script type"text/javascript"> $(function(){$(window).scroll(function(){$(window).scrollTop()>1000 ? $("#gotopbtn").css(display,).click(function(){$(window).scrollTop(0)…

让网站动起来!12款优秀的 jQuery 动画插件推荐

如今&#xff0c;大多数设计师和开发人员被要客户要求开发动态的网站。创造视觉震撼和醒目的动态网站是艰巨的任务&#xff0c;因为它需要大量的努力和创造力。在网络上有大量的工具和插件可用于创建网站动画。许多开发人员正在使用 HTML5 和 jQuery 提供的最新功能来创建创建和…

在网站中使用Bing Translator插件翻译文章。

前一阵子给项目增加了翻译的功能&#xff0c;用的是Bing Translator Widget,今天看见有个兄弟写自定义自己的博客&#xff0c;我就尝试着把这个插件加到了自己的博客中。还真的好用。大家先看下效果&#xff0c;觉得好的请继续往下看。方法很简单的。 方法&#xff1a; 1.先去官…

curl网站开发指南

文章转自&#xff1a;http://www.ruanyifeng.com/blog/2011/09/curl.html 作者&#xff1a; 阮一峰 日期&#xff1a; 2011年9月 4日 感谢 腾讯课堂NEXT学院 赞助本站&#xff0c;腾讯官方的前端课程 免费试学。 我一向以为&#xff0c;curl只是一个编程用的函数库。 最近才…

VS2012发布网站详细步骤

1、打开你的VS2012网站项目&#xff0c;右键点击项目》菜单中 重新生成一下网站项目&#xff1b;再次点击右键》发布&#xff1a; 2、弹出网站发布设置面板&#xff0c;点击<新建..>,创建新的发布配置文件&#xff1a; 输入你自己定义的配置文件名&#xff1a; 3、点击下…

MVC5 网站开发之四 业务逻辑层的架构和基本功能

业务逻辑层在Ninesky.Core中实现&#xff0c;主要功能封装一些方法通过调用数据存储层&#xff0c;向界面层提供服务。 目录 奔跑吧&#xff0c;代码小哥&#xff01; MVC5网站开发之一 总体概述 MVC5 网站开发之二 创建项目 MVC5 网站开发之三 数据存储层功能实现 MVC5 网站开…