45
Рисунок 3.8 – Логическая схема БД users
Рисунок 3.9 – Физическая схема БД users
Для управления БД к Интернет-аукциону компании ООО «Stount» подключена
панель администрирования (см. рисунок 3.10).
46
Рисунок 3.10 – Панель администрирования Интернет-магазина «Stount»
Панель администрирования Интернет-магазина защищена системой
авторизацией и требует ввода логина и пароля, рисунок 3.11.
47
Рисунок 3.11 – Вход в панель администратора Интернет-магазина «Stount»
На рисунке 3.12 и 3.13 представлены примеры ввода и изменения информации
в гостевой книге Интернет-магазина «Stount».
Рисунок 3.12 – Пример работы с панелью ввода информации в гостевую книгу
Интернет-магазина «Stount»
48
Рисунок 3.13 – Пример работы с панелью изменения и удаления информации
в гостевой книге Интернет-магазина «Stount»
Пример конфигурационных файлов подключения БД worldpc_gostkniga к
Интернет-магазинау «Stount».
3.12 Структура Интернет-магазина
Структурная схема Интернет-магазина «Stount» представлена на рисунке 3.14.
Рисунок 3.14 – Структурная схема Интернет-магазина «Stount»
index.php
(О компании)
tovary.php
(Товары)
uslugy.php
(Услуги)
Gost-kniga.php
(Гостевая книга)
email.php
(Обратная связь)
karta.php
(Карта сайта)
oborudovanie.php
(Оборудование)
rashodka.php
(Расходные материалы)
po.php
(Программное обеспечение)
lider_prodag.php
(Лидеры продаж)
kontacty.php
(Контакты)
zakazy.php
(Онлайн заказы)
klienty.php
(Клиенты)
49
Главной страницей Интернет-магазина «Stount» является страница index.php.
Все страницы Интернет-магазина являются динамическими. Сайт имеет 2-х
уровневую структуру. Всего сайт включает 13 страниц: 7 основных и 6
второстепенных. Все страницы Интернет-магазина, кроме zakazy и klienty,
взаимосвязаны между собой, что обеспечивает свободное перемещение по данным
страницам.
Также к Web-сайту подключена поисковая система: world-
pc/phprusearch/index.php и панель администратора: admin.php, vhod.php, error.php,
add_gostkniga.php, add_klienty.php, add_tovary.php, add_zakazy.php,
editor_gostkniga.php, editor_klienty.php, editor_tovary.php, editor_zakazy.php.
3.13 Решение вопросов дизайна и навигации
Одним из основных этапов проектирования Web-сайтов является разработка
дизайна и создание навигации. Оформление Интернет-магазина – очень важная вещь,
которой при разработке необходимо уделять особое внимание, так как от цветовой
схемы Интернет-магазина, способе представления информации на сайте, удобстве ее
просмотра и простоте навигации зависит уровень посещаемости Интернет-магазина.
Схема, по которой посетитель Интернет-магазина просматривает
гипертекстовые документы, называется навигацией. Навигация должна быть удобной,
понятной и продуманной.
Рисунок 3.15 – Схема представления информации и навигации Интернет-магазина
«Stount»
Заставка
Горизонтальное
меню
Логотип
Контент
Вертикальное
меню
Контент
50
В связи с этим фактом мной была разработана схема представления
информации и навигации для Интернет-магазина «Stount», представленная на рисунке
3.15.
Пример заставки Интернет-магазина представлен на рисунке 3.16.
Рисунок 3.16 Заставка Интернет-магазина «Stount»
Пример логотипа Интернет-магазина представлен на рисунке 3.17.
Рисунок 3.17– Логотип Интернет-магазина «Stount»
Меню на сайте представлено в 2 вариантах: горизонтальное меню и
вертикальное меню (рисунки 3.18 и 3.19).
Рисунок 3.18 – Горизонтальное меню Интернет-магазина «Stount»
51
Рисунок 3.19 – Вертикальное меню Интернет-магазина «Stount»
Для разработки заставки и других дополнительных элементов дизайна Интернет-
магазина использовались изображения, анимация, баннеры, логотипы и многие
другие компоненты Интернет-магазина, использовались графические редакторы
GIMP 2.8.4, Inkscape (Инкскейп) 0.48.4 и Swish max 4.
Исходя из того, что с рассматриваемым объектом является компьютерный
магазин, принято решение использовать в дизайне Интернет-магазина яркие легкие
цвета: белый, голубой, серый. Так как сайт является информационным, поэтому
дизайн Интернет-магазина был продуман таким образом, чтобы графическая начинка
не отвлекала посетителей Интернет-магазина от важной текстовой информации.
Шрифты на Web-сайте представлены в двух типовых схемах: Arial, Helvetica,
sans-serif, Times New Roman, Times, serif. Для настройки различных блоков текста
используется шаблон mystyle.css. Для выделения важных участков информации на
Web-сайте используется графическая форма (рисунок 3.20).
52
Рисунок 3.20 – Графическая форма
3.14 Создание макета Интернет-магазина
На основании разработанной структуры Интернет-магазина и навигационной
схемы, был создан макет (рисунок 3.21).
53
Рисунок 3.21 – Шаблон Интернет-магазина «Stount»
Интернет-магазина «Stount». Для разработки макета использовалась
возможность программы Macromedia DreamWeaver CS5 работать с шаблонами
(templates). При создании шаблона происходит распределение областей страницы на
заблокированные и редактируемые. Замена шаблона приводит к автоматическому
обновлению всех связанных с ним документов.
На данном этапе разработки был создан сайт с именем world-pc, включающий
папки Images (графические элементы Интернет-магазина ) и phprusearch (скрипт
поиска по Web-сайту). Созданы динамические страницы с расширением php,
связанные между собой гиперссылками. После чего макет был наполнен
информационным содержанием в соответствии с тематикой Интернет-магазина и
оформлен в едином стиле:
Также в корневой папке Интернет-магазина была создана папка connections и admin
для подключения БД и панели администратора.Созданный шаблон был применен в
дальнейшем для всех страниц Интернет-магазина.
Также на данном этапе для форматирования информационной начинки любой
страницы Интернет-магазина были созданы каскадные таблицы стилей (CSS- Cascade
Style Sheets) – файл с именем mystyle. Каскадные таблицы стилей являются списком
правил, определяющих способ отображения различных элементов HTML-документа.
54
Достоинством CSS является возможность последующего редактирования их
параметров, сопровождающаяся обновлением всех элементов, к которым эти стили
были применены. На рисунке 3.22 представлена структура созданного файла CSS –
mystyle.
Рисунок 3.22 – Файл настроек CSS mystile