写给产品经理及UI的PHP教程丨文章管理系统栏目列表

在本节课程我们要做一个栏目列表来显示出我们已经插入进去的栏目数据。主要的知识点有如何通过mysql语句对数据库进行查询并通过while循环语句呈现数据。

这节课的主要知识点是数组和循环语句。仅仅是掌握好数组和循环语句，我们能做的功能就已经多的想象不到。

什么是数组？

通俗点说就是数据的组合。拿我们栏目数据中的第一条数据来举例子的话，他的cat_id是“1”，cat_name是“娱乐”,update_time是“2015-10-30 16:30:00”。引号中是对应他的字段名的值。当我们需要把这样的多个值存储到一个变量中的时候就需要用到数组。

创建数组

在PHP中我们通过array函数创建数组，方法如下：

打开admin文件夹下的category_list.php，增加下方代码。

在代码中，我们通过array函数创建了数组，并把该数组赋值到了变量$cat_array，然后用print_r函数打印了该变量。运行后可看到如下结果。

在这里我们使用了print_r，没有使用echo。因为$cat_array的值在这里是个数组。用echo输出$cat_array的话输出的结果是array，告诉你这个值是个数组。但print_r是可以把这个数组的结构打印出来。

但是我们可以用echo来输出该数组里面包含的每一个独立的值。代码如下：

运行之后可以看到，输出了1、娱乐以及2015-10-30 16:30:00。在上方的图中我们可以看到[0] => 1，意思就是[0]对应1。依次是[1]对应娱乐，[2]对应2015-10-30 16:30:00。数组中括号[]中的数字是该数组的key(键)，每个key对应一个值。数组中的key有点类似我们之前讲过的数据库中的自增ID，只不过key默认是从0开始的。key不仅可以是数字也可以是英文，中文等。

我们可以在创建数组的时候自定义key，代码如下：

代码中通过变量名+key的方式输出了每一个key对应的值。在数组中没有定义key的时候key的值默认从0开始递增。

下一步我们尝试查询数据库，并把结果转换成数组的形式。代码如下：

mysql_query(“SELECT * FROM category”);这段代码会对数据库中的数据表category进行查询并获得一个结果集。我们把这个结果集赋值到了变量$category。这个结果集中含有表category的所有数据，并以每行一条数据的形式存储着。大家可以把这个结果集想象成是一堆不明觉厉的代码，就像一个图片文件用记事本打开的话里面是一堆代码，但用看图软件打开的话是一个图片一样的道理。

SELECT * FROM category的意思是从category表中选定所有字段的意思。*代表着所有，也可以指定字段，代码如下：

在一些大型项目中，为了提高运行效率会指定字段。

我们把保存好的结果集通过mysql_fetch_array函数从这个结果集中取了一行结果，转换成了有形态的数组。

运行可以看到如下结果：

Array ( [0] => 1 [cat_id] => 1 [1] => 体育 [cat_name] => 体育 [2] => 2015-10-28 14:04:40 [update_time] => 2015-10-28 14:04:40 )

可以看到每个值都出现了两次，并且有对应的key有自增数字形式和以字段定义的形式。当然我们也可以在mysql_fetch_array中定义数组类型，只获得我们想要的数组类型。代码如下：

数组类型有三种，MYSQL_ASSOC、MYSQL_NUM、MYSQL_BOTH。大家可以替换试试，在不指定类型的情况下是以MYSQL_BOTH形式出现。一般不指定也无所谓，因为数据库中的字段名不可能是纯数字，所以也不会出现key重复的情况。

我们现在学会了如何查询数据库，并保存为数组，在把数组中的每个key对应的值输出出来。下一步学习通过循环语句把数据库的所有数据循环输出出来。

先看一个经典的例子。

运行后可以看到如下结果：

这个数字是：1

这个数字是：2

这个数字是：3

这个数字是：4

这个数字是：5

我们定义了变量$x并给其赋值1，while后方的括号中是该循环语句的运行条件，当满足该条件的时候才会执行大括号中代码，也就是变量$x的值小于等于5的时候才会执行。

++是php中的运算符，意思是自增1。

所以该循环语句在程序中的运行过程是这样的。

$x=1，所以1<=5是成立的，执行echo “这个数字是：1″;然后通过$x++变量$x的值变成了2，回到while条件部分2<=5成立，执行echo “这个数字是：2″;再通过$x++变量$x的值变成了3……一直到执行5次之后$x的值变成了6，回到条件部分6<=5是不成立的所以不再执行，循环停止。

现在大家应该对while循环有了一定的理解，我们结合上面的所有内容写出如下代码：

在这里比较特殊的地方是我们把$r=mysql_fetch_array($category)写在了while的条件里面，当mysql_fetch_array在循环语句中执行的时候，他会在结果集获取第一行转换为数组之后，讲进入待命状态准备获取第二行。循环执行第二次的时候执行获取第二行。一直到获取到最后一行之后结束。

不可把$r=mysql_fetch_array($category)放到外面之后写成while($r)，这么写的话因为$r已经在循环外面定义死了，是获取到的第一行数据，循环语句讲进入一个无限循环的死局。大家可以试试。

运行后讲得到如下结果：

1 体育 2015-10-28 14:04:40

2 娱乐 2015-10-28 14:04:54

3 政治 2015-10-28 14:05:00

4 军事 2015-10-28 14:08:01

这样就算完成了我们的列表功能了。但是这样太丑陋了，我们来把他弄成一个表格吧。

在DW代码视图中打开category_list.php，不要管现在已经有的代码。在代码的下方插入一个表格。按ctrl+alt+t，在出现的界面中各项数值改成如下图所示。

图中各项解释：

Rows：行数

Columns：列数

Table Width：表格宽度，后面是单位，可以是像素也可以是百分比。我选择了像素

Border thickness：边框粗细

Cell padding：边距，也就是单元格内的内容与单元格边框的距离。

Cell spacing：单元格之间的空间（这个很少会用到）

表格插入成功代码如下：

实际在td与/td之间会有nbsp；，这个代码是空格的意思。

代码中table是表格、tr是行、td是单元格。我们在第一行的单元格td和/td之间依次输入，ID、栏目名称、创建时间、操作。

我们现在把这段html代码套到PHP代码里面。需要用echo指令来输出HTML代码。代码如下：

为了方便我把tr到/tr部分写到了一行代码里。

基本上就是把HTML代码部分复制粘贴到了echo语句里。只有table部分有些不同，在table内的引号前面都多了个反斜杠。因为在程序中引号里面如果再次出现引号程序就晕掉了。假设有个4个引号连在一起，他就不知道这些引号是如何配对的了。是第一个和第四个、第二个和第三个这样配对呢还是第一个和第二个、第三个和第四个这样配对呢。所以在引号前面加了个反斜杠来告诉PHP这个引号不是PHP里的引号，是HTML里的引号，你就直接把他当做引号输出就行了，不要当作程序中的代码来执行。就是这么个意思，这个过程叫转义。

运行之后可以看到如下表格：

第一行tr部分是我们的表头，第二行tr部分就是我们要循环出数据的部分。把category_list.php的代码改成如下。

运行之后可以看到如下结果：

我们的列表功能也算完成了。

我相信各位PM和UI都受不了长的这么难看的表格，我们来稍微美化一下吧。

在DW中按ctrl+N创建一个css文件输入如下代码：

保存为admin.css到css文件夹下。admin.css文件我们用于后期修改后台样式。

打开category.php页面在顶部增加如下代码：

通过以上形式可以把CSS文件引用到我们希望用到该样式的页面中。有点类似php中的include。

category_list.php页面代码改成如下：

运行之后可以看到表格变化如下：

虽然说不是很好看，但也算规矩了~

相信读者中半数人是对HTML+CSS还是有一定了解的。所以在这里就不讲的太细了。简单说一下大的概念。

在CSS中我们可以定义全局样式，如body{}，table{}，a{}等由HTML元素名开始的CSS样式就是全局样式。当定义了全局样式的时候，只要是该样式表存在的页面内，所有的被定义元素将会被样式影响。

也就是说我们这次用全局样式定义了表格，那我们下次只要把admin.css文件link进来，页面内的表格就会变成上图中的样子，非常方便。

在上面的css样式表中我们可以看到有个.main开始的样式，并且在category_list.php页面中的div元素内含有class=”main”。这就是class类样式的使用形式。

我们需要先在html的元素内定义class类名，然后到css样式表文件中书写类名对应的样式。在css中类名前面要有“.”(点)。

class类样式只会在定义了类名的html元素内起作用。

在category_list.php页面，在tr前后我增加了thead和tbody。thead会告诉浏览器这部分是表头，tbody是表身，tfoot是表尾(一般用于注解部分)。

当然我们也可以不加这个元素，在tr内定义类名称来改变背景颜色，不过定义thead和tbody对浏览器来说是非常友善的。

最后单元格内的a链接，我想大家也猜到了，是链接到我们后面几节内容的页面。