登錄模塊設(shè)計

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

注冊模塊頁面

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

用戶注冊(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('注冊成功');window.close();</script>";用戶注冊(5) }else{ echo'<script>alert(\'添加失敗\');history.back;</script>'; }?>

（4）在system\templates\login.tpl模板頁中，創(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>用戶注冊(6)這里使用到的js文件為js/login.js，調(diào)用的函數(shù)為reg()。該函數(shù)的代碼如下：functionreg(){ window.open("register.php","_blank","width=600,height=650",false); //彈出窗口}用戶登錄(1)用戶在輸入正確的用戶名、密碼和驗證碼之后，將返回如圖6-14所示的信息。（1）創(chuàng)建模板文件login.tpl，完成用戶登錄表單的設(shè)計。在該頁面中當(dāng)單擊Submit按鈕時，系統(tǒng)將調(diào)用lg()函數(shù)對用戶登錄提交信息進(jìn)行驗證。lg()函數(shù)包含在js/login.js腳本文件內(nèi)，其代碼如下：//JavaScriptDocumentfunctionlg(form){ if(.value==""){

圖6-14

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

用戶登錄(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('用戶名或密碼錯誤!!'); form.password.select(); form.check.value=''; code(form); returnfalse; }if(msg=="3"){ alert("該用戶被凍結(jié)，請聯(lián)系管理員"); returnfalse; }else{ alert('歡迎光臨'); location.reload();

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

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

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