0619PHP练习:简单留言板

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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()">&nbsp;&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;&nbsp;</button>
            <button class="btn">&nbsp;&nbsp;复&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位&nbsp;&nbsp;</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">&times;</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>&nbsp;&nbsp;&nbsp;第 <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;
    }
?>

处理页面===============================================================================================================================

以上是关于0619PHP练习:简单留言板的主要内容,如果未能解决你的问题,请参考以下文章

PHP---练习-----留言板

PHP初级练习实战之公司留言板(原生)

11月8日PHP练习《留言板》

php 练习题-留言板

PHP留言小练习

php 关联数据库的留言板练习