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

Содержание

• Введение
• Глава 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, за исключением основного сайта нашей компании, доменное имя которого http://st-stroy35.ru.

Первым мне попался сайт строительной компании "СоюзСтрой" с доменным именем http://dom-35.ru, которая занимается деревянным домостроением.

Дизайн: цветовая схема сайта состоит из приятных постельных оттенков бежевого и зелёного цветов; фон сайта выполнен из текстуры льняной ткани; основной цвет текста сайта - тёмно-бирюзовый.

Структура:

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

§ левый сайтбар с разделами меню: проекты, строительство, фото, контакты, поиск;

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

§ футер с контактными данными.

Вывод:

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

ь из минусов могу выделить два одинаковых меню (главное и левое) на главной странице; отсутствие онлайн сервиса для общения с клиентами и функции обратного звонка.

Следующий веб-сайт принадлежит строительной компании "ШекснаДревСтрой" с доменным именем http://drevstroi.ru/. Компания имеет два филиала в Череповце и Вологде, занимается строительством домов из дерева и деревянных построек.

Дизайн: цветовая схема данного веб-сайта состоит из композиции деревянных текстур и элементов; фон белый; основной цвет текста сайта - тёмно-коричневый.

Структура:

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

§ левый сайтбар с разделами: новые проекты, статьи, подключённой группой из соцсетей;

§ правый сайтбар с разделами: поиск проектов и новости;

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

§ футер с контактными данными и рубриками проектов.

Вывод:

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

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

Очередной веб-сайт с доменным именем http://rusvilla.com/ принадлежит ООО "ВолЛесДом", которое относится к группе строительных компаний НТД с головным офисов в городе Владимир. Компания имеет своё производство пиломатериалов, обширное представительство в других регионах страны, занимается строительством домов из дерева и деревянных построек.

Дизайн: цветовая схема интернет-ресурса состоит преимущественно из серого и светло-салатового цветов на белом фоне; основной цвет текста сайта - тёмно-серый.

Структура:

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

§ правый сайтбар с формой обратной связи и подключённой группой из соцсетей;

§ контент, занимающий 2/3 ширины окна браузера, наполненный статьями, фотографиями, записями проектов;

§ футер с названием компании.

Вывод:

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

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

Четвёртый, по очередности запроса, веб-сайт с доменным именем http://www.ks-vologda.ru/ принадлежит строительной компании "КомфортСтрой". Данный подрядчик также имеет своё производство пиломатериалов, представительство в соседних регионах страны, занимается строительством домов из дерева и деревянных построек.

Дизайн: цветовая схема веб-сайта состоит из тёмно-серого и светло-оранжевого цветов на белом фоне; основной цвет текста сайта - серый.

Структура:

§ фиксированная шапка с рекламой, контактной информацией и главным меню;

§ правый сайтбар с разным отображением содержимого в зависимости от страницы ресурса, в котором присутствует форма обратной связи, подключённая группа из соцсетей, функция выбора проектов по параметрам;

§ контент, занимающий 70% ширины окна браузера, наполненный статьями, фотографиями, видеозаписями, записями проектов;

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

Вывод:

ь к плюсам данного веб-сайта могу отнести только удачное сочетание цветовой схемы и сервис онлайн-консультанта;

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

Заключительный веб-сайт, который я изучил, принадлежит компании "СрубСтрой", его доменное имя http://rusvilla.com/. Компания с 1996 года занимается строительством деревянных домов и состоит в "Ассоциации деревянного домостроения Вологодской области".

Дизайн: цветовая схема интернет-ресурса состоит преимущественно из серого и светло-салатового цветов на белом фоне; основной цвет текста сайта - тёмно-серый.

Структура:

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

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

Вывод:

ь из плюсов могу выделить только высокое положение столь скромного интернет-ресурса в поисковых запросах;

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

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

ь оригинальный дизайн для привлечения внимания посетителей;

ь удачную цветовую схему для комфортного чтения и минимальной нагрузки на глаза;

ь полезные статьи о строительстве и выборе материалов для повышения поисковой оптимизации в интернете;

ь полную информацию о комплектации и стоимости проектов построек, а так же разнообразие самих проектов и видов построек;

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

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

1.2.1 Хостинг

Неотъемлемой составляющей качества предоставления услуг через интернет является выбор хостинга для размещения и обслуживания файлов веб-сайта. Выбрать надёжный хостинг - это всё равно что, заложить надёжный фундамент для дома. Я уже этот выбор сделал и использую услуги хостинг-провайдера "Fozzy". На его серверах размещён первый сайт нашей компании http://st-stroy35.ru и за два года сотрудничества не возникало никаких проблем. Провайдер юридически зарегистрирован в США, но предоставляет полноценные услуги хостинга для русскоговорящих клиентов. На Российском рынке компания начала свою работу в 2011 году. Свой хостинг провайдер позиционирует как очень быстрый и, в чём я уже убедился, это не голословное заявление. Средняя скорость загрузки сайта - 0,93 секунды. Помимо быстроты, к плюсам я ещё могу отнести круглосуточную техническую поддержку и низкую стоимость предоставления больших объёмов дискового пространства, что делает данный хостинг одним из лучших в соотношении "цена-качество".

1.2.2 Язык PHP

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

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

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

1.2.3 СУБД MySQL

MySQL - одна из самых популярных и самых распространенных систем управления базами данных в интернете. Ее применение идеально подходит для сайтов, как небольших, так и достаточно крупных.

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

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

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

1.2.4 CMS Wordpress

WordPress - система управления содержимым сайта с открытым исходным кодом, написанная на языке PHP. Это самый распространённый на сегодняшний день "движок" сайта. По последним данным лаборатории W3Techs на 2015 год, 25% всех сайтов работают под управлением WordPress. Система имеет довольно ограниченный встроенный функционал, но наличие огромного количества пакетов расширений позволяет создавать на этой CMS не только персональные блоги, но и достаточно серьёзные Интернет-проекты. Многочисленные "темы" этой CMS позволяют создавать сайты с дизайном на любой вкус, а со временем, без лишних усилий, обновлять их внешний вид.

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

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

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

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

Преимущества Wordpress:

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

2. Простая установка и пользование системой. Чтобы её установить, понадобится не более 5-ти минут, и совсем необязательно быть отличным программистом, разбираться в кодах HTML или PHP и других технических тонкостях. Разработчики сделали систему простой и дружелюбной в пользовани.

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

4. Встроенный визуальный и текстовый (HTML) редактор. Редактор имеет интуитивно понятный интерфейс, поэтому пользоваться им очень просто уже с первого знакомства. Здесь можно делать с текстом и картинками всё что угодно - форматировать, вставлять ссылки, видео, изображения и звуковые файлы.

Помимо всех преимуществ, популярности и опыта работы, я остановился на выборе системы управления содержимым сайта Wordpress, так как основной веб-сайт нашей компании уже функционирует на этом "движке".

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

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

В Wordpress шаблоны веб-сайтов именуются темами, их можно выбирать и загружать прямо из панели управления. Для выполнения поставленной задачи, мне потребуется шаблон с разделами сайта: шапка (header), основное содержимое станицы (content), левое меню (left-sidebar) и подвал (footer) (см. рис. 1).

Рисунок 1 - Структура разделов веб-сайта

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

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

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

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

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

Левый сайдбар будет включать в себя меню из разделов "Главная страница", "Контакты", "Фото построек", "Видео наших работ", "Мебель" с подразделами "Мебель из осины" и "Мебель на металлокаркасе". Ниже меню будет расположен виджет группы нашей компании в соцсетях.

Раздел меню "Контакты" предполагает содержание адреса производства и выставки нашей новой продукции, номера телефонов, адрес электронной почты и интерактивную карту проезда, предоставленную поисковиком "Яндекс".

Разделы "Фото построек" и "Видео наших работ" будут содержать галерею изображений и плейлист готовых работ нашей компании.

В разделе "Мебель" будет размещена комплектующая продукция изделий из дерева для дома, бани и дачи.

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

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

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

Рисунок 2 - Древо страниц сайта

2.2 Веб-дизайн

Следуя определённым принципам маркетинга, личным задумкам и правилам вёрстки, можно составить макеты главной страницы сайта и страницы проектов категорий. При создании макетов нужно в первую очередь основываться на расположение разделов сайта соответственно выбранному шаблону. Далее следует просчитать размеры отображения разделов по высоте и ширине для максимального удобства восприятия клиентами содержимого страниц. Также будут учтены такие нюансы, как расположение логотипа компании и содержимое разделов для более подробного представления будущего веб-сайта (см. рис.3, 3.1-3.4, 4, 4.1).

Рисунок 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

3.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, поэтому выбираем протокол http://без аббревиатуры www.В пункте выбора домена, был выбран новый зарегистрированный домен 506-516.ru. Поле выбора дерриктории установки было оставлено пустым для того, чтобы CMS установилась в корневую дирректорию нашего сайта.

Далее в имени сайта вводим уже придуманное и отражённое в логотипе - "Удачная постройка". В кратком описании, в нескольких словах, объясняем, о чём будет наш веб-сайт - "Продажа готовых перевозных бань, бытовок, беседок, туалетов, садовых домов и других построек из дерева". После, придумываем имя пользователя и пароль для входа в CMS, а также вводим адрес электронной почты, по которому система управления контентом будет отправлять уведомления администратору. Затем выбираем язык, который будет отображаться в CMS.

Заключительным этапом установки будет ввод имени, ранее созданной базы данных "ststroyr_506-516", и стандартного префикса "wp_" для таблиц CMS.

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

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

Как уже было описано выше при выборе инструментальных стредств разработки, мне потребуется шаблон с разделами веб-сайта: шапка (header), основное содержимое станицы (content), левое меню (left-sidebar) и подвал (footer). Для поиска и установки шаблона был произведён вход в административную панель системы управления контентом. Во вкладке "Внешний вид/Темы/Добавить новую" я воспользовался фильтром характеристик для выбора темы. Так как дизайн шаблона придётся полностью изменять, то мне не пришлось долго выбирать, и я остановился на теме "MH Magazine" бесплатной версии "lite" компании "MH Themes".

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

Для этого будем продолжать работу в разделе панели управления "Внешний вид".

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

Для подключения основного баннера переходим в подменю "Настроить" и в пункте "Изображение заголовка" выбираем добавить изображение, где через стандартный загрузчик закачиваем нужное изображение. За вывод баннера в разделе "Header" отвечает файл шаблона этого раздела header. php, который, в свою очередь, загружает основной шаблон отображения категорий веб-сайта index. php. По умолчанию это происходит при помощи кода: <? php get_header ()? > Но у нас имеется специальный баннер для категории "Бани" и поэтому общий шаблон header. php не подойдёт, так как он предусматривает отображение одного и того же изображения в разделе "Header" на все страницы сайта. К тому же, в будующем, каждой категории будет соответствовать свой баннер. Для решения этого вопроса создаём альтернативный, для категории "Бани", шаблон отображения "Header" - header-bani. php, в котором содержится ссылка на соответствующее изображение (см. рис.29). В файле header. php ставим ссылку на основное изображение "Header" (см. рис.30). В итоге в шаблоне категорий index. php задаём условие подключения шаблонов "шапки" (см. рис. 8).

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

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

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

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

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

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

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

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

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

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

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

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

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

4. Редактирование раздела "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 - Редактирование фона

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

Иконка (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" осталось ещё несколько необходимых файлов-шаблонов, которые не нужно редактировать. Рассмотрим их.

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

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

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

2. Шаблон comments. php.

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

3. Файл functions. php.

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

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

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

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

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

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

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

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

1. Плагин Google XML Sitemaps.

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

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

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

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

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

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

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

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

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

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

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

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

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

Плагин выполняет роль элемента защиты CMS от взлома путём подбора пароля. Все, что он делает - добавляет секретный защитный ключ для страницы логина. Ключ этот передается как обычный GET параметр для формы логина. Ссылка на вход в систему выглядит по типу: "http://example.com/wp-login. php? sk=my_secure_key" Если злоумышленник и подберет пароль, но секретный ключ не определен, то в систему управления сайтом попасть не получится.

6. Плагин WP-CopyProtect.

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

7. Компонент API Карт.

Данный компонент так же предоставляется компанией Яндекс на бесплатной основе. Содержит в себе набор настроек для размещения интерактивных Яндекс. Карт на страницах сайта или в веб-приложении. Что является интересным решением в оформлении страницы "Контакты". Для добавления компонента, проходим по ссылке "https: // tech. yandex.ru/maps/", выбираем пункт JavaScript API и выполняем необходимые настройки:

§ задаём ширину и высоту контейнера карты;

§ задаём координаты;

§ добавляем метку расположения нашего производства;

§ копируем полученный код в редактор страницы "Контакты" (см. рис. 32).

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

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

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

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

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

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

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

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

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

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

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

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

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