PHP應(yīng)用開發(fā)與實踐 馬駿 第18章 綜合案例-應(yīng)用Smarty模板開發(fā)電子商務(wù)網(wǎng)站新

本章要求：第18章綜合案例——應(yīng)用Smarty模板開發(fā)電子商務(wù)網(wǎng)站如何進行系統(tǒng)分析數(shù)據(jù)庫設(shè)計流程搭建系統(tǒng)架構(gòu)的方法注冊即時驗證的實現(xiàn)方法簡單的樹形菜單的實現(xiàn)方法購物車的實現(xiàn)方法訂單的處理方法如何注冊域名和虛擬空間發(fā)布網(wǎng)站的方法主要內(nèi)容1.需求分析2.構(gòu)建開發(fā)環(huán)境3.系統(tǒng)設(shè)計4.數(shù)據(jù)庫設(shè)計5.搭建系統(tǒng)框架6.公共文件設(shè)計7.網(wǎng)站主要模塊開發(fā)8.開發(fā)技巧與難點分析9.發(fā)布網(wǎng)站第18章綜合案例——應(yīng)用Smarty模板開發(fā)電子商務(wù)網(wǎng)站18.1需求分析隨著“地球村〞概念的興起，網(wǎng)絡(luò)已經(jīng)深入到人們生活的每一個角落。世界越來越小，信息的傳播越來越快，內(nèi)容也越來越豐富?，F(xiàn)在，人們對于在網(wǎng)絡(luò)上尋求信息和效勞已不再滿足于簡單的信息獲取上，人們更多的是需要在網(wǎng)上實現(xiàn)方便的、便捷的、可交互式的網(wǎng)絡(luò)效勞。電子商務(wù)那么正好滿足了人們的需求。它可以讓人們在網(wǎng)上實現(xiàn)互動的交流及足不出戶地購置產(chǎn)品，向企業(yè)發(fā)表自己的意見、效勞需求及有關(guān)投訴，并且通過網(wǎng)站的交互式操作向企業(yè)進行產(chǎn)品的咨詢、得到相應(yīng)的回饋及技術(shù)支持。精明的商家絕不會錯過這樣龐大的市場，越來越多的企業(yè)已經(jīng)開展了電子商務(wù)活動。參加電子商務(wù)的行列也許不會讓企業(yè)馬上見到效益，但不參加那么一定會被時代所拋棄。18.2構(gòu)建開發(fā)環(huán)境在開發(fā)電子商務(wù)平臺時，該工程使用的軟件開發(fā)環(huán)境如下：1．效勞器端操作系統(tǒng)：Windows2003Server/Linux〔推薦〕。效勞器：。PHP軟件：。數(shù)據(jù)庫：。MySQL圖形化管理軟件：。開發(fā)工具：Dreamweaver8。瀏覽器：IE6.0及以上版本。分辨率：最正確效果為1024×768像素。2．客戶端瀏覽器：推薦IE6.0及以上版本。分辨率：最正確效果為1024×768像素。18.3系統(tǒng)設(shè)計18.3.1網(wǎng)站功能結(jié)構(gòu)18.3.2業(yè)務(wù)流程圖18.3.1網(wǎng)站功能結(jié)構(gòu)電子商務(wù)平臺分前臺系統(tǒng)和后臺系統(tǒng)。下面分別給出前、后臺的系統(tǒng)功能結(jié)構(gòu)圖。電子商務(wù)前臺系統(tǒng)功能結(jié)構(gòu)圖如圖18-1所示。圖18-1電子商務(wù)前臺系統(tǒng)功能結(jié)構(gòu)圖電子商務(wù)后臺系統(tǒng)功能結(jié)構(gòu)圖如圖18-2所示。圖18-2電子商務(wù)后臺系統(tǒng)功能結(jié)構(gòu)圖為了便于開發(fā)人員了解系統(tǒng)各個功能模塊之間的聯(lián)系及完整的購物流程，下面給出了系統(tǒng)的流程圖，如圖18-3所示。圖18-3系統(tǒng)流程圖18.3.2業(yè)務(wù)流程圖18.4數(shù)據(jù)庫設(shè)計18.4.1數(shù)據(jù)庫分析18.4.2創(chuàng)立數(shù)據(jù)庫與數(shù)據(jù)表根據(jù)需求分析和系統(tǒng)的功能流程圖，找出需要保存的信息數(shù)據(jù)〔也可以理解為現(xiàn)實世界中的實體〕，并將其轉(zhuǎn)化為原始數(shù)據(jù)〔屬性類型〕形式。這種描述現(xiàn)實世界的概念模型，可以使用E-R圖來表示。也就是實體-聯(lián)系圖。最后將E-R圖轉(zhuǎn)換為關(guān)系數(shù)據(jù)庫。這里重點介紹幾個E-R圖。1．會員信息實體會員信息實體包括編號、用戶名、密碼、E-mail、身份證號、聯(lián)系、QQ號、密碼提示、密碼答案、、注冊時間、真實姓名等屬性。會員信息實體E-R圖如圖18-4所示。圖18-4會員信息實體E-R圖18.4.1數(shù)據(jù)庫分析2．商品信息實體商品信息實體包括編號、名稱、上市時間、添加時間、型號、圖片、庫存、銷售、商品類型、會員價、市場價、是否打折等屬性。商品信息實體E-R圖如圖18-5所示。圖18-5商品信息實體E-R圖除了上面介紹的2個E-R圖，還有商品訂單實體、商品評價實體、公告實體、管理員實體和類型實體和友情鏈接實體等，限于篇幅，這里僅列出主要的實體E-R圖。系統(tǒng)E-R圖設(shè)計完成后，接下來根據(jù)E-R圖來創(chuàng)立數(shù)據(jù)庫和數(shù)據(jù)表。首先來看一下電子商務(wù)平臺所使用的數(shù)據(jù)表情況，如圖18-6所示。圖18-6電子商務(wù)數(shù)據(jù)表18.4.2創(chuàng)立數(shù)據(jù)庫與數(shù)據(jù)表下面來看各個數(shù)據(jù)表的結(jié)構(gòu)和字段說明。tb_admin〔管理員信息表〕管理員信息表主要用于存儲管理員的信息，其結(jié)構(gòu)如圖18-7所示。圖18-7管理員信息表結(jié)構(gòu)tb_class〔商品類型列表〕商品類型列表主要用于添加商品的類別，可以設(shè)定多個子類別〔目前最多只能到二級子類別〕，其結(jié)構(gòu)如圖18-8所示。圖18-8商品類型列表結(jié)構(gòu)tb_commo〔商品信息表〕商品信息表主要用于存儲關(guān)于商品的相關(guān)信息，其結(jié)構(gòu)如圖18-9所示。圖18-9商品信息表結(jié)構(gòu)此外還有商品訂單表、商品公告表、用戶信息表、友情鏈接表和商品留言表，限于篇幅，這里不再介紹。編寫代碼之前，可以把系統(tǒng)中可能用到的文件夾先創(chuàng)立出來〔例如，創(chuàng)立一個名為images的文件夾，用于保存程序中所使用的圖片〕，這樣不但可以方便以后的開發(fā)工作，也可以標(biāo)準(zhǔn)系統(tǒng)的整體架構(gòu)。因為本工程使用的是Smarty+PDO技術(shù)，所以目錄較多。下面介紹一下本系統(tǒng)的目錄結(jié)構(gòu)〔到三級目錄〕，如圖18-10所示。圖18-10電子商務(wù)網(wǎng)站文件夾組織結(jié)構(gòu)圖18.5搭建系統(tǒng)框架18.6公共文件設(shè)計18.6.1數(shù)據(jù)庫連接、管理和分頁類文件 18.6.2Smarty模板配置類文件18.6.3執(zhí)行類的實例化文件在數(shù)據(jù)庫連接、管理和分頁類文件中，定義三個類。分別是ConDB數(shù)據(jù)庫連接類，實現(xiàn)通過PDO連接MySQL數(shù)據(jù)庫；AdminDB數(shù)據(jù)庫管理類，使用PDO類庫中的方法執(zhí)行對數(shù)據(jù)庫中數(shù)據(jù)的查詢、添加、更新和刪除操作；SepPage分頁類，用于對商城中的數(shù)據(jù)進行分頁輸出。<?php//數(shù)據(jù)庫連接類classConnDB{ var$dbtype; var$host;var$user;var$pwd;var$dbname; //構(gòu)造方法functionConnDB($dbtype,$host,$user,$pwd,$dbname){ $this->dbtype=$dbtype; $this->host=$host; $this->user=$user; $this->pwd=$pwd; $this->dbname=$dbname;//實現(xiàn)數(shù)據(jù)庫的連接并返回連接對象functionGetConnId(){ if($this->dbtype=="mysql"||$this->dbtype=="mssql"){ $dsn="$this->dbtype:host=$this->host;dbname=$this->dbname"; }else{ $dsn=“$this->dbtype:dbname=$this->dbname〞; try{$conn=newPDO($dsn,$this->user,$this->pwd); //初始化一個PDO對象，就是創(chuàng)立了數(shù)據(jù)庫連接對象$pdo $conn->query("setnamesutf8"); return$conn; }catch(PDOException$e){ die("Error!:".$e->getMessage()."<br/>");18.6.1數(shù)據(jù)庫連接、管理和分頁類文件 //數(shù)據(jù)庫管理類classAdminDB{ functionExecSQL($sqlstr,$conn){ $sqltype=strtolower(substr(trim($sqlstr),0,6)); $rs=$conn->prepare($sqlstr); //準(zhǔn)備查詢語句 $rs->execute(); //執(zhí)行查詢語句，并返回結(jié)果集 if($sqltype=="select"){ $array=$rs->fetchAll(PDO::FETCH_ASSOC); //獲取結(jié)果集中的所有數(shù)據(jù) if(count($array)==0||$rs==false) returnfalse; else return$array; }elseif($sqltype=="update"||$sqltype=="insert"||$sqltype=="delete"){ if($rs) returntrue; else returnfalse; } }}//分頁類classSepPage{var$rs; var$pagesize; var$nowpage; var$array; var$conn; var$sqlstr; functionShowData($sqlstr,$conn,$pagesize,$nowpage){ //定義方法 if(!isset($nowpage)||$nowpage=="") //判斷變量值是否為空 $this->nowpage=1; //定義每頁起始頁 else $this->nowpage=$nowpage; $this->pagesize=$pagesize; //定義每頁輸出的記錄數(shù) $this->conn=$conn; //連接數(shù)據(jù)庫返回的標(biāo)識 $this->sqlstr=$sqlstr; //執(zhí)行的查詢語句 $this->rs=$this->conn->PageExecute($this->sqlstr,$this->pagesize,$this->nowpage); @$this->array=$this->rs->GetRows(); //獲取記錄數(shù) if(count($this->array)==0||$this->rs==false) returnfalse; else return$this->array; } functionShowPage($contentname,$utits,$anothersearchstr,$anothersearchstrs,$class){ $allrs=$this->conn->Execute($this->sqlstr); //執(zhí)行查詢語句 $record=count($allrs->GetRows()); //統(tǒng)計記錄總數(shù)$pagecount=ceil($record/$this->pagesize); //計算共有幾頁 $str.=$contentname." ".$record." ".$utits." 每頁 ".$this->pagesize." ".$utits." 第 ".$this->rs->AbsolutePage()." 頁/共 ".$pagecount." 頁"; $str.="    "; if(!$this->rs->AtFirstPage()) $str.="<ahref=".$_SERVER['PHP_SELF']."?page=1¶meter1=".$anothersearchstr."¶meter2=".$anothersearchstrs."class=".$class.">首頁</a>"; else $str.="<fontcolor='#555555'>首頁</font>"; $str.=" "; if(!$this->rs->AtFirstPage()) $str.="<ahref=".$_SERVER['PHP_SELF']."?page=".($this->rs->AbsolutePage()-1)."¶meter1=".$anothersearchstr."¶meter2=".$anothersearchstrs."class=".$class.">上一頁</a>"; else $str.="<fontcolor='#555555'>上一頁</font>"; $str.=" "; if(!$this->rs->AtLastPage()) $str.="<ahref=".$_SERVER['PHP_SELF']."?page=".($this->rs->AbsolutePage()+1)."¶meter1=".$anothersearchstr."¶meter2=".$anothersearchstrs."class=".$class.">下一頁</a>"; else $str.="<fontcolor='#555555'>下一頁</font>"; $str.=" "; if(!$this->rs->AtLastPage()) $str.="<ahref=".$_SERVER['PHP_SELF']."?page=".$pagecount."¶meter1=".$anothersearchstr."¶meter2=".$anothersearchstrs."class=".$class.">尾頁</a>"; else $str.="<fontcolor='#555555'>尾頁</font>"; if(count($this->array)==0||$this->rs==false) return""; else return$str; }}?>在Smarty模板配置類文件中配置Smarty模板文件、編譯文件、配置文件等文件路徑。<?phprequire("libs/Smarty.class.php"); //包含模板文件classSmartyProjectextendsSmarty{ //定義類，繼承模板類 functionSmartyProject(){ //定義方法 $this->template_dir="./system/templates/"; //指定模板文件存儲位置 $this->compile_dir="./system/templates_c/"; //指定編譯文件存儲位置 $this->config_dir="./system/configs/"; //指定配置文件存儲位置 $this->cache_dir="./system/cache/"; //指定緩存文件存儲位置}}?>18.6.2Smarty模板配置類文件在文件中，通過require語句包含和文件，執(zhí)行類的實例化操作，并定義返回對象。完成數(shù)據(jù)庫連接類的實例化后，調(diào)用其中GetConnId()方法連接數(shù)據(jù)庫。<?phprequire("system.smarty.inc.php"); //包含Smarty配置類require("system.class.inc.php"); //包含數(shù)據(jù)庫連接和操作類$connobj=newConnDB("mysql","localhost","root","111","db_database18"); //數(shù)據(jù)庫連接類實例化$conn=$connobj->GetConnId(); //執(zhí)行連接操作，返回連接標(biāo)識$admindb=newAdminDB(); //數(shù)據(jù)庫操作類實例化$seppage=newSepPage(); //分頁類實例化$usefun=newUseFun(); //使用常用函數(shù)類實例化$smarty=newSmartyProject(); //調(diào)用smarty模板functionunhtml($params){ extract($params); $text=$content; global$usefun; return$usefun->UnHtml($text);}$smarty->register_function("unhtml","unhtml"); //注冊模板函數(shù)?>18.6.3執(zhí)行類的實例化文件18.7網(wǎng)站主要模塊開發(fā)18.7.1前臺首頁18.7.2登錄模塊設(shè)計18.7.3會員信息模塊設(shè)計18.7.4商品展示模塊設(shè)計18.7.5購物車模塊設(shè)計18.7.6收銀臺模塊設(shè)計18.7.7后臺首頁設(shè)計前臺首頁一般沒有多少實質(zhì)的技術(shù)，主要是加載一些功能模塊，如登錄模塊、導(dǎo)航欄模塊、公告欄模塊等，使瀏覽者能夠了解網(wǎng)站內(nèi)容和特點。首頁的重要之處是要合理地對頁面進行布局，既要盡可能地將重點模塊顯示出來，同時又不能因為頁面凌亂無序，而讓瀏覽者無所適從、產(chǎn)生反感。本系統(tǒng)前臺首頁的運行結(jié)果如圖18-11所示。圖18-11前臺首頁運行效果18.7.1前臺首頁1．前臺首頁技術(shù)分析在前臺首頁中應(yīng)用Switch語句與Smarty模板中的內(nèi)建函數(shù)include設(shè)計一個框架頁面，實現(xiàn)不同功能模塊在首頁中的展示。Switch語句在PHP動態(tài)文件中使用，根據(jù)超級鏈接傳遞的值，包含不同的功能模塊。Include標(biāo)簽在Smarty模板頁中使用，在當(dāng)前模板頁中包含其他模板文件。其語法如下：{includefile="file_name"assign=""var=""}參數(shù)說明：file指定包含模板文件的名稱；assign指定一個變量保存包含模板的輸出；var傳遞給待包含模板的本地參數(shù)，只在待包含模板中有效。2．前臺首頁實現(xiàn)過程〔1〕創(chuàng)立index.php動態(tài)頁。在index.php動態(tài)頁中，應(yīng)用include_once()語句包含相應(yīng)的文件，應(yīng)用Switch語句，以超級鏈接中參數(shù)page傳遞的值為條件進行判斷，實現(xiàn)在不同頁面之間跳轉(zhuǎn)。index.php的關(guān)鍵代碼如下：<?phpsession_start();header("Content-type:text/html;charset=UTF-8"); //設(shè)置文件編碼格式require("system/system.inc.php"); //包含配置文件if(isset($_GET["page"])){ $page=$_GET["page"];}else{ $page="";}include_once("login.php");include_once("public.php");include_once("links.php");switch($page){ case"hyzx": include_once"member.php";$smarty->assign('admin_phtml','member.tpl'); //將PHP腳本文件對應(yīng)的模板文件名稱賦給模板變量 break; case'allpub': include_once'allpub.php';$smarty->assign('admin_phtml','allpub.tpl'); //將PHP腳本文件對應(yīng)的模板文件名稱賦給模板變量

break; case'nom': include_once'allnom.php';$smarty->assign('admin_phtml','allnom.tpl'); //將PHP腳本文件對應(yīng)的模板文件名稱賦給模板變量 break; case'new': include_once'allnew.php'; $smarty->assign('admin_phtml','allnew.tpl'); //將PHP腳本文件對應(yīng)的模板文件名稱賦給模板變量 break; case'hot': include_once'allhot.php'; $smarty->assign('admin_phtml','allhot.tpl'); //將PHP腳本文件對應(yīng)的模板文件名稱賦給模板變量break; case'shopcar': include_once'myshopcar.php'; $smarty->assign('admin_phtml','myshopcar.tpl'); //將PHP腳本文件對應(yīng)的模板文件名稱賦給模板變量break; case'settle': include_once'settle.php'; $smarty->assign('admin_phtml','settle.tpl'); //將PHP腳本文件對應(yīng)的模板文件名稱賦給模板變量 break; case'queryform': include_once'queryform.php'; $smarty->assign('admin_phtml','queryform.tpl'); //將PHP腳本文件對應(yīng)的模板文件名稱賦給模板變量 break; default: include_once'newhot.php'; $smarty->assign('admin_phtml','newhot.tpl'); //將PHP腳本文件對應(yīng)的模板文件名稱賦給模板變 break;}$smarty->display("index.tpl"); //指定模板頁?>〔2〕創(chuàng)立index.tpl模板頁。在模板文件index.tpl中應(yīng)用Smarty的include標(biāo)簽調(diào)用不同的模板文件，生成靜態(tài)頁面。其關(guān)鍵代碼如下：<tablewidth="850"border="0"cellspacing="0"cellpadding="0"><tr><tdcolspan="2">{includefile='top.tpl'}</td></tr><tr><tdwidth="216"align="left"valign="top"> {includefile='login.tpl'} {includefile='public.tpl'} {includefile='links.tpl'}</td><tdwidth="634"height="700"align="center"valign="top">{includefile='search.tpl'}<!--載入模板文件-->{includefile=$admin_phtml}</td></tr></table><tablewidth="850"border="0"cellspacing="0"cellpadding="0"> <tr> <td>{includefile='buttom.tpl'}</td></tr></table>說明：本系統(tǒng)的功能較多，結(jié)構(gòu)比較復(fù)雜，對于初學(xué)者來說學(xué)起來可能會比較困難。所以，本書將系統(tǒng)中的各個功能模塊所涉及的文件〔如PHP、TPL、CSS、JS等〕盡可能都單獨實現(xiàn)。讀者在學(xué)習(xí)其中某個模塊時，可以將相關(guān)的文件統(tǒng)一放到同一個目錄下單獨測試。18.7.2登錄模塊設(shè)計用戶登錄模塊是會員功能的窗口。匿名用戶雖然也可以訪問本網(wǎng)站，但只能進行瀏覽、查詢等簡單操作，而會員那么可以購置商品，并且能享受超低價格。登錄模塊包括用戶注冊、用戶登錄和找回密碼3局部，其運行結(jié)果如圖18-12所示。圖18-12登錄模塊運行效果１．用戶注冊用戶注冊頁面的主要功能是新用戶注冊。如果信息輸入完整而且符合要求，那么系統(tǒng)會將該用戶信息保存到數(shù)據(jù)庫中，否那么顯示錯誤原因，以便用戶改正。用戶注冊頁面的運行結(jié)果如圖18-13所示。圖18-13注冊模塊頁面〔1〕創(chuàng)立register.tpl模板文件，編寫用戶注冊頁面。其中包含兩個JS腳本文件createxml.js和check.js。其中，createxml.js是Ajax的實例化文件，而check.js對用戶注冊信息進行驗證，并且返回驗證結(jié)果?！?〕創(chuàng)立register.php動態(tài)PHP文件，加載模板。register.php文件的代碼如下：<?phpheader("Content-type:text/html;charset=UTF-8"); //設(shè)置文件編碼格式require("system/system.inc.php"); //包含配置文件$smarty->assign('title','新用戶注冊');$smarty->display('register.tpl');?>〔3〕創(chuàng)立reg_chk.php文件，獲取表單中提交的數(shù)據(jù)，將數(shù)據(jù)存儲到指定的數(shù)據(jù)表中。reg_chk.php的代碼如下：<?phpsession_start();header("Content-type:text/html;charset=UTF-8"); //設(shè)置文件編碼格式require("system/system.inc.php"); //包含配置文件 $name=$_POST['name']; $password=md5($_POST['pwd1']); $question=$_POST['question']; $answer=$_POST['answer']; $realname=$_POST['realname']; $card=$_POST['card']; $tel=$_POST['tel']; $phone=$_POST['phone']; $Email=$_POST['email']; $QQ=$_POST['qq']; $code=$_POST['code']; $address=$_POST['address']; $addtime=date("Y-m-dH:i:s"); $sql="insertintotb_user(name,password,question,answer,realname,card,tel,phone,Email,QQ,code,address,addtime,isfreeze,shopping)"; $sql.="values('$name','$password','$question','$answer','$realname','$card','$tel','$phone','$Email','$QQ','$code','$address','$addtime','0','')"; $rst=$admindb->ExecSQL($sql,$conn); //執(zhí)行添加操作 if($rst){ $_SESSION['member']=$name; echo"<script>top.opener.location.reload();alert('注冊成功');window.close();</script>"; }else{ echo'<script>alert(\'添加失敗\');history.back;</script>'; }?>〔4〕創(chuàng)立“用戶注冊〞超鏈接。當(dāng)用戶單擊前臺的按鈕時，系統(tǒng)會調(diào)用js的onclick事件，彈出注冊窗口。其代碼如下：<ahref="#"id="login"onclick="reg()"><imgsrc="images/check.JPG"width="59"height="23"border="0"/></a>這里使用到的js文件為js/login.js，調(diào)用的函數(shù)為reg()。該函數(shù)的代碼如下：functionreg(){window.open("register.php","_blank","width=600,height=650",false); //彈出窗口}２．用戶登錄用戶登錄模塊的運行結(jié)果如圖18-14所示，需要輸入用戶名、密碼和驗證碼。圖18-14登錄模塊運行效果〔1〕創(chuàng)立模板文件login.tpl，完成用戶登錄表單的設(shè)計。在該頁面中當(dāng)單擊Submit按鈕時，系統(tǒng)將調(diào)用lg()函數(shù)對用戶登錄提交信息進行驗證。lg()函數(shù)包含在js/login.js腳本文件內(nèi)，其代碼如下：//JavaScriptDocumentfunctionlg(form){ if(.value==""){ alert('請輸入用戶名'); .focus(); returnfalse; } if(form.password.value==""||form.password.value.length<6){ alert('請輸入正確密碼'); form.password.focus(); returnfalse; } if(form.check.value==""){ alert('請輸入驗證碼'); form.check.focus(); returnfalse; } if(form.check.value!=form.check2.value){ form.check.select(); code(form); returnfalse; }varuser=.value; varpassword=form.password.value; varurl="chkname.php?user="+user+"&password="+password; xml.open("GET",url,true); xml.onreadystatechange=function(){ if(xml.readyState==4){ varmsg=xml.responseText; if(msg=='1'){ alert('用戶名或密碼錯誤!!'); form.password.select(); form.check.value=''; code(form); returnfalse; }if(msg=="3"){ alert("該用戶被凍結(jié)，請聯(lián)系管理員"); returnfalse; }else{ alert('歡送光臨'); location.reload(); } } } xml.send(null); returnfalse;}//顯示驗證碼

functionyzm(form){ varnum1=Math.round(Math.random()*10000000); varnum=num1.toString().substr(0,4); document.write("<imgname=codeimgwidth=65heigh=35src='yzm.php?num="+num+"'>"); form.check2.value=num;}//刷新驗證碼functioncode(form){ varnum1=Math.round(Math.random()*10000000); varnum=num1.toString().substr(0,4);

document.codeimg.src="yzm.php?num="+num; form.check2.value=num;}//注冊functionreg(){window.open("register.php","_blank","width=600,height=650",false); }//找回密碼functionfound(){window.open("found.php","_blank","width=350height=240",false); }用戶名和密碼是在chkname.php頁面中被驗證?！?〕創(chuàng)立用戶信息模板文件info.tpl。用戶登錄成功后，在原登錄框位置將顯示用戶信息，用戶可以通過“會員中心〞對自己的信息做修改，也可以單擊“查看購物車〞超鏈接查看購物車商品；當(dāng)用戶離開時可以單擊“平安離開〞超鏈接。用戶信息模塊的主要代碼如下：<!--顯示當(dāng)前登錄用戶名-->歡送您：{$member}<!--會員中心超鏈接--><ahref="?page=hyzx"id="info"class="lk">會員中心</a><!--查看購物車--><ahref="?page=shopcar"class="lk">查看購物車</a><!--平安離開--><aonclick="javascript:logout()"style="cursor:hand"id="info">平安離開</a>３．找回密碼登錄模塊的最后一個局部就是找回密碼。找回密碼是根據(jù)用戶在填寫資料時所填寫的密保問題和密保答案來實現(xiàn)的。當(dāng)用戶單擊“找回密碼〞超鏈接時，首先提示用戶輸入要找回密碼的會員名稱，然后根據(jù)密保問題填寫密保答案，最后重新輸入密碼。找回密碼模塊的流程如圖18-15所示。圖18-15找回密碼模塊的流程圖〔1〕創(chuàng)立模板文件雖然找回密碼需要4個步驟，但實際上每個步驟使用的都是相同的模板文件和js文件，只是被調(diào)用的表單和js函數(shù)略有差異。這里根據(jù)不同的文件來分別進行介紹。該模板文件一共包含了3個表單，分別代表了3個步驟，其核心代碼如下：<!--載入兩個js腳本文件--><scriptlanguage="javascript"src="js/createxml.js"></script><scriptlanguage="javascript"src="js/found.js"></script><!--第一個div標(biāo)簽--><divid="first"><tablewidth="200"border="0"cellspacing="0"cellpadding="0"><formid="foundname"name="found"method="post"action="#"><tr><td>找回密碼</td></tr><tr><td>會員名稱：</td> <!--text文本域，用于輸入要找回密碼的會員名稱--><td><inputid="user"name="user"type="text"class="txt"></td></tr><tr><td><!--單擊“下一步〞按鈕，能觸發(fā)onclick事件來調(diào)用chkname函數(shù)--><inputid="next1"name="next1"type="button"class="btn"value="下一步"onClick="returnchkname(foundname)"/></td></tr></form></table></div><!--第2個div標(biāo)簽，樣式為隱藏--><divid="second"style="display:none;"><table><formid="foundanswer"name="found"method="post"action="#"><tr><td>找回密碼</td></tr><tr><td>密保問題：</td><!--用于顯示密保問題的div標(biāo)簽--><td<divid="question"></div></td></tr><tr><td>密保答案：</td><!--文本域，用于填寫密保答案--><td><inputid="answer"name="answer"type="text"class="txt"/></td></tr><tr><!--單擊“下一步〞按鈕，用來觸發(fā)onclick事件，并調(diào)用chkanswer()函數(shù)--><td><inputid="next2"name="next2"type="button"class="btn"value="下一步"onClick="returnchkanswer(foundanswer)"></td></tr></form></table></div><!--第3個div標(biāo)簽，樣式也為隱藏，作用是修改密碼--><divid='third'style="display:none;"><table><formid="modifypwd"name="found"method="post"action="#"><tr><td>輸入密碼</td></tr><tr><td>輸入密碼：</td><td><inputid="pwd1"name="pwd1"type="password"class="txt"></td></tr><tr><td>確認密碼：</td><td><inputid="pwd2"name="pwd2"type="password"class="txt"/></td></tr><tr><!--單擊“完成〞按鈕，調(diào)用ckpwd()函數(shù)--><td><inputid="mod"name=“mod"type="button"class="btn"value="完成"onClick="returnchkpwd(modifypwd)"></td></tr></form></table></div>可以看出，在上述3個表單中，只有一個表單默認情況下是顯示的，其他那么為隱藏。只有通過調(diào)用不同的js函數(shù)，才可以對其他表單進行操作?！?〕創(chuàng)立js腳本文件found.js腳本文件包含3個函數(shù)：chkname()、chkanswer()和chkpwd()。其中，chkname()函數(shù)的作用是檢查用戶輸入的會員名稱，如果存在，那么使用xml對象去調(diào)用生成的url進行處理判斷。如果該用戶存在，那么隱藏當(dāng)前表單，并顯示下一個表單，最后輸出密保問題。chkname()函數(shù)的代碼如下：functionchkname(form){ varuser=form.user.value; if(user==''){ alert('請輸入用戶名'); form.user.focus(); returnfalse; }else{ varurl="foundpwd.php?user="+user; xml.open("GET",url,true); xml.onreadystatechange=function(){ if(xml.readyState==4){ varmsg=xml.responseText; if(msg=='0'){ alert('沒有該用戶，請重新查找!'); form.user.select(); returnfalse; }else{ document.getElementById('first').style.display='none'; document.getElementById('second').style.display=''; document.getElementById('question').innerHTML=msg;

其他兩個函數(shù)也使用xmlrequest對象，實現(xiàn)方法相差無幾，不同之處就是對返回值的處理，chkanswer()函數(shù)隱藏當(dāng)前表單，顯示下一個表單。chkanswer()函數(shù)的代碼如下：functionchkanswer(form){ varuser=document.getElementById('user').value; varanswer=form.answer.value; if(answer==''){ alert('請輸入提示問題'); form.answer.focus(); returnfalse; }else{ varurl="foundpwd.php?user="+user+"&answer="+answer; xml.open("GET",url,true); xml.onreadystatechange=function(){ if(xml.readyState==4){ varmsg=xml.responseText; if(msg=='0'){ alert('問題答復(fù)錯誤'); form.answer.select(); returnfalse; }else{ document.getElementById('second').style.display='none'; document.getElementById('third').style.display=''; } } } xml.send(null); }}而chkpwd()函數(shù)那么提示用戶操作狀態(tài)，如果成功，那么關(guān)閉當(dāng)前頁。ckpwd()函數(shù)代碼如下：functionchkpwd(form){ varuser=document.getElementById('user').value; varpwd1=form.pwd1.value; varpwd2=form.pwd2.value; if(pwd1==''){ alert('請輸入密碼'); form.pwd1.focus(); returnfalse; if(pwd1.length<6){ alert('密碼輸入錯誤'); form.pwd1.focus(); returnfalse; if(pwd1!=pwd2){ alert('兩次密碼不相等'); form.pwd2.select(); returnfalse; varurl="foundpwd.php?user="+user+"&password="+pwd1; xml.open("GET",url,true); xml.onreadystatechange=function(){ if(xml.readyState==4){ varmsg=xml.responseText; if(msg=='1'){ alert('密碼修改成功，請重新登錄'); window.close(); }else{ alert(msg);

xml.send(null);}〔3〕創(chuàng)立數(shù)據(jù)處理文件foundpwd.php文件的功能是根據(jù)用戶輸入信息來檢測數(shù)據(jù)表中的數(shù)據(jù)，并根據(jù)不同的輸入信息返回不同的結(jié)果。該文件代碼如下：<?phpheader("Content-type:text/html;charset=UTF-8"); //設(shè)置文件編碼格式require("system/system.inc.php"); //包含配置文件 $smarty->assign('title','找回密碼');$reback='0'; //設(shè)置變量初始值if(!isset($_GET['answer'])&&!isset($_GET['password'])){ //判斷變量是否存在 $namesql="select*fromtb_userwherename='".$_GET['user']."'"; $namerst=$admindb->ExecSQL($namesql,$conn); //查詢用戶名是否存在 if($namerst){ $question=$namerst[0]['question']; $reback=$question; }}elseif(isset($_GET['answer'])){ $answersql="select*fromtb_userwherename='".$_GET['user']."'andanswer='".$_GET['answer']."'"; $answerrst=$admindb->ExecSQL($answersql,$conn); if($answerrst){ $reback='1'; }}elseif(isset($_GET['password'])){ $sql="updatetb_usersetpassword='".md5($_GET['password'])."'wherename='".$_GET['user']."'"; $rst=$admindb->ExecSQL($sql,$conn); if($rst){ $reback='1'; //為模板變量賦值 echo$reback; //輸出返回結(jié)果?>〔4〕加載模板頁因為所有登錄模塊的模板都不需要或者只需要傳遞一兩個變量，所以PHP加載頁的內(nèi)容比較簡單。找回密碼頁面的代碼如下：<?phpheader("Content-type:text/html;charset=UTF-8"); //設(shè)置文件編碼格式require("system/system.inc.php"); //包含配置文件 $smarty->assign('title','找回密碼');$smarty->display('found.tpl');?>18.7.3會員信息模塊設(shè)計用戶登錄后，即可看到會員信息模塊。在這里，可以進行查看或修改個人信息及密碼、查看購物車和平安退出等操作。本節(jié)只對會員信息模塊中的“會員中心〞和“平安退出〞進行講解，關(guān)于“查看購物車〞將在商品模塊中進行介紹。會員信息模塊的運行效果如圖18-16所示。圖18-16會員信息模塊１．會員信息模塊技術(shù)分析在會員信息模塊中，以SESSION變量中存儲的用戶名稱為條件，從會員信息表中查詢出會員信息，并且將會員信息存儲到模板變量中，最后在模板頁中輸出會員信息。member.php的代碼如下：<?php/* 查找用戶資料 */if(isset($_SESSION['member'])){ $sql="select*fromtb_userwherename='".$_SESSION['member']."'"; $arr=$admindb->ExecSQL($sql,$conn); if(isset($_GET['action'])&&$_GET['action']=='modify'){ $smarty->assign('check',"find"); $smarty->assign('pwdarr',$arr); }else{ $smarty->assign('check',"notfind"); $smarty->assign('pwdarr',$arr); }}?>member.php文件中查詢出的數(shù)據(jù)是會員信息模板功能實現(xiàn)的根本。２．會員中心當(dāng)單擊“會員中心〞超鏈接時，會回傳給當(dāng)前頁一個page值，當(dāng)前頁根據(jù)這個page值來載入member.php文件?！?〕創(chuàng)立PHP頁面與登錄模塊設(shè)計不同，本節(jié)首先來創(chuàng)立PHP頁面。因為該模塊中的模板需要使用數(shù)據(jù)庫中的數(shù)據(jù)及一些動態(tài)信息，這些都需要在PHP頁中先行獲取及處理，然后再傳給模板頁。會員中心頁面的代碼請參考技術(shù)分析中的內(nèi)容?！?〕創(chuàng)立模板頁該模塊包括查看信息模板及修改密碼模板，都存儲于member.tpl模板文件中。<linkrel="stylesheet"href="css/member.css"/><scriptlanguage="javascript"src="js/member.js"></script>{if$check=="find"}<palign="left">{$smarty.session.member}>>><ahref='?page=hyzx'id="mem">查看信息</a>>>><ahref='?page=hyzx&action=modify'id="mem">修改密碼</a></p><tableid="member"width="300"border="0"cellpadding="0"cellspacing="0"><formid="member"name="member"method="post"action="modify_pwd_chk.php"onSubmit="returnpwd(member)"><tr><tdheight="25"colspan="2"align="center"valign="middle"id="first"><fontcolor="#f0f0f0">修改密碼</font></td></tr><tr><tdwidth="25%"height="25"align="right"valign="middle"id="left">原密碼：</td><tdheight="25"align="left"valign="middle"id="right"><inputid="old"name="old"type="password"/></td></tr><tr><tdwidth="25%"height="25"align="right"valign="middle"id="left">新密碼：</td><tdheight="25"align="left"valign="middle"id="right"><inputid="new1"name="new1"type="password"/></td></tr><tr><tdwidth="25%"height="25"align="right"valign="middle"id="left">確認密碼：</td><tdheight="25"align="left"valign="middle"id="right"><inputid="new2"name="new2"type="password"/></td></tr><tr><tdheight="30"colspan="2"align="center"valign="middle"><inputid="enter"name="enter"type="submit"value="修改"/></td></tr></form></table>{else}<palign="left">{$smarty.session.member}>>><ahref='?page=hyzx'id="mem">查看信息</a>>>><ahref='?page=hyzx&action=modify'id="mem">修改密碼</a></p>{sectionname=pwd_idloop=$pwdarr}<tableid='member'width="500"border="0"cellpadding="0"cellspacing="0"><formid="member"name="member"method="post"action="modify_info_chk.php"onSubmit="returnmem(member)"><tr><tdheight="25"colspan="2"align="center"valign="middle"id="first"><fontcolor="#f0f0f0">{$pwdarr[pwd_id].name}信息〔不可更改信息〕</font></td></tr><tr><tdwidth="25%"height="25"align="right"valign="middle"id="left">會員編號：</td><tdheight="25"align="left"valign="middle"id="right"> {$pwdarr[pwd_id].id}</td></tr><tr><tdwidth="25%"height="25"align="right"valign="middle"id="left">會員名稱：</td><tdheight="25"align="left"valign="middle"id="right"> {$pwdarr[pwd_id].name}</td></tr><tr><tdwidth="25%"height="25"align="right"valign="middle"id="left">密保問題：</td><tdheight="25"align="left"valign="middle"id="right"> {$pwdarr[pwd_id].question}</td></tr><tr><tdwidth="25%"height="25"align="right"valign="middle"id="left">密保答案：</td><tdheight="25"align="left"valign="middle"id="right"> {$pwdarr[pwd_id].answer}</td></tr><tr><tdwidth="25%"height="25"align="right"valign="middle"id="left">注冊時間：</td><tdheight="25"align="left"valign="middle"id="right"> {$pwdarr[pwd_id].addtime}</td></tr><tr><tdwidth="25%"height="25"align="right"valign="middle"id="left">消費總額：</td><tdheight="25"align="left"valign="middle"id="right"> {$pwdarr[pwd_id].consume}</td></tr><tr><tdheight="25"colspan="2"align="center"valign="middle"id="first"><fontcolor="#f0f0f0">{$pwdarr[pwd_id].name}信息〔可更改信息〕</font></td></tr><tr><tdwidth="25%"height="25"align="right"valign="middle"id="left">真實姓名：</td><tdheight="25"align="left"valign="middle"id="right"><inputid="realname"name="realname"type="text"value="{$pwdarr[pwd_id].realname}"/> <inputtype="hidden"name="userid"value="{$pwdarr[pwd_id].id}"/><fontcolor="red">*</font></td></tr><tr><tdwidth="25%"height="25"align="right"valign="middle"id="left">身份證號：</td><tdheight="25"align="left"valign="middle"id="right"><inputid="card"name="card"type="text"value="{$pwdarr[pwd_id].card}"/> <fontcolor="red">*</font></td></tr><tr><tdwidth="25%"height="25"align="right"valign="middle"id="left">移動：</td><tdheight="25"align="left"valign="middle"id="right"><inputid="tel"name="tel"type="text"value="{$pwdarr[pwd_id].tel}"> <fontcolor="red">*</font></td></tr><tr><tdwidth="25%"height="25"align="right"valign="middle"id="left">固定：</td><tdheight="25"align="left"valign="middle"id="right"><inputid="phone"name="phone"type="text"value="{$pwdarr[pwd_id].phone}"/> <fontcolor="red">*</font></td></tr><tr><tdwidth="25%"height="25"align="right"valign="middle"id="left">Email：</td><tdheight="25"align="left"valign="middle"id="right"><inputid="email"name="email"type="text"value="{$pwdarr[pwd_id].Email}"/></td></tr><tr><tdwidth="25%"height="25"align="right"valign="middle"id="left">QQ號：</td><tdheight="25"align="left"valign="middle"id="right"><inputid="qq"name="qq"type="text"value="{$pwdarr[pwd_id].QQ}"/></td></tr><tr><tdwidth="25%"height="25"align="right"valign="middle"id="left">：</td><tdheight="25"align="left"valign="middle"id="right"><inputid="code"name="code"type="text"value="{$pwdarr[pwd_id].code}"/></td></tr><tr><tdwidth="25%"height="25"align="right"valign="middle"id="left">地址：</td><tdheight="25"align="left"valign="middle"id="right"><inputid="address"name="address"type="text"value="{$pwdarr[pwd_id].address}"/> <fontcolor="red">*</font></td></tr><tr><tdheight="30"colspan="2"align="center"valign="middle"><inputname="enter"type="submit"id="enter"value="修改"/>    <inputname="reset"type="reset"id="reset"value="重置"/></td></tr></form></table>{/section}{/if}〔3〕創(chuàng)立腳本文件該模塊的腳本文件和用戶注冊模塊類似，都是對信息的合法性進行驗證，如信息是否為空、是否符合標(biāo)準(zhǔn)等，這里不再贅述。〔4〕創(chuàng)立處理頁當(dāng)信息驗證通過后，系統(tǒng)將跳轉(zhuǎn)到處理頁進行信息處理。本模塊處理頁分信息修改和密碼修改兩個頁面。首先介紹信息修改頁，代碼如下：<?phpsession_start();header("Content-type:text/html;charset=UTF-8"); //設(shè)置文件編碼格式require("system/system.inc.php"); //包含配置文件$sql="updatetb