學了一段時間的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>";
}
?>