Курсовая работа (т): Використання сучасних Javascript фреймворків для розробки Web-модулів CRM-систем обслуговування авіарейсів

Метод $ format. () використовується для форматування значень валют, дат і чисел. Другий параметр переданий в $ format.() - це покажчик формату. Наприклад, передача "с" означає, що значення має бути відформатовано як грошове. Коли ми відкриємо сторінку в браузері, все буде відформатовано так, як і належить за всіма вимогами, приклад зображено на рисунку 2.2.

jQuery Validate - бібліотека валідації введених даних. Для того щоб перевірити правильність введених даних додаємо до поля, яке потрібно перевірити, html атрибут «class», і це підключить перевірку.

При виклику метода Validate на формі, створюється об'єкт «Validator» з усіма правилами та опціями, приєднаними до форми. Метод «Validate» приєднує «Validator» використовуючи "$.data". Ми можемо отримати його вибравши форму і викликавши функцію JQuery "$.data" і передати її «Vaidator». Об'єкт «Vaidator» - це всі метадані для валідації, які дають нам можливість доступу до опцій валідації в будь-який час життєвого циклу сторінки.

Рисунок 2.2 - Приклад роботи jQuery Globalization

Використовуючи цей об'єкт, ми можемо змінити під час виконання опції, які ми передали методу валідації, такі як додавання або видалення правил, зміна поведінки, якщо поле валідне або невалідне, або навіть введення селектора ігнорування. Ви можете відключити валідацію певних подій, передавши їх як ключі в методі validate, і false в якості значень.

.3 Розробка інтерфейсу

Сьогодні багато програмістів користуються для програмування користувацьких інтерфейсів набір класів Swing. Swing - на набір класів, що пропонують більш потужні та гнучкі GUI - компоненти, ніж AWT. Більшість сучасних графічних користувацьких інтерфейсів javascrpt побудовані на основі Swing.

На початку існування javascript класів Swing не було взагалі. Причино їх розробки було не велика частина у вихідних підсистемах GUI Java: AWT. AWT визначає базовий набір елементів управління, вікон і діалогів, які підтримують придатний до використання, але обмежений у можливостях графічний інтерфейс. Одною з причин обмеженості AWT є те, що AWT перетворює свої різні візуальні компоненти в відповідні їх еквіваленти, не залежні від платформи, що називаються рівноправними компонентами.

Використання рідних рівноправних компонентів породжує деякі проблеми. По-перше, в зв’язку з відмінностями, існуючими між операційними системами, компонент може виглядати або навіть вести себе по-різному на різних платформах. Така мінливість йшла врозріз з філософією Java: «Написано раз, працює всюди». З появою Swing були зняті ці обмеження. Але хоча Swing вирішує деякі проблеми, що виникали раніше, він не заміняє AWT, а більше його класи побудовані на основі AWT.

За деякими виключеннями, компоненти Swing є «полегшеними». Це означає, що вони написані виключно на javascript і не перетворюються і рівноправні компоненти, для конкретної платформи. Оскільки полегшенні компоненти відтворюються з графічних примітивів, вони можуть бути прозорими, що дозволяє отримувати не прямокутні форми. Отже, полегшенні компоненти є більш ефективними і гнучкими. Більш того, оскільки полегшенні компоненти не перетворюються в еквівалентні «рідні» компоненти, зовнішній вигляд кожного компонента визначається класами Swing, а не базовою операційною системою.

Для розробки графічного інтерфейсу на дипломну роботу було використано такі класи Swing:

·        JFrame - компонент для відображення вікна;

·        JPanel - контейнер, в який можна поміщати інші елементи;

·        JButton - елемент для відображення та обробки подій кнопки;

·        JDialog - компонент для відображення діалогових вікон;

·        JLabel - компонент для текстових міток у вікні, відображення текстової інформації

Рисунок 2.3 - Інтерфейс головного модуля

.4 Опис робочого циклу модулів

одуль пошуку та бронювання авіаквитків призначений для швидкого вбудовування модуля на туристичних сайтах, інтернет-порталах, а також рекомендований власникам відвідуваних сайтів туристичної тематики додатковий дохід з продажу авіаквитків. Модуль володіє ергономічним і інтуїтивно зрозумілим інтерфейсом, що дозволить користувачам без проблем самостійно знайти і забронювати авіаквиток на потрібну дату і рейс. Файли проекту містять тільки HTML і JavaScript і не вимагає серверного коду. Весь процес відбувається на стороні клієнта, в браузері користувача. Коли користувач заходить на сайт, то він завантажує зовнішній вигляд модуля з каталогу на сервері, а дані завантажує через спеціальний сервіс. Таким чином агентство може встановити модуль на своєму сервері і виправляти дизайном самостійно.

Процес оформлення авіаквитків здійснюється в кілька етапів: введення пошукових даних. Таких як напрям і дата вильоту. Отримання результатів пошуку і вибір найбільш відповідного перельоту. Заповнення даних, необхідних для резервування перельоту, такі як імена пасажирів та їх паспортні дані. Також необхідно вказати ім'я та контактну інформацію замовника. Після згоди покупця з умовами тарифу і публічною офертою відбувається бронювання.

Після бронювання для користувача створюється аккаунт в особистому кабінеті. На його електронну адресу надсилається інформація з паролем. В особистому кабінеті користувач може переглянути всі свої резервування і провести подальші операції щодо скасування або оплаті замовлень.

Основна концепція роботи будується на наступною схемою: JavaScript-код завантажує в браузер користувача HTML-шаблони і всі необхідні файли, такі як файли стилів, додатковий код і т.д. Далі код звертається до JSON-серверу, у якого запитує дані. Після накладення отриманих даних на шаблони та отримання кінцевого HTML-документа, виводить інформацію на екран. Таким чином всі файли, відповідальні за зовнішній вигляд сторінки, знаходяться на веб-сервері сайту і можуть бути змінені ним на свій розсуд.

.5 Налаштування програмного модуля

одуль пошуку та бронювання авіаквитків може бути встановлений на будь-який веб-сервер підтримує протокол HTTP незалежно від платформи і програмного забезпечення. Для цього на веб-сервері повинна бути виділена папка, файли в якій будуть доступні для завантаження з браузера.

Вимога до веб-серверу:

1.      Можливість зберегти папку з файлами модуля на веб-сервері;

2.      Можливість відкрити доступ для скачування всіх файлів модуля з цієї папки;

.        Ви повинні мати доступ до редагування HTML-коду сторінок сайту.

Так як Javascript-код модуля виконується на сторінці вашого сайту, в окремих випадках можуть виникати конфлікти з виконуваним кодом, який вже присутній на вашому сайті.

Перед установкою модуля необхідно отримати код клієнта, для цього буде потрібно повідомити домен вашого сайту, на якому передбачається установка модуля, та перемістіть файли модуля в будь-яку папку на сервері вашого сайту.

Залежно від кодування в якій працює ваш сайт необхідно встановити відповідну версію модуля. Зараз підтримується два кодування: UTF-8 і Windows-1251. Якщо встановити неправильну версію, то в деяких браузерах не буде відображатися кирилиця. Далі вам потрібно налаштувати файл config.js. Цей файл оголошує глобальну змінну alpConfig, яка містить всі настроюються параметри. Нижче представлено опис цих параметрів:- унікальний код клієнта.- змінна містить описи настройок підключення до JsonApi з бронювання авіаквитків.- змінна містить описи настройок підключення до JsonApi особистого кабінету.- змінна містить повний URL до папки alponline на вашому сервері.- змінна налаштовує значення імен кожній сторінці модуля. Кожна окрема секція модуля (рейси, офіс і т.д.) налаштовується у своїй змінної..root - змінна містить повний URL до завантажувальних файлів на сайті.- кількість результатів пошуку на сторінку.

.6 Інтеграція модуля з сайтом

При бажанні, можливо налаштувати модуль таким чином щоб він відображався всередині вже існуючих сторінок сайту, або вписувався в роботу вашої CMS. Для цього необхідно вставити код, що міститься у файлах flight.html і office.html на потрібні сторінки. На сторінку, де планується розмістити секцію бронювання квитків, додати наступний код в <head>:

<!-- Підключаем js біблиотеки -->

<script type="text/javascript" src="alponline/scripts/jquery/jquery-1.6.1.min.js"></script>

<script type="text/javascript" src="alponline/scripts/commons/alpEngine.js"></script>

<script type="text/javascript" src="config.js"></script>

<script type="text/javascript">.initialize();(function ($) {.loadPage("flights", alpEngine.getParam("pageName"), $("#alpContent"));

});

</script>

Даний код підключить дві JavaScript-бібліотеки: JQuery і alpEngine. Команда alpEngine.initialize проініціалізірует модуль, і завантажить основні файли для його відображення. Після завантаження сторінки виконається команда aEngine.loadPage. Перший аргумент якої - назва секції модуля; другий - назва сторінки, передана в параметрах; третій - визначає елемент на сторінці для вставці модуля. Після цього в тілі HTML-документа досить визначити елемент <div> C ID рівним "alpContent". Модуль завантажиться всередину нього. Ви можете регулювати ширину контейнера для модуля стандартними засобами, проте пам'ятайте що модуль розрахований на роботу при ширині від 600 пікселів. Для секції особистого кабінету потрібно створити свою сторінку, яка буде відрізнятися тільки першим параметром функції alpEngine.loadPage: "office". Адреси сторінок пошуку і особистого кабінету не повинні містити параметрів.додатки стають все більш поширеними і все більш складними, граючи таким чином основну роль у більшості онлайнових проектів. Як і у всіх системах, заснованих на взаємодії між клієнтом і сервером, уразливості web-додатків зазвичай виникають через некоректну обробки запитів клієнта та / або недостатньої перевірки вхідної інформації з боку розробника.

Сама природа web-додатків - їх здатність зіставляти, обробляти і поширювати інформацію через Internet - робить їх двічі уразливими. По-перше, що найочевидніше, вони повністю відкриті з причини необхідності забезпечення публічного доступу.

Це робить неможливим застосування техніки "security through obscurity" (безпеку за рахунок приховування інформації) і підвищує вимога до стійкості коду. По-друге, що більш важливо з точки зору тестування на проникнення, вони обробляють дані, отримані із запитів HTTP-протоколу - протоколу, який може використовувати безліч способів кодування і інкапсуляції інформації.

Більшість середовищ, в яких виконуються додатки (включаючи ASP і PHP, обидва з яких будуть використані в прикладах), передають ці дані розробнику таким чином, що він виявляється не в змозі визначити, звідки вони були отримані і, отже, який перевірці повинні бути піддані.

Оскільки web-середу настільки різноманітна і містить так багато форм програмованого контенту, контроль введення і перевірка осмисленості даних є ключовими факторами для забезпечення безпеки web-додатків. Це включає як виявлення областей можливих значень для всіх елементів даних, що вводяться користувачем (і примусове завдання коректних значень), так і достатнє розуміння того, звідки надходить інформація, в цілях визначення тих даних, які можуть бути задані користувачем.

Помилки, пов'язані з перевіркою коректності введення, часто досить складно виявити у великому обсязі коду, що взаємодіє з користувачем. Це є основною причиною того, що розробники використовують методологію тестування додатків на проникнення для їх виявлення. Web-додатки, однак, не мають імунітету і до більш традиційних способів атаки. Досить поширені погані механізми аутентифікації, логічні помилки, ненавмисне розкриття інформації, а також такі традиційні помилки для звичайних додатків як переповнення буфера.

Приступаючи до тестування web-додатків, необхідно враховувати все перераховане, і повинен застосовуватися методичний процес тестування введення / виведення за схемою "чорного ящика" в поєднанні (якщо можливо) з аудитом вихідного коду.додаток являє собою систему, зазвичай включає набір скриптів, розташованих на web-сервері і взаємодіючих з базами даних та іншими джерелами динамічного контенту. Вони швидко стають всюдисущими, оскільки дозволяють постачальникам послуг та їх клієнтам обмінюватися і маніпулювати інформацією (часто) незалежним від платформи способом за допомогою інфраструктури Internet. Прикладами web-додатків є пошукові системи, web-пошти, онлайнові магазини і т.п.додатки зазвичай взаємодію з користувачем за допомогою елементів форм і змінних GET або POST. У разі використання методу GET все значення, передані додатком можуть бути видні безпосередньо в URL, в той час як у випадку POST-запитів для визначення того, що вводить користувач, часто доводиться вивчити вихідний текст сторінки, що містить форму (або перехопити і декодіроватьзапрос).запит, переданий типовим web-додатком, виглядає наступним чином:/ sample.php? Var = val & var2 = val2 HTTP/1.1 | метод REQUEST-URI протокол / версія Session-ID: 361873127da673c | заголовок Session-ID Host: www.webserver.com | заголовок Host <CR> <LF> <CR > <LF> | два перекладу рядка.

Кожен елемент цього запиту потенційно може бути використаний web-додатком, його обрабативающіем. У REQUEST-URI знаходиться адресу програмної одиниці, яка буде запущена для обробки запиту, а також рядок зі списком параметрів - список пар & variable = value, що визначають вхідні параметри. Це основна частина вхідних даних web-додатки. Тема Session-ID містить ідентифікатор сесії, встановленої клієнтом в якості примітивної форми аутентифікації. Тема Host призначений для вибору одного з декількох віртуальних хостів, викорис один і той же IP-адресу, і зазвичай обробляється web-сервером, але може бути доступний і web-додатком.

Тестуючий повинен використовувати всі доступні методи введення даних для досягнення виняткових умов всередині програми. Тобто ви не повинні бути обмежені тим, що надає броузел чи автоматизовані засоби. HTTP-запити дуже легко генеруються за допомогою таких утиліт як curl, або скриптів оболонки, що використовують netcat. Процес вичерпного тестування за методом чорного ящика включає в себе дослідження кожного елемента даних, визначення очікуваного введення, спотворення його, і аналіз результатів роботи програми на предмет виявлення ознак несподіваного поведінки.

Одним з перших кроків тестування має бути визначення оточення, в якому виповнюється web-додаток. Це включає інформацію про використовувані скриптових мовах, web-сервері, операційній системі. Всі ці критичні деталі легко вивідати у типового web-сервера таким чином:

Проаналізувати відгук на HTTP-запити HEAD і OPTIONS

Заголовок і будь-яка сторінка, повернене запитом HEAD і OPTIONS зазвичай містить рядок SERVER: (або щось аналогічне), в якій міститься інформація про версії web-сервера і, можливо, інформація про оточення або використовуваною операційною системою:/ HTTP/1.0 HTTP/1.1 200 OK Server: Microsoft-IIS/5.0 Date: Wed, 04 Jun 2003 11:02:45 GMT MS-Author-Via: DAV Content-Length: 0 Accept-Ranges: none DASL: < DAV: sql> DAV: 1, 2 Public: OPTIONS, TRACE, GET, HEAD, DELETE, PUT, POST, COPY, MOVE, MKCOL, PROPFIND, PROPPATCH, LOCK, UNLOCK, SEARCH Allow: OPTIONS, TRACE, GET, HEAD, COPY, PROPFIND, SEARCH, LOCK, UNLOCK Cache-Control: private

Дослідити формат і текст інформації про 404-й помилку сервера (та інших)

Деякі системи (наприклад, ColdFusion) мають специфічні і, отже, легко впізнавані повідомлення про помилки, а також часто дозволяють дізнатися версії використовуваних скриптових мов.

Тестуючий повинен навмисно запросити сторінки, що призводять до подібних помилок, а також використовувати альтернативні методи запиту (POST, PUT і т.п.) ля витягання цієї інформації з сервера.

Багато web-сервери (наприклад Microsoft IIS) по-різному реагують на запити файлів з підтримуваними і невідомими розширеннями. Тестує слід спробувати запросити файли зі стандартними розширеннями, такими як. ASP,. HTM,. PHP,. EXE, і стежити за появою якого-небудь незвичайного результату або кодів помилок./ blah.idq HTTP/1.0 HTTP/1.1 200 OK Server: Microsoft-IIS/5.0 Date: Wed, 04 Jun 2003 11:12:24 GMT Content-Type: text / html <HTML> The IDQ file blah.idq could not be found.

Оригінальний текст сторінки, згенерованої web-додатком, може дати натяк на використовуване програмне оточення.

<title> Home Page </ title> <meta content="Microsoft Visual Studio 7.0" name="GENERATOR"> <meta content="C#" name="CODE_LANGUAGE"> <meta content = "JavaScript" name = "vs_defaultClientScript" >