Размещено на http://www.allbest.ru/

Содержание

Введение

1. Постановка задачи

2. Выбор программных средств

3. Процесс разработки

3.1 Требования посетителей к содержимому сайта

3.2 Карта сайта

4. Проектирование базы данных

5. Программирование в «1С-Битрикс»

5.1 Приложение на «1С-Битрикс»

5.2 Визуальная структура страницы на «1С-Битрикс»

5.3 Реализация пользовательского компонента

5.4 Расширение функционала «1С-Битрикс»

5.5 Программирование Мастера создания сайта

6. Реализация типового сайта

6.1 Реализация шаблонов сайта

6.2 Реализация компонентов сайта

6.3 Реализация страниц сайта

6.4 Реализация модуля

6.5 Реализация мастера сайта

7. Организационно-экономическая часть

7.1 Функционально-стоимостный анализ

7.2 Обоснование необходимости проведения ФСА

7.3 Структурная модель проекта

7.4 Построение функциональной модели

7.5 Определение значимости и относительной важности функций по уровням функциональной модели

7.6 Стоимостная диагностика функций

Заключение

Список используемой литературы

Приложения

Введение

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

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

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

1. Постановка задачи

В качестве дипломного проекта требуется разработать типовой сайт танцевальных школ. Рассмотрев и проанализировав потребности типовой танцевальной школы (см. приложение А), мы определили задачи, которые должен при этом выполнять сайт:

1) Информирование посетителя :

· Место нахождения;

· Контакты;

· Карта проезда.

2) Размещение новостной информации;

3) Информирование об услугах;

4) Предоставление информации о расписании;

5) Возможность подать заявку;

6) Информация о стоимости;

7) Информация о преподавателях;

8) Информации о событиях;

9) Запись на событие;

10) Фото/видео архивы;

11) Список партнеров;

12) Возможность коммуникации (форум/вопрос-ответ /опросы/отзывы).

Рассмотрим подробнее каждую из поставленных задач.

Информирование посетителя

Одна из важнейших задач сайта организации - предоставить возможность ее найти. Для решения этой задачи приводится список филиалов/помещений для занятий. К каждому филиалу размещается адрес, контактная информация, карта проезда (до n филиалов на страницу, организация постраничного просмотра).

Администраторам предоставляется возможность редактировать страницу с контактами в редакторе.

Размещение новостной информации

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

Администраторам предоставляется возможность добавлять новую новость, редактировать и удалять существующую.

Информирование об услугах

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

Администратор имеет возможность добавлять/редактировать/удалять список направлений и список групп.

Предоставление информации о расписании

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

1) Время начала занятия;

2) Время окончания занятия;

3) Наименование танца;

4) Хореограф;

5) Помещение, в котором проводится занятие.

Администратор имеет возможность добавлять время нового занятия, либо редактировать/удалять существующее.

Возможность подать заявку

Возможность записаться на занятия непосредственно через сайт является весьма удобной как для посетителей, так и для организаторов. Потому большое значение играет размещение формы для записи на странице сайта. Любой посетитель страницы может записаться через сайт на занятия, указав в форме фамилию, имя, отчество, разовое посещение либо абонемент. Так же ему необходимо заполнить поле для ввода контактной информации: телефон. Необязательные поля для ввода e-mail и возраста. При нажатии «Записаться» ответственному лицу высылается соответствующее сообщение на электронную почту.

Здесь администратор может редактировать электронную почту для заявок, поля формы, результаты отправки.

Информация о стоимости

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

Администратор имеет возможность редактировать отображаемую информацию в редакторе.

Информация о преподавателях

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

Администратор редактирует/удаляет/добавляет хореографов.

Информации о событиях

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

Администратор может добавлять/редактировать/удалять событие.

Запись на событие

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

Фото/видео архивы

Одна из важнейших задач сайта организации - привлечь внимание посетителей. Для решения этой задачи на сайте должно быть предусмотрено расположение большого числа фотографий и видеороликов. Видеоролики располагаются на соответствующей странице простым перечислением. Каждый ролик начинается с заголовка. Далее приводится сама видеозапись.

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

Администратор имеет возможность добавлять/редактировать/удалять альбомы и фотографии.

Список партнеров

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

Администратор имеет возможность добавлять/удалять/редактировать партнеров.

Возможность коммуникации (форум/вопрос-ответ /опросы/отзывы)

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

Администратор имеет возможность создавать новый опрос/редактировать/удалять

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

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

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

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

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

Если посетитель зашел как зарегистрированный пользователь, то вместо ссылок «Вход» и «Регистрация» отображается ссылка «Выход»

Вопрос-ответ. Здесь приводится список вопросов, оставленных любыми посетителями страницы, ниже к которым приведен ответ. Так же здесь выведена форма для вопроса.

Администратор может удалять вопрос, либо же вписывать ответ и помещать его на странице.

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

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

1) Изменение фоновой картинки;

2) Изменение логотипа;

3) Редактирование пунктов меню;

4) Редактирование контактной информации;

5) Редактировать основное наполнение сайта;

6) Редактировать список направлений;

7) Добавлять различные события/новости/отзывы;

8) Редактировать включаемую область, отображаемую ссылку на расписание;

9) Редактировать область контактных данных, расположенную в нижней части сайта.

2. Выбор программных средств

Для разработки типового сайта использовалась платформа разработки 1С-Битрикс. Данное требование являлось необходимым условием для последующего распространения разработанного продукта.

При работе необходимо было использовать следующие технологии:

1) PHP;

2) HTML;

3) библиотека jQuery;

4) JavaScript;

5) CSS.

Для тестирования были выбраны наиболее популярные браузеры:

1) Firefox;

2) Internet Explorer;

3) Opera.

3. Процесс разработки

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

Весь процесс разработки можно представить в виде:

Рисунок 1 - Процесс разработки сайта

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

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

Для разработки тиражного решения необходимо реализовать возможность его поставки через систему обновлений 1С-Битрикс, поэтому были выделены необходимые дополнительные компоненты и функции, оформленные в модуль «Танцевальная школа», что и позволяет использовать его в качестве тиражного решения. Дополнительные компоненты модуля «Танцевальная школа»:

1) Меню направлений;

2) Календарь новостей и событий;

3) Вопрос-ответ;

4) Отзывы.

Завершающий этап дипломного проекта - написание мастера сайта, при помощи которого пользователь по шагам может установить сайт танцевальной школы на свой компьютер.

3.1 Требования посетителей к содержимому сайта

Таблица 1 - Требования посетителей

Посетители сайта	Цели	Реализация
Кто хочет обучаться	Необходимо показать, что это именно та школа, которая нужна. Возможность без особого труда записаться на занятие. Ознакомить с ближайшими занятиями. Возможность задать интересующий вопрос руководству. Ознакомить посетителя с местом проведения занятий, хореографами, стоимостью	На главной странице расписать преимущества школы, украсить текст фотографиями. Добавить отзывы учеников и список направлений. В главное меню вынести запись + Рядом с логотипом отображать контактный телефон (e-mail) На всех страницах отображать ссылку на расписание. Организовать вопрос-ответ Все в пункте меню “Обучение”
Кто уже обучается	Ознакомить с ближайшими мероприятиями + возможность оставить заявку на участие Ознакомить с последними новостями Предоставить возможность общения	В меню пункт «События», форма регистрации для каждого из них. Так же на всех страницах отображать календарь новостей и событий. На главной странице отображать n последних новостей. В меню пункт «Новости», где дается список всех новостей. Разрешить пользователям оставлять комментарии к событиям, фотографиям. А так же организация «Форума»
Заказчики выступлений	Необходимо оказать, что коллектив этой школы может дать грандиозное выступление.	Посредством качественных фотографий, размещенных видео-роликов с выступлениями этой школы. Так же указание заслуг школы, отображаемые на главной странице сайта.

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

3.2 Карта сайта

На основании всех проведенных анализов было решено определить следующую карту ТСТШ:

1) О нас:

· Новости;

· События;

· Фотоархив;

· Видеоархив;

· Партнеры;

· Отзывы.

2) Обучение:

· Направления:

- Направление 1;

- Направление n.

· Группы;

· Расписание;

· Стоимость;

· Хореографы.

3) Запись;

4) Контакты;

5) Общение:

· Форум;

· Вопрос-ответ.

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

4. Проектирование базы данных

На рисунке 2 приведем полную структуру БД с выделением ключей и связей между таблицами:

Рисунок 2 - База данных

5. Программирование в «1С-Битрикс»

5.1 Приложение на «1С-Битрикс»

Для того, чтобы создать полноценное приложение в «1С-Битрикс», необходимо провести следующую последовательность действий:

1) Написать шаблон сайта и применить его к своему сайту;

2) Создать все необходимые страницы сайта;

3) Создать информационные блоки для данных в соответствии с базой данных;

4) Запрограммировать логику работы сайта в виде компонентов;

5) Применить к шаблону и рабочим областям страниц те компоненты, которые необходимы. Задать их параметры;

6) Создать различные сервисы 1С-Битрикс (формы, опросы, форумы) при необходимости с последующим их размещением на сайте;

7) Отредактировать стили сайта и шаблоны компонент в соответствии с выбранным дизайном.

После этих действий можно приступать к наполнению сайта содержимым.

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

5.2 Визуальная структура страницы на «1С-Битрикс»

Визуальная структура страницы на «1С-Битрикс» состоит из двух основных частей:

1) Шаблон сайта;

2) Рабочая область (WorkArea).

Шаблон сайта содержит ту часть информации, которая отображается на всех страницах сайта, к которым применен данный шаблон. Редактируется содержимое шаблона через специальную вкладку Административной панели - «Панель управления». Здесь необходимо прописать код шаблона и стили, которые будут использоваться в нем.

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

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

Работа с базами данных в 1С-Битрикс осуществляется при помощи так называемых информационных блоков. Информационные блоки - это особый тип представления информации, который позволяет каталогизировать однородную информацию, например, новости, и управлять ею. Аналог информационного блока - таблица в классическом программировании с использованием СУБД.

5.3 Реализация пользовательского компонента

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

1) Создать новое пространство имен в структуре файлов 1С-Битрикс:

/bitrix/components/<новое_пр-во_имен>/ (*) ;

2) Написание всех необходимых файлов в папке компонента, располагающейся по адресу (*);

3) Разместить, к примеру, через визуальный редактор, новый компонент на сайте, указать необходимые параметры компоненты.

Второй пункт рассмотрим подробнее. Для создания компонента необходимо прописать следующие файлы (все пути прописаны относительно корневой папки компонента):

1) .description.php - в нем размещаем описания компонента, которые применяются для работы с компонентом в визуальном редакторе, например, определяем его идентификатор, по которому будет определяться его расположение в дереве компонент;

2) .parameters.php - здесь указываем описания входных параметров компонента. Данное описание применяется для работы с компонентом в визуальном редакторе. Данные этого файла нужны исключительно для создания формы ввода свойств компонента в визуальном редакторе;

3) component.php - данный файл должен содержать сам код компонента;

4) /lang/<язык>/ - здесь располагаются языковые файлы. Язык подключается автоматически. Данная папка содержит файлы, определяющие значения текстовых переменных на соотв. языке. К примеру, для компоненты «Календарь новостей и событий» прописываются дни недели, месяцы, а так же подписи к полям ввода параметров компонента и т.д.;

5) /images/ - в данную папку помещаются изображения, используемые компонентом. Например, ярлык компонента, который будет изображаться в визуальном редакторе;

6) /lang/<язык>/help/.tooltips.php - описывает текст всплывающих подсказок у полей ввода параметров компонента;

7) /templates/<название шаблона>/ - здесь располагаются различные файлы шаблона, такие как сам код шаблона и стили.

Схематично создание нового компонента будет выглядеть так, как показано на рисунке 3:



Рисунок 3 - Файлы компонента

5.4 Расширение функционала «1С-Битрикс»

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

1) Написать свои компоненты, которые необходимо объединить в модуль;

2) В папке «/bitrix/modules/ID модуля/» прописать следующие папки:

· /lang/ID языка/ - каталог с языковыми файлами скриптов модуля

· /install/ - каталог с файлами используемыми для инсталляции и деинсталляции модуля

Каждый модуль должен быть корректно описан в системе для того, чтобы система знала, как с этим модулем работать. Некорректно описаные модули могут привести к полной или частичной неработоспособности системы (например, может не работать система обновлений).

Основным файлом используемым системой для манипуляции модулем является /bitrix/modules/ID модуля/install/index.php. Основное назначение этого файла - это размещение в нем класса с именем совпадающем с ID модуля.

Обязательные методы этого класса:

1) DoInstall - запускается при нажатии кнопки "Установить" в административном меню "Модули", осуществляет инсталляцию модуля;

2) DoUninstall - запускается при нажатии кнопки "Удалить" в административном меню "Модули", осуществляет деинсталляцию модуля.

Код данного файла для модуля «Танцевальная школа» см. в прил. Ж.

5.5 Программирование Мастера создания сайта

Мастер создания сайта - это мастер, ориентированный на развёртывание полнофункционального сайта. Типичный конструктор (мастер) сайта представляет собой следующую последовательность шагов:

1) Выбор типа сайта;

2) Выбор дизайна;

3) Выбор сервисов;

4) Адаптация дизайна (изменение заголовка, логотипа сайта и т.п.).

С помощью API, предоставляемого системой, можно создать мастер с любой логикой.

Чтобы создать мастер, нужно в файле wizard.php определить все шаги и их содержимое. Каждый шаг определяется классом, который обязательно должен наследоваться от класса CWizardStep. В классе шага необходимо переопределить 3 метода:

1) InitStep - вызывается при добавлении шага в мастер. Метод предназначен для инициализации свойств шага: идентификатора (ID), заголовка, подзаголовка, кнопок перехода на следующие шаги и др. В этом методе обязательно нужно определить ID шага;

2) ShowStep - вызывается в момент показа шага пользователю. Метод предназначен для определения содержимого шага: в переменную $this->content необходимо записать весь вывод шага;

3) OnPostForm - вызывается при нажатии на любую из кнопок навигации мастера. В этом методе можно проверить входные данные, вернуть ошибки, изменить текущий шаг, выполнить любые другие действия;

Класс СWizardBase является оболочкой мастера и содержит методы общие для всех шагов (работа с переменными мастера, управление кнопками навигации и др.). Для каждого подключаемого мастера создаётся экземпляр класса СWizardBase.

Для каждого шага, добавляемого в мастер, создаётся экземпляр класса CWizardStep. В переопределяемых функциях шага методы класса CWizardStep доступны через переменную-псевдоним $this. Каждый шаг мастера сам определяет, какие кнопки навигации (Назад, Далее, Готово, Отмена) будут показаны, и на какой шаг они будут вести. Названия кнопок можно изменить по своему усмотрению. Как правило, содержимое шага представляет собой набор полей Web-формы.

6. Реализация типового сайта

В процессе создания типового сайта были реализованы:

1) 2 шаблона сайта;

2) 13 компонент, расположенных в шаблоне;

3) 17 страниц, в том числе 13 из них - динамические;

4) модуль «Танцевальная школа», включающий 4 самописные компоненты;

5) мастер установки сайта.

Далее рассмотрим каждый из пунктов подробно.

6.1 Реализация шаблонов сайта

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

На рисунке 4 изображен формат отображения основного шаблона.

Рисунок 4 - Формат шаблона

В шаблоне форума исключен левый и правый столбец.

6.2 Реализация компонентов сайта

На рисунке 5 цифрами обозначены следующие компоненты, расположенные в шаблоне сайта:

1 - фоновое изображение;

2 - контакты;

3 - логотип;

4 - меню;

5 - список направлений;

6 - отзывы;

7 - расписание;

8 - последнее событие;

9 - последние новости;

10 - календарь новостей и событий;

11 - случайное фото;

12 - опрос;

13 - область контактных данных.

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

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

Пункты меню можно посмотреть по карте сайта, приведенной в пункте 4.2.

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

Рисунок 5 - Вид шаблона в браузере

Рассмотрим некоторые компоненты, используемые в шаблонах более подробно.

Меню сайта

Пункты третьего уровня меню (список направлений) реализованы динамически. Был написан файл вида: .тип_меню.menu_ext.php , в котором происходит получение названий всех направлений из соответствующего инфоблока «Направления». Так же в этом файле мы, наряду с названиями, получаем еще и ссылки на детальную информацию о направлениях. Ниже приведена последовательность действий при написании файла .тип_меню.menu_ext.php:

1) Задаем тип и идентификатор информационного блока, откуда будем производить выборку элементов для вывода в меню;

2) Задаем поля информационного блока, подлежащие выборке;

3) Задаем поля, по значениям которых будем проводить выборку;

4) Выбираем удовлетворяющие условиям элементы информационного блока;

5) Каждый выбранный элемент помещаем в массив;

6) Объединяем основное меню с полученным массивом.

Благодаря этим действиям мы получили выпадающий список направлений, являющийся, по сути, третьим уровнем меню (см. рис. 6).

Рисунок 6 - Меню сайта

Главное меню и меню раздела удобно редактировать через соответствующее меню компонента, либо же через административную панель.

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

Список направлений

Используемый компонент: «Список новостей».

Для работы компонента требуется:

1) Созданный инфоблок «Направления» с полями: наименование, краткое описание, подробное описание, анонсное изображение, детальное изображение;

2) После размещения компонента необходимо указать в его параметрах: инфоблок «Направления», вывод только наименований элементов инфоблока, URL детального просмотра, количество элементов, выводимых на странице максимально возможное;

3) Редактирование шаблона под дизайн сайта, а именно прописание шапки компонента, содержащей ссылку на страницу со списком направлений и само меню направлений.

Отзывы

Используемый компонент: «Список новостей».

Для работы компонента требуется:

1) Созданный инфоблок «Отзывы» с полями: автор, краткий отзыв, подробный отзыв, анонсное изображение, детальное изображение, дата;

2) После размещения компонента необходимо указать в его параметрах: инфоблок «Отзывы», вывод анонсного изображения, даты, автора и краткого отзыва, задание URL детального просмотра, количество элементов, выводимых на странице, равное единице, сортировку по дате (чтобы выводился последний оставленный отзыв);

3) Редактирование шаблона под дизайн сайта, а именно прописание шапки компонента, содержащей ссылку на страницу со списком отзывов и сам последний оставленный отзыв.

Последнее событие и последние новости.

Используемый компонент: «Список новостей».

Для работы компонента требуется:

1) Созданный инфоблок «События» («Новости») с полями: дата, наименование, краткое описание, подробное описание, анонсное изображение, детальное изображение;

2) После размещения компонента необходимо указать в его параметрах: инфоблок «События» («Новости»), вывод только даты, наименования, краткого описания, задать URL детального просмотра, количество элементов, выводимых на странице, равное двум, указать сортировку по дате;

3) Редактирование шаблона под дизайн сайта, а именно прописание шапки компонента, содержащей ссылку на страницу со списком событий (новостей) и сам список из двух последних событий (новостей).

Календарь новостей и событий

Используемый компонент: «Список новостей и событий» (пользовательский).

Для работы компонента требуется:

1) Созданные инфоблоки «События» и «Новости» с полями: дата, наименование, краткое описание, подробное описание, анонсное изображение, детальное изображение;

2) После размещения компонента необходимо указать в его параметрах: инфоблок «События», URL детального просмотра событий, инфоблок «Новости», URL детального просмотра новостей;

3) Редактирование шаблона под дизайн сайта, а именно прописание шапки компонента, содержащей ссылку на страницу с подробным календарем (на нем предусмотрен переход по месяцам, а так же отображаются все события/новости, относящиеся к одному дню), и самого календаря.

Опрос

Используемый компонент: «Текущий опрос».

«1С-Битрикс» содержит такой сервис, как опросы. При помощи этого сервиса задается Группа опросов (в ней же указывается права доступа), затем в ней создаются списки опросов. Для каждого опроса задается текст вопроса, а так же указывается список ответов. Для того, чтобы опрос мог отображаться на страницах сайта, необходимо установить флажок активности. После проведенных действий можно приступать к размещению компонента опроса на страницах сайта.

Через меню компонента указываем группу опросов.

6.3 Реализация страниц сайта

Все страницы сайта можно поделить на две категории: статические и динамические.

В случае статических страниц содержимое заносится через специальный редактор.

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

1) Создание информационных блоков;

2) Заполнение информационных блоков элементами, которые необходимо отобразить на странице;

3) Установка нужных компонент на страницах сайта;

4) Настраивание параметров компонент;

5) Редактирование шаблона компонента под дизайн.

Страница «Новости»

Используемый компонент: «Новости» (комплексный).

Для работы компонента требуется:

1) Созданный инфоблок «Новости» с полями: дата, наименование, краткое описание, подробное описание, анонсное изображение, детальное изображение;

2) После размещения компонента необходимо указать в его параметрах: инфоблок «Новости», для списка новостей вывод только даты, наименования, краткого описания, и анонсного изображения, для страницы подробной информации о новости вывод даты, наименования, подробного описания и анонсного изображения. Так же необходимо задать количество элементов, выводимых на странице списка и указать сортировку по дате;

3) Редактирование шаблона под дизайн сайта.

В результате получаем страницу, изображенную на рисунке 7.

Рисунок 7 - Страница новостей

Страница «События»

Используемый компонент: «Новости» (комплексный).

Для работы компонента требуется:

1) Созданный инфоблок «События» с полями: дата, наименование, краткое описание, подробное описание, анонсное изображение, детальное изображение;

2) После размещения компонента необходимо указать в его параметрах: инфоблок «События», для списка событий вывод только даты, наименования, краткого описания, и анонсного изображения, для страницы подробной информации о событии вывод даты, наименования, подробного описания и анонсного изображения. Так же необходимо задать количество элементов, выводимых на странице списка и указать сортировку по дате;

3) Редактирование шаблона под дизайн сайта. Каждое событие подразумевает запись, в связи с чем страницу детального просмотра события дополняем ссылкой на форму записи.

В результате получаем страницу, изображенную на рисунке 8.

Рисунок 8 - Страница событий

Страница «Фотоархив»

Используемый компонент: «Фотогалерея 2.0»

Для работы компонента требуется:

1) Созданный инфоблок «Галерея» с полями: наименование, краткое описание, подробное описание, анонсное изображение, детальное изображение;

2) В инфоблоке «Галерея» создаем разделы, которые отображаться будут в виде альбомов. Задаем название, изображение обложки, дату создания альбома. После того, как создан альбом, в него нужно загрузить фотографии. Указываем название, текст анонса, детальный текст, фото анонса, детальное фото. Здесь необходимо отметить, что создать альбомы и фотографии мы могли и со страницы, на которой размещен компонент «Фотогалерея 2.0».

3) После размещения компонента необходимо указать в его параметрах: инфоблок «Галерея», разрешение оставлять отзывы и голосовать;

4) Редактирование шаблона под дизайн сайта.

В результате получаем страницу, изображенную на рисунке 9.

Рисунок 9 - Страница фотоархива

Страница «Отзывы»

Используемый компонент: «Отзывы» (пользовательский).

Для работы компонента требуется:

1) Созданный инфоблок «Отзывы» с полями: дата, автор, краткий отзыв, подробный отзыв, анонсное изображение, детальное изображение;

2) После размещения компонента необходимо указать в его параметрах: инфоблок «Отзывы», для списка отзывов вывод даты, автора, краткого отзыва и анонсного изображения, для страницы подробной информации об отзыве вывод даты, автора, подробного отзыва и анонсного изображения. Так же необходимо задать количество элементов, выводимых на странице списка и указать сортировку по дате. Для формы необходимо указать поля, выводимые на редактирование, задать обязательные для заполнения и обозначить подписи к полям;

3) Редактирование шаблона под дизайн сайта.

В результате получаем страницу, изображенную на рисунке 10.

Рисунок 10 - Страница отзывов

Страница «Направления»

Используемый компонент: «Новости» (комплексный).

Для работы компонента требуется:

1) Созданный инфоблок «Направления» с полями: наименование, краткое описание, подробное описание, анонсное изображение, детальное изображение;

2) После размещения компонента необходимо указать в его параметрах: инфоблок «Направления», для списка направлений вывод наименований элементов инфоблока, анонсное изображение и краткое описание, а для страниц детального просмотра - наименование, анонсное изображение и подробное описание. Так же необходимо задать количество элементов, выводимых на странице и указать параметры сортировки;

3) Редактирование шаблона под дизайн сайта.

В результате получаем страницу, изображенную на рисунке 11.

Рисунок 11 - Страница направлений

Страница «Расписание»

Используемый компонент: «Список новостей».

Для работы компонента требуется:

1) Созданный инфоблок «Расписание» с полями: группа, день недели, время начала занятия, время окончания, зал, танец, хореограф. Важно отметить, что такие свойства, как хореограф, танец и группа имеют тип «Привязка к элементам», т.е для задания этим свойствам значений нужно будет выбрать необходимые элементы из других инфоблоков;

2) После размещения компонента необходимо указать в его параметрах: инфоблок «Расписание», количество элементов на странице (в нашем случае это 20000 - максимально большое число, поскольку навигация нам здесь абсолютно ни к чему). Так же отмечаем поля, которые необходимо вывести на странице расписания: день недели, время начала, время окончания, зал, хореограф, группа, танец. И задаем сортировку по времени начала занятий. сайт визуальный пользовательский стоимостный

3) Редактирование шаблона под дизайн сайта.

Необходимо прописать шаблон таким образом , чтобы элементы инфоблока «Расписание» отображались именно в виде таблицы, причем на каждую танцевальную группу - своя таблица. Приведем алгоритм прописания шаблона:

1) Проводим выборку активных элементов из инфоблока «Группы»;

2) Выводим название текущего выбранного элемента из инфоблока «Группы»;

3) Выводим шапку таблицы (дни недели: понедельник, вторник,…);

4) Заполняем столбец таблицы для текущего дня недели: для каждого элемента инфоблока «Расписание» проверяем совпадение поля «Группа» с текущим значением группы. Так же проверяем на совпадение значения поля «День недели» с текущим днем недели. Выводим поля (время занятий, название танца, хореограф, зал) подходящих элементов инфоблока «Расписание» в соотв. ячейку таблицы;

5) Переход к следующему дню недели;

6) Повторяем пункты 4 - 5 пока не закончатся дни недели;

7) Переход к следующему элементу инфоблока «Группы»;

8) Повторяем 2-8 пока не закончатся элементы инфоблока «Группы».

В результате получаем страницу, изображенную на рис. 12.

Рисунок 12 - Страница расписания

Страница «Стоимость»

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



Рисунок 13 - Страница стоимости

Страница «Хореографы»

Используемый компонент: «Новости» (комплексный).

Для работы компонента требуется:

1) Созданный инфоблок «Хореографы» с полями: наименование, краткое описание, подробное описание, анонсное изображение, детальное изображение;

Рисунок 14 - Страница хореографов

2) После размещения компонента необходимо указать в его параметрах: инфоблок «Хореографы», для списка хореографов вывод наименований элементов инфоблока, анонсное изображение и краткое описание, а для страниц детального просмотра - наименование, анонсное изображение и подробное описание. Так же необходимо задать количество элементов, выводимых на странице и указать параметры сортировки;

3) Редактирование шаблона под дизайн сайта.

В результате получаем страницу, изображенную на рисунке 14.

Страница «Запись»

Используемый компонент: «Заполнение веб-формы»

Рисунок 15 - Страница с формой записи на занятия

«1С-Битрикс» содержит такой сервис, как веб-формы. При помощи этого сервиса можно создать форму, задав такие поля, как: Наименование формы, доступ, список вопросов, выводимых на заполнение. Для записи на занятия необходимо было ввести в форму следующие вопросы: Фамилия, Имя, Отчество, Посещение (разовое/абонемент), контактный телефон, e-mail, возраст.

После проведенных действий можно приступать к размещению компонента на страницах сайта (рис. 15).

Страница «Контакты»

Данная страница организована статически, пользователь может изменять ее содержимое через редактор.

Страница содержит: Наименование помещения, другая информация (адрес, телефон и т.д.) и подробную карту проезда (рис. 16).

Рисунок 16 - Страница контактов

Страница «Форум»

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

На данной странице был размещен комплексный компонент «Форум», в качестве темы была выбрана серая, поскольку именно она наиболее удачно вливалась в общий шаблон сайта (рис. 17).

Рисунок 17 - Страница с форумом

Страница «Вопрос-ответ»

Используемый компонент: «Вопрос-ответ» (пользовательский).

Для работы компонента требуется:

1) Созданный инфоблок «Вопрос-ответ» с полями: дата, автор, вопрос, ответ;

2) После размещения компонента необходимо указать в его параметрах: инфоблок «Вопрос-ответ», вывод даты, автора, вопроса и ответа. Так же необходимо задать количество элементов, выводимых на странице списка и указать сортировку по дате. Для формы необходимо указать поля, выводимые на редактирование, задать обязательные для заполнения и обозначить подписи к полям. Так же важно деактивировать новый добаляемый элемент, т.е. вопрос не будет отображен на старнице сразу же после задания, а прежде всего будет проверен администратором, который заполняет поле для ответа и только после этого активирует элемент инфоблока;

3) Редактирование шаблона под дизайн сайта.

В результате получаем страницу, изображенную на рисунке 18.

Рисунок 18 - Страница «Вопрос-ответ»

6.4 Реализация модуля

Модуль «Танцевальная школа» должен содержать компоненты (рис. 19):

1) Меню направлений;

2) Календарь новостей и событий;

3) Вопрос-ответ;

4) Отзывы.

Рисунок 19 - Модуль

Как за инсталирование модуля, так и за деинсталирования отвечает файл каталога /bitrix/modules/dance/install - index.php (код приведен в приложении Ж). В нем описывается копирование каталогов компонент и других файлов, необходимых для корректной работы компонент.

Компонент «Список направлений»

Цель написания компонента: вывод списка всех направлений в левой части сайта с подсветкой активного пункта.

Для реализации необходимо было завести инфоблок, содержащий следующую информацию о направлениях: наименование, краткая информация, подробная, изображения. В качестве пунктов меню берутся наименования элементов инфоблока «Направления» (см. рис. 20).

Рисунок 20 - Файлы компоненты «Список направлений»

Компонент «Календарь новостей и событий»

Цель написания компонента: вывод календаря с отображением новостной и событийной информации.

Для реализации необходимо было завести два инфоблока. Первый содержит информацию о новостях, второй - о событиях: наименование, дата, краткая информация, подробная, изображения. В календаре должно происходить выделение дат, в которые намечается событие, либо новость. При этом эти даты должны быть ссылками на подробную информацию. Таким образом, для работы календаря нам были необходимы такие поля инфоблоков, как дата проведения, наименование (оно отображается как всплывающая подсказка на соответствующей дате), а так же URL детальной информации (см. рис.21).

Рисунок 21 - Файлы компоненты «Календарь новостей и событий»

Компонент «Вопрос-ответ»

Цель написания компонента: вывод списка вопросов с ответами, а так же формы для добавления своего вопроса.

Для реализации необходимо было завести инфоблок, содержащий следующую информацию о вопросах: сам вопрос, ответ, автор вопроса, дата задания. А при помощи формы вопросы, заданные пользователями с ее помощью, автоматически записываются в новый элемент инфоблока «Вопросы». При этом сразу они не отображаются в списке. Для того, чтобы они стали активны, их должен подтвердить администратор и дать на них ответ (см. рис. 22).

Рисунок 22 - Файлы компоненты «Вопрос-ответ»

Компонент «Отзывы»

Цель написания компонента: вывод списка отзывов, а так же формы для добавления своего отзыва.

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

«Отзывы» является комплексным компонентом, так как для него необходимы так же компоненты списка отзывов и детального отзыва. В этом его ключевое отличие от компонента «Вопрос-ответ», поскольку в последнем нам не требовалось получать доступ к странице с детальной информацией, а только к списку вопросов. В связи с этим приведем файлы, которые необходимо было дополнительно прописать для комплексного компонента «Отзывы» (все они прописаны в папке /bitrix/components/itconstruct/otzyv /templates/<название_шаблона>/):

1) news.php - здесь создаем ассоциативный массив для списка отзывов (см. приложение Е), с параметрами: тип инфоблока; id инфоблока; параметры, выводимые в форме; параметры сортировки элементов списка; параметры постраничной навигации; параметры, выводимые в списке;

2) detail.php - здесь создаем ассоциативный массив для страницы детального просмотра с параметрами: автор, фотография, подробный текст отзыва;

3) /bitrix/ - в данной папке расположены шаблоны стандартных компонент битрикс, которые используются компонентой «Отзывы»;

4) /itconstruct/ - в данной папке расположены шаблоны пользовательских компонент, которые используются компонентой «Отзывы».

6.5 Реализация мастера сайта

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

1) Файлы, отвечающие за вывод страниц на сайте;

2) Индексную страницу;

3) Публичные файлы, необходимые для корректной работы сайта, располагающиеся в корневом каталоге;

4) Шаблон сайта, включающий так же шаблоны всех используемых компонент;

5) Все изображения, на которые ссылаются страницы сайта;

6) Все инфоблоки, используемые компонентами;

7) Все сервисы (форумы, опросы).

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

Рисунок 23 - Первый шаг мастера

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

Рассмотрим ключевые моменты при написании мастера сайта.

Прописание шагов мастера

Шаги мастера описываются в файле wizard.php.

На рисунке 23 изображен первый, приветственный шаг мастера. Здесь выводится лишь текст, никаких параметров задавать не нужно.

На рисунке 24 изображен второй шаг мастера. Здесь пользователю необходимо определиться с выбором шаблона для своего сайта и установить переключатель на желаемый. После чего мастер установит выбранный шаблон по умолчанию на сайт танцевальной школы.

Рисунок 24 - Второй шаг мастера

На рисунке 25 изображен третий шаг мастера. Здесь пользователь должен указать следующие характеристики сайта:

1) Наименование школы;

2) Название папки, в которую будут копироваться все файлы с траница сайта;

3) Адрес;

4) Телефон;

5) e-mail;

5) Логотип.

Рисунок 25 - Третий шаг мастера

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

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

1) Новости;

2) Направления;

3) События;

4) Хореографы;

5) Группы;

6) Расписание;

7) Стоимость;

8) Партнеры;

9) Контакты;

10) Фотогалерея;

11) Форум;

12) Форма записи на занятия;

13) Отзывы;

14) Вопрос-ответ;

15) Голосование.

При помощи флажков пользователь отмечает нужные ему на сайте сервисы и мастер приступает к их установке.

Рисунок 26 - Четвертый шаг мастера

Прописание публичных файлов

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



Рисунок 27 - Прописание публичных файлов

Прописание шаблона

Все шаблоны, которые необходимо перенести на сайт танцевальной школы, лежат в папке /templates/ru/<название_шаблона>/ (путь относительно корневого каталога мастера). На рисунке 28 приведена структура данной папки.

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

...