EXP 8 Web Foundation

EXP 8 Web Foundation 1. Basic question Answer (1) What is a form

Forms are primarily responsible for data collection functions in Web pages. HTML forms are used to collect different types of user input, including form elements, which refer to different types of input elements, check boxes, radio buttons, submit buttons, and so on.

(2) browser can parse what language to run

HTML (Hyper-text Markup Language), Css,javascript,xml (Extensible Markup Language), Python,php,javascript, ASP, and so on.

(3) What dynamic languages are supported by webserver

Php,jsp,asp and so on.

2. Practice Summary and experience

The main problems encountered and the way to solve them:

(1) JS file changes after the browser can not be updated in time (Firefox browser)

First, hit About:config in the browser, then enter

In the second step, find the following list contents in the displayed content, double-click the content, in the dialog box that appears, change 3 to 1 and then close this page, you can let the browser update the JS file in a timely manner.

* * (2) connection failed when using PHP to connect to MySQL access, connect failed:access denied for user ' root ' @ ' localhost ' * *

The first step is to authorize the user

mysql>grant all privileges on *.* to ‘root‘@‘localhost‘ identified by ‘root‘ with grant option;

Root ' @ ' localhost: is a user
Root: Is the password

The second step is to set the read and write properties

mysql>set global read_only=1;

Step Three: Refresh Permissions

mysql>flush privileges;

Fourth step: Restart the database

service mysql restart

(3) Enter the correct user name and password also failed to login

Because PHP didn't get the form data successfully, I should change the ID value of username and password set in HTML to name value, so that PHP gets the form data.

Experience :

I feel that every experiment of network confrontation can acquire a lot of knowledge and skills, stimulate their curiosity, although it is a long time to experiment, but it is very fruitful and practical. And the joy and time spent after a successful solution to the problem is worth it.

3. Practice Process Recording 3.1 Apache

• Launch Apache
  service apache2 start

• View Port Usage
  :netstat -aptn

You can see that apache2 occupies 80

• Test 1:apache works, browser open 127.0.0.1:80 can open Apache introduction page normally

• Test 2:apache can read files in working directory
  vi /var/www/html/test.txtRandom input string
  Browser opens 127.0.0.1:80/test.txt to see Test.txt content

3.2 Front-end programming: html+javascipt+css4304.html

In this HTML, the main login interface for the overall layout planning, the use of Div to the internal window, tags, input boxes, buttons, links to block, so that the convenience of using CSS to accurately adjust the position, adjust the margin. At the same time also the important things set the ID and class, which is also convenient after using CSS to accurately adjust the color, adjust the font. Also added a forgotten password of the small link, click to jump to your own written Forget_pwd.txt page.

4304.js

To determine whether the user name and password is correct, the implementation is simple. The use of an interface jump statement: location.href= "Test.txt", if the use of admin,20154304 landing temporarily as a success, the following will be used in PHP and MySQL connection to achieve landing.

The return value of the input box is obtained using document.getElementById, which obtains the object of the specified ID value through the object method of document. Here is the ID value of Byid, the username and password set in the preceding HTML, (but to change the name value when using PHP to connect to MySQL, otherwise the database cannot get the form data)

4304.css

It's a bit long, the last code:

/* Make the background image stretch and occupy the entire screen */body {background-image:url ("1.PNG"); background-size:100%;  Background-repeat:no-repeat;  } #login_frame {/* to have a div block centered across the screen */width:400px;  height:260px;  padding:13px;  Position:absolute;  left:50%;  top:50%;  /*margin-left: And Margin-top is set to the width and height of half value, for is fully centered */margin-left: -200px;  Margin-top: -200px;  /* Set background color and add transparency effect */background-color:rgba (240, 255, 255, 0.5);  border-radius:10px;  Text-align:center;  }/* Make the input box and label align centered */form p > * {display:inline-block;  Vertical-align:middle;  }. label_input {font-size:14px;  Font-family: Song body;  /* Text set centered */width:65px;  height:28px;  line-height:28px;  Text-align:center;  Color:white;  Background-color: #3CD8FF;  /* Set rounded corners */border-top-left-radius:5px;  border-bottom-left-radius:5px;  }. Text_field {width:278px;  height:28px;  border-top-right-radius:5px;  border-bottom-right-radius:5px;  border:0;  } #btn_login {font-size:14px;  Font-family: Song body;  /* Text set centered */width:120px;  height:28px; Line-height:28px;  Text-align:center;  Color:white;  Background-color: #3BD9FF;  border-radius:6px;  border:0;  Float:left;  } #forget_pwd {font-size:12px;  Color:white;  Text-decoration:none;  position:relative;  Float:right;  top:5px;  } #forget_pwd: hover {color:blue;  /* Remove the underlined */text-decoration:underline of the link;  } #login_control {padding:0 28px;   }

Here the background picture should be placed under/var/www/html:

Well, take a look at the effect, visit 127.0.0.1/4304.html:

Don't lose anything. Direct Login as follows:

The following passwords are not lost:

The random password is as follows:

Click Forgot password, jump to the following page:

The fate of it, haha no meaning casually wrote a TXT file.

Log in as Admin 20154304, successfully jump to Test.txt

3.2 Back-end programming: Php+mysqlmysql

• Installation

  Apt-get Install Mysql-server mysql-client mysql-workbench

• Start/Stop/restart

  Service Start/stop/restart MySQL

Because there was a problem with the root user in the experiment, the following re-created a new user zhj and gave all the permissions to ZHJ, with the following code:

[email protected]:/var/www/html# mysql -u root -pEnter password: Welcome to the MariaDB monitor.  

Then use ZHJ to log in, build the database to build the table

[email protected]:/var/www/html# mysql-u Zhj-penter password:welcome to the MariaDB Monitor. Commands End With; or \g.your MariaDB connection ID is 77Server version:10.1.29-mariadb-6 Debian buildd-unstablecopyright (c) Acle, MariaDB Corporation Ab and others. Type ' help ', ' or ' \h ' for help. Type ' \c ' to clear the current input statement. MariaDB [(None)]> show databases, +--------------------+| Database |+--------------------+| 4304 | | Information_schema | | MySQL | | Performance_schema |+--------------------+4 rows in Set (0.00 sec) MariaDB [(none)]> use 4304Reading table information f or completion of table and column namesyou can turn off this feature to get a quicker startup With-adatabase Changedmaria DB [4304]> CREATE TABLE Usertest1 (username varchar), password varchar (20)); Query OK, 0 rows affected (0.30 sec) MariaDB [4304]> insert into usertest1 values (' 4304 ', ' 4304 '); Query OK, 1 row affected (0.02 sec) MariaDB [4304]> select * from Usertest1; +----------+----------+| Username | Password |+----------+----------+| 4304 | 4304 |+----------+----------+1 row in Set (0.00 sec) MariaDB [4304]> Quitbye

• PHP test

Php+mysql Write PHP Web page, connect database, perform user authentication

At this time to modify my previous 4304.js, as well as 4304.html, JS in the authentication user name admin and password 20154304 jump page There to delete, or lose this will jump to write txt instead of PHP Change the action of the 4304.html form to the ID value of the username and password settings in 4304.php,html to the name value so that PHP gets the form data.

4304.php

Circled two statements jump to yes.html/no.html after a successful or unsuccessful login
The two HTML is relatively simple, mainly using 4304.CSS to make the page beautiful.

See the effect, enter the database to add the user name 4304 and password 4304, such as, login successfully, and then jump to the Success page:

Randomly lose, Login failed, jump to failure page:

3.3 Simplest SQL injection, XSS attack test

• SQL injection

• When entered in the User name input box, the ‘ or 1=1# synthesized SQL query statement is
  select * from lxmtable where username=‘‘ or 1=1#‘ and password=‘‘, #会把后面的内容都注释掉, and 1=1 is always true, so this search must be able to match and successfully log in, as follows:

• In the User name input box, enter '; INSERT into usertest1 values (' 20155204 ', ' 5204 ', ' student '), #意思是select之后, and execute the INSERT statement, The results are as follows: (note modifying this sentence in the back-end PHP file to perform multiple if ($result = $mysqli->multi_query ($query _str)))

The viewable database adds 0000 user 0000 Passwords as follows:

• XSS attack test

Input ...</a> , as below, I used the background figure 1. PNG, jump to my background map, this diagram has been used for several times ...

EXP 8 Web Foundation