Разработка web–сайта ООО 'Современные технологии строительства'

Содержание

Введение

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

1.1 Анализ существующих программных решений

1.2 Выбор инструментальных средств разработки веб-сайта

1.2.1 Хостинг

1.2.2 Язык PHP

1.2.3 СУБД MySQL

1.2.4 CMS Wordpress

1.2.5 Шаблон веб-сайта

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

2.1 Древо страниц

2.2 Веб-дизайн

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

3.1 Таблица wp_commentmeta

3.2 Таблица wp_comments

3.3 Таблица wp_links

3.4 Таблица wp_options

3.5 Таблица wp_postmeta

3.6 Таблица wp_posts

3.7 Таблица wp_terms

3.8 Таблица wp_term_relationships

3.9 Таблица wp_term_taxonomy

3.10 Таблица wp_usermeta

3.11 Таблица wp_users

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

4.1 Установка CMS WordPress

4.2 Выбор и установка шаблона веб-сайта

4.3 Редактирование структуры веб-страниц и подключение элементов дизайна

4.4 Разработка и оформление категорий проектов

4.5 Разработка отображения проектов категорий

4.6 Дополнительные шаблоны темы "MH Magazine"

4.7 Дополнительные программные модули

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Введение

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

Актуальность создания фирменного веб-сайта можно обосновать по следующим пунктам:

Это самый дешёвый из всех эффективных способов рекламы.

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

Это удобство взаимодействия с клиентами и предоставление неограниченного объёма информации по услугам и товарам.

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

Я занимаю должность менеджера по работе с клиентами в ООО "Современные технологии строительтсва". Компания более 9 лет официально занимается проектированием и малоэтажным строительством домов из дерева и камня, а так же установкой всех необходимых коммуникаций и инженерных сетей. Недавно началось производство перевозных модульных бань, бытовок, беседок, других мелких построек и мебели из дерева. И, в связи с открытием нового направления деятельности, мне было предложено разработать и внедрить веб-сайт под названием "Удачная постройка". Я дал согласие и, тем самым, была выбрана тема для моей выпускной квалификационной работы.

Этапами моей работы являются:

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

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

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

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

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

Задачи, которые должен выполнять веб-сайт:

Удобно предоставлять информации по товарам и услугам.

Иметь удобный сервис для общения с клиентами.

Способствовать увеличению прибыли предприятия.

сайт программный тестирование архитектура

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

1.1 Анализ существующих программных решений

Мной были проанализированы веб-сайты строительных фирм города Вологды из первой десятки по запросу в поисковой системе Google, за исключением основного сайта нашей компании, доменное имя которого #"896986.files/image001.gif">

Рисунок 3 - Макет главной страницы

Рисунок 3.1 - Размеры раздела Header

Рисунок 3.2 - Размеры раздела Saidbar

Рисунок 3.3 - Размеры иконок разделов

Рисунок 3.4 - Размеры раздела Footer

Рисунок 4 - Макет категорий 500 рх

Рисунок 4.1 - Макет записей категорий

Основные продажи в новом направлении нашей фирмы, ожидаются от перевозных мобильных бань. Следовательно, на баннере главной страницы, расположенном в блоке "Header", нужно акцентировать внимание на основном преимуществе именно таких бань - время от покупки до первой затопки составляет 1 день! Не нужно ждать постройки, ведь баня уже возведена и готова к перевозке. Вместе с тем следует указать возможность пробной затопки прямо на выставке. Графическую тему баннера будет уместно и оригинально оформить в сказачном стиле с деревянными постройками и текстурами. При совещании с руководством компании была выбрана тема сказки "По щучьему велению", откуда будут взяты изображения Емели, русской печи и говорящей щуки. Главной текстовой информацией баннера будет диалог между Емелей и щукой:

Хочу себе баню. Да побыстрее.

По щучьему велению, по твоем хотению, вот тебе баня за 1 день.

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

Помимо главного баннера, акцентированного на реализацию бань, в категорию "Бани" был разработан дополнительный баннер, где указаны все плюсы перевозных мобильных бань по сравнению со стандартными. В будущем такие баннеры будут разработаны и для остальных категорий построек.

Для фона кнопок левого меню была подобрана текстура строганного бревна. Фоном для футера также является древесная текстура, оформленная рамкой. Фоном для всех страниц сайта был выбран светло-жёлтый цвет адаптивной цветовой модели RGB (238, 253, 122, 0.67) с непрозрачностью 67%. В итоге получился приятный оттенок постельного цвета, который прекрасно сочетается с другими элементами дизайна и, совместно с тёмно-коричневым цветом шрифта, обеспечивает комфорт при чтении информации.

Основным шрифтом текста сайта был выбран Arial класса нео-гротеск семейства Helvetica. Это универсальный шрифт, который отлично подходит для чтения и веб-дизайна. Шрифтом для заголовков - Gabriola One. Этот оригинальный винтажный шрифт добавит ещё больше индивидуальности нашему сайту.

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

Структура данных - это программная единица, позволяющая хранить и обрабатывать множество однотипных и/или логически связанных данных в вычислительной технике. Для добавления, поиска, изменения и удаления данных структура данных предоставляет некоторый набор функций, составляющих её интерфейс. Интерфейсом системы управления базами данных MySQL, является PHPMyAdmin. Это веб-приложение с открытым кодом, написанное на языке PHP, позволяет через хостинг осуществлять администрирование сервера MySQL.

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

Только что созданная база данных использует 11 взаимосвязанных таблиц. Между ними установлены связи "один ко многим" через поле с уникальным идентификатором, которое имеет префикс "_id" (см. рис. 1).

Рисунок 1 - Связи таблиц базы данных WordPress

Следует отметить, что только одна таблица не связанна с другими - таблица "wp_options".

В ней хранятся данные о сайте и настройках WordPress, которые не имеют отношения к записям или пользователям.

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

3.1 Таблица wp_commentmeta

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

Рисунок 13 - Элементы таблицы wp_commentmeta

3.2 Таблица wp_comments

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

Рисунок 14 - Элементы таблицы wp_comments

3.3 Таблица wp_links

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

3.4 Таблица wp_options

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

3.5 Таблица wp_postmeta

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

3.6 Таблица wp_posts

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

3.7 Таблица wp_terms

Таблица содержит категории, теги и ссылки (см. рис. 2).

Рисунок 2 - Элементы таблицы wp_terms

 

.8 Таблица wp_term_relationships

Здесь описывается ассоциативная связь записей с категориями и тегами. Таблица содержит строки с id записями и соответствующими им id рубриками и тегами (см. рис. 3).

Рисунок 3 - Элементы таблицы wp_term_relationships

3.9 Таблица wp_term_taxonomy

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

Рисунок 4 - Элементы таблицы wp_term_taxonomy

3.10 Таблица wp_usermeta

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

Рисунок 5 - Элементы таблицы wp_usermeta

3.11 Таблица wp_users

Эта последняя из основных таблиц. Она содержит список зарегистрированных пользователей, их логин и пароль в зашифрованном виде, e-mail адрес, дату регистрации и другое (см. рис. 6).

Рисунок 6 - Элементы таблицы wp_users

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

4.1 Установка CMS WordPress

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

Этап 1. Регистрация домена.

Доменное имя - это символьное сочетание, служащее для идентификации веб-сайта в сети интернет.

Домен нужно зарегистрировать в первую очередь, так как при установке CMS запросит его для установки программного обеспечения. Регистрация домена произведена в личном кабинете "Fozzy"; там же был зарегистрирован домен для основного сайта компании "st-stroy35.ru". Для удобства было решено выбрать доменное имя первого уровня, соответствующее номеру телефона, а именно 506-516, в доменной зоне".ru".

Этап 2. Создание базы данных на хостинге.

В панели управления хостинга была создана база данных под именем: ststroyr_506-516. В процессе установки CMS создаёт в ней таблицы, где, в последующем, будет хранить текст, медиафайлы и другой контент веб-сайта.

Этап 3. Процесс установки.

На хостинге "Fozzy" имеется раздел установки сторонних скриптов "Softaculous Auto Installer". Это очень удобный сервис, который позволяет официально установить последнюю версию CMS WordPress без лишних действий через заполнение формы простой формы (см. рис. 7).

Рисунок 7 - Установка CMS WordPress (этап 1)

Форма установки запрашивает выбор протокола. Будующий сайт не будет содержать SSL, поэтому выбираем протокол #"896986.files/image017.jpg">

Рисунок 8 - Создание шаблона header-bani. Php

Рисунок 9 - Редактирование шаблона header. Php

Рисунок 10 - Редактирование шаблона index. Php

2. Редактирование раздела "Footer".

За вывод "подвала" отвечает файл-шаблон footer. php. Введём традиционные функцию вывода копирайта и нынешнего года, а также название сайта и его краткое описание (см. рис. 11).

Рисунок 11 - Редактирование шаблона footer. Php

Далее зададим созданный фон для класса. fll-copyright и стили вывода информации "подвала" (см. рис. 12).

Рисунок 12 - Стили шаблона footer. Php

. Редактирование раздела "Content".

За вывод содержимого контента веб-страниц в шаблоне отвечает файл content-page. php, который, в свою очередь, так же загружает основной шаблон отображения страниц веб-сайта page. php (см. рис. 13).

Рисунок 13 - Шаблон отображения контента

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

Рисунок 14 - Редактирование стиля раздела "Content"

. Редактирование раздела "Saidbar".

Отображением данного раздела занимается файл шаблона sidebar. php (см. рис. 15).

Рисунок 15 - Шаблон отображения раздела "Saidbar"

По макету на ширину сайдбара приходится 18%. Следует отметить, что размер раздела "сontent" составляет 78%, что в сумме даёт 96%, где оставшиеся 4% ширины экрана занимают отступы от краёв. Зададим необходимые значения стиля (см. рис. 16).

Рисунок 16 - Редактирование стиля раздела "Saidbar"

В данном разделе предполагается расположение меню. Для его оформления будем использовать плагин-виджет (независимо компилируемый программный модуль, динамически подключаемый к CMS и предназначенный для расширения и/или использования её возможностей) "jQuery Vertical Mega Menu". Это бесплатный плагин, предназначенный для создания вертикального выпадающего меню в сайдбаре. За основу пунктов меню можно выбирать рубрики, страницы, записи и ссылки. В разделе "Внешний вид/Меню" создаём новое меню и выбираем заранее созданные рубрики и страницы (см. рис. 17).

Рисунок 17 - Создание меню

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

Рисунок 18 - Добавление и настройка виджета "jQuery Vertical Mega Menu"

Для подключения своего фона и стиля меню, воспользуемся вкладкой Плагины/Редактор, выберем плагин и отредактируем стили отображения меню и подменю действующей темы "Green" (см. рис. 19).

Рисунок 19 - Редактирование стилей меню и подменю

5. Редактирование фона страниц веб-сайта.

По умолчанию в теме "MH Magazine" задан белый цвет фона страниц. За стили разделов меню "Content" и "Saidbar" отвечает класс "mh-rapper", внесём в него изменения через таблицу стилей (см. рис. 20).

Рисунок 20 - Редактирование фона

. Установка иконки веб-сайта.

Иконка (Favicon) является дополнительным элементом дизайна, который отражает индивидуальность и суть веб-сайта. В качестве иконки было выбрано и уменьшено до размера 16х16 пикселей изображение бани с главного баннера. Устанавливается фавикон через вкладку "Внешний вид/Настроить/Свойства сайта" на панели управления (см. рис. 21).

Рисунок 21 - Установка иконки веб-сайта

4.4 Разработка и оформление категорий проектов

1. Оформление категорий на главной странице.

Первое, что должен увидеть посетитель нашего веб-сайта - это иконки категорий построек, которые будут выполнять роль ссылок к проектам данных каталогов. Для этого в пункте меню панели управления "Внешний вид/Настроить/Статистическая главная страница" выбираем в качестве главной страницы, заранее созданную страницу "Главная". Следущим шагом будет загрузка иконок и прикрепление их к главной странице. В редакторе страниц создадим ссылки на категории и новые классы для оформления отображения иконок и добавим их стили в файл style. css (см. рис. 22-23).

Рисунок 22 - Редактирование главной страницы

Рисунок 23 - Стили отображения иконок категорий

2. Разработка отображения категорий.

За отображение категорий в теме "MH Magazine" отвечает шаблон index. php. В него мы уже вносили изменения, когда подключали вывод разных шапок категорий. Остальные параметры шаблона отвечают критериям отображения проектов в категориях. Осталось внести полезное дополнение - навигационную цепочку ("хлебные крошки") (см. рис. 24-25). Это элемент навигации, представляющий путь к странице от корня сайта - главной страницы. Таким образом, посетители будут видеть, на какой странице они находятся и смогут вернуться по ссылке на уровень выше. К тому же, большим плюсом является то, что внутренние ссылки повышаютиндексацию веб-сайта в поисковых системах.

Рисунок 24 - Шаблон отображения категорий

Рисунок 25 - Стили отображения навигационной цепочки

4.5 Разработка отображения проектов категорий

Для того чтобы избежать лишних переходов для просмотра отдельных записей проектов воспользуемся плагином Easy FancyBox. Принцип работы плагина - всплывающие окна, в которые можно заключить как медиафайлы, так и текстовую информацию и другие плагины. Тем самым, мы сможем решить три задачи: красиво оформить просмотр галереи медиафайлов, поместить во всплывающие окна подробную информацию о проектах и форму заказа. Для формы заказа будем использовать плагин обратной связи Contact Form 7. Создадим форму заказа (см. рис. 26).

Также, чтобы удобно и компактно разместить всю информацию в окнах потребуются ещё два хороших плагина - Easy Responsive Tabs и TablePress. Плагин Easy Responsive Tabs применяется для создания вкладок для отдельных частей контента. Создадим вкладки с комплектацией проекта и дополнительными услугами (см. рис.48). TablePress - это плагин, который позволяет создавать таблицы и управлять ими как администратору, так и пользователям. В таблицы будут помещены названия элементов построек и их подробное описание, а также наименования дополнительных услуг и их стоимость. Ещё один плагин, который потребуется уже, непосредственно, при создании записей проектов - это Advanced Custom Fields. Этот плагин позволяет добавлять в редакторе записей произвольные поля с различными типами данных, которые можно подключить к шаблону отображения проектов. Создадим поля "Подробное описание" (podrobnee) и "Цена" (price) (см. рис.27). За отображение записи в категории отвечает файл-шаблон content-loop. php. Внесём в него соответствующие изменения (см. рис.50-51). Следует отметить, что подробное описание проекта распространяется не на все категории построек и товаров. Поэтому, при помощи функции <? php if (in_category (array ())):? > зададим соответствующие условия.

Рисунок 26 - Создание формы заказа

Рисунок 27 - Создание вкладок

Рисунок 28 - Создание произвольных полей

Рисунок 29 - Шаблон отображения записей

Рисунок 30 - Стили отображения записей

4.6 Дополнительные шаблоны темы "MH Magazine"

В теме "MH Magazine" осталось ещё несколько необходимых файлов-шаблонов, которые не нужно редактировать. Рассмотрим их.

. Шаблон content-none. php.

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

. Шаблон comments. php.

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

. Файл functions. php.

Является файлом дополнительного функционала. Работает подобно плагину и автоматически загружается во время инициализации WordPress. Его назначение:

§   определение функций, используемых в файлах шаблонов темы;

§   настройка и выбор различных параметров темы.

4. Файл mh-widgets. php.

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

4.7 Дополнительные программные модули

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

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

. Плагин Google XML Sitemaps.

Плагин, предоставленный компанией Google, создаёт XML-карту для ускорения и правильной индексации страниц веб-сайта. По сути Google Sitemap представляет собой файл, который содержит URL-адреса и дополнительную информацию для всех страниц или документов сайта. Google и другие поисковые системы могут читать этот файл и добавлять определенные страницы в свой индекс. Плагин прост в настройках, управляется через вкладку "Настройки/ XML-Sitemaps".

2. Плагин All in One SEO Pack.

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

. Счётчик "Яндекс Метрика".

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

§  Сколько посетителей заходит на сайт (просмотр статистики за любой период).

§  Откуда приходят посетители на сайт (из поисковиков, с рекламы, по ссылкам на других сайтах, из социальных сетей, прямые заходы).

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

Ко всему этому счётчик предоставляется бесплатно. Для работы нужно зарегистрироваться на сервисе по адресу https: // yandex.ru/support/metrika/, настроить счётчик и добавить код в шаблоны отображения категорий (index. php) и отдельных страниц (page. php) (см. рис.31).

Рисунок 31 - Код счётчика "Яндекс Метрика"

4. Плагин Rus filename and link translit.

Предназначение этого плагина - создавать ЧПУ (от жаргонного "человеко-понятные url"), то есть веб-адрес, URL-путь которого состоит из читаемых слов. Проще говоря, при создании записи, страницы или категории, плагин заменяет русские буквы заголовка на аналогичные им латинские и помещает их в ссылку данного контента. Так же обрабатываются кавычки, тире и другие знаки в соответствие с нормами русского языка. В итоге, посетителям сайта становится легче ориентироваться в страницах, а поисковых систем это лишние ключевые слова.

. Плагин Protected wp-login.

Плагин выполняет роль элемента защиты CMS от взлома путём подбора пароля. Все, что он делает - добавляет секретный защитный ключ для страницы логина. Ключ этот передается как обычный GET параметр для формы логина. Ссылка на вход в систему выглядит по типу: "#"896986.files/image045.jpg">

Рисунок 32 - Интерактивная карта Яндекс API Карт

. Онлайн консультант "JivoSite".

Это красивый и удобный чат для общения с клиентами на платной основе. Его преимущества:

§  автоприглашения в чат;

§  звонки с сайта;

§  передача файлов;

§  наблюдение за печатью;

§  наблюдение за посетителями.

Общение происходит через дополнительное программное обеспечение на компьютере. Подключается к сайту добавлением кода в шаблон header. php (см. рис. 33).

Рисунок 33 - Программный код чата "JivoSite"

. Виджет группы ВКонтакте.

Одновременно с сайтом была создана одноимённая группа, которая предполагает привлечение большой аудитории потенциальных клиентов из социальных сетей. Настройка виджета происходит из аккаунта ВКонтакте в пункте меню "Разработчикам". Подключается путём добавления кода в раздел "Боковая панель" вкладки системы управления "Внешний вид/Виджеты" (см. рис. 34).

Рисунок 34 - Подключение виджета группы ВКонтакте

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 Проверка сайта на кроссбраузерность

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

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

С помощью интернет-сервиса #"896986.files/image053.jpg">

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

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

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

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

Так как у нас установлен плагин защищённого входа "Protected wp-login", то для входа потребуется ввод не только логина администратора и пароля, но и секретный ключ в ссылке на панель управления: "#"896986.files/image056.jpg">

Рисунок 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-сайта были проведены такие работы как:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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