HTML、CSS、JS、PHP组合

原创 于 2021-03-01 21:35:29 发布 · 1.1k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#安全

本文介绍了一个简单的留言板系统的搭建过程，包括数据库初始化、用户注册与登录、留言功能实现等关键步骤。

在进行实践的时候遇到很多细节问题，最主要的是那些函数单词以及标点的问题。还要注意括号的成对出现，这个在进行检查改错的时候花了不少时间！

一、进行数据库的初始化

<?php 

header("Constant-Type:text/html;charset = utf-8");

$host = "localhost";
$user = "root";
$userpw = "root";
$dbname = "liuyanban";

//判断数据库连接
if (!mysqli_connect($host,$user, $userpw)) {
	exit("数据库连接失败！");
}

$link = mysqli_connect($host,$user, $userpw);

//若数据库存在，删除
$drop_db = "drop database if exists $dbname";
if (!mysqli_query($link ,$drop_db)) {
	exit("初始化失败！");
}

//创建数据库
$create_db = "CREATE DATABASE $dbname ";

if (!mysqli_query ($link ,$create_db)) {
	exit("创建数据库失败！");
}
 
 //选择数据库
if (!mysqli_select_db($link,$dbname)) {
	exit("选择失败！");
}


//创建user表
$create_user = " CREATE TABLE yh (
id int not null primary key AUTO_INCREMENT,
username  varchar(20) not null ,
password  varchar(20) not null ,
tel      varchar(20) not null ,
data     varchar(10) not null
) ";
if (!mysqli_query($link ,$create_user)){
	exit("创建user表失败！");
}




//创建信息表
$sql_message = "CREATE TABLE message(
 id int not null primary key AUTO_INCREMENT,
 username varchar(20) not null,
 title text not null ,
 ip text not null ,
 content text not null ,
 time datetime not null 
) ";

if (!mysqli_query($link ,$sql_message)){
	exit("信息表失败！");
}


 ?>

二、进行注册界面的制作（没有添加CSS）

<!DOCTYPE html>
<html>
<head>
	<title>注册界面</title>
	<meta charset="utf-8">

</head>
<body>


<div >
    <h3>注册新用户 
    	<div >我有账号，去<a href="../register/register.html">登录</a></div>
	</h3>

   <div>

      <form action="login.php" method="post">

       <table align="center" >

             <tr>
                <td align="center" ><b>用户名</b></td>
                <td><input type="text" name="username" placeholder="请输入用户名">  </td>
             </tr>

             
             <tr>
                <td align="center" ><b>密 码</b></td>
                <td><input type="text" name="userpwdone" placeholder="请输入密码">  </td>
             </tr>


              <tr>
                <td align="center" ><b>确认密码</b></td>
                <td><input type="text" name="userpwdtwo" placeholder="请确认密码">  </td>
             </tr>
  
              <tr>
                <td align="center" ><b>联系方式</b></td>
                <td><input type="text" name="tel" placeholder="请输入联系方式">  </td>
             </tr>
 
              <tr>
                <td align="center" ><b>生 日</b></td>
                <td><input type="date">  </td>
             </tr>
           

              <tr>
                  <td colspan="2" align="center">
                  <input type="reset" value="重置">  
                  <input type="submit" name="register" value="注册">
                  </td>
              </tr>

       </table>  

            <ul>
              <li align="center" >
              <input type="checkbox" name="xz">同意协议并注册<a href="#" class="w">《知晓用户协议》</a>
              </li>
            </ul>


            
    </form>
  </div>
</div>

</body>
</html>

三、进行注册界面的PHP操作

<?php 

header("Constant-Type:text/html;charset = utf-8");

if(isset($_POST["register"]) && $_POST["register"] == "注册"){

   $username = $_POST["username"];
   $passwordone = $_POST["userpwdone"];
   $passwordtwo = $_POST["userpwdtwo"];
   $tel =  $_POST["tel"];

   //判断帐户与密码是否为空
     if ($username =="" || $passwordone == "" || $passwordtwo == "" || $tel == "") {

         echo "<script>alter('确认完整性！');history.go(-1);</script>";
      }

     else{
    
          if($passwordone == $passwordtwo) {

          	  $conn = mysqli_connect("localhost","root","root","liuyanban");
    	
    	         //连接数据库发生错误
    	         if (mysqli_error($conn)) {
    		          echo mysqli_error($conn);
    		          exit;
    	          }
    	
    	         //判断数据库表中的用户是否有相同的记录
    	         $sql = "select username from yh where username =  '$username' ";
    	


               $result = mysqli_query($conn,$sql);
               $num = mysqli_num_rows($result);
      
               if ($num) {
       	               echo "<script>alert('用户存在');history.go(1);</script>";
                     }
               else {

       	          $sql_insert = "insert into yh(username,password,tel) values('$username','$passwordone','$tel')";
                  $res_insert = mysqli_query($conn,$sql_insert);
        
                  if ($res_insert) {
        	                           echo "<script>alert('注入成功');history.go(1);</script>";
                                  }
                  else{
        	              echo "<script>alert('注入失败');history.go(-1);</script>";
                     }
                }
            }
         else{
           	echo "<script>alert('密码不一致！');history.go(-1);</script>";
        }

   }
} 
else{
   	echo "<script>alert('提交未成功');history.go(-1);</script>";
   }
 
echo "<script>window.location.href = '../register/register.html' </script>";

四、制作登录界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        
        body{
            background-image: url('image/star.jpg');
            background-size: 100% 100%;
        }
        form{
        	border-radius:10px;
            margin:200px auto;
            padding:20px;
            width:400px;
            background:#fff;
            text-align:center;
        }
        form h2{
            margin-bottom:20px;
        }
        form input{
        	border:none;
            border:1px solid #444;
            border-radius:5px;
            margin:15px 0;
            padding-left:10px;
            width:100%;
            height:50px;
            font-size:18px;
        }
        form .submit{
        	border:none;
            padding:0;
            background:#20a53a;
            color:#fff;
        }

       
      a:link,a:visited{
           
            border:none;
            padding:0;
            background:red;
            color: #fff;
             
           }
      a:hover,a:active{background-color:#C0C0C0;}


    </style>
</head>
<body>
    <form action="./register.php" method="post">
        <h2>登录</h2>
        <input type="text" placeholder="请输入用户名" name="username">
        <input type="password" placeholder="请输入密码" name="password">
       
         <div align="center">
           <input type="submit" value="登录">
           <input type="submit" name="submit">
         </div><br>

    </form>
</body>
</html>

五、进行登陆界面的PHP操作

<?php 

header("Constant-Type:text/html;charset = utf-8");

if(isset($_POST["submit"])){
  
   $user = $_POST["username"];
   $pwd = $_POST["password"];


   if($user == "  "  || $pwd  == " " ){
	    echo "<script>alter('请输入用户或密码');history.go(-1);</script>";
	}

    else{

          $conn = mysqli_connect("localhost","root","root","liuyanban");

          if (mysqli_error($conn)) {
  	         echo "连接失败！".mysqli_error($conn);
  	         exit;
            }

          $sql = "select username,password from yh where username = '$user' and password = '$pwd'";

          $result =  mysqli_query($conn,$sql);
          //print_r($result);

          
          $num  = mysqli_num_rows($result);

         if(!($num !=1)){
  	         echo "<script>alert('登录成功');window.location.href = '../liuyanban/message.html';</script>";

         }else {
  	       echo  "<script>alert('用户名或密码错误');history.go(-1);</script>";
          }
    }

}else{
	echo "<script>alter('提交失败');</script>";
}

?>

六、进行留言板的界面制作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的留言板.添加留言</title>
    <link rel="stylesheet" type="text/css" href="message.css">
</head>

<body style="background-size:cover;">
    <center>
        <h2>我的留言板</h2>
        <input type="button" value="添加留言" onclick="location.href='message.html'" class="button" />
        <input type="button" value="查看留言" onclick="location.href='select.php'" class="button" />
        <input type="button" value="退出登陆" onclick="location.href='../login/logo.php'" class="button" />
        <hr width="70%">
    </center>
    <div class="k1">
        <form action="add.php" method="post">
            <h1>添加一个留言
                <span>今天你有什么新鲜事要分享</span>
            </h1>
            <label>
                <span>你的名字 :</span>
                <input type="text" name="user" placeholder="Your Name" />
            </label>
            <label>
                <span>留言标题 :</span>
                <input type="text" name="title" placeholder="Please input title" />
            </label>
            <label>
                <span>留言内容 :</span>
                <textarea name="content" placeholder="Your Message to Us"></textarea>
            </label>
            <div style="margin-left:125px">
                <input type="submit" value="提交" class="submit">
                <input type="reset" value="重置" class="reset">
            </div>
    </div>
    </form>

</body>

</html>

七、进行留言板的CSS操作

div.k1 {
	margin-top:55px;
    margin-left:auto;
    margin-right:auto;
    max-width: 500px;
    background: #D2E9FF;
    padding: 20px 20px 20px 20px;
    color: #666;
}
h1 {
    font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding: 10px 10px 10px 20px;
    display: block;
    background: #C0E1FF;
    border-bottom: 1px solid #B8DDFF;
    margin: -20px -20px 15px;
    }
h1>span {
    display: block;
    font-size: 14px;
}
label {
    display: block;
    margin: 0px 0px 5px;
}
label>span {
    float: left;
    width: 22%;
    text-align: right;
    padding-right: 15px;
    margin-top: 10px;
    font-weight: bold;
}
input[type="text"],textarea,select {
    color: #888;
    width: 70%;
    padding: 0px 0px 0px 5px;
    border: 1px solid #C5E2FF;
    background: #FBFBFB;
    outline: 0;
    -webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
    box-shadow: inset 0px 1px 6px #ECF3F5;
    font: 200 12px/25px "Trebuchet MS", Arial, Helvetica, sans-serif;
    height: 30px;
    line-height:15px;
    margin: 2px 6px 16px 0px;
}
textarea{
    height:100px;
    padding: 5px 0px 0px 5px;
    width: 70%;
}
.button,.reset,.submit,.button1{
    padding: 10px 30px 10px 30px;
    background: #66C1E4;
    border: none;
    color: #FFF;
    box-shadow: 1px 1px 1px #4C6E91;
    -webkit-box-shadow: 1px 1px 1px #4C6E91;
    -moz-box-shadow: 1px 1px 1px #4C6E91;
    text-shadow: 1px 1px 1px #5079A3;
}
.button:hover,.reset:hover,.submit:hover,.button1:hover{
    background: #9AFF02;
}
.wrapper {
    width: 600px;
    margin: 0 auto;
}
.ds-post-main {
    position: relative;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.ds-comment-body {
    z-index: 1;
    position: relative;
    left: 0;
    background: #F0F0E3;
    padding: 15px 15px 15px 30px;
    color: #696A52;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.75) inset;
}
.ds-comment-body {
    color: #696A52;
}
.ds-avatar {
    z-index: 2;
    position: absolute;
    top: 48px;
    left: -20px;
    padding: 5px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: -1px 0 1px rgba(0,0,0,.15) inset;
}
.ds-avatar a {
    display: block;
    padding: 1px;
    width: 32px;
    height: 32px;
    border: 1px solid #B9BAA6;
    border-radius: 50%;
    background-color: #fff;
    -moz-transition: color 0.15s linear;
    -webkit-transition: color 0.15s linear;
    transition: color 0.15s linear;
}
a {
    text-decoration: none;
}

八、进行留言板的添加

<?php 
header('Content-type:text/html; charset=UTF8');

$user = $_POST["user"];
$title = $_POST["title"];
$content = $_POST["content"];

$ip = $_SERVER["REMOTE_ADDR"];

require_once "config.php";
require_once "sql_config.php";


$mal = new DB();

$link = $mal->connect();

$sql = "insert into message(username ,title , ip , content ,time ) values('$user','$title','$ip','$content',now())";

if ($user == "" || $title == "" || $content == "") {

	echo  "<script>alert('你输入的信息不全！');location='message.html';</script>";
  }else{
   	$res = $mal->insert($link,$sql);

     }

 ?>

九、进行留言板的删除操作

<?php 
header('Content-type:text/html; charset=utf8');

require_once "config.php";
require_once "sql_config.php";

$mal = new DB();

$link = $mal->connect();

$id = $_GET['id'];

if ($link) {
	$sql = "delete from message where id = $id ";
	$que = mysqli_query($link,$sql);

	  if ($que){

	  	echo "<script>alert('删除成功，返回首页');location = 'select.php';</script>";

	  }else{
	     echo "<script>alert('删除失败');location = 'select.php'</script>";
	     exit;

	  }
}

 ?>

十、进行留言板的配置

<?php 

define('DB_HOST', 'localhost');

define('DB_USER','root');

define('DB_PWD','root');

define('DB_CHARSET', 'UTF8');

define('DB_DBNAME','liuyanban');




 ?>

<?php 
header('Content-type:text/html; charset=utf8');
include("config.php");

class DB{

 function connect(){
    $link =  mysqli_connect(DB_HOST,DB_USER,DB_PWD);
    mysqli_set_charset($link,DB_CHARSET);
    mysqli_select_db($link,DB_DBNAME) or die('打开数据库失败');

    if (mysqli_connect_error()) {

    	die('数据库连接失败：'.mysqli_connect_error());
    }
       
       return $link;

 }
 
  function insert($link,$sql)
  {
     if (mysqli_query($link,$sql)) {
     	echo  "<script language = 'javascript'>alert('留言成功！');location = 'select.php';</script>";
     }
     else{
     	echo "Error insert data:".$link->error;
     }

  }


}

 ?>

进行留言板的选择

<!DOCTYPE html>
<html lang="en">
<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="message.css">
</head>
<body>
   <center>
   	  <h2>我的留言板</h2>

   	  <input type="button" value="添加留言" onclick="location.href = 'message.html' " class="button" />
      <input type="button" value="查看留言" onclick="location.href = 'select.php'" class ="button" />
      <input type="button" value="退出登陆" onclick="location.href = '../register/register.php'logout()" class ="button" />

     <hr width = "%70">

     <?php 

       $con = mysqli_connect("localhost" , "root" , "root" , "liuyanban");
       if (!$con ) {

       	die("数据库连接失败：" .mysqli_connect_error());
       }
       mysqli_query($con ,"set names 'utf8'");

       $query_sql = "select * from message";
       $result = mysqli_query($con ,$query_sql);
       echo "<div style = 'margin-top:55px'>";

      while ($res = mysqli_fetch_array($result)) {
         echo "<div class ='k' >";
         echo "<div class ='ds-post-main'>";
         echo "<div class = 'ds-comment-body'>
               <span>{$res['username']}&nbsp&nbsp于&nbsp&nbsp{$res['time']}给我留言</span>
               <span style = 'float:right'><a href = 'delete.php?id=".$res['id']."'>
               <input type ='submit' class ='button1' value  ='删除'></input></a></span>
               <p><span>留言主题:{$res['title']}&nbsp&nbsp留言地址：{$res['ip']}</span><p>

               <hr width =450px>
               <p>{$res['content']}</p></div><br>";

          echo "</div>";
          echo "</div>";

     
      }  
      echo "</div>";
 ?>

    </center>


</body>
</html>
Hero.Youth
关注
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值