本次实验采用HBuilder+Xampp实现PHP+MYSQL代码编写
效果如下图所示
一、PHP程序编写
打开HBuider程序,新建文件夹login,文件目录如下:
1、新建login.html实现登录界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册登录</title>
</head>
<script language=JavaScript>
function InputCheck(){
var x = document.forms["Login"]["username"].value;
if ( x == "" || x == null){
alert("请输入用户名!");
return (false);
}
var y= document.forms["Login"]["password"].value;
if (y == "" || y == null){
alert("请输入密码!");
return (false);
}
}
function Regpage() {
location='register.html';
}
</script>
<body background="img/背景1.jpg" style="background-size: 100% 100%;background-attachment: fixed;">
<header> <img src="img/logo.png" ></header>
<div style="position: absolute; left: 50%; top: 50%;width: 500px; margin-left:-250px; margin-top: -200px">
<div style="background: #eFeFeF; padding: 20px;border-radius: 4px;box-shadow: 5px 5px 20px #444444" >
<div>
<form action="login.php" method="post" name="Login" onsubmit="return InputCheck()">
<div style="color: black">
<h2>学生信息管理系统</h2>
</div>
<hr>
<div>
<label>用户名</label>
<div>
<input type="text" name="username" id="username" placeholder="用户名" autocomplete="off">
</div>
</div>
<div>
<label>密 码</label>
<div>
<input type="password" name="password" id="password" placeholder="密码" autocomplete="off">
</div>
</div>
<div>
<div>
<input type="submit" value="登录">
<input type="button" name="register" id="register" value="注册" onclick="Regpage()">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
2、新建login.php登录界面功能实现
<?php
//数据库连接
require("conn.php"); //我把连接数据库的连接代码写在conn.php脚本上
//从登录页接受来的数据
$name=$_POST["username"];
$pwd=$_POST["password"];
$sql="SELECT id,username,password FROM user WHERE username='$name' AND password='$pwd';";
$result=mysqli_query($conn,$sql);
$row=mysqli_num_rows($result);
if(!$row){
echo "<script>alert('密码错误,请重新输入');location='login.html'</script>";
}
else{
echo "<script>alert('登录成功');location='index.php'</script>";
}
?>
3、新建register.html实现注册界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<script>
function ResCheck() {
var x=document.forms["Register"]["username"].value;
if ( x == "" || x == null){
alert("用户名不能为空!");
return (false);
}
var y= document.forms["Register"]["password"].value;
if (y == "" || y == null){
alert("密码不能为空!");
return (false);
}
var z= document.forms["Register"]["password2"].value;
if ( z!=y ) {
alert("两次密码输入不一致,重新输入!");
return (false);
}
}
</script>
<body background="img/背景1.jpg" style="background-size: 100% 100%;background-attachment: fixed;">
<header> <img src="img/logo.png" ></header>
<div style="position: absolute; left: 50%; top: 50%;width: 500px; margin-left:-250px; margin-top: -200px">
<div style="background: #eFeFeF; padding: 20px;border-radius: 4px;box-shadow: 5px 5px 20px #444444" >
<div>
<form action="register.php" method="post" name="Register" onsubmit="return ResCheck()">
<div style="color:black">
<h2>用户注册</h2>
</div>
<div>
<label>用户名</label>
<div>
<input type="text" name="username" id="username" placeholder="用户名" autocomplete="off">
</div>
</div>
<br/>
<div>
<label>密码</label>
<div>
<input type="password" name="password" id="password" placeholder="密码" autocomplete="off">
</div>
</div>
<br/>