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

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

编写新闻一览网页

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

f_news_list.php代码如下：

image image

f_news_list_do.php代码如下：

image

news.css代码修改如下：

image image

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

image

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

image

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

image

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

编写新闻详细显示网页

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

f_news_detail.php代码如下：

image image

f_news_detail_do.php代码如下：

image

news.css代码修改如下：

image

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

image

然后点击第一个新闻，进入详细页面：

image

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

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

image

然后回到前台新闻详细页面，刷新：

image

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

整体测试

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

news_list_do.php修改如下：

image

f_news_list_do.php修改如下：

image

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

index.html修改如下：

image

刷新index.html网页：

image

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

image

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

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

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

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

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

打开数据库客户端软件，并打开连接和数据库：

image

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

image

然后点击“保存”按钮：

image

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

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

image

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

image

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

image

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

image

确保存在此文件，然后运行以下命令，进入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个表的过程。

步骤截图如下：

image image

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

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修改如下：

image

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

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

cd /usr/share/nginx/html

mkdir upload

sudo chmod 777 -R upload

步骤截图如下：

image

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

image

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

然后通过域名访问网站：

image

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

image

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

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

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

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

修改成以下这样：

image

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

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

sudo service php5-fpm restart

sudo service nginx restart

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

image

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

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

image

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

login_do.php修改如下：

image

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

image

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

image

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

image

回到前端新闻信息一览查看页面，刷新页面：

image

点击某个新闻，进入详细页面：

image

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

第4章小结

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

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

下一章，将通过一个更接近实用的例子：图书馆管理系统，来复习和巩固前面学习的知识：HTML+CSS+JavaScript+PHP+MySQL实现经典网站。