为了开发出一个家教信息服务网站,家教注册登陆,家教信息发布这些都须要经过表单还实现。php
系列文章汇总:css
1、总体设计:家教信息服务平台的开发html
2、前端设计:表单实现登陆注册功能前端
3、后台设计:MySQL数据库的增删改查jquery
在"我是大学生"子网页下设置两个超连接,完成用户的登陆/注册数据库
分步注册页:bootstrap
分步表单这一部分是从网上搜索的一些模板网页源码中剥离出来的,同时作了一些修改。具体实现要用到一些CSS和js文件。到了这地方,js不怎么懂,不分析了,直接调用:cookie
<link rel="stylesheet" href="assets/css/style.css">
……session
<script src="assets/js/jquery.backstretch.min.js"></script> <script src="assets/js/scripts.js"></script>
在从第一步输入以后,到第二步显示以前,须要验证密码和重复密码是否一致。设计为只有密码一致才能进入注册第二步。用JS实现:post
<!--密码一致性验证--> <script> (function(){ var onenext=document.getElementById("onenext"); //初始化移入移出事件 if(onenext.addEventListener){ onenext.addEventListener("click",confirmPass);} else if(onenext.attachEvent){ onenext.attachEvent("onClick",confirmPass); } })(); function confirmPass(){ var pass=document.getElementById("inputPassword"); var repeatpass=document.getElementById("repeatPassword"); if(pass.value != repeatpass.value){ alert("两次密码输入不一致!"); location.reload(); } } </script>
代码中“onenext”就是上图“下一步”按钮的ID
完整表单内容以下:
<!--用户注册--> <div class="container"> <div class="col-sm-6 col-sm-offset-3 form-box"> <form role="form" action="?page=registered" method="post" class="registration-form"> <fieldset> <div class="form-top"> <div class="form-top-left"> <h3><strong>Step 1 / 3</strong></h3> <h4>设置登陆密码<h4> </div> </div> <div class="form-bottom"> <div class="form-group"> <label class="sr-only" for="inputUser">用户</label> <input type="number" name="user" placeholder="填写QQ号码" class="form-control" id="inputUser"> </div> <div class="form-group"> <label class="sr-only" for="inputPassword">密码</label> <input type="password" name="pass" placeholder="设置本站密码" class="form-control" id="inputPassword"> </div> <div class="form-group"> <label class="sr-only" for="repeatPassword">重复密码</label> <input type="password" name="repeatpass" placeholder="重复输入密码" class="form-control" id="repeatPassword"> </div> <button type="button" id="onenext" class="btn btn-next btn-primary">下一步</button> </div> </fieldset> <fieldset> <div class="form-top"> <div class="form-top-left"> <h3><strong>Step 2 / 3</strong></h3> <h4>填写基本资料</h4> </div> </div> <div class="form-bottom"> <div class="form-group"> <label class="sr-only" for="inputName">姓名</label> <input type="text" name="name" placeholder="姓名" class="form-control" id="inputName"> </div> <div class="form-group"> <label class="checkbox-inline"> <input type="radio" name="gender" value="男生" checked>男生 </label> <label class="checkbox-inline"> <input type="radio" name="gender" value="女生"> 女生 </label> </div> <div class="form-group"> <label for="inputSchool"> 学校:</label> <select name="school" id="inputSchool" class="form-control"> <option>南京师范大学</option> <option>南京大学</option> <option>东南大学</option> <option>南京农业大学</option> <option>南京航空航天大学</option> <option>南京理工大学</option> <option>河海大学</option> <option>中国药科大学</option> <option>南京工业大学</option> <option>南京林业大学</option> <option>南京邮电大学</option> <option>南京财经大学</option> <option>南京信息工程大学</option> <option>南京医科大学</option> <option>南京中医药大学</option> <option>三江学院</option> <option>南京艺术学院</option> <option>南京体育学院</option> <option>南京晓庄学院</option> <option>南京审计大学</option> <option>其它院校</option> </select> </div> <div class="form-group"> <label class="checkbox-inline"> <input type="radio" name="grade" value="大一" checked> 大一 </label> <label class="checkbox-inline"> <input type="radio" name="grade" value="大二"> 大二 </label> <label class="checkbox-inline"> <input type="radio" name="grade" value="大三"> 大三 </label> <label class="checkbox-inline"> <input type="radio" name="grade" value="大四"> 大四 </label> <label class="checkbox-inline"> <input type="radio" name="grade" value="研一"> 研一 </label> <label class="checkbox-inline"> <input type="radio" name="grade" value="研二"> 研二 </label> <label class="checkbox-inline"> <input type="radio" name="grade" value="研三"> 研三 </label> <label class="checkbox-inline"> <input type="radio" name="grade" value="博士"> 博士 </label> <label class="checkbox-inline"> <input type="radio" name="grade" value="其它年级"> 其它年级 </label> </div> <button type="button" class="btn btn-previous btn-primary">上一步</button> <button type="button" class="btn btn-next btn-primary">下一步</button> </div> </fieldset> <fieldset> <div class="form-top"> <div class="form-top-left"> <h3><strong>Step 3 / 3</strong></h3> <h4>完善简历信息</h4> </div> </div> <div class="form-bottom"> <div class="form-group"> <label class="sr-only" for="inputMajor">专业</label> <input type="text" name="major" placeholder="在读专业" class="form-control" id="inputMajor"> </div> <div class="form-group"> <span><strong>可教授科目:</strong></span> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="小学语文"> 小学语文 </label> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="小学数学"> 小学数学 </label> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="小学英语"> 小学英语 </label> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="初中语文"> 初中语文 </label> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="初中数学"> 初中数学 </label> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="初中英语"> 初中英语 </label> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="高中语文"> 高中语文 </label> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="高中数学"> 高中数学 </label> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="高中英语"> 高中英语 </label> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="初中物理"> 初中物理 </label> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="初中化学"> 初中化学 </label> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="初中物理"> 高中物理 </label> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="初中化学"> 高中化学 </label> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="史地政生"> 史地政生 </label> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="竞赛"> 竞赛 </label> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="复读"> 复读 </label> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="课外英语"> 课外英语 </label> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="艺术类"> 艺术类 </label> <label class="checkbox-inline"> <input type="checkbox" name="subject[]" value="其它"> 其它 </label> </div> <div class="form-group"> <label for="aboutMe">自我描述:</label> <textarea name="aboutme" placeholder="例如:我的擅长、证书、技能、家教经验等" class="form-control" id="aboutMe"></textarea> </div> <button type="button" class="btn btn-previous btn-primary">上一步</button> <button type="submit" class="btn btn-primary">注册!</button> </div> </fieldset> </form> </div> </div>
点击注册后,将表单内容经过POST的方式传入registered.php,而后后者将数据存入数据库。
教员登陆:功能的实现须要用到session变量。在登陆页面的最开始使用语句session_start();登陆验证经过后定义session变量;退出时可使用语句session_destroy();
"记住我"功能的实现是由cookie变量的实现
设置cookie
// re-save username and, ack, password in cookies for another week setcookie("user", $_COOKIE["user"], time() + 7 * 24 * 60 * 60); setcookie("pass", $_COOKIE["pass"], time() + 7 * 24 * 60 * 60);
清除cookie
// delete cookies, if any setcookie("user", "", time() - 3600); setcookie("pass", "", time() - 3600);
登陆的验证经过比对表单提交和数据库里的用户名、密码完成;若是存在cookie变量,用户打开该页面时会优先经过数据库检查用户密码的有效性。若是有效,将直接送入登陆后的状态。
“忘记密码”的实现使用了bootstrap自带的模态框范例
<!-- 模态框(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 提醒: </h4> </div> <div class="modal-body"> 请联系网站管理人员找回密码。联系方式:QQ11111111。 </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div>
显示效果以下:
说白了,登陆/注册都是一个表单的处理,包括“我是家长”下的发布需求信息也是一个表单:
登陆的表单比较简单;注册和需求发布的表单类似,数据较复杂。值得注意的应该是怎么把须要提交的各类类型的数据装进input元素内;罗列一下,这里使用到的input元素包括number、password、text、radio、select、checkbox、textarea。
因此到这里,教员的注册,登陆,还有家长的信息发布页面就作好了。