Разработка Интернет-представительства для задач риэлтерской деятельности

Третий раздел представит информационную часть, касающуюся предметной области в целом. Раздел будет представлен страницами:

      «Ваши вопросы» – страница сервиса «Вопрос-ответ», здесь отображаются те вопросы пользователей, на которые уже даны ответы;

      «Задать вопрос» – форма для отправки вопроса от пользователей агентству;

      «Планировки» – список типовых планировок квартир, представленных на рынке недвижимости г.Владивостока, ссылки на их графическое представление;

      «Документы» – список и краткое описание документов, с которыми приходится связываться при работе с недвижимостью.

Для администраторской части раздел будет полностью посвящен работе с сервисом «Вопрос-ответ» и включит в себя четыре страницы:

      «Вопрос-ответ» – поступившие вопросы от пользователей, есть возможность редактировать, отвечать либо удалять вопросы;

      «Добавить» – возможность добавить вопрос и соответственно на него ответить, сделано для возможности превентивного добавления наиболее часто задаваемых вопросов (из практики) и ответа на них;

      «Все» – полный список вопросов;

      «Найти» – поиск по тексту вопроса.

Для обеспечения большей информационной привлекательности сайта было решено добавить раздел «Дополнительно», содержащий различные полезные ссылки на ресурсы сети «Интернет»:

      Телефонный справочник по Владивостоку;

      Интерактивная карта г.Владивостока;

      Сайт города Владивостока;

      Погода во Владивостоке и крае;

      Региональный портал Фарпост.ru;

      Объединенная база квартир Корпорации;

      Поисковый сервер Яндекс.ru;

      Почтовый сервер Mail.ru.

Три наиболее востребованных пункта этого списка будут вынесены в меню как подпункты. Для пользовательской части это буду: телефонный справочник по Владивостоку, интерактивная карта города и портал Фарпост.ру.

Для администраторской части приоритеты расставлены несколько по-другому: Фарпост.ру, газета «Дальпресс» и газета «Из рук в руки».

Наглядно структуру проекта показывает рисунок 2.3.

Теперь, когда структура сайта определена, можно переходить к следующему этапу. Необходимо создать визуальное представление, в которое бы уложилась описанная структура.

Рисунок 2.3 – Структура проекта Amira2.ru

Изначально было создано несколько эскизов экстерьера сайта, среди которых был выбран рабочий вариант. Он был реализован в виде рисунка в натуральную величину (в полный размер экрана) при помощи программы Adobe Photoshop CS2. Этот эскизный проект (Приложение Ж) был представлен заказчику, чтобы тот мог оценить приблизительный внешний вид готового проекта.

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

В эскизном проекте выделены три фиксированных элемента, которые будут отображаться на каждой странице сайта (с возможными незначительными изменениями). Это анимированная заставка, меню и служебная часть.

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

Сама заставка состоит их двух частей, она разделена пополам горизонтально. Левая часть создана по flash-технологии, является файлом векторной графики и содержит анимацию. Правая половина – обычный рисунок, являющийся продолжением левой части. Это своего рода компромисс – сложный анимированный рисунок занимает много места и ощутимо увеличивает время загрузки, а простой выглядит достаточно блекло. Скомбинировав относительно простую векторную графику со сложным статичным изображением, удалось получить оригинальную композицию при небольших затратах трафика. Оба файла находятся в директории «/images» корневого каталога.

Меню было решено расположить классически – слева. Основным аргументом явилась практичность: такое решение, во-первых, является привычным, а во-вторых, предоставляет достаточно пространства для организации функционального и понятного меню. Пункты меню, входящие в один раздел, были визуально объединены в группы, что должно было сделать структуру сайта более наглядной и понятной для пользователя.

Служебная часть оформлена как элемент экстерьера, завершающий картину. На ней будет располагаться ссылка для перехода между пользовательской и администраторской частями сайта.

Меню и служебная часть оформлены без применения графики, они представляют собой ячейки таблиц, их форма и цвет заданы соответствующими параметрами. При оформлении ссылок также не использовалась анимация, только параметры. В результате – достойный внешний вид при минимуме затрат (как труда, так и трафика) [2].

Все оставшееся пространство будет занято непосредственно содержимым web-страниц, и следующим этапом будет их компоновка.

Компоновка страниц

Любой сайт, созданный с использованием PHP, можно условно разделить на три уровня восприятия (Рисунок 2.4).

Рисунок 2.4 – Условные уровни восприятия сайта

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

Этот документ находится на втором уровне восприятия, сервер передает его браузеру по протоколу HTTP, а браузер в свою очередь отображает его в приемлемом для пользователя виде.

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

В итоге можно говорить о том, информация воспринимается обработчиком только в рамках своего уровня. Сервер не сможет интерпретировать HTML документ, для него это абстрактный набор символов. Браузер не сможет понять PHP код по той же причине, а пользователь (если он не web программист) не воспринимает ни то, ни другое.

Следовательно, целью проекта является создать PHP код, который при обработке сервером будет генерировать запрашиваемые пользователем страницы.

Существует множество способов компоновки страниц, которые позволяют различными способами и в различной степени упростить процесс создания и уменьшить размер страниц. Однако большинство способов сводится к тому, что элементы, общие для нескольких страниц (например, меню или мультимедийные компоненты) выделяются в отдельный объект (файл, таблицу и т.п.) и используются многократно. Это позволяет ощутимо ускорить загрузку страниц с сервера за счет того, что объект загружается только один раз и используется в нескольких местах.

Наиболее удобной будет следующая технология: структура страницы представляет собой таблицу (Рисунок 2.5), каждая из ячеек которой описана в отдельном файле. При этом готовая страница будет формироваться на сервере по запросу пользователя [2].

Рисунок 2.5 – Визуальная структура страницы

Для пользовательского и администраторского разделов сайта это будут разные наборы страниц, соответственно для администраторской части была создана отдельная директория “/admin” со своим набором файлов.

Реализуется данная технология компоновки при помощи PHP вставок в HTML код. Тэги «<?php» и «?>» обозначают границы PHP кода. Функция Include(“”) языка PHP позволяет вставлять текст любого существующего файла в имеющийся программный код. Таким образом, повторяющиеся участки программного кода также можно выделять в отдельные файлы, и многократно использовать.

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

Существуют два метода передачи параметров: GET и POST. Отличаются они тем, что метод GET передает параметры открыто в адресе страницы-получателя (например, “http://amira2.ru/index.php?cont=1” – параметр “cont” равный единице будет передан странице “index.php”). Метод POST, напротив передает параметр скрыто от пользователя. Его реализация сложнее, но позволяет передавать большее количество параметров, обрабатывать данные форм и скрывать передаваемую информацию. Для организации ссылок лучше использовать метод GET ввиду его простоты.

Работа с параметрами предполагает следующее: при обработке страницы специальная функция выделяет параметр из адреса страницы и помещает его в указанную переменную. Файл с исполняемым кодом делится на части, перед каждой из них ставится метка, а после – оператор-ограничитель “break”. Структура соответствующей PHP вставки представлена на рисунке 2.6.

В зависимости от значения переданного параметра будет выполнена только одна часть кода – та, метка которой соответствует значению параметра, остальные же метки будут проигнорированы. В результате браузер получит код запрашиваемой страницы.

Рисунок 2.6 – Структура PHP вставки в HTML документ

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

Перейдем к реализации описанного подхода на практике.

В первую очередь необходимо инициировать проект. После запуска комплекса Apache система создает виртуальный диск, имитирующий жесткий диск сервера. На нем в директории “\home” создается поддиректория, названая web-адресом проекта. В нашем случае ее имя “amira2.ru”. В ней автоматически будут созданы несколько поддиректорий второго и третьего уровня, среди них директория “Z:\home\amira2.ru\www\”, которая будет являться корневым каталогом проекта. В нее помещаем директорию “\images”, содержащую графические файлы, а в нее, в свою очередь поддиректорию “\plans” с планировками квартир.

Далее новый проект создается в Macromedia Dreamweaver, он привязывается к вышеуказанному корневому каталогу, и производится его начальная настройка (тип создаваемых по умолчанию файлов, настройки отображения кода и т.д.).

Для того, чтобы упростить понимание технологии, выделим четыре условных типа создаваемых в рамках проекта PHP-файлов:

1)           Файлы общих элементов – описывают элементы,  присутствующие на каждой странице (анимированная заставка, меню и служебная часть). Их будет по три для каждой части сайта: “top.php”, “menu.php”, “bottom.php” – для пользовательской части; и “a_top.php”, “a_menu.php”, “a_bottom.php” – соответственно для администраторской.

2)           Информационные файлы – описывают содержательную часть страниц. Это будут наибольшие по объему файлы, поскольку каждый из них будет содержать код целого раздела. Их будет девять, по четыре на каждую часть сайта, и одна страница для авторизации в администраторскую часть.

3)           Вспомогательные файлы – содержат часто используемые участки кода, обеспечивают их многократное использование при единственном описании. К ним будут отнесены следующие файлы:

      “config.php” – описывает подключение к базе данных на сервере;

      “functions.php” – описывает несколько функций, необходимых практически на каждой странице;

      “access.php” – используется в файлах администраторской части, в нем прописаны: директива начала/продления сессии (session_start()), команды на внедрение текста файлов “config.php” и “functions.php”, а также функция (access()) проверки сессии для предотвращения НСД к администраторской части сайта;

      “extra_data.php” – содержит список ссылок на полезные ресурсы Интернет, используется в разделах «Дополнительно» обеих частей сайта;

      “exterior_1.css” – файл таблицы стилей, его назначение и описание будет дано в следующей части дипломного проекта.

Вспомогательные файлы не содержат фрагментов HTML кода, они лишь используются для его динамического формирования.

4)           Файлы-обработчики – обрабатывают запрос пользователя, являются промежуточным звеном между файлами, посылающими запрос, и файлами отображающими результат. Приведу их краткую характеристику:

      “a_add_adv.php” – добавляет объявление в базу данных (для администраторской части), условно делится на две части: первая считывает переданные параметры и заносит их в переменные, вторая создает новую запись в базе данных и помещает туда значения переменных;

      “a_add_quest.php” – добавляет вопрос в базу данных (для администраторской части), схема аналогично добавлению объявлений;

      “a_adv_sql.php” – обрабатывает изменение/удаление объявлений (для администраторской части), отличается от вышеуказанной технологии тем, что может обрабатывать множество объявлений за один раз;

      “a_quest_sql.php” – аналогично для объявлений;

      “enter.php” – содержит алгоритм авторизации для доступа к администраторской части, сравнивает введенные логин и пароль с образцами, хранящимися в закодированном виде в базе данных, при совпадении создает запись в таблице «Сессии»;

      “exit.php” – выполняет обратную операцию, возвращает в пользовательскую часть;