写给PM及UI的PHP教程丨文章管理系统后台界面框架设计

第二章，第一节课程我们根据需求陈列过所需要开发的功能。在这里再重复列一下。

功能列表：

一、 栏目管理

1. 创建栏目：可以输入栏目名称并提交。

2. 修改栏目：可以指定修改已发布的栏目名称并保存。

3. 删除栏目：可以指定删除已发布的栏目。

4. 栏目列表：以列表的形式显示已发布的栏目。（显示内容：栏目名称，更新时间）

二、文章管理

1. 创建文章：可以发布文章到指定栏目。（选择栏目，输入标题，输入正文）

2. 修改文章：可以指定修改已发布的文章并保存。（修改栏目，修改标题，修改正文）

3. 删除文章：可以指定删除已发布的文章。

4. 文章列表：以列表的形式显示已发布的文章。（栏目名称，文章标题，发布时间，更新时间）

5. 列表分页：对文章列表进行翻页查看。

根据以上功能需求，在AXURE里画原型的话。大概就是如下了：

这是一个非常常见布局，其他页面我也就不陈列了，估计各位PM和UI也都能想得到其他页面是什么样子的。

根据以上原型我们把需要的页面和文件夹准备出来。

到我们的站点目录下创建images、css、inc、js、admin五个文件夹。

images文件夹用于存放网站相关的图片，css文件夹存放样式表css文件，js文件夹存放javascript文件，admin就是后台管理系统的路径。inc文件夹存放一些配置文件，如mysql_connect、date_default_timezone_set等指令在网站中到处都需要调用掉，所以一般会存放到配置文件中，而后通过include等方法在其他页面里调用。inc就是include的缩写。

下一步就是创建各个具体的页面。

打开DW创建一个PHP页面，在body标签之间输入后台管理系统，并保存为header.php到admin文件夹。

再依次创建left.php页面和main.php页面，各输入“左侧菜单”和“欢迎进入后台管理系统”。

再创建一个PHP页面，切换到设计视图。选择插入(INSERT)>布局(LAYOUT)>框架集(FRAMESET)中与我们的页面结构一样的框架集。如下图：

如果弹出提示就直接点击确定。创建成功之后什么操作都不要做直接按CTRL+S保存为index.php到admin文件夹下。

保存好之后也不要点其他地方，直接切换到代码视图。可以看到如下结果：

把其中src=””中的页面地址依次改成header.php，left.php，main.php。frameset cols=80中的数字改成200。改好之后保存。代码如下：

这时候我们再切换到设计视图可以看到如下结果。

这下大家应该明白了，框架集FRAMESET中的每一个区域都是一个独立的页面。这3个独立的界面通过框架集整合到了index.php这个页面成为了一个完整的页面。

我们用鼠标点击某个区域内，并切换到代码视图可以看到代码中并不是index.php这个页面的代码，而是你所选中的区域的页面代码。

为了美观，我们先把顶部和左侧颜色修改一下吧。代码如下：

bgcolor顾名思义就是背景颜色，颜色大家可以在DW中的拾色器中选择自己喜欢的任意颜色。

现在到浏览器中打开http://127.0.0.1/cainiao/admin/ 进入我们的后台管理系统，我们可以看到雏形了。

现在创建网站中共用的配置文件。

在DW中创建一个PHP页面，把页面内的代码删掉并改成如下代码，保存为config.php到inc目录下。

都是比较熟悉的代码了，不过仔细看第6，7行可以看出有一些细微的变化。

在第6行中我们把mysql_connect的连接结果赋值到了变量$con中。为什么要这么做呢？看下第7行的mysql_select_db指令，之前的章节中该指令后面的括号里只有一个db名称study，但这次多了个$con。

mysql_select_db的正规格式中是需要指定mysql连接的，虽然说不指定也会默认调用最后一个连接，但如果在一个项目中有多个数据库连接的时候不指定连接的话会容易给自己挖坑。而且保存到一个变量之后我们可以在其他页面很方便的调用该变量就可以了，不需要重复抒写mysql_connect(“127.0.0.1″,”root”,”123456″); 啊date(‘Y-m-d H:i:s’,time()); 等这么长的指令。如数据库密码改了，我们只要改一下这个变量后面的指令中的密码就可以了。

在这里以备后面掉用我们定义了3个变量$nowtime，$con，$db_select。

变量

变量是什么？变量是存储信息的容器。

关于变量的具体详细说明请参照：http://www.w3school.com.cn/php/php_variables.asp

回到DW中创建一个新的PHP页面，删除所有代码并输入以下代码。

保存为article_list.php到admin目录下。

以此类推创建article_add.php、article_edit.php、article_view.php到admin文件夹，依次是添加文章，编辑文章，查看文章。

继续创建category_list.php、category_add.php、category_edit.php，依次是栏目列表，添加栏目，编辑栏目。

在DW中创建php页面，代码改成如下图所示，并保存为article.php到admin文件夹。

同理创建category.php到admin文件夹下，代码如下：

相信通过上一节内容的学习，大家也都知道这两个页面是做什么的了。在这里就不再重复了。

在这里我们来说一下include(‘../inc/config.php’);，大家也都知道这段代码的作用是把config.php包含到当前页面的。

不过在config.php前面多了个../inc/，这个估计猜也不难猜，是我们文件夹路径。由../开头的路径叫相对路径，指向的是当前文件所在目录的上一级目录。我们的当前文件存放在admin目录下，admin目录的上一级目录自然是我们的站点目录D:PHPnowhtdocscainiao。显然../inc/指向的是D:PHPnowhtdocscainiaoinc目录。../可以出现多次，出现多少次就代表着目录向上多少次。如在这里../../cainiao/inc和../inc/是一样的。

用DW打开left.php，把body标签之间的左侧菜单4个字删掉输入如下代码。

在浏览器中打开http://127.0.0.1/cainiao/admin/，可以看到如下结果：

点击左侧的菜单可以看到，右侧白色区域的内容有变化。a标签中的target起到了这个作用。在DW中打开index.php页面我们可以看到name=”topFrame”，name=”leftFrame”，name=”mainFrame”这样的代码。在左侧菜单里a标签中通过target指向到了名称为mainFrame框架，使得a标签中的链接页面article.php或category.php在框架mainFrame中打开。

ul和li是HTML语言中的列表，ul代表着列表li代表着该列表中的每一行。ul也可以写成ol，ol是有序列表，ul是无序列表。大家可以试试把ul改成ol。不过一般用到ol的情况非常少。

下一步我们就把前2节课程开发的内容，集成到这个框架里来吧。

DW中打开category_list.php，新增两行代码，如下代码中的3，4行：

在这里，target中我们用到了_self属性。

target

target可用于指定某个框架以外还有可以指定的几个属性。

_blank：始终在不同的新窗口中打开链接。 _new：始终在同一个新窗口中打链接。 _self：在当前框架中打开连接，如页面内无框架则在当前的浏览器窗口中打开链接。 _top：不管有没有框架都在当前浏览器窗口中打开链接。 _parent：在父框架中打开链接，如果当前没有框架或者在顶级框架中，效果等同于_self 最常用的几个是_blank、_self、_top，如果省略掉target，默认会被视为_self

在DW中打开admin文件夹下的category_add.php，把上一节我们做好的category_add.php页面中的form部分代码复制过来。

打开category.php，在 } elseif($_GET[‘act’]==edit) { 上方插入如下三行代码：

现在访问http://127.0.0.1/cainiao/admin/，通过正常的流程添加栏目试试吧。

是不是感觉有点项目的雏形了？

本节的内容到这里就结束了，我们在本节通过框架集frameset和框架frame来构建了后台操作界面的架构，框架集因为有可以自适应不同分辨率的特性，非常适合作为像后台界面这种结构相对单一的页面时使用。但并不太适合做用户端页面。

本节作业：

通过在DW中插入不同板式的框架集，调整cols和rows来熟悉框架集结构。