PHP+phpstudy留言板项目搭建教程

最新推荐文章于 2024-07-30 15:19:39 发布

葱姜蒜的葱

最新推荐文章于 2024-07-30 15:19:39 发布

阅读量684

点赞数 21

文章标签： php 开发语言

本文链接：https://blog.csdn.net/m0_75051044/article/details/139784630

版权

配置PHP环境

打开phpstudy,启动WAMP

点击软件管理，安装较高版本的PHP

点击设置，进入扩展组件页面，打开XDebug调试组件，并记下端口

点击左侧的网站，点击右侧管理，再打开根目录，接着返回上一级文件夹，打开Extensions文件夹，进入php文件夹，再进入安装的php所对应的文件夹，找到php.exe，记住该php.exe的路径

复制php.exe的路径为"D:\phpstudy_pro\Extensions\php\php8.2.9nts\php.exe"

打开VS,点击设置，搜索PHP，点击在settings.json中编辑

在{}中添加如下代码并保存

"php.validate.executablePath": "php.exe的路径",

"php.executablePath": "php.exe的路径",

注意：路径的\应替换为/,

搜索高级系统设置、环境变量，双击打开系统变量中的Path，点击新建，输入php.exe所在文件夹的路径，点击确定

创建一个PHP文件，检验环境是否配置成功

<?php

echo"葱姜蒜的葱";

?>

若下方的调试控制台回显葱姜蒜的葱，则说明PHP环境搭建成功。

项目搭建

留言板功能模块

注册功能：实现用户注册及注册验证
登录功能：实现用户登录及登录验证
留言功能：实现用户名、留言内容、留言时间在页面的输出
登出功能：实现用户的登出服务器端清除登录信息
管理功能：实现数据的增删改查

打开phpstudy/WWW文件夹，新建register.php

在Vscode中搜索、安装扩展Open PHP/HTML/JS In Browser

在phpstudy/WWW文件夹中新建settings.json输入如下代码

{

"open-php-html-js-in-browser.customHost": "127.0.0.1", //本地域名

"open-php-html-js-in-browser.customUrlToOpen": "http://${host}/${relativeDirnameDocumentRoot}/${fileBasename}",

"open-php-html-js-in-browser.documentRootFolder": "D:/phpstudy_pro/WWW"//站点的绝对路径

}

文件保存后，点击设置，搜索@ext:PrimaFuture.open-php-html-js-in-browser，选择图示复选框中的custom即可

注册功能后端

大体框架：设置数据库参数连接数据库获取表单数据注册验证插入数据跳转登录前端

PhpStudy设置数据库参数

数据库名称：xiaocong用户名：xiaocong 密码：xiaocong(可以随便设置，自己方便就行）

PhpStudy数据库工具新建表及字段

在软件管理中安装phpMyAdmin

依次点击首页、数据库工具、phpMyAdmin

输入数据库用户名、密码后进入数据库操作页面，新建两张数据表

一开始遇到了网页无法打开的问题，解决方法

https://www.cnblogs.com/qianzf/p/7189954.html

1.一张为user，包含id，name，pass字段，与用户注册登录有关；

2.一张为content，包含id、name，text、createtime字段，与留言实现有关

点击数据库，选择刚刚创建的(xiaocong)

功能实现

第一次提交数据时，id默认为1；此后每插入一次数据，id自增

在右侧的更多复选框中点击主键

点击结构，若页面回显如下图所示，则说明功能实现执行成功：

在content表中进行与user表一样的操作

连接数据库

在phpstudy/WWW文件夹中新建conn.php

<?php
$servername="localhost";
$username="xiaocong";//替换为具体的数据库用户名
$password="xiaocong";//替换为具体的数据库密码
$dbname="xiaocong";//替换为具体的数据库名称
$conn=mysqli_connect($servername,$username,$password,$dbname);//连接数据库
mysqli_query($conn, "SET NAMES UTF-8");//设置字符集
?>

在phpstudy/WWW文件夹中新建registerend.php

<?php

$name=$_POST['name'];  
$pass=$_POST['pass'];   //获取表单数据
    include_once "conn.php";   //运行conn文件，即连接数据库
    $sql="SELECT FROM user WHERE name='$name'";
    $result=mysqli_query($conn,$sql);//注册时$result若能在数据库中匹配到结果，则回显用户名存在
    $num=mysqli_num_rows($result);
    if($num)
    {
    echo "<script>alert('输入的用户名已经存在,请重新输入。'); history.back();</script>";//history.back用于返回到上一个页面
    exit;
    }
    else{
    $sql="INSERT INTO user(name,pass) values('$name','$pass')";
    $result=mysqli_query($conn,$sql);
    }
    if($result)
{
    echo "<script>alert('注册成功，请登陆');location.href='loginfront.php';</script>";
    //若注册成功，则跳转到loginfront.php页面。
}
else{
    printf("Error: %s\n", mysqli_error($conn));
}

在conn.php中添加如下代码即可在提交后通过页面回显查看是否成功连接数据库

if($conn)

{

    echo"<script>alert('连接数据库成功');</script>";

}

else{

    echo"<script>alert('连接数据库失败');</script>";

}

由下图前端回显可知，数据库连接成功

登录功能前端

大体框架：用户名栏密码栏登录按钮注册页面超链接

在phpstudy/WWW文件夹中新建loginfront.php

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>

<body>
    <div>
        <h1>用户登录</h1>
    <form action="loginend.php" method="post" >  //提交表单至loginend.php
    用户名：<input type="text" name="name" >
    密码：<input type="password" name="pass">
    <input type="submit" value="登录"> 
    <br><br>
    <a href=register.php><h2>返回注册页面</h2></a>
</form>               
    </div>
        </body>
            </html>

登录功能后端

大体框架：连接数据库获取表单数据登录验证跳转留言页面前端

在phpstudy/WWW文件夹中新建loginend.php，代码如下

<?php
    include_once "conn.php";
if($_SERVER["REQUEST_METHOD"] == "POST") { //规定传参方式
	$name=$_POST["name"];
	$pass=$_POST["pass"];
	$sql="SELECT * FROM user WHERE name='$name' AND pass='$pass'"; 
	//使用SQL语句将参数与数据库进行匹配
	$result=mysqli_query($conn, $sql);
	if (mysqli_num_rows($result) == 1) { 
	//如果匹配成功，mysqli_num_rows被赋值为1 
		echo"<script>alert('登录成功');location.href='messagefront.php';</script>";  
		//若登录成功，则跳转到留言前端页面
	} else {
		//验证失败
		echo"<script>alert('登录失败,用户名或密码错误！');history.back();</script>";
	}
}
?>

留言功能前端

大体框架：输入框提交按钮

在phpstudy/WWW文件夹中新建messagefront.php

<?php
session_start();  //开启会话
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>留言</title>
</head>

<body>
    <div>
    <form action="messageend.php" method="post" >        
    <textarea name="text" cols="30" rows="10"></textarea>
    <input type="submit" value="提交" >
        </form>
    </div>
</body>
    </html>

留言功能后端

大体框架：session检测获取表单数据插入数据遍历数据留言输出

在phpstudy/WWW文件夹中新建messageend.php


<?php
include 'conn.php'; 
session_start();// 检查用户是否已登录
if (!isset($_SESSION['name'])) {
    echo "<script>alert('请先登录');</script>";
    exit();
}

    $name=$_SESSION['name'];  //获取已登录的用户名
    $text=$_POST['text'];     //获取已提交的留言内容
    $createtime=date('Y-m-d H:i:s');      //设置留言时间
    if(!strlen($text))
{
    echo "<script>alert('留言不可为空');</script>";
    exit;
}
$sql="INSERT INTO content(name,text,createtime) VALUES ('$name','$text', '$createtime')";  
//插入用户名、留言内容、留言时间到数据库
$result=mysqli_query($conn,$sql);
if($result){
$query = "SELECT * FROM content ORDER BY id DESC";
$result = mysqli_query($conn, $query);      
// 如果插入数据成功，则遍历留言列表并在前端输出
while ($row = mysqli_fetch_array($result)) { 
    echo "<div>";   //PHP与HTML包含
    echo "<p>" . $row['text'] . "</p>";
    echo "<p>" . $row['name'] . " 发表于 " . $row['createtime'] . "</p>";
    //在"发表于"左右添加空格 使回显的页面内容清晰
    echo "<br><br>";//起留言页面的分割作用
    echo "</div>";
       }
    }
else {
echo "<script>alert('留言失败');history.back();</script>";
    }
?>

在messagefront.php中输入如下代码

<form action="logout.php">

<button οnclick="logout()">退出登录</button>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>

  function logout() {   //用axio.post()方法向登出后端文件发送一个POST请求

    axios.post('/logout.php')

  }

</script>

</form>

</script>

</form>

登出功能后端

在phpstudy/WWW目录新建logout.php

<?php
session_start(); 
    // 在服务器端清除掉用户的登录信息
    unset($_SESSION['name']);
    echo "<script>alert('登出成功');location.href='loginfront.php';</script>";
    exit;

该项目基于Phpstudy的数据库工具phpMyAdmin，可使用该工具以Web 图形模式直接管理 MySQL 数据库

新建数据表ScoreTable