Реализация раздела сайта: Контакты

Задача:сформировать раздел сайта ^{Контакты}.

- В верхней части должен отображаться заголовок: ^{Главное представительство!} Под заголовком должен располагаться текст

с указанием номеров телефонов, адреса и электронной почты.

- Внешний вид заголовка и текста должен в точности соответствовать разделу сайта ^Товары и ^{Главная}.

- Фрагмент ^HTML-разметки необходимо поместить в таблицу базы данных^razmetka, в строку с ^id=7

- При переходе пользователя в раздел ^{Контакты}- ^HTML-разметка раздела должна выводиться при помощи ^PHP.

Задача будет реализована по методике создания разделаГлавная. В файлеindex.php, внутри тега div с идентификатором sheet2 и до PHP-вставки добавим разметку для раздела Контакты:

^{<h1 class="h1_opisan">Главное представительство</h1>}

^<br/>

^{<div class="div_opisan">}

^{+7 (495) 000-00-00<br/>}

^{+7 (499) 000-00-00<br/>}

^<br/>

^{Адрес: Москва, проспект Виннипуха, дом 7<br/>}

^<br/>

^{E-mail: edu@1c.ru<br/>}

^<br/>

^</div>

Формирование кода выполнено так же, как и для раздела Главная. Обратите внимание на тег <br/>, который используется для перехода на следующую строку и создания дополнительных отступов.

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

Теперь разметка разделаКонтактыготова! Переместим разметку из файлаindex.phpв таблицу базы данных razmetkaв строку таблицы с id=7 (см. рис. 10.9):

Рис. 10.9

Как и для раздела Главная, в PHP-вставку добавим вывод раздела Контакты при его выборе пользователем:

<?php

// Получаем номер раздела меню

$id_menu = getIdMenu();

if ($id_menu==1) // Если номер: 1- Товары

{

// Выводим описание товаров

makeOpisan();

}

else if ($id_menu==0) // Если номер: 0 - Главная страница

{

// Получаем разметку по номеру

getHTML(6);

}

^{else if ($id_menu==3) // Если номер: 3 - Контакты}

^{

^{// Получаем разметку по номеру}

^getHTML(7);

^}

?>

Добавленный блок кода работает аналогично предыдущему!

Посмотрим в браузере на результат. Перейдем в раздел Контакты, отображается созданный раздел (см. рис.10.10):

Рис. 10.10

Немного оJavaScript

Мы уже знакомились с языком программирования JavaScriptи выполняли некоторые задачи с использованием этого языка.

Язык JavaScriptявляется отдельным языком и имеет с Javaобщего не более, чем с языком PHP или языком ActionScript (язык платформы Flash).

Значение языка JavaScriptв веб-разработке достаточно большое. Из JavaScriptможно получить доступ ко всем HTML-тегам и CSS-свойствам веб-страницы, также отреагировать на различные действия пользователя по отношению к просматриваемой веб-странице.

Программный код JavaScriptвыполняется браузером! Рассмотрим общую схему веб-проекта(см. рис. 10.11):

Рис. 10.11

Веб-сайт находится на веб-сервере, там же находится база данных.Программный код PHPвыполняется на веб-сервере.Получается так, что для пользователя,открывшего сайт через браузер, база данных и код PHPявляются недоступными. PHPобращается к базе данных, формирует веб-страницу и результат его деятельности передается в браузер пользователя. В результате HTML, CSS, все файлы картинок,Flash-ролики,программный код JavaScript передаются в браузер пользователя.Браузер на основании полученного HTML и CSSвыстраивает страницу,вставляет в страницу полученные изображения и Flash-ролики и выполняет код JavaScript. Для обработкиHTML и CSS браузер использует так называемый "движок браузера"–это сложная программная часть, которая позволяет отобразить страницу на основании HTMLи CSS. Для выполнения кодаJavaScript в браузере имеется интерпретатор.Пользователь сайта может просмотретьHTML, CSS и кодJavaScript. Поэтому код JavaScriptявляется ненадежным, нельзя возлагать на JavaScriptважные проверки,например, такие как проверки паролей.

Код PHP,в отличие отJavaScript, является надежным, потому что выполняется на веб-сервере. В браузер пользователя код PHP не передается!Поэтому все важные проверки выполняются из PHP.

Если сравнить JavaScript c Flash, то во многом их предназначение схоже. Рекламный баннер можно создать как при помощи Flash, так и с помощьюJavaScript.Взаимодействие с пользователем можно выполнять при помощи любой из этих технологий.

Отличия Flash отJavaScript:

1. Flashвыполняется при помощи виртуальной машины Flash Player, а JavaScriptвыполняется браузером.

2. JavaScriptимеет прямой доступ ко всем HTML-тегам страницы, а Flashявляется отдельным приложением, которое вставляется в веб-страницу.

3. JavaScript поддерживается мобильными устройствами, а Flash, как правило,нет.

Выбор между Flashи JavaScriptзависит от конкретной задачи.

В веб-разработке также имеется понятие события и обработки события (как и в разработке обычных приложений на Java).Обработка событий осуществляется с помощью JavaScript.

Пример:пользователь наводит курсор на пункт меню–из JavaScript можно отследить это событие и отреагировать.

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

Рассмотрим несколько видов событий:

onclick- при нажатии (клавишей Enter или левой кнопкой мыши)

ondblclick-двойной щелчок кнопкой мыши

onkeydown - при нажатии клавиши

onkeyup- при отпускании клавиши

onmousedown-при нажатии кнопки мыши

onmouseup - при отпускании кнопки мыши

onmousemove-при перемещении курсора мыши

onmouseover-при входе курсора мыши внутрь

onmouseout - при выходе курсора мыши наружу

С подобными событиями мы уже работали из Java.

Для подключения обработчика события к тегу, нужно добавить атрибут с выбранным событием:

<body^{onkeydown="alert('OK!');"} >

Данный пример подключает событие при нажатии на клавишу.Значением атрибута в двойных кавычках– является кодJavaScript:

alert('OK!');

Вывод сообщения пользователю. Обработчик события,подключенный к тегу body,работает для всей веб-страницы.Обратите внимание, что кавычки, записанные внутри двойных кавычек –записываются в виде одиночных кавычек!

Как и код CSS, программный кодJavaScriptрекомендуется записывать в отдельном файле. Файлы с JavaScriptимеют расширение: JS. Добавим файл JavaScript к нашему проекту.Для этого нажмем на заголовок проектаpuhправой кнопкой мыши. В появившемся меню выберем:New, Прочие . . . (см. рис. 10.12)

Рис. 10.12

В появившемся окне нужно открыть ветвь JavaScriptи выбрать JavaScript Source File (см. рис. 10.13).

Рис. 10.13

Нажимаем кнопку Далее. В следующем окне вводим имя файла: puh.js и нажимаем Готово(см. рис. 10.14):

Рис. 10.14

К проекту добавится новый файл: puh.js(см. рис. 10.15):

Рис. 10.15

В этом файле мы будем размещать код JavaScript. Для подключения файла с JavaScript используется тегscript:

^{<script type="}text/javascript^{" src="}puh.js^{"> </script>}

В атрибуте src указывается путь к файлу puh.js. Этот тег следует разместить внутри тега head в файле index.php. Выполним это действие (см. рис. 10.16)

Рис. 10.16

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

^<noscript>

^{ВключитеJavaScript!}

^</noscript>

Содержимое этого тега будет выводиться на страницу при выключенном JavaScript.

Если сайт не может правильно функционировать без JavaScript, то при входе на сайт, в теге head,необходимо разместить проверку на включение/выключение JavaScriptв браузере:

<head>

^<noscript>

^{<meta http-equiv="refresh" content="0;url=no_js.php">}

^</noscript>

</head>

При отключенном JavaScript произойдет переход по адресу, указанному в url, в данном случаеno_js.php. На странице no_js.phpнужно сообщить пользователю об отсутствииJavaScript. Таким образом, пользователь не сможет зайти на сайт, пока не включит JavaScript. Такая проверка имеется на сайтах социальных сетей,которые интенсивно используют JavaScript. Стоит отметить,что в большинстве случаев JavaScriptвключен в браузере!

Рассмотрим некоторые способы применения JavaScript. Если у тега имеется атрибут id, то к нему можно обратиться по идентификатору:

// Находим тег по идентификатору id

var tmp = document.getElementById("id_menu");

Служебное слово: varговорит о том, что объявляется переменная. Тип переменной не указывается, потому что JavaScriptиспользует"мягкую типизацию", как и PHP.document –это обращение к веб-странице. Функция getElementById()получает тег по идентификатору, указанному внутри кавычек в скобках. Если тег найден, то работать с ним можно через переменнуюtmp:

^{// Изменяем значение атрибута src - расположение}

tmp.src = "img/fon.png";

Через оператор "." (точка)можно обратиться к атрибуту тега и присвоить ему необходимое значение. В данном примере атрибуту srcприсваивается путь к изображению.

Для изменения CSSпосле имени переменной указывается style,затем через оператор "." (точка) указывается нужное свойство. Ниже приведен пример указания CSS-свойствиз кода CSS и из JavaScript.

Из CSS:

^#id_menu

^{

^{background-color: red;}

^{width: 300px;}

^}

Из JavaScript:

^{// Находим тег по идентификатору id}

^{var tmp = document.getElementById("id_menu");}

^{// Изменяем CSS -ширина}

^{tmp.style.width = "300px";}

^{// Изменяем CSS - цвет фона}

^{tmp.style.backgroundColor = "red";}

Обратите внимание, что свойство CSS background-colorв JavaScriptзаписывается слитно: backgroundColor, при этом первая буква второго слова - заглавная!

Далее мы добавим два визуальных эффекта к нашему сайту.