新网Logo
首页>建站推广>

写给产品经理及UI设计师的PHP教程丨文章管理系统创建栏目

登录 注册

写给产品经理及UI设计师的PHP教程丨文章管理系统创建栏目

摘要:【文章摘要】这一章开始我们就要正式开仗了,着手开发一套简易的文章管理系统。不要慌,不要急,慢慢看,我相信就算你完全没有程序基础也是能看懂的。 相关推荐 写给

写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目

开始学习之前希望大家先下载DREAMWEAVER,我想有不少产品汪和设计喵都曾用过这个软件吧。估计很多程序猿同学会吐槽写代码还用DREAMWEAVER也太业余了吧。你通过一个编辑器码一个表格到代码里需要手写好多行代码,但我们在DW里简简单单的按几下按钮就可以了。况且这个教程不光只是学习PHP而已,HTML,CSS,JAVASCRIPT,AJAX,XML等各种需要用于网站开发的语言都会穿插着学习。所以DW应该是最好的选择了。

需求简述:

可以发布文章到指定栏目,并且可以管理栏目及文章,对其进行修改,删除,查看等操作。

我想一般客户提需求程度也就是上面这个程度了。作为产品汪的我们当然要开始细化这个需求了。但毕竟这只是教程,不是现实,我们就不要把需求整的太复杂了哈。

好了,我们来思考一下。满足一个这样的需求要开发哪些功能。

功能列表:

一、 栏目管理

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

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

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

4. 栏目列表:以列表的形式显示已发布的栏目。(显示内容:栏目名称,更新时间)

二、文章管理

1. 创建文章:可以发布文章到指定栏目。(选择栏目,输入标题,输入正文)

2. 修改文章:可以指定修改已发布的文章并保存。(修改栏目,修改标题,修改正文)

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

4. 文章列表:以列表的形式显示已发布的文章。(栏目名称,文章标题,发布时间,更新时间)

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

以上这些功能就是第二章要学习的内容了。

本节内容为了提高大家的兴趣,能让大家感受到从无到有的成就感,所以一口气会讲很多知识点,希望大家耐心点。

好了,我们就从创建栏目开始吧。

相信很多人也都知道,数据传上去会存放在数据库里。所以在这里先科普一下数据库的知识。

MYSQL数据库

数据库顾名思义就是存放数据的仓库。

这个仓库我们可以理解成有3个层级的结构。1. 数据库 2. 数据表 3. 字段

一个数据库包含多个数据表,一个数据表又包含多个字段。

我们可以通过EXCEL来形象的比喻出数据库的结构。

数据库=EXCEL文档,数据表=EXCEL工作表,字段=EXCEL中的列。(如下图所示)

写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目

创建数据库、表、字段

想要创建栏目并把对应数据发布到数据库里,我们就得先准备好对应的数据库、表、字段。

打开浏览器输入 http://127.0.0.1/phpmyadmin/

写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目

输入用户名:root以及我们之前在安装的时候设置过的数据库密码,点击执行按钮登录PHPMYADMIN。登录后界面如下。

写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目

在新建数据库的位置输入study,下拉选项选择utf_general_ci,点击创建按钮创建我们的数据库。

写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目

其中study是我们的数据库名,utf8_general_ci是数据库的语言编码结构,也是目前最流行的编码结构。当然除了这个选项以外还有gb2312等各种各样的语言选项,不过utf-8是目前支持多国语言支持的比较完美的一个编码。如gb2312就只能支持简体中文和英文。关于这一点一般无特殊需求也不会选择其他类型,所以也不讲太多了,只要知道以后都选择这个就可以了。

创建成功会进入如下界面

写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目

下一步在study数据库中创建存储栏目数据的表。创建之前先回顾一下我们的需求,栏目列表中需要显示的数据有栏目名称和更新时间。栏目名称和更新时间都是一个独立的字段。大家可能马上就能联想到字段数2。但是一般数据表里的字段结构除了我们可以在界面中看到的信息字段以外,还有一些为了保证程序运行而存在的一些在界面中看不到的隐形字段。其中id字段就是一个典型的例子。绝大多数的数据表都会有一个叫id的字段,id就等同于是每一条数据的身份证,我们每个人都有身份证,并且身份证号是唯一的,在公安系统里通过身份证号可以准确的查询到我们每一个人的详细信息。如果有同样的身份证号会怎么样?那不就分不清谁是谁了吗?id字段就是起一个这样的作用。

数据表名字输入category,字段数输入3,点击执行按钮,创建数据表。

写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目

数据表创建成功会进入如下界面。

007

字段类型(INT、VARCHAR、DATETIME)

在上图中我们可以看到,需要输入字段的地方有三列。每一列都是一个字段及他的相关属性。

如下图所示,输入相关信息。其中第一行字段名称,第二行是字段类型,第三行是字段值的长度,另外要注意AUTO_INCREMENT这行,第一个字段要打勾。

写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目

点击保存按钮,字段创建成功,进入如下界面。

写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目

字段名就不用多说了,估计大家一看就知道每个名称代表的意思了。我们来说说字段类型。

INT类型:

INT基本可以理解成是整数就可以了,就是1,2,3,4,5这种没有小数点的整数。可能程序猿同学又会吐槽这里应该用tinyint类型什么的。确实MYSQL中INT类型就有好几种,不同的类型可存储的数据大小不一样。大小越小运行计算的速度就会越快。但是我们又不是在开发淘宝,优化的那么牛X做什么呀?在这里大家就先记住,想要存储的类型为整数的时候就选择INT类型就可以了。

VARCHAR类型:

VARCHAR是用于存储字符串的,存储字符串一般常见的类型有CHAR、VARCHAR和TEXT类型。每种类型能存储的字符长度都是有限制,3个中CHAR最小,其次是VARCHAR,TEXT是最大的。这里也不需要太深入的了解,就记得一般标题啊摘要之类文字相对较少的时候就选择VARCHAR,正文选择TEXT类型就可以了。

DATETIME类型:

嘿,这个估计看名字就知道了,日期时间吗!非常正确,就是日期和时间。存储的格式是:2015-10-22 15:30:45 。该字段的时间存储范围为 ‘1000-01-01 00:00:00′ 到 ‘9999-12-31 23:59:59′ 。通过范围可以看出如果你有一些特殊的需求,需要一个什么历史悠久的时间或者1万年以后的时间是不可能的。当然我想大家一般也不会有这么奇葩的需求,所以时间类型的字段选择这个就可以了。

字段长度:

接下来讲讲zi字段长度的问题。长度就是限制你可存储的字符最大值。就算不设长度每个字段也都有他的最大长度,存储的数据长度超过这个范围的时候数据库就会报错。关于长度,根据选择的数据库类型不同,编码不同都有不同的算法,水也挺深的,在这里就不多说了。就大概理解成写了多少数字就支持多少个字符的程度吧。

AUTO_INCREMENT:

id这个字段我们是几乎不会在发布数据的时候手动输入的,那这个字段下面数值是怎么来的呢?是自己蹦出来的吗?对,么错,AUTO_INCREMENT就起一个这样的作用。当你每发布一条数据的时候id就会自动生成并递增。你发布第一条数据id就会自动生成1,第二条就是2,第三条就是3,以此类推。

这样我们的数据库准备工作就算初步完成了。

哎呀妈呀,前奏好长,累死俺了。总算可以开始教怎么创建栏目了。

连接MYSQL服务:

首先要把数据通过PHP程序发布到MYSQL数据库里,就要先连接上MYSQL服务?咦?貌似现在还不能发布,囧囧囧囧囧。

进入我们之前创建的网站目录htdocscainiao,用dreamweaver打开上一章的index.php文件。把之前的代码删掉输入如下代码。

写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目

这个估计大家一看就知道是什么意思了!mysql_connect是一条指令,意思跟它的英文一样就是连接MYSQL的意思。可以理解成是一种行为,一种动作。

括号里面的信息是MYSQL的相关信息,依次是MYSQL服务器地址、用户名、密码。记得把密码换成自己设置的密码哦。

打开浏览器输入 http://127.0.0.1/cainiao/index.php 运行。

会显示出一片空白!是不是瞬间有一种,靠,玩我呢的想法?嘿嘿,回去把密码改成错误的密码再运行试试。改成错误的密码之后再运行就会报错了。所以说明之前的指令是正确的。

选定数据库:

我们登录PHPMYADMIN可以看到本来就有几个默认已经建好的数据库(information_schema、mysql等)。MYSQL服务里是可以容纳很多个数据库的。但程序是一个很笨的东西,虽然我们连接上了MYSQL服务,但是程序同学还不知道我们要用哪个数据库。所以我们下一步就需要告诉他,我们后面需要用哪个数据库。请看下图

写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目

第三行就是我们新增的代码,这个也应该很好理解吧?mysql select(选择)db(数据库),db就是数据库的英文database的缩写。study就是我们之前创建的数据库名称。

嗯~~~现在MYSQL服务也连接上了,数据库也选定了,接下来就可以给选定的数据库里插入数据了。我们今天的主角代码要来了。

插入数据

写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目

第四行就是这次新增的代码。mysql_query这句话代表着我们要执行一段mysql指令。那也就是说后面括号中的代码就是需要执行的my_sql指令了。

INSERT INTO category也很好理解,跟英文字面意思一样INSERT(插入)INTO(到)category(我们创建的数据表名称)。

cat_name和update_time我想大家已经知道是什么了,就是我们之前在category表里创建的字段。后面的test和2015-10-10 10:30:45就是对应cat_name和update_time的值,按照排列顺序依次对应。

好我们现在把代码保存好之后打开浏览器刷新一下http://127.0.0.1/cainiao/index.php 这个界面吧。依然是一片空白吧?^^

见证奇迹的时刻到了,我们到phpmyadmin里去看一下我们之前创建的表category

写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目

我们可以看到catgory表里出现了一条数据,cat_id为1,再回到浏览器多刷新几次index.php页面,再回到phpmyadmin里看看。

写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目

我们可以看到每刷新一次都会多出来一条数据,并且cat_id在递增。这个就是之前提到的AUTO_INCREMENT的作用了。

我想这时候一些聪明的同学已经尝试过了cat_name的值里输入中文信息了。但是插入中文数据之后发现竟然是乱码对不对?

PS:并不一定所有人都会碰到这个问题。

这是我们需要一条新的MYSQL_QUERY指令来解决这个问题了。

写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目

第三行就是这次新增的指令,这条指令不可放在mysql_connect前面。之前也讲到过MYSQL_QUERY是执行后面括号内的MYSQL指令,所以任何MYSQL_QUERY指令都要在连接到MYSQL服务器之后才能执行。关于SET NAMES UTF8在这里就不具体讲了,因为要讲到的内容实在太多,也不大好很轻松的讲明白,还是等大家对程序了解更多了之后再慢慢研究吧。反正这句话做一套系统也用不到几次,大家就记者就好了。mysql_connect指令之后就把SET NAMES UTF8这段跟上。

如果还存在乱码问题的话就再增加下图中的第二行代码。

写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目

这段的作用是对我们正在编写的PHP代码的编码进行声明。一般情况下建议大家把2段指定编码的代码都加上。

到这里我们就完成了通过PHP程序往数据库里创建栏目的功能。但是这哪够呢?哪有项目让人发布条内容要这么发的啊?别着急下一节内容就讲制作一个可视化的发布界面来执行发布数据的功能。

一下子吃太多会消化不良的噢,先把这节内容吃透了之后再继续下一节吧。要脚踏实地的来哦。(话外音:这个教程明明是野路子~~~~~~~)

关于本节内容给大家留两个作业。

1. 修改category表中的cat_name字段的长度值,把值改小,然后试试插入数据。中文,英文,都多试试噢。修改方法如下图。

写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目

2. 插入几个新的字段到category表,通过INSERT INTO指令插入多个值到到数据表中。插入字段方法如下图

写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目

好了,今天就到这里吧。不知道您是否觉得学习起来有点意思了呢?相信下一节做可视化的功能会更好玩的。下一节就可以把创建栏目的功能完整实现了。经期期待哦!也请不要吝啬于分享哦,你的支持是我最大的动力!