hi
之前有将近两周的时间没有更新，除了懒就是其他的事情耽误了。现在好了，回家了，虽然家里停水，外面又有积雪，天寒地冻的，但诸多不便，都比不过有点闲的好。
开搞每个学PHP的必经之路——电商网站的开发。
1、电商网站开发——前端
一、首页制作
1.1 概况&准备
整个电商网站包括什么呢，就是首页信息，后面的分类信息页，商品详情页，购物页面，售后页面等等，所以就一步步做。自己做的时候可以简单的画个概况图来指导开发，免得逻辑搞混。
准备：项目文件夹，其中要有images（图片素材），js（javascript），style（css）三个子文件夹中。工具的话，看个人爱好，不过涉及的是前端，一般上习惯用DS的多，我比较懒，直接用zend+浏览器算求。
其中准备中有一部是实现reset.css，也就是清零/清除css效果。css我基本算是个白痴，找个源码贴出来，侵删：
@charset "utf-8";
/* CSS Document */body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}body{font-size:12px;}img{border:none;}li{list-style:none;}input,select,textarea{outline:none;border:none; background:none;}textarea{resize:none;}a{text-decoration:none; color:#656565;}/*清浮动*/
.clearfix:after{content:"";display:block;clear:both;}.clearfix{zoom:1;}.fl{float:left;}.fr{float:right;}1.2 顶部结构
用fireworks做，我还不会，先去学习下。
--------真是蛋疼，做个开头就发现自己naive，先完成web进阶的jQuery吧----------
2、jQuery
十二、jQuery在线聊天室
12.1 基本功能介绍
登陆后才能进入（用于基本信息的在线显示）；
动态显示交流后的内容；
文字和表情的沟通实现（表情也是字符代号编码）
技术重点：ajax的无刷新技术展示数据
12.2 实现效果
利用jq中的ajax函数（比如$.ajax等）实现登陆，登陆时，显示登陆中，正确或失败，有相应的动作；
聊天室就是聊天内容区域，输入区域，人员显示区域。
12.3 流程
登录页面——》向服务器请求登录信息（用户名和密码信息）——》成功：跳转到聊天主页；否则，跳回登录页面。
聊天页面——》请求聊天数据——》获取聊天数据；
在线人员信息——》请求——》获取；
所以，可以简单作图，这里我掠过了，然后清楚的看到需要做的页面数量，请求和响应的逻辑和对应关系。
12.4 登录页面开发login
--功能
验证登录信息；
进入聊天室；
--代码
以前在PDO中讲过的一种，直接用POST方法传递表格参数的方法：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="Content-Type" content="text/html;chraset=UTF-8"><title>登录</title></head><body><form action='login.php' method='post'>用户名：<input type='text' name='username'/><br/>密 码：<input type='password' name='password'/><br/><input type='submit' value='登录'/></form></body></html>然后后续工作在login.php中实现就好了；
<?php
header('content-type:text/html;charset=utf-8');$username=$_POST['username'];$password=$_POST['password'];try { $pdo=new PDO('mysql:host=localhost;dbname=imooc','root',''); $pdo->exec('use imooc_pdo'); $sql="select * from user where username=? and password=?"; $stmt=$pdo->prepare($sql); $stmt->execute(array($username,$password)); //$stmt=$pdo->query($sql); $shit=$stmt->rowCount();//显示结果集statement对象中的行数 echo $shit; if($shit == 1){ //$url="ChatMain.html"; echo "<script language=\"javascript\">"; echo "alert(\"登录成功\")"; echo "</script>"; echo "<script language=\"javascript\">"; echo "document.location=\"ChatMain.html\""; echo "</script>"; }else{ echo "<script language=\"javascript\">"; echo "alert(\"用户名或密码错误\")"; echo "</script>"; echo "<script language=\"javascript\">"; echo "document.location=\"login2.html\""; echo "</script>"; }} catch (PDOException $e) {
echo $e->getMessage();}----------------------------------------------
我们在这里想要的是jQuery实现方法：换一种实现，同时把登录做的稍微好看一点点哈（我觉得好看，一个在于对应的css文件的编写，另一个在html中实现，DS工具实现要方便一点，有时间也得整着学一下）；
<!DOCTYPE html>
<HTML><head><TITLE>登录</TITLE> <SCRIPT type="text/javascript" src="jq/jquery-1.8.2.min.js"></SCRIPT> <SCRIPT type="text/javascript" src="js/jsLogin.js"></SCRIPT> <link rel="stylesheet" type="text/css" href="style/cssLogin.css" /></head><body> <div id="divLogin"> <h3>用户登录</h3> <div class="content"> <div>用户：<input id="txtName" type="text" class="txt" /></div> <div>密码：<input id="txtPass" type="text" class="txt" /></div> <div class="btnCenter"> <input id="Button1" type="button" value="登录" class="btn" /> <input id="Button2" type="button" value="取消" class="btn" /> </div> <span id="divMsg" class="clsTip"></span> </div> </div></body></HTML>其中，js是javascript逻辑控制文件；jq是jquery实现文件；css是css文件；后面的span标签，是为了实现某些功能暂时留下的。
$(function(){
//元素绑定全局ajaxStart事件 //这里就是用到span的标签，给出过程 $("#divMsg").ajaxStart(function(){ $(this).show().html("正在发送登录请求..."); }) $("#divMsg").ajaxStop(function(){ $(this).html("请求处理已完成！").hide(); }) $("#Button1").click(function(){ var $name=$("#txtName"); var $pass=$("#txtPass"); if($name.val() !== "" && $pass.val()!==""){ UserLogin($name.val(),$pass.val()); }else{ if($name.val()==""){ alert("用户名不能为空！"); $name.focus(); return false; // 阻止进一步的动作，很重要的一步 }else{ alert("密码不能为空！"); $pass.focus(); return false; } } })});function UserLogin(name,pass){
$.ajax({ type: "GET", //提交方式 url: "index.php", //提交对象 data:"action=Login&d="+new Date()+"&name="+name+"&pass="+pass, //提交数据 success:function(data){ if(data=="1"){ window.location="ChatMain.html"; }else{ alert("用户名或密码错误！"); return false; } } });}其实这里面还是有错误的，实现起来感觉没有第一种实现方法简单明了，希望了解的兄弟们指点下，两种方法的优缺点。
我还是稍微完善了下第一种PDO方法，直接在html中post表格数据，与数据库进行比对，然后返回信息。
当然呢，第二种，也就是本来应该采用的这种方式，很明显的优点在于其模块化实现，对于开发人员来说也是清晰明了。但，私以为，小型任务中，如果没有统一规划好的名称啊，什么的，这样子模块化是不是显得冗余，毕竟还需要看模块是否匹配啊什么的，不知道理解的对不对。
12.5 聊天室页面ChatMain
从页面本身来说，就是head包含jq文件，js文件，css文件；body实现当前页面的效果，也有接口功能的实现；
从布局来说，就是聊天窗口的样子，三个框框搞定（可是尼玛老子不会用css啊！！！！）；
-----晚上不一定还会写，先发了吧-----