Разработка программного продукта

Проектирование структуры страниц

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

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

разработка программного продукта - student2.ru

Рисунок 4.1 – Структура главной страницы

Сайт имеет в своей структуре 3 меню:

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

- главное меню – содержит категории товаров, представленных на сайте;

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

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

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

Административный раздел

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

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

разработка программного продукта - student2.ru

Рисунок 4.2 – Интерфейс административной части

разработка программного продукта - student2.ru

Рисунок 4.3– Функциональная структура главного меню административной части

С целью предотвращения несанкционированного доступа к административной части доступ к ней возможен только из адресной строки браузера (на примере локального размещения): http://localhost/col.ru/admin.

Административная часть располагается в отдельном дочернем каталоге основного каталога сайта («admin»). Программный код основного файла (index.php) представлен в приложении А. Программный код файла с настройками (config.php) на примере размещения на локальном хостинге представлен ниже:

<?php

// HTTP

define('HTTP_SERVER', 'http://localhost/col.ru/admin/');

define('HTTP_CATALOG', 'http://localhost/col.ru/');

define('HTTP_IMAGE', 'http://localhost/col.ru/image/');

// HTTPS

define('HTTPS_SERVER', 'http://localhost/col.ru/admin/');

define('HTTPS_CATALOG', 'http://localhost/col.ru/');

define('HTTPS_IMAGE', 'http://localhost/col.ru/image/');

// DIR

define('DIR_APPLICATION', 'Z:\home\localhost\www\col.ru/admin/');

define('DIR_SYSTEM', 'Z:\home\localhost\www\col.ru/system/');

define('DIR_DATABASE', 'Z:\home\localhost\www\col.ru/system/database/');

define('DIR_LANGUAGE', 'Z:\home\localhost\www\col.ru/admin/language/');

define('DIR_TEMPLATE', 'Z:\home\localhost\www\col.ru/admin/view/template/');

define('DIR_CONFIG', 'Z:\home\localhost\www\col.ru/system/config/');

define('DIR_IMAGE', 'Z:\home\localhost\www\col.ru/image/');

define('DIR_CACHE', 'Z:\home\localhost\www\col.ru/system/cache/');

define('DIR_DOWNLOAD', 'Z:\home\localhost\www\col.ru/download/');

define('DIR_LOGS', 'Z:\home\localhost\www\col.ru/system/logs/');

define('DIR_CATALOG', 'Z:\home\localhost\www\col.ru/catalog/');

// DB

define('DB_DRIVER', 'mysql');

define('DB_HOSTNAME', 'localhost');

define('DB_USERNAME', 'root');

define('DB_PASSWORD', '');

define('DB_DATABASE', 'colatadcolatad');

define('DB_PREFIX', '');

?>

Клиентский раздел

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

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

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

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

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

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

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

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

Когда пользователь всемирной сети попадает в интернет – магазин, то первой он видит главную страницу (рисунок 4.4). Посетитель рассматривает витрину интернет – магазина, на которой он видит представленные товары.

Доступ к главной странице с локального хостинга осуществляется с помощью адреса http://localhost/col.ru., доступ к главной странице с хостинга сети интернет -с помощью адреса http://www.colatab.ru.

разработка программного продукта - student2.ru

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

Просмотр структуры сайта возможен с помощью меню «Карта сайта» (рисунок 4.5).

разработка программного продукта - student2.ru

Рисунок 4.5 - Карта сайта

Информационные страницы, например «Наш магазин», представляют собой материал, редактирование которого соуществляется с помощью команды Каталог-Статьи (рисунок 4.6 – 4.7).

разработка программного продукта - student2.ru

Рисунок 4.6 - Список статей

разработка программного продукта - student2.ru

Рисунок 4.7 - Редактирование статьи

Наши рекомендации