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

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

break; case'nom': include_once'allnom.php';$smarty->assign('admin_phtml','allnom.tpl'); //將PHP腳本文件對(duì)應(yīng)的模板文件名稱賦給模板變量 break; case'new': include_once'allnew.php'; $smarty->assign('admin_phtml','allnew.tpl'); //將PHP腳本文件對(duì)應(yīng)的模板文件名稱賦給模板變量 break; case'hot': include_once'allhot.php'; $smarty->assign('admin_phtml','allhot.tpl'); //將PHP腳本文件對(duì)應(yīng)的模板文件名稱賦給模板變量break; case'shopcar': include_once'myshopcar.php'; $smarty->assign('admin_phtml','myshopcar.tpl'); //將PHP腳本文件對(duì)應(yīng)的模板文件名稱賦給模板變量break; case'settle': include_once'settle.php'; $smarty->assign('admin_phtml','settle.tpl'); //將PHP腳本文件對(duì)應(yīng)的模板文件名稱賦給模板變量 break; case'queryform': include_once'queryform.php'; $smarty->assign('admin_phtml','queryform.tpl'); //將PHP腳本文件對(duì)應(yīng)的模板文件名稱賦給模板變量 break; default: include_once'newhot.php'; $smarty->assign('admin_phtml','newhot.tpl'); //將PHP腳本文件對(duì)應(yīng)的模板文件名稱賦給模板變 break;}$smarty->display("index.tpl"); //指定模板頁(yè)?>〔2〕創(chuàng)立index.tpl模板頁(yè)。在模板文件index.tpl中應(yīng)用Smarty的include標(biāo)簽調(diào)用不同的模板文件，生成靜態(tài)頁(yè)面。其關(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>說(shuō)明：本系統(tǒng)的功能較多，結(jié)構(gòu)比較復(fù)雜，對(duì)于初學(xué)者來(lái)說(shuō)學(xué)起來(lái)可能會(huì)比較困難。所以，本書將系統(tǒng)中的各個(gè)功能模塊所涉及的文件〔如PHP、TPL、CSS、JS等〕盡可能都單獨(dú)實(shí)現(xiàn)。讀者在學(xué)習(xí)其中某個(gè)模塊時(shí)，可以將相關(guān)的文件統(tǒng)一放到同一個(gè)目錄下單獨(dú)測(cè)試。18.7.2登錄模塊設(shè)計(jì)用戶登錄模塊是會(huì)員功能的窗口。匿名用戶雖然也可以訪問(wèn)本網(wǎng)站，但只能進(jìn)行瀏覽、查詢等簡(jiǎn)單操作，而會(huì)員那么可以購(gòu)置商品，并且能享受超低價(jià)格。登錄模塊包括用戶注冊(cè)、用戶登錄和找回密碼3局部，其運(yùn)行結(jié)果如圖18-12所示。圖18-12登錄模塊運(yùn)行效果１．用戶注冊(cè)用戶注冊(cè)頁(yè)面的主要功能是新用戶注冊(cè)。如果信息輸入完整而且符合要求，那么系統(tǒng)會(huì)將該用戶信息保存到數(shù)據(jù)庫(kù)中，否那么顯示錯(cuò)誤原因，以便用戶改正。用戶注冊(cè)頁(yè)面的運(yùn)行結(jié)果如圖18-13所示。圖18-13注冊(cè)模塊頁(yè)面〔1〕創(chuàng)立register.tpl模板文件，編寫用戶注冊(cè)頁(yè)面。其中包含兩個(gè)JS腳本文件createxml.js和check.js。其中，createxml.js是Ajax的實(shí)例化文件，而check.js對(duì)用戶注冊(cè)信息進(jìn)行驗(yàn)證，并且返回驗(yàn)證結(jié)果?！?〕創(chuàng)立register.php動(dòng)態(tài)PHP文件，加載模板。register.php文件的代碼如下：<?phpheader("Content-type:text/html;charset=UTF-8"); //設(shè)置文件編碼格式require("system/system.inc.php"); //包含配置文件$smarty->assign('title','新用戶注冊(cè)');$smarty->display('register.tpl');?>〔3〕創(chuàng)立reg_chk.php文件，獲取表單中提交的數(shù)據(jù)，將數(shù)據(jù)存儲(chǔ)到指定的數(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('注冊(cè)成功');window.close();</script>"; }else{ echo'<script>alert(\'添加失敗\');history.back;</script>'; }?>〔4〕創(chuàng)立“用戶注冊(cè)〞超鏈接。當(dāng)用戶單擊前臺(tái)的按鈕時(shí)，系統(tǒng)會(huì)調(diào)用js的onclick事件，彈出注冊(cè)窗口。其代碼如下：<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); //彈出窗口}２．用戶登錄用戶登錄模塊的運(yùn)行結(jié)果如圖18-14所示，需要輸入用戶名、密碼和驗(yàn)證碼。圖18-14登錄模塊運(yùn)行效果〔1〕創(chuàng)立模板文件login.tpl，完成用戶登錄表單的設(shè)計(jì)。在該頁(yè)面中當(dāng)單擊Submit按鈕時(shí)，系統(tǒng)將調(diào)用lg()函數(shù)對(duì)用戶登錄提交信息進(jìn)行驗(yàn)證。lg()函數(shù)包含在js/login.js腳本文件內(nèi)，其代碼如下：//JavaScriptDocumentfunctionlg(form){ if(.value==""){ alert('請(qǐng)輸入用戶名'); .focus(); returnfalse; } if(form.password.value==""||form.password.value.length<6){ alert('請(qǐng)輸入正確密碼'); form.password.focus(); returnfalse; } if(form.check.value==""){ alert('請(qǐng)輸入驗(yàn)證碼'); 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('用戶名或密碼錯(cuò)誤!!'); form.password.select(); form.check.value=''; code(form); returnfalse; }if(msg=="3"){ alert("該用戶被凍結(jié)，請(qǐng)聯(lián)系管理員"); returnfalse; }else{ alert('歡送光臨'); location.reload(); } } } xml.send(null); returnfalse;}//顯示驗(yàn)證碼

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

其他兩個(gè)函數(shù)也使用xmlrequest對(duì)象，實(shí)現(xiàn)方法相差無(wú)幾，不同之處就是對(duì)返回值的處理，chkanswer()函數(shù)隱藏當(dāng)前表單，顯示下一個(gè)表單。chkanswer()函數(shù)的代碼如下：functionchkanswer(form){ varuser=document.getElementById('user').value; varanswer=form.answer.value; if(answer==''){ alert('請(qǐng)輸入提示問(wèn)題'); 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('問(wèn)題答復(fù)錯(cuò)誤'); 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)前頁(yè)。ckpwd()函數(shù)代碼如下：functionchkpwd(form){ varuser=document.getElementById('user').value; varpwd1=form.pwd1.value; varpwd2=form.pwd2.value; if(pwd1==''){ alert('請(qǐng)輸入密碼'); form.pwd1.focus(); returnfalse; if(pwd1.length<6){ alert('密碼輸入錯(cuò)誤'); 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('密碼修改成功，請(qǐng)重新登錄'); window.close(); }else{ alert(msg);

xml.send(null);}〔3〕創(chuàng)立數(shù)據(jù)處理文件foundpwd.php文件的功能是根據(jù)用戶輸入信息來(lái)檢測(cè)數(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〕加載模板頁(yè)因?yàn)樗械卿浤K的模板都不需要或者只需要傳遞一兩個(gè)變量，所以PHP加載頁(yè)的內(nèi)容比較簡(jiǎn)單。找回密碼頁(yè)面的代碼如下：<?phpheader("Content-type:text/html;charset=UTF-8"); //設(shè)置文件編碼格式require("system/system.inc.php"); //包含配置文件 $smarty->assign('title','找回密碼');$smarty->display('found.tpl');?>18.7.3會(huì)員信息模塊設(shè)計(jì)用戶登錄后，即可看到會(huì)員信息模塊。在這里，可以進(jìn)行查看或修改個(gè)人信息及密碼、查看購(gòu)物車和平安退出等操作。本節(jié)只對(duì)會(huì)員信息模塊中的“會(huì)員中心〞和“平安退出〞進(jìn)行講解，關(guān)于“查看購(gòu)物車〞將在商品模塊中進(jìn)行介紹。會(huì)員信息模塊的運(yùn)行效果如圖18-16所示。圖18-16會(huì)員信息模塊１．會(huì)員信息模塊技術(shù)分析在會(huì)員信息模塊中，以SESSION變量中存儲(chǔ)的用戶名稱為條件，從會(huì)員信息表中查詢出會(huì)員信息，并且將會(huì)員信息存儲(chǔ)到模板變量中，最后在模板頁(yè)中輸出會(huì)員信息。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ù)是會(huì)員信息模板功能實(shí)現(xiàn)的根本。２．會(huì)員中心當(dāng)單擊“會(huì)員中心〞超鏈接時(shí)，會(huì)回傳給當(dāng)前頁(yè)一個(gè)page值，當(dāng)前頁(yè)根據(jù)這個(gè)page值來(lái)載入member.php文件?！?〕創(chuàng)立PHP頁(yè)面與登錄模塊設(shè)計(jì)不同，本節(jié)首先來(lái)創(chuàng)立PHP頁(yè)面。因?yàn)樵撃K中的模板需要使用數(shù)據(jù)庫(kù)中的數(shù)據(jù)及一些動(dòng)態(tài)信息，這些都需要在PHP頁(yè)中先行獲取及處理，然后再傳給模板頁(yè)。會(huì)員中心頁(yè)面的代碼請(qǐng)參考技術(shù)分析中的內(nèi)容?！?〕創(chuàng)立模板頁(yè)該模塊包括查看信息模板及修改密碼模板，都存儲(chǔ)于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">確認(rèn)密碼：</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">會(huì)員編號(hào)：</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">會(huì)員名稱：</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">密保問(wèn)題：</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">注冊(cè)時(shí)間：</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">消費(fèi)總額：</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">真實(shí)姓名：</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">身份證號(hào)：</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">移動(dòng)：</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號(hào)：</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)立腳本文件該模塊的腳本文件和用戶注冊(cè)模塊類似，都是對(duì)信息的合法性進(jìn)行驗(yàn)證，如信息是否為空、是否符合標(biāo)準(zhǔn)等，這里不再贅述?！?〕創(chuàng)立處理頁(yè)當(dāng)信息驗(yàn)證通過(guò)后，系統(tǒng)將跳轉(zhuǎn)到處理頁(yè)進(jìn)行信息處理。本模塊處理頁(yè)分信息修改和密碼修改兩個(gè)頁(yè)面。首先介紹信息修改頁(yè)，代碼如下：<?phpsession_start();header("Content-type:text/html;charset=UTF-8"); //設(shè)置文件編碼格式require("system/system.inc.php"); //包含配置文件$sql="updatetb