Лабораторная работа 11 Передача сложных типов данных. Нотация json.

Цель

Научиться использовать нотацию JSON для обмена сложными составными типами данных между web-сервером и клиентом, выполнять их обработку (операции сериализации и десериализации).

Выполнение

Подготовка к выполнению

Используя ftp-клиент, скопируйте каталог lb11 из предоставленного преподавателем архива «файлы-задания» в «каталог_AJAX» (см. например, подготовительный этап лабораторной работы № 9).

1. В лабораторной работе используется база данных SQLITE users.db, в которой содержится список пользователей сайта. Пароль у всех пользователей – password. Для работы с базой данных формата SQLITE можно использовать SQLiteStudio (графический интерфейс и все такое под Windows) или пакет sqlite3, установленный на нашем web-сервере (режим командной строки).

	ФИО	Login	MD5-хэш Password
1	Вася Пупкин	vasyap	a98323d4f9b7a534edd6ac4d9e774251
2	Федя Сумкин	fedias	0d4757da2229dac55a62a7775bdafb7e
3	Вова Морковкин	vovam	fee7f66624c5881f7f3d1f7143f7a17b
4	Галя Пипеточкина	galp	840c5f4cd7c0b0e3b5f032249d13c2c8
5	Света Офигенова	svetao	fa057c8fee3c113b5ed57f008b0708f4
6	Тестовый пользователь	test	5a105e8b9d40e1329780d62ea2265d8a

2. Для корректной работы скриптов установите на каталог lb11 и конкретный файл users.db право на запись для «Всех».

cd /usr/local/www/apache24/data/ajax/

chmod 777 lb11

cd lb11

chmod 777 users.db

3. В NetBeabs создайте новый проект на удаленном сервере для выполнения данной лабораторной работы.

Часть 1. Форма авторизации пользователя.

1. Откройте в проекте файл index.html, находящийся в каталоге lb11.

2. Изучите HTML код этой страницы, обратите внимание на описание формы

<form id="frmLogin" onsubmit="return false" class="block"> и описание стиля для объекта frmLogin.

3. Для формы frmLogin в файле mod_11.css определено свойство display = none, что обеспечивает скрытие формы авторизации при загрузке страницы.

4. В секции java-скрипта найдите комментарий

/*

** Задание 1. Напишите сценарий отображения формы frmLogin при нажатии ** на кнопку "Вход" в блоке divUsers.

*/

5. Необходимо написать функцию showLoginForm() для кнопки [Вход] (найдите эту кнопку в HTML коде), которая отображает форму авторизации (frmLogin) на экране, устанавливая для этого объекта значение свойства style.display = block.

6. Проверьте правильность работы написанного кода (при нажатии на кнопку [Вход] должна появляться форма авторизации).

Часть 2. Проверка пользователя.

1. Продолжаем работать с файлом index.html.

2. Обратите внимание на функции‐констукторы классов UserInfo() и Ticket(). Для проверки пользователя необходимо сформировать объект UserInfo, заполнив его свойства login и password и передать этот объект в виде JSON строки на сервер сценарию user_auth.php. Этот сценарий проверит пользователя по базе данных и возвращает объект Ticket (билет пользователя), в котором находится информация id – идентификатор и valid – свойство, равное true, если пользователь правильно ввел данные и прошел проверку на сервере. Полученный билет скрипт должен сохранить в переменной и в последствии предъявлять его серверу для запроса других данных. Сервер по идентификатору билета сможет узнать и проверить, что пользователь прошел проверку и авторизацию.

3. В секции java-скрипта найдите комментарий

/*

** Задание 2: Напишите функцию проверки пользователя …

*/

4. Необходимо написать функцию validateUser(), которая реализует механизм авторизации пользователя на сайте. Функция должна выполняться при нажатии на кнопку [Вход] на форме авторизации (frmLogin).

5. Итак, в функции реализуйте следующие этапы:

- считайте логин и пароль из соответствующих полей формы frmLogin

- создайте новый объект UserInfo и заполните его свойства login и password

- выполните JSON сериализацию этого объекта в строку

- передайте методом POST полученную строку на сервер скрипту user_auth.php (не забудьте указать Content‐type: text/plain и Content‐length, равный длине строки)

- если данные корректны, то сервер возвращает строку с данными объекта Ticket

- выполните десериализацию полученной строки и проанализируйте значение свойства valid

- если значение свойства valid = true, то пользователь получил «билет», прошел авторизацию на сервере

- если свойство valid = false, то необходимо вывести сообщение об ошибке авторизации, для этого установите свойство style.display = "block" для объекта

<div id="divMessage" class="block">

- сохраните полученный от сервера «билет» (это объект Ticket) в переменную

var ticket