Skip to content

2. Основи

У цьому розділі ми розглянемо основи веб-програмування. Його основною метою є ознайомлення з основними принципами веб-програмування перед тим, як застосовувати їх на практиці з використанням конкретної мови та середовища. У ньому наведено чимало прикладів, які рекомендується випробувати, щоб поступово «ввібратися» у філософію веб-розробки.

2.1. Компоненти веб-додатку

Image

Номер
Роль
Типові приклади
1
OS Сервер
Linux, Windows
2
Веб-сервер
Apache (Linux, Windows)
IIS (NT), PWS (Win9x)
3
Скрипти, що виконуються на стороні сервера. Вони можуть виконуватися модулями
сервера або програмами, зовнішніми щодо сервера (CGI).
PERL (Apache, IIS, PWS)
VBSCRIPT (IIS, PWS)
JAVASCRIPT (IIS, PWS)
PHP (Apache, IIS, PWS)
JAVA (Apache, IIS, PWS)
C#, VB.NET (IIS)
4
База даних — вона може знаходитися на тому самому комп’ютері, що й
програма, яка її використовує, або на іншому комп’ютері через Інтернет.
Oracle (Linux, Windows)
MySQL (Linux, Windows)
Access (Windows)
SQL Server (Windows)
5
OS Клієнт
Linux, Windows
6
Веб-браузер
Netscape, Internet Explorer
7
Скрипти, що виконуються на стороні клієнта у веб-браузері.
Ці скрипти не мають доступу до дисків клієнтського комп'ютера.
VBscript (IE)
JavaScript (IE, Netscape)
PerlScript (IE)
Аплети JAVA

2.2. Обмін даними у веб-додатку з використанням форми

Image

Клієнтський комп'ютерСерверний комп'ютер

Номер
Роль
1
Браузер вперше запитує URL для (http://machine/url). Параметри не передаються.
2
Веб-сервер надсилає йому веб-сторінку з цим URL. Вона може бути статичною або динамічно згенерованою серверним скриптом (SA), який міг використовувати вміст баз даних (SB, SC). У цьому випадку скрипт виявить, що запит на URL надійшов без передачі параметрів, і згенерує початкову сторінку WEB.
Браузер отримує сторінку та відображає її (CA). Скрипти на стороні браузера (CB) могли змінити початкову сторінку, надіслану сервером. Потім у результаті взаємодії між користувачем (CD) та скриптами (CB) веб-сторінка буде змінена. Зокрема, будуть заповнені форми.
3
Користувач підтверджує дані форми, які потім мають бути надіслані на веб-сервер. Браузер повторно запитує початковий URL або інший, залежно від обставин, і одночасно передає на сервер значення з форми. Для цього він може використовувати два методи, що називаються GET та POST. Отримавши запит від клієнта, сервер запускає скрипт (SA), пов’язаний із запитаним URL, який виявляє параметри та обробляє їх.
4
Сервер видає сторінку WEB, сформовану програмою (SA, SB, SC). Цей етап ідентичний попередньому етапу 2. Відтепер обмін даними відбувається відповідно до етапів 2 та 3.

2.3. Деякі ресурси

Нижче наведено перелік ресурсів, які допоможуть встановити та використовувати певні інструменти для веб-розробки. У додатку міститься посібник з інсталяції цих інструментів.

Serveur Apache
http://www.apache.org
- Apache, встановлення та налаштування, O'Reilly
Serveur IIS, PWS
http://www.microsoft.com
PERL
http://www.activestate.com
- Програмування на Perl, Ларрі Волл, O'Reilly
- Програми на Perl, Нейс і Вромас, O'Reilly
- Документація HTML, що постачається разом з Active Perl
PHP
http://www.php.net
- Веб-програмування з PHP, Лакруа, Eyrolles
- Посібник користувача PHP, доступний на сайті PHP
VBSCRIPT, ASP
http://msdn.microsoft.com/scripting/vbscript/download/vbsdoc.exe
http://msdn.microsoft.com/scripting/default.htm?/scripting/vbscript
- Інтерфейс між WEB та базою даних під WinNT, Алекс Гомер, Eyrolles
JAVASCRIPT
http://msdn.microsoft.com/scripting/jscript/download/jsdoc.exe
http://developer.netscape.com/docs/manuals/index.html
HTML
http://developer.netscape.com/docs/manuals/index.html
JAVA
http://www.sun.com
- JAVA «Сервлети», Джейсон Хантер, O'Reilly
- Мережеве програмування на Java, Елліот Расті Гарольд, O'Reilly
- JDBC та Java, Джордж Риз, O'Reilly
Base de données
http://www.mysql.com
http://www.oracle.com
- Посібник з MySQL доступний на сайті MySQL
- Oracle 8i під Linux, Жіль Бріар, Eyrolles
- Oracle 8i під управлінням NT, Жіль Бріар, Eyrolles

2.4. Позначення

Далі ми будемо виходити з того, що певна кількість інструментів вже встановлена, і використовуватимемо такі позначення:

позначення
значення
<apache>
коренева папка дерева каталогів сервера Apache
<apache-DocumentRoot>
коренева папка веб-сторінок, що видаються Apache. Саме в цій кореневій папці мають знаходитися веб-сторінки. Таким чином, URL http://localhost/page1.htm відповідає файлу <apache-DocumentRoot>\page1.htm.
<apache-cgi-bin>
коренева папка дерева, пов’язана з псевдонімом cgi-bin, де можна розміщувати скрипти CGI для Apache. Таким чином, URL http://localhost/cgi-bin/test1.pl відповідає файлу <apache-cgi-bin>\test1.pl.
<pws-DocumentRoot>
кореневий каталог веб-сторінок, що генеруються програмою PWS. Саме в цьому кореневому каталозі повинні знаходитися веб-сторінки. Таким чином, URL http://localhost/page1.htm відповідає файлу <pws-DocumentRoot>\page1.htm.
<perl>
коренева папка дерева каталогів мови Perl. Виконуваний файл perl.exe зазвичай знаходиться в <perl>\bin.
<php>
корені дерева мови PHP. Виконуваний файл php.exe зазвичай знаходиться в <php>.
<java>
коренева папка дерева Java. Виконувані файли, пов’язані з Java, знаходяться в <java>\bin.
<tomcat>
кореневій папці сервера 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>

що створює таку веб-сторінку:

Тестування

Image

  • запустити сервер Apache

  • помістіть скрипт essai1.html у <apache-DocumentRoot>

  • переглянути URL http://localhost/essai1.html у браузері

  • зупинити сервер Apache

  • запустити сервер 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>

створює таку веб-сторінку:

Image

Тест

  • запустити сервер 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. За потреби його слід змінити. Після запуску веб-сервером скрипт генерує таку сторінку:

Image

Тест

  • веб-сервер: 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)

Скрипт 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>

Попередній скрипт створює таку веб-сторінку:

Тестування

Image

Image

  • переглянути файл конфігурації srm.conf або httpd.conf Apache у <Apache>\confs

  • для довідки перевірте рядки конфігурації php

  • запустити сервер Apache

  • помістіть essai4.php у <apache-DocumentRoot>

  • запустити URL http://localhost/essai4.php

  • запустити сервер 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>

Після виконання веб-сервером цей скрипт створює таку сторінку:

Image

Тестування

  • помістіть скрипт 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:

         <input type="button" value="OK" name="cmdOK" onclick="reagir">

Атрибут onclick вказує ім’я функції, яку слід викликати, коли користувач натисне на кнопку OK. Коли браузер завантажить цю сторінку і користувач натисне на кнопку OK, ми отримаємо таку сторінку:

Image

Тестування

Лише браузер IE здатний виконувати скрипти VBScript. Netscape для цього потребує додаткових модулів. Можна провести такі тести:

  • сервер Apache

  • скрипт vbs1.html у <apache-DocumentRoot>

  • відкрити URL-адресу http://localhost/vbs1.html у браузері IE

  • сервер 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. Її виконання дає ті самі результати:

Image

Тестування

  • сервер Apache

  • скрипт js1.html у <apache-DocumentRoot>

  • завантажити URL-адресу http://localhost/js1.html за допомогою браузера IE або Netscape

  • сервер 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 і так далі, доки інформація не потрапить на фізичний носій і не буде фізично передана на машину-адресата. Там вона пройде обробку, зворотну до тієї, яку вона пройшла на комп’ютері-відправнику.

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

Роль різних рівнів така:

Physique
Забезпечує передачу бітів по фізичному носію. На цьому рівні знаходяться кінцеві пристрої обробки даних (E.T.T.D), такі як термінал або комп’ютер, а також пристрої завершення каналів передачі даних (E.T.C.D), такі як модулятор/демодулятор, мультиплексор, концентратор. На цьому рівні слід звернути увагу на такі моменти:
. вибір способу кодування інформації (аналоговий або цифровий)
. вибір режиму передачі (синхронний або асинхронний).
Liaison de données
Приховує фізичні особливості фізичного рівня. Виявляє та виправляє помилки передачі.
Réseau
Керує маршрутом, яким має пройти інформація, що надсилається в мережі. Це називається routage: визначення маршруту, яким має пройти інформація, щоб дістатися до адресата.
Transport
Забезпечує взаємодію між двома додатками, тоді як попередні рівні дозволяли лише взаємодію між комп’ютерами. Однією зі служб, що надаються цим рівнем, може бути мультиплексування: транспортний рівень може використовувати одне й те саме мережеве з’єднання (між комп’ютерами) для передачі інформації, що належить кільком додаткам.
Session
На цьому рівні знаходяться послуги, що дозволяють додатку відкривати та підтримувати робочу сесію на віддаленому комп’ютері.
Présentation
Вона спрямована на уніфікацію представлення даних на різних машинах. Таким чином, дані, що надходять з машини A, будуть «оформлені» шаром Présentation машини A відповідно до стандартного формату перед відправкою в мережу. Потрапивши на рівень Présentation комп’ютера-одержувача B, який розпізнає їх завдяки стандартному формату, дані будуть «оформлені» іншим чином, щоб програма комп’ютера B могла їх розпізнати.
Application
На цьому рівні знаходяться програми, які зазвичай використовуються користувачем, такі як електронна пошта або передача файлів.

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, тобто клієнт має у своєму розпорядженні певну кількість повідомлень, щоб точно вказати серверу, чого він хоче, а сервер також має у своєму розпорядженні певну кількість повідомлень, щоб надати клієнту відповідь. Цей обмін повідомленнями має такий вигляд:

Клієнт --> Сервер

Коли клієнт надсилає запит до веб-сервера, він надсилає

  1. рядки тексту у форматі HTTP, щоб вказати, що саме він хоче
  2. порожній рядок
  3. за бажанням — документ

Сервер --> Клієнт

Коли сервер надсилає відповідь клієнту, він надсилає

  1. рядки тексту у форматі HTTP, щоб вказати, що він надсилає
  2. порожній рядок
  3. опціонально — документ

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

  1. браузер підключається до веб-сервера та запитує потрібну сторінку. Запитані ресурси однозначно позначаються за допомогою URL (Uniform Resource Locator). Браузер надсилає лише заголовки HTTP, а не сам документ.
  2. Сервер відповідає йому. Спочатку він надсилає заголовки HTTP, що вказують, який тип відповіді він надсилає. Це може бути повідомлення про помилку, якщо запитувана сторінка не існує. Якщо сторінка існує, сервер у заголовках HTTP своєї відповіді вкаже, що після них він надішле документ HTML (HyperText Markup Language). Цей документ — це послідовність рядків тексту у форматі HTML. Текст у форматі HTML містить теги (маркери), які надають браузеру вказівки щодо способу відображення тексту.
  3. Клієнт, виходячи з заголовків HTTP сервера, знає, що отримає документ HTML. Він проаналізує цей документ і, можливо, виявить, що той містить посилання на зображення. Ці зображення відсутні в документі HTML. Тому він надсилає новий запит на той самий веб-сервер, щоб отримати перше зображення, яке йому потрібно. Цей запит ідентичний тому, що був зроблений у пункті 1, за винятком того, що запитуваний ресурс інший. Сервер обробить цей запит, надіславши клієнту запитане зображення. Цього разу у відповіді заголовки HTTP вкажуть, що надісланий документ є зображенням, а не документом HTML.
  4. Клієнт отримує надіслане зображення. Етапи 3 і 4 повторюватимуться доти, доки клієнт (зазвичай веб-браузер) не отримає всі документи, необхідні для відображення сторінки в повному обсязі.

2.7.3. Протокол HTTP

Розглянемо протокол HTTP на прикладах. Які дані обмінюються браузер і веб-сервер?

2.7.3.1. Відповідь сервера HTTP

Тут ми дізнаємося, як веб-сервер відповідає на запити своїх клієнтів. Веб-сервіс або сервіс HTTP — це сервіс TCP-IP, який зазвичай працює на порту 80. Він може працювати й на іншому порту. У такому випадку браузер-клієнт повинен вказати цей порт у запиті. Запит має такий загальний вигляд:

протокол://комп'ютер[:port]/шлях/інформація

де

протокол
http для веб-сервісу. Браузер також може виступати клієнтом для сервісів ftp, news, telnet тощо.
машина
ім'я машини, на якій працює веб-сервіс
порт
порт веб-сервісу. Якщо це 80, номер порту можна опустити. Це найпоширеніший випадок
шлях
шлях до запитуваного ресурсу
додаткова інформація
додаткова інформація, що надається серверу для уточнення запиту клієнта

Що робить браузер, коли користувач запитує завантаження URL?

  1. він відкриває канал зв'язку TCP-IP із машиною та портом, вказаними в частині machine[:port] файлу URL. Встановити з'єднання TCP-IP означає створити «канал» зв'язку між двома машинами. Після створення цього каналу вся інформація, що обмінюється між двома машинами, буде проходити через нього. Створення цього каналу TCP-IP ще не передбачає використання веб-протоколу HTTP.
  2. Після створення каналу TCP-IP клієнт надсилає запит до веб-сервера, відправляючи йому рядки тексту (команди) у форматі HTTP. Він надсилає серверу частину «шлях/інформація» з URL
  3. сервер відповість йому таким самим чином і через той самий канал
  4. один із двох учасників прийме рішення про закриття каналу. Це залежить від використовуваного протоколу HTTP. З протоколом HTTP 1.0 сервер закриває з’єднання після кожної своєї відповіді. Це змушує клієнта, який повинен зробити кілька запитів для отримання різних документів, що складають веб-сторінку, відкривати нове з’єднання для кожного запиту, що пов’язано з витратами. З протоколом HTTP/1.1 клієнт може вказати серверу залишити з’єднання відкритим, доки він не дасть команду його закрити. Таким чином, він може завантажити всі документи веб-сторінки за допомогою одного з’єднання та самостійно закрити його після отримання останнього документа. Сервер виявить це закриття та також закриє з’єднання.

Щоб ознайомитися з обміном даними між клієнтом і веб-сервером, ми використаємо універсальний клієнт TCP. Це програма, яка може виступати клієнтом будь-якої служби, що використовує протокол зв’язку на основі текстових рядків, як-от протокол HTTP. Ці текстові рядки користувач вводитиме за допомогою клавіатури. Для цього йому необхідно знати протокол зв’язку служби, до якої він намагається підключитися. Відповідь сервера потім відображається на екрані. Програма написана на Java, її код наведено в додатку. Тут ми використовуємо її у вікні командного рядка DOS під Windows і запускаємо таким чином:

java clientTCPgenerique machine port

з

machine
— ім’я комп’ютера, на якому працює служба, до якої потрібно звернутися
port
порт, через який надається послуга

Маючи ці дві відомості, програма встановить з’єднання TCP-IP із вказаною машиною та портом. Це з’єднання слугуватиме для обміну текстовими рядками між клієнтом та веб-сервером. Рядки клієнта вводяться користувачем за допомогою клавіатури та надсилаються на сервер. Текстові рядки, які сервер повертає у відповідь, відображаються на екрані. Таким чином, між користувачем, що вводить текст з клавіатури, та веб-сервером може відбуватися безпосередній діалог. Спробуємо це на вже наведених прикладах. Ми створили таку статичну сторінку HTML:

<html>
  <head>
    <title>essai 1 : une page statique</title>
   </head>
   <body>
     <center>
     <h1>Une page statique...</h1>
   </body>
</html>

що ми бачимо у браузері:

Image

Бачимо, що запитуване URL — це: http://localhost:81/essais/essai1.html. Отже, сервер веб-служби — це localhost (=локальний сервер), а порт — 81. Якщо переглянути текст HTML цієї веб-сторінки (Вигляд/Джерело), ми побачимо текст HTML, який було створено спочатку:

Image

Тепер скористаємося нашим універсальним клієнтом 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 може розпочатися. Нагадаємо, що ці дані складаються з трьох компонентів:

  1. заголовки HTTP
  2. порожній рядок
  3. опціональні дані

У нашому прикладі клієнт надсилає лише один запит:

GET /essais/essai1.html HTTP/1.0

Цей рядок складається з трьох частин:

GET
команда HTTP для запиту ресурсу. Існують й інші:
HEAD запитує ресурс, але обмежується лише заголовками HTTP з відповіді сервера. Сам ресурс не надсилається.
PUT дозволяє клієнту надіслати документ на сервер
/essais/essai1.html
запитаний ресурс
HTTP/1.0
використовуваний рівень протоколу 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
<--

HTTP/1.1 200 OK
сервер повідомляє
  • що він підтримує протокол HTTP версії 1.1
  • що він має запитуваний ресурс (код 200, повідомлення OK) 
Date: ...
дата/час відповіді
Server:
сервер ідентифікується. У даному випадку це сервер Apache
Last-Modified:
дата останньої зміни ресурсу, запитуваного клієнтом
ETag:
...
Accept-Ranges: bytes
одиниця виміру надісланих даних. У даному випадку — байт (byte)
Content-Length: 161
кількість байтів документа, який буде надіслано після заголовків HTTP. Це число фактично є розміром у байтах файлу essai1.html:
E:\data\serge\web\essais>dir essai1.html

08/07/2002  10:00                  161 essai1.html

Connection: close
сервер повідомляє, що закриє з'єднання після відправлення документа
Content-type: text/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, створений спочатку. Якби нашим клієнтом був веб-браузер, то після отримання цих рядків тексту він би їх інтерпретував, щоб відобразити користувачеві на екрані таку сторінку:

Image

Давайте ще раз використаємо наш універсальний клієнт 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. Спочатку за допомогою веб-браузера:

Image

Файл univ01.gif має розмір 3167 байт:

E:\data\serge\web\images>dir univ01.gif
14/04/2000  13:37                3 167 univ01.gif

Тепер скористаємося універсальним клієнтом 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
<--

У відповіді сервера слід звернути увагу на такі моменти:

HEAD
  • ми запитуємо лише заголовки HTTP цього ресурсу. Адже зображення — це бінарний файл, а не текстовий, і його відображення на екрані у вигляді тексту не дає нічого читабельного. 
Content-Length: 3167
  • це розмір файлу univ01.gif 
Content-Type: image/gif
  • сервер повідомляє клієнту, що надішле йому документ типу image/gif, c.a.d. зображення у форматі GIF. Якби зображення було у форматі JPEG, тип документа був би image/jpeg. Типи документів стандартизовані й називаються типами MIME (Multi-purpose Mail Internet Extension).

2.7.3.2. Запит клієнта HTTP

Тепер задамося таким питанням: якщо ми хочемо написати програму, яка «спілкується» з веб-сервером, які команди вона повинна надіслати веб-серверу, щоб отримати певний ресурс? У попередніх прикладах ми отримали початок відповіді. Ми зустріли три команди:

GET ressource protocole
  • для запиту певного ресурсу за певною версією протоколу HTTP. Сервер надсилає відповідь у форматі HTTP, за якою йде порожній рядок, а потім — запитуваний ресурс 
HEAD ressource protocole
  • те саме, за винятком того, що тут відповідь обмежується заголовками HTTP та порожнім рядком 
host: machine:port
  • для уточнення (протокол HTTP 1.1) машини та порту запитуваного веб-сервера

Існують й інші команди. Щоб їх виявити, ми зараз скористаємося загальним сервером 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:

Image

Тепер поглянемо на вікно нашого сервера, яке відображає те, що надіслав йому клієнт (деякі рядки, що стосуються роботи програми 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, з якими ми ще не стикалися:

Accept:
  • список типів MIME документів, які браузер вміє обробляти. 
Accept-language:
  • мова, яка є пріоритетною для документів. 
Accept-Encoding:
  • тип кодування документів, які браузер вміє обробляти 
User-Agent:
  • ідентифікатор клієнта 
Connection:
  • Close: сервер закриє з'єднання після надання відповіді
  • Keep-Alive: з’єднання залишиться відкритим після отримання відповіді від сервера. Це дозволить браузеру запитувати інші документи, необхідні для побудови сторінки, без необхідності повторного встановлення з’єднання.

Заголовки 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>

Браузер відображає таку сторінку:

Image

Якщо вище виконати View/Source, щоб побачити, що отримав браузер, отримаємо:

Image

тобто саме те, що було надіслано з загального сервера.

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, тут було спрощено. Цей приклад демонструє деякі елементи, які можна знайти у веб-документі, такі як:

  • таблиця
  • зображення
  • посилання

Image

Документ HTML має такий загальний вигляд:

<html>
    <head>
        <title>Un titre</title>
        ...
    </head>
    <body attributs>
        ...
    </body>
</html>

Весь документ обмежений тегами <html>...</html>. Він складається з двох частин:

  1. <head>...</head>: це невидима частина документа. Вона надає інформацію браузеру, який буде відображати документ. У ній часто зустрічається тег <title>...</title>, який визначає текст, що відображатиметься у рядку заголовка браузера. Також тут можуть бути інші теги, зокрема ті, що визначають ключові слова документа, які згодом використовуються пошуковими системами. У цій частині також можуть міститися скрипти, найчастіше написані на JavaScript або VBScript, які будуть виконуватися браузером.
  2. <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
titre du document
<title>balises</title>
balises з’явиться в адресному рядку браузера, який відображатиме документ
barre horizontale
<hr>: відображає горизонтальну лінію
tableau
<атрибути таблиці>....</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")
image
<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, щоб отримати зображення, на яке тут є посилання.
lien
<a href="http://istia.univ-angers.fr">тут</a>: робить текст ici посиланням на URL http://istia.univ-angers.fr.
fond de page
<body background="/images/standard.jpg">: вказує, що зображення, яке має слугувати фоном сторінки, знаходиться за адресою URL /images/standard.jpg на веб-сервері. У контексті нашого прикладу браузер надішле запит на URL http://localhost:81/images/standard.jpg, щоб отримати це фонове зображення.

З цього простого прикладу видно, що для побудови всього документа браузер повинен надіслати три запити на сервер:

  1. http://localhost:81/html/balises.htm, щоб отримати вихідний код HTML документа
  2. http://localhost:81/images/univ01.gif — щоб отримати зображення univ01.gif
  3. http://localhost:81/images/standard.jpg — щоб отримати фонове зображення standard.jpg

У наступному прикладі наведено веб-форму, також створену за допомогою FrontPage.

Image

Код 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
formulaire
<form method="POST" >
champ de saisie
<input type="text" name="txtSaisie" size="20" value="кілька слів">
champ de saisie cachée
<input type="password" name="txtMdp" size="20" value="unMotDePasse">
champ de saisie multilignes
<textarea rows="2" name="areaSaisie" cols="20">
рядок1
рядок 2
рядок 3
</textarea>
boutons radio
<input type="radio" value="Так" name="R1">Так
<input type="radio" name="R1" value="ні" checked>Ні
cases à cocher
<input type="checkbox" name="C1" value="один">1
<input type="checkbox" name="C2" value="два" checked>2
<input type="checkbox" name="C3" value="три">3
Combo
<select size="1" name="cmbValeurs">
<option>варіант1</option>
<option selected>варіант 2</option>
<option>варіант 3</option>
</select>
liste à sélection unique
<select size="3" name="lst1">
<option selected>список1</option>
<option>список2</option>
<option>список3</option>
<option>список4</option>
<option>список5</option>
</select>
liste à sélection multiple
<select size="3" name="lst2" multiple>
<option>список1</option>
<option>список2</option>
<option selected>список3</option>
<option>список4</option>
<option>список5</option>
</select>
bouton de type submit
<input type="submit" value="Надіслати" name="cmdRenvoyer">
bouton de type reset
<input type="reset" value="Скинути" name="cmdRétablir">
bouton de type button
<input type="button" value="Очистити" name="cmdEffacer" onclick="effacer()">

Давайте розглянемо ці різні елементи управління.

2.8.1.1. Форма

formulaire
<form method="POST" >
balise HTML
<form name="..." method="..." action="...">...</form>
attributs
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. Поле введення

Image

Image

champ de saisie
<input type="text" name="txtSaisie" size="20" value="кілька слів">
<input type="password" name="txtMdp" size="20" value="unMotDePasse">
balise HTML
<input type="..." name="..." size=".." value="..">
Тег `input` використовується для різних елементів управління. Саме атрибут type дозволяє розрізняти ці різні елементи управління між собою.
attributs
type="text": вказує, що це поле введення
type="password": символи у полі введення замінюються на символи *. Це єдина відмінність від звичайного поля введення. Цей тип елемента управління підходить для введення паролів.
size="20": кількість символів, що відображаються у полі — не обмежує введення більшої кількості символів
name="txtSaisie": ім’я елемента управління
value="кілька слів" : текст, який відображатиметься у полі введення.

2.8.1.3. Багаторядкове поле введення

Image

champ de saisie multilignes
<textarea rows="2" name="areaSaisie" cols="20">
ligne1
ligne2
ligne3
</textarea>
balise HTML
<textarea ...>текст</textarea>
відображає багаторядковий поле введення, яке спочатку містить текст
attributs
rows="2": кількість рядків
cols="'20" : кількість стовпців
name="areaSaisie": ім'я елемента управління

2.8.1.4. Радіо-кнопки

Image

boutons radio
<input type="radio" value="Так" name="R1">Так
<input type="radio" name="R1" value="no" checked>Ні
balise HTML
<input type="radio" атрибут2="значення2" ....>текст
відображає перемикач із текстом поруч.
attributs
name="radio": ім'я елемента управління. Перемикачі з однаковим ім'ям утворюють групу, елементи якої взаємовиключні: можна вибрати лише один із них.
value="значення" : значення, присвоєне радіо-кнопці. Не слід плутати це значення з текстом, що відображається поруч із радіо-кнопкою. Останній призначений лише для відображення.
checked: якщо це ключове слово присутнє, перемикач позначений, інакше — ні.

2.8.1.5. Поля для позначення

cases à cocher
<input type="checkbox" name="C1" value="один">1
<input type="checkbox" name="C2" value="два" checked>2
<input type="checkbox" name="C3" value="три">3

Image

balise HTML
<input type="checkbox" attribut2="valeur2" ....>текст
відображає прапорець із текстом поруч.
attributs
name="C1": ім'я елемента управління. Поля для позначення можуть мати однакове ім'я або ні. Поля з однаковим ім'ям утворюють групу пов'язаних полів.
value="значення": значення, присвоєне прапорцю. Не слід плутати це значення з текстом, що відображається поруч із перемикачем. Останній призначений лише для відображення.
checked: якщо цей ключовий параметр присутній, перемикач позначений, інакше — ні.

2.8.1.6. Список, що розгортається (комбо)

Combo
<select size="1" name="cmbValeurs">
<option>choix1</option>
<option selected>вибір2</option>
<option>choix3</option>
</select>

Image

balise HTML
<select size=".." name="..">
<option [selected]>...</option>
...
</select>
відображає у списку тексти, що містяться між тегами <option>...</option>
attributs
name="cmbValeurs" — назва елемента управління.
size="1": кількість видимих елементів списку. size="1" перетворює список на комбінований список.
selected: якщо це ключове слово вказано для елемента списку, він відображається у списку як вибраний. У нашому прикладі вище елемент списку choix2 відображається як вибраний елемент комбінованого списку, коли той з’являється вперше.

2.8.1.7. Список з одним вибором

liste à sélection unique
<select size="3" name="lst1">
<option selected>список1</option>
<option>liste2</option>
<option>liste3</option>
<option>liste4</option>
<option>liste5</option>
</select>

Image

balise HTML
<select size=".." name="..">
<option [selected]>...</option>
...
</select>
відображає у списку тексти, що містяться між тегами <option>...</option>
attributs
ті самі, що й для випадаючого списку, який відображає лише один елемент. Цей елемент управління відрізняється від попереднього випадаючого списку лише атрибутом size>1.

2.8.1.8. Список із можливістю множинного вибору

liste à sélection unique
<select size="3" name="lst2" multiple>
<option selected>список1</option>
<option>liste2</option>
<option selected>список3</option>
<option>liste4</option>
<option>liste5</option>
</select>

Image

balise HTML
<select size=".." name=".." multiple>
<option [selected]>...</option>
...
</select>
відображає у списку тексти, що містяться між тегами <option>...</option>
attributs
multiple: дозволяє вибрати кілька елементів зі списку. У наведеному вище прикладі вибрано обидва елементи: liste1 та liste3.

2.8.1.9. Кнопка типу button

bouton de type button
<input type="button" value="Очистити" name="cmdEffacer" onclick="effacer()">

Image

balise HTML
<input type="button" value="..." name="..." onclick="effacer()" ....>
attributs
type="button": визначає елемент управління «кнопка». Існують ще два типи кнопок: submit та reset.
value="Очистити": текст, що відображається на кнопці
onclick="функція()" : дозволяє визначити функцію, яка має виконуватися, коли користувач натискає на кнопку. Ця функція є частиною скриптів, визначених у відображеному веб-документі. Наведений вище синтаксис відповідає синтаксису javascript. Якщо скрипти написані на VBScript, слід вказати onclick="функція" без дужок. Синтаксис залишається незмінним, якщо потрібно передати параметри до функції: onclick="функція(val1, val2,...)"
У нашому прикладі клік на кнопку Effacer викликає таку функцію JavaScript effacer:
    <script language="JavaScript">
        function effacer(){
          alert("Vous avez cliqué sur le bouton Effacer");
      }//видалити
        </script>
Функція effacer виводить таке повідомлення:

2.8.1.10. Кнопка типу «submit»

bouton de type submit
<input type="submit" value="Надіслати" name="cmdRenvoyer">

Image

balise HTML
<input type="submit" value="Надіслати" name="cmdRenvoyer">
attributs
type="submit": визначає кнопку як кнопку відправлення даних форми на веб-сервер. Коли клієнт натисне на цю кнопку, браузер надішле дані форми на URL, визначений в атрибуті action тегу <form>, відповідно до методу, визначеного атрибутом method цього ж тегу.
value="Відправити": текст, що відображається на кнопці

2.8.1.11. Кнопка типу «reset»

bouton de type reset
<input type="reset" value="Скинути" name="cmdRétablir">

Image

balise HTML
<input type="reset" value="Скинути" name="cmdRétablir">
attributs
type="reset": визначає кнопку як кнопку скидання форми. Коли клієнт натисне на цю кнопку, браузер поверне форму до того стану, в якому він її отримав.
value="Скинути" : текст, що відображається на кнопці

2.8.1.12. Приховане поле

champ caché
<input type="hidden" name="secret" value="uneValeur">
balise HTML
<input type="hidden" name="..." value="...">
attributs
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. Розглянемо на прикладі різницю між цими двома методами. Повернемося до попереднього прикладу та розглянемо його таким чином:

  1. браузер надсилає запит на URL з прикладу до веб-сервера
  2. отримавши форму, ми заповнюємо її
  3. перед тим, як надіслати значення форми на веб-сервер, натиснувши кнопку Envoyer типу submit, ми зупиняємо веб-сервер і замінюємо його на загальний сервер TCP, який вже використовувався раніше. Нагадаємо, що цей сервер виводить на екран рядки тексту, які йому надсилає веб-клієнт. Таким чином, ми побачимо, що саме надсилає браузер.

Форму заповнюють наступним чином:

Image

URL, що використовується для цього документа, має такий вигляд:

Image

2.8.2.1. Метод GET

Документ HTML запрограмовано так, щоб браузер використовував метод GET для надсилання значень форми на веб-сервер. Тому ми написали:

    <form method="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:

Image

Ось що отримує загальний сервер 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&param2=значення2&... HTTP/1.1, де parami — це імена елементів управління веб-форми, а значення — відповідні їм значення. Розглянемо їх детальніше. Нижче наведено таблицю з трьома стовпцями:

  • 1-й стовпець: містить визначення елемента управління HTML із прикладу
  • 2-й стовпець: показує, як цей елемент виглядає у браузері
  • 3-й стовпець: містить значення, яке браузер надсилає на сервер для елемента управління зі 1-го стовпця у тому вигляді, в якому воно міститься у запиті GET з прикладу
елемент управління HTML
візуальна частина
повернуте значення (значення)
<input type="radio" value="Так" name="R1">Так
<input type="radio" name="R1" value="no" checked>Ні
R1=Так
- значення атрибута 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 прихованого поля

Зробимо те саме, але цього разу залишимо веб-сервер для формування відповіді та подивимося, якою вона буде. Сторінка, повернута веб-сервером, виглядає так:

Image

Вона повністю збігається з тією, що була отримана спочатку, до заповнення форми. Щоб зрозуміти, чому так сталося, слід ще раз розглянути запит 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

Запитана сторінка URL — це /html/balises.htm. Крім того, до цієї сторінки URL передаються значення з форми. Наразі URL /html/balises.htm, що є статичною сторінкою, не використовує ці значення. Отже, попередній GET еквівалентний 

<-- GET /html/balises.htm HTTP/1.1

, і саме тому сервер знову повернув нам початкову сторінку. Варто зауважити, що браузер правильно відображає повну сторінку URL, яку було запрошено:

Image

2.8.2.2. Метод POST

Документ HTML налаштований таким чином, що браузер тепер використовує метод POST для надсилання значень форми на веб-сервер:

    <form method="POST" >

Ми зупиняємо веб-сервер і запускаємо загальний сервер TCP (який ми вже зустрічали, але який було дещо змінено для цієї нагоди) на порту 81:

E:\data\serge\JAVA\SOCKETS\serveur générique>java serveurTCPgenerique2 81
Serveur générique lancé sur le port 81

Тепер повертаємося до браузера, щоб надіслати дані форми на веб-сервер за допомогою кнопки «Надіслати»:

Image

Ось що отримує загальний сервер 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

Порівняно з тим, що ми вже знаємо, ми помічаємо такі зміни в запиті браузера:

  1. Початковий заголовок HTTP тепер не GET, а POST. Синтаксис має вигляд POST URL HTTP/1.1, де URL — це URL, який запитує браузер. Водночас POST означає, що браузер має дані, які потрібно передати на сервер.
  2. Рядок Content-Type: application/x-www-form-urlencoded вказує, який тип даних надішле браузер. Це дані форми (x-www-form), закодовані (urlencoded). Це кодування призводить до того, що деякі символи переданих даних перетворюються, щоб уникнути помилок інтерпретації на стороні сервера. Так, пробіл замінюється на +, а символ кінця рядка — на %OD%OA,... Загалом усі символи, що містяться в даних і можуть бути неправильно інтерпретовані сервером (&, +, %, ...), перетворюються на %XX, де XX — це їхній шістнадцятковий код.
  3. Рядок Content-Length: 210 вказує серверу, скільки символів клієнт надішле йому після завершення заголовків HTTP, c.a.d. після порожнього рядка, що сигналізує про кінець заголовків.
  4. Дані (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&param2=val2&.... Це можна розглядати як перевагу або недолік:

  • перевагою, якщо ми хочемо дозволити користувачеві додати цей налаштований URL до своїх улюблених посилань
  • недолік, якщо ми не хочемо, щоб користувач мав доступ до певної інформації у формі, наприклад, до прихованих полів

Надалі ми будемо використовувати у своїх формах майже виключно метод POST.

2.8.2.3. Отримання значень з веб-форми

Статична сторінка, яку запитує клієнт, який додатково надсилає параметри за допомогою POST або GET, ніяк не може їх отримати. Це може зробити лише програма, і саме вона буде відповідати за формування відповіді для клієнта — відповіді, яка буде динамічною і, як правило, залежатиме від отриманих параметрів. Це сфера веб-програмування, яку ми розглянемо детальніше в наступному розділі, де буде представлено технології веб-програмування на Java: сервлети та сторінки JSP.

https://stahe.github.io
Цей навчальний курс, написаний Сержем Тахе, надається громадськості на умовах ліцензії Creative Commons «Вказання авторства — Без комерційного використання — Поділитися на тих самих умовах 3.0 без змін.