给产品经理及UI的PHP教程丨文章管理系统创建文章（关联数据）

之前的课程为了大家好理解，铺垫了好多废话。以后尽量就不说那么多废话了，单刀直入了！

第一步到phpmyadmin在study数据库下创建一个名为article的数据表,字段数6，并添加对应的字段如下图所示：

PS：添加字段的时候当然不会只有这些选项，为了方便插图，被我给P掉了。A_I就是AUTO_INCREMENT的缩写。

这里用到了新的字段类型：TEXT，之前有提到过像正文这种需要存储的字符量多的情况下用TEXT类型。

关联数据：

这节课里讲到的数据关联的方法是一种最简单的方法，我们在文章表article里加了一个cat_id字段，之前的栏目表category里也有一个cat_id字段，我们通过这个字段让2个数据表之间产生一种联系。只需要在发布文章的时候在cat_id里添加一条与已创建的栏目一致的某个ID上去，后面就可以通过article表中的cat_id来查询所属栏目在category表中是叫什么名字的。

打开article_list.php页面，代码改成如下：

打开article.php页面，代码改成如下：

这两段代码是一个页面内连着的，因为编辑器的一些问题，分开起来看得更清楚些。

打开article_add.php页面，代码改成如下：

运行之后进入添加文章页面可以看到如下结果：

SELECT * FROM category 这段代码本次增加了ORDER BY cat_id ASC。在对数据表进行查询并保存结果集的时候可以通过ORDER BY来指定排序规则。后面跟着字段名来指定由哪个字段值来排序。ASC代表着升序，DESC代表着降序。1、2、3、4这叫升序，4、3、2、1这叫降序。我们可以在数据表中选择任意字段作为排序字段。

在本节课程中我把这段代码加到了article.php页内，并没有加在article_add.php页内。并不是因为加到article_add.php页里不可以，而是因为该结果集我们需要应用到好几个页面里，如列表页、查看页、修改页、添加页。这4个页面无一例外是通过include方式包含到了article.php页面内，所以把这段代码加到了article页面内，这样该结果集就可以在任何被include进来的页面内起作用。

PS：在这里需要注意放置的位置，程序都是把代码从上往下按顺序执行。所以需要执行的代码的位置在顺序上也需要合理安排，不可随意放置。比如在这里我把代码放在了配置文件下方，其他页面上方。

category_add.php页面我们这次用到了新的HTML元素select标签（下拉选项）。select标签内含有多个option标签，option标签是该下拉选项中的各个值。纯HTML的格式如下：

当我们通过表单提交该下拉选项的时候被提交上去的值是option value=””中的值，而不是option和/option中间的文字，该文字只是用来显示用的。

label是一个类似于名片一样的东西，label for=”cat_id”就代表着该label是id为cat_id的表单标签select的名片的意思。label的作用是当你用鼠标点击了label内的文字的时候，鼠标的焦点会移动到该label指向的表单标签中去。通常用于单选按钮和复选框，因为按钮或者选择框太小，通过用label指定的话可以点击文字的形式选定对应的选项，有助于提高交互。

PS:要注意label for指向的是id，表单提交的时候的参数名却是name不要弄混噢！

好了，接下来让我们完成创建文章的功能吧。

打开article_add.php页面，代码改成如下。

article.php页面，php部分的代码改成如下：

这次新增的html标签有textarea，这个是文本域，与文本框最大的区别是可以换行。rows是行数，cols是列数。文本域里的文字内容（值）是放在textarea和/textarea之间，不放在value里。

运行后进入添加栏目页面可以看到如下结果：

试着添加几篇文章吧！

虽然文章可以添加成功了，页面也太丑了是不是？我们来美化一下。

打开admin.css页面增加如下代码：

CSS具体我也不打算讲，就算是送给大家了，省的一些像我这样的人看着界面太难看闹心。

简单讲几个知识点。可以像UL,LI或者.text-input,textarea一样通过逗号“,”连接的形式把同样的一个CSS样式应用到多个class类或者html标签。

可以通过.input_form ul li一样用空格隔开的方式对.input_form内的ul内的li定义样式，不用非得由class名开头，用html标签开头也可以。

运行后可看到如下结果：

留个作业：

把选择栏目的功能实现成单选按钮的形式，如下图所示：

通过while循环出对应的单选按钮标签和和label。输出成功之后的HTML代码如下：

1. 单选按钮的类型为radio

2. 当name值相同时会被当作一组按钮，在同一组中只可选定一个按钮。

3. label for对应的是id，因此id要不同，不然无法正确对应。

4. 真正传递的值是value里的值。