7. 登録ページの実装

PHP クラシック プロジェクト事例 - (1) ブログ管理システム 4

この記事では、Ajax を使用して、ページを更新せずにユーザー名が存在するかどうかを確認します。

7. 登録ページの実装

1. 登録ページのデザイン

register.php コードの一部:

<tr>    <!-- 注册表 -->       <td colSpan=3 valign="baseline" style="BACKGROUND-IMAGE: url( images/bg.jpg); VERTICAL-ALIGN: middle; HEIGHT: 450px; TEXT-ALIGN: center"><br>        <form  name="myform" action="register_deal.php" method="post">           <table width="85%" border="1" align=center cellpadding=3 cellspacing=2 bordercolor="#FFFFFF" bgcolor="#FFFFFF" class=i_table>             <tr align="left" bgcolor="#EFF7DE">               <td height=22 colspan=2 bgcolor="#EFF7DE" class=right_head><span class="tableBorder_LTR">必填内容</span></td>             </tr>             <tr bgcolor="#FFFFFF">               <td width=22% align="right" valign=middle class=&#39;f_one&#39;> 用户名</td>               <td width=78% align="left"  class=&#39;f_one&#39;><input name=&#39;txt_regname&#39; type=text id="txt_regname" value=&#39;&#39; size=20 maxlength=14 onblur="javascript:chkUserName();"/>               <label id="l1">*</label><label id="ll1" class="label2"></label>              </td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" valign=middle > 真实姓名</td>               <td align="left" > <input name=&#39;txt_regrealname&#39; type=&#39;text&#39; id="txt_regrealname" size=&#39;20&#39; maxlength=&#39;75&#39; onblur="javascript:chkRealName()"/>                              <label id="l4">*</label><label id="ll4" class="label2"></label></td>             </tr>             <tr>             <tr bgcolor="#FFFFFF">               <td align="right" valign=middle > 密码</td>               <td align="left"> <input name=&#39;txt_regpwd&#39; type=&#39;password&#39; id="txt_regpwd" size=20 maxlength=75 onblur="javascript:chkPwd();"/>               英文字母或数字等不少于3位<label id="l2">*</label><label id="ll2" class="label2"></label></td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" valign=middle> 确认密码</td>               <td align="left" > <input name=&#39;txt_regpwd2&#39; type=&#39;password&#39; id="txt_regpwd2" size=20 maxlength=75 onBlur="javascript:chkRePwd()">               <label id="l3">*</label><label id="ll3" class="label2"></label></td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" > 出生日期</td>               <td align="left" > <span class="word_grey">                 <input name="txt_birthday" type="text" id="birth" onblur="javascript:chkBirth()">               （日期格式为：yyyy-mm-dd）<label id="l6">*</label><label id="ll6" class="label2"></label></td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" valign=middle> Email</td>               <td align="left"  > <input name=txt_regemail type=text id="txt_regemail" value=&#39;&#39; size=35 maxlength=75 onblur="javascript:chrEmail()"/>               <font color=&#39;#000000&#39;>公开邮箱 <label id="l5">*</label><label id="ll5" class="label2"></label></td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right">所在城市</td>               <td align="left">                <select name="txt_province" id="txt_province" onchange="javascript:initcity();">                   <SCRIPT>creatprovince();</SCRIPT>                 </select>                 <select name="txt_city" id="txt_city" > </select>               <font color="red">*</font> </td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" valign=middle  class=&#39;f_one&#39;> 选择头像：</td>               <td align="left" class=&#39;f_one&#39;><table width="106" cellpadding="0" cellspacing="0">                   <tr>                     <td width="10" height="47">					</td>                     <td width="80"><img src=" images/head/0.gif" name="img" id = "image" width="60" height="60"></td>                     <td width="53" rowspan="2" align="center"><font color=red>*</font></td>                   </tr>                   <tr>                     <td> </td>                     <td> <select name="txt_ico" size="1" id="txt_ico" onChange="javascript:showlogo()">                         <option value="0.gif" selected>头像1                        <option value="1.gif">头像2                        <option value="2.gif">头像3                        <option value="3.gif">头像4</option>                         <option value="4.gif">头像5</option>                         <option value="5.gif">头像6</option>                       </select> </td>                   </tr>               </table></td>             </tr>             <tr align="left" bgcolor="#EFF7DE">               <td height=22 colspan=2 class=right_head><span class="tableBorder_LTR">选填内容</span></td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" class=&#39;f_one&#39;> 性别</td>               <td align="left" class=&#39;f_one&#39;> <select name=txt_regsex id="txt_regsex">                   <OPTION value=1>男</OPTION>                   <OPTION value=2>女</OPTION>                   <OPTION value=0 selected>保密</OPTION>               </select></td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" class=&#39;f_one&#39;>QQ</td>               <td align="left" class=&#39;f_one&#39;><input name=&#39;txt_regqq&#39; type=text id="txt_regqq" value=&#39;&#39; size=20 maxlength=14></td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" class=&#39;f_one&#39;> 个人主页</td>               <td align="left" class=&#39;f_one&#39;> <input name=&#39;txt_reghomepage&#39; type=text id="txt_reghomepage" value=&#39;&#39; size=40 maxlength=75></td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" valign=middle class=&#39;f_one&#39;>个性化签名</td>               <td align="left" class=&#39;f_one&#39;><textarea name=&#39;txt_regsign&#39; cols=50 rows=&#39;4&#39; id="txt_regsign"></textarea></td>             </tr>             <tr bgcolor="#FFFFFF">               <td align="right" class=&#39;f_one&#39;> 自我简介</td>               <td align="left" class=&#39;f_one&#39;><textarea name=txt_regintroduce cols=50 rows=4 id="txt_regintroduce"></textarea></td>             </tr>           </table>           <br>             <input type=&#39;submit&#39; name=&#39;regsubmit&#39; value=&#39;提 交&#39;class="btn_grey" onClick="return check()">              <input name="reset" type="reset" class="btn_grey" value="重 填">      </form>      </td>     </tr> 

2. 入力ボックスがフォーカスを失った後に呼び出される JavaScript 関数の実装: fun.js:

function chkUserName(){	var c = document.getElementById('txt_regname');	var d = c.value;	var id;	if(d==""){				document.getElementById('l1').innerText="请输入用户名";		document.getElementById('ll1').innerText="";	}else{		var xmlObj;		xmlObj = new XMLHttpRequest();			xmlObj.open('POST','chk.php?d='+d,true);		xmlObj.onreadystatechange = callBackFun;		xmlObj.send(null);		function callBackFun() {			if(xmlObj.readyState == 4&&xmlObj.status ==200){				if(xmlObj.responseText=='y'){					document.getElementById('l1').innerText="×";					document.getElementById('ll1').innerText="";				}else{					document.getElementById('l1').innerText="";					document.getElementById('ll1').innerText="√";				}			}		}	}}function chkRealName(){	var c = document.getElementById('txt_regrealname');	var d = c.value;	if(d==""){				document.getElementById('l4').innerText="请输入真实姓名";		document.getElementById('ll4').innerText="";	}else{		document.getElementById('l4').innerText="";		document.getElementById('ll4').innerText="√";	}}function chkPwd(){	var p = document.getElementById('txt_regpwd').value;	var c = document.getElementById('ll1').innerText;	if(c=="√"){		if(p==""){			document.getElementById('l2').innerText="请输入密码";		}		else if(p.length<3){		document.getElementById(&#39;l2&#39;).innerText="&#215;";		document.getElementById(&#39;ll2&#39;).innerText="";		}else{		document.getElementById(&#39;l2&#39;).innerText="";		document.getElementById(&#39;ll2&#39;).innerText="√";	    }	}}function chkRePwd(){	var p = document.getElementById(&#39;txt_regpwd&#39;).value;	var rp = document.getElementById(&#39;txt_regpwd2&#39;).value;	var c = document.getElementById(&#39;ll2&#39;).innerText;	if(c=="√"){	if(p==rp){		document.getElementById(&#39;ll3&#39;).innerText="√";		document.getElementById(&#39;l3&#39;).innerText="";	}else{		document.getElementById(&#39;ll3&#39;).innerText="";		document.getElementById(&#39;l3&#39;).innerText="&#215; 密码不一致";	}	}}function chkBirth(){	var c = document.getElementById(&#39;birth&#39;);	var d = c.value;	if(d==""){				document.getElementById(&#39;l6&#39;).innerText="请输入出生日期";		document.getElementById(&#39;ll6&#39;).innerText="";	}else{		document.getElementById(&#39;l6&#39;).innerText="";		document.getElementById(&#39;ll6&#39;).innerText="√";	}}function chkEmail(){	var e = document.getElementById(&#39;txt_regemail&#39;).value;	if(e==""){				document.getElementById(&#39;l5&#39;).innerText="请输入邮箱";		document.getElementById(&#39;ll5&#39;).innerText="";	}else{		document.getElementById(&#39;l5&#39;).innerText="";		document.getElementById(&#39;ll5&#39;).innerText="√";	}}

3. ユーザー名の Ajax 検証に使用される処理ファイル chk.php:

'

<?php    require_once &#39;Conn/SqlHelper.class.php&#39;;    $chk = $_REQUEST[&#39;d&#39;];    $sqlHelper = new SqlHelper();    $sql = "select * from tb_user where regname=&#39;$chk&#39;;";    $res = $sqlHelper->execute_dql($sql);    $s = $res->fetch_assoc();    if(count($s)!=0){        echo 'y';    }else{        echo 'n';    }

4登録後、ユーザーはデータベースに追加します registerdeal.php

<?phpsession_start();include "Conn/SqlHelper.class.php";$sqlHelper = new SqlHelper();$UserName=$_POST[&#39;txt_regname&#39;];$sql="select * from tb_user where regname = &#39;$UserName&#39;";$res = $sqlHelper->execute_dql($sql);$result=$res->fetch_assoc();if (count($result)!=0){	echo ("<script>alert('用户名已被注册！');history.go(-1);</script>");	exit();}$_SESSION['username']=$_POST['txt_regname'];$regname=$_POST['txt_regname'];$regrealname=$_POST['txt_regrealname'];$regpwd=$_POST['txt_regpwd'];$regbirthday=$_POST['txt_birthday'];$regemail=$_POST['txt_regemail'];$regcity=$_POST['txt_province'].$_POST['txt_city'];$regico=$_POST['txt_ico'];$regsex=$_POST['txt_regsex'];$regqq=$_POST['txt_regqq'];$reghomepage=$_POST['txt_reghomepage'];$regsign=$_POST['txt_regsign'];$regintroduce=$_POST['txt_regintroduce'];$ip=getenv(REMOTE_ADDR);$sql = "Insert Into tb_user (regname,regrealname,regpwd,regbirthday,regemail,regcity,regico,regsex,regqq,reghomepage,regsign,regintroduce,ip,fig)"." Values ('$regname','$regrealname','$regpwd','$regbirthday','$regemail','$regcity','$regico','$regsex','$regqq','$reghomepage','$regsign','$regintroduce','$ip',0)";$INS=$sqlHelper->execute_dml($sql);echo "<script> alert('用户注册成功！');</script>";echo "<script> window.location='index.php';</script>";?>

この時点ではユーザー登録が実装されています。