46
<img src="images/2.jpg">
<figcaption>
<h3> <a href=" personalcomp.html ">Стационарные
компьютеры</a></h3>
…
Рисунок 2.5. Текстовая и графическая система навигации на сайте
Информация о товаре выводится на страницы сайта из базы данных в
сопровождении изображения товара, хранящегося в файле <код товара>.jpg в
папке images/products.
В базе данных хранится стоимость товара, основные параметры
компьютерной техники.
На главной странице сайта отображается не только графический баннер, в
который выводится адрес и телефон магазина, но также фотографии товаров
магазина, сгенерированные из галереи изображений случайным образом, что
позволяет привлечь внимание покупателя к сайту уже на этапе его открытия и
навигации.
Кроме этого картинки на слайд-шоу меняются регулярно через 2 секунды,
что придает сайту динамичность.
2.2.3. Написание программного кода
Универсальность любого веб-сайта прямо зависит от простоты его
обслуживания. Одним из важных факторов, которые максимально упрощают
47
модернизацию сайта, является описание стилей CSS для всех тегов в отдельном
файле, который подключается ко всем страницам сайта одновременно.
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) —
формальный язык описания внешнего вида документа, написанного с
использованием языка разметки.
При использовании таблицы связанных стилей описание селекторов и их
свойств располагается в отдельном файле, как правило, с расширением css, а
для связывания документа с этим файлом применяется тег <link>.
При разработке сайта Интернет-магазина «Comp-Reed» были
использованы шаблоны стилей в файле style.css.
В HTML-коде страниц сайта были прописаны ссылки на css-стили во
внешнем файле:
<body class="tc-body">
<div id="styleArea">
…
<link rel="stylesheet" href="text/style.css">
Для создания интерактивности сайта, движущихся элементов
использован язык JavaScript.
JavaScript — это язык для написания сценариев разработанный
компанией Netscape. JavaScript обычно используется как встраиваемый язык
для программного доступа к объектам приложений. Наиболее широкое
применение находит в браузерах как язык сценариев для придания
интерактивности веб-страницам.
Текст программы на языке JavaScript вставляется непосредственно в файл
HTML-страницы в теги <script language="JavaScript"> …
Конструкции языка JavaScript использованы при разработке сайта
Интернет-магазина «Comp-Reed» для реализации следующих возможностей
интерфейса:
1) создания слайд-шоу: меняющихся фотографий с текстом для
привлечения внимания покупателей;
48
2) для визуализации эффектов: выезжающий текст, разворачивающееся
меню, раскрывающиеся списки;
3) использование скрипта отбора товаров в корзину заказов, расчета
стоимости заказа;
4) обработки действий пользователя на страницах, переход по ссылкам;
5) проверки отправки данных пользователя на сервер (проверка телефона,
адреса почты).
Пример функции Java Script для проверки отправки заказа, если не
выбран товар в корзине, показан ниже:
setTimeout(function(){
var datacalc = {derivalPoint: document.querySelector
('[title="$:/constant/_gorodOtprav"]').getAttribute('dl') , arrivalPoint:
document.getElementById('arrivalPoint').value , sizedWeight: vesKgallTov
.toFixed(1), sizedVolume: obM3allTov.toFixed(1) };
if(vesKgallTov==0) {costTKDL = “в корзине нет товаров для расчета“};
document.getElementById('dostav_cost').innerHTML=costTKDL;
handler();};
2.2.4 Разработка алгоритма работы Интернет-магазина
Заходя на сайт интернет – Интернет-магазина «Comp-Reed» открывается
главная страница, где посетитель видит интернет-витрину со специальными
предложениями, панель навигации, каталог товаров и содержание корзины.
Переход к необходимому товару возможен по разделам, по категориям,
либо просто нажав на картинку соответствующего товара.
Определив товар для покупки, пользователь может сразу положить товар
в корзину, выбрав нужно количество товара (рис.2.6).
Рисунок 2.6. Добавление товаров в корзину
49
В процессе подбора товаров покупатель может удалять или добавлять
товары в корзине, менять необходимое количество товаров в корзине,
После осуществления заказа покупатель может перейти на страницу
«Корзина» для отправки выбранного заказа (рис.2.7).
Рисунок 2.7. Работа с корзиной
Виртуальная покупательская корзина содержит заказ с товарами,
добавленными покупателем, позволяет произвести пересчет или удаление
товаров и перейти к окончательным фазам Интернет-продажи. На этом этапе
производится регистрация покупателя и уточнение адреса доставки.
Если покупатель является незарегистрированным пользователем, то он
может зарегистрироваться и заполнить информацию о себе, которая в
дальнейшем будет автоматически подставляться в форму заказа в корзине, а
также в форму обратной связи. После этого нажав на кнопку «сделать заказ»
заказ будет оформлен.
Одновременно с этим покупателю высылается письмо на электронную
почту с подтверждением, и в кратчайшее время с покупателем свяжется
менеджер магазина, который будет курировать данный заказ.
50
Схема обработки заказа покупателем в Интернет-магазине приведена на
рисунке 2.8.
Рисунок 2.8. Схема заказа в Интернет-магазине
Алгоритм функционирования Интернет-магазина «Comp-Reed» показан в
приложении 2.
2.3. Разработка базы данных
Для того, чтобы информация о заказчиках, зарегистрированных на сайте,
хранилась на веб-сервере, необходимо обеспечить хранение записей в таблицах
базы данных сайта.
Кроме этого необходимо обеспечить хранение информации о товарах
Интернет-магазина, их ценах, моделях техники, моделях и производителях
комплектующих.
Для хранения информации в базе данных необходимо предварительно
определить группы и параметры данных, свеcти эту информацию в
реляционные таблицы и установить между ними связи. Кроме того, необходимо
задать первичные ключи и индексы, нормализовать структуру. Конечным
Каталог товаров
Виртуальная корзина
Виртуальная корзина
Выбрать товар,
добавить в
корзину
Перейти в корзину
Пересчитать
корзину
Регистрация нового
покупателя
Уточнение адреса
доставки и способа
оплаты
Параметры заказа
Регистрация
Пользователь
зарегистрирован
Сделать заказ
51
результатом проектирования будет схема БД и типовой сценарий SQL на ее
основе.
Структура базы данных Интернет-магазина в СУБД My SQL
представлена в таблицах 2.1-2.6.
Таблица 2.1
Структура таблицы group (Группы товаров)
Поле
Тип
Null
По умолчанию
Id_gr
int(6)
Нет
Auto increment
name
text
Да
NULL
Таблица 2.2
Структура таблицы manufacturer (Производитель техники)
Поле
Тип
Null
По умолчанию
Id_pr
int(8)
Нет
Auto increment
name
varchar(255)
Да
NULL
country
varchar(255)
Да
NULL
Таблица 2.3
Структура таблицы product (Товары)
Поле
Тип
Null
По умолчанию
Id_prod
int(10)
Нет
Auto increment
Name
varchar(255)
Да
NULL
Price
float
Да
NULL
Id_pr
int(6)
Да
NULL
Id_gr
int(6)
Да
NULL
Spec
varchar(255)
Да
NULL
Photo
varchar(255)
Да
/images/
Таблица 2.4
Структура таблицы clients
Поле
Тип
Null
По умолчанию
Id_cl
int(10)
Нет
Auto increment
fio
varchar(255)
Да
NULL
address
varchar(255)
Да
NULL
tel1
varchar(15)
Да
NULL
tel2
varchar(15)
Да
NULL
mail
varchar(255)
Да
NULL
52
Таблица 2.5
Структура таблицы oplata (Способы оплаты)
Поле
Тип
Null
По умолчанию
Id_opl
int(3)
Нет
Auto increment
name
varchar(255)
Да
NULL
Таблица 2.6
Структура таблицы sale
Поле
Тип
Null
По умолчанию
Id_sale
int(255)
Нет
Auto increment
Id_cl
int(10)
Нет
NULL
date
date
Нет
NULL
Id_prod
int(10)
Нет
NULL
kolvo
int(10)
Нет
1
summa
float
Да
0
dostavka
text
Да
NULL
Id_opl
int(3)
Да
NULL
program
text
Да
NULL
note
varchar(255)
Да
NULL
База данных с именем CompReed электронного магазина «Комп-Рид»
разработана в СУБД MySQL (рисунок 2.9).
Рисунок 2.9. Структура базы данных CompReed
База данных создавалась с помощью утилиты phpMyAdmin, входящей в
пакет разработчика Denwer.
53
PHPMyAdmin – это практически стандартный инструмент для работы с
базами данных, предоставляемый большинством хостинг-провайдеров,
позволяющий в удобном графическом интерфейсе работать создавать базы
данных, вносить в них изменения, менять настройки.
Принцип взаимосвязи базы данных и страниц сайта заключается в
следующем: создается HTML-каркас сайта и в определенные места каркаса
(например, в область основного содержимого) посредством PHP-скриптов из
таблиц базы данных на основе SQL-запросов выводится информация, которая и
формирует контент сайта.
В таблице clients должны храниться данные клиента: его ФИО, телефон,
адрес, адрес электронной почты, которые необходимы для связи менеджера с
покупателем.
Пример структуры таблицы clients показан на рисунке 2.10.
Рисунок 2.10. Структура таблицы clients базы данных CompReed
Уникальный идентификатор Id однозначно определяет запись в таблице и
является первичным ключом. Для каждого идентификатора установлено
свойство «AUTO_INCREMENT» – автонумерация.
Взаимодействие HTML-страниц и таблиц базы данных Compreed
осуществляется с помощью языка PHP. В дистрибутив PHP входит расширение,
содержащее встроенные функции для работы с базой данных MySQL.
При создании сайта Интернет-магазина «Comp-Reed» для обработки
запросов к базе данных Compreed были созданы страницы php двух типов:
54
1) вывод формы HTML с полями для добавления реквизитов заказа –
страница registration.php;
2) добавление записей в базу данных – страница add.php.
Чтобы построить интерфейс для добавления информации в эту таблицу,
нужно ее структуру (т.е. набор ее полей) отобразить в html-форму. Для этого
необходимо выполнить следующие этапы:
установка соединения с БД;
получение списка полей таблицы;
отображение полей в html-форму;
запись в БД данных, введенные в форму.
Для установления соединения с базой данных используется функция
mysql_connect.
Данная функция устанавливает соединение с сервером MySQL и
возвращает указатель на это соединение или FALSE в случае неудачи.
Соединение с сервером закрывается при завершении исполнения скрипта,
если оно до этого не было закрыто с помощью функции mysql_close().
После установки соединения нужно выбрать базу данных, с которой
будем работать. Наши данные хранятся в базе данных Compreed. В PHP для
этого существует функция mysql_select_db.
Эта функция возвращает TRUE в случае успешного выбора базы данных
и FALSE – в противном случае.
Для реализации SQL-запросов в PHP используется функция mysql_query.
Эта функция применяется для отправки серверу SQL-запросов. Функция
возвращает дескриптор запроса в случае успеха и false в случае неудачного
выполнения запроса.
Функция mysql_fetch_array возвращает значения полей в виде
ассоциативного массива, в качестве аргумента принимает дескриптор запроса,
возвращаемый функцией mysql_query.
Фрагмент HTML-кода для отправки данных о регистрации заказа клиента
(файл add.php) показан в приложении 3.
55
2.4. Описание пользовательского интерфейса
Обязательным условием работы с web-сайтом Интернет-магазина «Comp-
Reed» является наличие подключения к интернету.
Загрузка веб-сайта осуществляется путем открытия любого из следующих
браузеров: Opera, Mozilla Firefox, Internet Explorer, Google Chrome. После ввода
адреса домена браузер загружает главную страницу сайта.
Заходя на сайт Интернет-магазина «Comp-Reed» открывается главная
страница, где посетитель видит интернет-витрину со специальными
предложениями, панель навигации, каталог товаров и содержание корзины
(рисунок 2.11).
Рисунок 2.11. Главная страница Интернет-магазина «CompReed»
Переход к необходимому товару возможен по разделам, по категориям,
либо просто нажав на картинку соответствующего товара. Определив товар для
покупки, пользователь может сразу положить товар в корзину, выбрав нужно
количество товара.
Для перехода по страницам веб-сайта можно использовать верхнюю или
боковую панели меню.