Глава 5. Экспериментальное тестирование и отладка

5.1 Проверка подключения файлов дизайна

Выполним скриншот главной страницы (см. рис. 35).

Рисунок 35 - Скриншот главной страницы

1. В рамке под номером 1 показано отображение главного баннера в разделе "Header". Баннер встал по всей своей ширине без потери качества изображения.

2. Во второй рамке показана работа виджета "jQuery Vertical Mega Menu" с заданным стилем и фоновым изображением для пунктов меню. Меню удачно вписывается под общий дизайн сайта.

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

4. Четвёртая рамка показывает отображение иконок категорий, созданное путём редактирования главной страницы с присвоением классам fll-center и fll-four соответствующих стилей. Стили указаны корректно, так как отображение иконок пропорционально другим элементам сайта.

5.2 Проверка отображения категорий и записей

Проведём анализ на примере категории " Бани" (см. рис. 36).

Рисунок 36 - Скриншот категории "Бани"

1. В первой рамке показан результат работы кода отображения личного баннера для категории 1 (Бани).

2. Во второй рамке отмечена навигационная цепочка. А именно показан результат работы функции возврата наименования каталога (title) и ссылочного текса "Назад в меню".

3. Третья рамка содержит результат вывода, созданной в редакторе записей, записи проекта. Здесь наглядно видно результат работы плагина Advanced Custom Fields по отображению произвольных полей "Подробное описание" (кнопка "Подробнее…") и "Цена" (вывод ценника). Все элементы записи отображены согласно макету, соответственно стили элементов заданы корректно.

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

5.3 Проверка отображения комплектации проектов

Рисунок 37 - Скриншот комплектации проекта

В первую очередь, на рисунке 37 представлен результат работы плагина Easy FancyBox, который реализовал функцию всплывающего окна. Также в окне функционируют плагины Easy Responsive Tabs и TablePress, которые подключают вкладки контента и таблицы соответственно.

5.4 Проверка контактной формы заказа

Выберем кнопку "Заказать" и заполним форму заказа.

Рисунок 38 - Скриншот формы заказа

На рисунке 38 видно момент активации плагином Easy FancyBox всплывающего окна и вывод контактной формы плагином Contact Form 7. Заполним форму необходимыми данными и отправим заказ (см. рис. 39).

Рисунок 39 - Скриншот принятого письма заказа

Письмо тестового заказа пришло мгновенно. Шаблон письма отображается корректно и соответствует введённым данным в плагине Contact Form 7.

5.5 Проверка сайта на кроссбраузерность

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

Также в теме "MH Magazine" предусмотрена адаптивность сайта к различным разрешениям экрана монитора. Но, так как был полностью поменян дизайн, то отображение сайта на разных экранах стало некоректным. Для решения данной проблемы были отключены стили адаптивности шаблона "@media".

С помощью интернет-сервиса http://browsershots.org/ была проведена проверка отображения сайта в трёх популярных браузерах последних версий: Google Chrome (см. рис. 40), Mozilla Firefox (см. рис. 41), Opera (см. рис. 42).

Рисунок 40 - Скриншот отображения сайта в Google Chrome

Рисунок 41 - Скриншот отображения сайта в Mozilla Firefox

Рисунок 42 - Скриншот отображения сайта в Opera

Глава 6. Руководство администратора

6.1 Вход в систему управления контентом

Так как у нас установлен плагин защищённого входа "Protected wp-login", то для входа потребуется ввод не только логина администратора и пароля, но и секретный ключ в ссылке на панель управления: "http://506-516.ru/wp-login. php/wp-login. php? sk=мой секретный ключ".

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

6.2 Пункт меню "Консоль"

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

Рисунок 43 - Пункт меню "Консоль"

6.3 Пункт меню "Записи"

Данный пункт является основным для наполнения сайта. Он содержит подменю "Все записи", "Добавить новую", "Рубрики" и "Метки".

Прежде чем добавить новую запись (проект, товар), необходимо создать соответствующую котегорию, в которой будет содержаться данная запись. Данное действие выполняется в пункте подменю "Рубрики", где надо заполнить обязательные поля "Название" и "Ярлык" (ссылка на рубрику). В необязательных полях можно выбрать принадлежность рубрики к родительской и описание, которое будет отображаться ниже каталога товаров рубрики (см. рис. 44).

Рисунок 44 - Пункт подменю "Рубрики"

Добавление нового товара, проекта (записи) происходит через пунккт подменю "Добавить новую", где необходимо будет заполнить название и выбрать рубрику для публикации. Также, через произвольные поля записи, можно добавить фото галерею медиафайлов к товару, заглавную фотографию для записи (см. рис. 45); оформить всплывающее окно "Подробное описание", как с помощью обычного текста, так и с применением различных шорткодов, плагинов, таблиц, медиафайлов; внести стоимость товара в поле "Цена"; оформить краткое описание напротив товара в поле "Цитата" (см. рис. 46) и заполнить заголовок, описание и ключевые слова для поисковой индексации записи через специальную форму плагина All in One Seo Pack (см. рис. 47).

Добавление записи на сайт происходит путём нажатия кнопки "Опубликовать" в левом верхнем углу. После публикации можно проверить отображение записи через пункт "Просмотреть изменения".

Рисунок 45 - Добавление записи

Рисунок 46 - Описание записи

Рисунок 47 - Описание записи для поисковых систем

6.4 Пункт меню "Медиафайлы"

Вордпресс использует Flash-загрузчик медиафайлов, который позволяет загружать любые форматы файлов, как по одиночке, так и группой. Удобнее всего пополнять контент через редакторы страниц и записей. Так же загрузку можно организовать через специальные плагины, так как не редко могут возникать ошибки при использовании стандартного загрузчика. Рабочее поле пункта "Медиафайлы" содержит ярлыки с ссылкой на загруженный контент; сведения о привязке файла к той или иной странице, записи, рубрике; дату загрузки и автора. В редакторе медиафайлов можно увидеть полную информацию о файле, сделать для него подпись, задать атрибут и заполнить описание (см. рис. 48).



Рисунок 48 - Загрузка медиафайла

6.5 Пункт меню "Страницы"

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

Слева от рабочей области представлены необходимые сведения о странице: статус публикации, видимость, количество редакций и атрибуты её принадлежности.

Внизу рабочей области можно заполнить параметры для поисковой оптимизации страницы, а именно заголовок, описание и ключевые слова через специальную форму плагина All in One Seo Pack (см. рис. 49).

Рисунок 49 - Редактирование страницы

6.6 Пункт меню "Комментарии"

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

6.7 Пункт меню "Внешний вид"

Это основной центр настроек внешнего вида вашего сайта. Пункты подменю данного раздела позволяют администратору:

§ загружать и настраивать шаблон (тему) веб-сайта;

§ задавать название и описание сайта и его главную страницу;

§ выбирать заголовок для шапки и фон сайта;

§ создавать главное и боковое меню;

§ подключать виджеты к разделам веб-сайта.

Пункт подменю "Редактор" предназначен для разработчитов. Именно в нём редактировалась тема и создавались шаблоны отображения проетов.

6.8 Пункт меню "Плагины"

Это меню расширения функционала сайта. Плагины WordPress имеют огромную роль в настройках сайта на WordPress, в данной вкладке меню можно просмотреть установленные и активные плагины, найти новые, прочитать их описание, скачать. Также при помощи подменю "Редактор" можно изменять код плагинов, настраивая их под себя. Именно здесь был изменён стиль кнопок левого меню плагина jQuery Vertical Mega Menu. Стоит остерегаться и устанавливать только проверенные и нужные плагины, так как некоторые могут содержать вредоносные файлы.

6.9 Пункт меню "Пользователи"

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

6.10 Пункт меню "Инструменты"

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

6.11 Пункт меню "Настройки"

Довольно большое меню в WordPress, задачей которого является настройка всего сайта в целом. Некоторые из настроек повторяются в пункте меню "Внешний вид/Настроить". Настроить с этого меню можно очень многое: название и описание сайта; формат даты и времени; часовой пояс; язык консоли; постоянные ссылки URL для страниц сайта; e-mail администратора; настройки публикации статьи и страниц; количество записей на главной; комментарии; формат и размеры медиафайлов и некоторые установленные плагины, которые добавляют свои ярлыки в данный пункт меню.

6.12 Дополнительные пункты меню

При необходимости можно расширить функционал меню консоли путём редактирования кода "движка". Так же некоторые плагины для удоства доступа к их настройке добавляют свой ярлык в главное меню.

Глава 7. Оценка качества разработанного программного продукта

Оценка веб-сайта "Удачная постройка" производилась путём анализа оставленных посетителями и клиентами комментариев на главной странице. Для этого специально был установлен плагин WP Customer Reviews, который красиво отображает комментарии, скрывает для компактности форму отзыва и предоставляет возможность оценить по пятизвёздочной шкале услуги интернет-сервиса.

Рисунок 50 - Отзыв №1

На рисунке 50 посетитель по имени Валентина оценила применённый дизайн, тем самым подтвердив, что сайт действительно интересен и оригинален.

Рисунок 51 - Отзыв №2

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

Рисунок 52 - Отзыв №3

В комментарии на рисунке 52 посетитель указал, что использовал при общении с менеджером установленный онлайн-консультант JivoSite.

Рисуснок 53 - Отзыв №4

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

Тем самым можно сделать вывод, что вся проделанная работа используется, и получила своё одобрение.

Заключение

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

При разработке web-сайта были проведены такие работы как:

1. Анализ существующих программных решений и выбор инструментальных средств разработки.

Была выбрана уже знакомая в использовании система управления сайтом Wordpress, которая себя отлично зарекомендовала при создании динамических сайтов. Так же для размещения сайта был выбран хостинг "Fozzy" с использованием системы управления базами данных MySQL и языка для разработки программных модулей PHP.

2. Разработка архитектуры сайта.

На этом этапе был утверждён макет сайта с разделами: шапка (header), основное содержимое страницы (content), левое меню (left-sidebar) и подвал (footer). Определена структура страниц с их содержимым. Для дизайна использована тема сказки "По щучьему велению".

3. Разработка структур данных.

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

4. Разработка и реализация программных модулей.

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

5. Экспериментальное тестирование и отладка.

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

Разработанный сайт удовлетворяет всем поставленным требованиям, а именно:

1. привлекает посетителей интересным дизайном, что было подтверждено в отзывах;

2. удобно и компактно предоставляет информацию по комплектации и стоимости товаров и услуг - доступ к любой конечной информации занимает до 3 кликов;

3. имеет удобный динамичный онлайн-сервис для общения с клиентами JivoSite.

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

Список использованных источников

1. Прохоренок, Н.А. html, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера - 3-е изд., перераб. и доп. - СПб.: БХВ-Петербург, 2010. - 912 с.

2. Макфарланд, Д. Большая книга CSS3.3-е изд. - СПб.: Питер, 2014. - 608 с.

3. Кодекс WordPress [Электронный ресурс]: офиц. сайт. - Режим доступа: https: // codex. wordpress.org.

Размещено на Allbest.ru