客车网上订票系统项目--会员管理、前端注册页面
1、今日完成任务:
(1)后端会员管理模块的会员列表显示以及添加、修改和删除操作。
(2)前端登录页面完成与后台数据库的绑定。
2、核心代码
member-list.php
<?php require_once '../function.php'; //显示所有数据 $sql="select * from UserInfo where userStatus=1;"; $rows=sel($sql); //数据的个数 $sqlNum="select count(*) from UserInfo where userStatus=1;"; $rowsNum=sel($sqlNum); ?> <div class="mt-20"> <?php if($rows){?> <table class="table table-border table-bordered table-hover table-bg table-sort"> <thead> <tr class="text-c"> <th width="25"><input type="checkbox" name="" value=""></th> <th width="80">ID</th> <th width="100">用户名</th> <th width="40">性别</th> <th width="90">手机</th> <th width="150">邮箱</th> <th width="">地址</th> <th width="130">加入时间</th> <th width="70">状态</th> <th width="100">操作</th> </tr> </thead> <tbody> <?php foreach ($rows as $key=>$value){?> <tr class="text-c"> <td><input type="checkbox" value="1" name=""></td> <td><?php echo $rows[$key]['userId']?></td> <td><u style="cursor:pointer" class="text-primary" onclick="member_show('<?php echo $rows[$key]['nickname']?>','member-show.php?id=<?php echo $rows[$key]['userId']?>','<?php echo $rows[$key]['userId']?>','360','400')"><?php echo $rows[$key]['nickname']?></u></td> <td><?php echo $rows[$key]['userSex']?></td> <td><?php echo $rows[$key]['userTel']?></td> <td><?php echo $rows[$key]['userEmail']?></td> <td class="text-l"><?php echo $rows[$key]['userAddress']?></td> <td><?php echo $rows[$key]['regTime']?></td> <td class="td-status"><span class="label label-success radius">已启用</span></td> <td class="td-manage"><a style="text-decoration:none" onClick="member_stop(this,'<?php echo $rows[$key]['userId']?>')" href="javascript:;" title="停用"><i class="Hui-iconfont"></i></a> <a title="编辑" href="javascript:;" onclick="member_edit('编辑','member-add.php?userId=<?php echo $rows[$key]['userId']?>','4','','510')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a> <a title="删除" href="javascript:;" onclick="member_del(this,'<?php echo $rows[$key]['userId']?>')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a></td> </tr> <?php }?> </tbody> </table> <?php }else{?> <p>暂无用户列表</p> <?php }?> </div>
member-add.php
<?php $userId=$_GET["userId"]; require_once '../function.php'; if(isset($userId)){ //echo "修改"; $sql="select * from UserInfo where userId=$userId;"; $rows=sel($sql); }else{ //echo "添加"; } ?> <div class="pd-20"> <form action="member-addAction.php?userId=<?php echo $userId; ?>" method="post" class="form form-horizontal" id="form-member-add"> <div class="row cl"> <label class="form-label col-3"><span class="c-red">*</span>用户名:</label> <div class="formControls col-5"> <input type="text" class="input-text" value="<?php echo $rows[0]['nickname']?>" placeholder="" id="user-name" name="user-name" datatype="*2-16" nullmsg="用户名不能为空"> </div> <div class="col-4"> </div> </div> <div class="row cl"> <label class="form-label col-3"><span class="c-red">*</span>初始密码:</label> <div class="formControls col-5"> <input type="password" placeholder="密码" autocomplete="off" value="<?php echo $rows[0]['userPass']?>" class="input-text" datatype="*6-20" id="newpassword" name="newpassword" nullmsg="密码不能为空"> </div> <div class="col-4"></div> </div> <div class="row cl"> <label class="form-label col-3"><span class="c-red">*</span>确认密码:</label> <div class="formControls col-5"> <input type="password" placeholder="确认新密码" autocomplete="off" class="input-text Validform_error" errormsg="您两次输入的新密码不一致!" datatype="*" nullmsg="请再输入一次新密码!" id="newpassword2" name="newpassword2" value="<?php echo $rows[0]['userPass']?>" > </div> <div class="col-4"> </div> </div> <div class="row cl"> <label class="form-label col-3"><span class="c-red">*</span>性别:</label> <div class="formControls col-5 skin-minimal"> <div class="radio-box"> <input type="radio" <?php if($rows[0]['userSex']=="男"){echo "checked='checked'";} ?> id="sex-1" name="sex" value="男" datatype="*" nullmsg="请选择性别!"> <label for="sex-1">男</label> </div> <div class="radio-box"> <input type="radio" <?php if($rows[0]['userSex']=="女"){echo "checked='checked'";} ?> id="sex-2" name="sex" value="女"> <label for="sex-2">女</label> </div> </div> <div class="col-4"> </div> </div> <div class="row cl"> <label class="form-label col-3"><span class="c-red">*</span>手机:</label> <div class="formControls col-5"> <input type="text" class="input-text" value="<?php echo $rows[0]['userTel']?>" placeholder="" id="user-tel" name="user-tel" datatype="m" nullmsg="手机不能为空"> </div> <div class="col-4"> </div> </div> <div class="row cl"> <label class="form-label col-3"><span class="c-red">*</span>邮箱:</label> <div class="formControls col-5"> <input type="text" class="input-text" placeholder="@" name="email" id="email" datatype="e" nullmsg="请输入邮箱!" value="<?php echo $rows[0]['userEmail']?>"> </div> <div class="col-4"> </div> </div> <div class="row cl"> <label class="form-label col-3">地址:</label> <div class="formControls col-5"> <textarea name="userAddress" cols="" rows="" class="textarea" placeholder="地址是什么...100个字符以内" dragonfly="true" onKeyUp="textarealength(this,100)"><?php echo $rows[0]['userAddress']?></textarea> <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p> </div> <div class="col-4"></div> </div> <div class="row cl"> <div class="col-9 col-offset-3"> <input class="btn btn-primary radius" type="submit" value=" 提交 "> </div> </div> </form> </div>
member-delAction.php
<?php require_once '../function.php'; $Id=$_GET['id']; $sql="delete from UserInfo where userId=$Id;"; $result=oper($sql); header("location:member-list.php"); ?>
注册:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>客车网上售票系统注册</title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <link rel="stylesheet" type="text/css" href="css/registerAlogin.css"/> </head> <body> <!--头部--> <div class="header"> <div class="container clear"> <div class="left"><a href="index.html"><img src="img/logo_pc.png"/></a></div> <div class="right"></div> </div> </div> <!--表单部分--> <div class="register-content"> <div class="container clear"> <div class="right register-box"> <h3>用户注册</h3> <form action="registerAction.php" method="post"> <table border="0" cellspacing="10" cellpadding="0"> <tr> <th style="width: 70px;" align="right">手机号码</th> <td><input required="required" type="text" placeholder="请输入您的手机号" name="usertel" id="usertel" value="" /></td> </tr> <tr> <th align="right">设置密码</th> <td><input required="required" type="password" placeholder="6-20位数字字母密码" name="pwd" id="pwd" value="" /></td> </tr> <tr> <th align="right">确认密码</th> <td><input required="required" type="password" placeholder="请再次输入您的密码" name="pwd2" id="pwd2" value="" /></td> </tr> <tr> <td colspan="2"><p class="error-tips tips" id="error-tips"></p></td> </tr> <tr> <td colspan="2"><input class="bg358EEC" type="submit" name="submit" id="submit" value="同意协议并注册" /></td> </tr> <tr> <td colspan="2"> <label> <input type="checkbox" name="agree" id="agree" value="agree" /> 我已看过并同意<a class="color358EEC" href="">《客车网上购票系统条款》</a> </label> </td> </tr> </table> </form> </div> </div> </div> <!--优势--> <div class="register-advantage"> <div class="container"> <ul class="clear"> <li class="clear"> <div class="advantage-img left"><img src="img/icon_pinpaibaozheng.png"/></div> <div class="left"> <h4>品牌保证</h4> <p>提供正规的购票服务</p> </div> </li> <li class="clear"> <div class="advantage-img left"><img src="img/icon_kuaisufankui.png"/></div> <div class="left"> <h4>快速反馈</h4> <p>第一时间短信通知</p> </div> </li> <li class="clear"> <div class="advantage-img left"><img src="img/icon_fangbiankuaijie.png"/></div> <div class="left"> <h4>方便快捷</h4> <p>车站直接取票上车</p> </div> </li> <li class="clear"> <div class="advantage-img left"><img src="img/icon_zhifufangbian.png"/></div> <div class="left"> <h4>支付方便</h4> <p>支付宝微信</p> </div> </li> </ul> </div> </div> <!--底部--> <div class="register-footer"> <p>客车网上售票系统官方电话 400-100-1234 0371-1234567 客车网上售票信息公示</p> <p>客车网上售票系统 Copyright©2020-2030 版权所有 XXXXXX网络科技有限公司 豫ICP备15030935号-1</p> </div> <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 验证手机号 function isPhoneNo(phone) { var pattern = /^1[34578]\d{9}$/; return pattern.test(phone); } //验证密码 function isPass(pass) { var pattern = /^[0-9a-zA-Z]{6,20}$/; return pattern.test(pass); } /*手机号判断*/ function userTel(inputid, spanid) { $(inputid).blur(function() { if ($.trim($(inputid).val()).length == 0) { $(spanid).html("请输入手机号"); } else { if (isPhoneNo($.trim($(inputid).val())) == false) { $(spanid).html("请输入正确的手机号"); } } $(inputid).focus(function() { $(spanid).html(""); }); }); }; /*用户名密码判断*/ function userPass(inputid, spanid) { $(inputid).blur(function() { if ($.trim($(inputid).val()).length == 0) { $(spanid).html("请输入密码"); } else { if (isPass($.trim($(inputid).val())) == false) { $(spanid).html("请输入6-20位由数字字母组成的密码!"); } } }); $(inputid).focus(function() { $(spanid).html(""); }); }; //判断密码是否一致 function checkPass(inputid,input2id, spanid){ $(input2id).blur(function() { if ($.trim($(input2id).val()).length == 0) { $(spanid).html("请输入确认密码"); } else { if ($.trim($(inputid).val())!=$.trim($(input2id).val())) { $(spanid).html("两次密码不一致!"); } } }); $(input2id).focus(function() { $(spanid).html(""); }); } $(function(){ <?php if(isset($_GET['tips'])){?> $("#error-tips").show().html("该手机号已注册!"); <?php }?> //userName('#name', "#checkExistname"); //userID('#identity', "#checkExistID"); userTel('#usertel', "#error-tips"); userPass('#pwd', "#error-tips"); checkPass('#pwd',"#pwd2", "#error-tips"); $("#submit").click(function(){ if($("#pwd").val()!=$("#pwd2").val()){ $("#error-tips").html("两次密码不一致!"); return false; } //协议 if($("#agree").is(":checked")){ //注册成功 console.log("ok"); }else{ $("#error-tips").html("请勾选同意条款"); return false; } }); }); </script> </body> </html>
register-Action.php
<?php require_once 'function.php'; $userTel=$_POST["usertel"]; $userPwd=$_POST["pwd"]; //添加用户信息 $sql="insert into UserInfo (nickname,userPass,userSex,userTel,userEmail,userAddress,userStatus,regTime) values('','$userPwd','','$userTel','','',1,now());"; $result=oper($sql); if($result){ //echo "成功"; header("location:login.php"); }else{ //echo "失败"; header("location:register.php?tips=1"); } ?>