2.2 Разработка архитектуры системы

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

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

2.3 Программирование и основные коды

2.3.1 Разработка шаблонов основных типов страниц

Обычно шаблоны под Wordpress создаются следующим образом:

• Верстка обычного html-документа и стилей css.

• Разделение документа на главные составляющие части.

• Создание отдельных php-документов для шаблонов Wordpress.

• Наполнение этих документов частями кода из первоначального файла.

• Добавление специальных тегов.

• Загрузка на сервер.

• Доработка кода путем редактирования онлайн или через Notepad++ с последующей загрузкой по FTP.

Действуя по заданному ходу первоначально был создан шаблон страницы в html:

Остальные коды страниц приведены в Приложении Б.

2.3.2 Разработка и добавление внешних модулей

Для реализации системы использовались следующие сторонние модули:

1. Плагин NextGEN Gallery.

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

Рисунок 22 – Изначальный вид меню в наборе JavaScript LavaLamp

2. Плагин Menu Swapper.

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

3. Набор JavaScript LavaLamp.

Использовался для создания ползунка для горизонтального меню “Шкала времени”. Изначальный вид меню можно увидеть на рисунке 23.

Рисунок 23 – Изначальный вид меню в наборе JavaScript LavaLamp

4. Набор JavaScript jQuery Vertical Accordion Menu.

Использовался для создания ползунка для вертикального меню “Навигация”.

Подробно о том, как пользоваться данными плагинами описано в пункте 3.2 – руководство администратора.

3 Разработка руководства пользователя и администратора

3.1 Руководство пользователя

Квалификация в предметной области: не требует особых знаний.

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

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

Права доступа: гостевые. Возможно просматривать материал без внесения изменений в него.

Порядок работы с системой:

Пользователь попадает на главную страницу информационной системы (рис. 24) и может сделать следующие действия:

• Нажать на верхний левый логотип лагеря, что направит его на основной сайт лагеря (www.zhdanovec.nntu.nnov.ru).

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

• Нажать на года из меню “шкала времени”, что приведет к перемещению в один из разделов, содержащий список лет данного десятилетия.

Рисунок 24 – Главная страница ИС фотоархив СОЛ «Ждановец»

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

Рисунок 25 – Страница ИС “1970-1979”

На данном этапе пользователь может:

• Сменить десятилетие на шкале времени.

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

• Выбрать смену или раздел события года. В блоке содержания откроется список изображений (рис. 27), а в блоке навигации выбранный элемент выделится зеленым цветом (рис. 26 в).

а	б	в

Рисунок 26 – Страница ИС “1970-1979” а – меню перед нажатием на год, б – раскрывшееся подменю со сменами после нажатия на вкладку 1970, в – меню с выбранной второй сменой

При нажатии на одну из фотографий (рис. 27) она открывается в полном размере в AJAX-окне (рис. 28). В нем содержится описание фотографии, а так же кнопки закрытия и переключения на следующую фотографию. Закрыть фото можно просто щелкнув на пространстве вне фотографии.

Рисунок 27 – Страница ИС “1970, 2 смена”

Рисунок 28 – Открытая в AJAX-окне фотография

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

3.2 Руководство администратора

Квалификация в предметной области: желательны знания html, css, php для редактирования кода страниц.

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

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

Права доступа: администратор. Возможность просматривать материал, редактировать его, загружать новый, удалять, создавать свои группы пользователей и присваивать им свои права.

Порядок работы с системой:

Что бы зайти в систему как администратор, необходимо ввести в строке браузера, после адреса сайта, через “/” wp-admin. Затем ввести полученный логин и пароль (рис. 29). В целях безопасности, логин и пароль не указываются в выпускной квалификационной работе.

Пример: Nazvanie_saita.ru/wp-admin

Рисунок 29 – Вход в админ-панель

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

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

Раздел Записи не потребуется, т.к. отсутствует использование данных страниц на сайте.