Приложение PHP E-Commerce

Общий проект сайта

Сайт e-Commerce

В данном разделе последовательно рассматривается процесс разработки коммерческого сайта Web. В качестве примера используется база данных товаров eCommerce.mdb. Товары будут предложены для онлайн торговли. С помощью этого примера будут рассмотрены все основные вопросы разработки онлайн магазина. Следующая иллюстрация представляет страницы и механизмы связей, которые составляют типичный сайт е-коммерции. Основные части этой системы описаны ниже.

увеличить изображение

Страница home.php

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

Страница search.php

Процедуры поиска создают страницу, перечисляющую все товары в категории или все товары, которые соответствуют критериям поиска. Когда пользователь выбирает определенную категорию или задает слово для поиска, эта информация передается на страницу search.php, используемую для поиска товаров.

Страница detail.php

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

Страница shopcart.php

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

Страница creditcheck.php

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

Страница ordercapture.php

После получения кода возврата от компании кредитных карт остаются завершающие задачи оформления — они происходят скрытно на этой странице, и одной из них является создание нового идентификационного номера заказа на тот случай, если посетитель захочет продолжить покупки. Товары в корзине покупателя заказчика удаляются, и создаются заголовок заказа и другие записи для создания постоянной записи заказа покупателя. Эти записи можно использовать для восстановления заказа в будущем. Наконец создается подтверждение e-mail, если заказчик предоставил адрес e-mail.

Страница salesorder.php

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

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

Общая структура страниц

Здесь представлена общая модель компоновки всех страниц сайта Web eCommerce. Разделы Content (Содержимое) страниц будут различаться в зависимости от функции страницы. Однако разделы Header (Заголовок) и Menu (Меню) одинаковы для всех страниц. Они создают общий внешний вид страниц, плюс раздел Menu предоставляет общее меню ссылок для перемещения и другие функции, которые доступны на всех страницах.

Этот сайт использует свойства каскадных таблиц стилей (CSS) для форматирования страниц и управления их представлением. Здесь будут даны некоторые общие рекомендации без излишних подробностей. Существует много специальных руководств по CSS, где можно найти дополнительную информацию об их применении.

Код XHTML, задающий структуру всех страниц, имеет следующий вид:

<html>
<head>
  <title>Сайт eCommerce </title>
  <link href="stylesheetEC.css" rel="stylesheet">
  require("jscript.inc")
</head>
<body>

<div style="position:absolute; top:0px; left:0px; width:780px; 
  background-color:seagreen; color:white; padding:5px">

  require("header.inc")

</div>

<div style="position:absolute; top:75px; left:10px; width:175px">

  require("menu.inc")

</div>

<div style="position:absolute; top:75px; left:200px; width:550px">

  — основное содержание страницы (контент) —

</div>

</body>
</html>

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

Использование файлов INCLUDE

Разделы Header и Menu не кодируются непосредственно на всех страницах. Используемый код содержится в документах header.inc и menu.inc, которые импортируются (включаются) на все страницы, когда к ним обращается браузер.

Код, содержащийся во внешних документах, копируется или включается на страницу PHP с помощью одного из следующих операторов:

require('FileName') 
include('FileName')

Оба оператора выполняют одно и то же действие, однако оператор require() возвращает неисправимую ошибку при неудаче, в то время как оператор include() возвращает только предупреждение.

В обеих конструкциях FileName является именем файла, содержащим код, который копируется в это место документа. Включаемые файлы могут содержать код XHTML, код PHP, код JavaScript, спецификации таблиц стилей или обычный текст.

При использовании такой техники нет необходимости дублировать общий код на каждой странице. Код можно поместить в отдельный файл, а затем копировать на страницы по мере необходимости.

Эта техника работает только для страниц .php (а не страниц .htm ). Возможно, имеет смысл задавать имена всех страниц с расширением .php, независимо от того, содержат ли они сценарий или нет.

Кодирование документов INCLUDE

Документы, включаемые на страницу, являются простыми текстовыми документами, содержащими вставляемый код. Имя файла и расширение этого документа могут быть произвольными. Расширение ".inc" используется здесь для идентификации документов header.inc и menu.inc как файлов, которые вставляются на страницу. Такие имена, как header.txt и menu.txt или header.php и menu.php, также будут работать. Мы рассмотрим кодирование этих документов немного позже. Существует еще один включаемый файл с именем jscript.inc, который копируется в раздел <head> каждой страницы. Этот документ содержит код JavaScript для управления поведением кнопок. Мы рассмотрим этот код при обсуждении отдельных страниц.

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

Использование таблиц стилей

Как отмечалось выше, таблицы стилей интенсивно используются для управления форматированием страниц. Для этой цели для сайта подготовлен внешний документ stylesheetEC.css и сохранен как стандартный текстовый документ. Каждая страница сайта применяет стили, соединяясь с этим документом с помощью тега <link> раздела <head>:

<html>
<head>
  <title>Page Title</title>
  <link type="text/css" href="stylesheetEC.css" rel=stylesheet">
</head>

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

stylesheetEC.css

body
  {margin:0px; background-color:white; font-family:arial; font-size:9pt}
td
  {font-family:arial; font-size:9pt}
th
  {font-family:arial; font-size:9pt; text-align:center;
   background-color:seagreen; color:white}

.head1
  {font-family:times new roman; font-size:18pt; font-weight:bold; 
   color:seagreen}
.head2
  {font-family:times new roman; font-size:16pt; font-weight:bold; 
   color:seagreen}
.head3
  {font-family:times new roman; font-size:14pt; font-weight:bold; 
   color:seagreen}
.head4
  {font-family:times new roman; font-size:12pt; font-weight:bold; 
   color:seagreen}

a:link, a:active, a:visited 
  {text-decoration:none; color:seagreen}
a:hover
  {text-decoration:none; color:darkgreen; background-color:lightgreen}

.buttonS
  {width:35px; text-align:center; font-family:arial; font-size:9pt; 
   background-color:seagreen; color:white}
.buttonM
  {width:70px; text-align:center; font-family:arial; font-size:9pt; 
   background-color:seagreen; color:white}
.buttonL
  {width:100px; text-align:center; font-family:arial; font-size:9pt; 
   background-color:seagreen; color:white}

.textbox
  {font-family:arial; font-size:10pt}
.qtybox
  {font-family:arial; font-size:10pt; text-align:right}

.small
  {font-family:arial; font-size:8pt}