# 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的意思,真的是疲倦。最后收获也是蛮大的,基本上能看懂关于代码的意思,虽然说离自己编写还有段距离,但是我已经能看懂他的全部意思还有内容,离自己编写就差一个实践环节。
附带一张各代码的图

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

posted @ 2018-05-15 09:26  20154318王秀飞  阅读(135)  评论(0编辑  收藏