学了一段时间的PHP了，尝试着做一个PHP+MySQL做出一个具有登录注册界面的留言板页面，尽量考虑安全问题（防爆破，防注入，防越权）
建立数据库
先做一个数据库，我寻思着吧，要做两个表，一个“用户”表两列放用户信息，username和password；另一个“留言信息”表三列放留言信息，标题、内容、时间。
create datdbase message_board;#创建数据库
use message_board;
create table admin#创建用户表
(
id int auto_increment,
username varchar(50) not null,#创建容量为50的username列
password varchar(50) not null,#创建容量为50的password列
primary key(id)
)
charset = utf8;
create table meas#创建留言信息表
(
id int auto_increment comment 'id',#创建id列
title varchar(20) not null comment'标题',#创建容量为20的title表
content text not null comment'内容',#创建content表
addtime varchar(20) not null comment'时间',#创建容量为20的add time表
primary key(id)
)
charset = utf8;
insert into admin values(default,'admin','admin');#创建一个管理员用户
连接数据库
数据库做完之后，做一个连接数据库的PHP，方便数据调用
<?php
$conn = @mysql_connect("localhost","root","root");//连接数据库的函数
mysql_select_db("message_board");//选择数据库
mysql_query("set names utf8");//设置密码
?>
UTF-8
在建立数据库和连接数据库时都是用来utf8相关代码charset = utf8和mysql_query("set names utf8")，这里是统一使用了一种页面声明编码UTF-8（8位元，Universal Character Set/Unicode Transformation Format）。UTF-8是一种基于Unicode的通用转换格式（UTF），用1-4个字节为每个字符编码。可以理解为一种适用于大部分非英文的字符编码。
统一使用同种页面声明编码可以防止中文乱码的出现。
前端登陆页面
HTML做一个前端登录页
这个有点麻烦，因为用HTML很多涉及到CSS，但是HTML我其实学的不多，CSS还没开始接触，但我觉得HTML做出来好看一点。所以我会在代码当中做很详细的注释，一来防止自己以后忘了，二来希望和我一样的有缘人看的舒服一点。还有一些没有解决的问题也会在注释中提出。
<html>
<head>
<title>用户登陆</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″><!-- 声明网页使用的是UTF-8编码 -->
<link rel="stylesheet" type="text/css" href="./css/index1.css"><!-- 这里设置了一个链接文档，href连接的文档是一个新样式表，是主页面样式 -->
<style>
</style>
</head>
<body background="16.png";><!--换了一个清爽一点的背景-->
<!--这个地方有一个问题就是这个背景图不是全填充，是原比例，但是我不会调-->
<div>
<table style="width: 30%;height:300px;margin: 0 auto;margin-top:15%;background:#E0FFFF60;border-radius:20px"><!--设置了一个表单的宽度和高度、背景颜色和半透明（#00000060），然后设置了一个居中-->
<tr>
<td align="center" ><!--规定了单元格中的居中对齐-->
<table align="center" width=350 height=230><!--设置表格的居中、大小-->
<!--标签<td>和<table>都是可以使用align属性的,即规定表格行的对齐方式-->
<form method ="POST" action = "loading.php" name="frmLogin"> <!--使用POST的方法提交登录，用的是之后要写的loading.php文件实现-->
<tr align="center">
<td colspan="3" style="font-size:60px;font-family:默陌狂飞侠客体">Login</td><!--设置了单元格横跨两列，规定了字体的大小为50像素-->
</tr>
<tr>
<td align="center" style="font-size:30px;font-family:默陌狂飞侠客体">用户名</td>
<td><input type="name" maxlength="20" name="uid" placeholder="Username" style="text-align:center;border: 0;border-bottom: 2px solid #000; width:200px;font-size:20px;background: #ffffff00;color:#000;padding: 5px;"></td>
<!--规定了输入路径，输入框的居中、大小、边框去掉，只加了下边款，背景设置成白色透明（#ffffff00）-->
</tr>
<tr>
<td align="center" style="font-size:30px;font-family:默陌狂飞侠客体">密 码</td>
<td><input name="password" type="password" maxlength="16" placeholder="Password" style="text-align:center;border: 0;border-bottom: 2px solid #000; width:200px;font-size:20px;background: #ffffff00;padding: 5px"></td>
</tr>
<tr align="center">
<td colspan="2"><!--要设置占用两个单元格才能整体居中-->
<input type="submit" name="login" value="登陆" class="btn" style="background-image: linear-gradient(45deg, #8baaaa 0%, #ae8b9c 100%);color: #fff;width: 200px;height:30px;border-radius:30px;margin-top: 15px;font-size: 18px;border:none;font-family:默陌狂飞侠客体;cursor: pointer;">
<!--margin-top: 30px是设置了一个间距，还加了一个从网上找的渐变，调了一下字体大小、加粗和颜色，加了一个鼠标放上去变手指-->
</td>
</tr>
<tr align="center">
<td colspan="2" >
<a href="register.php" target="_blank"><!--跳转登陆页面-->
<input type="button" name="register" value="注册" style="background-image: linear-gradient(45deg, #8baaaa 0%, #ae8b9c 100%);color: #ffffff;width: 200px;height: 30px;border-radius: 30px;margin-top: 15px;font-size: 18px;font-family:默陌狂飞侠客体;cursor: pointer;border:none;οnclick="window.location.href='register.php'" class="btn"/>
</a>
</td>
</tr>
</form>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
做出来是这个样子的
除了背景和下面两个按钮的渐变颜色是在网上找的图，其他的都是HTML写出来的，还有几点温馨提示
- HTML当中有一些属性是不建议使用的，这些最好用样式代替，如：使用
style="width: 30px;height: 50px"代替width= 30px;height= 50px； - 渐变是在这个网站找的WebGradients，免费，无需下载，样式多；
- 如果使用CSS的编译器其实不用写的这么难看，但我是记事本没办法
- 代码中包含了两个我还没有写的代码文件名，用来实现登录和注册
2.18做了一点修改，换了一个背景，框做了一点变化，加了一个鼠标在按键上变化的效果，连接了注册页面和登录页面。
前端注册页面
<!DOCTYPE html>
<html>
<head>
<title>注册</title>
<meta charset="utf-6">
<link rel="stylesheet" type="text/css" href="./css/index1.css">
<style>
</style>
</head>
<body background="16.png";>
<table style="width: 30%;height:300px;margin: 0 auto;margin-top:15%;background:#E0FFFF60;border-radius:20px">
<tr>
<td align="center" >
<form action="doregister.php " name="dl" method="post">
<table align="center" width=350 height=230; style="font-family:宋体;font-size:25px;">
<tr align="center">
<td colspan="3" style="font-size:60px;font-family:默陌狂飞侠客体">注册用户</td>
</tr>
<tr>
<td align="center" style="font-size:30px;font-family:默陌狂飞侠客体">用户名</td>
<td>
<input type="name" maxlength="20" name="id" placeholder="Username" style="text-align:center;border: 0;border-bottom: 2px solid #000; width:200px;font-size:20px;background: #ffffff00;color:#000;padding: 5px;">
</td>
</tr>
<tr>
<td align="center" style="font-size:30px;font-family:默陌狂飞侠客体">密码</td>
<td >
<input name="password" type="password" maxlength="16" placeholder="Password" style="text-align:center;border: 0;border-bottom: 2px solid #000; width:200px;font-size:20px;background: #ffffff00;color:#000;padding: 5px;">
</td>
</tr>
<tr>
<td align="center" style="font-size:30px;font-family:默陌狂飞侠客体">再次输入</td>
<td>
<input name="confirmPassword" type="password" maxlength="16" placeholder="Password" style="text-align:center;border: 0;border-bottom: 2px solid #000; width:200px;font-size:20px;background: #ffffff00;color:#000;padding: 5px;">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="zu" value="注册" style="background-image: linear-gradient(45deg, #8baaaa 0%, #ae8b9c 100%);color: #fff;width: 200px;height:30px;border-radius:30px;margin-top: 15px;font-size: 18px;border:none;font-family:默陌狂飞侠客体;cursor: pointer;margin-top: 30px;" class="btn"/>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
<html>
做出来是这个样子，明天我再改改样子，今天先把功能大致做完
前端留言页面
<!DOCTYPE html>
<html>
<head>
<title>我的留言板</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″><!-- 声明网页使用的是UTF-8编码 -->
</head>
<body background="16.png";>
<div>
<table style="width: 80%;height:300px;margin: 0 auto;margin-top:5%;">
<tr>
<td align="center" >
<table align="center" style="width: 80%;height= 230px;">
<form method ="POST" action="insert.php" name="add"> <!--使用POST的方法提交title和留言，用的是之后要写的insert.php文件实现-->
<tr align="center">
<td colspan="3" style="font-size:60px;font-family:默陌狂飞侠客体">主题<!--设置了单元格横跨两列，规定了字体的大小为50像素-->
<input type="text" maxlength="20" name="title" placeholder="Title" style="text-align:center;border: 0;border-bottom: 2px solid #000; width:200px;font-size:20px;background: #ffffff00;color:#000;padding: 5px;"></td>
</tr>
<tr>
<td colspan="3" style="font-size:50px;font-family:默陌狂飞侠客体">内容</td>
</tr>
<tr>
<td><textarea class="form-control" align="center" name="content" rows="30" cols="40" style="width: 100%;height:300px;margin: 0 auto;background:#E0FFFF60;border-radius:30px;border:none;font-size: 30px"></textarea></td>
<!--这里有几个name注意一点和数据库当中的命名一一对应-->
</tr>
<tr align="center">
<td colspan="2"><!--要设置占用两个单元格才能整体居中-->
<input type="submit" value="发布" class="btn" style="background-image: linear-gradient(45deg, #8baaaa 0%, #ae8b9c 100%);color: #fff;width: 300px;height:50px;border-radius:30px;margin-top: 15px;font-size: 30px;border:none;font-family:默陌狂飞侠客体;cursor: pointer;margin-top: 30px;">
</td>
</tr>
<tr align="center">
<td colspan="2" >
<a href="index.php" <!--跳转登陆页面-->
<input type="button" value="注销" style="background-image: linear-gradient(45deg, #8baaaa 0%, #ae8b9c 100%);color: #ffffff;width: 200px;height: 30px;border-radius: 30px;margin-top: 15px;font-size: 18px;font-family:默陌狂飞侠客体;cursor: pointer;border:none;" class="btn"/>
</a>
</td>
</tr>
</table>
<hr class="hr_t" size=4 color="#999" style="border:1 solid #999;margin-top:3%;"/> <!--这是一条横线-->
</td>
</tr>
</form>
</table>
</div>
</body>
</html>
页面
后期还想在下面做一个可以原来浏览之前的留言
录入数据库
insert.php
<?php
header("Content - type:text/html;charset=ytf-8");//接收数据
$title = $_POST['title'];
$content = $_POST['content'];
$addtime = date("Y-m-d H:i:s");//年月日，时分秒
if ($title == '' || $content == '') {
//echo "标题或内容不能为空!";
echo "<script>alert('标题或内容不能为空!');
window.location.href='add.php';</script>";
exit;}
$conn = @mysql_connect("localhost","root","root");//连接数据库
mysql_select_db("message_board");//选择数据库
mysql_query("set names utf8");//设置utf8编码
include ".../public/congif.php"//后面要用的一个功能文档，放在了public当中
$sql = "insert into mes_info values('','{$title}','{$content}','{addtime}')";
$res = mysql_query($sql);
$row = mysql_num_rows($res);
if(!$res){
echo"<script>alter('添加失败!');
window.location.href='add.php';</script>";
}else{
echo"<script>alter('添加成功!');
window.location.href='index.php';</script>";
}
?>