archived-doc-uk/faq/html.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- EN-Revision: 9e6c3416c5c285f807a734e4663c399612777d7e Maintainer: mproshchuk Status: ready -->
 <chapter xml:id="faq.html" xmlns="http://docbook.org/ns/docbook">
  <title>PHP та HTML</title>
  <titleabbrev>PHP та HTML</titleabbrev>

  <para>
   PHP та HTML глибоко взаємодіють: PHP може генерувати HTML, а HTML може
   передавати інформацію до PHP. Перед читанням цих ЧаПів важливо, щоб ви
   навчилися отримувати <link linkend="language.variables.external">змінні зі
   зовнішніх джерел</link>. Сторінка посібника на цю тему також містить багато
   прикладів.
  </para>

  <qandaset>
   <qandaentry xml:id="faq.html.encoding">
    <question>
     <para>
      Яке кодування/декодування мені потрібно робити, коли я передаю значення
      через форму або URL?
     </para>
    </question>
    <answer>
     <para>
      Є кілька етапів, для яких кодування є важливим. Припустимо, що ви маєте
      <type>string</type> <varname>$data</varname>, яка містить рядок, який ви
      хочете передати незакодованим. Це виглядатиме таким чином:
      <itemizedlist>
       <listitem>
        <para>
         HTML-інтерпретація. Задаючи випадковий рядок, ви
         <emphasis>мусите</emphasis> помістити його у подвійні лапки та обробити
         таке значення функцією <function>htmlspecialchars</function>.
        </para>
       </listitem>
       <listitem>
        <para>
         URL: URL складається з частин. Аби певні дані сприймалися, як частина
         URL, ви <emphasis>мусите</emphasis> закодувати їх за допомогою
         <function>urlencode</function>.
        </para>
       </listitem>
      </itemizedlist>
     </para>
     <para>
      <example>
       <title>Прихований елемент HTML-форми</title>
        <programlisting role="php">
<![CDATA[
<?php
    echo '<input type="hidden" value="' . htmlspecialchars($data) . '" />'."\n";
?>
]]>
        </programlisting>
      </example>
      <note>
       <simpara>
        Не можна <varname>$data</varname> обробляти функцією
        <function>urlencode</function> тому, що за це відповідає браузер. Усі
        популярні браузери роблять це правильно, незалежно від методу (себто GET
        або POST). Це помітно у випадку GET-запиту, бо POST-запити зазвичай
        приховані.
       </simpara>
      </note>
      <example>
       <title>Дані, що редагуються користувачем</title>
        <programlisting role="php">
<![CDATA[
<?php
    echo "<textarea name='mydata'>\n";
    echo htmlspecialchars($data)."\n";
    echo "</textarea>";
?>
]]>
        </programlisting>
      </example>
      <note>
       <simpara>
        Ці дані браузер зображує належним чином тому, що інтерпретує екрановані
        HTML-символи.
       </simpara>
       <simpara>
        Після підтвердження форми через GET або POST, браузер закодує дані в URL
        для передавання до PHP, який їх розкодує. Тож вам не треба самостійно
        щось кодувати, все обробиться автоматично.
       </simpara>
      </note>
      <example>
       <title>В URL</title>
        <programlisting role="php">
<![CDATA[
<?php
    echo '<a href="' . htmlspecialchars("/nextpage.php?stage=23&data=" .
        urlencode($data)) . '">'."\n";
?>
]]>
        </programlisting>
      </example>
      <note>
       <simpara>
        Якщо ви модулюєте GET-запит, необхідно власноруч застосувати
        <function>urlencode</function> до даних.
       </simpara>
      </note>
      <note>
       <simpara>
        Вам потрібно обробити всю URL функцією
        <function>htmlspecialchars</function>, щоб URL не сприйнялася, як код
        HTML. В такому разі браузер виконає зворотню до
        <function>htmlspecialchars</function> дію стосовно значення та сприйме
        його, як URL. PHP зрозуміє URL коректно, бо ви обробили дані функцією
        <function>urlencode</function>.
       </simpara>
       <simpara>
        Зауважте, що символ <literal>&amp;</literal> в URL замінено на
        <literal>&amp;amp;</literal>. Здебільшого браузери відновлять його, якщо
        ви забудете, але не завжди. Тож навіть якщо ваша URL не динамічна, вам
        <emphasis>потрібно</emphasis> застосувати
        <function>htmlspecialchars</function> до URL.
       </simpara>
      </note>
     </para>
     <!-- TODO: a note about addgpcslashes? -->
    </answer>
   </qandaentry>

   <qandaentry xml:id="faq.html.form-image">
    <question>
     <para>
      Я намагаюся використати тег &lt;input type="image"&gt;, але змінні
      <varname>$foo.x</varname> і <varname>$foo.y</varname> недоступні.
      <varname>$_GET['foo.x']</varname> не існує теж. Де вони?
     </para>
    </question>
    <answer>
     <para>
      Замість звичної кнопки для надсилання форми можна використовувати
      зображення за допомогою тегу:
      <programlisting role="html">
<![CDATA[
<input type="image" src="image.gif" name="foo" />
]]>
      </programlisting>
      Коли користувач клацне десь на зображення, така форма буде передана
      серверу з двома додатковими змінними:
      <varname>foo.x</varname> and <varname>foo.y</varname>.
     </para>
     <para>
      Оскільки <varname>foo.x</varname> і <varname>foo.y</varname> містять в
      назвах недозволені символи, вони автоматично перейменуються на
      <varname>foo_x</varname> і <varname>foo_y</varname>. Тобто крапки
      заміняться на підкреслення. Таким чином, ви матимете доступ до цих
      змінних, як і до будь-яких інших, описаних в розділі про отримання
      <link linkend="language.variables.external">змінних з зовнішніх
      джерел</link>. До прикладу, <varname>$_GET['foo_x']</varname>.
      <note>
       <para>
         Пробіли в назвах змінних запиту перетворюються на підтвердження.
       </para>
      </note>
     </para>
    </answer>
   </qandaentry>

   <qandaentry xml:id="faq.html.arrays">
    <question>
     <para>Як я можу створити масиви в HTML-тегові &lt;form&gt;?</para>
    </question>
    <answer>
     <para>
      Для отримання в скрипті PHP надісланого результату як
      <link linkend="language.types.array">array</link>, треба називати атрибути
      тегів &lt;input&gt;, &lt;select&gt; і &lt;textarea&gt; за зразком:
      <programlisting role="html">
<![CDATA[
<input name="MyArray[]" />
<input name="MyArray[]" />
<input name="MyArray[]" />
<input name="MyArray[]" />
]]>
      </programlisting>
      Квадратні дужки після назви змінної позначають її як масив. Ви можете
      групувати елементи в різні масиви, назвавши однаково різні елементи:
      <programlisting role="html">
<![CDATA[
<input name="MyArray[]" />
<input name="MyArray[]" />
<input name="MyOtherArray[]" />
<input name="MyOtherArray[]" />
]]>
      </programlisting>
      Такий код створює два масиви "MyArray" та "MyOtherArray", які
      надсилаються до скрипта PHP. Також можливо називати ключі масивів:
      <programlisting role="html">
<![CDATA[
<input name="AnotherArray[]" />
<input name="AnotherArray[]" />
<input name="AnotherArray[email]" />
<input name="AnotherArray[phone]" />
]]>
      </programlisting>
      Масив "AnotherArray" міститиме ключі 0, 1, "email" і "phone".
      </para>
      <para>
       <note>
        <para>
         Визначення ключів масиву необов'язкове у HTML. Якщо ви не визначите їх,
         масив заповниться в тому порядку, в якому елементи розташовані у формі.
         Перший приклад міститиме ключі 0, 1, 2 та 3.
        </para>
       </note>
      </para>
      <para>
      Докладніше:
      <link linkend="ref.array">Функції для масивів</link>,
      <link linkend="language.variables.external">Змінні з зовнішніх
      джерел</link>.
     </para>
    </answer>
   </qandaentry>

   <qandaentry xml:id="faq.html.select-multiple">
    <question>
     <para>
      Як мені отримати всі вибрані варіанти з множинного виду HTML-тегу
      &lt;select&gt;?
     </para>
    </question>
    <answer>
     <para>
      Множинний вид тегу &lt;select&gt; в HTML дозволяє користувачам обрати
      кілька елементів з списку. Далі ці елементи передаються до обробника
      дій форми. Проблема в тому, що вони всі передаються з однаковою назвою.
      Тобто:
      <programlisting role="html">
<![CDATA[
<select name="var" multiple="yes">
]]>
      </programlisting>
      Обрані варіанти надійдуть до обробника дій таким чином:
      <programlisting>
var=option1
var=option2
var=option3
      </programlisting>
      Кожен наступний обраний варіант буде переписувати попередній вміст змінної
      <varname>$var</varname>. Рішенням є використати можливість PHP робити
      "масив з елемента форми". Слід писати наступне:
      <programlisting role="html">
<![CDATA[
<select name="var[]" multiple="yes">
]]>
      </programlisting>
      Тоді PHP розглядатиме <varname>$var</varname> як масив, і кожне
      задавання значення var[] додаватиме елемент до масиву. Перший елемент
      стане <varname>$var[0]</varname>, наступний — <varname>$var[1]</varname>,
      і так далі. Функція <function>count</function> може бути використана, щоб
      визначити кількість обраних варіантів, а функція <function>sort</function>
      — для впорядкування масиву варіантів, якщо необхідно.
     </para>
     <para>
      Майте, на увазі, якщо використовуєте JavaScript, <literal>[]</literal> в
      назві елемента може спровокувати проблеми при намаганні звернутися до
      елемента за атрибутом "name". Краще використати атрибут "id" або вкласти
      назву змінної в одинарні лапки та використовувати її як індекс масиву
      елементів. Наприклад:
      <programlisting>
variable = document.forms[0].elements['var[]'];
      </programlisting>
     </para>
    </answer>
   </qandaentry>

   <qandaentry xml:id="faq.html.javascript-variable">
    <question>
     <para>
      Як мені передати змінну з Javascript до PHP?
     </para>
    </question>
    <answer>
     <para>
      Оскільки код Javascript (зазвичай) виконує клієнт, а код PHP (зазвичай) —
      сервер, а HTTP — це протокол "без стану", дві мови не мають функціоналу
      прямого обміну змінними.
     </para>
     <para>
      Проте є спосіб передавати змінні між ними двома. Перший шлях — згенерувати
      код Javascript в PHP, оновити браузер, передати потрібні змінні назад до
      скрипта PHP. Приклад нижче показує, як достеменно це зробити — він
      дозволяє коду PHP отримати висоту і ширину екрану, що за нормальних умов
      можливо тільки на стороні клієнта.
     </para>
     <para>
      <example>
       <title>Генерування Javascript в PHP</title>
       <programlisting role="php">
<![CDATA[
<?php
if (isset($_GET['width']) AND isset($_GET['height'])) {
  // Вивести геометричні змінні
  echo "Ширина екрана: ". $_GET['width'] ."<br />\n";
  echo "Висота екрана: ". $_GET['height'] ."<br />\n";
} else {
  // Передати геометричні змінні
  // (підготувати рядок запиту
  // — з методом POST змінні треба обробляти інакше)

  echo "<script language='javascript'>\n";
  echo "  location.href=\"{$_SERVER['SCRIPT_NAME']}?{$_SERVER['QUERY_STRING']}"
            . "&width=\" + screen.width + \"&height=\" + screen.height;\n";
  echo "</script>\n";
  exit();
}
?>
]]>
       </programlisting>
      </example>
     </para>
    </answer>
   </qandaentry>

  </qandaset>
 </chapter>

<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-omittag:t
sgml-shorttag:t
sgml-minimize-attributes:nil
sgml-always-quote-attributes:t
sgml-indent-step:1
sgml-indent-data:t
indent-tabs-mode:nil
sgml-parent-document:nil
sgml-default-dtd-file:"~/.phpdoc/manual.ced"
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
End:
vim600: syn=xml fen fdm=syntax fdl=2 si
vim: et tw=78 syn=sgml
vi: ts=1 sw=1
-->