PHP+MySQL實現留言板功能

學了一段時間的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 = utf8mysql_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寫出來的,還有幾點溫馨提示

  1. HTML當中有一些屬性是不建議使用的,這些最好用樣式代替,如:使用style="width: 30px;height: 50px"代替width= 30px;height= 50px
  2. 漸變是在這個網站找的WebGradients,免費,無需下載,樣式多;
  3. 如果使用CSS的編譯器其實不用寫的這麼難看,但我是記事本沒辦法
  4. 代碼中包含了兩個我還沒有寫的代碼文件名,用來實現登錄和註冊

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>";
}
?>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章