PHP开发web网站

ffyy7

于 2024-05-30 21:48:41 发布

阅读量948

点赞数 10

文章标签： php 前端开发语言

本文链接：https://blog.csdn.net/fjyyyyy7/article/details/139334477

版权

设计的留言板网站包含以下几个部分

1.登录页面：使用已有账号密码进行登录成功进入留言板页面。

2.注册页面：注册用户账号及密码。

3.留言板页面：留言输入框、留言提交按钮、留言列表。

首先实现效果图如下

登陆页面

输入错误或未注册的账户密码时，显示弹窗

进行注册

成功注册后，出现弹窗

之后我们用注册的账号密码，登录进入到留言板页面

我们填写内容后点击“提交留言”，就会在留言列表显示

下面展示了留言板网站的所有实现代码

一、登陆

我们先完成登录页面的实现，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆页面</title>
<style>
    body{
        height: 100vh;
        background-image: url(photo1.jpg);
        background-size: cover;
    }
   .login{
    position: absolute;
    top: 50%;
    margin-top: -200px;
    left: 50%;
    margin-left: -200px;
    background-color: whitesmoke;
    width: 300px;
    height: 250px;
    border-radius: 25px;
    text-align: center;
    padding: 5px 40;
   }
</style>
</head>
<body style=" ">
    <div class="container">     
    <form id="loginForm" action="login.php" method="post" class="login">
        <h2>登录</h2>
        <p>
            <label for="username">账号：</label>
        <input type="text" id="username" name="username" required>
        </p>
        <p>
            <label for="password">密码：</label>
        <input type="password" id="password" name="password" required>
        </p>
        <input type="submit" value="登录">
        <a href="register.html">注册</a>
    </div>
    </form>
        </body>
</html>

当用户提交表单时，会以post方式将数据发送到login.php这个服务器端脚本进行处理。

用户输入账户密码后会将数据传送到数据库中进行后端校验，代码如下：

<?php
    session_start();
    	$user=$_POST["username"];
	$_SESSION["uesrname"]=$user;
	$pwd=$_POST["password"];
	if($user=""||$pwd="")
	{
      echo "<script>alert('请输入用户名或密码！'); history.go(-1);</script>";  
	}
	else
	{
		$link=mysqli_connect("localhost","root","root22","user");//连接数据库
        mysqli_query($link,"set names utf8"); 
        $sql = "select username,password from users where username = '$_POST[username]' and password = '$_POST[password]'";  
		$result=mysqli_query($link,$sql);//执行sql语句
		$num=mysqli_num_rows($result);//统计影响结果行数，作为判断条件
		if($num)
		{
			echo "<script>alert('登录成功！');window.location='ms.php';</script>";//登录成功页面跳转  
		}
		else
		{
			echo "<script>alert('用户名或密码不正确！');history.go(-1);</script>";  
	    }
	}
?>

二、注册

注册的前端HTML代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册页面</title>
<style>
    body{
        height: 100vh;
        background-image: url(photo1.jpg);
        background-size: cover;
    }
   .register{
    position: absolute;
    top: 50%;
    margin-top: -200px;
    left: 50%;
    margin-left: -200px;
    background-color: whitesmoke;
    width: 300px;
    height: 250px;
    border-radius: 25px;
    text-align: center;
    padding: 5px 40;
   }
</style>
</head>
<body>
<form method="POST" action="register.php" class="register">
<div style="">
<h1>注册</h1>
<p>
用户名:<input type="text" name="username">
</p>
<p>
<div>密&nbsp;&nbsp;&nbsp;码:<input type="password" name="password">
</p>
<div><input type="submit"  name="submit" value="注册">
    <a href="login.html">登录</a></div>
</div>
</form>
</body>
</html>

同样的当用户提交表单时，会以post方式将数据发送到register.php这个服务器端脚本进行处理。

<?php
session_start();
header("Content-type: text/html; charset=utf-8"); // 处理数据库用户名乱码

// 检查是否设置了用户名和密码
$user = isset($_POST["username"]) ? $_POST["username"] : '';
$pwd = isset($_POST["password"]) ? $_POST["password"] : '';

if ($user == '' || $pwd == '') {
    echo "<script>alert('请确认信息完整性！'); history.go(-1);</script>";  
} else {
    // 数据库连接信息
    $servername = "localhost";
    $username = "root";
    $password = "root22";
    $dbname = "user";

    // 创建连接
    $conn = new mysqli($servername, $username, $password, $dbname);

    // 检查连接
    if ($conn->connect_error) {
        die("连接失败: " . $conn->connect_error);
    }

    // 设置数据库字符集
    $conn->set_charset("utf8");

    // 防止SQL注入
    $sql = "SELECT username FROM users WHERE username = ?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("s", $user);
    $stmt->execute();
    $result = $stmt->get_result();
    $num = $result->num_rows;

    if ($num > 0) {
        echo "<script>alert('用户名已存在！'); history.go(-1);</script>";  
    } else {
        // 注册新用户
        $sql_insert = "INSERT INTO users (username, password) VALUES (?, ?)";
        $stmt_insert = $conn->prepare($sql_insert);
        $stmt_insert->bind_param("ss", $user, $pwd);
        if ($stmt_insert->execute()) {
            echo "<script>alert('注册成功！');window.location='login.html';</script>";  
        } else {
            echo "<script>alert('系统繁忙请重试！'); history.go(-1);</script>";  
        }
    }
}
?>

三、留言板页面

这段代码是一个简单的留言板网页，它结合了HTML、CSS和PHP。用户可以通过表单提交留言，留言将被保存到数据库中。同时，页面会显示所有已有的留言。代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .comment-form {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
        }
        .header {
            background-color: #007bff;
            color: #fff;
            padding: 10px;
            text-align: center;
            border-radius: 5px 5px 0 0;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input[type="text"],
        textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
        }
        button {
            background-color: #28a745;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #218838;
        }
        hr {
            border: 0;
            height: 1px;
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
        }
        .message-list {
            margin-top: 20px;
        }
        .message-item {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        .message-item span {
            display: block;
            margin-bottom: 5px;
        }
        .time {
            font-size: 0.8em;
            color: #6c757d;
        }
        .message-content {
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="comment-form">
            <div class="header">留言板</div>
            <form action="save_message.php" method="post">
                <div>
                    <label for="name">姓名：</label>
                    <input type="text" id="name" name="name" placeholder="请输入您的名字">
                </div>
                <div>
                    <label for="message">留言内容：</label>
                    <textarea id="message" name="message" rows="3" cols="30" placeholder="输入您的留言"></textarea><br>
                </div>
                <button type="submit">提交留言</button>
            </form>
        </div>
    </div>
    <hr>
    
    <!-- 留言列表 -->
    <h2>留言列表</h2>
    <div class="message-list">
        <!-- 留言列表项将在这里动态生成 -->
    </div>
    <?php
    // 数据库连接信息
    $servername = "localhost";
    $username = "root";
    $password = "root22";
    $dbname = "message";

    // 创建连接
    $conn = new mysqli($servername, $username, $password, $dbname);

    // 检测连接
    if ($conn->connect_error) {
        die("连接失败: " . $conn->connect_error);
    }

    // SQL查询语句
    $sql = "SELECT * FROM messages ";

    // 执行查询
    $result = $conn->query($sql);

    // 检查是否有结果
    if ($result->num_rows > 0) {
        // 输出每行数据
        while($row = $result->fetch_assoc()) {
            echo "<div class='message-item'>";
            echo "<span>姓名: " . htmlspecialchars($row["name"]). "</span>";
            echo "<span class='time'>日期: " . htmlspecialchars($row["created_at"]). "</span>";
            echo "<div class='message-content'>留言内容: " . htmlspecialchars($row["message"]). "</div>";
            echo "</div>";
        }
    } else {
        echo "0 结果";
    }

    // 关闭连接
    $conn->close();
    ?>
</body>
</html>

留言表单中表单的action属性设置为save_message.php，这意味着表单提交后，数据将被发送到该PHP脚本进行处理。

PHP数据库连接和查询实现了执行一个SQL查询来获取所有留言，如果查询成功，遍历结果并显示每条留言；如果没有结果，显示“0 结果”。

save_message.php代码如下：

<?php
// 从表单中接收数据
$name = $_POST['name'];
$message = $_POST['message'];

// 连接数据库
$dsn = 'mysql:host=localhost;dbname=message';
$username = 'admin1';
$password = 'admin1';
$db = new PDO($dsn, $username, $password);

// 插入留言
$sql = "INSERT INTO messages (name, message) VALUES (:name, :message)";
$stmt = $db->prepare($sql);
$stmt->bindParam(':name', $name);
$stmt->bindParam(':message', $message);
$stmt->execute();

// 输出提示信息
echo "<script>alert('留言保存成功！');window.location.href='ms.php';</script>";

save_message.php目的是接收用户通过表单提交的留言数据，然后将这些数据插入到数据库表中。