Опубликован: 08.05.2007 | Доступ: свободный | Студентов: 12882 / 3013 | Оценка: 4.13 / 3.77 | Длительность: 12:58:00
Дополнительный материал 1:

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

< Лекция 12 || Дополнительный материал 1: 123456789101112 || Дополнительный материал 2 >

Определение критериев продукта

Кроме выбора категорий продуктов для поиска названия программного продукта, посетители сайта eCommerce могут использовать общий поиск по ключевым словам.


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

Текстовое поле ввода кодируется в форме, находящейся в файле menu.inc. Форма выводит текстовое поле вместе с кнопкой для отправки информации формы на страницу search.php.

<form action="search.php" method="get">
  <span class="head4">Search for:</span><br>
  <input type="text" name="Criterion" class="textbox" size="12" 
    value="<?php echo $_GET[Criterion]?>">
  <input type="submit" class="buttonS" name="Submit" value="Go"
    onMouseOver="OverMouse(this)"; onMouseOut="OutMouse(this)">
</form>

Передача формы в виде строки запроса

В этой форме необходимо обратить внимание, прежде всего, на атрибут method="get". До сих пор для передачи информации формы использовался метод POST. Этот метод передает пары имя/значение из формы на сервер как отдельный поток данных в URL запроса атрибута ACTION. В данном случае метод GET передает пары имя/значение как строку запроса, присоединенную к URL в параметре ACTION.

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

search.php?Criterion=value

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

search.php?Category=value   из ссылки 
search.php?Criterion=value   из формы

Отметим также, что текстовое поле имеет значение строки запроса Criterion, которая передается на сервер, когда посылается форма:

<input type="text" name="Criterion" class="textbox" size="12" 
  value="<?php echo $_GET[Criterion]?>"

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

Кнопки форматирования

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


Начальный вид кнопки задается спецификацией таблицы стилей. Определяется класс таблицы стилей для задания ширины кнопки, выравнивания текста, типа и размера шрифта, цвета фона и цвета текста:

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

Эти настройки применяют, задавая атрибут CLASS, которому присваивается имя этого класса в теге кнопки:

<input type="submit" class="buttonS" name="Submit" value="Go"...>

Изменения в спецификациях стиля оформления происходят, когда указатель мыши перемещается над кнопкой и когда он смещается с кнопки. Эти изменения активируются операторами JavaScript, кодируемыми в теге кнопки:

<input type="submit" class="buttonS" name="Submit" value="Go"
  onMouseOver="OverMouse(this)" onMouseOut="OutMouse(this)">

События onMouseOver и onMouseOut активируют вызовы функций OverMouse() и OutMouse(), соответственно, передавая ссылку self на объект (эту кнопку), содержащий эти обработчики событий. Эти функции затем получают ссылку на эту кнопку отправки для применения сценария.

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

Как было сделано для заголовка и меню, которые присутствуют на всех страницах, код JavaScript для активации кнопок находится во включаемом файле, который можно импортировать на любую страницу. Обычный метод импортирования кода JavaScript состоит во включении его в раздел <HEAD> страницы, чтобы процедуры загружались и были доступны для активации до загрузки раздела <BODY>. Поэтому все страницы сайта eCommerce включают директиву

require(jscript.inc)

в своих разделах <HEAD>. Код файла jscript.inc показан ниже:

jscript.inc
<script language="javascript">
function OverMouse(button)
{
  button.style.backgroundColor="lightgreen"
  button.style.color='darkgreen'
  button.style.cursor='hand'
}
function OutMouse(button)
{
  button.style.backgroundColor="seagreen"
  button.style.color='white'
}
</script>

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

Кодирование файлов INCLUDE

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

Форматы страниц

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

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

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

  <?php require('header.inc') ?>

</div>

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

  <?php require('menu.inc') ?>

</div>

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

  — основной контент страницы —

</div>


</body>
</html>
Пример I.4.

Файл header.inc

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

header.inc

<span style="font-size:32pt; font-weight:bold">softWarehouse.com</span>

Файл menu.inc

Файл menu.inc импортируется в крайний левый раздел всех страниц, чтобы создать общедоступное меню поиска продуктов. Полный код этого файла, различные части которого были рассмотрены ранее, показан ниже.

menu.inc

<a href="home.php">Home</a>
<a href="shopcart.php">Shopping Cart</a>
<br>
<br>
<span class="head4">Software Categories:</span>
<table>
<?php

//Создание соединения с данными 
		
  $conn = odbc_connect
  ('Driver={Microsoft Access Driver (*.mdb)}; DBQ=c:\inetpub\wwwroot\PHPTutorial\Ecommerce\databases\ecommerce.mdb','','');
		
//Формирование оператора SQL SELECT 
		
  $sql = "SELECT DISTINCT ItemType FROM Products ORDER BY ItemType";
  
//Выполнение оператора SQL и создание множества записей 
		
  $rs = odbc_exec($conn, $sql);
  
//Цикл по множеству записей и ввод необходимых записей 

 while($row = odbc_fetch_array($rs)) 
	
	{
echo "<tr style=\"color:seagreen; line-height:8pt; font-size:9pt\"
			onMouseOver=\"this.style.backgroundColor='lightgreen'; 
			this.style.color='darkgreen'; this.style.cursor='hand'\"
			onMouseOut=\"this.style.backgroundColor='white'; 
			this.style.color='seagreen'\"
			
			onClick=\"location.href='search.php?Category=$row[ItemType]'\">
			
			
			<td>$row[ItemType]</td>
		</tr>";
		}

//Закрытие соединения с БД

odbc_close($conn);

?>
</table>

<form action="search.php" method="get">
  <span class="head4">Search for:</span><br>
  <input type="text" name="Criterion" class="textbox" size="12" 
    value="<?php echo $_GET[Criterion]?>">
  <input type="submit" class="buttonS" name="Submit" value="Go"
    onMouseOver="OverMouse(this)"; onMouseOut="OutMouse(this)">
</form>
Пример I.5.

Файл jscript.inc

Наконец, ниже воспроизводится файл jscript.inc.

jscript.inc
<script language="javascript">
function OverMouse(button)
{
  button.style.backgroundColor="lightgreen"
  button.style.color='darkgreen'
  button.style.cursor='hand'
}
function OutMouse(button)
{
  button.style.backgroundColor="seagreen"
  button.style.color='white'
}
</script>

Важно отметить, что файлы INCLUDE содержат только показанный здесь код. В них нет тегов <HTML> или <BODY> либо какого-либо другого кода, кроме того, который нужен для определенных целей файла. Эти файлы импортируются в полностью сформированную страницу HTML, и можно создать проблемы с выводом, если включить в эти файлы больше информации, чем требуется.

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

< Лекция 12 || Дополнительный материал 1: 123456789101112 || Дополнительный материал 2 >
Максим Матросов
Максим Матросов
Наталья Джабасова
Наталья Джабасова