1 实验环境
- 服务端:本实验基于虚拟机win2008系统的WAMP环境进行,该环境相关配置过程参考文章《win2008R2SP1+WAMP环境部署》。
- 客户端:使用浏览器访问与控制。
- 服务端与客户端处于同一个局域网下,开启服务端的phpstudy并确保能从客户端浏览器访问。
2 实验目标
2.1 目标
写一个网站,在首页能看用户的留言,同时能实现包括用户注册、登录、注销、上传头像、修改个性签名等。
2.2 页面功能规划
- 论坛首页:
- 显示论坛标题;
- 根据用户是否登录分支显示:已登录则显示“欢迎来到论坛首页”字样,同时显示个人中心、注销、新增留言等按钮;未登录则显示注册和登录按钮,未登录仅能看留言。
- 网页主体用于显示留言(后续实验完善留言功能),
- 个人中心页面:
- 标题显示个人中心;
- 根据用户是否登录分支显示:已登录则显示欢迎“欢迎来到个人中心”字样、显示个人账号、头像及个性签名信息、同时显示信息修改和注销按钮;未登录则显示注册和登录按钮。
- 注册页面:
- 设置表单用于收集用户输入的账号及两次输入的密码,设置提交按钮用于提交表单数据。
- 后台完成账号密码的验证:(1)账号或密码为空,则返回注册页面“提示账号密码不能为空,请重新输入”;(2)若两次密码不一致,则返回注册页面并提示“两次密码输入不一致”;(3)若账号已在数据库中存在,则返回注册页面并提示“账号已存在,请重新注册”;(4)账号密码没问题则存入数据库中,并返回COOKIE。
- 登录页面:
- 设置表单用于收集用户输入账号及密码,设置提交按钮用于提交表单数据。
- 后台完成账号密码与数据库数据验证,账号密码正确则返回COOKIE、显示欢迎字样、并提供返回首页与个人中心按钮;账号密码错误则重定向到登录页面重新输入。
- 暂时不考虑设置验证码的功能。
- 注销页面:
- 删除COOKIE;
- 并根据是否注销成功分支显示:成功则提示成功并显示返回首页按钮,失败则显示注销失败。
- 个人信息修改页面:
- 提供头像修改、个性签名修改、返回个人中心等三个按钮。
- 头像修改页面,显示按钮让用户选择新头像,修改成功后页面显示修改成功,提供返回个人中心和返回首页等按钮。
- 个性签名修改页面,功能基本与头像修改页面一致。
- 数据库:
- users表:保存用户注册与修改的数据。该表共有5个字段,分别是id、name、password、photo、signature。
- messages表:保存首页用户留言数据。该表共有4个字段,分别是id、uname、title、content。
2.3 网站文件组织结构
- index.php ——论坛首页
- messages ——留言文件夹
- showMessages.php ——显示留言内容
- addMessages.php ——新增留言
- member ——个人中心文件夹
- index.php ——个人中心主页
- register.php ——实现注册功能
- addUser.php ——接收来自注册页面的表单数据,逻辑判断并返回相应页面
- login.php ——登录页面
- logout.php ——注销页面
- updatePhoto.php ——修改头像页面
- updateSignature ——修改个性签名
- images ——文件夹 用于存放图片
- inc ——数据库文件夹
- dblink.inc.php ——用于与数据库交互,在其他页面中使用include引入。
3 实验阶段一:实现个人中心注册登录注销更新信息等功能
3.1 数据库
- 先在数据库中创建一个my_test的数据库。
- 在该数据库下创建两个表,一个是users,一个是messages,所含字段分别如下:
3.2 ./index.php 首页
- 首页位于默认站点位置。
- 代码如下。
<html>
<head>
<meta charset = "utf-8">
<title>留言论坛</title>
</head>
<body>
<h1>综合实验:留言论坛</h1>
<?php
if (isset($_COOKIE['name'])){
echo "欢迎来到论坛,".$_COOKIE['name']."<br>";
echo "<a href = './member/index.php'>个人中心</a> ";
echo "<a href = './member/logout.php'>注销</a>";
}else{
echo "<a href = './member/register.php'>注册</a> ";
echo "<a href = './member/login.php'>登录</a>";
}
?>
<hr />
<p>!此处用作留言板!</p>
</body>
</html>
3.3 ./inc/dblink.inc.php
- 为其他需要连接数据库的网页提供连接,避免重复定义。
- 此处账户名和密码是否需要修改呢?
<?php
$dbHost = "127.0.0.1";
$dbUser = "root";
$dbPass = "root";
$dbName = "my_test";
if (!$link = @mysqli_connect($dbHost,$dbUser,$dbPass,$dbName)){
die(mysqli_connect_error());
}
mysqli_set_charset($link,"utf-8");
?>
3.4 ./member/index.php
- 如果已经登录,可以利用COOKIE信息中的name字段,来获取数据库中该会员信息。
- 代码如下
<?php
include "../inc/dblink.inc.php";
?>
<html>
<head>
<meta charset = "utf-8">
<title>留言论坛</title>
</head>
<body>
<h1>个人中心</h1>
<?php
if (isset($_COOKIE['name'])){
$username = $_COOKIE['name'];
$sql = "select * from users where name ='".$username."'";
if ($results = mysqli_query($link,$sql)){
if (mysqli_num_rows($results)){
$result = mysqli_fetch_assoc($results);
//var_dump($result);
echo "<hr />";
echo "欢迎来到个人中心,".$_COOKIE['name']." <a href = '../index.php'>返回首页</a> <a href = './logout.php'>注销</a>";
echo "<hr />";
echo "个人信息:<br>";
echo "账号名:".$result['name']."<br>";
//echo $result['photo'];
echo "头像:<img src ='".$result['photo']."'> <a href = './updatePhoto.php'>更新头像</a><br>";
echo "个性签名:".$result['signature']." <a href = './updateSignature.php'>更新签名</a><br>";
}else{
echo "用户不存在!请<a hred = './register.php'>注册</a>";
}
}else{
echo "数据获取失败!请重新<a hred = './login.php'>登录</a><br>";
die (mysqli_error());
}
}else{
echo "<a href = './register.php'>注册</a> ";
echo "<a href = './login.php'>登录</a>";
}
?>
<?php
mysqli_close($link);
?>
</body>
</html>
3.5 ./member/register.php
- 设置表单用于收集用户输入的账号及两次输入的密码,设置提交按钮用于提交表单数据。
- 代码如下:
<html>
<head>
<meta charset = "utf-8">
<title>留言论坛</title>
</head>
<body>
<h1>综合实验:留言论坛</h1>
<form action = "./addUser.php" method = "POST">
用户名:<input type = "text" name = "userName"><br>
密码:<input type = "password" name = "userPass1"><br>
确认密码:<input type = "password" name = "userPass2"><br>
<input type = "submit" name = "userSubmit" value = "注册">
</form>
<hr />
</body>
</html>
3.6 ./member/addUser.php
- 后台完成账号密码的验证:(1)账号或密码为空,则返回注册页面“提示账号密码不能为空,请重新输入”;(2)若两次密码不一致,则返回注册页面并提示“两次密码输入不一致”;(3)若账号已在数据库中存在,则返回注册页面并提示“账号已存在,请重新注册”;(4)账号密码没问题则存入数据库中,并返回COOKIE。
- 代码:
<meta charset = "utf-8">
<?php
include "../inc/dblink.inc.php";
?>
<?php
//var_dump($_POST);
echo "<hr />";
if (isset($_POST['userSubmit'])){
if (is_null($_POST['userName']) or is_null($_POST['userPass1']) or is_null($_POST['userPass2'])){
echo "账号密码不能为空,请<a href = './register.php'>重新注册</a>";
}else if ($_POST['userPass1'] !== $_POST['userPass2']){
echo "两次密码不一致,请<a href = './register.php'>重新注册</a>";
}else {
// 查询数据库中是否有此用户,若无则新增,若有则要求重新输入
$sql = "select * from users where name = '".$_POST['userName']."'";
if ($results = mysqli_query($link,$sql)){
if (!mysqli_num_rows($results)){//为空则新增
$sql = "insert into users (name,password) values ('".$_POST['userName']."','".md5($_POST['userPass1'])."')";
//echo $sql."<hr />";
if (mysqli_query($link,$sql)){
echo "注册成功,请<a href = './login.php'>登录</a>";
}else{
echo "注册失败!请<a href = './register.php'>再次注册</a>";
}
}else{
echo "该用户已存在,请<a href = './register.php'>重新注册</a>";
}
}else{
echo "数据获取失败!";
die (mysqli_error());
}
}
}else{
header ("Location:./register.php");
}
?>
<?php
mysqli_close($link);
?>
3.7 ./member/login.php
- 设置表单用于收集用户输入账号及密码,设置提交按钮用于提交表单数据。
- setcookie设置路径:设置成 ‘/’ 时,Cookie 对整个域名 domain 有效。 如果设置成 ‘/foo/’, Cookie 仅仅对 domain 中 /foo/ 目录及其子目录有效(比如 /foo/bar/)。 默认值是设置 Cookie 时的当前目录。因此,为了让首页也能获取到cookie,需要设置路径为根据经。
- 代码:
<meta charset = "utf-8">
<?php
include "../inc/dblink.inc.php";
?>
<?php
if (isset($_POST['userSubmit'])){
//var_dump($_POST);
$sql = "select * from users where name = '".$_POST['userName']."' and password ='".md5($_POST['userPass'])."'";
//echo $sql;
if ($results = mysqli_query($link,$sql)){
if (mysqli_num_rows($results) > 0){
setcookie ('name',$_POST['userName'],time()+3600,"/");
echo "登录成功,请返回<a href = '../index.php'>首页</a>或<a href = './index.php'>个人中心</a>";
}else{
echo "账号或密码错误,请<a href = './login.php'>重新输入</a>";
}
}else{
die(mysqli_error($link));
}
}else{
echo "请输入账号密码";
// $html=<<<HTML
// <form method = "post" target = "_blank">
// 用户名:<input type = "text" name = "userName"><br>
// 密码:<input type = "password" name = "userPass"><br>
// <input type="submit" name="userSubmit" value="登录">
// </form>
// HTML;
// echo $html;
}
?>
<html>
<form method = "post" target = "_blank">
用户名:<input type = "text" name = "userName"><br>
密码:<input type = "password" name = "userPass"><br>
<input type="submit" name="userSubmit" value="登录">
</form>
</html>
<?php
mysqli_close($link);
?>
- 存在问题:不知道为什么将表单以定界符的形式写在PHP代码段里,执行就出现了以下错误提示,如有大神发现问题还麻烦告知。
3.8 ./member/logout.php
- 删除COOKIE;
- 代码:
<?php
if (setcookie('name',$_COOKIE['name'],time()-3600,"/")){
echo "logout!";
header ("Location:../index.php");
}else{
die ("Error!");
}
?>
3.9 ./member/updatePhoto.php
- 用于更新头像。
- 代码:
<meta charset = "utf-8">
<?php
include "../inc/dblink.inc.php";
?>
<?php
if (isset($_POST['userSubmit'])){
@$userName = $_COOKIE['name'];
//var_dump ($_FILES);
$tmp_path = $_FILES['up']["tmp_name"];
//echo $tmp_path;
$path = "./images/".$_FILES['up']["name"];
if (move_uploaded_file($tmp_path,$path)){
$path = mysqli_real_escape_string($link,$path);
$sql = "update users set photo = '".$path."' where name = '".$userName."'";
echo $sql;
if (mysqli_query($link,$sql)){
echo "头像上传成功,请<a href = './index.php'>返回个人中心</a>";
}else{
die (mysqli_error($link));
}
}else{
echo "头像上传失败";
}
}else{
echo "请选择上传头像";
}
?>
<html>
<form method = "POST" enctype = "multipart/form-data">
<input type = "file" name = "up"><br>
<input type = "submit" name = "userSubmit" value = "提交">
</form>
</html>
<?php
mysqli_close($link);
?>
3.10 ./member/updateSignature.php
<meta charset = "utf-8">
<?php
include "../inc/dblink.inc.php";
?>
<?php
if (isset($_POST['userSubmit'])){
@$userName = $_COOKIE['name'];
$sql = "update users set signature = '".$_POST['userSignature']."' where name = '".$userName."'";
if (mysqli_query($link,$sql)){
echo "签名更新成功,请<a href = './index.php'>返回个人中心</a>";
}else{
die (mysqli_error($link));
}
}else{
echo "请更新签名";
}
?>
<html>
<form method = "POST" >
输入个性签名:<input type = "text" name = "userSignature"><br>
<input type = "submit" name = "userSubmit" value = "提交">
</form>
</html>
<?php
mysqli_close($link);
?>
3.11 测试
- 访问首页,显示结果为:
- 点击注册,账号密码均输入a。
- 点击注册时,页面显示如下,提示已经注册过了该账户。
- 重新注册,账号密码输入b,点击注册,弹出以下提示。
- 点击登录,输入账号密码b,点击登录。
- 显示登录成功,网页获取到服务端发来的COOKIE,返回首页与个人中心均可用。
- 返回首页的页面结果。
- 返回个人中心的页面结果。
- 点击更新头像,选择自己的图片文件,并点击提交。
- 图像上传成功,点击返回个人中心。
- 返回个人中心后可以看到自己上传的头像。
- 点击更新签名,出现以下界面,输入自己的签名“hello world!并点击提交。
- 提交后显示签名更新成功。
- 点击返回个人中心,可以看到个人中心信息已齐全。
- 点击注销即退出登录,系统将删除COOKIE,并返回首页。
4 实验阶段二:完善留言板功能
4.1 ./index.php 首页功能完善
- 让原本的首页增加留言相关功能,包括显示留言及新增留言。
- 代码:
<?php
include "./inc/dblink.inc.php";
?>
<html>
<head>
<meta charset = "utf-8">
<title>留言论坛</title>
</head>
<body>
<h1>综合实验:留言论坛</h1>
<?php
if (isset($_COOKIE['name'])){
echo "欢迎来到论坛,".$_COOKIE['name']."<br>";
echo "<a href = './member/index.php'>个人中心</a> ";
echo "<a href = './member/logout.php'>注销</a> " ;
echo "<a href = './messages/addMessages.php'>我要留言</a>" ;
}else{
echo "<a href = './member/register.php'>注册</a> ";
echo "<a href = './member/login.php'>登录</a>";
}
echo "<hr />";
$sql = "select * from messages";
if ($results = mysqli_query($link,$sql)){
if (mysqli_num_rows($results)>0){
echo "<table border = 2>";
echo "<tr><td>ID</td><td>TITLE</td><td>AUTHOR</td></tr>";
while($result = mysqli_fetch_assoc($results)){
echo $result['id'];
echo "<tr>
<td>".$result['id']."</td>
<td><a href = './messages/showMessages.php?id={$result['id']}' target='_blank'>".$result['title']."</a></td>
<td>".$result['uname']."</td>
</tr>";
}
echo "</table>";
}else{
echo "暂无留言";
}
}else{
mysqli_error($link);
}
?>
</body>
</html>
<?php
mysqli_close($link);
?>
4.2 ./showMessages.php
- 用读者点击首页留言标题时,跳转到此页面,用于展示该留言内容。
- 代码:
<?php
include "../inc/dblink.inc.php";
?>
<html>
<head>
<meta charset = "utf-8">
<title>留言论坛</title>
</head>
<body>
<h1>留言内容</h1><a href = '../index.php'>返回首页</a><hr />
<?php
if(isset($_GET['id'])){
$id = $_GET['id'];
//echo $id;
$sql = "select * from messages where id =".$id;
//echo $sql;
if ($results = mysqli_query($link,$sql)){
$result = mysqli_fetch_assoc($results);
echo "作者:".$result['uname']."<br>标题:".$result['title']."<hr />";
echo $result['content'];
}else{
mysqli_error($link);
}
}else{
echo "ID error!";
}
?>
</body>
</html>
<?php
mysqli_close($link);
?>
4.3 ./messages/addMessages.php
- 作用:提供已登录的用户新增刘洋。
- 代码:
<meta charset = "utf-8">
<?php
include "../inc/dblink.inc.php";
?>
<?php
if (isset($_COOKIE['name'])){
//echo "已登录";
if (isset($_POST['userSubmit']) && isset($_POST['userTitle'])){
$userName = $_COOKIE['name'];
$title = mysqli_real_escape_string($link,$_POST['userTitle']);
$cont = mysqli_real_escape_string($link,$_POST['userCont']);
$sql = "insert into messages (uname,title,content) values ('".$userName."','".$title."','".$cont."')";
//echo $sql;
if(mysqli_query($link,$sql)){
echo"留言成功,<a href = '../'>返回首页</a>";
}else{
echo "留言失败";
}
}else{
echo "标题不能为空,请点击提交按钮进行提交。";
}
}else{
echo "您还未登录,请<a href = '../member/login.php'>登录</a>后留言。";
}
?>
<html>
<form method = "POST">
标题:<input type = "text" name = "userTitle"><br>
内容:<br>
<textarea name = "userCont"></textarea>
<input type = "submit" name = "userSubmit" value = "提交">
</form>
</html>
<?php
mysqli_close($link);
?>
4.4 测试
- 浏览器打开首页,未登录的没有新增留言功能。
- 登录后再次返回首页,可以看到“我要留言”的字样。
- 点击“我要留言”,输入自己的留言并点击提交。
- 可以看到留言成功,点击返回首页。
- 点击刚刚新增的这个留言标题,查看留言内容。
5 总结
- 理解开发功能需求、合理规划网页布局;
- 了解各个网页之间的跳转和参数的提交;
- 加深对SQL、HTML、PHP的应用熟练度;
- 掌握最基本的网页开发技能。