本文详细介绍了如何使用PHP实现用户注册和登录功能，包括前端页面制作、Js脚本编写以及使用GD库封装验证码类。通过实验步骤，读者将学会使用Bootstrap3、Ajax异步通信以及JavaScript进行前端交互，同时掌握PHP的OOP思想和数据库操作，如用户名和邮箱的唯一性检测。此外，文章还涉及到了如何通过Cookie实现“记住我”功能，以增强用户体验。
前端页面制作
一、介绍
1.1 基础内容
本次实验主要以前端制作为主要内容，使用纯前端知识制作用户注册登录的界面，为后续实验做铺垫。通过本实验的学习，我们可以轻松地制作类似的界面效果。由于这是 PHP 的项目课，所以我们并不需要一行一行的写 html 代码，本次课程的界面制作主要使用前端框架 bootstrap3 的模板和组件来快速搭建大方漂亮的界面，大家也会领略到 bootstrap 框架的方便之处。
如果你对页面制作不感兴趣或者对这方面比较熟悉，可以跳过本次实验，直接下载使用实验文档最后提供的代码文件。
1.2 知识点
- Bootstrap3页面布局
- Jquery脚本编写
- Ajax异步通信
1.3 实验环境
- 编程环境：Ubuntu1404
- MySQL数据库
- PHP内置服务器
- sublime，一个方便快速的文本编辑器。点击桌面左下角： 应用程序菜单/开发/sublime。
1.4 最终效果图
1.5 代码获取
你可以通过下面命令将代码下载到环境中，作为参照对比进行学习
wget http://labfile.oss.aliyuncs.com/courses/587/index.php
wget http://labfile.oss.aliyuncs.com/courses/587/check.js
二、实验步骤
2.1 页面制作
2.1.1 主页
首先在 /home/Code 目录下建立一个 web 文件夹作为我们的网站根目录，在该目录下建立 index.php 作为网站首页。使用 sublime 打开web 文件夹，对 index.php 编辑：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Index</title>
<link rel="stylesheet" href="">
</head>
<body>
<h1>hello shiyanlou</h1>
</body>
</html>
接下来启动服务器，自 PHP5.4之后 PHP 内置了一个 Web 服务器，因此我们可以很方便地运行服务器，在 web 目录下执行以下命令：
$ php -S localhost:80 #若启动失败，可将端口号换为 8080
不出意外地话，我们的服务器就启动了，打开浏览器，输入 URL ：localhost:80
好了，接下来我们将对这个页面进行精心的制作！
2.1.2 模板挑选
由于我们的课程是 PHP 的项目课，所以我们的重点不是去设计精美的界面，但是也不能太随意应付，毕竟写出来也要给别人欣赏。所以我们可以到网上去寻找好看免费的模板，自己再进行加工，就是自己的作品了。本课程主要使用 bootstrap 框架制作界面，所以首先应该去 bootstrap 官网去看看相关的优秀作品。大家平时开发也可以到上面去寻找一丝创作灵感。
经过一番寻找，我选择了这个模板：
大家也可以选择自己喜欢的模板，制作出自己喜欢的界面。我将会对这个模板页面进行一下改造，首先，先教大家如何使用这个模板。
-
复制源代码：查看该模板的源代码，全部复制并粘贴到我们自己
index.php中(覆盖之前的测试代码)； -
使用 css：在 web 目录下建立一个 public 文件夹，并在其下建立 img，css，js文件夹，分别用来放置我们对应的文件。
我们可以看到模板的源代码的header中有这样一段注释：
<!-- Custom styles for this template -->下面就是该模板所用的自定义的 css 文件。在网页中单击 css 链接，复制 css 代码，存放到public/css/start.css文件（自行建立文件）。 -
调整引用位置：在
index.php使用相对路径调整 css 文件的引用路径。 -
标签页图标：自行找一个 ico 文件放到
public/img下，并修改<link rel="icon" href="public/img/xxxx.ico">，调整引用目录
2.1.3 目录结构及修改后代码
目录结构：
Index.php 代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="public/img/favicon.ico">
<title>Index</title>
<!-- Bootstrap core CSS -->
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="public/css/start.css" rel="stylesheet">
<link href="public/css/footer.css" rel="stylesheet">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!-- 这里做了修改 -->
<li class="active"><a href="#">Home</a></li>
<li><a href="#register">Register</a></li>
<li><a href="#login">Login</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- 页面主体内容 -->
<div class="container">
<div class="content">
<div class="starter-template">
<!-- 这里做了修改，其他地方自由发挥 -->
<h1>Welcome To ShiYanLou</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
</div><!-- /.container -->
<!-- 网页底部 -->
<footer class="footer">
<div class="container">
<p class="text-muted">
<h2><a href="/https://www.shiyanlou.com" title="www.shiyanlou.com" style="color: blue;">www.shiyanlou.com</a></h2>
</p>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
这里我还添加了一个网页的 footer，对应的 footer.css 文件代码：
/* Sticky footer styles
-------------------------------------------------- */
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
text-align:center;
background-color: #f5f5f5;
}
对应的 start.css 的代码：
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
现在再次打开 localhost:80 ,应该就可以看到一个漂亮的首页了，而且还是响应式的布局。这里展示我的首页！
2.1.4 注册表单制作
我们将把注册和登陆的表单全部放到 index.php 中。为了美观，我们把表单样式做成模糊框样式的效果。
这里我们要使用到 bootstrap 的模糊框的 js 插件 modals 。
把模糊框的代码片段放到 container 的 div 中去。将它作为注册的表单。同时修改导航栏的 register 按钮的相关参数和模糊框的id，使之与模糊框对应起来。
<li><a href="#Register" data-toggle="modal" data-target="#register">Register</a></li>
注册表单代码：
<!-- 页面主体内容 -->
<div class="container">
<div class="content">
<div class="starter-template">
<!-- 这里做了修改，其他地方自由发挥 -->
<h1>Welcome To ShiYanLou</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<!-- 注册表单 -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="register" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Register</h4>
</div>
<form action="" method="post" accept-charset="utf-8" class="form-horizontal">
<div class="modal-body">
<div class="form-group">
<label for="username" class="col-sm-4 control-label">Name:</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="username" id="username" minlength="2" maxlength="20" placeholder="username" required="">
</div>
<!-- 错误提示信息 -->
<h6 style="color: red;" id="dis_un"></h6>
</div>
<div class="form-group">
<label for="email" class="col-sm-4 control-label">Email:</label>
<div class="col-sm-6">
<input type="email" class="form-control" name="email" id="remail" placeholder="Email" required="">
</div>
<!-- 错误提示信息 -->
<h6 style="color: red;" id="dis_em"></h6>
</div>
<div class="form-group">
<label for="password" class="col-sm-4 control-label">Password:</label>
<div class="col-sm-6">
<input type="password" class="form-control" name="password" id="password" placeholder="password" minlength="6" maxlength="20" required="">
</div>
<!-- 错误提示信息 -->
<h6 style="color: red;" id="dis_pwd"></h6>
</div>
<div class="form-group">
<label for="confirm" class="col-sm-4 control-label">Confirm password:</label>
<div class="col-sm-6">
<input type="password" class="form-control" name="confirm" id="confirm" placeholder="confirm" minlength="6" maxlength="20" required="">
</div>
<!-- 错误提示信息 -->
<h6 style="color: red;" id="dis_con_pwd"><
扫一扫
1974
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
