8.4. Дизайн search.html

В этой секции подразумевается, что в качестве фронтэнда используется search.cgi.

8.4.1. Как создаётся страница результатов

Файл etc/search.htm состоит из некоторого числа блоков, разделённых HTML комментариями, начинающимися с <!--comment--> и заканчивающимися <!--/comment-->.

Блок <!--variables--> только используется search.cgi Остальные блоки формируют части страницы результатов поиска в зависимости от ситуации.

Блоки <!--top--> и <!--bottom--> всегда показываются пользователям как верх и низ страницы результатов соответственно.

также существуют следующие блоки <!--restop-->, <!--res--> and <!--resbot--> , блоки навигации и блоки <!--notfound-->, <!--noquery--> and <!--error-->. Последние выдаются в зависимости от результата поиска.

Любой HTML-код, расположенный вне этих блоков, игнорируется.

Таким образом, вывод search.cgi всегда будет примерно таким:

				
  top                 
  restop                top                 top              top
  res           или     notfound     или    error     или    noquery
  resbot                bottom              bottom           bottom
  (navigation)
  bottom
			
			

Навигационный блок строится таким же образом. Блоки <!--navleft--> и <!--navright--> отображаются на всех страницах и ссылаются на предыдущую и на следующую страницы с результатами поиска, тогда как <!--navXXX_nop--> используются, если нет больше страниц в том или другом направлении.

8.4.2. Ваш HTML-шаблон

Простейший HTML-шаблон, необходимый для работы, дан в etc/search.htm-dist. Рекомендуется начать работу именно с него, внеся только ваши настройки в блок <!--variables-->.

Если вы решили украсить ваш поиск, у вас есть два пути. Первый: оставить простой дизайн search.htm, но сделать его частью набора фреймов. Таким образом вы можете добавить меню и др. элементы в одном фрейме, и оставить вывод search.htm в другом.

Второй путь состоит во внесении вашего дизайна целиком в search.htm Если вы хорошо понимаете систему блоков, описанную выше, этот путь не будет слишком сложным. Самым важным моментом при этом будет отслеживание открытия html-тэгов в одном блоке и закрытие их в другом.

Например, вы желаете видеть страницу как таблицы примерно такого вида:

                   ----------------------------------
                  |       верхняя таблица            |
                  |..................................|
                  |        .                         |
                  |левая   .                         |
                  |        .                         |
                  |        .     основная таблица    |
                  |таблица .                         |
                  |        .                         |
                  |        .                         |
                   ----------------------------------

Если планируется поместить результаты поиска в основную таблицу, вы можете поместить в блок <!--top--> в search.htm весь HTML-код вплоть до открытия основной таблицы (<table><tr><td>). Если вы также поместите код закрытия основной таблицы и остальные закрывающие тэги страницы в блок <!--bottom--> (</table></tr></td></body></html>) и оставите остальные блоки без изменения, вы получите желаемый табличный дизайн и результаты поиска будут в основной таблице.

При более сложном дизайне, если сами хотите формировать страницу с результатами поиска, вы можете и далее пользоваться этим методом, до тех пор, пока можете отслеживать открытие-закрытие тэгов в различных блоках или их комбинациях.

Отдельные блоки могут быть отформатированы как угодно, если такое форматирование закончено в пределах этого блока. Т.е. ничто не мешает делать что-то вроде этого:

  <!--error-->
    <table>
    <tr><td bgcolor"red">
      <font color="#ffffff">  
      [error variables]
      </font>
    </tr><td>
    </table>
  <!--error-->
		

Чего вы не можете сделать без редактирования исходного кода DataparkSearch, это изменить порядок обработки блоков из search.htm.

8.4.3. О формах

Многие современные браузеры могут работать с формами, разнесёнными по разным элементам таблицы или разным таблицам, однако создание таких форм противоречит всем стандартам создания HTML-кода. Создавайте такие формы только когда не можете избежать этого.

Например,

  <table>
  <tr><td>
     <form>
     <input type="text" name="something">
     <input type="radio" name"button1">
     <input type="radio" name"button2">
     </form>
  </tr></td>
  </table>
			
это допустимо, а
  <table>
    <tr><td>
       <form>
       <input type="text" name="something">
    </tr></td>
  </table>
  <table>
    <tr><td>
       <input type="radio" name"button1">
       <input type="radio" name"button2">
       </form>
    </tr></td>
    </table>
			
это нет.

Заметим, что элементы ввода в формах поиска могут быть изменены по желанию. В образце шаблона поиска используются меню-раскладушки, но ничто не мешает использовать кнопки-переключалки или скрытые поля ввода, даже текста запроса поиска. Например, если в search.htm указано

  Results per page:
  <SELECT NAME="ps">
  <OPTION VALUE="10" SELECTED="$ps">10
  <OPTION VALUE="20" SELECTED="$ps">20
  <OPTION VALUE="50" SELECTED="$ps">50
  </SELECT>
			
вы можете заменить это на
  <input type="radio" name="ps" value="10" checked="$(ps)">
  <input type="radio" name="ps" value="20" checked="$(ps)">
  <input type="radio" name="ps" value="50" checked="$(ps)">
			
в результате чего получим три кнопки-переключалки вместо выпадающего меню, с тем же значением "20" по умолчанию и с той же функциональностью. Единственное, что вы не можете делать, это давать возможность множественного выбора в меню типа <type="checkbox"> или <select multiple>.

Заметим, что вы можете также использовать формат

  <input type="hidden" name="XX" value="YY">
  			
если вы хотите использовать другие значения вместо значений по умолчанию и/или не заботить пользователя выбором значения этого параметра.

8.4.4. Относительные ссылки в search.htm

Необходимо отметить, что search.htm обрабатывается в вашей cgi-bin директории. Позиция этой директории относительно корня определяется вашим веб-сервером независимо от ее расположения на файловой системе. Вполне вероятно, это http://your_document_root/cgi-bin/ . Т.к. search.cgi расположен в cgi-bin, любая ссылка на изображения или др. в search.htm подразумевает, что cgi-bin - базовая директория. Тем самым, если у вас файловая система вида

   home/
   home/your_document_root/
   home/your_document_root/img/
   home/cgi-bin/
			
правильная относительная ссылка с search.cgi на изображения в img/ должна быть <img src="../img/image.gif">, несмотря на несоответствие структуре файловой системы.

8.4.5. Добавление формы поиска на другие страницы

Чтобы добавить форму поиска на любой вашей страницы, разместите следующий код на этих страницах где сочтёте нужным:

<FORM 
	METHOD=GET 
	ACTION="http://path-to-search.cgi">
      <INPUT TYPE="text" NAME="q" VALUE="">
      <INPUT TYPE="submit" VALUE="Search!">

</FORM>