Изучение структуры протокола HTTP

Автор работы: Пользователь скрыл имя, 03 Октября 2017 в 23:11, лабораторная работа

Описание работы

Цель работы: научиться создавать различные HTML формы, а также изучить основные способы передачи данных на сервер при помощи HTTP протокола.
Задание:
1) разработать 4 HTML формы в соответствии с таблицами 1 и 2. Дизайн и расположение стандартных управляющих элементов на форме выбираются студентом самостоятельно. В каждой форме, помимо указанных в таблице 2 элементов должна быть кнопка отправки данных на сервер;
2) предусмотреть Javascript-проверки на корректность заполнения элементов для разработанных форм.
3) изучить структуру отправляемых и принимаемых по HTTP протоколу данных для каждой формы.

Скачать архив (103.85 Кб) Сколько стоит заказать работу?
Файлы: 1 файл

lab01_php.docx

— 415.39 Кб (Скачать файл)

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ ДНР

ДОНЕЦКИЙ НАЦИОНАЛЬНЫЙ ТЕХНИЧЕСКИЙ УНИВЕСИТЕТ

 

Кафедра: КМД

 

 

 

Отчет по лабораторной работе №1

по курсу «Web-технологии и Web-дизайн»

на тему «Изучение структуры протокола HTTP»

 

 

 

 

 

Выполнила:

Ст.гр. ПКД-14а

Ганенко А. И.

 

Проверила:

Ст.пр. каф. КМД

Киселева О.В.

 

 

 

 

Донецк – 2017

Вариант 2

Цель работы: научиться создавать различные HTML формы, а также изучить основные способы передачи данных на сервер при помощи HTTP протокола.

Задание:

1) разработать 4 HTML формы  в соответствии с таблицами 1 и 2. Дизайн и расположение стандартных  управляющих элементов на форме  выбираются студентом самостоятельно. В каждой форме, помимо указанных  в таблице 2 элементов должна быть  кнопка отправки данных на  сервер;

2) предусмотреть Javascript-проверки на корректность заполнения элементов для разработанных форм.

3) изучить структуру отправляемых  и принимаемых по HTTP протоколу  данных для каждой формы.

Ход работы:

    1. Форма регистрации:

HTML-текст:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Форма регистрации</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="form-block">

<div class="form-navigation">

<a class="active" href="form-1.html">Форма-1</a>

<a href="form-2.html">Форма-2</a>

<a href="form-3.html">Форма-3</a>

<a href="form-4.html">Форма-4</a>

</div>

<h1>Форма регистрации</h1>

<form action="http://yandex.ru" method="POST" onsubmit="return testing()">

<input type="text" id="login" placeholder="Введите логин">

<input type="text" id="password" placeholder="Введите пароль">

<input type="text" id="name" placeholder="Ваше имя">

<input type="text" id="surname" placeholder="Ваша фамилия">

<input type="checkbox" class="inline" id="agree">

<label for="agree">Принимаю правила</label>

<input type="submit" value="Зарегистрироваться">

</form>

</div>

</body>

<script type="text/javascript">

function testing(){

var login = document.getElementById('login');

var pass = document.getElementById('password');

var name = document.getElementById('name');

var surName = document.getElementById('surname');

var checkbox = document.getElementById('agree');

var passReg = /[0-9]/;

var nameReg = /^[А-Я][а-я]/;

var loginReg = /[A-Z]/

if (login){

if(login.value.length < 5){

alert('Логин должен быть не короче 5-ти символов');

return false;

}else if(login.value.length > 10){

alert('Логин должен быть не длинее 10-ти символов');

return false;

}

if(loginReg.test(login.value)){

 

}else{

alert('Логин должен быть написан только заглавными латинскими символами.');

                return false;

}

 

}

if(pass){

if(pass.value.length < 3){

alert('Пароль должен быть не короче 3-x символов');

return false;

}else if(pass.value.length > 10){

alert('Пароль должен быть не длинее 10-ти символов');

return false;

}

if(passReg.test(pass.value)){

 

}else{

alert('Пароль должен сожержать только цифры!');

                return false;

}

if(name){

if(nameReg.test(name.value)){

 

}else{

alert('Имя должно быть написанно русскими буквами, первая заглавная');

                return false;

}

}

if(surName){

if(nameReg.test(surName.value)){

 

}else{

alert('Фамилия должна быть написанна русскими буквами, первая заглавная');

                return false;

}

}

if(checkbox){

if(checkbox.checked){

return true;

}else{

alert('Согласитесь с правилами');

return false;

}

}

}

 

 

}

</script>

</html>

Экранные формы:

 

 

Ответ сервера:

Request URL:http://yandex.ru/

Request Method:POST

Status Code:403 Forbidden

Remote Address:5.255.255.55:80

Referrer Policy:no-referrer-when-downgrade

Response Headers

view source

Content-Encoding:gzip

Content-Type:text/html; charset=utf-8

Date:Thu, 28 Sep 2017 17:57:00 GMT

ETag:W/"59cd13a6-3077"

Transfer-Encoding:chunked

X-Content-Type-Options:nosniff

X-XSS-Protection:1; mode=block

Request Headers

view source

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8

Accept-Encoding:gzip, deflate

Accept-Language:ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4

Cache-Control:max-age=0

Connection:keep-alive

Content-Length:0

Content-Type:application/x-www-form-urlencoded

Cookie:i=O4MKQsP+V1QqC5l9LgKS+DBwI9xRTsVa9GpNZhBG42IrOZp4amBe9bPt/4kmGhmuUbNM8lLL2TGay1c4iNUctWaWpvI=; yandexuid=8168802671504109028; _ym_uid=1504160775825666278; mda=0; yp=1819469028.yrts.1504109028#1507648199.ysl.1#1522206601.szm.1_00:1366x768:1366x647; my=YwA=; _ym_visorc_30468942=w; _ym_isad=2

Host:yandex.ru

Origin:null

Upgrade-Insecure-Requests:1

User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Name

 

    1. Форма добавления отзыва на товара

HTML-текст:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Форма добавления товара</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="form-block">

<div class="form-navigation">

<a href="form-1.html">Форма-1</a>

<a class="active" href="form-2.html">Форма-2</a>

<a href="form-3.html">Форма-3</a>

<a href="form-4.html">Форма-4</a>

</div>

<h1>Форма добавления товара</h1>

<form action="http://rambler.ru method="POST" onsubmit="return testing()">

<input type="text" id="caption" placeholder="Заголовок товара">

<textarea id="description" placeholder="Описание товара"></textarea>

<input type="text" id="price" placeholder="Цена товара">

<input type="number" id="counter" placeholder="Количество товара">

<input type="submit" value="Отправить">

</form>

</div>

</body>

<script type="text/javascript">

function testing(){

var tovar = document.getElementById('caption');

var description = document.getElementById('description');

var price = document.getElementById('price');

var count = document.getElementById('counter');

var tovarReg = /^[а-яА-ЯёЁa-zA-Z]+$/;

var priceReg = /\-?\d+(\.\d{0,})?/;

if (tovar){

if(tovar.value.length < 10){

alert('Название товара должно быть не короче 10-ти символов');

return false;

}

if(tovarReg.test(tovar.value)){

 

}else{

alert('Некорректное название товара');

                return false;

}

}

if(description){

if(description.value.length == 0){

alert('Описание товара не может быть пустым')

return false;

}

}

if(price){

if(price.value.length == 0){

alert('Введите цену товара');

return false;

}

}

if(priceReg.test(price.value)){

 

}else{

alert('Некорректно введенная цена');

                return false;

}

if(counter){

if(counter.value <= 0){

alert('Введите правильно количество товаров');

return false;

}

}

}

</script>

</html>

 

 

Экранные формы:

Ответ сервера:

Request URL:http://rambler.ru/

Request Method:POST

Status Code:301 Moved Permanently

Remote Address:81.19.82.10:80

Referrer Policy:no-referrer-when-downgrade

Response Headers

view source

Connection:keep-alive

Content-Length:178

Content-Type:text/html

Date:Thu, 28 Sep 2017 17:59:07 GMT

Keep-Alive:timeout=50

Location:https://www.rambler.ru/

Server:nginx

Request Headers

view source

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8

Accept-Encoding:gzip, deflate

Accept-Language:ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4

Cache-Control:max-age=0

Connection:keep-alive

Content-Length:0

Content-Type:application/x-www-form-urlencoded

Cookie:ruid=1CIAAPgDp1lnKuhsASkT0wB=; uuts=4vrJyBNtb6Q97v-beZl*7ChiljJ4HZ*t

Host:rambler.ru

Origin:null

Upgrade-Insecure-Requests:1

User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

    1. Форма обратной связи:

HTML-текст:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Форма регистрации</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="form-block">

        <div class="form-navigation">

            <a href="form-1.html">Форма-1</a>

            <a href="form-2.html">Форма-2</a>

            <a class="active"  href="form-3.html">Форма-3</a>

            <a href="form-4.html">Форма-4</a>

        </div>

        <h1>Форма обратной связи</h1>

        <form action="microsoft.com" method="GET" onsubmit="return testing()">

            <input type="text" id="autor" placeholder="Автор">

            <textarea id="message" placeholder="Сообщение"></textarea>

            <input type="text" id="mail" placeholder="E-mail">

            <input type="text" id="phone" placeholder="Номер телефона">

            <input type="submit" value="Отправить сообщение">

        </form>

    </div>

 

</body>

  <script type="text/javascript">

    function testing(){

        var autor = document.getElementById('autor');

        var message = document.getElementById('message');

        var mail = document.getElementById('mail');

        var phone = document.getElementById('phone');

        var mailReg = /^[-._a-z0-9]+@(?:[a-z0-9][-a-z0-9]+\.)+[a-z]{2,6}$/;

        var phoneReg = /^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$/;

        if (autor){

            if(autor.value.length == 0){

                alert('Имя автора не должно быть пустым');

                return false;

            }

        }

        if (message){

            if(message.value.length == 0){

                alert('Сообщение не должно быть пустым');

                return false;

            }

        }

        if(mail.value.length != 0 || phone.value.length != 0){

            if(mail.value.length != 0){

                if(mailReg.test(mail.value)){

                }else{

                    alert('Введите корректно E-mail');

                    return false;

                };

            }else if(phoneReg.test(phone.value)){

            }else{

                alert('Введите корректно номер телефона');

                return false;

            }

        }else{

        alert('Поле e-mail или номер телефона должно быть заполнено');

        return false;

    }

    }

    </script>

</html>

Экранные формы:

Информация о работе Изучение структуры протокола HTTP