实验2014052801:动态网页中的动态思想 - ORLAN

公告

实验2014052801:动态网页中的动态思想

目标:实现留言板功能

工具:

　　HTML+CSS:静态网站

　　JAVASCRIPT:前台脚本

　　PHP:后台脚本

　　MYSQL:数据储存

　　XAMPP:建立环境

实验1:网页规划

实验2:静态网页

　　1、HTML：添加控件，细分层次

　　index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=gb2312" />
        <script  type="text/javascript" src="./js/lyb.js"></script>
        <link rel=stylesheet type=text/css href=./css/lyb.css>
    </head>
    <body>
        <div>
            <div><h1>留言板</h1></div>
            <div>
                <div>
                    <div>
                        <div>
                        </div>
                        <div>
                        </div>
                        <br><br>
                        <br>
                        <div>
                        </div>
                    </div>
                    <br>
                    <br>
                </div>
                <div>
                    <div><a href="http://localhost/lyb/index.php?page=1">首页</a></div>
                </div>
            </div>
            <br>
            <div>
                <div>
                    <textarea cols=100% rows=4 id="content" value=""></textarea>
                </div>
                <div>
                    <div>
                        验证码：
                        <input type='text' value="" id='confirm'>
                    </div>
                    <div>
                        <img src="./src/img/0.jpg"  id='n1'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/1.jpg"  id='n2'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/2.jpg"  id='n3'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/3.jpg"  id='n4'>
                    </div>
                </div>
                <div>
                    <input type="submit" value="提交" >
                </div>
            </div>
        </div>
        
    </body>
    
</html>

　　2、CSS：层次格式设置

　　index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=gb2312" />
        <script  type="text/javascript" src="./js/lyb.js"></script>
        <link rel=stylesheet type=text/css href=./css/lyb.css>
    </head>
    <body>
        <div class=total>
            <div><h1>留言板</h1></div>
            <div class="d1">
                <div>
                    <div class="content">
                        <div class="floor">
                        </div>
                        <div class="time">
                        </div>
                        <br><br>
                        <br>
                        <div>
                        </div>
                    </div>
                    <br>
                    <br>
                </div>
                <div>
                    <div class=page2><a href="http://localhost/lyb/index.php?page=1">首页</a></div>
                </div>
            </div>
            <br>
            <div class="d2">
                <div>
                    <textarea cols=100% rows=4 id="content" value=""></textarea>
                </div>
                <div>
                    <div class="text_confirm">
                        验证码：
                        <input type='text' value="" id='confirm'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/0.jpg" class="image" id='n1'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/1.jpg" class="image" id='n2'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/2.jpg" class="image" id='n3'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/3.jpg" class="image" id='n4'>
                    </div>
                </div>
                <div class="submit">
                    <input type="submit" value="提交" >
                </div>
            </div>
        </div>
        
    </body>
    
</html>

　　lyb.css

html
    {
        background: #f7f7f7 url('image/bg.jpg');
        height: 100%;
    }
.total{
    width:80%;
    margin-left: auto;
    margin-right: auto;
}
.para{
    border-style: solid; 
    border-width: 1px;
}
.d1{
    padding:2em;
    background-color:white;
    -moz-transition: background-color .25s ease-in-out;
    -webkit-transition: background-color .25s ease-in-out;
    -o-transition: background-color .25s ease-in-out;
    -ms-transition: background-color .25s ease-in-out;
    transition: background-color .25s ease-in-out;
    text-decoration: none;
    border-radius: 20px;
    outline: 0;
}

.content
    {
        width:98%;
        position: relative;
        display: inline-block;
        #background: #0090c5;
        #color: #fff;
        text-decoration: none;
        #border-radius: 20px;
        border-bottom:black 1px solid;
        font-weight: 800;
        outline: 0;
        -moz-transition: background-color .25s ease-in-out;
        -webkit-transition: background-color .25s ease-in-out;
        -o-transition: background-color .25s ease-in-out;
        -ms-transition: background-color .25s ease-in-out;
        transition: background-color .25s ease-in-out;
        padding:1%;
    }
.time{
    text-align:right;
    width:20%;
    float:right;
}
.floor{
    width:20%;
    float:left;
}
.page{
    #width:20px;
    #float:left;
    #border:black 1px solid;
    #text-align:center;
    #margin-right:5px;

    background: none repeat scroll 0px 0px rgb(255, 255, 255);
    border: 1px solid rgb(231, 236, 240);
    color: rgb(0, 0, 205);
    float: left;
    height: 22px;
    line-height: 22px;
    margin-right: 5px;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    width: auto;
    padding: 0px 8px;

}
.page1{
    #width:20px;
    #float:left;
    #border:black 1px solid;
    #text-align:center;
    #margin-right:5px;

    background: none repeat scroll 0px 0px rgb(255, 255, 255);
    border: 1px solid rgb(231, 236, 240);
    color: rgb(0, 0, 205);
    float: left;
    height: 22px;
    line-height: 22px;
    margin-right: 5px;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    width: auto;
    padding: 0px 8px;

}
.page2{
    #width:20px;
    #float:left;
    #border:black 1px solid;
    #text-align:center;
    #margin-right:5px;

    background: none repeat scroll 0px 0px rgb(255, 255, 255);
    border: 1px solid rgb(231, 236, 240);
    color: rgb(0, 0, 205);
    float: left;
    height: 22px;
    line-height: 22px;
    margin-right: 5px;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    width: auto;
    padding: 0px 8px;

}
.img_confirm{
    width:auto;
    height:auto;
    float:left;
}
.text_confirm{
    float:left;
}
.submit{
    width:100%;
    float:left;
}
.image{
    height:30px;
}

　　3、JS：设置验证码,提交留言内容

　　index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=gb2312" />
        <script  type="text/javascript" src="./js/lyb.js"></script>
        <link rel=stylesheet type=text/css href=./css/lyb.css>
    </head>
    <body onload='init()'>
        <div class=total>
            <div><h1>留言板</h1></div>
            <div class="d1">
                <div>
                    <div class="content">
                        <div class="floor">
                        </div>
                        <div class="time">
                        </div>
                        <br><br>
                        <br>
                        <div>
                        </div>
                    </div>
                    <br>
                    <br>
                </div>
                <div>
                    <div class=page2><a href="http://localhost/lyb/index.php?page=1">首页</a></div>
                </div>
            </div>
            <br>
            <div class="d2">
                <div>
                    <textarea cols=100% rows=4 id="content" value=""></textarea>
                </div>
                <div>
                    <div class="text_confirm">
                        验证码：
                        <input type='text' value="" id='confirm'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/0.jpg" class="image" id='n1'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/1.jpg" class="image" id='n2'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/2.jpg" class="image" id='n3'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/3.jpg" class="image" id='n4'>
                    </div>
                </div>
                <div class="submit">
                    <input type="submit" value="提交" onclick="insert()">
                </div>
            </div>
        </div>
        
    </body>
    
</html>

　　lyb.js

var n1,n2,n3,n4,conf;
function init(){
    n1=Math.floor(Math.random()*(9+1));
    n2=Math.floor(Math.random()*(9+1));
    n3=Math.floor(Math.random()*(9+1));
    n4=Math.floor(Math.random()*(9+1));
    
    document.getElementById('n1').src='./src/img/'+n1+'.jpg';
    document.getElementById('n2').src='./src/img/'+n2+'.jpg';
    document.getElementById('n3').src='./src/img/'+n3+'.jpg';
    document.getElementById('n4').src='./src/img/'+n4+'.jpg';
    conf=n1.toString()+n2.toString()+n3.toString()+n4.toString();
    //console.log(conf);
}

function insert(){
    var content=document.getElementById("content").value;
    var nconf=document.getElementById("confirm").value;
    if(content==""){
        alert("留言内容不能为空！");
        return;
        }
    if(nconf!=conf){
        alert("验证码错误！");
        return ;
    }
    //console.log(content);
    var date=new Date();
    var now=date.toLocaleTimeString();
    //console.log(now);
    document.getElementById("content").value="";
    var month=date.getMonth()+1;
    now=date.getFullYear()+'.'+month+'.'+date.getDate()+' '+now;
    request(now,content);
}

var xmlhttpreq=new XMLHttpRequest();

function request(now,content){
    xmlhttpreq=new XMLHttpRequest();

    xmlhttpreq.onreadystatechange=updatePage;
    
    //console.log(content);
    //console.log(now);
    
    xmlhttpreq.open("GET","http://localhost/lyb/process.php?time="+now+"&text="+content,true);

    xmlhttpreq.send(null);
}

function updatePage() {
  if (xmlhttpreq.readyState == 4) {
    if(xmlhttpreq.status!=200){
        alert("An error occurred:"+xmlhttpreq.statusText);
        return ;
    }
    console.log(xmlhttpreq.responseText);
    location.reload(true);
  }
  
}

实验3：动态网页

　　1、PHP：读取留言内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=gb2312" />
        <script  type="text/javascript" src="./js/lyb.js"></script>
        <link rel=stylesheet type=text/css href=./css/lyb.css>
    </head>
    <body onload='init()'>
        <div class=total>
            <div><h1>留言板</h1></div>
            <div class="d1">
                <div>
                    <?php
                        $rec=0;
                        $page=$_GET['page'];
                        mysql_connect("localhost","root");
                        mysql_select_db('lyb');
                        $str="SELECT * FROM message";
                        $result=mysql_query($str);
                        if($tnum=mysql_num_rows($result)){
                            while($row=mysql_fetch_array($result)){
                                $rec=$rec+1;
                                if($rec<=10*($page-1))continue;
                                if($rec>10*$page)continue;
                    ?>
                    <div class="content">
                        <div class="floor">
                            <?php
                                echo $rec;
                                echo '楼';
                            ?>
                        </div>
                        <div class="time">
                            <?php 
                                echo $row['time'];
                            ?>
                        </div>
                        <br><br>
                        <br>
                        <div>
                            <?php
                                echo $row['content'];
                            ?>
                        </div>
                    </div>
                    <br>
                    <br>
                    <?php
                            }
                        }
                    ?>
                </div>
                <div>
                    <div class=page2><a href="http://localhost/lyb/index.php?page=1">首页</a></div>
                    <?php
                        echo sprintf('<div class=page1><a href="http://localhost/lyb/index.php?page=%d">前一页</a></div>',$page>1?$page-1:$page);
                        $lim=$page-1+5;
                        for($i=$page-1-4;$i<$tnum/10&&$i<=$lim;$i++){
                            if($i<0){$lim++;continue;}
                            echo sprintf('<div class=page><a href="http://localhost/lyb/index.php?page=%d">%d</a></div>',($i+1),($i+1));
                        }
                        echo sprintf('<div class=page1><a href="http://localhost/lyb/index.php?page=%d">后一页</a></div>',$page<$i?$page+1:$page);
                        echo sprintf('<div class=page2><a href="http://localhost/lyb/index.php?page=%d">尾页</a></div>',$i);
                        mysql_close();
                    ?>
                </div>
            </div>
            <br>
            <div class="d2">
                <div>
                    <textarea cols=100% rows=4 id="content" value=""></textarea>
                </div>
                <div>
                    <div class="text_confirm">
                        验证码：
                        <input type='text' value="" id='confirm'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/0.jpg" class="image" id='n1'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/1.jpg" class="image" id='n2'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/2.jpg" class="image" id='n3'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/3.jpg" class="image" id='n4'>
                    </div>
                </div>
                <div class="submit">
                    <input type="submit" value="提交" onclick="insert()">
                </div>
            </div>
        </div>
        
    </body>
    
</html>

　　2、PHP：保存留言内容

<html>
    <head>
        <meta   http-equiv="content-type"   content="text/html;   charset=gb2312">
    </head>
    <body>
        <?php
            $text=$_GET['text'];
            $time=$_GET['time'];
            mysql_connect("localhost","root");
            mysql_select_db('lyb');
            $str=sprintf('INSERT INTO message VALUES(\'%s\',\'%s\')',$time,$text);
            $str = iconv("UTF-8", "GB2312", $str);
            echo $str;
            mysql_query($str);
            //$str="ALTER TABLE `message` ORDER BY `time` DESC";
            //mysql_query($str);
            mysql_close();
        ?>
    </body>
</html>

总结：

　　动态网页中的动态，在于可以根据数据库中的数据改变网页内容。当浏览器发送请求后，服务器运行后台脚本代码改变网页代码，并把改变后的代码发送回浏览器。浏览器无法看见后台脚本。

posted on 2014-05-28 17:27 ORLAN 阅读(197) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部