Exp8:Web基础

一、实验要求

  1.Web前端HTML

      能正常安装、启停Apache。理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML。

  2.Web前端javascipt

    理解JavaScript的基本功能,理解DOM。编写JavaScript验证用户名、密码的规则。

  3.Web后端:MySQL基础:正常安装、启动MySQL,建库、创建用户、修改密码、建表

  4.Web后端:编写PHP网页,连接数据库,进行用户认证

  5.最简单的SQL注入,XSS攻击测试

二、实验步骤

  一)、Web前端HTML

    1、卡里默认安装好了apache,我们直接启动服务即可 service apache2 start 没有提示就说明正常,然后在浏览器输入127.0.0.1,能打开默认网页说明服务没问题

    

    

    2、 cd /var/www/html 进入apache目录下, vim simple_form.html 创建并编写一个含有简单表单的html文件,内容如下:

<html> 
      <head> 
             <title>Login</title>
             <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      </head> 
            <body>      
             <h2 align="center">Login</h2>   
             <center>  
                     <form action="login" method="post">
                           <input placeholder="E-mail" name="Name" class="user" type="email"> 
                           <br>                           </br>
                           <input  placeholder="Password" name="Password" class="pass" type="password">
                           <br>                           </br>
                           <input type="submit" value="Login">
                     </form>
             </center>
      </body>
</html>

    3、在浏览器中输入/var/www/html/simple_form.html 打开该网页

    

  二)、Web前端javascript

    1、在前面的代码基础上加上一段javascript代码来判断用户和密码是否填写,代码入下login_test.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>login</title>
<script type="text/javascript">
    function resetValue(){
        document.getElementById("username").value="";
        document.getElementById("password").value="";
    }
</script>

</head>
<body>
    <div align="center" style="padding-top: 50px;">
        <form action="login5127.php" method="GET" name="login" >
        <table  width="740" height="300"  >

                <td colspan="2"></td>
            </tr>
            <tr height="1">
                <td width="40%"></td>
                <td width="5%">username:</td>
                <td><input type="text" value="input your name" name="username" id="username"/></td>
                <td width="30%"></td>
            </tr>
            <tr height="1">
                <td width="40%"></td>
                <td width="5%">password:</td>
                <td><input type="password" value="" name="password" id="password"/></td>
                <td width="30%"></td>
            </tr>
            <tr height="1">
                <td width="40%"></td>
                <td width="5%"><input type="submit" name="login" value="登录"onClick="return Login()" /></td>
                <td align="center"><td align="center"><input type="button" name="close" value="关闭" οnclick="window.close();" /></td></td>
                <td width="30%"></td>
            </tr>
            
            
        </table>
        </form>
    </div>
    <script language="javascript">
    function Login(){
        var Name = document.login.username.value ;
        var Pwd = document.login.password.value ;
        if ((Name =="") ){
            alert("user name is NULL!");
            return false ;
        }
       if ((Pwd=="")){
            alert("password is NULL!");
            return false ;
        }
    }
</script>
</body>
</html>

    2、浏览器访问/var/www/html/login_test.html ,测试没有填写用户名或者密码时登录会怎样提示

    

  三)、MySql基础内容

    1、Mysql也是默认装好的我们直接启动即可 /etc/init.d/mysql start 

    

    2、mysql -u root -p 登录root用户,密码默认为password

    

    3、show databases; 查看已有的数据库

    

    4、use mysql;使用mysql数据库

    

    5、select user, password, host from user; 查看用户信息

    

    6、update user set password=20175127("新密码") where user='root';修改密码

    

    7、flush privileges; 更新权限

    

    8、exit 退出数据库,重新登录mysql -u root -p

    

    9、create database 数据库名称;新建数据库

    

    10、show databases; 查看已有数据库

    

    11、use dxy; 使用刚刚创建的数据库

    

    12、create table 表名 (字段设定列表); 创建一个登录用户表,用于后面验证登录信息

    

    13、show tables;查看已存表,可以看见刚刚创建的表

    

    14、insert into 表名 values('值1','值2','值3'...); 插入数据

    

    15、select * from 表名; 查询表中数据