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

Разработка 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).