登錄模塊設(shè)計(jì)

登錄模塊設(shè)計(jì)本講大綱：1登錄模塊概述2用戶注冊(cè)3用戶登錄登錄模塊概述用戶登錄模塊是會(huì)員功能的窗口。匿名用戶雖然也可以訪問本網(wǎng)站，但只能進(jìn)行瀏覽、查詢等簡(jiǎn)單操作，而會(huì)員則可以購(gòu)買商品，并且能享受超低價(jià)格。登錄模塊包括用戶注冊(cè)和用戶登錄兩分，其運(yùn)行結(jié)果如圖6-12所示。圖6-12登錄模塊運(yùn)行效果用戶注冊(cè)(1)用戶注冊(cè)的主要功能是注冊(cè)新會(huì)員。如果信息輸入完整而且符合要求，則系統(tǒng)會(huì)將該用戶信息保存到數(shù)據(jù)庫(kù)中，否則顯示錯(cuò)誤原因，以便用戶改正。用戶注冊(cè)頁(yè)面的運(yùn)行結(jié)果如圖6-13所示。圖6-13

注冊(cè)模塊頁(yè)面

（1）創(chuàng)建register.tpl模板文件，編寫用戶注冊(cè)頁(yè)面。其中包含兩個(gè)JS腳本文件createxmlhttp.js和check.js。其中，createxmlhttp.js是Ajax的實(shí)例化文件，而check.js對(duì)用戶注冊(cè)信息進(jìn)行驗(yàn)證，并且返回驗(yàn)證結(jié)果。用戶注冊(cè)(2)（2）創(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();用戶注冊(cè)(3)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'];

用戶注冊(cè)(4)

$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,consume)"; $sql.="values('$name','$password','$question','$answer','$realname','$card','$tel','$phone','$Email','$QQ','$code','$address','$addtime','0','','00.00')"; $rst=$admindb->ExecSQL($sql,$conn); if($rst){ $_SESSION['member']=$name; echo"<script>top.opener.location.reload();alert('注冊(cè)成功');window.close();</script>";用戶注冊(cè)(5) }else{ echo'<script>alert(\'添加失敗\');history.back;</script>'; }?>

（4）在system\templates\login.tpl模板頁(yè)中，創(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>用戶注冊(cè)(6)這里使用到的js文件為js/login.js，調(diào)用的函數(shù)為reg()。該函數(shù)的代碼如下：functionreg(){ window.open("register.php","_blank","width=600,height=650",false); //彈出窗口}用戶登錄(1)用戶在輸入正確的用戶名、密碼和驗(yàn)證碼之后，將返回如圖6-14所示的信息。（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==""){

圖6-14

用戶登成功錄效果頁(yè)面用戶登錄(2)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;

用戶登錄(3)} 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; xmlhttp.open("GET",url,true); xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4){

用戶登錄(4)varmsg=xmlhttp.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();

用戶登錄(5)} } }xmlhttp.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;用戶登錄(6)}//刷新驗(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); }用戶登錄(7)//找回密碼functionfound(){window.open("found.php","_blank","width=350height=240",false); }

用戶名和密碼是在chkname.php頁(yè)面中被驗(yàn)證。chkname.php在6.2.5節(jié)中已經(jīng)介紹，這里不再重復(fù)。

（2）創(chuàng)建用戶信息模板文件system\templates\info.tpl。用戶登錄成功后，在原登錄框位置將顯示用戶信息，用戶可以通過(guò)“會(huì)員中心”對(duì)自己的信息做修改，也可以單擊“查看購(gòu)物車”超鏈接查看購(gòu)物車商品；當(dāng)用戶離開時(shí)可以單擊“安全離開”超鏈接。用戶信息模塊的主要代碼如下：<!--顯示當(dāng)前登錄用戶名-->歡迎您：{$member}用戶登錄(