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

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

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

Первое, что видит посетитель, попадая на Web-узел магазина, — это домашняя страница.

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

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

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

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

В данном случае посетитель ввел для поиска слово «удобный», После нажатия кнопки ОК в элементе управления DataGrid появится перечень товаров, в названии или кратком описании которых присутствует искомое слово.

Еще один способ просмотра товаров в каталоге обеспечивает страница Просмотр. После выбора на домашней странице ссылки Просмотр посетитель увидит верхний уровень иерархии страницы просмотра.

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

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

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

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

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

Если посетитель хочет заказать товар, он должен ввести значение в поле Количество и нажать кнопку ОК. Далее выполняется проверка того, введено ли значение в поле Количество и находится ли это значение в определенном диапазоне.

После нажатия кнопки ОК товар помещается в корзину покупателя, показанную на рис.

На странице Корзина покупателя с помощью элемента управления DataGr id создается список товаров, заказанных посетителем. В конце страницы можно увидеть общую стоимость заказа.

Посетитель может удалить любой товар из своей корзины, активизировав ссылку Удалить. (На рис. видно, что был удален товар подкатегории Белые рубашки.) Заметьте, что после, удаления товара из корзины изменилась и общая стоимость заказа.

Когда посетитель хочет, чтобы его заказ был обработан, он щелкает мышью на ссылке Оформление заказа и попадает на страницу Оформление заказа, показанную на рис.

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

После заполнения формы и нажатия кнопки ОК посетитель получает сообщение, показанное на рис. После этого сделанный заказ отмечается как размещенный и сеанс работы данного посетителя завершается.

База данных проекта

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

В таблице ProductCategories размещаются названия категорий, которые может просматривать посетитель. Каждая категория входит в другую категорию. Например, категория Spring Jackets (Весенние куртки) является подкатегорией категории Jackets (Куртки). Таким образом, отношения внутри таблицы ProductCategories относятся к типу «один-ко-многим».

В таблице Products размещается информация о каждом товаре из каталога. Эта таблица и таблица ProductCategories связаны между собой отношением «один-ко-многим». Каждый товар принадлежит к конкретной категории, а каждая категория может иметь множество подкатегорий.

Другая часть базы данных касается клиентов и заказанных ими товаров. В таблице Customers содержится информация о клиентах. В таблице ShoppingCartltems размещаются элементы, которые посетитель «отложил» в свою корзину. Таблицы находятся в отношении «один-ко-многим». Каждый посетитель может заказать несколько товаров, и каждый товар соотносится с конкретным заказом посетителя.