【HTML+PHP+SQL】综合实验：一个简单丑陋的论坛网站（实现用户注册、登录、注销、修改信息、留言等功能）
目录
- 1 实验环境
- 2 实验目标
-
- 2.1 目标
- 2.2 页面功能规划
- 2.3 网站文件组织结构
- 3 实验阶段一：实现个人中心注册登录注销更新信息等功能
-
- 3.1 数据库
- 3.2 ./index.php 首页
- 3.3 ./inc/dblink.inc.php
- 3.4 ./member/index.php
- 3.5 ./member/register.php
- 3.6 ./member/addUser.php
- 3.7 ./member/login.php
- 3.8 ./member/logout.php
- 3.9 ./member/updatePhoto.php
- 3.10 ./member/updateSignature.php
- 3.11 测试
- 4 实验阶段二：完善留言板功能
-
- 4.1 ./index.php 首页功能完善
- 4.2 ./showMessages.php
- 4.3 ./messages/addMessages.php
- 4.4 测试
- 5 总结
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>
";
echo "个人中心 ";
echo "注销";
}else{
echo "注册 ";
echo "登录";
}
?>
<hr />
<p>！此处用作留言板！p>
body>
html>
3.3 ./inc/dblink.inc.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字段，来获取数据库中该会员信息。
- 代码如下
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 "
";
echo "欢迎来到个人中心，".$_COOKIE['name']." 返回首页 注销";
echo "
";
echo "个人信息：
";
echo "账号名：".$result['name']."
";
//echo $result['photo'];
echo "头像：![](</span><span class="token string double-quoted-string">".<span class="token interpolation"><span class="token variable">$result</span><span class="token punctuation">[</span><span class="token string single-quoted-string">)
]."'> 更新头像
";
echo "个性签名：".$result['signature']." 更新签名
";
}else{
echo "用户不存在！请注册";
}
}else{
echo "数据获取失败！请重新登录
";
die (mysqli_error());
}
}else{
echo "注册 ";
echo ">登录</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 "
";
if (isset($_POST['userSubmit'])){
if (is_null($_POST['userName']) or is_null($_POST['userPass1']) or is_null($_POST['userPass2'])){
echo "账号密码不能为空，请重新注册";
}else if ($_POST['userPass1'] !== $_POST['userPass2']){
echo "两次密码不一致，请重新注册";
}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."
";
if (mysqli_query($link,$sql)){
echo "注册成功，请登录";
}else{
echo "注册失败！请再次注册";
}
}else{
echo "该用户已存在，请重新注册";
}
}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 "登录成功，请返回首页或个人中心";
}else{
echo "账号或密码错误，请重新输入";
}
}else{
die(mysqli_error($link));
}
}else{
echo "请输入账号密码";
// $html=<<
//
// 用户名：
// 密码：
//
//
// 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；
- 代码：
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 "头像上传成功，请返回个人中心";
}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 "签名更新成功，请返回个人中心";
}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 首页功能完善
- 让原本的首页增加留言相关功能，包括显示留言及新增留言。
- 代码：
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']."
";
echo "个人中心 ";
echo "注销 " ;
echo "我要留言" ;
}else{
echo "注册 ";
echo "登录";
}
echo "
";
$sql = "select * from messages";
if ($results = mysqli_query($link,$sql)){
if (mysqli_num_rows($results)>0){
echo "";
echo "ID TITLE AUTHOR
".$result['id']."
]}' target='_blank'>".$result['title']."
".$result['uname']."
";
}
echo "
";
}else{
echo "暂无留言";
}
}else{
mysqli_error($link);
}
?>
</body>
</html>
<?php
mysqli_close($link);
?>
4.2 ./showMessages.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']."
标题：".$result['title']."
";
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"留言成功,返回首页";
}else{
echo "留言失败";
}
}else{
echo "标题不能为空，请点击提交按钮进行提交。";
}
}else{
echo "您还未登录，请登录后留言。";
}
?>
<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的应用熟练度；
- 掌握最基本的网页开发技能。