Продовженя табл. 2.2
<form id=f1 name=«f1» action=«processing.php» method=post > |
<tr> |
<td colspan=«3»> |
<table cellspacing=0 cellpadding=0 width=«100 %» border=0> |
<tr> |
<td class=Text width=«58»><b>Виліт</b></td> |
<td align=middle width=«177»> |
<input type=«text» size=30 name=«from1» onBlur=«isEmptyFrom(f1.from1.value)»> |
</td> |
<td class=Text width=«39»>Дата</td> |
<td width=«44»> |
<select class=axinput id=day1 tabindex=3 size=1 name=day1> |
<option value=01 selected>1 |
<option value=02>2 |
<option value=03>3 |
… |
<option value=31>31</option> |
</select> |
</td> |
<td width=«66»> |
<select class=axinput id=month1 tabindex=4 |
size=1 name=month1> |
<option value=«01» selected>Січ</option> |
<option value=«02»>Лют</option> |
<option value=«03»>Бер</option> |
... |
<option value=«12»>Груд</option> |
</select> |
</td> |
<td class=Text width=«600»>туди</td> |
</tr> |
<tr> |
<td class=Text width=«58»><b>Приліт</b></td> |
<td align=middle width=«177»> |
<input type=«text» size=30 name=«to1»> |
</td> |
<td class=Text width=«39»>Дата</td> |
<td width=«44»> |
<select class=axinput id=day2 tabindex=6 size=1 name=day2> |
<option value=01 selected>1 |
<option value=02>2 |
... |
<option value=31>31</option> |
</select> |
</td> |
<td width=«66»> |
<select class=axinput id=month1 tabindex=4 size=1 name=month2> |
<option value=«01» selected>Січ</option> |
<option value=«02»>Лют</option> |
Продовженя табл. 2.2
<option value=«03»>Бер</option> |
<option value=«12»>Груд</option> |
</select> |
</td> |
<td class=Text width=«600»>назад</td> |
</tr> |
</table> |
</td> |
</tr> |
<tr> |
<td bgcolor=#e6e8ec colspan=«3»> |
<p class=padding style=«COLOR: #000000»><font face=«Arial, Helvetica, sans-serif» size=«3»>Вкажіть число пасажирів та уточніть вимоги</font></p> |
</td> |
</tr> |
<tr align=«left» valign=«top»> |
<td height=131 width=«27 %»> |
<div style=«WIDTH: 1px; HEIGHT: 3px»> |
<p><font face=«Arial, Helvetica, sans-serif» size=«3»><spacer height=«3» width=«1» type=«block»><b>Пасажири</b> </spacer> |
<spacer height=«3» width=«1» type=«block»></spacer></font></p> |
<font face=«Arial, Helvetica, sans-serif» size=«3»><spacer height=«3» width=«1» type=«block»> |
</spacer><spacer height=«3» width=«1» type=«block»> </spacer></font><font size=«3»><spacer height=«3» width=«1» type=«block»> </spacer></font> |
<spacer height=«3» width=«1» type=«block»> |
<table cellspacing=0 cellpadding=0 border=0 width=«220»> |
<tbody> |
<tr class=Text> |
<td>Дорослі:</td> |
<td> |
<select class=axinput id=adults tabindex=9 name=adults> |
<option value=1 selected>1</option> |
<option value=2>2</option> |
... |
</select> |
</td> |
</tr> |
<tr class=Text> |
<td>Діти (до 12 років):</td> |
<td> |
<select class=axinput id=children tabindex=10 name=children> |
<option value=0 selected>0</option> |
<option value=1>1</option> |
<option value=2>2</option> |
... |
</select> |
</td> |
</tr> |
Продовженя табл. 2.2
<tr class=Text> |
<td>Діти (до 2 років):</td> |
<td> |
<select class=axinput id=infants tabindex=11 name=infants> |
<option value=0 selected>0</option> |
<option value=1>1</option> |
... |
<option value=2>2</option> |
</select> |
</td> |
</tr> |
</tbody> |
</table> |
</spacer></div> |
</td> |
<td height=131 width=«37 %»> |
<p><font face=«Arial, Helvetica, sans-serif» size=«3»><b>Клас </b></font></p> |
<p><font face=«Arial, Helvetica, sans-serif» size=«3»><b> |
<input tabindex=12 type=radio CHECKED value=X name=class1> </b>Будь-який<br> |
<input tabindex=13 type=radio value=Y name=class1> Економ.<br> |
<input tabindex=14 type=radio value=C name=class1> Бізнес<br> |
<input tabindex=12 type=radio value=F name=class1> Перший</font></p> |
</td> |
<td height=131 width=«36 %»> |
<p><font face=«Arial, Helvetica, sans-serif» size=«3»><b>Білет</b> </font></p> |
<p> <font face=«Arial, Helvetica, sans-serif» size=«3»> |
<input tabindex=16 type=radio CHECKED value=R name=fl_type>Туди-назад<br> |
<input tabindex=17 type=radio value=O name=fl_type> В один кінець<br> |
<input tabindex=18 type=checkbox value=1 name=directflight> Лише прямі рейси</font></p> |
</td> |
</tr> |
<tr> |
<td bgcolor=#e6e8ec colspan=«3»> |
<p class=padding style=«COLOR: #000000»><font face=«Arial, Helvetica, sans-serif» size=«3»>Виберіть варіанти пошуку і починайте пошук місць </font></p> |
</td> |
</tr> |
<tr align=«left» valign=«top»> |
<td height=«68» colspan=«3»> |
<table cellspacing=0 cellpadding=0 width=«100 %» border=0> |
<tbody> |
<tr class=Text> |
<td colspan=«4» height=«77»> |
<div style=«WIDTH: 10px; HEIGHT: 1px»><spacer height=«1» width=«10» type=«block»></spacer></div> |
<table cellspacing=0 cellpadding=0 border=0> |
<tr class=Text> |
Закінчення табл. 2.2
<td colspan=2><b>Пошук місць:</b></td> |
</tr> |
<tr class=Text> |
<td width=15> |
<input type=radio CHECKED value=SO name=engine> |
</td> |
<td>Сортувати по тарифах</td> |
</tr> |
<tr class=Text> |
<td> |
<input type=radio value=SA name=engine> |
</td> |
<td>Сортувати по часу</td> |
</tr> |
</table> |
</td> |
<td colspan=«3» width=319 height=«77»> |
<input type=submit value=«Почати пошук» name=«Почати пошук»> |
</td> |
</tr> |
</table> |
</td> |
</tr> |
</form> |
</table> |
</body> |
</html> |
Як видно з перших рядків програми, мова JavaScript у даному випадку використовується для перевірки заповнення форми на клієнті до пересилання на сервер. Зокрема, здійснюється перевірка чи введено пункт вильоту.
При виконанні даної лабораторної роботи слід звернути увагу на те, що оператори мови сценаріїв JavaScript можуть бути додані у HTML код Web-сторінки, або ж оформлені у вигляді окремого файлу.
Сценарій JavaScript забезпечує не лише можливість часткової обробки інформації (введеної в форму) на стороні клієнта (без передачі на сервер) та зміну вмісту полів форм залежно від події (наведення мишки та ін.), за необхідності для виконання лабораторії роботи слід використовувати й інші можливості.
Текст серверної програми, написаної мовою PHP, може виглядати так, як показано в табл. 2.3. До даної лабораторної роботи пропонується проста програма, яка лише повідомляє клієнту, що його запит прийнято — для першого знайомства з мовою PHP. Однак, для можливості її виконання на сервері має бути встановлене відповідне програмне забезпечення (Web-сервер Apache, PHP).
Таблиця 2.3
ТЕКСТ ПРОГРАМИ PROCESSING.PHP
<?php
echo «Здійснюється пошук квитків із», $from1, «в», $to1, «це може зайняти деякий час»;
// require(«poisk.php»);
?> |
Як видно з тексту програми, за допомогою команди echo виводиться текстове повідомлення, а також функцією require викликається деяка програма poisk.php. Відповідний рядок закоментований, оскільки програма poisk.php поки що відсутня.
Сама програма розміщується на сервері там, де й HTML-сторінка, і викликається після того, як з броузера користувача буде передано дані форми. За допомогою препроцесора PHP на основі цієї програми формується HTML-сторінка, яка й передається в броузер (рис. 2.7).
Рис. 2.7. Відповідь сервера |
