# Exp 8 Web基础 20154318 王秀飞

Exp 8 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攻击测试

功能描述：用户能登陆，登陆用户名密码保存在数据库中，登陆成功显示欢迎页面。

二、基础问题回答

（1）什么是表单
表单在网页中主要负责数据采集功能。
一个表单有三个基本组成部分：
表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

（2）浏览器可以解析运行什么语言。
HTML（超文本标记语言）、XML（可扩展标记语言）以及Python、PHP、JavaScript、ASP等众多脚本语言。
超文本标记语言：HTML
可扩展标记语言：XML
脚本语言：ASP、PHP、Script、JavaScript、VBScript、Perl、Python、ColdFusion、Java、JSP等

（3）WebServer支持哪些动态语言
ASP语言，PHP语言和JSP语言
ASP：即Active Server Pages，是MicroSOft公司开发的服务器端脚本环境，可用来创建动态交互式网页并建立强大的web应用程序。
PHP：即Hypertext Preprocessor，是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，主要适用于Web开发领域。PHP独特的语法混合了C、Java、Perl以及PHP自创的语法。
JSP：即Java Server Pages，其根本是一个简化的Servlet设计。JSP技术有点类似ASP技术，它是在传统的网页HTML文件中插入Java程序段和JSP标记，从而形成JSP文件，)。 用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。

三、实践过程

1.Web设计

（1）启动apache服务，键入service apache2 start。

（2）web前端
HTML超文本标记语言， 标准通用标记语言下的一个应用。“ 超文本 ”就是指页面内可以包含图片、 链接，甚至音乐、 程序等非文字元素。
超文本标记语言的结构包括 “头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
核心代码截图：

表单部分
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：
表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
就本实验来讲，设计了一个用户名和密码输入框、自动登录选择框、登录按钮和重置按钮。

（2）将编辑好的HTML文件命名为80.html，然后将此文件放到/var/www/html文件夹下。
在火狐浏览器键入127.0.0.1:80（或localhost/80.html）访问主页。

(3)然后登录 发现没有编辑php所以无法连接

（4）这里补充一些关于上面html代码的知识

2.javascript

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
编辑网页代码如下：

效果如下：
提示你是否输入用户名或者密码

3.后端设计--MySQL数据库

关于这一部分，我发现会出现各种各样的问题，我不知道是因为自己linux机器的问题还是自己操做失误，前前后后改了5，6次。有远程连接，密码设置，权限问题我都基本试了一次，可谓历经艰辛。呈现出来的是我已经解决了各种问题后的结果。
(1)键入/etc/init.d/mysql start开启数据库，键入mysql -u root -p
root用户登录，初始密码为空，如下：

使用wxf这个库（这里我已经是做了n遍的，所以出现了是 mysql -u wxf -p这个）

CREATE TABLE 库表的名称.users (
userid INT NOT NULL COMMENT '',
username VARCHAR(45) NULL COMMENT '',
password VARCHAR(256) NULL COMMENT '',
enabled VARCHAR(5) NULL COMMENT '',
PRIMARY KEY (userid) COMMENT '');

输入insert into users(userid,username,password,enabled) values(ID号,'用户id',password("用户密码"),"TRUE");添加新用户。
并使用select * from wxf； 查询相关信息

这个库一定要好好建，否则接下来的php与html的连接会出现很多问题，难受。

4.后端编程 PHP

PHP安装
sudo apt-get install php
PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行更快。

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

然后在浏览器中输入 localhost/4318.php进入

5.PHP+MySQL实现登录网页编写

打开之前的登录页面设置编写的文件夹/var/www/html，输入vim login4318.php

再改进81.html(我的文件换了，因为我原先调另一个代码一下午，也没弄出结果来，尝试了各种方法均以失败告终，所以换了这个81的代码，相应的文件名也换了)

然后在浏览器上登录localhost/login4318.php
成功说明已经php与html连接完成（下下张图）

在浏览器登录localhost/81.html失败登录

成功登录

6.最简单的SQL注入

在用户名输入框中输入' or 1=1#,密码随便输入，竟然会显示登陆成功！

7.XSS攻击测试

XSS表示Cross Site Scripting(跨站脚本攻击)，通过插入恶意脚本，实现对用户浏览器的控制。
在/var/www/html目录下事先保存一个图片文件4318.jpg，然后在登录网页的用户名窗口中输入20154318

但是我没有图片，所以出现的是裂图

三、实验总结与体会

这次试验险些做崩溃了，调这个调那个，到最后我已经头皮发麻。代码不对，库建不出来，网也连接不上，这问题也太多了。然后改代码还需要自己去一个个网上找JavaScript的意思，真的是疲倦。最后收获也是蛮大的，基本上能看懂关于代码的意思，虽然说离自己编写还有段距离，但是我已经能看懂他的全部意思还有内容，离自己编写就差一个实践环节。
附带一张各代码的图

不成功各有不成功的理由，成功只有那一条路径过去，哼！