Файл: Разработка сайта кондитерского комбината «__________».pdf

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

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

Ярким событием в жизни предприятия стал запуск в 2008 году премиального бренда «Эйфория» - самого шикарного продукта на российском кондитерском рынке. Из вышесказанного можно сделать вывод, что ОАО «Кондитерская фабрика «Домино» является надежным партнером для своих клиентов. Компания имеет стабильную прибыль и активно развивается.

3.2 Структура информации и навигации по сайту

ОАО «Кондитерская фабрика «Домино» является известным и надежным предприятием, в связи с этим появилась насущная необходимость в собственном web-сайте. Руководство ОАО «Кондитерская фабрика «Домино» выступило заказчиком данного сайта и выдвинуло ряд требований, которым должен удовлетворят данный проект:

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

Автор постарался максимально удовлетворить всем требования заказчика.

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

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

В корневой папке сайта находятся несколько подкаталогов:

 Images - для хранения файлов с изображениями ;

 PHP - содержит коды скриптов, используемые на сайте;

 CSS - содержит служебные файлы .css, отвечающие за дизайн сайта;

сайта.

Файл index.php находится в корневой папке сайта, так как является самым главным файлом сайта. Именно его содержимое выводится в браузере при наборе адреса сайта. Также в корневой папке содержатся другие файлы необходимые для отображения основных страниц сайта.

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

Сайт состоит из веб-страниц, которые сгруппированы в ряд разделов, объединенных гиперссылками:

Главная
О компании
Новости
Наша продукция
Торты на заказ
Магазины
Отзывы
Контакты

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

3.3 Разработка интерфейса и дизайна сайта

Разрабатываемый сайт был реализован с учетом основных требований, предъявленных заказчиком.

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

Особое значение имеет главная страница, так как именно её клиент видит первой и именно от неё чаще всего зависит, останется клиент на сайте или же никогда там больше не появится.

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

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

Наличие логотипа являлось одним из требований заказчика. Логотип присутствует в левом верхнем углу сайта.

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

Главная страница представлена ниже:

Рисунок 3.1 - Главная страница

Пример кода:

<?php

/**

* @package Joomla.Site

* @subpackage Templates.beez3

* @license GNU General Public License version 2 or later; see LICENSE.txt

defined('_JEXEC') or die;

/** @var JDocumentHtml $this */

$color = $this->params->get('templatecolor');

// Output as HTML5

$this->setHtml5(true);

// Add html5 shiv

JHtml::_('script', 'jui/html5.js', array('version' => 'auto', 'relative' => true, 'conditional' => 'lt IE 9'));

// Add stylesheets

JHtml::_('stylesheet', 'templates/system/css/system.css', array('version' => 'auto'));

JHtml::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true));

JHtml::_('stylesheet', 'position.css', array('version' => 'auto', 'relative' => true));

JHtml::_('stylesheet', 'layout.css', array('version' => 'auto', 'relative' => true));

JHtml::_('stylesheet', 'print.css', array('version' => 'auto', 'relative' => true), array('media' => 'print'));

JHtml::_('stylesheet', 'general.css', array('version' => 'auto', 'relative' => true));

JHtml::_('stylesheet', htmlspecialchars($color, ENT_COMPAT, 'UTF-8') . '.css', array('version' => 'auto', 'relative' => true));

if ($this->direction === 'rtl')

{

JHtml::_('stylesheet', 'template_rtl.css', array('version' => 'auto', 'relative' => true));

JHtml::_('stylesheet', htmlspecialchars($color, ENT_COMPAT, 'UTF-8') . '_rtl.css', array('version' => 'auto', 'relative' => true));

}

JHtml::_('stylesheet', 'ieonly.css', array('version' => 'auto', 'relative' => true, 'conditional' => 'lte IE 6'));

// Check for a custom CSS file

JHtml::_('stylesheet', 'user.css', array('version' => 'auto', 'relative' => true));

<!DOCTYPE html>

<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">

<head>

<jdoc:include type="head" />

</head>

<jdoc:include type="message" />

<jdoc:include type="component" />

</div>

</body>

</html>

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

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

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

Страница "О нас" содержит информацию о сертификатах организации.

Рисунок 3.2 - Просмотр информации о сертификатах компании

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

Данный список разработан по принципу иерархии.

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

Рисунок 3.5 - Страница каталога

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

Рисунок 3.6 – Поле отзывов

Пример кода:

<?php

/**

* @package Joomla.Site

* @license GNU General Public License version 2 or later; see LICENSE.txt

/**

* Define the application's minimum supported PHP version as a constant so it can be referenced within the application.

define('JOOMLA_MINIMUM_PHP', '5.3.10');

if (version_compare(PHP_VERSION, JOOMLA_MINIMUM_PHP, '<'))

{

die('Your host needs to use PHP ' . JOOMLA_MINIMUM_PHP . ' or higher to run this version of Joomla!');

}

// Saves the start time and memory usage.

$startTime = microtime(1);

$startMem = memory_get_usage();

/**

* Constant that is checked in included files to prevent direct access.

* define() is used in the installation folder rather than "const" to not error for PHP 5.2 and lower

define('_JEXEC', 1);

if (file_exists(__DIR__ . '/defines.php'))

{

include_once __DIR__ . '/defines.php';

}

if (!defined('_JDEFINES'))

{

define('JPATH_BASE', __DIR__);

require_once JPATH_BASE . '/includes/defines.php';

}

require_once JPATH_BASE . '/includes/framework.php';

// Set profiler start time and memory usage and mark afterLoad in the profiler.

JDEBUG ? JProfiler::getInstance('Application')->setStart($startTime, $startMem)->mark('afterLoad') : null;

// Instantiate the application.

$app = JFactory::getApplication('site');

// Execute the application.

$app->execute();

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

3.4 Информационные технологии, использованные при создании сайта

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

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

3.5 Разработка администраторской части web-сайта

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

Доступ к администраторской части осуществляется через окно авторизации:

Рисунок 3.11 - Доступ к администрированию

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

Добавление нового товара происходит при помощи приведенной ниже формы:

Рисунок 3.13 - Форма добавления товара

Таким образом, данный Web-сайт выполняет ряд следующих функций:

Осуществляет снабжение информацией посетителей сайта о производственном предприятии ОАО «Кондитерская фабрика «Домино»;
дает возможность посетителям сайта быть в курсе последних новостей, новинок выпускаемой продукции;
позволяет администратору редактировать, добавлять и удалять информацию;
позволяет осуществлять поиск по сайту.

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