跟着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注入

上一篇:touches, targetTouches, changedTouches 区别


下一篇:SQL循环+游标