42
Первый способ - верстка осуществляется с помощью таблиц.
Табличная верстка использует элементы разметки, которые не соответствуют
той семантике, которую они несут, для получения внешних эффектов, из-за
того, что изначально таблицы не рассматривались как инструмент для
построения каркаса страниц, а выполняли свои стандартные функции -
осуществляли стандартный ввод-вывод данных. Чтобы сверстать сайт с
помощью табличной верстки, необходимо использовать большое количество
вложенных таблиц, что сильно затрудняет обработку браузером страниц,
увеличивает размер сайта, что в свою очередь очень сильно снижает скорость
загрузки файлов, и может привести к появлению ошибок в коде.
Второй способ - верстка сайта при помощи слоев (блоков), что является
более удобным и правильным инструментом верстки, с точки зрения
убеждений о разделении содержания и оформления. Блочная верстка сайтов
дает больше возможностей, позволяет сделать код компактнее, что в свою
очередь позволяет увеличить скорость загрузки веб-страницы. При помощи
верстки слоями можно гораздо более эффективно разработать сайт, который
будет корректно отображаться в браузерах [18].
Интерфейс пользователя должен организовать максимально простой
процесс взаимодействия пользователя и ресурса, выделяют некоторые
общепринятые приемы улучшения юзабилити:
1. Элементы интерфейса должны быть взаимосвязаны и логически
структурированы.
2. Интерфейс должен быть выполнен в едином стиле.
Выбирают самую лаконичную и понятную форму подачи информации,
ведь ее избыток сбивает пользователя с толку, а слишком многоуровневая
структура усложняет навигацию по сайту.
С помощью правильной настройки и оформления интерфейса
решаются сразу несколько задач.
Пользователь:
интуитивно понимает, как выполнить нужные действия;
43
получает о продукте исчерпывающую информацию;
проходит минимальный путь к целевому действию (покупке, заказу)
[19].
Структура интерфейса пользователя представлена на рисунке 14.
Рисунок 14 - Структура интерфейса пользователя
На рисунке 15 представлен проект регистрационной формы.
Регистрационная форма
Регистрация
Город
Имя
Фамилия
Компания
Должность
Контактный телефон
E-mail
Пароль
Подтверждение пароля
Пользовательское соглашение
Зарегистрироваться
Рисунок 15 - Регистрационная форма
44
При регистрации пользователь должен ввести следующие данные:
– фамилия;
– имя;
– город;
– компания;
– должность;
– контактный телефон;
– e-mail;
– пароль;
– подтверждение пароля.
На рисунках 16 - 18 представлены проекты форм интерфейса
пользователя.
Рисунок 16 - Меню ввода
Рисунок 17 - Главное окно интернет-магазина
45
Рисунок 18 - Корзина покупок
На рисунках 16 -18 были представлены формы входа, форма главной
страницы интернет-магазина и форма корзины покупок.
2.4. Проектирование структуры БД магазина
При разработке базы данных выделяются основные информационные
сущности предметной области, выявляются связи между ними. Логическая
структура базы данных определяется информационными потребностями
проекта. При ее разработке выделяются основные информационные
сущности предметной области, выявляются связи между ними. Затем,
логическая структура оптимизируется в соответствии с реализуемыми
целевыми функциями проекта. Представим описание таблиц проектируемой
БД и непосредственно структуру БД [12].
Таблица 1 - Поля таблицы категорий (Categories)
Поле таблицы
Тип данных
Описание
Id
SMALLINT
Уникальный идентификатор категории
ParentCategory
SMALLINT
Категория, по отношению к которой текущая является
подкатегорией
Name
VARCHAR(32)
Название категории
46
Таблица 2 - Поля таблицы товаров (Tovars)
Поле таблицы
Тип данных
Описание
Id
MEDIUMINT
UNSIGNED
Уникальный идентификатор товара
CategoryID
SMALLINT
UNSIGNED
Категория, к которой относится данный
товар
Name
VARCHAR(255)
Название товара
AuthorID
SMALLINT
UNSIGNED
Производитель
ISBN
CHAR(13)
Уникальный номер товара ISBN
ImageHREF
VARCHAR(255)
Путь к файлу изображения товара
Synopsis
TEXT
Краткое описание
AppearDate
DATE
Время поступления в магазин
Count
INTEGER
Количество в фонде
Price
DECIMAL(6,2)
Цена
Таблица 3 - Поля таблицы производителей (Authors)
Поле таблицы
Тип данных
Описание
Id
SMALLINT UNSIGNED
Уникальный идентификатор производителя
Name
VARCHAR(255)
Наименование производителя
Text_name
TEXT
Краткая справка о производителе
Таблица 4 - Поля таблицы посетителей (Users)
Поле таблицы
Тип данных
Описание
Id
MEDIUMINT UNSIGNED
Уникальный идентификатор посетителя
Name
CHAR (127)
Имя посетителя
Surname
CHAR (127)
Фамилия посетителя
Email
VARCHAR(64)
E-Mail посетителя
Phone
VARCHAR(20)
Телефон для подтверждения заказа
IP
CHAR(14)
Текущий IP покупателя
SessionKey
INT UNSIGNED
Уникальный код для авторизации
47
Таблица 5 - Поля таблицы корзины посетителя при покупке товара
(Orders)
Поле
таблицы
Тип данных
Описание
Id
INT
UNSIGNED
Номер заказа
Amount
TINYINT
Число единиц товара, добавленных в корзину
посетителя
OrderStatusID
INTEGER
Состояние заказа
Date
DATETIME
Дата заказа
UserID
INTEGER
Покупатель
Payment
BYTE
Вид оплаты
AmountKol
CHAR(10)
Сумма заказа
Таблица 6 - Поля таблицы детализации пользовательской корзинки
(OrderDetail)
Поле таблицы
Тип данных
Описание
Id
INT UNSIGNED
Номер по порядку
OrderID
INTEGER
Номер заказа
OrderStatusID
INTEGER
Состояние заказа
Quantity
DATETIME
Количество
UserID
INTEGER
Посетитель
Payment
BYTE
Вид оплаты
TovarID
CHAR(10)
Наименование товара
Таблица 7 - Поля таблицы статус заказа (OrderStatus)
Поле таблицы
Тип данных
Описание
Id
INT UNSIGNED
Код состояния заказа
Stutus
INTEGER
Название состояния заказа
48
Структура проектируемой БД представлена на рисунке 19.
Categories
CategoryID
ParentCategory
Name
Tovars
CategoryID (FK)
AuthorID (FK)
IDTovar
Name
ISBN
ImageHREF
Synopsis
AppearDate
Count
Price
Authors
AuthorID
Name
TextName
Users
IDUser (FK)
OrderStatusID (FK)
IDOrder (FK)
Name
Surname
Email
Phone
IP
SessionKey
Orders
IDOrder
OrderStatusID (FK)
IDUser
Amount
Date
Payment
AmountKol
OrderDetail
IDOrder (FK)
IDUser (FK)
IDTovar (FK)
CategoryID (FK)
AuthorID (FK)
OrderStatusID (FK)
Quatity
Payment
OrderStatus
OrderStatusID
Status
Рисунок 19 - Структура проектируемой БД интернет-магазина
На представленном рисунке отображены ранее описанные таблицы и
связи между ними.
В рамках данного раздела было выполнено проектирование основных
объектов интернет магазина, были определены подсистемы и взаимосвязь
между ними, выполнено определение функций пользователей по отношению
к разрабатываемому сайту, представлено взаимодействие во временном
аспекте, представлена деятельность основных подсистем, для наглядного
представления использовались диаграммы языка моделирования UML, были
построены диаграммы вариантов использования, последовательности,
состояний, активности.
49
ГЛАВА 3. ОПИСАНИЕ ПРОГРАММНОЙ РЕАЛИЗАЦИИ
3.1 Обоснование выбора среды разработки
Для разработки хорошо функционирующего веб-приложения -
многими специалистами считается, что лучшей комбинацией инструментов
для создания веб приложения будет комбинация PHP и MySQL.
PHP - это быстрый и многофункциональный язык сценариев с
открытым исходным кодом, используемый для разработки веб-приложений
или приложений Интернет / Интранет.
MySQL - это мощный сервер баз данных с открытым исходным кодом,
построенный на основе системы управления реляционными базами данных
(RDBMS) и способный обрабатывать большое параллельное соединение с
базой данных.
В сочетании друг с другом PHP и MySQL могут создавать очень
мощные и масштабируемые приложения Web / Internet / Intranet [20].
PHP и MySQL - это Open source, что означает, что они являются
бесплатными инструментами разработки, и существует большое сообщество
программистов, которые вносят свой вклад в совершенствование и постоянно
добавляют к нему функции. Средства разработки и серверы баз данных,
требующие затрат на лицензирование, имеют ограниченные ресурсы
программирования по сравнению с инструментами разработки с открытым
исходным кодом, которые имеют огромное и быстро растущее
специализированное и хорошо осведомленное сообщество, которое
распространяется по всему миру.
PHP и MySQL являются лучшими инструментами разработки. При
правильной разработке приложения могут быть созданы с простой
практичностью, сложной функциональностью, скоростью, мощностью и
масштабируемостью.
50
PHP и MySQL построены так, что любой, кто имеет минимальное
количество знаний в области программирования, может объединить веб-
приложение на основе браузера [31].
При создании сайтов разработчик сталкивается с двумя направлениями
по разработке веб приложения. Первое направление создание сайта
классическим методом, т.е. написание кода сайта на одном или нескольких
языках веб-программирования. В зависимости от требований к сайту,
разработка может осуществляться в простых или в визуальных редакторах
HTML и CSS. В случае, если необходимо реализовать простой статический
сайт, то достаточно использование «связки» HTML и CSS, с возможным
включением, в некоторых случаях, JavaScript. Для создания более
функциональных сайтов с возможностью динамического обновления имеет
смысл использование таких технологий как PHP, ASP.NET и т.д. [35].
Для создания сайтов с использованием языка PHP программный код
можно писать в обычном блокноте операционной системы Windows для
запуска понадобится установка веб сервера, например Денвер.
Одним из недостатков ручной разработки является то, что дизайн сайта
также необходимо создавать вручную с помощью различных программных
средств, для этих целей могут применяться любые графические редакторы.
Второе направление по разработке сайтов связан с использованием
методов автоматизированного создания при помощи систем управления
контентом, которые называются специальными конструкторами сайтов.
CMS - это онлайн-системы, которые дают возможность из готового
типового набора модулей и компонентов разработать структуру сайта и сразу
разместить его на хостинге. Наиболее популярными CMS являются
WordPress, Joomla и др. Необходимо отметить, что методы создания сайтов с
использованием CMS, на данный момент, являются наиболее популярными,
это объясняется тем, что не требуется больших знаний программирования у
разработчиков, и предоставляет более гибкую, готовую программную
оболочку, которую пользователь может изменить и настроить. В данной
51
работе для разработки сайта было использовано ручное написание
программного кода [33,36].
3.2. Описание разработанных модулей
После формирования структуры базы данных и ее разработки,
необходимо разработать программный комплекс интернет-магазина. Как
было описано ранее, сайт будет состоять из подсистем: клиентской части,
администрирующей и подсистемы управления сайтом, в связи с этим
программная реализация будет сводиться к разработке модулей для клиента,
и отдельно для администратора, ранее были описаны элементы управления
интернет-магазина, при разработке подсистема управления была объединена
с администрирующей частью.
Для наглядности представления подсистем необходимо сформировать
диаграмму классов. Диаграмма классов - статическая диаграмма,
представляет собой статический вид приложения. Диаграмма классов
используется не только для визуализации, описания и документирования
различных аспектов системы, но и для создания исполняемого кода
программного приложения.
Диаграмма классов описывает атрибуты и операции класса, а также
ограничения, налагаемые на систему. Диаграммы классов широко
используются при моделировании объектно-ориентированных систем,
поскольку они являются единственными диаграммами UML, которые могут
отображаться непосредственно с объектно-ориентированными языками.
Диаграмма классов показывает набор классов, интерфейсов,
ассоциаций, совместной работы и ограничений. Он также известен как
структурная диаграмма [17].
Цель диаграммы классов - моделировать статический вид приложения.
Цель диаграммы классов можно обобщить как:
– анализ и проектирование статического представления приложения;