跟着PHP100第一季学写一个CMS(1-10)

笔记：

这次用的方法是先跟着视频做一遍，隔一天或半天后独立再做一遍，能发现真正不会的地方记录下来。

CMS0.1界面布局
1、问题：分两个css来实现时basic.css+index.php出现定位不正确问题。
     解决：@CHARSET "UTF-8"; 第一行说明漏了一个封号“;”导致奇怪问题，花了半个多小时和原文件对比。
     ps.经常会犯这种错误少个结尾符号，浪费大量时间。

2、小知识：body{margin:0 auto;}让页面居中 。

3、小知识：border宽度会计算到页面宽度里。

4、小知识：body width如果已经设定，占一整行的div可以width：auto;

5、小知识：ul li 取消列表前面符号list-style-type: none;

列表右对齐ul{text-align:right;}

横向排序li{display:inline;}(其实用float:right也能实现横向对齐)

CMS0.2分离调用

1、小知识：index加载header、footer

require 'includes/header.inc.php';

require 'includes/footer.inc.php';

2、小知识：防止恶意调用，被调用文件内添加一个常量来判断。在调用文件中增加该常量IN_TG

if(!defined('IN_TG')){

exit('access defined');
               }

3、小知识：转换为硬路径，速度更快

//substr函数是用来截取需要的目录长度，-8是从后截取8位
//dirname是获得目录路径
//__FILE__是获得文件路径
//在common.inc.php定义硬路径常量
define('ROOT_PATH', substr(dirname(__FILE__),0,-8));

//使用硬路径来调取文件
//index.php使用硬路径调用其他页面
require dirname(__FILE__).'/includes/common.inc.php';
require ROOT_PATH.'includes/header.inc.php';
require ROOT_PATH.'includes/footer.inc.php';

4、小知识：PHP_VERSION php版本的全局常量

CMS0.3执行耗时

1、小知识：通过microtime()可以获取时间戳和微秒数

$_mtime = explode(' ', microtime());//将时间戳和微秒数分开放到数组中

$_mtime[1] + $_mtime[0]; //时间戳+微秒数 用来将后面的时间-开始时间，得到执行消耗的时间

2、第一个函数，需要养成良好的写备注文档的习惯

/**
*_runtime()是用来获取执行耗时
*@access public 表示函数对外公开
*@return float 表示返回出来的是一个浮点型数字
*/
function _runtime(){
    $_mtime=explode(' ',microtime());
    return $_mtime[1]+$_mtime[0];
}

3、小知识：round()函数，对浮点数进行四舍五入

同时可以指定精度round($value,3)//保留小数点后3位

4、小知识：

//判断PHP版本是否过低
                 if(PHP_VERSION<'4.1.0'){
                       exit("THE PHP VERSION IS TOO LOW!");
                 }
                出现的问题：'4.1.0'漏了加单引号，经常不知道什么时候加引号

cms0.4注册界面

1、小知识：<dl>列表的用法以及dl、ul、ol的区别

<dl></dl>

<dt>

<dd></dd>

</dt>

2、小知识：样式class="text yzm"，引用时使用.yzm

3、小知识：让dl列表居中，必须先设定它的宽度

#register dl{

width: 400px;
                  margin: 0 auto;
                 }

4、小知识：鼠标移动上去指针变成手型。

cursor:pointer;

5、小知识：JavaScript实现点击打开新窗口

//第一个参数打开url，第二个标题，第三个打开网页的大小和位置

onclick="javascript:window.open('index.php','face','width=400,height=400,top=0,left=0')"

cms0.5选择头像

1、小知识：range()函数。range(1,9)取1-9数字放入数组中

2、小知识：两种循环：for()和foreach()

//用for循环9次读取m01-m09,9张图片
<?php for($i=1;$i<10;$i++) {?>
<dd><img src="data:images/face/m0<?php echo $i?>.gif" alt="头像<?php echo $i?>"></dd>
<?php }?>
//用foreach循环读取m10-m64的图片
<?php foreach(range(10,64) as $i) {?>
<dd><img src="data:images/face/m<?php echo $i?>.gif" alt="头像<?php echo $i?>"></dd>
<?php }?>

3、不理解：1、div块face包含了h3和dl，为什么#face加一条外边框，dl却不显示在里面？

2、dl加外边框后，同样dd显示的内容也不在外边框内。不知道为什么？

回答：等我明白了再来写

<div id="face">
   <h3>更换头像</h3>
    <dl>
        <dt></dt>
        <?php for($i=1;$i<10;$i++) {?>
        <dd><img src="data:images/face/m0<?php echo $i?>.gif" alt="头像<?php echo $i?>"></dd>
        <?php }?>
        <?php foreach(range(10,64) as $i) {?>
        <dd><img src="data:images/face/m<?php echo $i?>.gif" alt="头像<?php echo $i?>"></dd>
        <?php }?>

    </dl>
</div>

4、js一点不会，先做点记录。陆续学起来。

作用：等待网页加载完毕，获得id=faceimg对象，对它的onclike增加动作打开一个网页。

//等在网页加载完毕再执行
window.onload = function () {
    var faceimg = document.getElementById('faceimg');
    faceimg.onclick = function () {
        window.open('face.php','face','width=400,height=400,top=0,left=0,scrollbars=1');
    }
};

cms0.6头像取值

//通过getElementsByTagName获得每张图片的src
//增加图片的onclick事件触发_opener()函数
//由于img.src为长地址，所以face.php的img增加了alt，将alt调用函数，为之后表单调取value使用
window.onload = function(){
    var img = document.getElementsByTagName('img');
    for (i=0;i<img.length;i++){
        img[i].onclick = function(){
            _opener(this.alt);
        }
    }

}
//通过前端页面直接插入onclick事件调用_opener();
function _opener(src){
    //opener是父窗口的意思
    var img = opener.document.getElementById('faceimg');
    img.src = src;
    opener.document.register.face.value = src;
}

另一种方法是在<img>添加onclick="_opener(this.src)"来调用函数。不过并不推荐

cms0.7验证码上

1、小知识：画图函数

//创建图片

$_img = imagecreatetruecolor($_width,$_height);

//填充背景

imagefill($_img,0,0,$_white);

//创建一个黑色的边框

$_black = imagecolorallocate($_img,100,100,100);

imagerectangle($_img,0,0,$_width-1,$_height-1,$_black);

//随机划线条

for ($i=0;$i<6;$i++) {

$_rnd_color= imagecolorallocate($_img,mt_rand(0,255),mt_rand(0,255),mt_rand(0,255));

imageline($_img,mt_rand(0,75),mt_rand(0,75),mt_rand(0,75),mt_rand(0,75),$_rnd_color);

}

//随机打雪花（其实打印一个字符*）

for ($i=1;$i<100;$i++) {

imagestring($_img,1,mt_rand(1,$_width),mt_rand(1,$_height),"*",imagecolorallocate($_img,mt_rand(200,255),mt_rand(200,255),mt_rand(200,255)));

}

//输出验证码（也是输出字符）

for ($i=0;$i<strlen($_SESSION['code']);$i++){

imagestring($_img,mt_rand(3,5),$i*$_width/4+mt_rand(1,10),mt_rand(1,$_height/2),$_SESSION['code'][$i],imagecolorallocate($_img,mt_rand(0,100),mt_rand(0,150),mt_rand(0,200)));

}

//输出销毁

ob_clean();

header("Content-Type: image/png");

imagepng($_img);

imagedestroy($_img);

2、问题：跟着教程做，但始终显示不了图片

解决：百度：

使用PHP中的GD库绘制图像，之后浏览器无法显示，GD库安装，配置也没什么错误，提示图像因本身有错无法显示,于是就在header() 前面使用ob_clean();然后使用浏览器就能正常的浏览了

<?php

$height = 300;
$width = 300;
$im = imagecreatetruecolor($width, $height);
$white = imagecolorallocate ($im, 255, 255, 255);
$blue = imagecolorallocate ($im, 0, 0, 64);
imagefill($im, 0, 0, $blue);
imagestring($im, 10, 100, 120, 'Hello,PHP', $white);
ob_clean();
header ('Content-type: image/png');
imagepng($im);
imagedestroy($im);

?>

ob_get_contents() - 返回输出缓冲区的内容
ob_flush() - 冲刷出（送出）输出缓冲区中的内容
ob_clean() - 清空（擦掉）输出缓冲区
ob_end_flush() - 冲刷出（送出）输出缓冲区内容并关闭缓冲
ob_end_clean() - 清空（擦除）缓冲区并关闭输出缓冲
flush() - 刷新输出缓冲

cms0.8验证码下

1、小知识：验证码点击刷新

放入图片区域，可以自动刷新局部

                onclick="javascript:this.src='code.php?tm='+Math.random()"

然后采用分离JS的原则分离出去

cms0.9提交数据

1、小知识：

1）将数据提交到本页，必须做一个名值对，用来判断是否提交了数据。

action=register.php?action=register

2）也可以设计一个隐藏字段来做名值对

<input type="hidden" name="action" value="register" />

cms1.0过滤用户名

1、小知识：

$_string = trim($_string); //去掉两边空格

mb_strlen($_string,'utf-8') //以utf-8格式判断字符串长度

preg_match($_char_pattern,$_string) //正则比对

in_array($_string,$_mg) //判断$_mg数组中是否含有$_string

mysql_real_escape_string($_string) //mysql自带转义输入函数，防止SQL注入