一、完成文章的添加

完成文章模板的展示

第一步：修改left.html模板，加一个添加分类的链接地址

第二步：在后台admin创建一个Article控制器，并建立一个add方法，完成文章的入库操作

模板分配数据：

使用富文本编辑器完成文章的内容添加

第一步：把课件中的相应的ueditor复制到网站根目录下面的插件目录plugin中

第二步：引入核心js文件，并且给textarea 设置一个id=content

效果如下：

完成文章数据的入库

第一步：设置表单name值

第二步：在add方法中，完成数据的入库

使用验证器完成添加文章的验证

在后台的admin的validate目录建立一个Article 的验证器

添加文章的时候，调用验证器的对应场景进行验证：

完成文章的图片上传

表单上传文件的要求：1、post提交 2、设置form的enctype=’multipart/form-data’

设置上传文件的input标签

控制器add方法处理上传文件的路径入库：

数据库存储的路径形式如下：

6、完成文章图片缩略图生成

在有文件上传成功的前提下，处理缩略图生成：

注：函数thumb(width，height,缩放比例) ，缩放比例默认为1为等比例缩放，为2则是填充补白。

存储如下：

数据库存储的路径：

实现上传图片的实时预览

引入核心js文件：

在add.html模板文件设置预览的区域：

效果：

完成文章的列表展示

数据展示

第一步：在后台admin的Article控制器中建立一个index方法，完成文章列表展示

模板中index.php,循环输出

数据分页

把模型的select方法改为paginate(每页显示条数)即可

模板中输出分页页码：

效果：

完成文章编辑

第一步：给编辑设置链接地址，携带文章的参数id

第二步：建立一个upd方法完成数据回显到模板中

第三步：模板中回显数据

效果：

第四步：在upd方法中判断是否是post请求，完成数据的编辑入库

可以设置Article模型自动维护时间戳：

完成文章删除

第一步：给删除的链接地址设置链接，并且设置参数

第二步：添加del方法完成删除

五、XSS攻击

xss介绍

如在输入框输入js代码：

<script>

var cookie = document.cookie

//发送一个jsonp请求

</script>

访问此标题的时候就会弹出1，从而达成攻击；

防止xss攻击（防止js攻击）

使用htmlspecialchars函数防止

注： 百度富文本编辑器ueditor自动将危险的代码如js进行转化为实体符号。

htmlspecialchars函数的作用：将html标签符号转化为实体符号。

如：大于号“>”会被转化为 “&gt;”

如：大于号“<”会被转化为 “&lt;”

可以在配置文件config,添加全局的过滤函数：

此种缺点：会把html和js代码的特殊符号都进行转移，不满足我们的要求。我们只需要转移js代码。如下所示：

解决办法：

1. 不使用函数htmlspecialchars()进行处理，但可能会出现xss攻击。
2. 使用htmlspecialchars()函数处理，页面的数据（富文本html）又不能正常显示出来，可以借助htmlspecialchars_decode()反转，把html实体符号转化为html标签，但这又可能会造成xss攻击。

我们的希望是HTML可以正常显示，但是又不希望js代码被执行。

这时可以借助第三方防止xss攻击的插件如：HTMLPurifier，此插件会把浏览器提交过来的数据有选择性的过滤。只过滤危险的js代码，保留html代码，这就刚好满足我们的需求。

使用插件HTMLPurifier防止

复制防止xss攻击的库到项目extend目录中。

把HTMLPurifier中的example.php文件中函数定义在common.php中，并且修改路径

需要把函数名为removeXSS设置为tp的全局的默认过滤函数

使用之后，只会把js代码进行过滤，保留html代码：

显示就不会造成攻击，html正常显示：

扩展-验证插件jquery-validate的使用

前端验证目的：减轻服务器压力，提高用户体验。

后端验证：主要保证数据的安全（不要信任浏览器携带过来的任何数据）

具体使用：https://www.jianshu.com/p/e1d5f0dc2f5d

手册：

模型的事件（钩子）

所谓的事件就类似于svn中的钩子一样，做一件事情都有前事件和后事情发生。

给表tp_category添加一个zhujian字段，目的是记录当前记录的主键值。

让zhujian字段和cat_id的值保持一致，我们一把入库成功后要更新:

常规做法如下：

但是不建议上面写，我们希望只把业务逻辑写在控制器，我们把数据有关的操作写在模型的事件中。

模型中注册事件：

我们可以在模型中注册after_insert事件，即入库成功之后，把zhujian的字段和cat_id的保持一致。

效果：

触发事件的流程：入库前事件—>save()—->入库后的事件，

如果在入库前事件前返回false,则事件不会继续执行。

GD库简介

GD库是专门做图像处理的。比如验证码，缩略图，图片水印等效果

PHP操作GD库的原理

第一步：创建图片资源

第二步：对图片进行操作

第三步：输出图片资源

第四步：销毁图片资源

引入GD库

默认情况下，PHP不支持对图片的处理，必须引入GD扩展才能实现对图片的操作

开启GD库后，以image开头的函数都可以使用了。

创建图片

知识点

1. imagecreate()：创建图片资源
2. imagecolorallocate()：给图片资源分配一个颜色
3. imagejpeg()：图片按jpeg格式显示或保存
4. imagegif()：图片按gif格式显示或保存
5. imagepng()：图片按png格式显示或保存
6. imagedestroy()：销毁图片

代码

脚下留心：如果图片保存就不需要写header().

imagecolorallocate()

给图片分配颜色，默认第一个分配的颜色是背景色，返回的是颜色的编号

返回的是颜色的索引编号

画图

直线

例题

矩形

代码

圆弧

例题1

例题2

例题3

曲线

曲线是由多个像素点组成，画曲线就是画许多像素点

例题

验证码

验证码可以防止暴力破解，通过排列组合的方式破解用户名和密码。

验证码由背景图和随机数组成

知识点

1. imagestring()

1. 字符串居中

• 1. Imagesx()：获取图片宽度
  2. Imagesy()：获取图片高度
  3. Imagefontwidth()：获取图片内置字体的宽度
  4. Imagefontheight()：获取图片内置字体的高度

代码

<?php

//第一步：生成随机字符串

$char_array=array_merge(range(‘a’,’z’),range(‘A’,’Z’),range(0,9)); //字母和数字的数组

$indexes=array_rand($char_array,4); //随机抽取4个字符，返回字符下标数组

shuffle($indexes); //打乱数组

$str=”;

foreach($indexes as $i) {

$str.=$char_array[$i];

}

//第二步：将字符串写到背景图

$img=imagecreate(200,100);

imagecolorallocate($img,255,0,0); //背景色

$color=imagecolorallocate($img,255,255,255); //前景色

$img_w=imagesx($img); //图片宽度

$img_h=imagesy($img); //图片高度

$font=5; //内置的5号字体

$font_w=imagefontwidth($font); //字符宽度

$font_h=imagefontheight($font); //字符高度

$x=($img_w-$font_w*strlen($str))/2; //起始点x坐标

$y=($img_h-$font_h)/2; //起始点y坐标

imagestring($img,$font,$x,$y,$str,$color); //将字符串写到图片上

//输出图片

header(‘Content-Type:image/png’);

imagepng($img);

运行结果

中文验证码

Imagestring()不能做中文的验证码，要使用中文做验证码需要使用imagettftext()。

将字体拷贝到站点下

知识点

获取字体的范围

返回值

代码

基线

代码

<?php

$img=imagecreate(200,100);

imagecolorallocate($img,255,0,0); //背景色

$color=imagecolorallocate($img,255,255,255); //前景色

//生成随机中文字符串

$char_array=[‘锄’,’禾’,’日’,’当’,’午’,’汗’,’滴’,’禾’,’下’,’土’,’我’,’爱’,’北’,’京’,’天’,’安’,’门’];

$indexes=array_rand($char_array,4); //随机抽取4个字符，返回字符下标数组

shuffle($indexes); //打乱数组

$str=”;

foreach($indexes as $i) {

$str.=$char_array[$i];

}

//字体参数

$size=20; //字号

$angle=0; //角度

$fontfile=’./fonts/simhei.ttf’; //字体

//获取字体范围

$info=imagettfbbox($size,$angle,$fontfile,$str); //返回字符串的4个角的坐标4

$x=(imagesx($img)-($info[4]-$info[6]))/2; //起始X轴

$y=imagesy($img)/2+($info[1]-$info[7])/3; //起始y轴(字体基线的位置，不是字符的最底端。)

//将中文写到图片上

imagettftext($img,$size,$angle,$x,$y,$color,$fontfile,$str);

//输出图片

header(‘Content-Type:image/png’);

imagepng($img);

运行结果

打开已有图片实现验证码

打开已经存在的图片创建画布

1. imagecreatefromgif()：打开gif图创建画布
2. imagecreatefromjpeg()：打开jpeg图创建画布
3. imagecreatefrompng()：打开png图创建画布

代码

<?php

//第一步：生成随机字符串

$char_array=array_merge(range(‘a’,’z’),range(‘A’,’Z’),range(0,9)); //字母和数字的数组

$indexes=array_rand($char_array,4); //随机抽取4个字符，返回字符下标数组

shuffle($indexes); //打乱数组

$str=”;

foreach($indexes as $i) {

$str.=$char_array[$i];

}

//第二步：将字符串写到图片上

$path=’./captcha/captcha_bg’.rand(1,5).’.jpg’; //图片路径

$img=imagecreatefromjpeg($path); //打开已经存在的jpeg图

$color=imagecolorallocate($img,255,0,0); //分配红色

if(rand(1,2)==1) {

$color=imagecolorallocate($img,0,255,100); //分配白色

}

$img_w=imagesx($img); //图片宽度

$img_h=imagesy($img); //图片高度

$font=5; //内置的5号字体

$font_w=imagefontwidth($font); //字符宽度

$font_h=imagefontheight($font); //字符高度

$x=($img_w-$font_w*strlen($str))/2; //起始点x坐标

$y=($img_h-$font_h)/2; //起始点y坐标

imagestring($img,$font,$x,$y,$str,$color); //将字符串写到图片上

//输出图片

header(‘Content-Type:image/png’);

imagepng($img);

运行结果

添加水印

添加水印的目的为了防止被盗图。

添加文字水印

<?php

$img=imagecreatefromjpeg(‘./face.jpg’); //打开原图

$color=imagecolorallocate($img,255,0,0); //分配颜色

//字体参数

$size=40; //字号

$angle=0; //角度

$fontfile=’./fonts/simhei.ttf’; //字体

//获取字体范围

$str=’传智播客版权’;

$info=imagettfbbox($size,$angle,$fontfile,$str); //返回字符串的4个角的坐标4

$x=imagesx($img)-($info[4]-$info[6]); //起始X轴

$y=imagesy($img)-($info[1]-$info[7])/3; //起始y轴(字体基线的位置，不是字符的最底端。)

//将中文写到图片上

imagettftext($img,$size,$angle,$x,$y,$color,$fontfile,$str);

//输出图片

header(‘Content-Type:image/png’);

imagepng($img);

添加图片水印

代码

生成缩略图

将大图自动的生成小缩略图

原图的参数：起始x，起始y，拷贝宽度，拷贝高度

目标图的参数：目标图x，目标图y，目标宽度，目标高度

使用函数

脚下留心：imagecreatetruecolor()和imagecreate()区别

imagecreatetruecolor()新建一个真彩色图像(RGB模式)，默认背景色黑色

imagecreate():新建一个基于调色板的图像，只支持256种颜色，默认背景白色

给图片填充颜色

深入理解imagefill()

例题

关于图片处理的改错

第一：如果报错，就按报错的信息更改

第二：不报错，但是图片显示不出来

注释header()，查看错误

第三：注释header()如果没有报错，就查看源码

第三：终极一招，ob_clean()

如果上面的方法都没有效果，可以尝试ob_clean()

原理：图片输出之前不能有任何字符的输出，ob_clean()情况缓存中所有输出。

思考题

制作等比缩略图