0619PHP练习：简单留言板
登陆页面=============================================================================================================================
<!DOCTYPE html>
<html lang=”zh”>
<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 rel=”stylesheet” type=”text/css” href=”public/bootstrap.min.css”/>
<script src=”public/jquery-3.3.1.min.js” type=”text/javascript” charset=”utf-8″></script>
<script src=”public/bootstrap.min.js” type=”text/javascript” charset=”utf-8″></script>
<style type=”text/css”>
*{
margin: 0px auto;
padding: 0px;
}
.box{
width: 500px;
height: 350px;
border: 1px solid gray;
border-radius: 5px;
margin-top: 100px;
}
.box_title{
width: 100%;
height: 50px;
font-size: 28px;
text-align: center;
margin-top: 20px;
}
.box_id{
margin-left: 100px;
margin-top: 20px;
}
.form-control{
width: 300px;
margin-bottom: 20px;
}
.box_but{
width: 200px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class=”box”>
<div class=”box_title”>开发部内部留言板</div>
<div class=”box_id”>
<label>账号:</label>
<input type=”text” class=”form-control” placeholder=”请输入账号” id=”nid”>
<label>密码:</label>
<input type=”password” class=”form-control” placeholder=”请输入密码” id=”npa”>
</div>
<div class=”box_but”>
<button class=”btn” onclick=”denglu()”> 登 录 </button>
<button class=”btn”> 复 位 </button>
</div>
</div>
</body>
</html>
<script type=”text/javascript”>
/*登陆======================================================================*/
function denglu(){
var nid = document.getElementById(“nid”).value;
var npa = document.getElementById(“npa”).value;
$.ajax({
type:”post”,
url:”dlcl.php”,
async:true,
data:{
typ:”denglu”,
nid:nid,
npa:npa
},
dataType:”text”,
success:function(dl){
if(dl == “yes”){
window.location.href = “zhuye.php”;
}else if(dl == “no”){
alert(“密码错误，请重新输入！”);
}else if(dl == “ik”){
alert(“请输入账号！”);
}else if(dl == “mk”){
alert(“请输入密码！”);
}
}
});
}
/*登陆======================================================================*/
</script>
登陆页面=============================================================================================================================
主页面===============================================================================================================================
<?php
session_start();
if(empty($_SESSION[‘bsa’])){
header(‘Location:denglu.php’);
die;
}
?>
<!DOCTYPE html>
<html lang=”zh”>
<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 rel=”stylesheet” type=”text/css” href=”public/bootstrap.min.css”/>
<script src=”public/jquery-3.3.1.min.js” type=”text/javascript” charset=”utf-8″></script>
<script src=”public/bootstrap.min.js” type=”text/javascript” charset=”utf-8″></script>
<style type=”text/css”>
*{
margin: 0px auto;
padding: 0px;
}
body{
-moz-user-select: none;
}
.title{
width: 1260px;
}
.title_box{
height: 60px;
font-size: 28px;
text-align: left;
line-height: 60px;
margin-left: 20px;
}
.nav{
width: 1260px;
border: 1px solid gray;
border-radius: 5px 5px 0px 0px;
}
.nav_box{
width: 500px;
height: 50px;
margin-left: 20px;
}
.nav_but{
width: 100px;
height: 30px;
margin-top: 10px;
float: left;
line-height: 27px;
text-align: center;
margin-left: 51px;
margin-right: 80px;
border: 1px solid gray;
border-radius: 5px;
}
.nav_but:hover{
cursor: pointer;
}
.nav_text{
height: 30px;
margin-top: 10px;
float: left;
line-height: 30px;
}
.room{
width: 1260px;
height: 500px;
border: 1px solid gray;
border-radius: 0px 0px 5px 5px;
}
.room_boxa{
width: 200px;
height: 450px;
margin-top: 20px;
margin-left: 20px;
float: left;
border: 1px solid gray;
border-radius: 5px;
}
.room_but{
width: 100px;
height: 30px;
margin-top: 20px;
line-height: 27px;
text-align: center;
border: 1px solid gray;
border-radius: 5px;
}
.room_but:hover{
cursor: pointer;
}
.room_boxb{
width: 1000px;
height: 450px;
margin-top: 20px;
margin-left: 20px;
float: left;
border: 1px solid gray;
border-radius: 5px;
}
#fybut{
font-size: 18px;
text-align: center;
}
.fysp{
cursor: pointer;
}
.room_room{
height: 393px;
border-bottom: 1px solid #DEE2E6;
}
.neirong{
width: 175px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.xiangqing:hover{
cursor: pointer;
}
.room_boxc{
width: 998px;
height: 450px;
margin: 20px;
float: left;
display: none;
border: 1px solid gray;
border-radius: 5px;
}
.boxc_title{
width: 150px;
float: left;
border-right: 1px solid #DEE2E6;
}
.boxc_count{
width: 846px;
float: left;
}
.nrxq{
height: 300px;
}
.fanyebox{
margin-top: 15px;
}
</style>
</head>
<body>
<div class=”title”>
<div class=”title_box”>
开发部内部留言板
</div>
</div>
<div class=”nav”>
<div class=”nav_box”>
<div class=”nav_but” onclick=”zhuxiao()”>退出系统</div>
<div class=”nav_text”><span style=”color: red;”><?php echo $_SESSION[‘bsa’];?></span> 欢迎您登陆本系统</div>
</div>
</div>
<div class=”room”>
<div class=”room_boxa”>
<div class=”room_but” data-toggle=”modal” data-target=”#myModal”>发布信息</div>
<div class=”room_but” onclick=”ckxx()”>所有信息</div>
</div>
<div class=”room_boxb”>
<div class=”room_room”>
<table class=”room_count table”>
</table>
</div>
<table class=”fanyebox”>
<tr>
<td id = ‘fybut’></td>
</tr>
</table>
</div>
<div class=”room_boxc”>
<table class=”boxc_title table”>
<tr><td>发送人</td></tr>
<tr><td>接收人</td></tr>
<tr><td>发送时间</td></tr>
<tr style=”height: 300px;”><td>内容</td></tr>
</table>
<table class=”boxc_count table”>
</table>
</div>
</div>
<!– 模态框 –>
<div class=”modal fade” id=”myModal”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<!– 模态框头部 –>
<div class=”modal-header” style=”width: 420px;”>
<h4 class=”modal-title”>发布信息</h4>
<button type=”button” class=”close” data-dismiss=”modal”>×</button>
</div>
<!– 模态框主体 –>
<div class=”modal-body” style=”width: 420px;”>
<label>接收人:</label>
<input class=”form-control upd” id = “addid”>
<label>内容:</label>
<textarea class=”form-control upd” rows=”10″ id = “addtext”></textarea>
</div>
<!– 模态框底部 –>
<div class=”modal-footer” style=”width: 420px;”>
<button type=”button” class=”btn btn-secondary” data-dismiss=”modal” onclick=”fabu()”>提交</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script type=”text/javascript”>
var fybut = 0;
var fb = 0;
var fbz = 0;
chaxun();
function chaxun(){
var xianshi = “7”;
$.ajax({
type:”post”,
url:”dlcl.php”,
async:true,
data:{
typ:”chaxun”,
xianshi:xianshi,
fybut:fybut
},
dataType:”json”,
success:function(x){
var str = “<tr><td><div>时间</div></td><td><div>发送人</div></td><td><div>接收人</div></td><td><div>内容</div></td><td><div>查看状态</div></td></tr>”;
for (var i =0;i < x.length;i++) {
str += “<tr>”
for (var j = 0; j < x[i].length;j++) {
if(x[i][j] == “”){
x[i][j] = “所有人”;
}else if(x[i][j] == “0”){
x[i][j] = “未查看”;
}else if(x[i][j] == “1”){
x[i][j] = “已查看”;
}
if(j == 0){
}else if(j == 4){
str += “<td class = ‘xiangqing’ onclick = ‘xiangqing(\””+x[i][0]+”\”)’><div class = ‘neirong’>” + x[i][j] + “</div></td>”;
}else{
str += “<td><div class = ‘neirong’>” + x[i][j] + “</div></td>”;
}
}
str += “</tr>”
}
document.getElementsByClassName(“room_count”)[0].innerHTML = str;
}
});
$.ajax({
type:”post”,
url:”dlcl.php”,
async:true,
data:{
typ:”fybut”
},
dataType:”json”,
success:function(x){
var attrbut = “”;
for (var i = 0;i < x.length/xianshi;i++) {
if(i == fb){
attrbut += “<span class = ‘fysp’ onclick = ‘fenyea(\””+i+”\”)’>上一页 </span><span>” + (i+1) + ” / ” + Math.ceil(x.length/xianshi) + “</span><span class = ‘fysp’ onclick = ‘fenyeb(\””+i+”\”)’> 下一页 </span> 第 <input class = ‘fyroom’ type = ‘text’ style = ‘width:20px;height:20px’></input> 页 <span class = ‘fysp’ onclick = ‘fenyec()’>跳转 </span>”;
}
fbz = Math.ceil(x.length/xianshi);
}
document.getElementById(“fybut”).innerHTML = attrbut;
}
});
}
function fenyea(){
fb -= 1;
if(fb < 0){
fb = 0;
}
fybut -= 1;
if(fybut < 0){
fybut = 0;
}
chaxun();
}
function fenyeb(){
fb += 1;
if(fb > fbz-1){
fb = fbz-1;
}
console.log(fb)
fybut += 1;
if(fybut > fbz-1){
fybut = fbz-1;
}
chaxun();
}
function fenyec(){
fb = document.getElementsByClassName(“fyroom”)[0].value-1;
if(fb > fbz-1){
fb = fbz-1;
}else if(fb < 0){
fb = 0;
}
fybut = document.getElementsByClassName(“fyroom”)[0].value-1;
if(fybut > fbz-1){
fybut = fbz-1;
}else if(fybut < 0){
fybut = 0;
}
chaxun();
}
function zhuxiao(){
$.ajax({
type:”post”,
url:”dlcl.php”,
async:true,
data:{
typ:”zhuxiao”
},
dataType:”text”,
success:function(x){
window.location.href = “denglu.php”;
}
});
}
function fabu(){
var addid = document.getElementById(“addid”).value;
var addtext = document.getElementById(“addtext”).value;
$.ajax({
type:”post”,
url:”dlcl.php”,
async:true,
data:{
typ:”fabu”,
addid:addid,
addtext:addtext
},
dataType:”text”,
success:function(x){
}
});
chaxun();
}
function xiangqing(ids){
document.getElementsByClassName(“room_boxb”)[0].style = “display:none”;
document.getElementsByClassName(“room_boxc”)[0].style = “display:block”;
$.ajax({
type:”post”,
url:”dlcl.php”,
async:true,
data:{
typ:”ckzt”,
ids:ids
},
dataType:”text”,
success:function(x){
}
});
$.ajax({
type:”post”,
url:”dlcl.php”,
async:true,
data:{
typ:”ckxq”,
ids:ids
},
dataType:”json”,
success:function(x){
var str = “”;
for (var i = 0;i < x[0].length;i++) {
if(x[0][i] == “”){
x[0][i] = “所有人”
}
if(i == 0){
}else if(i == 5){
}else if(i == 4){
str += “<tr class = ‘nrxq’><td>”+x[0][i]+”</td></tr>”;
}else{
str += “<tr><td>”+x[0][i]+”</td></tr>”;
}
}
document.getElementsByClassName(“boxc_count”)[0].innerHTML = str;
}
});
}
function ckxx(){
document.getElementsByClassName(“room_boxb”)[0].style = “display:block”;
document.getElementsByClassName(“room_boxc”)[0].style = “display:none”;
chaxun();
}
</script>
主页面===============================================================================================================================
处理页面===============================================================================================================================
<?php
session_start();
$conn = new mysqli(“localhost”,”root”,””,”ceshi”);
$conn->connect_error?die(“登陆失败”):””;
$typ = $_POST[‘typ’];
switch($typ){
case “denglu”:
$nid = empty($_POST[‘nid’])?”kong”:$_POST[‘nid’];
$npa = empty($_POST[‘npa’])?”kong”:$_POST[‘npa’];
if($nid == “kong”){
echo “ik”;
}else if($npa == “kong”){
echo “mk”;
}else{
$sqllan = “select password from yuangong where username = ‘{$nid}'”;
$doit = $conn->query($sqllan);
$arr = $doit->fetch_row()[0];
if($arr == $npa){
echo “yes”;
}else{
echo “no”;
}
$sqllana = “select name from yuangong where username = ‘{$nid}'”;
$doita = $conn->query($sqllana);
$arra = $doita->fetch_row()[0];
$_SESSION[‘bsa’] = “{$arra}”;
}
break;
case “zhuxiao”:
session_destroy();
break;
case “chaxun”:
$bsa = $_SESSION[‘bsa’];
$xianshi = $_POST[‘xianshi’];
$fybut = $_POST[‘fybut’];
$fybut = ($fybut)*6;
if($bsa == “管理员”){
$sqllan = “select ids,times,sender,recever,comment,states from liuyan order by times desc limit {$fybut},{$xianshi}”;
}else{
$sqllan = “select ids,times,sender,recever,comment,states from liuyan where recever = ‘{$bsa}’ or recever = ” order by times desc limit {$fybut},{$xianshi}”;
}
$doit = $conn->query($sqllan);
$arr = $doit->fetch_all();
echo json_encode($arr);
break;
case “fabu”:
$addid = $_POST[‘addid’];
$addtext = $_POST[‘addtext’];
$times = date(“Y-m-d H:i:s”);
$addname = $_SESSION[‘bsa’];
$sqllan = “insert into liuyan values(”,'{$addname}’,'{$addid}’,'{$times}’,'{$addtext}’,”)”;
$doit = $conn->query($sqllan);
break;
case “fybut”:
$bsa = $_SESSION[‘bsa’];
if($bsa == “管理员”){
$sqllan = “select * from liuyan”;
}else{
$sqllan = “select * from liuyan where recever = ‘{$bsa}’ or recever = ””;
}
$doit = $conn->query($sqllan);
$arr = $doit->fetch_all();
echo json_encode($arr);
break;
case “ckzt”:
$ids = $_POST[‘ids’];
$sqllan = “update liuyan set states = 1 where ids = ‘{$ids}'”;
$doit = $conn->query($sqllan);
break;
case “ckxq”:
$ids = $_POST[‘ids’];
$sqllan = “select * from liuyan where ids = ‘{$ids}'”;
$doit = $conn->query($sqllan);
$arr = $doit->fetch_all();
echo json_encode($arr);
break;
}
?>
处理页面===============================================================================================================================