跟着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="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="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="images/face/m0<?php echo $i?>.gif" alt="头像<?php echo $i?>"></dd> <?php }?> <?php foreach(range(10,64) as $i) {?> <dd><img src="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注入