Реализация проекта Сайт ICE BERG

В данном разделе последовательно рассматривается процесс разработки коммерческого Web-сайта ICE BERG.

Процесс создания сайта заключает механизмы связей страницы и объектов. Следующая иллюстрация представляет страницы и механизмы связей, которые составляют сайт е-коммерции. Основные части этой системы описаны ниже.

Страница index.html.

Является стартовой и запускается первой. Страница содержит две ссылки «ПОИСК» «Как нас найти». В режиме конструктора страница приведена на рисунке 2.3. Текст страницы приведен в приложении A.

Рисунок 2.3. — Стартовая страница в режиме Split в редакторе Dreameaver 8.

Страница search.php.

Процедуры поиска создают страницу, перечисляющую все товары в категории или все товары, которые соответствуют критериям поиска. Рисунок 2.4 показывает процесс редактирования страницы в приложении Dreamweaver. Когда пользователь выбирает определенную категорию или задает слово для поиска, эта информация передается на страницу search. php, используемую для поиска товаров. Программный код страницы приведен в приложении В окне браузера страница поиск представлена на рисунке 2.5. B. Окно свойств страницы search. php представлена рисунке 2.6.

Рисунок 2.4. — Страница ПОИСК в режиме Split в редакторе Dreameaver 8.

Рисунок 2.5. — Страница поиска продукта search. php в браузере Google Chrome.

Рисунок 2.6. — Окно свойство страницы как нас найти Страница detail.php.

Когда на странице search. php выбирается определенный товар, это действие соединяется со страницей detail. php, где выводится вся информация о продукте, включая изображение. Страница detail. php должна получить идентификацию товара, чтобы извлечь информацию. На этой странице пользователь может искать другие товары или купить этот товар. Для добавления товара в корзину покупателя создается кнопка «Buy». Товар помещается в корзину покупателя на этой странице, а затем происходит соединение со страницей shopcart. php, чтобы посетитель мог просмотреть содержимое своей корзины покупателя. Текст страницы приведен в приложении B. Рисунок 2.7.

Рисунок 2.7. — Страница Detail.php.

Страница shopcart.php.

Страница корзины покупателя перечисляет объекты в корзине покупателя и предоставляет посетителю возможность изменить количество единиц товара или удалить товары. Рисунок 2.8. Когда посетитель готов купить товар, происходит соединение со страницей creditcheck.php. Текст страницы приведен в приложении С.

Рисунок 2.8. — Страница shopcart.php.

Страница creditcheck.php.

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

Страница registration.php.

Эта страница выводит информацию для регистрации покупателя, чтобы заказчик оставил свои данные, способы доставки или оставляет комментарии. Страница представлена на рисунке 2.9. Текст страницы приведен в приложении D.

Рисунок 2.9. — Страница регистрации registration.php.

Страница salesorder.php.

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

Поиск продуктов Поиск категории продукта находит все названия мобильных телефонов в этой категории на основе соответствующего значения Code в их записях. Поиск по ключевым словам находит все названия программных продуктов, содержащие ключевое слово в одном из своих полей. В обоих случаях создается список из полей Firm, Model, и Price соответствующих записей о продуктах. Поля таблицы представлены в режиме конструктора на рисунке 2.11. Список продуктов соединяется также со страницей detail. php, где представлена вся информация о продукте. Рисунок 2.12. таблица Товар с заполненным прайс-листом.

Рисунок 2.11. — Таблица Товар приложения MS Access.

Рисунок 2.12 — Таблица Товар в режиме просмотра данных Создание таблицы корзины покупателя Удобным способом создания корзины покупателя является использование таблицы базы данных. Записи добавляются в таблицу, когда заказчик выбирает объекты для покупки; записи удаляются из таблицы, когда заказчик решает не покупать выбранный ранее объект; и запись изменяется, когда заказчик выбирает другое количество товара для покупки. Таблица является динамической, ее записи добавляются, изменяются и удаляются во время процесса покупки.

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

Для текущих задач мы создаем следующую структуру таблицы Klents, которая добавляется в базу данных ib.mdb. На рисунке 2.13 таблица Клиенты в режиме конструктора.

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

Рисунок 2.14. — Файлы с изображениями Таблица стилей stylesheetEC. css используется для создания стиля страниц. Код программы приведен в приложении А.

Все страницы приложения хранятся в корневом каталоге и находятся в подпапке WWW. При размещении сайта на локальном сервере был задан адрес http://iberg.ru/.

Иерархия страниц при просмотре в окне Files приложения Dreamweaver приведена на рисунке 2.15.

Рисунок 2.15 — Схема взаимосвязи компонентов в среде Dremweaver 8.

Тестирование сайта ICE BERG.

Тестирование сайта проводилось с помощью локального сервера Denwer это набор программной поддержки бесплатно распространяемый в сети Интернет. Пакет Денвер включает в себя:

• · Инсталлятор (поддерживается также инсталляция на flash-накопитель).
• · Apache, SSL, SSI, mod_rewrite, mod_php.
• · PHP5 с поддержкой GD, MySQL, sqLite.
• · MySQL5 с поддержкой транзакций.
• · Система управления виртуальными хостами, основанная на шаблонах. Чтобы создать новый хост, вам нужно лишь добавить директорию в каталог /home, править конфигурационные файлы не требуется. По умолчанию уже поддерживаются схемы именования директорий многих популярных хостеров; новые можно без труда добавить.
• · Система управления запуском и завершением всех компонентов Денвера.
• · phpMyAdmin — система управления MySQL через Web-интерфейс.
• · Эмулятор sendmail и SMTP-сервера (отладочная «заглушка» на localhost:25, складывающая приходящие письма в /tmp в формате. eml); поддерживается работа совместно с PHP, Perl, Parser. (Рисунок 2.16.)

Рисунок 2.16. — Окно запуска набора Denver.

Что бы перейти на страницу сайта необходимо набрать в адресной строке адрес Интернет-магазина как показано на рисунке 2.17.

Рисунок 2.17 — Адресная строка в браузере Google Chrome.

После ввода адрес загружается главная страница сайта. На рисунке 2.18 показана главная страница в браузере.

Рисунок 2.18 — Главная страница в браузере Google Chrome.

Из главной страницы пользователь попадает на страницу поиска и на страницу «Как нас найти» носящую информативный характер о магазине, на рисунке 2.19 приведена данная страница при переходе на нее из главной страницы.

Рисунок 2.19 — Страница «Как нас найти» в барузере Google Chrome.