© Б.А. Гобедашвили, 2013
УДК 65.011.56: 65.03: 658.821:658.64 Б.А. Гобедашвили
АВТОМАТИЗИРОВАННОЕ ПРОЕКТИРОВАНИЕ ИНФОРМАЦИОННОГО И ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ СИСТЕМЫ ОНЛАЙН БРОНИРОВАНИЯ ПРОПУСКОВ НА ПРЕДПРИЯТИЕ
Описаны основные принципы работы клиентской части системы онлайн продажи билетов. Важным условием является зашита системы от несанкционированного подключения стороннего сайта.
Ключевые слова: онлайн, билеты, продажа, зашита, система.
В работе рассматривается принцип работы клиентской части системы онлайн продажи билетов. В файле страницы на которой должен быть размешен Виджет нужно: Подключить скрипт; Выделить место под Виджет; Задать стили.
Подключение скрипта
В теге <head> прописать следуюшее:
<script type="text/javascript" эгс='Ъйр://ваш xост/Widget/widget.js"> </script>
Выделение места под Виджет
Чтобы выдать место под виждет нужно создать <div id="place4Widget"></div>. Место размешения блока указывается самостоятельно.
Стилизация
Необходимо указывать в теге <head> в следуюшем виде : <script type="text/javascript"> Wd.init ({
width - ширина виджета ( задается числом )
height - высота виджета ( задается числом ) (тут можно увеличить высоту виджета)
limit - количество билетов, которые возможно купить за один раз template - вариат шаблона отображения (значение 1 или 2) });
WdMiniStyle.init ({
widgetplace - редактирование блоков вывода событий topmenu - фон верх^го меню ( там где календарь и выбор даты)
и т.д. });
WdStyle.init ({
widget - стиль главного окна виджета. меняется фон. mask - стиль затемненного фона на заднем плане. меняется цвет и прозрачность и т.д. })
</script>
При загрузке страницы, на которой размешен виджет, сразу отправляется запрос на сервер для проверки организатора и получения ключа сеанса. После получения запроса, наименование организации сравнивается с имеюшимися данными на сервере. Помимо наименования организации, на сервере хранится домен соответствуюшей организации. Вместе с доменом и полученной строкой запроса генерируется URL, на который перенаправляется пользователь. С ответом сервер передает уникальный ключ сеанса. В последуюших запросах ключ передается для подтверждения пройденной проверки (рис. 1). Полученный ключ сеанса записывается в хеш страницы
Затем хеш ставится на «прослушку», то есть специальная функция hashChange следит за изменениями хеша страницы, если это происходит, вызывается функция WdGetHash().
Функция WdGetHash принимает хеш страницы в формате строки, разбивает ее на параметры и в зависимости от полученных параметров вызывает нужную функцию. Благодаря этому можно передавать ссылку и перезагружать страницу без потери информации. function WdGetHash() {
var tmp = new Array(); //два вспомагательных var tmp2 = new Array(); // массива
var param = new Array();
var get = location.hash; //строка GET запроса if (get != '') {
tmp = (get.substr(1)).split('&'); //разделяем переменные
for (var i = 0; i < tmp.length; i++) {
tmp2 = tmp[i].split('='); //массив param будет содержать param[tmp2[0]] = tmp2[1]; // пары ключ(имя перемен-
ной)->зна чение
}
guid = '';
WdEventCode = '';
WdSectorCode = '';
if (param['event'] == undefined && param['many'] == undefined && param['event'] == undefined) {
guid = param['guid']; // if(IE='\v'=='v'){
// location.hash = "guid="+guid;
// }
((typeof (WdOrder) != "undefined") ? WdUnlockOrder(WdOrder) : "")
•—^
Зафузка страницы) {Проверка строки запроса на наличие параметре
Непустая
Провека уникального ключа
Содержит значение
«
Запрос на проверку организатора
Передача уникального ключа для данной сессии
Запрос содержит имя организатора и строку 1Ж
Отправка ответа и перенаправление на сгенерированый 1М
Создание сессии с уникальным ключом^_^Обработка ответа4"^ ^апрос на получение данных об организаторе^
Генерация ШЦна основе да-тых об организации и полученой строки)
Отправка ответа Д
J
Получение запроса
Рис. 1
WdEventCode = undefined;
WdSectorCode = undefined;
WdMany = undefined;
WdHead = undefined;
WdBill = undefined;
showEvents($("#WdSelectDate option:selected") .val());
}
*" };
}
else {
var WdForm = "<form id='WdForm' method='post' action='"+WdUrl+"Widget/Authorize'> <input type='hidden' name='currentUrl' value='" + location.href + "' id='WdLocation'/>'</form>";
$("body").append(WdForm);
$('#WdForm').submit();
}
};
Затем виджет проверяет подключен ли jQuery. Если нет, то подключает самостоятельно.
Далее скрипт должен учесть все требования организатора, описанные в заголовке head, и в зависимости от этого сконфигурировать настройки отображения, фактически сгенерировать css код.
В зависимости от заданного организатором параметра template, виджет конструирует первый или второй шаблон отображения мероприятий в «маленьком виджете».
При нажатии на кнопку «билеты», меняется хеш страницы, в него дописывается еше один параметр, от которого зависит будет ли первый шаг (выбор времени и даты) активен или нет. Так как изменился хеш страницы, срабатывает функция WdGetHash().
Каждый переход пользователя с шага на шаг, будет влиять на хеш страницы.
После выбора даты, виджет снова меняет хеш страницы. Вызывается метод WdSeatList(), который самостоятельно отправит на сервер запрос.
Т CETAjHSMtU5tfSKto_6«j ¿00 0« 95.167.130.226:9985 152.5 KB 95.167,130.226:9985
Параметры Заголовки Ответ Каш 1504
_ 1337771132371
callback jQu!r)4710248319519622e24e4_1337770930012 eveirtCode 235-0502
returnUrl Ь11р://тм.гтетга.г-и/р1апе1;#ди1Ь^с0Ьс7аЬ-с№54668-900Ь-16с9ВЙЬ15с2а™Ау=0-!111&е«111-2330302Ь5есЬсгсрЬе -298064 stctorCodt 298064
Параметры запроса на серверs
А при получении положительно ответа - сконструирует схему зала, либо выведет все тарифы (в зависимости от типа мероприятия).
При выборе свободного места, в первую очередь, отправляется запрос на сервер, если ответ будет отрицательным, то над местом выведется сообшение с объяснением причины.
Вывод ошибки
Если ответ будет положительным, вызовется метод Ш<<Са1сиЫеО для подсчета суммы.
I
500 руб (Категория 02) Место занято ■ Место выбрано
Ваши билеты:
Интернет билет: 5 билетов (ряды 3,2, места 4,3.5.7,8)
Калькуляция
При переходе пользователя на оформление заказа, виджет отправляет запрос Ехеси^пдОЮг<<ег, в зависимости от сессии сервер может ответить по-разному. Может попросить авторизоваться/зарегистрироваться
Авторизация
или может сразу вывести все данные о заказе и, возможно, выбрать форму оплаты.
"Два стеклышка: удивительный телескоп" И "Прогулка 25 Мая 2012 года 12:25 (Закрыть] .щ
по звездному небу"
Ü Большой Звездный зал
1 " 1 Выбор даты | 2. Выбор мест | 3. Оформление заказа |f»
OCI Ваш заказ Билеты забронированы на 20 минут » у
Выбе Интернет билет ряды 3,2 места 4,3,5,7.8 5 билетов 2500 руб
К оплате: 2500 руб
Выберите способ оплаты - . *
1 *
0 Платежная система "Platron"
Выберите способ получения
0 По почте Письма будут отправлены на почту gobedashvilibagrat@gmail.com
♦ В кассе Укажите Фамилию и Имя, на кого будет оформлен заказ
Фамилия Имя
■ С условиями покупки согласен
<< Назад | Оплатить
Оформление заказа
Пока пользователь выбирает форму доставки и оплаты, виджет автоматически заполняет скрытую форму, а при нажатии на кнопку «оплатить», виджет отправляет эту форму на сервер платежной системы методом POST.
После завершения платежных операций пользователя опять переводят на страницу с виджетом, но с уже добавленным параметром в хеше. Опять вызывается метод WdGetHash(). Он назначает активным метод WdGetBill, который в свою очередь выводит окно с ссылками на билеты.
Абсолютно все запросы имеют обший исходяший параметр, который проверяется на достоверность на сервере - сеансовый ключ.
Абсолютно все ответы на запросы приходят в формате JSONP, так как запросы обязаны быть кроссдоменными. птттп
КОРОТКО ОБ АВТОРЕ -
Гобедашвили Баграт Автандилович - студент, Московский государственный горный университет, Moscow State Mining University, Russia, ud@msmu.ru
_A