ПОЗНАВАТЕЛЬНОЕ

Оси и плоскости тела человека - Тело человека состоит из определенных топографических частей и участков, в которых расположены органы, мышцы, сосуды, нервы и т.д.

Отёска стен и прирубка косяков - Когда на доме не достаёт окон и дверей, красивое высокое крыльцо ещё только в воображении, приходится подниматься с улицы в дом по трапу.

Дифференциальные уравнения второго порядка (модель рынка с прогнозируемыми ценами) - В простых моделях рынка спрос и предложение обычно полагают зависящими только от текущей цены на товар.

Разработка сценария на стороне сервера.

Задание на лабораторную работу № 7

«Разработка модального окна»

Цель работы: применение средств HTML, CSS, PHP и jQuery для создания кроссбраузерного модального окна.

В ходе выполнения первого этапа задания будет разработана web-страница с модальным окном, содержащим форму отправки сообщения. На втором этапе предстоит создать php-сценарий на стороне сервера, обеспечивающий выдачу подтверждения о принятии корреспонденции. На третьем этапе возможности серверного сценария будут частично заменены функциональностью клиентского ajax-запроса.

Разработка web-страницы.

Создайте новый документ в формате .html. Обеспечьте наличие на web-странице элементов управления, показанных на рисунке 1.

Рис. 1

Установите значения «#» для атрибута action и «post» для атрибута method описателя form.

Все элементы от метки «Ваш E-mail» до кнопки «Отправить» разместите внутри формы. Присвойте форме идентификатор contact. Заголовок «Отправка сообщения» и форму включите внутрь описателя <div id=’inline’>.

Метки определяйте по образцу, приведенному ниже

В качестве значения атрибута for указывайте идентификатор элемента управления, для которого метка и создается. В приведенном примере email – идентификатор текстового поля <input type="text" id="email" name="email">.

Присоедините к текущей web-странице таблицу стилей. Установите с помощью таблицы стилей размеры элемента <div id=’input’> 500px по ширине и 500px по высоте. Для текстового поля textarea установите значение block для свойства display.

Скройте форму с помощью приведенного ниже правила CSS

#inline { display: none; }

В описании ссылки установите атрибут href в значение «#inline». Таким образом вы адресуете ссылку к элементу div с идентификатором inline.

В таблицу стилей добавьте также правила оформления для элементов формы в случае ввода некорректных данных.

input.error,textarea.error{border-color:red; border-style:solid; background:pink; color:#a35959; }

Примененные выше селекторы input.error и textarea.error – элементы типа input и textarea соответственно, принадлежащие классу error.

Внешний вид web-страницы после присоединения файла .css показан на рис. 2.

Рис. 2

Присоедините к текущей web-странице библиотеку jQuery, а также пустой текстовый файл с расширением .js. В присоединенном сценарии прикрепите к текущему документу событие ready, как в листинге 1. Тело абстрактной функции этого события будет являться контейнером для последующих инструкций клиентского js-сценария

$(document).ready(function() {

}

Листинг 1

Прикрепите к ссылке событие click. Внутри тела абстрактной функции события click обеспечьте:

отмену действий по умолчанию по наступлению события click для ссылки;

сохранение в переменной, видимой внутри всего тела абстрактной функции события ready, значения атрибута href текущего элемента;

плавное сокрытие в течение 2 сек элемента, идентифицируемого определенной выше переменной.

Для выполнения первого требования используйте объект-событие абстрактной функции и его встроенный метод preventDefault().

Определите в теле абстрактной функции для события ready пользовательскую функцию validateEmail(), возвращающую результат проверки введенного адреса электронной почты на корректность (листинг 2)

function validateEmail(somevar) {

}

Листинг 2

В теле функции создайте регулярное выражение с именем reg для проверки корректности электронного адреса. Строкой ниже после определения reg в теле функции добавьте строку

return reg.test(somevar);

В данной инструкции к переменной reg применен встроенный метод регулярного выражения test. В качестве аргумента методу передается формальный параметр, имя которому можно определять произвольно. При этом необходимо обеспечить применение одного и того же формального параметра в определении функции validateEmail() и при вызове метода test() внутри этой функции. Ключевое слово return обеспечивает возврат результата выражения, расположенного справа от него, пользовательской функцией.

В тело абстрактной функции события ready в конец сценария введите определение для универсального метода для установки обработчиков событий

$("#send").on("click", function(){

}

Первый аргумент события on определяет тип события, реакцию на которое необходимо обеспечить.

Внутрь тела обработчика on() добавьте фрагмент, обеспечивающий сохранение значения, введенное в элемент управления с идентификатором email

var emailval = $("#email").val();

Обеспечьте также в рамках тела обработчика события on сохранение в переменной значения, введенное пользователем в элемент типа textarea с идентификатором msg с помощью следующей строки

var msgval = $("#msg").val();

В том же блоке инструкций определите длину введенного в элемент textarea сообщения с помощью встроенного свойства length и сохраните полученное значение в переменной:

var msglen = msgval.length;

В теле обработчика события on вызовите ранее определенную пользовательскую функцию validateEmail, передайте ей в качестве фактического параметра переменную со значением, введенным в элемент с идентификатором email. Возвращенный функцией результат проверки корректности введенного электронного адреса сохраните в пользовательской переменной.

Внутри тела обработчика on обеспечьте присвоение элементу управления класса error при некорректном вводе и удаление признаков принадлежности этому классу из описания элемента в противном случае.

Реализуйте присвоение принадлежности элемента к классу error в случае, если длина введенного сообщения меньше четырех символов, а также удаление принадлежности к классу в противном случае.

При выполнении двух последних заданий используйте конструкцию Javascript if() else.

В рамках тела обработчика события on обеспечьте проверку условия одновременного выполнения корректности введенного электронного адреса по используемым символам и по длине с помощью оператора &&. В случае прохождения проверки обеспечьте замену кнопки «Отправить» надписью «отправка…»

$("#send").replaceWith("<em>отправка...</em>");

где send – идентификатор элемента «Отправить». Метод replaceWith() заменяет выбранный селектором элемент или выборку элементов новым содержанием, указанным в качестве аргумента.

Разработка сценария на стороне сервера.

Загрузите с сайта http://www.apachefriends.org пакет XAMPP последней версии для своей операционной системы и установите его. В случае необходимости (по требованию мастера установки пакета XAMPP), предварительно осуществите установку распространяемого пакета Microsoft Visual Studio C++.

В папке htdocs каталога xampp создайте в текстовом редакторе NotePad++(NotePad, Блокнот) новый документ под именем answer.php. Проконтролируйте, чтобы имя файла имело только одно расширение. Для этого снимите флажок с элемента «скрывать расширения для зарегистрированных типов файлов» (сервис->свойства папки->вид).

В качестве содержания добавьте фрагмент

<?php

С помощью элементов <?php и ?> указываются начало и конец кода на языке PHP соответственно. Весь код PHP помещается между этими маркерами.

В следующей строке после элемента <?php добавьте инструкцию определения переменной, хранящей адрес электронной почты

$sendto = "myemail@mail.ru";

Указанный адрес представляет конечный адресат. С помощью символа «$» в PHP определяются переменные. Имя переменной слева от символа присвоения определяйте по своему усмотрению. В качестве значения переменной можно использовать фиктивный или реальный адрес электронной почты.

Для обмена информацией между клиентом и сервером используются так называемые суперглобальные переменные. Их не нужно объявлять как глобальные, они доступны в интерфейсах клиента и сервера изначально. По сути, суперглобальные переменные представляют собой массивы. В старых версиях интерпретатора PHP (до версии 4.0.1) использовались суперглобальные переменные, именуемые с помощью префикса $HTTP_, которые располагались не в массивах. Использовать их сейчас не рекомендуется из соображений безопасности. В приложении А приведены используемые в PHP начиная с версии 4.0.1 массивы.

Строкой ниже определите переменную, сохраняющую значение адреса электронной почты, введенное пользователем на стороне сервера

$usermail = $_POST['email'];

где email – имя (не идентификатор) элемента управления. Суперглобальная переменная $_POST предоставляет доступ к данным, переданным по методу POST. Обращение к элементу массива осуществляется по имени элемента в форме пользователя.

Аналогичным образом сохраните в переменной содержание письма, то есть элемента управления типа textarea

$content = nl2br($_POST['msg']);

Функция nl2br возвращает строку, в которой перед каждым переводом строки (возвратом каретки) вставлен тег '<br />'.

Создайте также переменную со значением темы письма:

$subject = "Новое сообщение";

Кроме того, определите переменную со значением так называемого заголовка с помощью приведенных ниже последовательностей инструкций

$headers = "From: " . strip_tags($usermail) . "\r\n";

$headers .= "Send-To: ". strip_tags($sendto) . "\r\n";

$headers .= "MIME-Version: 1.0\r\n";

$headers .= "Content-Type: text/html;charset=utf-8 \r\n";

В первой строке приведенной последовательности сохраняется строка «From », к которой посредством операции конкатенации «.» присоединяется значение введенного пользователем адреса электронной почты, сохраненное в переменной $usermail. Обратите внимание на предварительное преобразование значения электронного адреса функцией strip_tags(). Функция strip_tags() возвращает строку, из которой удалены HTML и PHP тэги. В конце строки производится присоединение специальных символов возврата каретки и перевода строки. Во второй строке к полученной в переменной $headers строке добавляется с помощью операции «.=» строка «Send-To: ». В последующих строках к значению переменной $headers добавляются строковые константы, указывающие номер версии многоцелевого расширения интернет-почты MIME (Multipurpose Internet Mail Extensions), формат документа и таблицу его кодировки. В задачу расширения MIME входит идентификация типа содержимого документа по его заголовку. Так, текстовый файл имеет тип text/plain, HTML-файл — text/html. Отправка заголовка обычно происходит на основе расширения файла веб-сервером.

Сформируйте тело письма с помощью последовательности инструкций

$msg = "<html><body style='font-family:Arial,sans-serif;'>";

$msg .= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>

Новое сообщение</h2>\r\n";

$msg .= "<p><strong>От кого:</strong> ".$usermail."</p>\r\n";

$msg .= "<p><strong>Сообщение:</strong> ".$content."</p>\r\n";

$msg .= "</body></html>";

Обеспечьте отправку письма с помощью встроенного средства PHP

if(mail($sendto, $subject, $msg, $headers))

{

echo "true";

}

else {

echo "false";

}

Функция mail() автоматически отправляет сообщение, указанное в качестве третьего аргумента, получателю, идентифицированному первым аргументом. В первом аргументе через запятую может быть указано несколько получателей. mail() возвращает true, если почта была успешно принята для доставки и false - в противном случае. При этом, факт принятия для доставки не подразумевает, что корреспонденция фактически достигает адресата. Во втором аргументе указывается тема отправляемого письма. Четвертый параметр необязателен и используется для присоединения дополнительных заголовков. Конструкция if() else обеспечит отображение на экране пользователя сообщения true при соответствующем возврате функции mail() и строки false – в противном случае.

Замените значение «#» в атрибуте action формы на значение «http://localhost/answer.php». В атрибуте action элемента form указывается адрес, по которому отправляются данные формы или путь к сценарию, предназначенному для обработки данных формы. localhost в пути к сценарию обозначает сервер, установленный на локальном компьютере. Имя localhost отождествляется с папкой htdocs.

Запустите web-сервер Apache пакета XAMPP.

Рис. 3

Откройте созданную на первом этапе web-страницу. Вызовите форму на отображение нажатием на ссылке, заполните корректно поле для адреса реальным или фиктивным адресом. Введите текст сообщения в соответствующее текстовое поле. Нажмите на элемент «Отправить». Убедитесь в замене кнопки надписью «отправка…» и в получении на экране сообщения true от сценария web-сервера.