CSS样式编写
style.css1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134
| body { background-color: #f0f0f0; font-family: Arial, sans-serif; }
h1 { text-align: center; color: #333; margin-top: 50px; }
table { margin: auto; border-collapse: collapse; width: 80%; background-color: #fff; margin-bottom: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
th, td { padding: 10px; border: 1px solid #ccc; text-align: left; }
th { background-color: #f2f2f2; font-weight: bold; }
input[type=text], textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=password], textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=email], textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=number], textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; margin: 0 auto; display: block; }
input[type=submit]:hover { background-color: #45a049; } .message-actions { text-align: center; margin-top: 10px; }
.message-actions a { margin: 0 5px; padding: 6px 10px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 4px; font-size: 14px; }
.message-actions a:hover { background-color: #45a049; } .clearfix::after { content: ""; clear: both; display: table; }
.form-container { margin-bottom: 10px; }
.logout-button { text-align: center; margin-top: 10px; } .avatar { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; display: flex; justify-content: center; align-items: center; margin: 0 auto 1%; }
.avatar img { width: 100%; height: auto; display: block; }
|
安装页面编写
conn.php1 2 3 4 5 6 7 8 9 10
| <?php $hostname = 'localhost'; $username = 'root'; $password = 'root'; $database = 'frontenddb'; $conn = mysqli_connect($hostname, $username, $password,$database); if (!$conn) { echo "无法连接到数据库服务器: " . mysqli_error(); exit; }
|
==按照安全要求的话,安装完成后请把安装文件给删掉或者禁止执行==
install.php1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
| <?php
$hostname = 'localhost'; $username = 'root'; $password = 'root'; $conn = mysqli_connect($hostname, $username, $password);
$sqlCheckDatabase = "SHOW DATABASES LIKE 'FrontendDB'"; $resultCheckDatabase = $conn->query($sqlCheckDatabase);
if ($resultCheckDatabase->num_rows == 0) { $sqlCreateDatabase = "CREATE DATABASE IF NOT EXISTS FrontendDB"; $conn->query($sqlCreateDatabase); }
$conn->select_db("FrontendDB");
$sqlCreateInfoTable = "CREATE TABLE IF NOT EXISTS UserInfo ( `User ID` INT AUTO_INCREMENT PRIMARY KEY, `Username` VARCHAR(50) NOT NULL, `Password` VARCHAR(50) NOT NULL, `Email` VARCHAR(50), `Phone` CHAR(11), `Sex` CHAR(1), `Age` INT(3), `Address` VARCHAR(100), `Creation time` DATETIME NOT NULL )"; $conn->query($sqlCreateInfoTable);
$sqlCreateCommentTable = "CREATE TABLE IF NOT EXISTS Comment ( `Message ID` INT AUTO_INCREMENT PRIMARY KEY, `User ID` INT NOT NULL, `Message Text` TEXT , `Message Content` TEXT , `Publish Time` DATETIME NOT NULL, FOREIGN KEY (`User ID`) REFERENCES User(`User ID`) )"; $conn->query($sqlCreateCommentTable);
echo "创建成功!!!!";
$conn->close();
|
用户功能实现
创建用户注册页面
register.php1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
| <?php ?>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册页面</title> <link rel="stylesheet" href="../style.css"> </head> <body> <h1>注册页面</h1> <table> <form action="" method="POST" class="clearfix"> <tr> <td>用户名</td> <td><input type="text" name="NickName" value=""/></td> </tr> <tr> <td>密码</td> <td><input type="password" name="password" value=""/></td> </tr> <tr> <td>重复密码</td> <td><input type="password" name="repassword" value=""/></td> </tr> <tr> <td>邮箱</td> <td><input type="email" name="email" value=""/></td> </tr> <tr> <td>年龄</td> <td><input type="number" name="age" value=""/></td> </tr> <tr> <td>手机号</td> <td><input type="number" name="phone" value=""/></td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="sex" value="男" id="male" checked> <label for="male">男</label> <input type="radio" name="sex" value="女" id="female"> <label for="female">女</label> </td> <tr> <td>家庭住址</td> <td><input type="text" name="address" value=""/></td> </tr> <tr> <td></td> <td><input type="submit" name="submit" value="注册" /></td> </tr> </form> </table> </body> </html>
|
创建用户登录页面
login.php1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <?php ?>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录页面</title> <link rel="stylesheet" href="../style.css"> </head> <body> <h1>登录页面</h1> <table> <form action="" method="POST" class="clearfix"> <tr> <td>用户名</td> <td><input type="text" name="username" value=""/></td> </tr> <tr> <td>密码</td> <td><input type="password" name="password" value=""/></td> </tr> <tr> <td></td> <td><input type="submit" name="submit" value="登录" /></td> </tr> </form> </table> </body> </html>
|
创建用户详情页面
perinf.php1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
| <?php ?>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户详情页面</title> <link rel="stylesheet" href="../style.css">
</head> <body> <h1>用户详情页面</h1>
<!-- 用户头像显示功能 --> <div class="avatar"> <img src="http://43.138.77.252/assets/images/favicon.jpg" alt="用户头像"> </div>
<!-- 用户信息展示 --> <table> <tr> <td>用户名</td> <td><?php echo $user['Username']; ?></td> </tr> <tr> <td>邮箱</td> <td><?php echo $user['Email']; ?></td> </tr> <tr> <td>手机号</td> <td><?php echo $user['Phone']; ?></td> </tr> <tr> <td>性别</td> <td><?php echo $user['Sex']; ?></td> </tr> <tr> <td>年龄</td> <td><?php echo $user['Age']; ?></td> </tr> <tr> <td>家庭住址</td> <td><?php echo $user['Address']; ?></td> </tr> <tr> <td>注册时间</td> <td><?php echo date_format(new DateTime($user['Creation time']), 'Y-m-d');?></td> </tr> </table>
<!-- 修改密码表单 --> <h2>修改密码</h2> <div class="form-container"> <form action="" method="POST"> <label for="old_password">当前密码:</label> <input type="password" name="old_password" id="old_password" required><br>
<label for="new_password">新密码:</label> <input type="password" name="new_password" id="new_password" required><br> <label for="new_password">重复新密码:</label> <input type="password" name="re_password" id="new_password" required><br>
<input type="submit" name="submit" value="修改密码"> </form> </div>
<!-- 登出按钮 --> <div class="logout-button"> <form action="logout.php" method="POST"> <input type="submit" name="logout" value="登出"> </form> </div> </body> </html>
|
注册页面功能实现
register.php1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
| <?php include '../conn.php'; if(!empty($_POST['submit']) ){ $Nickname = trim($_POST['NickName']); $password = trim($_POST['password']); $repassword = trim($_POST['repassword']); $email = trim($_POST['email']); $age = trim($_POST['age']); $phone = trim($_POST['phone']); $sex = trim($_POST['sex']); $address = trim($_POST['address']); if(empty($Nickname)||empty($password)||empty($repassword)){ echo "不允许为空"; exit(); } if ($password!=$repassword){ echo "两次密码不匹配"; exit(); } $sql = "SELECT `Username` FROM userinfo WHERE `Username` = '$Nickname'"; $result = mysqli_query($conn,$sql); $row = mysqli_num_rows($result); if($row>=1){ echo "<script>alert('用户名已存在,请换一个!!!');location.href='register.php';</script>"; exit(); } $salt = date('Y-m-d H:i:s'); $password = $password.$salt; $password = md5($password); $sql = "insert into userinfo(`Username`,`Password`,`Email`,`Phone`,`Sex`,`Age`,`Address`,`Creation time`) values('$Nickname','$password','$email','$phone','$sex','$age','$address','$salt')"; $result = mysqli_query($conn,$sql); if($result){ echo "<script>alert('用户创建成功!');location.href='login.php';</script>"; }else{ echo "<script>alert('用户创建失败!!!');location.href='register.php';</script>"; } } ?>
|
登录页面功能实现
login.php1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| <?php include '../conn.php'; session_start(); if(!empty($_POST['submit']) ) { $username = trim($_POST['username']); $password = trim($_POST['password']); if (empty($username)&&empty($password)){ echo "账户或密码为空"; exit(); } $user_sql = "SELECT `User ID`,`Username`,`Creation time` FROM userinfo WHERE `Username` = '$username'"; $user_result = mysqli_query($conn,$user_sql); $user_row = mysqli_num_rows($user_result); if($user_row<1){ echo "<script>alert('用户名不存在');location.href='register.php';</script>"; exit(); } $user_row = mysqli_fetch_assoc($user_result); $password_md5 = $password.$user_row['Creation time']; $password_md5 = md5($password_md5); $pass_sql = "SELECT `Password` FROM userinfo WHERE `Username` = '$username'"; $pass_result = mysqli_query($conn,$pass_sql); $pass_row = mysqli_fetch_assoc($pass_result); $password = $pass_row['Password']; if($password_md5!==$password){ echo "账户或密码错误!!!"; exit(); } $_SESSION['is_login'] = 1; $_SESSION['username'] = $user_row['Username']; $_SESSION['user_id'] = $user_row['User ID']; echo "<script>alert('登录成功');location.href='perinf.php';</script>"; } ?>
|
详情页面功能实现
perinf.php1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
| <?php include '../conn.php'; session_start(); if($_SESSION['is_login']!==1){ echo "<script>alert('请登录!!!');location.href='login.php';</script>"; exit(); } $username = $_SESSION['username']; $sql = "select * from userinfo where Username = '$username'"; $result = mysqli_query($conn,$sql); $user = mysqli_fetch_array($result);
if (!empty($_POST['submit'])){ $curr_passwd = trim($_POST['old_password']); $new_passwd = trim($_POST['new_password']); $re_passwd = trim($_POST['re_password']); if($new_passwd!==$re_passwd){ echo "<script>alert('两次密码不匹配!!!');</script>"; } $salt_sql = "SELECT `Username`,`Creation time` FROM userinfo WHERE `Username` = '$username'"; $salt_result = mysqli_query($conn,$salt_sql); $salt_result = mysqli_fetch_array($salt_result); $password_md5 = $curr_passwd.$salt_result['Creation time']; $password_md5 = md5($password_md5); $pass_sql = "SELECT `Password` FROM userinfo WHERE `Username` = '$username'"; $pass_result = mysqli_query($conn,$pass_sql); $pass_row = mysqli_fetch_array($pass_result); $password = $pass_row['Password'];
if($password_md5!=$password){ echo "当前密码不正确!!!"; exit(); } $new_password_md5 = $new_passwd.$salt_result['Creation time']; $new_password_md5 = md5($new_password_md5); $update_sql = "UPDATE userinfo SET `Password` = '$new_password_md5' WHERE `Username` = '$username'"; $update_result = mysqli_query($conn, $update_sql); if ($update_result) { session_unset(); session_destroy(); echo "<script>alert('修改成功,请重新登录');location.href='login.php';</script>"; } else { echo "<script>alert('修改失败');</script>"; } } ?>
|
登出页面功能实现
logout.php1 2 3 4 5 6 7 8 9 10
| <?php session_start(); if (!empty($_POST['logout'])){ session_unset(); session_destroy(); echo "<script>alert('退出成功!!!');location.href='login.php';</script>"; exit(); }
|
留言功能实现
创建留言界面
guestbook.php1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
| <?php session_start(); if($_SESSION['is_login']!==1){ echo "<script>alert('请登录!!!');location.href='../user/login.php';</script>"; exit(); } ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>留言板</title> <link rel="stylesheet" href="../style.css"> </head> <body> <h1>留言板</h1> <table> <tr> <th>标题</th> <th>内容</th> <th>昵称</th> <th>时间</th> <th>操作</th> </tr> <tr> <td>留言内容</td> </tr> </table> <table> <form action="controls.php?fun=message_add" method="POST" class="clearfix"> <tr> <td>标题</td> <td><input type="text" name="txtName" value=""/></td> </tr> <tr> <td>留言内容</td> <td><textarea name="txtMessage" cols="100" rows="6"></textarea></td> </tr> <tr> <td></td> <td><input type="submit" name="submit" value="提交" /></td> </tr> </form> </table> </body> </html>
|
增加留言功能
controls.php1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| <?php include '../conn.php'; session_start(); if($_SESSION['is_login']!==1){ echo "<script>alert('请登录!!!');location.href='../user/login.php';</script>"; exit(); } function message_add($conn,string $user_id ,string $text_name,string $text_content){ if(!empty($text_name)&&!empty($text_content)){ $time = date('Y-m-d H:i:s'); $sql = "insert into comment(`User ID`,`Message Text`,`Message Content`,`Publish Time`) VALUES ('$user_id','$text_name','$text_content','$time')"; if (mysqli_query($conn,$sql)) { echo "<script>alert('留言成功!');location.href='guestbook.php';</script>"; } else { echo "<script>alert('留言失败!');location.href='guestbook.php';</script>"; } } else { echo "不能为空"; exit; } }
$fun = $_GET['fun']; $text_name = $_POST['txtName']; $text_content = $_POST['txtMessage']; $userid = $_SESSION['user_id']; $fun($conn,$userid,$text_name,$text_content);
|
显示留言功能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| <h1>留言板</h1> <table> <tr> <th>标题</th> <th>内容</th> <th>昵称</th> <th>时间</th> <th>操作</th> </tr> <?php include '../conn.php'; $sql = "select `Message ID`,`User ID`,`Message Text`,`Message Content`,`Publish Time` from comment order by `Publish Time` desc"; $result = mysqli_query($conn,$sql); while($row = mysqli_fetch_array($result)){ ?> <tr> <td><?php echo $row['Message Text']; ?></td> <td><?php echo $row['Message Content']; ?></td> <td><?php echo $_SESSION['username']; ?></td> <td><?php echo $row['Publish Time']; ?></td> <td><input type="hidden" name="id" value="<?php echo $row['Message ID']; ?>" /></td> </tr> </table> <?php }?>
|
修改留言信息
1 2 3 4 5 6 7 8
| <td><?php echo $row['Message Text']; ?></td> <td><?php echo $row['Message Content']; ?></td> <td><?php echo $row['Publish Time']; ?></td> <td class="message-actions"> <a href="edit.php?MessageId=<?php echo $row['Message ID']; ?>">修改</a> <a href="controls.php?fun=message_del&MessageId=<?php echo $row['Message ID']; ?>">删除</a> </td> <input type="hidden" name="id" value="<?php echo $row['Message ID']; ?>" />
|
edit.php?MessageId=<?php echo $row['Message ID']; ?>
其中 edit.php 是修改留言的页面,id 是要修改留言的 ID,通过此 ID 可以在留言修改页面将要修改的留言数据显示出来,同时也作为留言修改保存的条件.
edit.php1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| <?php session_start(); if($_SESSION['is_login']!==1){ echo "<script>alert('请登录!!!');location.href='../user/login.php';</script>"; exit(); } ?> <html> <head> <meta charset="utf-8"/> <title>留言板-修改留言</title> <link rel="stylesheet" href="../style.css"> </head> <body> <table width="80%" align="center" border="1" rules="all"> <form action="controls.php?fun=message_update" method="POST"> <tr> <td>标题</td> <td><input type="text" name="MessageText" value="<?php echo $MessageText; ?>"/></td> </tr> <tr> <td>留言内容</td> <td><textarea name="MessageContent" cols="100" rows="6"><?php echo $MessageContent; ?></textarea></td> </tr> <tr> <td><input type="hidden" name="MessageId" value="<?php echo $MessageId; ?>" /></td> <td><input type="submit" name="submit" value="提交" /></td> </tr> </form> </table> </body> </html>
|
当我们点击修改按钮后是以下样式
我们需要将ID对应的标题和内容显示出来
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| <body> <?php include "../conn.php"; $MessageId = $_GET['MessageId']; if(isset($MessageId)){ $sql = "select * from comment where `Message Id`=$MessageId"; $result = mysqli_query($conn,$sql); $data = mysqli_fetch_array($result); if($data){ $MessageText = $data['Message Text']; $MessageContent = $data['Message Content']; } } ?> <table width="80%" align="center" border="1" rules="all"> <form action="controls.php?fun=message_update" method="POST"> <tr> <td>标题</td> <td><input type="text" name="MessageText" value="<?php echo $MessageText; ?>"/></td> </tr> <tr> <td>留言内容</td> <td><textarea name="MessageContent" cols="100" rows="6"><?php echo $MessageContent; ?></textarea></td> </tr> <tr> <td><input type="hidden" name="MessageId" value="<?php echo $MessageId; ?>" /></td> <td><input type="submit" name="submit" value="提交" /></td> </tr>
|
当修改完留言,点击 提交 按钮的时候将留言保存到数据表中
controls.php1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| <?php function message_update($conn,$user_id,int $MessageId,string $text_name,string $text_content){ if(!empty($_POST['submit']) ){ $sql = "update comment set `Message Text`='".$text_name."',`Message Content` ='".$text_content."',`User ID` ='".$user_id."' where `Message Id`=$MessageId"; $result = mysqli_query($conn,$sql); if($result){ echo "<script>alert('留言修改成功!');location.href='guestbook.php';</script>"; }else{ echo "<script>alert('留言修改失败!请重试!');location.href='edit.php?MessageId=$MessageId';</script>"; } } }
$fun = $_GET['fun']; switch ($fun){ case $fun=='message_add': $text_name = $_POST['MessageText']; $text_content = $_POST['MessageContent']; $fun($conn,$_SESSION['user_id'],$text_name,$text_content); break; case $fun=='message_update': $MessageId = $_POST['MessageId']; $text_name = $_POST['MessageText']; $text_content = $_POST['MessageContent']; $fun($conn,$_SESSION['user_id'],$MessageId,$text_name,$text_content); break; }
|
删除留言功能
<a href="controls.php?fun=message_del&MessageId=<?php echo $row['Message ID']; ?>">删除</a>
点击删除链接,跳转到controls.php
文件根据通过GET方式传递的参数id进行删除留言操作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| <?php function message_del($conn,int $MessageId){ if(isset($MessageId)){ $sql = "delete from comment where `Message Id`=$MessageId"; $result = mysqli_query($conn,$sql); if($result){ echo "<script>alert('留言删除成功!');location.href='guestbook.php';</script>"; }else{ echo "<script>alert('留言删除失败!');location.href='guestbook.php';</script>"; } } }
case $fun=='message_del': $MessageId = $_GET['MessageId']; $fun($conn,$MessageId); break;
|