20164305 徐广皓 Exp 8 Web基础

1.实践具体要求

（1）Web前端HTML(0.5分)
- 能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法,编写一个含有表单的HTML。
（2）Web前端javascipt(0.5分)
- 理解JavaScript的基本功能，理解DOM。编写JavaScript验证用户名、密码的规则。
（3）Web后端：MySQL基础：正常安装、启动MySQL，建库、创建用户、修改密码、建表(0.5分)
（4）Web后端：编写PHP网页，连接数据库，进行用户认证(1分)
（5）最简单的SQL注入，XSS攻击测试(1分)
- 功能描述：用户能登陆，登陆用户名密码保存在数据库中，登陆成功显示欢迎页面。

2.基础问题回答

（1）什么是表单？
- 可以收集用户的信息和反馈意见，是网站管理者与浏览者之间沟通的桥梁。
（2）浏览器可以解析运行什么语言？
- 支持HTML（超文本标记语言）、XML（可扩展标记语言）以及Python、PHP、JavaScript、ASP等众多脚本语言。
（3）WebServer支持哪些动态语言？

- Active Server Pages

- - Microsoft已开发出一种用于生成称为 Active Server Pages 的动态Web内容的技术,简称 ASP。使用ASP，Web 服务器上的HTML页面可以包含嵌入代码的片段（通常是VBScript或JScript-尽管几乎可以使用任何语言）。在将页面发送到客户端之前，Web服务器将读取并执行此代码。

- Server-side JavaScript

- - Netscape 也有一种服务器端脚本技术，它被称为服务器端 JavaScript，或简称为 SSJS。与 ASP 一样，SSJS 同样允许将代码片段嵌入到 HTML 页面中以生成动态 Web 内容。区别在于 SSJS 使用 JavaScript 作为脚本语言。使用 SSJS，可以预编译网页以提高性能。

- Java Server pages
  - 想了解 jsp（Java Server Pages）那么就不得不说一下和他直接相关的，Java Servlet。
  - Java Serlvet（Java Server Side applet) 是在服务器端的 Java 程序，他扩展了服务器的功能，通过运行由 Serlvet 引擎管理的 JVM 来运行 Java 程序而提供动态更新 HTML 的功能（使用不同的技术来实现类似 CGI 程序的功能，但不完全同于 CGI，Servlet 有自己的约定）。Java Serlvet 的优点很吸引人，具有 Java 语言的优点和平台无关性；因为 Serlvet 在 Web 服务器中运行，所以可以很容易的访问 Web 服务器的资源；支持在 JVM 中运行多线程，每个请求将对应一个 Serlvet 线程，对比 CGI 创建进程的方式将节省很大的时间和空间资源。但是工程师们向来都是抵制麻烦寻找便利的人群，使用 Java Servlet 编写服务器端页面，不可避免的就是再次需要在 Java 代码中嵌入前端 HTML 代码，这给编码体验造成了很大影响，为了实现工程师友好（增加这门技术对工程师的吸引力），于是和 PHP 在 HTML 中嵌入代码相似，Java servlet 也实现这一特性，允许在 HTML 中嵌入 Java 代码。更进一步，将一些 Java 代码封装起来换一种更加易于理解和使用的语法，就产生了 JSP。JSP 真正运行时，是会被 Servlet 容器给编译成 Java Servlet 代码的，所以实际运行的还是 Java 程序。JSP 只是一个工程师友好的中间层。

3.Web前端：HTML

1.kali默认已安装Apache，直接使用 service apache2 start 命令打开Apache服务即可。

此时在浏览器输入127.0.0.1，如果可以打开Apache的默认网页，则开启成功：

2.使用 cd /var/www/html 进入Apache目录下，新建一个简单的含有表单的html文件 simple_form.html ：

 1 <html>
 2 <head>
 3 <title>CryptoTeam</title>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 </head>
 6 <body>
 7     <h2>Login Quick</h2>
 8         <form action="login" method="post">
 9             <input placeholder="E-mail" name="Name" class="user" type="email">
10             <br>
11             </br>
12             <input  placeholder="Password" name="Password" class="pass" type="password">
13             <br>
14             </br>
15             <input type="submit" value="Login">
16         </form>
17 </body>
18 </html>

在浏览器尝试打开

4.Web前端：javascipt

1.在原有 simple_form.html 基础上，可以添加一段JavaScript代码，以完成对用户是否填写邮箱和密码的判断。修改后的 login_test.html 如下所示：

 1 <html>
 2 <head>
 3 <title>CryptoTeam</title>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 </head>
 6 <body>
 7     <h2>Login Quick</h2>
 8         <form action="login" method="post" name="form_login">
 9             <input placeholder="E-mail" name="Email" class="user" type="email" onfocus="if (this.value=='Your email') this.value='';" />
10             <br>
11             </br>
12             <input  placeholder="Password" name="Password" class="pass" type="password" onfocus="if (this.value=='Your password') this.value='';"/>
13             <br>
14             </br>
15             <input type="submit" value="Login" onClick="return validateLogin()"/>
16         </form>
17 <script language="javascript">  
18     function validateLogin(){  
19         var sUserName = document.form_login.Email.value ;  
20         var sPassword = document.form_login.Password.value ;    
21         if ((sUserName =="") || (sUserName=="Your email")){  
22         alert("user email!");  
23         return false ;  
24         }  
25         if ((sPassword =="") || (sPassword=="Your password")){  
26         alert("password!");  
27         return false ;  
28         }  
29     }   
30 </script>  
31 </body>
32 </html>

2.在浏览器访问 file:///var/www/html/login_test.html ，如果用户邮箱或密码未填，网页会提示：

扫描二维码关注公众号，回复： 6203533 查看本文章

5.Web后端：MySQL基础

1.输入 /etc/init.d/mysql start 开启MySQL服务

2.输入 mysql -u root -p 使用root权限进入，默认的密码是password

3.输入 update user set password=PASSWORD("newpassword") where user='root'; ，修改密码；输入 flush privileges; 更新权限

4.输入 exit 退出数据库，使用新的密码登录

5.使用 create database databasename; 建立数据库

6.使用 show databases; 查看存在的数据库

7.使用 use databasename; 使用我们创建的数据库

8.使用 create table tablename; 建立数据库表，并设置字段基本信息

9.使用 show tables; 查看表信息

10.使用 insert into tablename values('1','2'); 插入数据

11.使用 select * from tablename; 查询表中的数据

12.在MySQL中增加新用户，使用 grant select,insert,update,delete on sql.* to username@localhost identified by "password";

13.增加新用户后，使用新的用户名和密码进行登录

6.Web后端：编写PHP网页

1.在 /var/www/html 目录下新建一个PHP测试文件 phptest.php ，简单了解一下它的一些语法

1 <?php
2 echo ($_GET["a"]);
3 include($_GET["a"]);
4 echo "This is my php test page!<br>";
5 ?>

2.在浏览器网址栏中输入 localhost/phptest.php?a=/etc/passwd ，可看到 /etc/passwd 文件的内容

3.利用PHP和MySQL，结合之前编写的登录网页进行登录身份认证，修改后的 login.php 和 login.html 代码如下

 1 <html>
 2 <head>
 3 <title>login</title>
 4 </head>
 5 <h1>Login</h1>
 6 <body>
 7 <table>
 8  <form action="login.php" method="GET" name="form_login">
 9 <tr>
10 <td>username:</td>
11 <td><input type="text" name="username" size="20" maxlength="20"onfocus="if (this.value=='You name')this.value='';"/></td>
12 </tr>
13 <tr>
14 <td>password:</td>
15 <td><input type="password" name="password" size="20" maxlength="20"onfocus="if (this.value=='You password')this.value='';"/></td>
16 </tr>
17 <table>
18 <tr>
19 <td><input type="submit" name="login" value="submit"onClick="return validateLogin()"/></td>
20 <td><input type="reset" name="rs" value="reset"/></td>
21 </tr>
22 </table>
23 </from>
24 </table>
25 
26 <script language="javascript">  
27     function validateLogin(){  
28         var sUserName = document.form_login.username.value ;  
29         var sPassword = document.form_login.password.value ;    
30         if ((sUserName =="") || (sUserName=="Your name")){  
31         alert("user email!");  
32         return false ;  
33         }  
34 
35         if ((sPassword =="") || (sPassword=="Your password")){  
36         alert("password!");  
37         return false ;  
38         }  
39 
40     }   
41 </script>  
42 
43 </body>
44 </html>

 1 <?php
 2 $uname=($_GET["username"]);
 3 $pwd=($_GET["password"]);
 4 echo $uname;
 5 $query_str="SELECT * FROM testtable where username='$uname' and password='$pwd';";
 6 $mysqli = new mysqli("127.0.0.1", "root", "123456", "xgh");
 7 
 8 /* check connection */
 9 if ($mysqli->connect_errno) {
10     printf("Connect failed: %s\n", $mysqli->connect_error);
11     exit();
12 }
13 echo "connection ok!";
14 /* Select queries return a resultset */
15 if ($result = $mysqli->query($query_str)) {
16     if ($result->num_rows > 0 ){
17             echo "<br> {$uname}:Welcome!!! <br> ";
18     } 
19     else {
20         echo "<br> login failed!!!! <br> " ; }
21     /* free result set */
22     $result->close();
23 }
24 $mysqli->close();
25 ?>