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啊！！！！）；
-----晚上不一定還會寫，先發了吧-----
