Сайт спортивного клуба бодибилдинга с интернет-магазином

Почти аналогичным образом организована реализация этой функции на сайте спортивного комплекса «Родник», только ею чаще пользуются посетители сайта.

На всех охарактеризованных сайтах есть описания предоставляемых услуг по категориям и ценам. На сайте Федерации Бодибилдинга и Фитнеса представлено только описание услуг, так как деятельность организации носит некоммерческий характер. Более подробно услуги и цены указаны на сайте спортивного комплекса «Родник», что повышает интерес и определенность выбора потенциальных посетителей комплекса.

Следует отметить, что ни одном из проанализированных сайтов не представлены возможности интернет - магазина, с помощью которого посетители спортивного клуба могли бы заказать и приобрести спортивные товары, одежду или питание. Исходя из результатов сравнительного анализа, в качестве прототипа сайта спортивного клуба бодибилдинга «Olympia Gym» представляется возможным использовать сайт фитнес - клуба «Посольство красоты и здоровья». Сайт данной компании выбран в качестве прототипа, потому что основные функции сайта реализованы здесь наиболее полно и эффектно. Это такие функции, как подробное описание деятельности организации, форма обратной связи, представленные материалы, оформление самого сайта. Недостатком сайта является отсутствие фотографий сотрудников фитнес - клуба и функции интернет - магазина, которые необходимы для многофункционального спортивного клуба. Они дают возможность потенциальному клиенту составить более полное представление об организации и возможность приобрести необходимые товары и услуги в комплексе.

При разработке корпоративного сайта спортивного клуба бодибилдинга «Olympia Gym» необходимо решить следующие задачи:

1) облегчение получения пользователями актуальной информации о компании и формирование представления о ней;

2) дать пользователю своевременную и полную информацию;

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

2.3 Разработка веб-сайта

2.3.1 Построение базы данных сайта

Для разработки web-сайта на локальном компьютере необходимо установить пакет программ Denwer, в который входят такие программы как web-сервер Apache, СУБД MySQL, phpMyAdmin (web-интерфейс для работы с СУБД MySQL), интерпретатор PHP. После установки пакета программ Denwer и запуска web-сервера, необходимо в адресной строке интернет - браузера ввести следующий адрес: «http://localhost/». На экран будет выведена информация о web-сервере и список необходимых для работы ссылок. Данный список представлен на рисунке 3.

Рисунок 3 - Список ссылок, необходимых для работы с web-сервером



Для начала проектирования базы данных необходимо запустить web-интерфейс phpMyAdmin, для этого нужно перейти по ссылке «http://localhost/phpmyadmin» .

Загрузится web - интерфейс для работы с СУБД MySQL. Сначала необходимо создать базу данных. После создания базы данных необходимо создать таблицу. Для создания таблицы необходимо в поле «имя» указать имя таблицы, в поле «поля» указать количество полей таблицы и нажать кнопку «пошел». Далее нужно указать имя каждого поля и тип, так же необходимо указать первичный ключ. После этого необходимо заполнить таблицу данными.

Для хранения практически всей информации о сайте Joomla использует базу данных MySQL. Она позволяет хранить значительные объемы данных, при этом предоставляет нам удобный интерфейс для взаимодействия с ней. Для сайта спортивного клуба необходимо создать базу данных «basegym», в которой создаются и хранятся таблицы для четкого разделения хранящейся на сайте информации. Вновь установленный компонент обычно создает хотя бы одну таблицу для хранения своей информации.

2.3.2 Построение основной части сайта

Для решения задачи построения основной части сайта, основную задачу можно разделить на следующие подзадачи:

Разработка макета дизайна сайта.

Организация навигации сайта.

Установка системы управления контентом сайта и определение ее дополнений под задачи сайта.

Разработка шаблонной страницы сайта и создание основных модулей сайта.

Теперь решаем каждую из подзадач последовательно.

Разработка макета дизайна сайта.

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

СЛАЙД - ШОУ
ВЕРХНЕЕ МЕНЮ
ГЛАВНОЕ МЕНЮ	ОСНОВНАЯ ИНФОРМАЦИЯ	РЕГИСТРАЦИЯ
НИЖНЯЯ ЧАСТЬ

Рисунок 4 - Эскиз расположения основных блоков сайта

Рабочее пространство сайта делится на 5 основных блоков.

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

Верхняя панель навигации (верхнее меню) включает:

прайс - лист услуг спортивного клуба;

расписание занятий;

новостной блок;

контакты (интерактивная карта схемы проезда, режим работы и номер телефона для связи);

фото и видео;

интернет - магазин.

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

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

В нижней части сайта размещаются кнопки социальных сетей, счетчики посещаемости и рейтинга сайта.

Для сайта выбрана контрастная цветовая палитра из близких цветов белого, серого и черного цвета. Фон сайта представляет собой фотографию, выполненную в стиле тематики спортивного клуба. Стиль шаблона сайта сделан прозрачным, в результате чего просматривается логотип клуба «Olympia Gym».

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

Макет сайта, цвета и шрифты, настройки меню и блоков в соответствии требуемому стилю и цвету редактируем с помощью прикладной программы Artisteer 4 - редактор шаблонов для системы управления сайтом Joomla. Редактор шаблонов представлен на рисунке 5.

Рисунок 5 - Редактор шаблонов Artisteer 4 для Joomla

Для настройки использованы следующие параметры: выравнивание пунктов по левому краю, Arial Unicode M', размер шрифта 13 pt, цвет текста серый #E9E9E9 в нормальном виде, #000000 - при наведении мыши и при клике на пункт меню, цвет фона #8A8EFE. Далее в Joomla создаются пункты меню.

Установка системы управления контентом сайта и дополнение ее под задачи сайта. Прежде чем начать установку Joomla 2.5 на локальный сервер Denwer, нужно создать папку для сайта спортивного клуба.

Так создается папка в каталоге локального сервера: C:\WebServers\home.

Затем в папке \home нужно создается папка сайта «olimpia.ru». Далее в папке «olimpia.ru» нужно создать папку «www», в которой папке будут находиться файлы сайта. Тем самым, адрес, который будем набирать в браузере для доступа к сайту, будет: www.olimpia.ru.

В полученную папку - C:\WebServers\home\olimpia.ru\www - нужно распаковать архив с Joomla 2.5. Для этого скачиваем Joomla 2.5 и распаковываем скачанный архив в папку.

При установке локального сервера Denwer создался виртуальный диск (Z), через который также можно заходить в папку сайта. Более короткий путь в ту же самую папку будет:

Z:\WebServers\home\olimpia.ru\www

Далее запускается Denwer (если он не запущен) и в браузере набирается:

http://localhost/joomla

При нажатии кнопки «Enter» в окне браузера откроется страница установки Joomla 2.5, представленная на рисунке 6.

Рисунок 6 - Страница установки Joomla 2.5

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

На втором шаге установки Joomla проходит проверка на совместимость с установленным локальным сервером Denwer.

На третьем шаге установки необходимо согласиться с лицензией GNU/GPL.

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

тип базы данных: «MySQL»;

имя сервера базы данных: «localhost»;

имя пользователя: «basegym»;

пароль: задаётся пользователем;

имя базы данных: «basegym»;

префикс таблиц: оставляем это поле как есть.

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

Седьмой шаг завершает установку Joomla но, установка не будет завершена, пока не удалим директорию INSTALLATION. Для входа в администраторскую зону (панель управления) по умолчанию логин admin.

Для входа в панель управления необходимо набрать в браузере:

www.olimpia.ru/administrator

Для входа на сайт - www.olimpia.ru

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

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

Создается файл templateDetails.xml, в котором будут храниться блоки (основные модули), информация об авторе, прописываются все изображения, используемые для сайта, файлы, входящие в состав шаблона.

Параметры модулей задаются во вкладке Менеджер модулей Администраторской панели, здесь можно создать модуль со свободным HTML-кодом или выбрать готовые (все модули для данного сайта прописываются HTML-кодом). Указывается позиция в соответствии с файлом templateDetails.xml, состояние публикации (включен/выключен), права доступа (в сайте спортивного клуба все модули общедоступны), выбираются страницы, на которых должен отображаться модуль, каждый модуль имеет свой идентификатор. Создается файл index.php, в котором и происходит разметка страницы сайта и разделение на блоки.

Для того чтобы задать стиль блоков сайта, создается каскадная таблица стилей (CSS), назовем ее template.css. Здесь можно задать стиль текста, фона (в данном сайте используется фоновое изображение страниц), ссылок, кнопок, и модулей сайта.

Рисунок 7 - Расположение блоков и соответствующих модулей сайта

Для сайта спортивного клуба «Olympia Gym» созданы следующие модули:

хедер, включающий в себя слайд - шоу;

главное меню сайта;

модуль вывода материала;

модуль последних новостей;

модуль регистрации пользователя для закупок в интернет - магазине;

модуль акций и предложений;

модуль online - присутствия на сайте;

модуль социальных кнопок;

строка авторских прав.

Фрагмент сайта спортивного клуба «Olympia Gym»представлен на рисунке 8.

Рисунок 8 - Фрагмент главной страницы сайта спортивного клуба

Фрагмент нижней части главной страницы сайта спортивного клуба представлен на рисунке 9.

Рисунок 9 - Фрагмент нижней части главной страницы сайта

2.3.3 Разработка интернет-магазина на сайте

При проектировании модели интернет - магазина применяется метод семантического моделирования. В качестве инструмента семантического моделирования используется диаграмма «сущность-связь» (Entity-Relationship Diagrams, ER - диаграмма).

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

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

Экземпляр сущности - это конкретный представитель данной сущности.

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

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

При проектировании модели предметной области интернет - магазина спортивного клуба выделены сущности Товар, Заказанные товары, Заказы, Клиенты.

Сущность Товар предназначена для отображения товарного ассортимента электронного магазина и включает в себя следующие атрибуты:

код товара;

наименование товара;

описание товара;

цена.

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

Сущность Товар-Заказ предназначена для отображения количества и стоимости заказанного товара и содержит следующие атрибуты:

код заказа;

код товара;

количество;

стоимость.

Ключевыми атрибутами в сущности Товар-Заказ являются Код заказа и Код товара.

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

код заказа;

код клиента;

дата заказа;

стоимость заказа;

статус заказа.

Ключевой атрибут данной сущности - Код заказа.

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

код клиента;

фамилия;

имя;

отчество;

город;

адрес;

телефон;

е-mail.

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

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

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

Графически связь изображается линией, соединяющей две сущности. Их графическая интерпретация представлена на рисунке 10.

Рисунок 10 - Типы связей, связующих сущности

Связь типа «один - к - одному» означает, что один экземпляр первой сущности связан с одним экземпляром второй сущности. Эта связь самая простая, но встречается она нечасто. Сущности, имеющие тип связи «один - к - одному», всегда можно скомпоновать в одну.

Связь типа «один - ко - многим» означает, что один экземпляр первой сущности связан с несколькими экземплярами второй сущности. Это наиболее часто используемый тип связи.

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

Поскольку один товар в одном заказе может быть заказан несколько раз, между сущностями Товар и Товар-Заказ установлена связь «один - ко - многим».

В одном заказе можно заказать множество товаров, поэтому между сущностями Товар-Заказ и Заказ установлена связь «один - ко - многим».

ER-диаграмма базы данных для интернет - магазина представлен в Приложении А.

Получение реляционной схемы из ER-диаграммы. Процедура преобразования ER-диаграммы в реляционную схему базы данных состоит из следующих шагов:

каждый простой тип сущности превращается в таблицу. Простым типом сущности называется тип сущности, не являющийся подтипом и не имеющий подтипом. Имя сущности становится именем таблицы. Экземплярам типа сущности соответствуют строки соответствующей таблицы;

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

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

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

Схема данных интернет - магазина состоит из 4 таблиц: Товар, Клиент, Заказ и Товар-Заказ.

Свойства полей для таблицы Товар приведены в таблице 2.

Таблица 2 - Свойства полей таблицы Товар

Имя поля	Ключевое поле	Тип поля	Размер поля	Индексированное поле
Код товара	Ключевое поле	Счетчик	Длинное целое	Да (Совпадения не допускаются)
Наименование товара		Текстовый	100	Нет
Описание товара		Текстовый	100	Нет
Цена		Денежный	Основной	Нет

Свойства полей для таблицы Клиент приведены в таблице 3.

Таблица 3 - Свойства полей таблицы Клиент

Имя поля	Ключевое поле	Тип поля	Размер поля	Индексированное поле
Код клиента	Ключевое поле	Счетчик	Длинное целое	Да (Совпадения не допускаются)
Фамилия		Текстовый	50	Нет
Имя		Текстовый	50	Нет
Отчество		Тестовый	50	Нет
Город		Текстовый	50	Нет
Адрес		Текстовый	100	Нет
Телефон		Числовой	Длинное целое	Нет
E-mail		Текстовый	50	Нет

Свойства полей для таблицы Заказ приведены в таблице 4.

Таблица 4 - Свойства полей таблицы Заказ

Имя поля	Ключевое поле	Тип поля	Размер поля	Индексированное поле
Код заказа	Ключевое поле	Счетчик	Длинное целое	Да (Совпадения не допускаются)
Код покупателя		Числовой	Длинное целое	Да (Совпадения допускаются)
Дата заказа		Дата/время	Краткий формат даты	Нет
Стоимость заказа		Денежный	Основной	Нет
Статус заказа		Текстовый	50	Нет

Свойства полей для таблицы Товар-Заказ приведены в таблице 5.

Таблица 5 - Свойства полей таблицы Товар-Заказ

Имя поля	Ключевое поле	Тип поля	Размер поля	Индексированное поле
Код заказанного товара	Ключевое поле	Счетчик	Длинное целое	Да (Совпадения не допускаются)
Код заказа		Числовой	Длинное целое	Да (Совпадения допускаются)
Код товара		Числовой	Длинное целое	Да (Совпадения допускаются)
Количество		Текстовый	50	Нет
Стоимость		Денежный	Основной	Нет

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

В качестве инструмента построения реляционной схемы базы данных использована MySQL Workbench.

Заключение

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

Для увеличения количества клиентов и повышения эффективности деятельности клуба, собственником было принято решение о создании электронного ресурса компании с интернет - магазина. Для чего в аналитической части работы охарактеризована деятельность спортивного клуба «Olympia Gym», проведен сравнительный анализ сайтов аналогичных спортивных и фитнес - клубов города Новокузнецка. По результатам анализа выделены основные функции, необходимые для сайта спортивного клуба «Olympia Gym».

Далее были выделены задачи, которые поможет решить разработанный веб-сайт. В соответствии с ними изложен процесс разработки сайта спортивного клуба бодибилдинга «Olympia Gym».

Разработка основной части сайта представлена следующими основными этапами: разработка макета дизайна сайта, установка системы управления контентом сайта Joomla и дополнение ее под задачи сайта, разработка шаблонной страницы сайта и создание основных модулей сайта. Отдельно охарактеризованы принципы организации электронной коммерции посредством сайта.

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

1. Дизайн-студия Smart [Электронный ресурс]: типы сайтов, или классификация интернет ресурсов. Режим доступа: http://www.smart-web.ru/types-of-sites.html - 07.05.2012.

2. Дизайн-студия Trilan [Электронный ресурс]: разработка и создание сайтов. Режим доступа: http://develop.trilan.ru - 07.05.2012.

3. Веб-студия BSWS [Электронный ресурс]: информационное обеспечение сайта. Режим доступа: http://bsws.com.ua/ru/teoriya/stati.html - 08.05.2012.

4. Russian Apache - сайт о сервере Apache [Электронный ресурс]: краткий обзор сервера. Режим доступа: http://apache.lexa.ru/intro.html - 08.05.2012.

5. Колесниченко Д.Н. PHP 5/6 и MySQL 6. Разработка Web-приложений. - 2-е изд., перераб. и доп. - СПб.: БХВ-Петербург, 2010. - 560 с.

6. phpMyAdmin по-русски [Электронный ресурс]: описание приложения. Режим доступа: http://php-myadmin.ru/about/notice.html - 10.05.2012.

7. Портал о веб-технологиях [Электронный ресурс]: основы и синтаксис PHP. Режим доступа: http://php.su/learnphp/?syntax - 13.05.2012.

8. Курс PHP [Электронный ресурс]: типы данных, переменные и операторы в PHP / Артемьев С.И. Режим доступа: http://on-line-teaching.com/php/struct.types.htm - 13.05.2012.

9. Портал о веб-разработке [Электронный ресурс]: циклы в PHP. Режим доступа: http://wcode.ru/php/89 - 13.05.2012.

10. Дюбуа П. MySQL. Полное и исчерпывающее руководство по применению и администрированию баз данных MySQL, а также программированию приложений [Текст]: учебник - 2-е изд. - пер. с англ. - М.: Изд. дом "Вильямс", 2004. - 1056 с.

Приложение

ER-диаграмма базы данных для интернет - магазина

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