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

2.4 Задачи web-сайта

Требуется разработать сайт магазина детской одежды «Утёнок» с функциями фотогалереи, обратной связью, а так же форумом. Можно выделить следующие задачи, которые должен разрешить сайт:

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

2. Более высокая скорость обратной связи;

3. Дать пользователю своевременную и полную информацию о товарах.

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

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

Для разработки web-сайта на локальном компьютере необходимо установить пакет программ Denwer, в который входят такие программы как web-сервер Apache, СУБД MySQL, phpMyAdmin web-интерфейс для работы с СУБД MySQL, язык web-программирования php. На рисунке 6 представлена схема веб-сайта компании с фотогалереей и функцией обратной связи.

Рисунок 6 - Схема веб-сайта

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

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

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

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

Для хранения практически всей информации о сайте Joomla использует базу данных MySQL. Она позволяет хранить значительные объемы данных, при этом предоставляет нам удобный интерфейс для взаимодействия с ней. Для сайта компании «Утенок», продающей детскую одежду необходимо создать базу данных “Utenok”, в которой создаются и хранятся таблицы для четкого разделения хранящейся на сайте информации. В базе данных основной сущностью является категория продукции, принадлежащая некоторому разделу. Взаимодействие основных сущностей представлено на ER-диаграмме (Рисунок 8).

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

Одним из важнейших параметров каждой из сущностей является псевдоним, т.к. если включить SEO-оптимизацию в Joomla! в строке с адресом доступа будут отображаться псевдонимы разделов, категорий или материала, которая удобнее для восприятия пользователем. Например: http://www.mysait.ru/index.php/bags-photo - ссылка с включенной SEO-оптимизацией, или обычная ссылка http://www.mysait.ru/index.php?option=com_content&view=article&id=48&Itemid=34.

Рисунок 8 - ER-диаграмма базы данных для сайта компании “Утенок”

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

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

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

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

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

Установка системы управления контентом сайта и дополнение ее под задачи сайта. Загружается актуальная версия Joomla, на данный момент Joomla 2.5. Разархивируются файлы дистрибутива Joomla в корневой каталог сервера (C:\WebServers\home\mysait.ru\www - для локального сервера). Открывается интернет-браузер и вводится адрес: www.mysait.ru, загрузится веб-инсталлятор Joomla. Нужно выполнить пошаговые действия:

1. Проверка системы и принятие лицензии. Joomla! проверяет настройки сервера, является ли сервер подходящим для того, чтобы установить Joomla! Затем должна загрузиться страница с лицензией GNU/GPL, которую нужно прочитать и принять (рисунок 9).

Рисунок 9 - Лицензия Joomla!

2. Основная настройка и установка Joomla!

- Настройка Joomla! для подключения к базе данных MySQL. Показана на рисунке 10.

Имя хоста MySQL - localhost

Имя пользователя MySQL - root

Пароль доступа к БД MySQL

Имя БД MySQL - database

Префикс таблиц БД MySQL - jml

Рисунок 10 - Настройка Joomla! для подключения к базе данных MySQL

Joomla! предоставляет возможность удаления существующих таблиц (Drop Existing Tables), как и возможность создания резервной копии старых таблиц (Backup Old Tables). При первой инсталляции необходимо оставить эти флажки пустыми.

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

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

- Название сайта. Необходимо ввести название сайта. Это название отображается в заголовке окна браузера, при обращении в web-сайту и в Административной панели. В данном случае Utenok.

- Подтверждение параметров настройки. Проверяется: абсолютный путь и url сайта. Вводится e-mail и пароль администратора. Окно установки программы отражено на рисунке 11.

Рисунок 11- Определение конфигурации сайта

Это все основные этапы установки Joomla! После завершения установки можно перейти в панель Администратора www.mysait.ru/administrator и выполнить основные настройки сайта. (рисунок 12)

Рисунок 12-Завершение установки

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

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

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

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

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

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

- Нижняя панель навигации - здесь располагается информация о компании, контактная информация и карта сайта, а также информация о «копирайте».

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

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

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

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

Рисунок 15 - Главное меню сайта (блок сверху)

Структура разделов (пунктов меню) изображена на рисунке 16.

Рисунок 16 - Структура главного меню: разделы и категории

Нижнее меню в сущности дублирует некоторые пункты верхнего меню, а так же добавляется пункт «Карта сайта». Здесь расположена информация о компании, контактная информация и карта сайта. Отдельно представлена информация о компании: история создания, производственные возможности, основные принципы компании. Отдельный раздел «как нас найти» здесь размещены адрес магазина, телефон, график работы магазина. Внешний вид нижнего меню представлен на рисунке 17.

Рисунок 17 - Нижнее меню сайта

Размещение карты на сайте

На сайте для удобства потенциальных покупателей в разделе «Как нас найти» размещена карта от Yandex. Для того чтобы разместить карту, нужно на сайте http://api.yandex.ru/maps зайти в конструктор карт, ввести адрес местонахождения магазина и конструктор автоматически сгенерирует код для размещения карты на сайте. Достаточно его скопировать и разместить в том блоке сайта, где мы его хотим видеть. Конструктор карты изображен на рисунке 18.

Рисунок 18 - Конструктор карт от Yandex

С помощью этого модуля покупатели могут найти удобный для себя маршрут до магазина. Так же в конструкторе предусмотрено редактирование карты и рисование маршрутов. Карта магазина «Утенок» отображена на рисунке 19.

Рисунок 19- Карта для магазина «Утенок»

Фотогалерея продукции

Для ознакомления покупателей с продукцией на сайте также размещена фотогалерея с товарами. В ней отражено не только изображение товара, но и наименование с кратким описанием. Фотогалерея отображена на рисунке 20.

Рисунок 20 - Фотогалерея магазина «Утенок»

2.5.3 Организация обратной связи на сайте

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

Этапы создания «обратной связи»:

1. Планирование полей, которые должна содержать обратная связь и анализ степени важности этих полей (обязательно для заполнения, необязательно для заполнения), определение типа поля (ввод данных, текстовое поле, выбор, пароль). Форма обратной связи для данного сайта должна содержать следующие поля с указанием (в скобках) типа поля:

- обязательные - имя отправителя(ввод данных), e-mail отправителя (ввод данных), текст сообщения (текстовое поле);

- необязательные - тема сообщения (ввод данных).

2. Создание с помощью редактора HTML формы обратной связи с нужными полями. Код формы обратной связи можно увидеть в приложении А.

Интерфейс формы обратной связи приведен на рисунке 18.

Рисунок 21 - Форма обратной связи сайта «Утенок»

Заключение

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

В практической части приведены основные этапы создания сайта компании «Утёнок». Дана характеристика объекта проектирования сайта - сайт компании, занимающейся продажей детской одежды. Рассмотрены сайты компаний занимающиеся продажей одежды и аксессуаров. Проведен сравнительный анализ разработок сайтов, выделены основные функции, работающих сайтов и на их основе проанализированы основные функции необходимые для сайта компании «Утенок». Выбран сайт прототип - сайт компании «Crokid», т.к. реализованные в нем функциональные возможности более всего удовлетворяют потребностям создаваемого сайта. Для увеличения количества клиентов и повышения уровня информации о предмете, администрацией компании было принято решение о создании электронного ресурса компании. Электронный ресурс должен не только предоставить информацию о сфере деятельности и контактную информацию о компании, но и предоставить возможность обратной связи посредством сети интернет. Возможность подробно узнать о продукции, способах печати и посмотреть уже готовые работы через интернет может привлечь новых клиентов.

Были определены задачи, которые поможет решить веб-сайт. Изложен процесс разработки сайта компании «Утёнок»: построение базы данных сайта и разработка основной части. Вследствие того, что разработка основной части достаточной длинный трудоемкий процесс его решено разбить на более мелкие составные части, и выполнять каждую и них последовательно. Основные этапы разработки основной части сайта: разработка макета дизайна сайта, установка системы управления контентом сайта Joomla! и дополнение ее под задачи сайта, разработка шаблонной страницы сайта и создание основных модулей сайта.

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

1. Портал о создании сайтов [Электронный ресурс]: Типы сайтов. Режим доступа: http://www.dbest.ru/creation_site/model - 22.06.2013.

2. Портал о создании сайтов [Электронный ресурс]: Структура сайта. Режим доступа: http://www.site-do.ru- 22.06.2013.

3. Портал о методах раскрутки и продвижении сайтов [Электронный ресурс]: Способы продвижения сайтов. Режим доступа: http://adtimes.ru - 22.06.2013.

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

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

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

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

Приложение А

HTML-код формы обратной связи

<form action="mail.php" method="post">

<h5><strong>Ваше имя</strong></h5>

<h5><input type="text" name="name" size="30" /></h5>

<h5>Ваш e-mail</h5>

<h5><input type="text" name="email" size="30" /></h5>

<h5><strong>Тема сообщения</strong></h5>

<h5><input type="text" name="name" size="30" /></h5>

<h5>Сообщение<br /><textarea name="mess" rows="10" cols="50"></textarea></h5>

<h5><input type="submit" value="Отправить сообщение" /></h5>

</form>

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