1.引入文件
require 与 nclude 语句
跟文件的路径
eg:require( "./a.php" );
2.新建一个数据库配置文件（新建config.php）
<?php
$config = array(
'hostName' => 'localhost',//主机名
'userPwd' => 'root',//用户密码
'userName' => 'root', //用户名
'dbName' => 'company_info',//数据库名
'code' => 'utf8'
);
?>
3.封装数据库连接（新建connect.php）
<?php
require( "./config.php" );//引入配置文件
// $link = mysql_connect( "localhost", "root", "root" );
// if( !$link ){
// die(mysql_error());
// }
// mysql_query( "set names utf8");
// mysql_select_db( "company_info" );
$link = mysql_connect( $config['hostName'], $config['userName'], $config['userPwd'] );
if( !$link ){
die(mysql_error());
}
mysql_query( "set names " . $config['code'] );
mysql_select_db( $config['dbName'] );
?>
4.简单的用户名格式验证（不涉及后台数据，新建onsubmit.html文件）
因为后台数据的交互需要时间，所以先验证出正确格式的用户名，在去后台验证用户名密码是否正确。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload =() => {
let oForm = document.querySelector("#form");
let oUser = document.querySelector("#user");
//表单提交的时候， 会触发onsubmit事件
oForm.onsubmit = () => {
// alert( '表单触发了提交事件' );
//阻止表单提交
// return false;
if( user.value.length == 0 ){//没输入是阻止提交
return false;
};
if( document.querySelector("#tip").innerHTML =='非法'){//用户名错误时阻止提交
return false;
}
}
// oUser.onchange = () =>{
oUser.onkeyup = () =>{
// alert(this + '
' + this.value);
// alert( oUser.value );
var re = /^w{6,20}$/;//匹配用户名的格式的正则：6-20位的非特殊字符---->更多匹配请自行百度
if( re.test( oUser.value ) ){
document.querySelector("#tip").innerHTML = '合法';
}else {
document.querySelector("#tip").innerHTML = '非法';
}
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com/s" target="_blank" id="form">
<input type="text" name="wd" id="user">
<span id="tip"></span>
<br>
<input type="submit" value="提交数据到百度去" id="btn">
</form>
</body>
</html>
5.用户名密码登录验证（后台验证）（新建login.php）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.reg-form {
margin-top: 100px;
}
</style>
</head>
<body>
<?php
require( './connect.php' );//链接数据库
?>
<div class="container">
<div class="row">
<div class="tip"></div>
<form class="form-horizontal reg-form" role="form" method="post">
<!-- post 方式提交数据 -->
<div class="form-group">
<label for="firstname" class="col-md-2 control-label">用户名:</label>
<div class="col-md-6">
<input type="text" class="form-control" id="user" name="user" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-md-2 control-label">密码</label>
<div class="col-md-6">
<input type="password" name="pwd" class="form-control" id="pwd" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">登录</button>
</div>
</div>
</form>
</div>
</div>
<?php
if( !empty( $_POST['user'] ) && !empty( $_POST['pwd'] ) ){//用户名密码非空
$userName = $_POST['user'];
$userPwd = $_POST['pwd'];
$sql = "SELECT * FROM user_info WHERE user_name = '$userName' AND user_pwd = '$userPwd'";
$res = mysql_query( $sql ); //查询用户名与密码
if( $res && mysql_num_rows( $res ) ){ //判断用户名密码正确
// header("Location:success.html");
header("Location:http://www.baidu.com"); //用户名密码正确跳转到百度
?>
<!-- <script>
window.location.href = './success.html';
</script> -->
<?php
}else {
header("Location:error.html"); //用户名密码错误，跳转到失败页面
?>
<!-- <script>
window.location.href = './error.html';
</script> -->
<?php
}
}
?>
</body>
</html>
6.注册验证用户名是否存在（新建reg.php）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.reg-form {
margin-top: 100px;
}
</style>
</head>
<body>
<?php
require( './connect.php' );//链接数据库
?>
<div class="container">
<div class="row">
<div class="tip"></div>
<form class="form-horizontal reg-form" role="form" method="post">
<div class="form-group">
<label for="firstname" class="col-md-2 control-label">用户名:</label>
<div class="col-md-6">
<input type="text" class="form-control" id="user" name="user" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-md-2 control-label">密码</label>
<div class="col-md-6">
<input type="password" name="pwd" class="form-control" id="pwd" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">注册</button>
</div>
</div>
</form>
</div>
</div>
<?php
if( !empty( $_POST['user'] ) && !empty( $_POST['pwd'] ) ){//用户名密码非空
$userName = $_POST['user'];
$userPwd = $_POST['pwd'];
$sql = 'SELECT * FROM user_info WHERE user_name = "' . $userName . '"';
$res = mysql_query( $sql );//查询用户名
if( $res && mysql_num_rows( $res ) ){ //用户名存在
?>
<script>
document.querySelector(".tip").innerHTML = '你输入的用户名已经存在';
</script>
<?php
}else { //用户名不存在，开始注册了
$sql = "INSERT INTO user_info ( user_name, user_pwd ) VALUES( '$userName', '$userPwd' )";
$res = mysql_query( $sql );
if( $res !== false ){//判断语句执行情况
?>
<script>
document.querySelector(".tip").innerHTML = '用户名注册成功';
</script>
<?php
}else {
?>
<script>
document.querySelector(".tip").innerHTML = '用户名注册失败';
</script>
<?php
}
}
}
?>
</body>
</html>
7.留言板（message.php）
需要新建表massage （表有三列msg_id，title，content）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.my-form {
margin-top: 60px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<form action="" class="form-horizontal my-form" method="post">
<div class="form-group">
<label for="" class="control-label col-md-2">标题:</label>
<div class="col-md-8">
<input type="text" name="title" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<textarea name="content" class="form-control" id="" cols="10" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<button type="submit" class="btn btn-primary">发布</button>
</div>
</div>
</form>
</div>
</div>
</div>
<?php
require("connect.php");
?>
<?php
if( !empty( $_POST['title'] ) && !empty( $_POST['content'] ) ){
$title = $_POST['title'];
$content= $_POST['content'];
$sql = "INSERT INTO message( title, content ) VALUES( '$title', '$content' )";
$res = mysql_query( $sql );
if( $res !== false ){
echo "<script>alert('留言发布成功');</script>";
}else {
echo "<script>alert('留言发布失败');</script>";
}
}
?>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<ul>
<?php
$sql = "SELECT * FROM message";//查询
$res = mysql_query( $sql );
while( $row = mysql_fetch_assoc( $res ) ){
//php，html混编
?>
<li>
<?php echo $row['title']; ?>
<p><?php echo $row['content']; ?></p>
</li>
<?php
}
?>
</ul>
</div>
</div>
</div>
</body>
</html>