Технологія WebSnap

Лабораторнаробота
 
ТехнологіяWeb Snap

Мета: отримання практичних навиків обміну данимиміж прикладенням C++ Builder і базою даних інформаційної системи в комп'ютерніймережі Internet з використанням технології WebSnap.
 Завдання:
·         засобами C++ Builder із використанням технології WebSnap створити оригінальне (!)прикладення, яке складається з декількох html-сторінок;
·         використати панель навігації, адаптери і парольний доступдо сторінок, реалізовані засобами технології WebSnap;
·         забезпечити зв'язок прикладення з БД типу InterBase (абоін.): забезпечити можливість перегляду і редагування записів перетину таблиціБД за допомогою html-сторінок.

Вказівки по встановленню і налагодженню Web-сервера IIS
 
·         Якщо Web-сервер не встановлений, то необхідно йоговстановити таким чином: виконати команду Пуск | Панель управления, обратипіктограму Установкаи удаление программ, потім обрати пункт Установка компонентов Windows,відзначити галочкою Internet Information Services (IIS) і виконатиподальші інструкції операційної системи.
·         Після успішного встановлення необхідно запустити IIS, для чоговиконати команду Пуск | Панель управления, обрати піктограму Администрирование, обратиярлик InternetInformation Services, а в списку, що з'явився, — Веб-узел по-умолчанию (мал.1) інатиснути кнопку запуску.
/> 
Малюнок 1
 
·                   Для налагодження Веб-узла по умолчанию треба вконтекстному меню обрати команду Свойства і встановити параметри згідно мал. 2.

/> 
Малюнок 2
 
Нижче описана методика створення WebSnap-сервера, щопідтримує повний інтерфейс редагування і перегляду для набору даних зграфічними полями. Такий WebSnap-сервер не вимагаєнаписання коду. Проте, він підтримує повний набір функціональних можливостей змодифікації таблиці БД за допомогою браузера.
 
Приклад 1. Простий WebSnap-сервер
Длястворення WebSnap-сервера усередовищі Borland C++ Builder 6 скористаємося майстром, якийвикликається командою File | New | Other | WebSnap | WebSnap Application (мал. 3).
Наекрані відобразиться діалог (мал. 4).

/> 
Малюнок 3
Група параметрів Server typeдозволяєобрати тип прикладення.
Група Application Module Components (модуль компонентівприкладення) призначена для вибору компонентів, які будуть розташованів основному модулі прикладення і вид модуля. Модуль компонентів Web-прикладеннявикористовується для централізації керування діловими правилами і невізуальними компонентами.
/> 
Малюнок 4
Можнавибрати один з двох видів модулів:
·         МодульWeb-сторінки (Page Module) включає компоненти: PageProducer, WebAppServices, ApplicationAdapter, LogicalPageDispatcher, і AdapterDispatcher. Звикористанням модуляWeb-сторінкив редакторі коду можна переглянути unit Web-сторінки, html-код і виконатипопередній перегляд Web-сторінки після компіляції і виконання модуля.
·         Модульданих(Data Module) включає компоненти: PageProducer, WebAppServices, ApplicationAdapter, LogicalPageDispatcher, і AdapterDispatcher.
Слово Application у назві модуля вказує на те, щомодуль буде головним у прикладенні. Натиснувши кнопку Components, можна побачитидіалог вибору компонентів (мал. 5), які будуть розташовані в модуліприкладення.
Група Application Module Optionsдозволяєнабудувати параметри основного модуля прикладення. Параметр Page Nameдозволяєвказати ім'я сторінки модуля (доступний лише для типу модуля Page Module).Параметр Cachingдозволяєзадати режим кешування прикладення. За умовчанням параметр має значення Cache Instance (дозволити кешування). Другеможливе значення — Destroy Instanceвідключаєкешування. Залишимо даний параметр без зміни. Кнопка Page Optionsвикликаєдіалог налагодження параметрів модуля прикладення (мал. 6). Групапараметрів Producerдозволяєобрати тип продюсера сторінки (рядок введення Type) і скриптову мову(JScriptабо VBasic). Група HTMLдозволяєвказати шаблон для генерації HTML-сторінки. Група Pageдозволяєнабудувати параметри сторінки: ім'я, заголовок, видимість (параметр published) інеобхідність аутентифікації користувача для перегляду даної сторінки (параметр Login Required). Ім'ядублює параметр Page Nameпопереднього діалогу.
/> 
Малюнок5

/>
Малюнок 6
Оберімо як Script Engineзначення JScript, а якпараметр Template– значенняStandard.Натиснемо кнопки Ok длявиходу з діалогів. Borland C++ Builder 6 згенерує заготівку проекту (мал. 7 –8).
/>
Малюнок 7
/>
Малюнок 8
Тепертреба модифікувати створений модуль так, щоб надалі не довелося упроваджувати внього пакети реального часу (у тому числі і динамічні бібліотеки RTL). Хоча урезультаті об'єм виконуємого модуля збільшиться, він зможе працювати набудь-якій платформі, включаючи і такі, де відсутній C++ Builder. Для цього уголовному меню C++ Builder оберіть команду Project | Options. Удіалоговому вікні Project Options, яке з'явиться після цього на екрані,відкрийте сторінку Linker і скиньте прапорець Use Dynamic RTL (використовуватидинамічну бібліотеку RTL). Відкрийте сторінку Packages і скиньтепрапорець Builderwith Runtime Packages (Компілювати з пакетами реального часу).
Тепер залишилося зберегти і скомпілювати проект.Одержаний виконуваний файл і шаблон сторінки Unit1.html треба розташуватина Web-сервері у каталозі скриптів (для IISце каталогc:\Inetpub\Scripts).Запустимо Web-браузер Internet Explorerі в рядкуадреси наберемо localhost/Scripts/Project1.dll (у разівикористання Apache та дляінших Web-серверів адреса буде іншою). У вікні браузера ми побачимо напис PageProducerPage1(мал.9).
/> 
Малюнок 9
 
Приклад 2.Використання панелі навігації у WebSnap-сервері
Длядоопрацювання сторінки встановимо властивість ApplicationTitleкомпонентуApplicationAdapterу значення«WebSnap-приложение№2». А зараз сюрприз: HTML-сторінка, що згенерована, може бутипереглянута без перенесення прикладення на Web-сервер (візуалізація сторінокможе значно прискорити розробку Web-прикладень). Для цього необхідно обратизакладку Previewу нижній частині вікна редагування (мал. 10).

/>
Малюнок 10
Другазакладка Unit1.html – міститьтекст шаблона html-сторінки, а закладка HTML Result – результуючийHTML-код.
Текстшаблону html-сторінки
 








Welcome


">Logout


>Login






s = ''
c = 0
for (;!e.atEnd(); e.moveNext())
{
if(e.item().Published)
{
if (c>0) s +=' | '
if (Page.Name !=e.item().Name)
s += '' + e.item().Title + ''
else
s +=e.item().Title
c++
}
}
if (c>1)Response.Write(s)
%>




 
Результирующийhtml-код
 



PageProducerPage1



WebSnap-приложение№2
PageProducerPage1






 
WebSnap-прикладенняв реальнихпроектах містить декілька модулів сторінок. Додамо новий модуль сторінки уприкладення командою File | New | Other | Web Snap | WebSnap Page Module. У діалозі виборупараметрів модуля (мал. 3.11) натиснемо кнопку ОК, — одержимомодуль сторінки з ім'ям PageProducerPage2 (мал. 3.12).
/> 
Малюнок 11

/>
Малюнок 12
Тепер, побудуємо прикладення і розташуємо його наWeb-сервері (для цього необхідно скопіювати файли Unit1.html, Unit2.html, Project1.dll у текудля скриптів на сервері). Запустимо Web-браузер Internet Explorerі у рядкуадреси наберемо localhost/scripts/project1.dll (у разівикористання Apache і дляінших Web-серверів адреса буде іншою). У вікні браузера побачимо, що нижче зазаголовка з'явилася панель навігації по сторінках прикладення (мал. 3.13).
/>
Малюнок 13
Відразувиникає питання, а як вона з'явилася, адже ми нічого не робили для їїгенерації? Відповідь криється у файлі Unit1.html. Крім HTML-тегів Web-сторінка міститьтеги ,усередині яких розташовані оператори скриптової мови. Дані операторивиконуються на боці сервера, результат їх роботи вставляється в сторінку, щонадсилається клієнту. Зі скриптів можна звертатися до більшості компонентів,розташованих в модулях. Це вносить чудову гнучкість і відкриває великіможливості для створення складних динамічних сторінок.
Текстскрипта необхідно укладати в тег . В якості скриптової мови можутьзастосовуватися JScriptі VBScript. Мивикористовуватимемо JScript. Тепер стає ясно, що функція:

s = ''
c = 0
for (;!e.atEnd(); e.moveNext())
{
if(e.item().Published)
{
if (c>0) s +=' | '
if (Page.Name !=e.item().Name)
s += '' + e.item().Title + ''
else
s +=e.item().Title
c++
}
}
if (c>1)Response.Write(s)
%>
у файлі Unit1.html генерує панель навігації. Текстфункції достатньо зрозумілий, деякі коментарі необхідні лише для останньогооператора Response.Write. Цейоператор виводить рядок з результатом роботи скрипта в HTML-файл сторінки. Щеодин приклад можна побачити в тому ж Unit1.html:


В результаті роботи цього скрипта на сторінкувиводиться її заголовок.
Приклад 3. Використання адаптерів у WebSnap-сервері
 
Адаптерипризначені для зберігання різнихпараметрів і процедур; вони надають можливість звертатися до них зі скрипта.Сторінка WebSnapпалітрикомпонентів Borland C++ Builder 6 містить декілька видів адаптерів.Найбільш неспеціалізованим є адаптер класу TAdapter. Параметриадаптера зберігаються в так званих полях (AdapterFields), якінадаютьпрограмісту можливість задати оброблювачі для отримання значення поля та іншихйого параметрів. Клас TAdapterмає властивість Data для зберіганняполів і керування ними. Процедури дозволяють викликати зі скрипта виконанняяких-небудь дій; для керування ними клас TAdapter містить властивість Actions.
Розглянемо приклад створення сторінки для введенняімені користувача. Розташуймо компонент Adapterв модулі PageProducerPage2.Визначимо поле, яке повертатиме ім'я користувача. Для цього з інспектораоб'єктів викличемо редактора властивості Data адаптера Adapter1. У редакторі натиснемокнопку New Item. Нам будезапропонований діалог вибору типу поля (мал. 13).
/> 
Малюнок 13

Оберімо тип AdapterField, оскільки він найбільш підходитьдля зберігання невеликих рядків. У діалозі при цьому з'явиться елемент AdapterField1,відповідний полю. Оберімо його. Тепер в інспекторі об'єктів перейдемо назакладку Eventsівизначимо текст оброблювача події OnGetValue. Дана подія виникає кожного разу, колипотрібно дізнатися значення поля. Значення поля, що зажадалося, необхідноповертати через параметр Value, передаваний в оброблювач. Код оброблювача:
void __fastcallTPageProducerPage2::AdapterField1GetValue(TObject *Sender,
Variant&Value)
{
Value = FValue;
}
Тут FValue — змінна, в якій запам'ятовуєтьсязначення поля AdapterField1;необхідно визначити цю змінну в секції publicдеклараціїTPageProducerPage2 (файл Unit2.h) як AnsiString FValue;. Дляініціалізації значення FValue в оброблювачі події OnCreate модуля введемо код: FValue = “Неизвестный человек”;.
Тепер можна отримати доступ до даного поля зі скрипта.Спершу спробуємо виводити значення поля користувачу. Для цього в код шаблонуHTML-сторінки Unit2.html требадодати після тега наступний код:
Здравствуйте, уважаемый.
 Скомпілюємо проект і розташуємо наWeb-сервері файли Unit1.html, Unit2.html, Project1. dll на сервері в тецідля скриптів. Запустимо Web-браузер Internet Explorerі в рядкуадреси наберемо localhost/scripts/project1.dll. Врезультаті на сторінці PageProducerPage2 побачимо напис Здравствуйте, уважаемый Неизвестный человек.
Далі створимо процедуру для зміни значення іменікористувача. У інспекторі об'єктів для компоненту Adapter1 викличеморедактора властивості Actions, і натиснувши кнопку New Item з діалогу, щоз'явився, оберімо тип процедури AdapterAction (мал. 15).
Буде створена нова процедура AdapterAction1. У інспекторіоб'єктів встановимо властивості для процедури (табл 3.1).
/> 
Малюнок 14
 
/> 
Малюнок 15

Таблиця 1Свойство Значение Описание DisplayLabel OK Текст для отображения в HTML шаблоне ActionName GetNameAction1 Имя процедуры для использования в скриптах
void __fastcallTPageProducerPage2::AdapterAction1Execute(TObject *Sender,
TStrings *Params)
{
FValue =AdapterField1->ActionValue->Values[0];
}
Цей код зберігає значення поля AdapterField1 у змінній FValue. Щоб надатикористувачу можливість вводити своє ім'я, в текст Unit2.html після рядка Здравствуйте, уважаемый додамовизначення форми введення:
  
VALUE ="">   Введите Вашеимя:   "
NAME="">   "onclick="'INPUT_NAME_FORM.__action.value='">    
Побудуємопроект, перенесемо файли Unit1.html, Unit2.html, Project1. dll на Web-сервер іпривітаємо себе (мал. 16).

/>
Малюнок 16
 
PagedAdapter дозволяєрозділити великий обсяг інформації, що виводиться, по сторінках. Обсягінформації, що розташовується на одній сторінці, задається у властивості PageSize.
 
Приклад 4. Парольний доступ до сторінки WebSnap-сервера
Часто потрібно забезпечити обмеження доступу до певнихсторінок прикладення. Одним з методів розв’язання даної задачі є парольнийзахист. Технологія WebSnapдозволяє реалізувати доступ до сторінок запаролем. Для підтримки парольного доступу в головному модулі повинні бутиприсутніми наступні компоненти:
·         WebUserList, якиймістить список користувачів, їх паролів і прав доступу;
·         SessionsService, якиймістить інформацію про користувачів, що використовують прикладення в даниймомент;
·         EndUserSessionAdapter, якийобробляє події підключення користувача.
Додати ці компоненти можна або на етапі створеннямодуля сторінки в діалозі Web App Components (див. мал. 3.5), аборозташувати їх самостійно у вже створений модуль. Скористаймося другим способомі забезпечимо парольний захист сторінки PageProducerPage2, розташувавшивищезгадані компоненти в модулі PageProducerPage1 (мал. 17). Для властивостіUserItemsкомпоненту WebUserList1 зінспектора об'єктів викличемо редактора і введемо двох користувачів, яким будедозволений доступ до сторінки: Ellen з паролем admin і Will без пароля (мал. 18).
/> 
Малюнок 3.17
 
/> 
Малюнок 18
Наступний крок припускає вказівку необхідностіпарольного захисту деякої сторінки. Для цього створимо нову сторінку PageProducerPage2 і в кінціфайлу Unit2.cpp, щомістить опис PageProducerPage2, знайдеморядок:
staticTWebPageInit WebInit(__classid(TPageProducerPage2), crOnDemand, caCache,PageAccess

Розкоментуймо фрагмент
staticTWebPageInit WebInit(__classid(TPageProducerPage2), crOnDemand, caCache,PageAccess
Тепер потрібно зробити html-сторінку длявведення імені і пароля користувача. Найбільш просто скористатися для цьогокомпонентом AdapterPageProducer.Виконаємо команду File | New | Other | WebSnap | WebSnap Page Module. У діалозіпараметрів сторінки змінюємо тип Type продюсера з PageProducer на AdapterPageProducer, а такожзнімаємо прапорець Published, оскільки за умовчанням сторінка для введення пароля неповинна відображатися в панелі навігації (мал. 19).
В результаті буде одержаний модуль сторінки з єдинимкомпонентом AdapterPageProducer (мал. 20).
Компонент AdapterPageProducer є спеціалізованим продюсером, щодозволяє генерувати HTML-сторінки для відображення полів адаптерів. Принципстворення сторінки в AdapterPageProducer простий. Весь документ являє собою набірWeb-компонентів, які програміст додає в редакторі, а за допомогою інспектораоб'єктів при необхідності налагоджує їх властивості і події. Web-компонентиможуть бути вкладені один в другий. Все це дозволяє комфортно і швидкопроектувати HTML-документи.
Як адаптер для забезпечення доступу до іменікористувача і його пароля використовуємо компонент LoginFormAdapter, який необхіднододати в модуль. Далі подвійним клацанням мишею по компоненту AdapterPageProducer викличемовізуального редактора HTML-сторінки. У ньому натиснемо кнопку New Item і додамоWeb-компонент типу AdapterForm (т.е HTML-форму) (мал. 21).
/> 
Малюнок 19
 
/> 
Малюнок 20
/> 
Малюнок 21

Далі,ще раз натиснувши кнопку New Item (при обраному Web-компоненті AdapterForm1), додамоWeb-компонент типу AdapterFieldGroup (набір полів для редагування полів адаптера) (мал. 22).
/> 
Малюнок 22
ДляAdapterFieldGroup1встановимо властивість Adapter рівним LoginFormAdapter1, таким чином вказавши адаптер, поля якогопотрібно відображати. У контекстному меню цього керуючого елементу оберімокоманду AddAll Fields. Тепер для полів FieldUserName, FieldPasswordі FieldNextPageвластивістюCaptionможназадати національні мітки. Стилі міток можна задати властивістю Styleіззначенням, наприклад, font-family: arial; font-weight: bold; font-size: 12px.
Далі оберімо Web-компонент AdapterForm1, ще раз натиснемокнопку New Item і додамоWeb-компонент типу AdapterCommandGroup (набір кнопок для виклику процедурадаптера). Для Web-компоненту AdapterCommandGroup1 задамо властивість DisplayComponent рівним AdapterFieldGroup1.Результат наших дій представлений на мал. 23.

/> 
Малюнок 23
Залишився останній крок: зберегти модуль під ім'ям LoginPage, перейтив модуль PageProducerPage1 (головнусторінку) вказати у властивості LoginPage компоненту EndUserSessionAdapter1 значення LoginPage
Теперможна побудувати проект і перенести на Web-сервер файли Unit1.html, Unit2. html Unit3.html,Project1. dll. Подивимося, що з'явилося – вверху сторінки з'явилосяпосилання з текстом Вход (мал. 24).
/> 
Малюнок 24
Оберімо Входабо Страницапросмотра/редактирования данных, введемо в поля Имя польователя і Пароль (мал. 25) ім'я Ellen і пароль admin, як наступнусторінку указуємо Страница просмотра/редактирования данных, натискаємокнопку Вход.

/> 
Малюнок 25
/>
Малюнок 26
 
Приклад 5.Робота з базою даних за допомогою WebSnap-сервера
БД надають можливість зберігати і обробляти великіобсяги інформації. Можливість роботи з БД на сьогодні є просто необхідниматрибутом будь-якого засобу розробки Web-прикладень. Технологія WebSnapнадаєдостатньо продумані і зручні засоби публікації вмісту БД, а в поєднанні з СКБД Interbaseдозволяє будувати прикладення для роботи з БД, що задовольняють запитамнайвередливіших користувачів. Спроектуємо сторінку для відображення вмістутаблиці biolifeдемонстраційноїБД Interbase 7.5 C:\Program Files\Common Files\ Borland Shared\Data\dbdemos.gdb.
Вказівки по налагодженню бази даних
Для роботи з БД необхідно встановити на комп'ютер InterBase Server 7.5 і задопомогою, наприклад, програми IBExpert зареєструвати БД C:\Program Files\ Common Files\Borland Shared\Data\dbdemos.gdb під псевдонімом IBDBDemos (мал. 27).

/>
Малюнок 27
 
СтворенняWebSnap-сервера
Длярозташування компонентів зв'язку з БД в проект необхідно вставити модуль даних WebDataModuleзадопомогою майстра. Виконаємо команду File | New | Other | WebSnap | WebSnap Data Module. Удіалозі, що з'явився (мал. 28), вкажемо спосіб створення модуля Always і спосіб йогознищення CacheInstance.
/> 
Малюнок 28
 
Післяцього розташуймо в модулі компоненти: IBDatabase, IBTransaction, IBDataSetі зв'яжемоїх з БД IBDBDemosі таблицеюbiolife, якамістить графічні поля, поля коментарів, числові і текстові поля, які можнапублікувати і редагувати з використанням WebSnap (мал. 29).
 
/>
Малюнок 29
 
В одержаний модуль додамо DataSetAdapterі зв'яжемойого з джерелом даних, призначивши властивості DataSetзначення IBDataSet1. Далідвічі клацнемо мишею по компоненту DataSetAdapter1 і за допомогоюкоманди Add AllFields контекстного меню встановимо список полів, що відображаються (мал… 30).
 
/> 
Малюнок 30
 
Для публікації даних таблиці БД найзручнішевикористовувати компонент-продюсер AdapterPageProducer. Додамо в модульсторінки PageProducerPage2 компонентAdapterPageProducer. Післяцього подвійним клацанням миші по компоненту AdapterPageProducer,викличемо редактора для побудови HTML-сторінки. Натиснемо в редакторі кнопку New Item і додамоWeb-компонент AdapterForm1, далі на AdapterForm1 тією жкнопкою додамо компонент AdapterGrid1 і встановимо його властивості:
·         Adapterв значенняBiolifeWebDataModule->DataSetAdapter1 (длязв'язку сторінки з джерелом даних потрібно не забути додати в початковий кодсторінки посилання #include «Unit4.h» на модуль даних WebDataModule);
·         AdapterModeв значення Edit (режимредагування);
·         Командою AddAllColumnsконтекстного менювизначимо список полів, що відображаються (тут також можна змінити найменуванняполів на національні за допомогою їх властивостей Caption).
ОскількиWebSnapвикористовується для побудови stateless-серверів, що працюють зБД, слід вказати первинний ключ, що дозволяє набору даних активізуватинавігацію по таблиці і маніпуляцію даними по запиту клієнта. WebSnap виконає все цеавтоматично після завдання первинного ключа. Використовуємо як первиннийключ поле SpeciesNo. Спочатку слід вибрати поле в Object Treeviewдля BiolifeWebDataModule (мал. 3.31).
/> 
Малюнок 31
Потім необхідно модифікувати властивість ProviderFlags вінспекторі об'єктів, встановивши pfInKey в значення true, щоб вказати, що Species No єпервинним ключем для даного набору даних. Тоді сторінка буде доповнена«мережею», що відображує поля записів таблиці (мал. 32).
/>
Малюнок 32
НаступнимWeb-компонентом, який ми додамо на AdapterGrid1, буде компонент AdapterCommandColumn1, у якомувідображатиметься кнопка CmdEditRow (Детали) керування поточнимзаписом таблиці (мал. 33). Для кнопки CmdEditRowвстановимовластивість PageNameв значенняDetailPage, яка щене створена і в якій буде надана можливість редагування таблиці БД.
Дляредагування даних поточного запису таблиці БД створимо ще одну Web-сторінку.Виконаємо команду File | New | Other | WebSnap | WebSnap Page Module.
Удіалозі параметрів сторінки слід змінити тип Type продюсера з PageProducer на AdapterPageProducer, а такожвстановити прапорець LoginRequired, оскільки за умовчанням сторінка для редагуванняданих повинна бути доступна не всім користувачами (мал. 34).

/>
Малюнок 33
/> 
Малюнок 34
/>
Малюнок 35
Посилання на джерело даних для нього встановимо задопомогою оператора #include “Unit4.h”. Натиснемо в редакторі кнопку New Item і додамоWeb-компонент AdapterForm1, далі на AdapterForm1 тією жкнопкою додамо компонент AdapterFieldGroup1 і встановимо його властивості:

AdapterFieldGroup1->Adapter= BiolifeWebDataModule->DataSetAdapter1
AdapterFieldGroup1->Adapter->Mode= Edit
НаAdapterForm1 додамокомпонент AdapterCommandGroup1, у якомувідображатимуться кнопки навігації по таблиці, і який забезпечить редагуванняданих. Його властивість DisplayComponentслід встановити взначення AdapterFieldGroup1. КомандоюAddCommandsконтекстногоменю можна задати список кнопок. Тоді сторінка буде доповнена кнопками керуваннятаблицею (мал.36).
/> 
Малюнок 3.36
Побудуємо проект, опублікуємо на Web-сервері файли: project1.dll, unit1.html,unit2. html, unit3.html, unit4.html, unit5.html, запустимо браузері вкажемо на адресу localhost/ scripts/project1.dll.
Результатроботи WebSnap-прикладення показаний на мал. 37.

/>
Малюнок 37а)
/>
Малюнок 37 б)