• 站长网[www.zzw.com]欢迎您!
  • 首页 > 技术教程 > 正文

    给产品经理及UI的PHP教程|创建文章
    2015-11-04 20:23:27   来源:产品100    发布:1003  评论:0 点击:

    摘要:创建文章和创建栏目的功能大同小异,大家可能觉得已经知道怎么插入数据了,创建文章无非就是多加几个字段而已。不过大家不要忘了,我们需要把文章发布到之前创建好的对应栏目里去,这就要带出来关联数据的相关知识了。另外会讲解排序方式ASC和DESC。

    写给产品经理及UI的PHP教程丨文章管理系统-创建文章(关联数据)

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

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

    写给产品经理及UI的PHP教程丨文章管理系统-创建文章(关联数据)

    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页面,代码改成如下:

    写给产品经理及UI的PHP教程丨文章管理系统-创建文章(关联数据)

    打开article.php页面,代码改成如下:

    写给产品经理及UI的PHP教程丨文章管理系统-创建文章(关联数据)

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

    打开article_add.php页面,代码改成如下:

    写给产品经理及UI的PHP教程丨文章管理系统-创建文章(关联数据)

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

    写给产品经理及UI的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的格式如下:

    写给产品经理及UI的PHP教程丨文章管理系统-创建文章(关联数据)

    当我们通过表单提交该下拉选项的时候被提交上去的值是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页面,代码改成如下。

    写给产品经理及UI的PHP教程丨文章管理系统-创建文章(关联数据)

    article.php页面,php部分的代码改成如下:

    写给产品经理及UI的PHP教程丨文章管理系统-创建文章(关联数据)

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

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

    写给产品经理及UI的PHP教程丨文章管理系统-创建文章(关联数据)

    试着添加几篇文章吧!

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

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

    写给产品经理及UI的PHP教程丨文章管理系统-创建文章(关联数据)

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

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

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

    运行后可看到如下结果:

    写给产品经理及UI的PHP教程丨文章管理系统-创建文章(关联数据)

    留个作业:

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

    写给产品经理及UI的PHP教程丨文章管理系统-创建文章(关联数据)

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

    写给产品经理及UI的PHP教程丨文章管理系统-创建文章(关联数据)

    相关热词搜索:PHP教程 UI设计师 产品经理

    上一篇:功能担当!超实用的网站页脚设计小技巧
    下一篇:IP地址是如何通过一张照片来获取?

    分享到: 收藏
    评论排行