Лабораторна робота № 2.2
«Створення WEB-сторінки віртуальної
організації засобами HTML та JAVASCRIPT»
Мета лабораторної роботи: Навчитися створювати прості HTML-сторінки та використовувати мову JavaScript, а також прості серверні скрипти для обробки отриманої від клієнта інформації.
Порядок виконання:
Перед початком роботи переконатися, що на сервері встановлене необхідне програмне забезпечення (за необхідності встановити його) — Web-сервер Apache, PHP (див. лабораторну роботу 2.1).
- Для віртуальної організації обраного напрямку створити основну HTML-сторінку.
- Передбачити використання JavaScript для обробки форми або з іншою метою.
- Передбачити використання PHP для обробки даних на сервері.
Приклад виконання:
Для віртуальної організації на Інтернет-ринку пасажирських перевезень сайт має створюватись для організації-брокера.
Першим кроком у роботі даної віртуальної організації є введення клієнтами запиту про необхідні квитки. Тому має бути передбачена Web-сторінка, з якої клієнти матимуть можливість це зробити. Обробку форми (перевірку чи всі необхідні позиції клієнт заповнив) зручно робити в броузері і лише після перевірки пересилати на сервер, тому з цією метою використовуватиметься JavaScript.
Вигляд простої HTML-сторінки брокера віртуальної організації подано на рис. 2.6, а HTML- та JavaScript-коди — в табл. 2.2.
Рис. 2.6 Web-сторінка віртуальної організації
Таблиця 2.2
HTML-КОД WEB-СТОРІНКИ БРОКЕРА
<html> |
<head> |
<title>Брокер з пошуку авіа-квитків</title> |
<meta http-equiv=«Content-Type» content=«text/html; charset=windows-1251»> |
<script langюаge=«JavaScript»> |
<!-- |
Функція перевірки чи введено пункт вильоту |
function isEmptyFrom(per1) { |
if (per1.length == 0){ |
alert(«Введіть місце вильоту !»); |
f1.from1.focus(); |
} |
} |
--> |
</script> |
</head> |
|
Продовженя табл. 2.2
<body bgcolor=«#FFFFFF» onLoad=«f1.from1.focus()»> |
<table cellspacing=0 cellpadding=0 width=«100 %» border=0 height=«601»> |
<tr align=«left» valign=«top»> |
<td colspan=«3» height=«171»> |
<!- Табличка для заголовку сайту -> |
<table cellspacing=0 cellpadding=0 width=«100 %» border=0 align=«left»> |
<tr bgcolor=«#99CCFF»> |
<td valign=top align=left colspan=«3» height=«67»> |
<div align=«center»><font color=«#00ff00» size=«7» face=«Arial, Helvetica, sans-serif»> |
<img src=«avia.files/fl1.jpg» width=«175» height=«82» align=«left»><b><font color=«#003366»>Авіа-квитки on-line</font></b></font></div> |
</td> |
</tr> |
<tr> |
<td valign=top align=middle colspan=«3» height=«34»> |
<p><font size=«2» face=«Arial, Helvetica, sans-serif»><b>Порядок роботи з нашою системою</b>:</font></p> |
<ol> |
<li><font face=«Arial, Helvetica, sans-serif» size=«2»>Задайте параметри: напрямок перельоту, бажані дати, кількість квитків, клас місць — система підбере для Вас варіанти.</font></li> |
<li><font face=«Arial, Helvetica, sans-serif» size=«2»>Виберіть оптимальні тарифи з багатьох варіантів, відсортованих по ціні або даті.</font></li> |
<li><font size=«2» face=«Arial, Helvetica, sans-serif»>Оплатіть замовлення зручним для Вас способом</font> </li> |
</ol> |
</td> |
</tr> |
</table> |
|
</td> |
</tr> |
<tr> |
<td bgcolor=#e6e8ec colspan=«3»> |
<div align=«center»><font face=«Arial, Helvetica, sans-serif» size=«3»>
<b>Крок |
1. Введення параметрів перельоту</b></font></div> |
</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> |
|
//Форма для вводу параметрів перельоту для обробки викликає серверну програму process.php |
|
