2. Основи
У цьому розділі ми розглядаємо основи веб-програмування. Його основною метою є ознайомлення з основними принципами веб-програмування перед тим, як застосовувати їх на практиці з використанням конкретної мови та середовища. У ньому наведено чимало прикладів, які рекомендується перевірити, щоб поступово «ввібратися» у філософію веб-розробки.
2.1. Компоненти веб-додатку
 |
Номер | Роль | Типові приклади |
OS Сервер | Linux, Windows | |
Веб-сервер | Apache (Linux, Windows) IIS (NT), PWS (Win9x) | |
Скрипти, що виконуються на стороні сервера. Вони можуть виконуватися модулями сервера або програмами, зовнішніми щодо сервера (CGI). | PERL (Apache, IIS, PWS) VBSCRIPT (IIS, PWS) JAVASCRIPT (IIS, PWS) PHP (Apache, IIS, PWS) JAVA (Apache, IIS, PWS) C#, VB.NET (IIS) | |
База даних — вона може знаходитися на тому самому комп’ютері, з програмою, яка її використовує, або на іншому через Інтернет. | Oracle (Linux, Windows) MySQL (Linux, Windows) Access (Windows) SQL Server (Windows) | |
OS Клієнт | Linux, Windows | |
Веб-браузер | Netscape, Internet Explorer | |
Скрипти, що виконуються на стороні клієнта у веб-браузері. Ці скрипти не мають доступу до дисків клієнтського комп'ютера. | VBscript (IE) JavaScript (IE, Netscape) PerlScript (IE) Аплети JAVA |
2.2. Обмін даними у веб-додатку з використанням форми
 |
Номер | Роль |
Браузер вперше запитує URL для (http://machine/url). Параметри не передано. | |
Веб-сервер надсилає йому веб-сторінку з цим URL. Вона може бути статичною або динамічно згенерованою серверним скриптом (SA), який міг використовувати вміст баз даних (SB, SC). У цьому випадку скрипт виявить, що запит на URL надійшов без передачі параметрів, і згенерує початкову сторінку WEB. Браузер отримує сторінку та відображає її (CA). Скрипти на стороні браузера (CB) могли змінити початкову сторінку, надіслану сервером. Потім у результаті взаємодії між користувачем (CD) та скриптами (CB) веб-сторінка буде змінена. Зокрема, будуть заповнені форми. | |
Користувач підтверджує дані форми, які потім мають бути надіслані на веб-сервер. Браузер повторно запитує початковий URL або інший, залежно від обставин, і одночасно передає на сервер значення з форми. Для цього він може використовувати два методи, що називаються GET та POST. Отримавши запит від клієнта, сервер запускає скрипт (SA), пов’язаний із запитаним URL, який виявляє параметри та обробляє їх. | |
Сервер видає сторінку WEB, сформовану програмою (SA, SB, SC). Цей етап ідентичний попередньому етапу 2. Відтепер обмін даними відбувається відповідно до етапів 2 та 3. |
2.3. Деякі ресурси
Нижче наведено перелік ресурсів, які допоможуть встановити та використовувати певні інструменти для веб-розробки. У додатку міститься посібник з інсталяції цих інструментів.
- Apache, Встановлення та налаштування, O'Reilly | |
- Програмування на Perl, Ларрі Волл, O'Reilly - Програми на Perl, Нейс і Вромас, O'Reilly - Документація HTML, що постачається разом з Active Perl | |
- Веб-програмування з PHP, Лакруа, Eyrolles - Посібник користувача PHP, доступний на сайті PHP | |
- Інтерфейс між WEB та базою даних під WinNT, Алекс Гомер, Eyrolles | |
- JAVA «Сервлети», Джейсон Хантер, O'Reilly - Мережеве програмування на Java, Елліот Расті Гарольд, O'Reilly - JDBC та Java, Джордж Риз, O'Reilly | |
- Посібник з MySQL доступний на сайті MySQL - Oracle 8i під Linux, Жіль Бріар, Eyrolles - Oracle 8i під управлінням NT, Жіль Бріар, Eyrolles |
2.4. Позначення
Далі ми будемо виходити з того, що певна кількість інструментів вже встановлена, і використовуватимемо такі позначення:
позначення | значення |
коренева папка дерева каталогів сервера Apache | |
коренева папка веб-сторінок, що видаються Apache. Саме в цій кореневій папці мають знаходитися веб-сторінки. Таким чином, URL http://localhost/page1.htm відповідає файлу <apache-DocumentRoot>\page1.htm. | |
коренева папка дерева, пов’язана з псевдонімом cgi-bin, де можна розміщувати скрипти CGI для Apache. Таким чином, URL http://localhost/cgi-bin/test1.pl відповідає файлу <apache-cgi-bin>\test1.pl. | |
кореневий каталог веб-сторінок, що генеруються PWS. Саме в цьому кореневому каталозі мають знаходитися веб-сторінки. Таким чином, URL http://localhost/page1.htm відповідає файлу <pws-DocumentRoot>\page1.htm. | |
коренева папка дерева каталогів мови Perl. Виконуваний файл perl.exe зазвичай знаходиться в <perl>\bin. | |
кореневий вузол дерева мови PHP. Виконуваний файл php.exe зазвичай знаходиться в <php>. | |
корені дерева Java. Виконувані файли, пов’язані з Java, знаходяться в <java>\bin. | |
кореневій папці сервера Tomcat. Приклади сервлетів містяться в <tomcat>\webapps\examples\servlets, а приклади сторінок — у JSP та <tomcat>\webbapps\examples\jsp |
Щодо кожного з цих інструментів див. додаток, де наведено інструкції з їх встановлення.
2.5. Статичні веб-сторінки, динамічні веб-сторінки
Статична сторінка представлена файлом HTML. Динамічна сторінка, у свою чергу, генерується «на льоту» веб-сервером. У цьому розділі ми пропонуємо вам різні тести з різними веб-серверами та різними мовами програмування, щоб продемонструвати універсальність веб-концепції.
2.5.1. Статична сторінка HTML (мова розмітки HyperText)
Розглянемо такий код HTML:
<html>
<head>
<title>essai 1 : une page statique</title>
</head>
<body>
<center>
<h1>Une page statique...</h1>
</body>
</html>
що створює таку веб-сторінку:
Тести
test1
- запустити сервер Apache
- вставити скрипт essai1.html у <apache-DocumentRoot>
- переглянути URL http://localhost/essai1.html у браузері
- зупинити сервер Apache
test2
- запустити сервер PWS
- вставити скрипт essai1.html у <pws-DocumentRoot>
- переглянути URL http://localhost/essai1.html у браузері
2.5.2. Сторінка ASP (Active Server Pages)
Скрипт essai2.asp:
<html>
<head>
<title>essai 1 : une page asp</title>
</head>
<body>
<center>
<h1>Une page asp générée dynamiquement par le serveur PWS</h1>
<h2>Il est <% =time %></h2>
<br>
A chaque fois que vous rafraîchissez la page, l'heure change.
</body>
</html>
створює таку веб-сторінку:
Тест
- запустити сервер PWS
- вставити скрипт essai2.asp у <pws-DocumentRoot>
- завантажити URL http://localhost/essai2.asp у браузері
2.5.3. Скрипт PERL (Practical Extracting and Reporting Language)
Скрипт essai3.pl:
#!d:\perl\bin\perl.exe
($secondes,$minutes,$heure)=localtime(time);
print <<HTML
Content-type: text/html
<html>
<head>
<title>essai 1 : un script Perl</title>
</head>
<body>
<center>
<h1>Une page générée dynamiquement par un script Perl</h1>
<h2>Il est $heure:$minutes:$secondes</h2>
<br>
A chaque fois que vous rafraîchissez la page, l'heure change.
</body>
</html>
HTML
;
Перший рядок — це шлях до виконуваного файлу perl.exe. У разі потреби його слід змінити. Після запуску веб-сервером скрипт генерує таку сторінку:
Тестування
- веб-сервера: Apache
- для довідки перегляньте файл конфігурації srm.conf або httpd.conf залежно від версії Apache у папці <apache>\confs і знайдіть рядок, що стосується cgi-bin, щоб дізнатися каталог <apache-cgi-bin>, у який слід помістити файл essai3.pl.
- Помістіть скрипт essai3.pl у <apache-cgi-bin>
- запитайте URL-адресу http://localhost/cgi-bin/essai3.pl
Зверніть увагу, що для завантаження сторінки perl потрібно більше часу, ніж для сторінки asp. Це пов’язано з тим, що скрипт Perl виконується інтерпретатором Perl, який потрібно завантажити, перш ніж він зможе виконати скрипт. Він не залишається постійно в пам’яті.
2.5.4. Скрипт PHP (Personal Home Page, HyperText Processor)
Скрипт essai4.php
<html>
<head>
<title>essai 4 : une page php</title>
</head>
<body>
<center>
<h1>Une page PHP générée dynamiquement</h1>
<h2>
<?
$maintenant=time();
echo date("j/m/y, h:i:s",$maintenant);
?>
</h2>
<br>
A chaque fois que vous rafraîchissez la page, l'heure change.
</body>
</html>
Попередній скрипт створює таку веб-сторінку:
Тестування
-
переглянути файл конфігурації srm.conf або httpd.conf Apache у <Apache>\confs
-
для довідки перевірте рядки конфігурації php
test1
-
запустити сервер Apache
-
помістіть essai4.php у <apache-DocumentRoot>
-
завантажити URL http://localhost/essai4.php
test2
-
запустити сервер PWS
-
для інформації перевірити налаштування PWS щодо php
-
встановити essai4.php у <pws-DocumentRoot>\php
-
запитати URL http://localhost/essai4.php
2.5.5. Скрипт JSP (Java Server Pages)
Скрипт heure.jsp
<% //— програма на Java, що відображає час %>
<%@ page import="java.util.*" %>
<%
// код JAVA для обчислення часу
Calendar calendrier=Calendar.getInstance();
int heures=calendrier.get(Calendar.HOUR_OF_DAY);
int minutes=calendrier.get(Calendar.MINUTE);
int secondes=calendrier.get(Calendar.SECOND);
// години, хвилини, секунди — це глобальні змінні
//, які можна використовувати в коді HTML
%>
<% // код HTML %>
<html>
<head>
<title>Page JSP affichant l'heure</title>
</head>
<body>
<center>
<h1>Une page JSP générée dynamiquement</h1>
<h2>Il est <%=heures%>:<%=minutes%>:<%=secondes%></h2>
<br>
<h3>A chaque fois que vous rechargez la page, l'heure change</h3>
</body>
</html>
Після виконання веб-сервером цей скрипт створює таку сторінку:
Тестування
- помістіть скрипт heure.jsp у папку <tomcat>\jakarta-tomcat\webapps\examples\jsp (Tomcat 3.x) або у папку <tomcat>\webapps\examples\jsp (Tomcat 4.x)
- запустіть сервер Tomcat
- запитати URL http://localhost:8080/examples/jsp/heure.jsp
2.5.6. Висновок
Попередні приклади показали, що:
- сторінку HTML можна динамічно згенерувати за допомогою програми. У цьому й полягає суть веб-програмування.
- використовувані мови та веб-сервери можуть бути різноманітними. Наразі спостерігаються такі основні тенденції:
- комбінації Apache/PHP (Windows, Linux) та IIS/PHP (Windows)
- технологія ASP.NET на платформах Windows, яка поєднує сервер IIS з мовою .NET (C#, VB.NET, ...)
- технологію Java-сервлетів та сторінок JSP, що працюють з різними серверами (Tomcat, Apache, IIS) та на різних платформах (Windows, Linux). Саме ця остання технологія буде детальніше розглянута в цьому документі.
2.6. Скрипти на стороні браузера
Сторінка HTML може містити скрипти, які виконуються браузером. Існує багато мов скриптів на стороні браузера. Ось деякі з них:
Мова | Сумісні браузери |
VBScript | IE |
JavaScript | IE, Netscape |
PerlScript | IE |
Java | IE, Netscape |
Розглянемо кілька прикладів.
2.6.1. Веб-сторінка зі скриптом VBScript, що виконується на стороні браузера
Сторінка vbs1.html
<html>
<head>
<title>essai : une page web avec un script vb</title>
<script language="vbscript">
function reagir
alert "Vous avez cliqué sur le bouton OK"
end function
</script>
</head>
<body>
<center>
<h1>Une page Web avec un script VB</h1>
<table>
<tr>
<td>Cliquez sur le bouton</td>
<td><input type="button" value="OK" name="cmdOK" onclick="reagir"></td>
</tr>
</table>
</body>
</html>
Наведена вище сторінка HTML містить не лише код HTML, а й програму, призначену для виконання браузером, який завантажить цю сторінку. Код виглядає так:
<script language="vbscript">
function reagir
alert "Vous avez cliqué sur le bouton OK"
end function
</script>
Теги <script></script> використовуються для виділення скриптів на сторінці HTML. Ці скрипти можуть бути написані різними мовами, і саме параметр language тегу <script> вказує на використовувану мову. У даному випадку це VBScript. Ми не будемо детально розглядати цю мову. Наведений вище скрипт визначає функцію з назвою réagir, яка виводить повідомлення. Коли викликається ця функція? Про це нам повідомляє наступний рядок коду HTML:
Атрибут onclick вказує ім’я функції, яку слід викликати, коли користувач натисне на кнопку OK. Коли браузер завантажить цю сторінку і користувач натисне на кнопку OK, ми отримаємо таку сторінку:
Тестування
Лише браузер IE здатний виконувати скрипти VBScript. Netscape для цього потребує додаткових модулів. Можна провести такі тести:
тест1
- сервер Apache
- скрипт vbs1.html у <apache-DocumentRoot>
- запитати URL-адресу http://localhost/vbs1.html за допомогою браузера IE
test2
- сервер PWS
- скрипт vbs1.html у <pws-DocumentRoot>
- запитати URL-адресу http://localhost/vbs1.html за допомогою браузера IE
2.6.2. Веб-сторінка зі скриптом JavaScript, що виконується в браузері
Сторінка: js1.html
<html>
<head>
<title>essai 4 : une page web avec un script Javascript</title>
<script language="javascript">
function reagir(){
alert ("Vous avez cliqué sur le bouton OK");
}
</script>
</head>
<body>
<center>
<h1>Une page Web avec un script Javascript</h1>
<table>
<tr>
<td>Cliquez sur le bouton</td>
<td><input type="button" value="OK" name="cmdOK" onclick="reagir()"></td>
</tr>
</table>
</body>
</html>
Тут ми маємо щось подібне до попередньої сторінки, за винятком того, що мову VBScript замінено на мову Javascript. Перевага останньої полягає в тому, що її підтримують обидва браузери — IE та Netscape. Її виконання дає ті самі результати:
Тести
test1
- сервер Apache
- скрипт js1.html у <apache-DocumentRoot>
- запитати URL-адресу http://localhost/js1.html за допомогою браузера IE або Netscape
тест2
- сервер PWS
- скрипт js1.html у <pws-DocumentRoot>
- запитати URL-адресу http://localhost/js1.html за допомогою браузера IE або Netscape
2.7. Взаємодія «клієнт-сервер»
Повернімося до нашої початкової схеми, яка ілюструвала учасників веб-додатку:
 |
Тут нас цікавить обмін даними між клієнтським і серверним комп’ютерами. Він відбувається через мережу, і варто нагадати загальну структуру обміну даними між двома віддаленими комп’ютерами.
2.7.1. Модель OSI
Модель відкритої мережі під назвою OSI (Open Systems Interconnection Reference Model), визначена ISO (Міжнародною організацією зі стандартизації), описує ідеальну мережу, де зв’язок між машинами можна представити за допомогою семирівневої моделі:
 |
Кожен рівень отримує послуги від нижчого рівня та надає свої послуги вищому рівню. Припустимо, що два додатки, розташовані на різних машинах A та B, хочуть встановити зв’язок: вони роблять це на рівні Application. Їм не потрібно знати всіх деталей функціонування мережі: кожна програма передає інформацію, яку вона хоче надіслати, на нижній рівень — рівень Présentation. Отже, програмі потрібно знати лише правила взаємодії з рівнем Présentation. Як тільки інформація потрапляє на рівень Présentation, вона за іншими правилами передається на рівень Session і так далі, доки інформація не потрапить на фізичний носій і не буде фізично передана на машину-адресата. Там вона пройде обробку, зворотну до тієї, яку вона пройшла на комп’ютері-відправнику.
На кожному рівні процес-відправник, відповідальний за надсилання інформації, надсилає її процесу-одержувачу на іншому комп’ютері, що належить до того самого рівня. Це відбувається за певними правилами, які називаються протоколом рівня. Отже, маємо таку кінцеву схему зв’язку:
 |
Роль різних рівнів така:
Забезпечує передачу бітів по фізичному носію. На цьому рівні знаходяться кінцеві пристрої обробки даних (E.T.T.D), такі як термінал або комп’ютер, а також пристрої завершення каналів передачі даних (E.T.C.D), такі як модулятор/демодулятор, мультиплексор, концентратор. На цьому рівні слід звернути увагу на такі моменти: . вибір способу кодування інформації (аналоговий або цифровий) . вибір режиму передачі (синхронний або асинхронний). | |
Приховує фізичні особливості фізичного рівня. Виявляє та виправляє помилки передачі. | |
Керує маршрутом, яким має пройти інформація, що надсилається в мережі. Це називається routage: визначення маршруту, яким має пройти інформація, щоб дістатися до адресата. | |
Забезпечує взаємодію між двома додатками, тоді як попередні рівні дозволяли лише взаємодію між комп’ютерами. Однією зі служб, що надаються цим рівнем, може бути мультиплексування: транспортний рівень може використовувати одне й те саме мережеве з’єднання (між комп’ютерами) для передачі інформації, що належить кільком додаткам. | |
На цьому рівні знаходяться послуги, що дозволяють додатку відкривати та підтримувати робочу сесію на віддаленому комп’ютері. | |
Вона спрямована на уніфікацію представлення даних на різних машинах. Таким чином, дані, що надходять з машини A, будуть «оформлені» шаром Présentation машини A відповідно до стандартного формату перед відправкою в мережу. Потрапивши на рівень Présentation комп’ютера-одержувача B, який розпізнає їх завдяки стандартному формату, дані будуть «оформлені» іншим чином, щоб програма комп’ютера B могла їх розпізнати. | |
На цьому рівні знаходяться програми, які зазвичай використовуються користувачем, такі як електронна пошта або передача файлів. |
2.7.2. Модель TCP/IP
Модель OSI є ідеальною. Набір протоколів TCP/IP наближається до неї у такому вигляді:
 |
- мережевий інтерфейс (мережева карта комп’ютера) виконує функції рівнів 1 і 2 моделі OSI
- шар IP (Інтернет-протокол) виконує функції 3-го шару (мережа)
- рівень TCP (протокол управління передачею) або UDP (протокол користувацьких датаграм) виконує функції 4-го рівня (транспортного). Протокол TCP гарантує, що пакети даних, якими обмінюються комп’ютери, надійно доходять до місця призначення. Якщо це не відбувається, він повертає пакети, що загубилися. Протокол UDP не виконує цю функцію, і тоді це завдання лягає на розробника додатків. Саме тому в Інтернеті, який не є на 100 % надійною мережею, найчастіше використовується протокол TCP. У цьому випадку йдеться про мережу TCP-IP.
- Рівень додатків охоплює функції рівнів 5–7 моделі OSI.
Веб-додатки знаходяться в шарі Application і, отже, базуються на протоколах TCP-IP. Рівні Application клієнтських машин та сервера обмінюються повідомленнями, які передаються рівням 1–4 моделі для подальшої доставки до місця призначення. Щоб зрозуміти один одного, рівні додатків обох машин повинні «розмовляти» однією мовою або протоколом. Протокол веб-додатків називається HTTP (HyperText Transfer Protocol). Це текстовий протокол, c.a.d, за допомогою якого машини обмінюються рядками тексту в мережі для взаєморозуміння. Цей обмін стандартизовано, c.a.d, тобто клієнт має у своєму розпорядженні певну кількість повідомлень, щоб точно вказати серверу, чого він хоче, а сервер також має у своєму розпорядженні певну кількість повідомлень, щоб надати клієнту відповідь. Цей обмін повідомленнями має такий вигляд:
 |
Клієнт --> Сервер
Коли клієнт надсилає запит до веб-сервера, він надсилає
- рядки тексту у форматі HTTP, щоб вказати, що саме він хоче
- порожній рядок
- за бажанням — документ
Сервер --> Клієнт
Коли сервер надсилає відповідь клієнту, він надсилає
- рядки тексту у форматі HTTP, щоб вказати, що він надсилає
- порожній рядок
- опціонально — документ
Отже, обмін даними має однакову форму в обох напрямках. В обох випадках може відбуватися надсилання документа, хоча клієнт рідко надсилає документ на сервер. Але протокол HTTP це передбачає. Саме це дозволяє, наприклад, абонентам інтернет-провайдера завантажувати різноманітні документи на свій особистий сайт, розміщений у цього провайдера. Обмінювані документи можуть бути будь-якими. Візьмемо для прикладу браузер, який запитує веб-сторінку, що містить зображення:
- браузер підключається до веб-сервера та запитує потрібну сторінку. Запитані ресурси однозначно позначаються за допомогою URL (Uniform Resource Locator). Браузер надсилає лише заголовки HTTP, а не сам документ.
- Сервер відповідає йому. Спочатку він надсилає заголовки HTTP, що вказують, який тип відповіді він надсилає. Це може бути повідомлення про помилку, якщо запитувана сторінка не існує. Якщо сторінка існує, сервер у заголовках HTTP своєї відповіді вкаже, що після них він надішле документ HTML (HyperText Markup Language). Цей документ — це послідовність рядків тексту у форматі HTML. Текст у форматі HTML містить теги (маркери), які надають браузеру вказівки щодо способу відображення тексту.
- Клієнт, виходячи з заголовків HTTP сервера, знає, що отримає документ у форматі HTML. Він проаналізує цей документ і, можливо, виявить, що той містить посилання на зображення. Ці зображення відсутні в документі HTML. Тому він надсилає новий запит на той самий веб-сервер, щоб отримати перше зображення, яке йому потрібно. Цей запит ідентичний тому, що був зроблений у пункті 1, за винятком того, що запитуваний ресурс інший. Сервер обробить цей запит, надіславши клієнту запитане зображення. Цього разу у відповіді заголовки HTTP вкажуть, що надісланий документ є зображенням, а не документом HTML.
- Клієнт отримує надіслане зображення. Етапи 3 і 4 повторюватимуться доти, доки клієнт (зазвичай веб-браузер) не отримає всі документи, необхідні для відображення сторінки в повному обсязі.
2.7.3. Протокол HTTP
Розглянемо протокол HTTP на прикладах. Які дані обмінюються браузер і веб-сервер?
2.7.3.1. Відповідь сервера HTTP
Тут ми дізнаємося, як веб-сервер відповідає на запити своїх клієнтів. Веб-сервіс або сервіс HTTP — це сервіс TCP-IP, який зазвичай працює на порту 80. Він може працювати й на іншому порту. У цьому випадку браузер-клієнт повинен вказати цей порт у запиті URL. Запит URL має такий загальний вигляд:
разом із
протоколом | http для веб-сервісу. Браузер також може виступати клієнтом для сервісів ftp, news, telnet тощо |
машина | ім'я машини, на якій працює веб-сервіс |
порт | порт веб-сервісу. Якщо це 80, номер порту можна опустити. Це найпоширеніший випадок |
шлях | шлях до запитуваного ресурсу |
додаткова інформація | додаткова інформація, що надається серверу для уточнення запиту клієнта |
Що робить браузер, коли користувач запитує завантаження URL?
- він відкриває канал зв'язку TCP-IP із машиною та портом, вказаними в частині machine[:port] файлу URL. Встановити з’єднання TCP-IP означає створити «канал» зв’язку між двома машинами. Після створення цього каналу вся інформація, що обмінюється між двома машинами, буде проходити через нього. Створення цього каналу TCP-IP ще не передбачає використання веб-протоколу HTTP.
- Після створення каналу TCP-IP клієнт надсилає запит до веб-сервера, відправляючи йому рядки тексту (команди) у форматі HTTP. Він надсилає серверу частину «шлях/інформація» з URL
- сервер відповість йому таким самим чином і через той самий канал
- один із двох учасників приймає рішення про закриття каналу. Це залежить від використовуваного протоколу HTTP. З протоколом HTTP 1.0 сервер закриває з’єднання після кожної своєї відповіді. Це змушує клієнта, який повинен зробити кілька запитів для отримання різних документів, що складають веб-сторінку, відкривати нове з’єднання для кожного запиту, що пов’язано з витратами. З протоколом HTTP/1.1 клієнт може вказати серверу залишити з’єднання відкритим, доки він не дасть команду його закрити. Таким чином, він може завантажити всі документи веб-сторінки за допомогою одного з’єднання та самостійно закрити його після отримання останнього документа. Сервер виявить це закриття та також закриє з’єднання.
Щоб ознайомитися з обміном даними між клієнтом і веб-сервером, ми використаємо універсальний клієнт TCP. Це програма, яка може виступати клієнтом будь-якої служби, що використовує протокол зв’язку на основі текстових рядків, як-от протокол HTTP. Ці текстові рядки користувач вводитиме за допомогою клавіатури. Для цього йому необхідно знати протокол зв’язку служби, до якої він намагається підключитися. Відповідь сервера потім відображається на екрані. Програма написана на Java, її код наведено в додатку. Тут ми використовуємо її у вікні DOS під Windows і запускаємо таким чином:
з
machine | — ім’я комп’ютера, на якому працює служба, до якої потрібно звернутися |
порт | порт, через який надається сервіс |
Маючи ці дві відомості, програма встановить з’єднання TCP-IP із вказаною машиною та портом. Це з’єднання слугуватиме для обміну текстовими рядками між клієнтом та веб-сервером. Рядки клієнта вводяться користувачем за допомогою клавіатури та надсилаються на сервер. Текстові рядки, які сервер повертає у відповідь, відображаються на екрані. Таким чином, між користувачем, що вводить текст з клавіатури, та веб-сервером може відбуватися безпосередній діалог. Спробуємо це на вже наведених прикладах. Ми створили таку статичну сторінку HTML:
<html>
<head>
<title>essai 1 : une page statique</title>
</head>
<body>
<center>
<h1>Une page statique...</h1>
</body>
</html>
що ми бачимо у браузері:
Бачимо, що запитуване URL — це: http://localhost:81/essais/essai1.html. Отже, сервер веб-служби — це localhost (=локальний сервер), а порт — 81. Якщо переглянути текст HTML цієї веб-сторінки (Вигляд/Джерело), ми побачимо текст HTML, який було створено спочатку:
Тепер скористаємося нашим універсальним клієнтом TCP, щоб отримати той самий URL:
Dos>java clientTCPgenerique localhost 81
Commandes :
GET /essais/essai1.html HTTP/1.0
<-- HTTP/1.1 200 OK
<-- Date: Mon, 08 Jul 2002 08:07:46 GMT
<-- Server: Apache/1.3.24 (Win32) PHP/4.2.0
<-- Last-Modified: Mon, 08 Jul 2002 08:00:30 GMT
<-- ETag: "0-a1-3d29469e"
<-- Accept-Ranges: bytes
<-- Content-Length: 161
<-- Connection: close
<-- Content-Type: text/html
<--
<-- <html>
<-- <head>
<-- <title>essai 1 : une page statique</title>
<-- </head>
<-- <body>
<-- <center>
<-- <h1>Une page statique...</h1>
<-- </body>
<-- </html>
Під час запуску клієнта за допомогою команди java clientTCPgenerique localhost 81 було створено канал зв’язку між програмою та веб-сервером, що працює на тій самій машині (localhost) на порту 81. Обмін даними між клієнтом і сервером у форматі HTTP може розпочатися. Нагадаємо, що ці дані складаються з трьох компонентів:
- заголовки HTTP
- порожній рядок
- опціональні дані
У нашому прикладі клієнт надсилає лише один запит:
GET /essais/essai1.html HTTP/1.0
Цей рядок складається з трьох частин:
команда HTTP для запиту ресурсу. Існують також інші: HEAD запитує ресурс, але обмежується лише заголовками HTTP з відповіді сервера. Сам ресурс не надсилається. PUT дозволяє клієнту надіслати документ на сервер | |
запитаний ресурс | |
використовуваний рівень протоколу HTTP. У даному випадку — 1.0. Це означає, що сервер закриє з’єднання, щойно надішле свою відповідь |
За заголовками HTTP завжди має йти порожній рядок. Саме це зробив тут клієнт. Таким чином клієнт або сервер розуміє, що частина обміну, позначена HTTP, завершена. Для клієнта на цьому все закінчилося. Йому немає чого надсилати. Далі починається відповідь сервера, яка в нашому прикладі складається з усіх рядків, що починаються зі знака <--. Спочатку він надсилає серію заголовків HTTP, за якими йде порожній рядок:
<-- HTTP/1.1 200 OK
<-- Date: Mon, 08 Jul 2002 08:07:46 GMT
<-- Server: Apache/1.3.24 (Win32) PHP/4.2.0
<-- Last-Modified: Mon, 08 Jul 2002 08:00:30 GMT
<-- ETag: "0-a1-3d29469e"
<-- Accept-Ranges: bytes
<-- Content-Length: 161
<-- Connection: close
<-- Content-Type: text/html
<--
сервер повідомляє
| |
дата/час відповіді | |
сервер ідентифікується. У даному випадку це сервер Apache | |
дата останньої зміни ресурсу, запитуваного клієнтом | |
... | |
одиниця виміру надісланих даних. У даному випадку — байт (byte) | |
кількість байтів документа, який буде надіслано після заголовків HTTP. Це число фактично є розміром у байтах файлу essai1.html: | |
сервер повідомляє, що закриє з’єднання після відправлення документа | |
сервер повідомляє, що надішле текст (text) у форматі HTML (html). |
Клієнт отримує ці заголовки HTTP і тепер знає, що отримає 161 байт, які представляють документ HTML. Сервер надсилає ці 161 байт одразу після порожнього рядка, який сигналізував про кінець заголовків HTTP:
<-- <html>
<-- <head>
<-- <title>essai 1 : une page statique</title>
<-- </head>
<-- <body>
<-- <center>
<-- <h1>Une page statique...</h1>
<-- </body>
<-- </html>
Тут можна впізнати файл HTML, створений спочатку. Якби нашим клієнтом був веб-браузер, то після отримання цих рядків тексту він би їх інтерпретував, щоб відобразити користувачеві на екрані таку сторінку:
Давайте ще раз використаємо наш універсальний клієнт TCP, щоб запросити той самий ресурс, але цього разу за допомогою команди HEAD, яка запитує лише заголовки відповіді:
Dos>java.bat clientTCPgenerique localhost 81
Commandes :
HEAD /essais/essai1.html HTTP/1.1
Host: localhost:81
<-- HTTP/1.1 200 OK
<-- Date: Mon, 08 Jul 2002 09:07:25 GMT
<-- Server: Apache/1.3.24 (Win32) PHP/4.2.0
<-- Last-Modified: Mon, 08 Jul 2002 08:00:30 GMT
<-- ETag: "0-a1-3d29469e"
<-- Accept-Ranges: bytes
<-- Content-Length: 161
<-- Content-Type: text/html
<--
Ми отримуємо той самий результат, що й раніше, без документа HTML. Зазначимо, що у своєму запиті HEAD клієнт вказав, що використовує протокол HTTP версії 1.1. Це змушує його надіслати другий заголовок HTTP, у якому вказується пара machine:port, яку клієнт хоче запитати: Host: localhost:81.
Тепер спробуємо отримати зображення як за допомогою веб-браузера, так і за допомогою універсального клієнта TCP. Спочатку за допомогою веб-браузера:
Файл univ01.gif має розмір 3167 байт:
Тепер скористаємося універсальним клієнтом TCP:
E:\data\serge\JAVA\SOCKETS\client générique>java clientTCPgenerique localhost 81
Commandes :
HEAD /images/univ01.gif HTTP/1.1
host: localhost:81
<-- HTTP/1.1 200 OK
<-- Date: Tue, 09 Jul 2002 13:53:24 GMT
<-- Server: Apache/1.3.24 (Win32) PHP/4.2.0
<-- Last-Modified: Fri, 14 Apr 2000 11:37:42 GMT
<-- ETag: "0-c5f-38f70306"
<-- Accept-Ranges: bytes
<-- Content-Length: 3167
<-- Content-Type: image/gif
<--
У відповіді сервера слід звернути увагу на такі моменти:
| |
| |
|
2.7.3.2. Запит клієнта HTTP
Тепер задамося таким питанням: якщо ми хочемо написати програму, яка «спілкується» з веб-сервером, які команди вона повинна надіслати веб-серверу, щоб отримати певний ресурс? У попередніх прикладах ми отримали початок відповіді. Ми зустріли три команди:
| |
| |
|
Існують й інші команди. Щоб їх виявити, ми зараз скористаємося загальним сервером TCP. Це програма, написана на Java, яку ви також знайдете у додатку. Її запускають так: java serveurTCPgenerique portEcoute, де portEcoute — це порт, до якого повинні підключатися клієнти. Програма serveurTCPgenerique
- виводить на екран команди, надіслані клієнтами
- відправляє їм у відповідь рядки тексту, введені користувачем з клавіатури. Отже, саме ця програма виконує роль сервера. У нашому прикладі користувач за клавіатурою виконуватиме роль веб-сервісу.
Тепер змоделюємо веб-сервер, запустивши наш універсальний сервер на порту 88:
Dos> java serveurTCPgenerique 88
Serveur générique lancé sur le port 88
Тепер відкриємо браузер і надішлемо запит на адресу http://localhost:88/exemple.html. Браузер підключиться до порту 88 машини localhost, а потім завантажить сторінку /exemple.html:
Тепер поглянемо на вікно нашого сервера, яке відображає те, що надіслав йому клієнт (деякі рядки, що стосуються роботи програми serveurTCPgenerique, було опущено для спрощення):
Dos>java serveurTCPgenerique 88
Serveur générique lancé sur le port 88
...
<-- GET /exemple.html HTTP/1.1
<-- Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/msword, */*
<-- Accept-Language: fr
<-- Accept-Encoding: gzip, deflate
<-- User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.0.3705; .NET CLR 1.0.2 914)
<-- Host: localhost:88
<-- Connection: Keep-Alive
<--
Рядки, що починаються зі знака <--, — це ті, що надіслані клієнтом. Таким чином ми виявляємо заголовки HTTP, з якими ми ще не стикалися:
| |
| |
| |
| |
|
Заголовки HTTP, надіслані браузером, закінчуються порожнім рядком, як і очікувалося.
Складімо відповідь для нашого клієнта. Користувач, що друкує на клавіатурі, тут є справжнім сервером і може скласти відповідь вручну. Згадаймо відповідь, яку надав веб-сервер у попередньому прикладі:
<-- HTTP/1.1 200 OK
<-- Date: Mon, 08 Jul 2002 08:07:46 GMT
<-- Server: Apache/1.3.24 (Win32) PHP/4.2.0
<-- Last-Modified: Mon, 08 Jul 2002 08:00:30 GMT
<-- ETag: "0-a1-3d29469e"
<-- Accept-Ranges: bytes
<-- Content-Length: 161
<-- Connection: close
<-- Content-Type: text/html
<--
<-- <html>
<-- <head>
<-- <title>essai 1 : une page statique</title>
<-- </head>
<-- <body>
<-- <center>
<-- <h1>Une page statique...</h1>
<-- </body>
<-- </html>
Спробуємо вручну (за допомогою клавіатури) скласти аналогічну відповідь. Рядки, що починаються з --> :, надсилаються клієнту:
...
<-- Host: localhost:88
<-- Connection: Keep-Alive
<--
--> : HTTP/1.1 200 OK
--> : Server: serveur tcp generique
--> : Connection: close
--> : Content-Type: text/html
--> :
--> : <html>
--> : <head><title>Serveur generique</title></head>
--> : <body>
--> : <center>
--> : <h2>Reponse du serveur generique</h2>
--> : </center>
--> : </body>
--> : </html>
fin
Команда fin призначена для роботи програми serveurTCPgenerique. Вона зупиняє виконання програми та закриває з’єднання між сервером і клієнтом. У нашій відповіді ми обмежилися такими заголовками HTTP:
HTTP/1.1 200 OK
--> : Server: serveur tcp generique
--> : Connection: close
--> : Content-Type: text/html
--> :
Ми не вказуємо розмір файлу, який збираємося надіслати (Content-Length), а лише повідомляємо, що після його надсилання ми закриємо з’єднання (Connection: close). Цього достатньо для браузера. Побачивши, що з’єднання закрито, браузер зрозуміє, що відповідь сервера завершена, і відобразить сторінку HTML, яку йому надіслали. Остання має такий вигляд:
--> : <html>
--> : <head><title>Serveur generique</title></head>
--> : <body>
--> : <center>
--> : <h2>Reponse du serveur generique</h2>
--> : </center>
--> : </body>
--> : </html>
Браузер відображає таку сторінку:
Якщо вище виконати View/Source, щоб побачити, що отримав браузер, отримаємо:
тобто саме те, що було надіслано з загального сервера.
2.8. Мова HTML
Веб-браузер може відображати різні документи, найпоширенішим з яких є документ HTML (HyperText Markup Language). Це текст, відформатований за допомогою тегів у формі <balise>texte</balise>. Так, тег <B>important</B> відображатиме важливий текст жирним шрифтом. Існують окремі теги, такі як тег <hr>, який відображає горизонтальну лінію. Ми не будемо розглядати теги, які можна знайти в тексті HTML. Існує чимало програм WYSIWYG, що дозволяють створювати веб-сторінки без написання жодного рядка коду HTML. Ці інструменти автоматично генерують код HTML на основі макета, створеного за допомогою миші та попередньо визначених елементів управління. Таким чином, можна (за допомогою миші) вставити на сторінку таблицю, а потім переглянути код HTML, згенерований програмою, щоб дізнатися, які теги слід використовувати для визначення таблиці на веб-сторінці. Все дуже просто. Крім того, знання мови HTML є необхідним, оскільки динамічні веб-додатки повинні самостійно генерувати код HTML для надсилання веб-клієнтам. Цей код генерується програмно, і, звісно, потрібно знати, що саме слід згенерувати, щоб клієнт отримав бажану веб-сторінку.
Підсумовуючи, для початку веб-програмування зовсім не обов’язково знати мову HTML у повному обсязі. Однак ці знання є необхідними і їх можна здобути завдяки використанню програм для створення веб-сторінок на мові WYSIWYG, таких як Word, FrontPage, DreamWeaver та десятків інших. Ще один спосіб ознайомитися з тонкощами мови HTML — це переглядати веб-сторінки та вивчати їхній вихідний код, який містить цікаві та ще невідомі вам особливості.
2.8.1. Приклад
Розглянемо наступний приклад, створений за допомогою FrontPage Express — безкоштовного інструменту, що входить до складу Internet Explorer. Код, згенерований FrontPage, тут було спрощено. Цей приклад демонструє деякі елементи, які можна знайти у веб-документі, такі як:
- таблиця
- зображення
- посилання
Документ HTML має такий загальний вигляд:
Весь документ обмежений тегами <html>...</html>. Він складається з двох частин:
- <head>...</head>: це невидима частина документа. Вона надає інформацію браузеру, який буде відображати документ. У ній часто зустрічається тег <title>...</title>, який визначає текст, що відображатиметься у рядку заголовка браузера. Також тут можуть бути інші теги, зокрема ті, що визначають ключові слова документа, які згодом використовуються пошуковими системами. У цій частині також можуть міститися скрипти, найчастіше написані на JavaScript або VBScript, які будуть виконуватися браузером.
- <body атрибути>...</body>: це частина, яка відображатиметься браузером. Теги HTML, що містяться в цій частині, вказують браузеру «бажаний» візуальний вигляд документа. Кожен браузер інтерпретує ці теги по-своєму. Тому два браузери можуть по-різному відображати один і той самий веб-документ. Зазвичай це є однією з головних проблем веб-дизайнерів.
Код HTML нашого прикладу документа виглядає так:
<html>
<head>
<title>balises</title>
</head>
<body background="/images/standard.jpg">
<center>
<h1>Les balises HTML</h1>
<hr>
</center>
<table border="1">
<tr>
<td>cellule(1,1)</td>
<td valign="middle" align="center" width="150">cellule(1,2)</td>
<td>cellule(1,3)</td>
</tr>
<tr>
<td>cellule(2,1)</td>
<td>cellule(2,2)</td>
<td>cellule(2,3</td>
</tr>
</table>
<table border="0">
<tr>
<td>Une image</td>
<td><img border="0" src="/images/univ01.gif" width="80" height="95"></td>
</tr>
<tr>
<td>le site de l'ISTIA</td>
<td><a href="http://istia.univ-angers.fr">ici</a></td>
</tr>
</table>
</body>
</html>
У коді виділено лише ті моменти, які нас цікавлять:
Елементи | теги та приклади HTML |
<title>balises</title> balises з’явиться в адресному рядку браузера, який відображатиме документ | |
<hr>: відображає горизонтальну лінію | |
<атрибути таблиці>....</table>: для визначення таблиці <tr атрибути>...</tr>: для визначення рядка <td атрибути>...</td>: для визначення комірки приклади: <table border="1">...</table>: атрибут border визначає товщину межі таблиці <td valign="middle" align="center" width="150">клітинка(1,2)</td>: визначає клітинку, вміст якої буде клітинка(1,2). Цей вміст буде вирівняно по центру вертикально (valign="middle") та горизонтально (align="center"). Ширина клітинки становитиме 150 пікселів (width="150") | |
<img border="0" src="/images/univ01.gif" width="80" height="95">: визначає зображення без рамки (border="0"), висотою 95 пікселів (height="95"), шириною 80 пікселів (width="80"), вихідний файл якого знаходиться за адресою /images/univ01.gif на веб-сервері (src="/images/univ01.gif"). Це посилання міститься у веб-документі, який було отримано за допомогою URL http://localhost:81/html/balises.htm. Крім того, браузер завантажить файл URL http://localhost:81/images/univ01.gif, щоб отримати зображення, на яке тут є посилання. | |
<a href="http://istia.univ-angers.fr">тут</a>: робить текст ici посиланням на URL http://istia.univ-angers.fr. | |
<body background="/images/standard.jpg">: вказує, що зображення, яке має слугувати фоном сторінки, знаходиться за адресою URL /images/standard.jpg на веб-сервері. У контексті нашого прикладу браузер надішле запит на URL http://localhost:81/images/standard.jpg, щоб отримати це фонове зображення. |
З цього простого прикладу видно, що для побудови всього документа браузер повинен надіслати три запити на сервер:
- http://localhost:81/html/balises.htm, щоб отримати вихідний код HTML документа
- http://localhost:81/images/univ01.gif — щоб отримати зображення univ01.gif
- http://localhost:81/images/standard.jpg — щоб отримати фонове зображення standard.jpg
У наступному прикладі наведено веб-форму, також створену за допомогою FrontPage.
Код HTML, згенерований за допомогою FrontPage та дещо спрощений, виглядає так:
<html>
<head>
<title>balises</title>
<script language="JavaScript">
function effacer(){
alert("Vous avez cliqué sur le bouton Effacer");
}//видалити
</script>
</head>
<body background="/images/standard.jpg">
<form method="POST" >
<table border="0">
<tr>
<td>Etes-vous marié(e)</td>
<td>
<input type="radio" value="Oui" name="R1">Oui
<input type="radio" name="R1" value="non" checked>Non
</td>
</tr>
<tr>
<td>Cases à cocher</td>
<td>
<input type="checkbox" name="C1" value="un">1
<input type="checkbox" name="C2" value="deux" checked>2
<input type="checkbox" name="C3" value="trois">3
</td>
</tr>
<tr>
<td>Champ de saisie</td>
<td>
<input type="text" name="txtSaisie" size="20" value="qqs mots">
</td>
</tr>
<tr>
<td>Mot de passe</td>
<td>
<input type="password" name="txtMdp" size="20" value="unMotDePasse">
</td>
</tr>
<tr>
<td>Boîte de saisie</td>
<td>
<textarea rows="2" name="areaSaisie" cols="20">
ligne1
ligne2
ligne3
</textarea>
</td>
</tr>
<tr>
<td>combo</td>
<td>
<select size="1" name="cmbValeurs">
<option>choix1</option>
<option selected>choix2</option>
<option>choix3</option>
</select>
</td>
</tr>
<tr>
<td>liste à choix simple</td>
<td>
<select size="3" name="lst1">
<option selected>liste1</option>
<option>liste2</option>
<option>liste3</option>
<option>liste4</option>
<option>liste5</option>
</select>
</td>
</tr>
<tr>
<td>liste à choix multiple</td>
<td>
<select size="3" name="lst2" multiple>
<option>liste1</option>
<option>liste2</option>
<option selected>liste3</option>
<option>liste4</option>
<option>liste5</option>
</select>
</td>
</tr>
<tr>
<td>bouton</td>
<td>
<input type="button" value="Effacer" name="cmdEffacer" onclick="effacer()">
</td>
</tr>
<tr>
<td>envoyer</td>
<td>
<input type="submit" value="Envoyer" name="cmdRenvoyer">
</td>
</tr>
<tr>
<td>rétablir</td>
<td>
<input type="reset" value="Rétablir" name="cmdRétablir">
</td>
</tr>
</table>
<input type="hidden" name="secret" value="uneValeur">
</form>
</body>
</html>
Відповідність візуального елемента <--> тегу HTML така:
Перевірка | тег HTML |
<form method="POST" > | |
<input type="text" name="txtSaisie" size="20" value="кілька слів"> | |
<input type="password" name="txtMdp" size="20" value="unMotDePasse"> | |
<textarea rows="2" name="areaSaisie" cols="20"> рядок1 рядок 2 рядок3 </textarea> | |
<input type="radio" value="Так" name="R1">Так <input type="radio" name="R1" value="ні" checked>Ні | |
<input type="checkbox" name="C1" value="один">1 <input type="checkbox" name="C2" value="два" checked>2 <input type="checkbox" name="C3" value="три">3 | |
<select size="1" name="cmbValeurs"> <option>варіант1</option> <option selected>варіант 2</option> <option>варіант 3</option> </select> | |
<select size="3" name="lst1"> <option selected>список1</option> <option>список2</option> <option>список3</option> <option>список4</option> <option>список5</option> </select> | |
<select size="3" name="lst2" multiple> <option>список1</option> <option>список2</option> <option selected>список3</option> <option>список4</option> <option>список5</option> </select> | |
<input type="submit" value="Надіслати" name="cmdRenvoyer"> | |
<input type="reset" value="Скинути" name="cmdRétablir"> | |
<input type="button" value="Очистити" name="cmdEffacer" onclick="effacer()"> |
Давайте розглянемо ці різні елементи управління.
2.8.1.1. Форма
<form method="POST" > |
<form name="..." method="..." action="...">...</form> | |
name="frmexemple": ім'я форми method="..." : метод, який використовує браузер для надсилання на веб-сервер значень, зібраних у формі action="..." : URL, на яку будуть надіслані значення, зібрані у формі. Веб-форма оточена тегами <form>...</form>. Форма може мати ім’я (name="xx"). Це стосується всіх елементів управління, які можна знайти у формі. Це ім’я є корисним, якщо веб-документ містить скрипти, які повинні посилатися на елементи форми. Мета форми — зібрати інформацію, введену користувачем за допомогою клавіатури/миші, та надіслати її на веб-сервер URL. Який саме? Той, що вказаний в атрибуті action="URL". Якщо цей атрибут відсутній, інформація буде надіслана на сервер, на якому розміщений документ, у якому знаходиться форма. Саме так було б у наведеному вище прикладі. До цього моменту ми завжди розглядали веб-клієнта як того, хто «запитує» інформацію у веб-сервера, але ніколи — як того, хто «надає» йому інформацію. Як веб-клієнт передає інформацію (ту, що міститься у формі) веб-серверу? Ми детально розглянемо це трохи пізніше. Він може використовувати два різні методи, які називаються POST та GET. Атрибут method="méthode", із методом, що дорівнює GET або POST, тегу <form> вказує браузеру, який метод слід використовувати для надсилання інформації, зібраної у формі, до URL, вказаного атрибутом action="URL". Якщо атрибут method не вказано, за замовчуванням використовується метод GET. |
2.8.1.2. Поле введення
<input type="text" name="txtSaisie" size="20" value="кілька слів"> <input type="password" name="txtMdp" size="20" value="unMotDePasse"> |
<input type="..." name="..." size=".." value=".."> Тег input використовується для різних елементів управління. Саме атрибут type дозволяє розрізняти ці різні елементи управління між собою. | |
type="text": вказує, що це поле введення type="password": символи у полі введення замінюються на символи *. Це єдина відмінність від звичайного поля введення. Цей тип елемента управління підходить для введення паролів. size="20": кількість символів, що відображаються у полі — не обмежує введення більшої кількості символів name="txtSaisie": ім’я елемента управління value="кілька слів" : текст, який відображатиметься у полі введення. |
2.8.1.3. Багаторядкове поле введення
<textarea rows="2" name="areaSaisie" cols="20"> ligne1 ligne2 ligne3 </textarea> |
<textarea ...>текст</textarea> відображає багаторядковий поле введення, яке спочатку містить текст | |
rows="2": кількість рядків cols="'20" : кількість стовпців name="areaSaisie": ім'я елемента управління |
2.8.1.4. Радіо-кнопки
<input type="radio" value="Так" name="R1">Так <input type="radio" name="R1" value="no" checked>Ні |
<input type="radio" атрибут2="значення2" ....>текст відображає перемикач із текстом поруч. | |
name="radio": ім'я елемента управління. Перемикачі з однаковим ім'ям утворюють групу, елементи якої взаємовиключні: можна вибрати лише один із них. value="значення": значення, присвоєне радіо-кнопці. Не слід плутати це значення з текстом, що відображається поруч із радіо-кнопкою. Останній призначений лише для відображення. checked: якщо це ключове слово присутнє, перемикач позначений, інакше — ні. |
2.8.1.5. Поля для позначення
<input type="checkbox" name="C1" value="один">1 <input type="checkbox" name="C2" value="два" checked>2 <input type="checkbox" name="C3" value="три">3 |
<input type="checkbox" attribut2="valeur2" ....>текст відображає прапорець із текстом поруч. | |
name="C1": ім'я елемента управління. Поля для позначення можуть мати однакове ім'я або ні. Поля з однаковим ім'ям утворюють групу пов'язаних полів. value="значення": значення, присвоєне прапорцю. Не слід плутати це значення з текстом, що відображається поруч із перемикачем. Останній призначений лише для відображення. checked: якщо цей ключовий параметр присутній, перемикач позначений, інакше — ні. |
2.8.1.6. Список, що розгортається (комбо)
<select size="1" name="cmbValeurs"> <option>choix1</option> <option selected>вибір2</option> <option>choix3</option> </select> |
<select size=".." name=".."> <option [selected]>...</option> ... </select> відображає у списку тексти, що містяться між тегами <option>...</option> | |
name="cmbValeurs": ім'я елемента управління. size="1": кількість видимих елементів списку. size="1" перетворює список на комбінований список. selected: якщо це ключове слово вказано для елемента списку, він відображається у списку як вибраний. У нашому прикладі вище елемент списку choix2 відображається як вибраний елемент комбобокса, коли той з’являється вперше. |
2.8.1.7. Список з одним вибором
<select size="3" name="lst1"> <option selected>список1</option> <option>liste2</option> <option>liste3</option> <option>liste4</option> <option>liste5</option> </select> |
<select size=".." name=".."> <option [selected]>...</option> ... </select> відображає у списку тексти, що містяться між тегами <option>...</option> | |
ті самі, що й для випадаючого списку, який відображає лише один елемент. Цей елемент управління відрізняється від попереднього випадаючого списку лише атрибутом size>1. |
2.8.1.8. Список із можливістю множинного вибору
<select size="3" name="lst2" multiple> <option selected>список1</option> <option>liste2</option> <option selected>список3</option> <option>liste4</option> <option>liste5</option> </select> |
<select size=".." name=".." multiple> <option [selected]>...</option> ... </select> відображає у списку тексти, що містяться між тегами <option>...</option> | |
multiple: дозволяє вибрати кілька елементів зі списку. У наведеному вище прикладі вибрано обидва елементи: liste1 та liste3. |
2.8.1.9. Кнопка типу button
<input type="button" value="Стерти" name="cmdEffacer" onclick="effacer()"> |
<input type="button" value="..." name="..." onclick="effacer()" ....> | |
type="button": визначає елемент управління «кнопка». Існують ще два типи кнопок: submit та reset. value="Очистити": текст, що відображається на кнопці onclick="функція()" : дозволяє визначити функцію, яка має виконуватися, коли користувач натискає на кнопку. Ця функція є частиною скриптів, визначених у відображеному веб-документі. Наведений вище синтаксис відповідає синтаксису javascript. Якщо скрипти написані на VBScript, слід вказати onclick="функція" без дужок. Синтаксис залишається таким самим, якщо потрібно передати параметри до функції: onclick="функція(val1, val2,...)" У нашому прикладі клік на кнопку Effacer викликає таку функцію JavaScript effacer: Функція effacer відображає повідомлення:  |
2.8.1.10. Кнопка типу «submit»
<input type="submit" value="Надіслати" name="cmdRenvoyer"> |
<input type="submit" value="Надіслати" name="cmdRenvoyer"> | |
type="submit": визначає кнопку як кнопку відправлення даних форми на веб-сервер. Коли клієнт натисне на цю кнопку, браузер надішле дані форми на URL, визначений в атрибуті action тегу <form>, відповідно до методу, визначеного атрибутом method цього ж тегу. value="Відправити": текст, що відображається на кнопці |
2.8.1.11. Кнопка типу «reset»
<input type="reset" value="Скинути" name="cmdRétablir"> |
<input type="reset" value="Скинути" name="cmdRétablir"> | |
type="reset": визначає кнопку як кнопку скидання форми. Коли клієнт натисне на цю кнопку, браузер поверне форму до того стану, в якому він її отримав. value="Скинути" : текст, що відображається на кнопці |
2.8.1.12. Приховане поле
<input type="hidden" name="secret" value="uneValeur"> |
<input type="hidden" name="..." value="..."> | |
type="hidden": вказує, що це приховане поле. Приховане поле є частиною форми, але не відображається користувачеві. Однак, якщо користувач попросить свій браузер показати вихідний код, він побачить тег <input type="hidden" value="..."> і, отже, значення прихованого поля. value="uneValeur": значення прихованого поля. У чому полягає користь прихованого поля? Воно дозволяє веб-серверу зберігати інформацію під час послідовних запитів клієнта. Розглянемо приклад веб-додатку для покупок. Клієнт купує перший товар art1 у кількості q1 на першій сторінці каталогу, а потім переходить на іншу сторінку каталогу. Щоб запам’ятати, що клієнт придбав q1 товарів art1, сервер може помістити ці дві інформації в приховане поле веб-форми на новій сторінці. На цій новій сторінці клієнт купує товари q2 та art2. Коли дані цієї другої форми будуть надіслані на сервер (submit), сервер отримає не тільки інформацію (q2,art2), а й (q1,art1), яка також є частиною форми як приховане поле, яке користувач не може змінювати. Потім веб-сервер помістить у нове приховане поле дані (q1,art1) та (q2,art2) і надішле нову сторінку каталогу. І так далі. |
2.8.2. Відправлення веб-клієнтом значень форми на веб-сервер
У попередньому розділі ми зазначили, що веб-клієнт має два методи для надсилання на веб-сервер значень форми, яку він відобразив: методи GET та POST. Розглянемо на прикладі різницю між цими двома методами. Повернемося до попереднього прикладу та розглянемо його таким чином:
- браузер надсилає запит на URL з прикладу до веб-сервера
- отримавши форму, ми заповнюємо її
- перед тим, як надіслати значення форми на веб-сервер, натиснувши кнопку Envoyer типу submit, ми зупиняємо веб-сервер і замінюємо його на загальний сервер TCP, який вже використовувався раніше. Нагадаємо, що цей сервер виводить на екран рядки тексту, які йому надсилає веб-клієнт. Таким чином, ми побачимо, що саме надсилає браузер.
Форму заповнюють наступним чином:
URL, що використовується для цього документа, має такий вигляд:
2.8.2.1. Метод GET
Документ HTML запрограмовано так, щоб браузер використовував метод GET для надсилання значень форми на веб-сервер. Тому ми написали:
Ми зупиняємо веб-сервер і запускаємо наш універсальний сервер TCP на порту 81:
E:\data\serge\JAVA\SOCKETS\serveur générique>java serveurTCPgenerique 81
Serveur générique lancé sur le port 81
Тепер повертаємося до браузера, щоб надіслати дані форми на веб-сервер за допомогою кнопки Envoyer:
Ось що отримує загальний сервер TCP:
<-- GET /html/balises.htm?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&area
Saisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&
cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
<-- Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/msword, application/vnd
.ms-powerpoint, application/vnd.ms-excel, */*
<-- Referer: http://localhost:81/html/balises.htm
<-- Accept-Language: fr
<-- Accept-Encoding: gzip, deflate
<-- User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.0.3705)
<-- Host: localhost:81
<-- Connection: Keep-Alive
<--
Все міститься в першому заголовку HTTP, надісланому браузером:
<-- GET /html/balises.htm?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&area
Saisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&
cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
Бачимо, що він набагато складніший за ті, з якими ми стикалися досі. У ньому присутня синтаксична структура GET URL HTTP/1.1, але в особливій формі: GET URL?param1=значення1¶m2=значення2&... HTTP/1.1, де parami — це імена елементів управління веб-форми, а значення — відповідні їм значення. Розглянемо їх детальніше. Нижче наведено таблицю з трьома стовпцями:
- 1-й стовпець: містить визначення елемента управління HTML із прикладу
- 2-й стовпець: показує, як цей елемент виглядає у браузері
- 3-й стовпець: містить значення, яке браузер надсилає на сервер для елемента управління зі 1-го стовпця у тому вигляді, в якому воно міститься у запиті GET з прикладу
елемент управління HTML | візуальна частина | повернуте значення (значення) |
<input type="radio" value="Так" name="R1">Так <input type="radio" name="R1" value="ні" checked>Ні |  | - значення атрибута value радіо-кнопки, яку вибрав користувач. |
<input type="checkbox" name="C1" value="один">1 <input type="checkbox" name="C2" value="два" checked>2 <input type="checkbox" name="C3" value="три">3 |  | C1=один C2=два - значення атрибутів value полів, позначених користувачем |
<input type="text" name="txtSaisie" size="20" value="кілька слів"> |  | txtSaisie=веб-програмування - текст, введений користувачем у поле введення. Пробіли замінено на знак + |
<input type="password" name="txtMdp" size="20" value="unMotDePasse"> |  | txtMdp=цесекрет - текст, введений користувачем у поле введення |
<textarea rows="2" name="areaSaisie" cols="20"> рядок1 рядок 2 рядок3 </textarea> |  | areaSaisie=основи+%0D%0A веб-програмування+ - текст, введений користувачем у поле введення. %OD%OA — це позначка кінця рядка. Пробіли замінено на знак + |
<select size="1" name="cmbValeurs"> <option>вибір1</option> <option selected>варіант2</option> <option>варіант3</option> </select> |  | cmbValeurs=варіант3 - значення, обране користувачем у списку з одним варіантом вибору |
<select size="3" name="lst1"> <option selected>список1</option> <option>список2</option> <option>список3</option> <option>список4</option> <option>список5</option> </select> |  | lst1=список3 - значення, вибране користувачем зі списку з одним вибором |
<select size="3" name="lst2" multiple> <option selected>список1</option> <option>список2</option> <option selected>список3</option> <option>список4</option> <option>список5</option> </select> |  | lst2=список1 lst2=список3 - значення, вибрані користувачем зі списку з можливістю множинного вибору |
<input type="submit" value="Надіслати" name="cmdRenvoyer"> | cmdRenvoyer=Надіслати - ім'я та атрибут value кнопки, яка використовувалася для надсилання даних форми на сервер | |
<input type="hidden" name="secret" value="uneValeur"> | secret=значення - атрибут value прихованого поля |
Давайте повторимо те саме, але цього разу залишимо веб-сервер для формування відповіді та подивимося, якою вона буде. Сторінка, повернута веб-сервером, виглядає так:
Вона повністю збігається з тією, що була отримана спочатку, до заповнення форми. Щоб зрозуміти, чому так сталося, слід ще раз звернути увагу на запит URL, який надсилає браузер, коли користувач натискає кнопку Envoyer:
<-- GET /html/balises.htm?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&area
Saisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&
cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
Запитана сторінка /html/balises.htm. Крім того, до цієї сторінки /html/URL передаються значення з форми. Наразі URL /html/balises.htm, що є статичною сторінкою, не використовує ці значення. Отже, попередній GET еквівалентний
, і саме тому сервер знову повернув нам початкову сторінку. Варто зауважити, що браузер правильно відображає повну сторінку URL, яку було запрошено:
2.8.2.2. Метод POST
Документ HTML налаштований таким чином, що браузер тепер використовує метод POST для надсилання значень форми на веб-сервер:
Ми зупиняємо веб-сервер і запускаємо загальний сервер TCP (який ми вже зустрічали, але який було дещо змінено для цієї нагоди) на порту 81:
E:\data\serge\JAVA\SOCKETS\serveur générique>java serveurTCPgenerique2 81
Serveur générique lancé sur le port 81
Тепер повертаємося до браузера, щоб надіслати дані форми на веб-сервер за допомогою кнопки «Надіслати»:
Ось що отримує загальний сервер TCP:
<-- POST /html/balises.htm HTTP/1.1
<-- Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/msword, application/vnd
.ms-powerpoint, application/vnd.ms-excel, */*
<-- Referer: http://localhost:81/html/balises.htm
<-- Accept-Language: fr
<-- Content-Type: application/x-www-form-urlencoded
<-- Accept-Encoding: gzip, deflate
<-- User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.0.3705)
<-- Host: localhost:81
<-- Content-Length: 210
<-- Connection: Keep-Alive
<-- Cache-Control: no-cache
<--
<-- R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&cmdRenvoyer=Envoyer&secret=uneValeur
Порівняно з тим, що ми вже знаємо, ми помічаємо такі зміни в запиті браузера:
- Початковий заголовок HTTP тепер не GET, а POST. Синтаксис має вигляд POST URL HTTP/1.1, де URL — це URL, який запитує браузер. Водночас POST означає, що браузер має дані, які потрібно передати серверу.
- Рядок Content-Type: application/x-www-form-urlencoded вказує, який тип даних надішле браузер. Це дані форми (x-www-form), закодовані (urlencoded). Це кодування призводить до того, що деякі символи переданих даних перетворюються, щоб уникнути помилок інтерпретації на сервері. Так, пробіл замінюється на +, а символ кінця рядка — на %OD%OA,... Загалом усі символи, що містяться в даних і можуть бути неправильно інтерпретовані сервером (&, +, %, ...), перетворюються на %XX, де XX — це їхній шістнадцятковий код.
- Рядок Content-Length: 210 вказує серверу, скільки символів клієнт надішле йому після завершення заголовків HTTP, c.a.d, що йдуть після порожнього рядка, який сигналізує про кінець заголовків.
- Дані (210 символів): R1=Так&C1=один&C2=два&txtSaisie=веб-програмування&txtMdp=це секрет&areaSaisie=основи+0D%0Aвеб-програмування&cmbValeurs=вибір3&lst1=список3&lst2=список1&lst2=список3&cmdRenvoyer=Надіслати&secret=uneValeur
Можна помітити, що дані, передані за допомогою POST, мають той самий формат, що й дані, передані за допомогою GET.
Чи є один метод кращим за інший? Ми бачили, що якщо значення форми надсилалися браузером за допомогою методу GET, браузер відображав у своєму полі Adresse запитуване значення URL у формі URL?param1=val1¶m2=val2&.... Це можна розглядати як перевагу або недолік:
- перевагою, якщо ми хочемо дозволити користувачеві додати цей налаштований URL до своїх улюблених посилань
- недолік, якщо ми не хочемо, щоб користувач мав доступ до певної інформації у формі, наприклад, до прихованих полів
Надалі ми будемо використовувати у своїх формах майже виключно метод POST.
2.8.2.3. Отримання значень з веб-форми
Статична сторінка, яку запитує клієнт, який додатково надсилає параметри за допомогою POST або GET, ніяк не може їх отримати. Це може зробити лише програма, і саме вона буде відповідальна за формування відповіді для клієнта — відповіді, яка буде динамічною і, як правило, залежатиме від отриманих параметрів. Це сфера веб-програмування, яку ми розглянемо детальніше в наступному розділі, де буде представлено технології веб-програмування на Java: сервлети та сторінки JSP.