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

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

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

Выбор категорий продуктов

Все страницы сайта eCommerce содержат раздел ссылок для поиска информации о программном обеспечении, содержащейся в таблице Products базы данных eCommerce.mdb.


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

Файл menu.inc

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


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

Создание ссылок на категории

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

<span class="head4">Категории программ:</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>
Пример I.3.

Здесь делается соединение с базой данных и извлекается множество записей из таблицы Products. Это множество записей содержит уникальные значения, которые находятся в поле ItemType, получаемые при использовании оператора SQL SELECT с параметром DISTINCT. Каждая запись в множестве записей $rs содержит одно значение – один из типов объектов в поле. Теперь необходимо просто выполнить итерации по множеству записей, форматируя ссылки для значений категорий.

Выделение строки таблицы и соединение

Значения ItemType выводятся в таблице, чтобы воспользоваться средствами таблицы стилей, которые предоставляют интересный метод присвоения ссылок ячейкам таблицы, а не самим значениям. Значения ItemType появляются в таблице в следующем виде и выделяются, когда указатель мыши перемещается по записям (вокруг таблицы показана граница, чтобы эффект был более заметен):


Ссылки делаются из ячеек таблицы – на самом деле из строк таблицы – а не из текстовых строк, появляющихся внутри ячеек. Это позволяет присвоить выделение и визуальные индикаторы строкам, когда указатель мыши перемещается по ним, а ссылки активируются при щелчке на строках таблицы, содержащих данные, а не на самих данных. Такой метод соединения из строк таблицы более четко иллюстрируется списком продуктов, появляющимся на странице search.php. Такая же техника используется здесь, хотя эффект не такой впечатляющий, как выделение и соединение из нескольких ячеек в строке.

Эти действия по выделению и соединению создаются следующим кодом для строк таблицы. Особенно отметим, что код находится внутри тега <tr>, так что результат проявляется во всех ячейках строки (хотя в данном конкретном случае в строке имеется только одна ячейка).

<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>

Свойства таблицы стилей используются для создания начального вида строк в ячейках. Свойство color задает цвет текста, выводимого в ячейках, свойство line-height задает высоту текста (и соответственно высоту самой ячейки), а свойство font-size задает размер шрифта текста.

Кроме этих статических свойств необходимо добавить свойства, которые изменяются, когда посетитель взаимодействует с ячейками. Мы хотим, чтобы "что-то происходило", когда посетитель перемещает курсор над ячейками, смещается с ячеек и щелкает в ячейке. Описанные события являются фактически событиями сценариев, которые в языке JavaScript называются onMouseOver, onMouseOut и onClick. Поэтому эти события можно использовать для включения изменений в стилях оформления ячеек таблицы.

Теги XHTML со сценарием

Процедуры JavaScript добавляются в теги <tr> для задания различных стилей и для включения ссылок, когда посетитель выполняет одно из трех указанных выше действий. Эти события и действия перечислены в следующей таблице.

Событие Действие
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...'

Когда мышь перемещается поверх строки таблицы, включается событие onmouseover и выполняются три оператора JavaScript. Цвет фона (свойство backgroundColor ) строки задается как светло-зеленый ( lightgreen ), цвет текста (свойство color ) задается как темно-зеленый ( darkgreen ), а форма курсора (свойство cursor ) задается в форме ладони. Когда курсор мыши смещается со строки таблицы, включается событие onmouseout и свойства возвращаются к своим исходным значениям.

Общий формат выполнения команд JavaScript внутри тега HTML имеет вид

EventName = "statement1 [; statement2] [; statement3]..."

То есть за именем onmouseover, onmouseout, onclick или другим таким именем события, для которого будет применяться действие, следует знак равенства и в кавычках список операторов, которые будут выполнены, когда произойдет событие. Несколько операторов разделяются точкой с запятой.

Операторы, используемые для задания свойств, имеют следующий формат,

this.style.property='value'

где style является указанием на задание таблицы стилей, property является формальным именем задаваемого свойства, а значение value (заключенное в кавычки) является конкретным значением для задания этого свойства. Специальное ключевое слово self является ссылкой на себя объекта XHTML, содержащего это задание свойства, в данном случае тег <tr>.

Когда происходит событие onClick, создается ссылка на страницу search.php. Соединение происходит при задании свойству location.href (не тега <tr>, а текущего окна) имени страницы, на которую указывает ссылка. Это задание свойства приводит к замене URL в поле адреса браузера другим URL, в данном случае адресом страницы search.php.

Передача строк запроса

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

onClick="location.href='search.php?Category=$row[ItemType]'"

Когда происходит щелчок на строке таблицы, создается URL в виде

search.php?Category=ItemType

Все строки таблицы содержат различные типы объектов, и это конкретное значение ItemValue присоединяется к URL этой строки. Одна из пар имя/значение

?Category=Business Office
?Category=Database
?Category=Desktop Publishing
?Category=Graphics
?Category=Operating Systems
?Category=Web Development

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

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