给产品经理及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里的值。


名称栏目:给产品经理及UI的PHP教程丨文章管理系统创建文章(关联数据)
网站路径:http://scyanting.com/article/cpdgio.html