Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) — объектная модель, используемая для XML/HTML-документов.
Согласно DOM-модели, документ является иерархией.
Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста — текстовый элемент, и т.п.
Проще говоря, DOM — это представление документа в виде дерева тегов. Это дерево образуется за счет вложенной структуры тегов плюс текстовые фрагменты страницы, каждый из которых образует отдельный узел.
Простейший документ
Построим, для начала, дерево для следующего документа.
Самый внешний тег — <html>, поэтому дерево начинает расти от него.
<html>
<head>
<title>
О лосях
</title>
</head>
<body>
Правда о лосях.
<ol>
<li>
Лось - животное хитрое
</li>
<li>
.. И коварное
</li>
</ol>
</body>
</html>
Корневым элементом иерархии является html. У него есть два потомка. Первый -head, второй — body. И так далее, каждый вложенный тег является потомком тега выше:
На этом рисунке синим цветом обозначены элементы-узлы, черным — текстовые элементы.
Дерево образовано за счет синих элементов-узлов — тегов HTML.
А вот так выглядит дерево, если изобразить его прямо на HTML-страничке:
Кстати, дерево на этом рисунке не учитывает текст, состоящий из одних пробельных символов. Например, такой текстовый узел должен идти сразу после <ol>. DOM, не содержащий таких «пустых» узлов, называют «нормализованным».
Это свойство управляет стилем. Оно аналогично установке стиля в CSS.Верхний тег — html, у него дети head и body, и так далее. Получается дерево тегов:
Атрибуты
В этом примере у узлов есть атрибуты: style, class, id. Вообще говоря, атрибуты тоже считаются узлами в DOM-модели, родителем которых является элемент DOM, у которого они указаны.
Однако, в веб-программировании в эти дебри обычно не лезут, и считают атрибуты просто свойствами DOM-узла, которые, как мы увидим в дальнейшем, можно устанавливать и менять по желанию программиста.
Атрибут есть у элементов-тегов и содержит имя тега в верхнем регистре, только для чтения.
Например,
alert(document.body.tagName) // => BODY
Например, можно установить element.style.width:style
Исходный код этой кнопки:
<input type="button" style="width: 300px" onclick="this.style.width = parseInt(this.style.width)-10+'px'" value="Укоротить на 10px" />
Когда-то это свойство поддерживалось только в IE. Теперь его поддерживают все современные браузеры.Обработчик события onclick обращается в этом примере к свойствуthis.style.width, т.к значением this в обработчике события является текущий элемент (т.е сама кнопка). Подробнее об этом — во введении в события.
Есть общее правило замены — если CSS-атрибут имеет дефисы, то для установкиstyle нужно заменить их на верхний регистр букв.
Например, для установки свойства z-index в 1000, нужно поставить:
element.style.zIndex = 1000
Оно содержит весь HTML-код внутри узла, и его можно менять .innerHTML
Свойство innerHTML применяется, в основном, для динамического изменения содержания страницы, например:
Это свойство задает класс элемента. Оно полностью аналогично html-атрибуту «class».
elem.className = 'newclass'
Для того чтобы получить доступ к определенному элементу используйте document.getElementById.
element = document.getElementById(id);
События JavaScript
В JavaScript, как и других объектно ориентированных языках, определен ряд событий, связанных с элементами документа. Обработчики дают возможность организовать реакцию на возникновение событий из сценария. При этом соответствующий обработчик указывается как атрибут элемента HTML-документа; значением этого атрибута является выражение JavaScript. Например,
— наведение и увод курсора мыши на элемент сопровождаются изменением цвета фона.
<body onUnLoad="alert('окно закрывается!'">
— при попытке пользователя закрыть окно и выгрузить документ выводится сообщение
<img src="cat.jpg" onClick="showPict()">
— при щелчке мышью по изображению выполняется некая функция showPict()
Половина обработчиков поддерживаются практически всеми HTML-элементами ( * ). Некоторые события можно имитировать с помощью соответствующих методов. Ниже приводится список событий согласно спецификации HTML 4.0 и некоторые события, поддерживаемые MS IE. Трактовка браузеров может отличаться от стандарта и в плане применимости обработчика к тем или иным элементам
Обработчик события
Поддерживающие HTML-элементы
Описание
Метод
имитации
onAbort
IMG
Прерывание загрузки изображения
onBlur
A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA
Потеря текущим элементом фокуса, т.е. переход к другому элементу. Возникает при щелчке мышью вне элемента либо нажатии клавиши табуляции
blur()
onChange
INPUT, SELECT, TEXTAREA
Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur
Сброс данных формы ( щелчок по кнопке
<input type=»reset»> )
reset()
onResize
WINDOW
Изменение размеров окна
onSelect
INPUT, TEXTAREA
Выделение текста в текущем элементе
onSubmit
FORM
Отправка данных формы ( щелчок по кнопке
<input type=»submit»> )
submit()
onUnload
BODY, FRAMESET
Попытка закрытия окна браузера и выгрузки документа
* Практически все HTML-элементы : все, за исключением APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE
Математические операторы и их использование.
ОПЕРАТОР
рекомендуемое использование
Стандартное использование
=
x = y
x = y
+=
x += y
x = x + y
-=
x -= y
x = x — y
*=
x *= y
x = x * y
/=
x /= y
x = x / y
%=
x %= y
x = x % y
Логические операторы.
Operator
Description
==
Равно
===
Равные значения/ Равные типоы
!=
Не равно
!==
Не равные значения/ не равные типы
>
Больше чем
<
Меньше чем
>=
Больше или равно чем
<=
Меньше или равно чем
setTimeout и setInterval
Почти все реализации JavaScript имеют внутренний таймер-планировщик, который позволяет задавать вызов функции через заданный период времени.
var timerId = setTimeout(func/code, delay[, arg1, arg2...])
func/codeПараметры:
Функция или строка кода для исполнения.
Строка поддерживается для совместимости, использовать её не рекомендуется.
delay
Задержка в милисекундах, 1000 милисекунд равны 1 секунде.
arg1, arg2…
Аргументы, которые нужно передать функции. Не поддерживаются в IE9-.
Исполнение функции произойдёт спустя время, указанное в параметре delay.
Например, следующий код вызовет alert(‘Привет’) через одну секунду:
function func() {
alert('Привет');
}
setTimeout(func, 1000);
Если первый аргумент является строкой, то интерпретатор создаёт анонимную функцию из этой строки.
То есть такая запись работает точно так же:
setTimeout("alert('Привет')", 1000);
Использование строк не рекомендуется, так как они могут вызвать проблемы при минимизации кода, и, вообще, сама возможность использовать строку сохраняется лишь для совместимости.
Во всех современных браузерах, с учетом IE10,setTimeoutпозволяет указать параметры функции.
Пример ниже выведет «Привет, я Вася» везде, кроме IE9-:
function sayHi(who) {
alert("Привет, я " + who);
}
setTimeout(sayHi, 1000, "Вася");
…Однако, в большинстве случаев нам нужна поддержка старого IE, а он не позволяет указывать аргументы. Поэтому, для того, чтобы их передать, оборачивают вызов в анонимную функцию:
function sayHi(who) {
alert("Привет, я " + who);
}
setTimeout(function() { sayHi('Вася') }, 1000);
Функция setTimeout возвращает идентификатор timerId, который можно использовать для отмены действия.
Синтаксис: clearTimeout(timerId).
В следующем примере мы ставим таймаут, а затем удаляем (передумали). В результате ничего не происходит.
var timerId = setTimeout(function() { alert(1) }, 1000);
clearTimeout(timerId);
Следующий пример при запуске станет выводить сообщение каждые две секунды, пока вы не нажмете на кнопку «Стоп»:setInterval
Метод setInterval имеет синтаксис, аналогичный setTimeout.
var timerId = setInterval(func/code, delay[, arg1, arg2...])
Смысл аргументов — тот же самый. Но, в отличие от setTimeout, он запускает выполнение функции не один раз, а регулярно повторяет её через указанный интервал времени. Остановить исполнение можно вызовом clearInterval(timerId).
<input type="button" onclick="clearInterval(timer)" value="Стоп">
<script>
var i = 1;
var timer = setInterval(function() { alert(i++) }, 2000);
</script>
strip_tags — Эта функция возвращает строку str , из которой удалены HTML и PHP тэги. Для удаления тэгов вам ничего не надо делать, php сделает все на автомате за вас. Вот видите, уже программный код не попадет в базу, а только чистый текст. В данной функции можно сделать исключения.
Как это работает — пример использования strip_tags()
Параграф.
Здесь текст
-------
<p>Параграф.</p>
Здесь текст
Вот теперь можно наблюдать, как это сработало. В первом случае мы очистили все теги, а второй указали, какие не удалять
Trim – очистка пробелов с начала и конца строки
Эта функция возвращает строку str с удаленными из начала и конца строки пробелами. Если второй параметр не передан, trim()удаляет следующие символы:
» » (ASCII 32 (0x20)), символ пробела.
«\t» (ASCII 9 (0x09)), символ табуляции.
«\n» (ASCII 10 (0x0A)), символ перевода строки.
«\r» (ASCII 13 (0x0D)), символ возврата каретки.
«\0» (ASCII 0 (0x00)), NUL-байт.
«\x0B» (ASCII 11 (0x0B)), вертикальная табуляция.
Ну, здесь все просто, ничего сложного не вижу. Двигаемся далее
addslashes — Экранирует спецсимволы в строке (strip slashes)
Описание
string addslashes ( string $str )
Возвращает сроку str , в которой перед каждым спецсимволом добавлен обратный слэш (\), например, для последующего использования этой строки в запросе к базе данных. Экранируются одиночная кавычка (‘), двойная кавычка («), обратный слэш (\) и NUL (байт NULL).
Функция addslashes() часто применяется при записи в базу данных. Предположим, если нужно внести в базу данных имя O’reilly, то символ ‘ должен быть экранирован. В большинстве баз данных для этого используется \, строка будет выглядеть как O\’reilly. Заметьте, что сам символ \ в базу данных записан не будет. Если директива конфигурации magic_quotes_sybase имеет значениеon, то символ ‘ будет экранироваться добавлением еще одного ‘ вместо \.
Директива конфигурации magic_quotes_gpc по умолчанию имеет значение on, при этом функция addslashes() автоматически применяется ко всем данным GET, POST, и COOKIE. Не используйте addslashes() для данных, обработанных magic_quotes_gpc, чтобы избежать двойного экранирования. Для проверки состояния этой директивы используется get_magic_quotes_gpc().
Пример использования addslashes()
<?php
$str = "Is your name O'reilly?";
// выводит: Is your name O\'reilly?
echo addslashes($str);
?>
Если сказать просто, то функция не даст сделать SQL инъекцию в базу данных и не взломает ее.
Это что касается защиты от взлома. Ну, а теперь опишу еще одну функцию, которая запретит вводить определенное количество символов. Берем, к примеру, те же комментарии, допустим, мы не хотим комментарии более 1000 символов. Для этого есть функцияstrlen
strlen — Возвращает длину строки
Пример использования strlen
strlen($str)>1000
В результате php проверит длину строки. Вот в принципе я и описал основные функции обработки строк в php. На этом, пожалуй, завершу данный пост. Есть вопросы — задавайте в комментариях, отвечу обязательно всем. Всем удачи в программировании на php.
Возвращает массив строк, полученных разбиением строки string с использованием delimiter в качестве разделителя.
Пример
<?php
/*
Строка, которая не содержит разделителя, будет
просто возвращать массив с одним значением оригинальной строки.
*/
$input1 = "hello";
$input2 = "hello,there";
var_dump( explode( ',', $input1 ) );
var_dump( explode( ',', $input2 ) );
?>
strpos — Возвращает позицию первого вхождения подстроки
Ищет позицию первого вхождения подстроки needle в строку haystack.
<?php
$mystring = 'abc';
$findme = 'a';
$pos = strpos($mystring, $findme);
// Заметьте, что используется ===. Использование == не даст верного
// результата, так как 'a' находится в нулевой позиции.
if ($pos === false) {
echo "Строка '$findme' не найдена в строке '$mystring'";
} else {
echo "Строка '$findme' найдена в строке '$mystring'";
echo " в позиции $pos";
}
?>
filter_var — Фильтрует переменную с помощью определенного фильтра
Идентификатор (ID) применяемого фильтра. На странице Types of filters приведен список доступных фильтров.
Если не указан, то используется FILTER_DEFAULT, который равнозначен FILTER_UNSAFE_RAW. Это значит, что по умолчанию не применяется никакого фильтра.
options
Ассоциативный массив параметров либо логическая дизъюнкция (операция ИЛИ) флагов. Если фильтр принимает параметры, флаги могут быть указаны в элементе массива «flags». Для фильтра «callback» должен быть указан тип callable. Фильтр «callback» должен принимать один аргумент, значение для фильтрации, и возвращать значение после фильтрации.
<?php
// используйте этот формат для фильтров с дополнительными параметрами
$options = array(
'options' => array(
'default' => 3, // значение, возвращаемое, если фильтрация завершилась неудачей
// другие параметры
'min_range' => 0
),
'flags' => FILTER_FLAG_ALLOW_OCTAL,
);
$var = filter_var('0755', FILTER_VALIDATE_INT, $options);
// для фильтра, который принимает только флаги, вы можете передать их непосредственно
$var = filter_var('oops', FILTER_VALIDATE_BOOLEAN, FILTER_NULL_ON_FAILURE);
// для фильтра, который принимает только флаги, вы так же можете передать их как массив
$var = filter_var('oops', FILTER_VALIDATE_BOOLEAN,
array('flags' => FILTER_NULL_ON_FAILURE));
// callback-фильтр валидации
function foo($value)
{
// Ожидаемый формат: Фамилия, Имена
if (strpos($value, ", ") === false) return false;
list($surname, $givennames) = explode(", ", $value, 2);
$empty = (empty($surname) || empty($givennames));
$notstrings = (!is_string($surname) || !is_string($givennames));
if ($empty || $notstrings) {
return false;
} else {
return $value;
}
}
$var = filter_var('Doe, Jane Sue', FILTER_CALLBACK, array('options' => 'foo'));
?>
Возвращаемые значения
Возвращает отфильтрованные данные или FALSE, если фильтрация завершилась неудачей.
Возвращает TRUE для значений «1», «true», «on» и «yes». Иначе возвращает FALSE.
Если установлен флаг FILTER_NULL_ON_FAILURE, то FALSE возвращается только для значений «0», «false», «off», «no» и «», а NULL будет возвращен для всех небулевых значений.
2
FILTER_VALIDATE_EMAIL
«validate_email»
default
Проверяет, что значение является корректным e-mail.
3
FILTER_VALIDATE_FLOAT
«float»
default, decimal FILTER_FLAG_ALLOW_THOUSAND
Проверяет, что значение является корректным числом с плавающей точкой.
Проверяет, что значение является корректным IP-адресом, при необходимости только для протоколов IPv4 или IPv6, а также отсутствие вхождения в частные или зарезервированные диапазоны.
6
FILTER_VALIDATE_REGEXP
«validate_regexp»
default, regexp
Проверяет значение на соответствие regexp, Perl-совместимому регулярному выражению.
Проверяет значение на корректность URL (в соответствии с » http://www.faqs.org/rfcs/rfc2396), при желании можно указать обязательные компоненты. Имейте в виду, что корректная ссылка может не содержать HTTP-протокол http://, т.е. необходима еще одна проверка, определяющая наличие необходимого протокола у ссылки, например, ssh:// или mailto:. Обратите внимание, что функция работает только с ASCII-ссылками, таким образом, интернациональные доменные имена (содержащие не-ASCII символы) не пройдут проверку.
Замечание:
Начиная с PHP 5.4.11, числа +0 и -0 проверяются оба и как целые и как числа с плвающей точкой (используя FILTER_VALIDATE_FLOAT и FILTER_VALIDATE_INT). До версии PHP 5.4.11 они проверялись только как числа с плавающей точкой (FILTER_VALIDATE_FLOAT).
Если естановлен параметр default, то значение defaultиспользуется, если не прошла валидаци
substr — Возвращает подстроку
Описание
string substr ( string $string , int $start [, int $length ] )
Возвращает подстроку строки string, начинающейся с start символа по счету и длиной length символов.
Список параметров
string
Входная строка. Должна содержать хотя бы один символ.
start
Если start неотрицателен, возвращаемая подстрока начинается с позиции start от начала строки, считая от нуля. Например, в строке ‘abcdef’, в позиции 0 находится символ ‘a’, в позиции 2 — символ ‘c’, и т.д.
Если start отрицательный, возвращаемая подстрока начинается с позиции, отстоящей на start символов от конца строкиstring.
Если string меньше либо содержит ровно start символов, будет возвращено FALSE.
Пример #1 Использование отрицательного параметра start
Если length положительный, возвращаемая строка будет не длиннее length символов, начиная с параметраstart (в зависимости от длины string).
Если length отрицательный, то будет отброшено указанное этим аргументом число символов с конца строки string (после того как будет вычислена стартовая позиция, если start отрицателен). Если при этом позиция начала подстроки, определяемая аргументом start, находится в отброшенной части строки или за ней, возвращается false.
Если указан параметр length и является одним из 0, FALSE или NULL, то будет возвращена пустая строка.
Если параметр length опущен, то будет возвращена подстрока, начинающаяся с позиции, указанной параметром start и длящейся до конца строки.
Пример #2 Использование отрицательного параметра length
Сессии — это на самом деле очень просто. Надо только понимать, для чего они нужны и как устроены. Ответим сначала на первый вопрос.
Возможно Вы знаете, что веб-сервер не поддерживает постоянного соединения с клиентом, и каждый запрос обрабатывается, как новый, без связи с предыдущими.
То есть, нельзя ни отследить запросы от одного и того же посетителя, ни сохранить для него переменные между просмотрами отдельных страниц. Вот для решения этих двух задач и были изобретены сессии.
Собственно, сессии, если в двух словах — это механизм, позволяющий однозначно идентифицировать браузер и создающий для этого браузера файл на сервере, в котором хранятся переменные сеанса.
Подробно расписывать нужду в таком механизме я не буду. Это такие случаи, как корзина покупок в интернет магазине, авторизация, а так же, и не совсем тривиальные проблемы, такие, например, как защита интерактивных частей сайта от спама.
В принципе, довольно несложно сделать собственный аналог сессий, не такой функциональный, как встроенный в PHP, но похожий по сути. На cookies и базе данных.
При запросе скрипта смотрим, пришла ли cookies с определенным именем. Если cookies нет, то ставим ее и записываем в базу новую строку с данными пользователя. Если cookies есть, то читаем из базы данные. Еще одним запросом удаляем из базы старые записи и вот у нас готов механизм сессий. Совсем несложно. Но есть некоторые нюансы, которые делают предпочтительным использование именно встроенного механизма сессий.
Как устроены, и как работают сессии?
Для начала надо как-то идентифицировать браузер. Для этого надо выдать ему уникальный идентификатор и попросить передавать его с каждым запросом. Стыдно признаться, но когда я впервые узнал о сессиях, я думал, что это какой-то особый механизм, некий новый способ общения браузера с сервером — «сессии». Что идентификатор сессии передается каким-то особым образом. Но, разочарование было жестоким…
Сессии используют стандартные, хорошо известные способы передачи данных. Собственно, других-то просто и нет.
Идентификатор — это обычная переменная. По умолчанию ее имя — PHPSESSID.
Задача PHP отправить ее браузеру, чтобы тот вернул ее со следующим запросом. Из уже упоминавшегося раздела FAQ ясно, что переменную можно передать только двумя способами: в cookies или POST/GET запросом.
PHP использует оба варианта.
За это отвечают две настройки в php.ini:
session.use_cookies - если равно 1, то PHP передает идентификатор в cookies, если 0 - то нет.
session.use_trans_sid если равно 1, то PHP передает его, добавляя к URL и формам, если 0 - то нет.
Менять эти и другие параметры сессий можно так же, как и другие настройки PHP — в файле php.ini, а так же с помощью команды ini_set() или в файлах настройки веб-сервера
Если включена только первая, то при старте сессии (при каждом вызове session_start()) клиенту устанавливается cookies. Браузер исправно при каждом следующем запросе эту cookies возвращает и PHP имеет идентификатор сессии. Проблемы начинаются, если браузер cookies не возвращает. В этом случае, не получая cookies с идентификатором, PHP будет все время стартовать новую сессию, и механизм работать не будет.
Если включена только вторая, то cookies не выставляется. А происходит то, ради чего, в основном, собственно, и стоит использовать встроенный механизм сессий. После того, как скрипт выполняет свою работу, и страница полностью сформирована, PHP просматривает ее всю и дописывает к каждой ссылке и к каждой форме передачу идентификатора сессии. Это выглядит примерно так:
И браузер при клике на любую ссылку, или при нажатии на кнопку в форме, пошлет в запросе нужную нам переменную — идентификатор сессии!
Теоретически, в наших с вами самодельных сессиях на cookies и базе, можно самому, руками приписать ко всем ссылками передачу id- и тогда наши собственные сессии будут работать независимо от cookies. Но, согласитесь — приятнее, когда эту работу делает кто-то другой? 😉
По умолчанию в последних версиях PHP включены обе опции. Как PHP поступает в этом случае? Кука выставляется всегда. А ссылки автодополняются только если РНР не обнаружил cookies с идентификатором сессии. Когда пользователь в первый раз за этот сеанс заходит на сайт, ему ставится cookies, и дополняются ссылки. При следующем запросе, если cookies поддерживаются, PHP видит cookies и перестает дополнять ссылки. Если cookies не работают, то PHP продолжает исправно добавлять id к ссылкам, и сессия не теряется.
Пользователи, у которых работают cookies, увидят длинную ссылку с ID только один раз.
С передачей идентификатора закончили. Теперь осталось привязать к нему файл с данными на стороне сервера. PHP это сделает за нас. Достаточно просто написать:
И PHP запишет в файл, связанный с этой сессией, переменную test.
Здесь очень важное замечание.
Массив $_SESSION— особенный.
В нем, собственно, и находятся переменные, которые мы ходим сделать доступными в различных скриптах.
Чтобы поместить переменную в сессию, достаточно присвоить ее элементу массива $_SESSION.
Чтобы получить ее значение — достаточно обратиться к тому же элементу. Пример будет чуть ниже.
Cборкой мусора — удалением устаревших файлов PHP тоже занимается сам. Как и кодированием данных и кучей всяких других нужных вещей. В результате этой заботы работа с сессиями оказывается очень простой.
Вот мы, собственно, и подошли к примеру работы сессий.
Пример очень маленький:
<?
session_start();
if (!isset($_SESSION['counter'])) $_SESSION['counter']=0;
echo "Вы обновили эту страницу ".$_SESSION['counter']++." раз. ";
echo "<br><a href=".$_SERVER['PHP_SELF'].">обновить";
?>
Мы проверяем, есть ли у нас в сессии переменная counter, если нет, то создаем ее со значением 0, а дальше выводим ее значение и увеличиваем на единицу. Увеличенное значение запишется в сессию, и при следующем вызове скрипта переменная будет иметь значение 1, и так далее. Все очень просто.
Для того, чтобы иметь доступ к переменным сессии на любых страницах сайта, надо написать ТОЛЬКО ОДНУ(!) строчку в самом начале КАЖДОГО файла, в котором нам нужны сессии:
session_start();
И далее обращаться к элементам массива $_SESSION. Например, проверка авторизации будет выглядеть примерно так:
session_start();
if ($_SESSION['authorized']<>1) {
header("Location: /auth.php");
exit;
}
Удаление переменных из сессии. Если у вас register_globals=off, то достаточно написать
unset($_SESSION['var']);
Если же нет, то тогда рядом с ней надо написать:
session_unregister('var');
Область применения
Очень важно понимать, для чего сессии стоит использовать, а для чего — нет.
Во-первых, помните, что сессии можно применять только тогда, когда они нужны самому пользователю, а не для того, чтобы чинить ему препятствия. Ведь он в любой момент может избавиться от идентификатора!
Скажем, при проверке на то, что заполняет форму человек, а не скрипт, пользователь сам заинтересован в том, чтобы сессия работала — иначе он не сможет отправить форму! А вот для ограничения количества запросов к скрипту сессия уже не годится — злонамеренный скрипт просто не будет возвращать идентификатор.
Во-вторых. Важно четко себе представлять тот факт, что сессия — это сеанс работы с сайтом, так как его понимает человек. Пришел, поработал, закрыл браузер — сессия завершилась. Как сеанс в кино. Хочешь посмотреть еще один – покупай новый билет. Стартуй новый сеанс. Этому есть и техническое объяснение. Гарантированно механизм сессий работает только именно до закрытия браузера. Ведь у клиента могут не работать cookies, а в этом случае, естественно, все дополненные идентификатором ссылки пропадут с его закрытием.
Правда, сессия может пропасть и без закрытия браузера. В силу ограничений, рассмотренных в этой статье, механизм сессий не может определить тот момент, когда пользователь закрыл браузер. Для этого используется таймаут – заранее определенное время, по истечении которого мы считаем, что пользователь ушел с сайта. По умолчанию этот параметр равен 24 минутам.
Если вы хотите сохранять пользовательскую информацию на более длительный срок, то используйте cookies и, если надо — базу данных на сервере. В частности, именно так работают все популярные системы авторизации:
— по факту идентификации пользователя стартует сессия и признак авторизованности передается в ней.
— Если надо «запомнить» пользователя, то ему ставится cookies, его идентифицирующая.
— При следующем заходе пользователя на сайт, для того, чтобы авторизоваться, он должен либо ввести пароль, либо система сама его опознает по поставленной ранее cookies, и стартует сессию. Новую сессию, а не продолжая старую.
В-третьих, не стоит стартовать сессии без разбору, каждому входящему на сайт. Это создаст совершенно лишнюю нагрузку. Не используйте сессии по пустякам – к примеру, в счетчиках. То, что спайлог называет сессиями, считается, конечно же, на основе статистики заходнов, а не с помощью механизма сессий, аналогичного PHP.
К тому же, возьмем поисковик, который индексирует ваш сайт. Если поисковый робот не поддерживает cookies, то PHP по умолчанию будет поставлять к ссылкам PHPSESSID, что может не сильно понравится поисковику, который, по слухам, и так-то динамические ссылки не жалует, а тут вообще при каждом заходе — новый адрес!
Если сессии используются для ограничения доступа к закрытому разделу сайта, то все просто поисковик и не должен его индексировать. Если же приходится показывать одну и ту же страницу как авторизованным, так и не авторизованным пользователям, то тут поможет такой трюк – стартовать сессию только тем, кто ввел пароль, или тем, у кого уже стартовала сессия.
Для этого в начало каждой страницы вместо просто session_start() пишем:
if (isset($_REQUEST[session_name()])) session_start();
таким образом, Мы стартуем сессию только тем, кто прислал идентификатор.
Соответственно, надо еще в первый раз отправить его пользователю – в момент авторизации.
Если имя и пароль верные – пишем session_start()!
Возможные проблемы и их устранение
Самыми распространенными ошибками, которые выдает РНР при попытке работать с сессиями, являются такие:
Две из них,
Warning: Cannot send session cookie — headers already sent Warning: Cannot send session cache limiter — headers already sent
вызваны одной и той же причиной.
Третья,
Warning: open(/tmp\sess_SID, O_RDWR) failed: No such file or directory (2) in full_script_path on line number
ранее она выглядела, как
Warning: Failed to write session data (files). Please verify that the current setting of session.save_path is correct (/tmp),
если перевести ее с английского, подробно объясняет проблему: недоступен указанный в php.ini путь к каталогу, в который пишутся файлы сессий. Эту ошибку исправить проще всего. Просто прописать каталог, который существует, и доступен на запись, например,
session.save_path = c:\windows\temp
И не забыть перезагрузить Apache после этого.
Как выясняется, сообразительность людская не имеет пределов, и поэтому я вынужден пояснить:
сообщение о третьей ошибке (невозможно найти каталог) НЕИЗБЕЖНО приведет к появлению первых двух, поскольку сообщение об ошибке — это вывод в браузер и после него заголовками пользоваться нельзя. Поэтому не спешите искать преждевременный вывод, а сначала пропишите правильный путь!
Следующей по распространенности проблемой при работе с сессиями является тяжелое наследие register_globals. НЕ давайте переменным скрипта имена, совпадающие с индексами массива $_SESSION!
При register_globals=on значения будут перезаписывать друг друга, и вы запутаетесь.
Если не работает, но и никаких сообщений не выводится, то добавьте в самое начало скрипта две строчки, отвечающие за вывод ВСЕХ ошибок на экран — вполне возможно, что ошибки есть, но вы их просто не видите.
или смотрите ошибки в error_log. Вообще, тема отображения сообщений об ошибках выходит за рамки данной статьи, поэтому просто убедитесь хотя бы, что вы можете их видеть.
Если вы уверены, что ошибок нет, но приведенный пример не работает все равно, то, возможно, в PHP не включена передача id через url, а cookies по каким-то причинам не работают.
Смотрите, что у вас с cookies.
Вообще, если у вас «не работают» сессии, то сначала попробуйте передать идентификатор сессии руками, то есть, сделать ссылку и приписать к ней идентификатор:
<?
session_start();
if (!isset($_SESSION['counter'])) $_SESSION['counter']=0;
echo "Вы обновили эту страницу ".$_SESSION['counter']++." раз.<br>
<a href=".$_SERVER['PHP_SELF'].'?'.session_name().'='.session_id().">обновить";
?>
При этом следует убедится, что не включена директива session.use_only_cookies, которая запрещает PHP принимать идентификатор сессии, если он был передан через URL
Если этот пример не заработает, то проблема либо в банальных опечатках (половина «проблем» с сессиями происходит от неправильно написанного имени переменной), либо в слишком старой версии PHP: поддержка сессий появилась в версии 4.0, а массив $_SESSION — в 4.1 (До этого использовался $HTTP_SESSION_VARS).
Если же заработает — то проблема в cookies. Отслеживайте — что за cookies ставит сервер браузеру, возвращает ли браузер ее. Искать очень полезно, просматривая просматривая обмен HTTP-заголовками между браузером и сервером.
Объяснение принципа работы cookies выходит за рамки этого и так уж слишком большого текста, но хотя бы убедитесь, что сервер cookies с идентификатором посылает, а браузер — возвращает. И при этом идентификаторы совпадают друг с другом =)
Установка cookies должна выглядеть, как
(если вы запрашиваете скрипт не из корневого каталога)
Ответ сервера должен выглядеть, как
Cookie: PHPSESSID=prlgdfbvlg5fbsbshch6hj0cq6
либо
Cookie: PHPSESSID=prlgdfbvlg5fbsbshch6hj0cq6; b=b
если браузер возвращает другие cookies, кроме идентификатора сессии.
Если пример отсюда работает, а ваш собственный код — нет, то проблема, очевидно, не в сессиях, а в алгоритме. Ищите, где потеряли переменную, по шагам переносите пример отсюда, отлаживайте свой скрипт.
Еще одна проблема может возникнуть, если вы используете перенаправление через header или навигацию с помощью JavaScript.
Дело в том, что РНР автоматически дописывает идентификатор сессии только к ссылкам вида <a href=>, но не делает этого для header-ов, яваскрипта, мета-тегов.
Поэтому надо добавлять идентификатор руками, например, так:
Так же, весьма редкая, и совершенно непонятно, откуда появляющаяся, проблема бывает в том, что настройка session.save_handler имеет значение, отличное от files. Если это не так — исправляйте.
Дополнительная информация:
Кроме cookies, механизм сессий посылает еще и заголовки, запрещающие кэширование страниц (тот самый cache limiter). Для html это правильно и необходимо. Но вот когда вы пытаетесь скриптом, проверяющим авторизацию, отдать файл, то интернет эксплорер отказывается его скачивать. Именно из-за этого заголовка. Вызов
session_cache_limiter(«private»);
перед стартом сессии должен решить проблему.
Как это ни кажется странным, но в массиве $_SESSION нельзя использовать числовые индексы — $_SESSION[1],$_SESSION[’10’] — cессии работать не будут.
Где-то между версиями 4.2 и 5.0 невозможно было установить session.use_trans_sid с помощью ini_set(). Начиная с 5.0 уже можно снова.
До версии 4.3.3 cookies PHP отправлял cookies только если при старте сессии в запросе отсутстввал идентификатор. Теперь же cookies посылается при каждом вызове session_start()
PHP и Cookies
Cookies — это механизм хранения данных броузером удаленного компьютера для идентификации возвращающихся посетителей и хранения параметров веб-страниц (например, переменных).
Приведем пример использования Cookies на конкретном примере.
Предположим, нам нужно написать счетчик посещения сайта. Нам нужно знать, какое число посещений сайта осуществлялось каждым конкретным посетителем.
Данную задачу можно решить двумя способами. Первый из них заключается в ведении учета IP-адресов пользователей. Для этого нужна база данных всего из одной таблицы, примерная структура которой такая:
IP-адрес
Число посещений
210.124.134.203
7
212.201.78.207
14
83.103.203.73
3
Когда пользователь заходит на сайт, нам нужно определить его IP-адрес, найти в базе данных информацию о его посещениях, увеличить счетчик и вывести его в браузер посетителя. Написать обработчик (скрипт) подобной процедуры несложно. Однако при использовании такого метода у нас появляются проблемы следующего характера:
Для каждого IP-адреса нужно вести учет в одной таблице, которая может быть очень большой. А из этого следует, что мы нерационально используем процессорное время и дисковое пространство;
У большинства домашних пользователей IP-адреса являются динамическими. То есть, сегодня у него адрес 212.218.78.124, а завтра — 212.218.78.137. Таким образом, велика вероятность идентифицировать одного пользователя несколько раз.
Можно использовать второй способ, который намного легче в реализации и более эффективен. Мы устанавливаем в Cookie переменную, которая будет храниться на диске удаленного пользователя. Эта переменная и будет хранить информацию о посещениях. Она будет считываться скриптом при обращении посетителя к серверу. Выгода такого метода идентификации очевидна. Во-первых, нам не нужно хранить множество ненужной информации о IP-адресах. Во-вторых, нас не интересуют динамические IP-адреса, поскольку данные о своих посещениях хранятся конкретно у каждого посетителя сайта.
Теперь понятно, для чего мы можем использовать Cookie — для хранения небольшой по объему информации у клиента (посетителя) сайта, например: настройки сайта (цвет фона страниц, язык, оформление таблиц и.т.д.), а также другой информации.
Файлы Cookies представляют собой обыкновенные текстовые файлы, которые хранятся на диске у посетителей сайтов. Файлы Cookies и содержат ту информацию, которая была в них записана сервером.
Программирование Cookies
Приступим к программированию Cookies.
Для установки Cookies используется функция SetCookie(). Для этой функции можно указать шесть параметров, один из которых является обязательным:
name — задает имя (строк), закрепленное за Cookie;
value — определяет значение переменной (строка);
expire — время «жизни» переменной (целое число). Если данный параметр не указать, то Cookie будут «жить» до конца сессии, то есть до закрытия браузера. Если время указано, то, когда оно наступит, Cookie самоуничтожится.
path — путь к Cookie (строка);
domain — домен (строка). В качестве значения устанавливается имя хоста, с которого Cookie был установлен;
secure — передача Cookie через защищенное HTTPS-соединение.
Обычно используются только три первые параметра.
Пример установки Cookies:
<?php
// Устанавливаем Cookie до конца сессии:
SetCookie("Test","Value");
// Устанавливаем Cookie на один час после установки:
SetCookie("My_Cookie","Value",time()+3600);
?>
При использовании Cookies необходимо иметь в виду, что Cookies должны устанавливаться до первого вывода информации в браузер (например, оперетором echo или выводом какой-либо функции). Поэтому желательно устанавливать Cookies в самом начале скрипта. Cookies устанавливаются с помощью определенного заголовка сервера, а если скрипт выводит что-либо, то это означает, что начинается тело документа. В результате Cookies не будут установлены и может быть выведено предупреждение. Для проверки успешности установки Cookies можно использовать такой метод:
<?php
// Устанавливаем Cookie до конца сессии:
// В случае успешной установки Cookie, функция SetCookie возвращает TRUE:
if (SetCookie("Test","Value")) echo "<h3>Cookies успешно установлены!</h3>";
?>
Функция SetCookie() возвращает TRUE в случае успешной установки Cookie. В случае, если Cookie установить не удаетсяSetCookie() возвратит FALSE и возможно, предупреждение (зависит от настроек PHP). Пример неудачной установки Cookie:
<?php
// Cookies установить не удастся, поскольку перед отправкой
// заголовка Cookie мы выводим в браузер строку 'Hello':
echo "Hello";
// Функция SetCookie возвратит FALSE:
if (SetCookie("Test","Value")) echo "<h3>Cookie успешно установлен!</h3>";
else echo "<h3>Cookie установить не удалось!</h3>";
// Выводит 'Cookie установить не удалось!'.
?>
Cookie установить не удалось, поскольку перед посылкой заголовка Cookie мы вывели в браузер строку «Hello».
Чтение значений Cookies
Получить доступ к Cookies и их значениям достаточно просто. Они хранятся в суперглобальных массивах и $_COOKIE и$HTTP_COOKIE_VARS.
Доступ к значениям осуществляется по имени установленных Cookies, например:
echo $_COOKIE['my_cookie'];
// Выводит значения установленной Cookie 'My_Cookie'
Пример установки Cookie и последующего его чтения:
<?php
// Устанавливаем Cookie 'test' со значением 'Hello' на один час:
setcookie("test","Hello",time()+3600);
// При следующем запросе скрипта выводит 'Hello':
echo @$_COOKIE['test'];
?>
В рассмотренном примере при первом обращении к скрипту устанавливается Cookie «test» зо значением «hello». При повторном обращении к скрипту будет выведено значение Cookie «test», то есть строка «Hello».
При чтении значений Cookies обращайте внимание на проверку существования Cookies, например, используя операторisset(). Либо путем подавления вывода ошибок опереатором @
А вот пример, как построить счетчик числа загрузок страницы с помощью Cookies:
<?php
// Проверяем, был ли уже установлен Cookie 'Mortal',
// Если да, то читаем его значение,
// И увеличиваем значение счетчика обращений к странице:
if (isset($_COOKIE['Mortal'])) $cnt=$_COOKIE['Mortal']+1;
else $cnt=0;
// Устанавливаем Cookie 'Mortal' зо значением счетчика,
// С временем "жизни" до 18/07/29,
// То есть на очень долгое время:
setcookie("Mortal",$cnt,0x6FFFFFFF);
// Выводит число посещений (загрузок) этой страницы:
echo "<p>Вы посещали эту страницу <b>".@$_COOKIE['Mortal']."</b> раз</p>";
?>
Удаление Cookies
Иногда возникает необходимость удаления Cookies. Сделать это несложно, необходимо лишь вновь установить Cookie с идентичным именем и пустым параметром. Например:
Мы может установить массив Cookies, используя квадратные скобки в именах Cookies [], а затем прочитать массив Cookies и значения этого массива:
<?php
// Устанавливаем массив Cookies:
setcookie("cookie[1]", "Первый");
setcookie("cookie[2]", "Второй");
setcookie("cookie[3]", "Третий");
// После перезагрузки страницы мы отобразим
// Состав массива Cookies 'cookie':
if (isset($_COOKIE['cookie'])) {
foreach ($_COOKIE['cookie'] as $name => $value) {
echo "$name : $value <br>";
}
}
?>
Преимущества использования Cookies неоспоримы. Однако существуют и некоторые проблемы их использования. Первая из них заключается в том, что посетитель может блокировать прием Cookies браузером или попросту удалить все Cookies или их часть. Таким образом, мы можем иметь некоторые проблемы в идентификации таких посетителей.
4. Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src.
text-align:center; — расположение текста по центру
background: #FFDCF3; — фон
7. Сохраните эти изображения в папку images
В документе после заголовка первого уровня отобразите сохраненные вами изображения используя тег <img> и в нем пропишите обязательные атрибуты src=»путь к картинке» и alt=»альтернатива изображению, необходим для продвижения в поисковой системе»
8. В блокe предварительного форматирования текста пропишите атрибут с именем style и используя значение text-align расположите блок по правому краю
<pre style="text-align: right;">
«Цифровой дизайн похож на живопись, только краски никогда не сохнут».
Невилл Броуди (Neville Brody)</pre>
9. В заголовке второго уровня задайте фон #F1C1FD и меж строчный интервал = 0,3em, расположите текст по центру
<h2 style="text-align:center;background: #F1C1FD;letter-spacing:0.3em;">Кто такой Web-дизайнер?</h2>
10. Заголовку третьего уровня задайте цвет текста — #FF00D2
<h3 style="color:#FF00D2;">В обязанности Веб-дизайнера входит:</h3>
11. Абзацу начинающегося с фразы «Его задача» задайте толщину текста -bold, цвет фона #FFDCF3, и высоту строки — 2em
<p style="font-weight: bold; background: #FFDCF3;line-height: 2em;"> <i>Его задача:</i> помочь пользователю сориентироваться на веб-сайте, сделать работу пользователя с веб-сайтом легкой и приятной. В тоже время веб-дизайнер должен помнить, что он создает рекламный продукт, который должен соответствовать поставленным задачам (т.е. доносить некое рекламное сообщение до пользователя). </p>
12. После отобразите в документе следующее изображение и в тег <img> пропишите обязательный атрибут alt=»обязанности веб-дизайнера»
13.Заголовок второго уровня Описание деятельности расположите по центру, задайте меж символьный интервал равный 0,3em и фон цветом #FFDCF3
14. Для абзаца «В Казахстане — 90-200 тысяч тенге» задайте ширину равную 500px, расположите текст по центру, задайте фон #9BEA9B, высоту строки 3em, толщину текста жирнее, размер шрифта 20px
В HTML-документ можно добавлять комментарии, которые не будут отображаться в браузере. Они должны начинаться с символов <!— и заканчиваться символами —>. Все, что заключено между этими символами, при просмотре странице в браузере остается невидимым.
Есть много причин для использования комментариев в HTML-документах, например пояснение блоков кода, временное выключение кода при отладке и т.д.
Примечание: обратите внимание, что комментарии могут занимать несколько строк. Помните, что все, написанное между символами <!— и —>, даже HTML-код, будет проигнорировано браузером.
<html>
<body>
<!--Этот комментарий не будет отображен-->
<p>Обычный абзац</p>
</body>
</html>
Атрибуты html тегов
Практически все HTML теги могут иметь атрибуты. Атрибуты предназначены для предоставления дополнительной информации об элементе, и они всегда указываются внутри открывающего тега. В большинстве случаев атрибуты являются необязательными и указываются только при необходимости изменения стандартных характеристик тега. На изображении ниже показан синтаксис элемента с атрибутом.
Как мы видим, атрибуты состоят из пары: имя_атрибута=»значение». Имена атрибутов не чувствительны к регистру символов и могут быть записаны с любым сочетанием строчных и заглавных букв. Значение атрибута может состоять из текста, цифр и других символов (единственным исключением является символ амперсанда (&), его использование запрещено). Дополнительные ограничения на использование различных символов зависят от способа записи значения.
<!-- при указании нескольких атрибутов для одного тега, они должны быть отделены
друг от друга символом пробела -->
<p атр1="значение" атр2="значение">содержимое</p>
<!-- сочетание строчных и заглавных букв в имени атрибута -->
<p АтРибУт1="значение">содержимое</p>
Использование стилей. Атрибут style
Атрибут style — используется для стилизации элементов непосредственно в коде. Цель атрибута style заключается в предоставлении простого способа использования CSS стилей в любом HTML-элементе.
В этом самоучителе атрибут style показан для вашего общего представления об использовании CSS, как инструмента для стилизации страниц. Основы CSS вы cможете изучить с помощью нашего самоучителя по CSS.
Код примера познакомит вас с новым способом форматирования документа.
<html>
<body style="background-color:Gray;">
<h1>Посмотрите на цвета и стили</h1>
<p style="font-family:verdana;color:red;">
Этот текст написан красным цветов с помощью шрифта Verdana.
</p>
<p style="font-family:times;color:green;">
Этот текст написан зеленым цветом с помощью шрифта Times.
</p>
<p style="font-size:30px;">Этот текст имеет размер 30 пикселей.</p>
</body>
</html>
Внимательно посмотрите на пример, с помощью атрибута style мы задаем CSS стиль внутри HTML-элементов, такой способ задания стилей называется встроенным стилем.
После демонстрации работы атрибута style предлагаем вам познакомится с самыми распространенными свойствами для стилизации текста
Задний фон background
Задний фон элемента задается с помощью свойства background-color, которое в качестве значения может принимать любое доступное значение цвета (про различные значения цветов смотрите ниже), после свойства обязательно должно идти двоеточие и значение, после значения обязательно ставится точка с запятой, эти правила распространяются на все свойства атрибута style. Если нужно задать несколько свойств стиля для одного элемента, то каждое последующее свойство записывается после «;» предыдущего свойства.
Цвет текста color
Цвет текста элемента задается с помощью свойства color. Благодаря этому свойству можно задать любой цвет для текстового содержимого. В качестве значения свойство color может принимать названия цветов, задание цвета посредством процентного соотношения красного, зеленого и синего, или использовать шестнадцатеричные коды.
Определение цвета по названию
Наиболее простым способом задать цвет в CSS является указание его названия. Предположим, вы хотите задать серебристый цвет для текста в элементе:
color: silver;
Итак, чтобы задать цвет таким образом, нужно просто указать его название в качестве значения свойства. При этом не имеет значения, пишите вы названия строчными или прописными буквами, поэтому можно написать silver, Silver или SILVER, и все это будет работать.
Определение цвета через значение, задаваемое сочетанием красного, зеленого и синего
Можно определить цвет, указав сочетание красного, зеленого и синего в определенной пропорции. Допустим, вам нужно задать оранжевый цвет, который состоит из 80% красного, 40% зеленого и 0% синего. Вот как это можно сделать:
color: rgb(80%, 40%, 0%);
Можно также задавать значение красного, зеленого и синего числами от 0 до 255. Например, вместо 80% красного, 40% зеленого и 0% синего можно писать 204 красного, 102 зеленого и 0 синего.
Посмотрите, как для задания цветов используются обычные числовые значения:
color: rgb(204, 102, 0);
Определение цвета через шестнадцатеричный код
Теперь перейдем к шестнадцатеричным кодам. Откроем вам небольшой секрет: каждый набор двух цифр такого кода представляет красную, зеленую и синюю составляющую цвета. Так, первые две цифры представляют красный цвет, следующие две — зеленый и последние две -синий:
color: #cc6600;
Примечание: все три метода определения цветов в CSS подходят ко всем свойствам, которые в качестве значений могут принимать цвета. Все доступные названия цветов вы можете посмотреть в нашей таблице цветов, там же вы сможете подобрать цвет в значении rgb или шестнадцатеричном, если вам не подойдет ни один из оттенков представленных в таблице.
Шрифт
Шрифты могут очень сильно влиять на дизайн страниц. В CSS они разделены на семейства, в которых вы можете выбрать, какой шрифт лучше подходит для определенного элемента на странице.
Данный стиль служит для задания гарнитуры шрифта. Название шрифтов перечисляются через запятую, в случае, если название состоит более чем из одно слово необходимо использовать кавычки.
font-family: Verdana, Geneva, Arial, sans-serif;
Свойство font-family дает возможность задать список предпочтительных шрифтов, которые указываются через запятую. Если имя шрифта состоит из нескольких слов, то такое название следует заключить в двойные кавычки, например: «Courier New».
Пример использования стиля:
font-family: (шрифт без засечек), Arial, Helvetica, sans-serif;
font-family: (шрифт с засечками), «Times New Roman», Times, serif;
font-family: (моноширинный шрифт), «Courier New», Courier, monospaced;
Размер шрифта
Размер шрифта очень сильно влияет на дизайн веб-страницы и читабельность ее текста. В CSS есть несколько единиц измерения, с помощью которых можно задавать размер для текста, все они подробно описаны в разделе Единицы измерения CSS. Также имеется возможность задавать размер с помощью ключевых слов:
font-size: medium;
Все доступные ключевые слова, задающие размер, вы можете посмотреть в нашем справочнике по CSS в описании свойства font-size.
Выравнивание
Данный стиль задает выравнивание текста внутри родительского блока. Может иметь значения left, right, center.
Есть еще значение стиля — justify,которое выравнивает текст по всей ширине родительского блока. Среди веб-дизайнеров стиль justifyсчитается плохим тоном, т.к. выравнивание по всей ширине родительского блока приводит к появлению пробелов различной длины, что сильно ухудшает читабильность.
Хочу заметить тот факт, что выравнивание, заданное свойством text-align,распространяется так же на графические элементы внутри блока.
line-height
Данный стиль задает расстояние между строк в текстовом блоке (или, иными словами, изменяет высоту строки текста, еще по умному это называется «интерлиньяж»). Порой шрифт значительно приятнее смотрится при увеличении значения line-height, заданного по умолчанию.
Значение данного свойства задается в процентах (100%, 150% …), множителем (1 — интерлиньяж по умолчанию, 1.5 — увеличен в полтора раза) или точным значением в пикселах (10px, 1.5 em…).
letter-spacing
Межсимвольное расстояние. Значение данного свойства указывает в единицах длины (пиксели, дюймы, pt), либо относительные единицы — em.
font-weight
При желании сделать текст блока жирным — используйте стиль font-weight:bold.Если вы наоборот хотите убрать жирное выделение — тут все просто font-weight:normal
Попробуйте сами:
<html>
<body style="background-color: black; color: white;">
<h1 style="font-family: verdana;">Заголовок</h1>
<p style="font-size: 10px;">Очень маленький размер текста.</p>
<p style="text-align: right;">Этот текст будет выровнен по правому краю.</p>
<p style="line-height:100px">Высота строки равна 100px</p>
<p style="letter-spacing:0.5em">Расстояние между символами</p>
<p style="font-weight:bold">Жирный текст</p>
</body>
</html>
Результат:
Заголовок
Очень маленький размер текста.
Этот текст будет выровнен по правому краю.
Высота строки равна 100px
Расстояние между символами
Жирный текст
Тег <img>
Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=»0″ в тег <img>.
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
4. Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src.
В меню кодировки выбрать «Преобразовать в UTF-8 без BOM» (Это основная кодировка для страниц на Русском языке). Ее мы будем использовать всегда для создания страниц.
Наберите в документе основной скелет html:
<html>
<head> Служебная информация о вашем документе</head>
<body>
Тело документа
</body>
</html>
Внутри контейнера <head></head> пропишите следующее:
<head>
<title>1 урок-Профессия WEB-ДИЗАЙНЕР</title>
<meta charset="utf-8">
<meta name="description" content="Веб-дизайнер - профессия 21 века.Профессию web-дизайнера является перспективной в карьерном плане.Он специалист в области компьютерных технологий, который отвечает за то, как выглядит и воспринимается Интернет-сайт.">
<meta name="keywords" content="Web дизайнер дизайн страниц графический дизайн интернет сайт компьтерные технологии баннер фриланс свободный график создание сайта web интерфейс художественное оформление сайта">
<meta name="author" lang="ru" content="Жарова Салтанат" >
<meta name="robots" content="index,follow">
</head>
8.В контейнере <body></body> используя теги и нижеописанный текст на желтом фоне, создать страницу как на рис.1
«Цифровой дизайн похож на живопись, только краски никогда не сохнут».
Невилл Броуди (Neville Brody)
Кто такой Web-дизайнер?
Web-дизайн (от англ. Web design) — отрасль web-разработки и разновидность дизайна. Web-дизайнер – это специалист в области компьютерных технологий, который отвечает за то, как выглядит и воспринимается Интернет-сайт.
В обязанности Веб-дизайнера входит:
создание логотипов, баннеров и других элементов графики
продумывает навигацию по сайту
определяет, где следует разместить текст
учет времени загрузки сайта
проектирует пользовательский интерфейс
Его задача: помочь пользователю сориентироваться на веб-сайте, сделать работу пользователя с веб-сайтом легкой и приятной. В тоже время веб-дизайнер должен помнить, что он создает рекламный продукт, который должен соответствовать поставленным задачам (т.е. доносить некое рекламное сообщение до пользователя).
Основной сферой деятельности web-дизайнера является стилевая, визуальная и программная организация информации электронного формата, логичное и приятное оформление информации, графическое отображение её на страницах Интернета.
ПРИМЕЧАНИЕ:
Текст в теге <Title> должен содержать от 10-70 символов. Текст должен содержать наиболее важные ключевые слова, которые описывают тематику вашего сайта. ОБЯЗАТЕЛЬНО: Каждая страница сайта должна содержать уникальное описание.
Придерживаясь наших рекомендаций, вы получите максимальное количество посетителей сайта.
Правила, которые следует соблюдать при создании формы для загрузки файлов:
Используйте метод пост для формы — method=»post»
У формы обязательно должен быть задан атрибут : enctype=»multipart/form-data». Этот атрибут используется при загрузке фалов.
Без указания данного атрибута загрузка не будет работать.
Замечание:
В форме необходимо указать атрибут type=»file» для тега <input>. В этом случае в форме отобразится поле загрузки файла, с кнопкой нажав которую вы сможете выбрать загружаемый файл. Необходимо задать имя тега input для последующего получения данных о файле. В нашем примере имя тега будет fileToUpload.
После загрузки файла вся информация о нем будет передаваться не как обычно через $_POST, а в суперглобальном массиве $_FILE.
pathinfo() возвращает информацию о path в виде ассоциативного массива или строки в зависимости от options.
Список параметров
Path — aнализируемый путь.
Options — eсли указан, то задает для возврата отдельный элемент: один из следующих PATHINFO_DIRNAME, PATHINFO_BASENAME, PATHINFO_EXTENSION и PATHINFO_FILENAME.
Если options не указан, то возвращаются все доступные элементы.
Возвращаемые значения
Если параметр options не передан, то возвращаемый ассоциативный массив (array) будет содержать следующие элементы: dirname, basename, extension (если есть) и filename.
Замечание:
Если path содержит больше одного расширения, то PATHINFO_EXTENSION возвращает только последнее и PATHINFO_FILENAME отрезает только последнее расширение. (смотрите пример ниже).
Замечание:
Если path не содержит расширения, то не будет возвращен элемент extension (см. ниже второй пример).
Если указан параметр options, будет возвращена строка (string), содержащая указанный элемент.
(PHP 4, PHP 5, PHP 7) file_exists — Проверяет наличие указанного файла или каталога
Описание
bool file_exists ( string $filename )
Проверяет наличие указанного файла или каталога.
Список параметров
filename
Путь к файлу или каталогу.
На платформах Windows, для проверки наличия файлов на сетевых ресурсах, используйте имена, подобные //computername/share/filename или \\computername\share\filename.
Возвращаемые значения
Возвращает TRUE, если файл или каталог, указанный параметром filename, существует, иначе возвращает FALSE.
Замечание:
Данная функция возвращает FALSE для символических ссылок, указывающих на несуществующие файлы.
Внимание
Если файлы недоступны из-за ограничений, налагаемых безопасным режимом, то данная функция вернет FALSE. Однако, эти файлы все еще могут быть подключены, если они располагаются в каталоге safe_mode_include_dir.
Замечание:
Проверка происходит с помощью реальных UID/GID, а не эффективных идентификаторов.
Замечание: Так как тип integer в PHP является целым числом со знаком и многие платформы используют 32-х битные целые числа, то некоторые функции файловых систем могут возвращать неожиданные результаты для файлов размером больше 2ГБ.
В случае неудачного завершения работы генерируется ошибка уровня E_WARNING.
Рассмотрим более детально суперглобальный массив $_FILES
Для каждого загруженного файла массив $_FILES содержит массив, со следующими данными: $_FILES[‘fileToUpload’][‘name’] — исходное имя файла, такое, каким его видел пользователь, выбирая файл; $_FILES[‘fileToUpload ‘][‘type’] — mime/type файла, к примеру, может быть image/gif; это поле полезно сохранить, если Вы хотите предоставлять интерфейс для скачивания загруженных файлов; $_FILES[‘fileToUpload’][‘size’] — размер загруженного файла в байтах; $_FILES[‘fileToUpload’][‘tmp_name’] — полный путь к временному файлу на диске; $_FILES[‘fileToUpload’][‘error’] — Начиная с версии 4.2.0, содержит код ошибки, который равен 0, если операция прошла успешно
.
Где [‘fileToUpload’] имя тега <input> через который загружается файл.
php коды ошибок передаваемые через $_FILES[‘fileToUpload’][‘error’]
UPLOAD_ERR_OK
Значение: 0; Ошибок не возникало, файл был успешно загружен на сервер.
UPLOAD_ERR_INI_SIZE
Значение: 1; Размер принятого файла превысил максимально допустимый размер, который задан директивой upload_max_filesize конфигурационного файла php.ini.
UPLOAD_ERR_FORM_SIZE
Значение: 2; Размер загружаемого файла превысил значение MAX_FILE_SIZE, указанное в HTML-форме.
UPLOAD_ERR_PARTIAL
Значение: 3; Загружаемый файл был получен только частично.
UPLOAD_ERR_NO_FILE
Значение: 4; Файл не был загружен.
UPLOAD_ERR_CANT_WRITE
Value: 7;ошибка записи на диск. С версии PHP 5.1.0.
UPLOAD_ERR_EXTENSION
Value: 8; Загрузка остановлена. Модуль PHP не имеет возможности загрузить файл; проверьте список загруженных модулей через phpinfo(). С версии PHP 5.2.0.
Создайте файл «upload.php», И добавьте в него скрипт приведенный ниже.
Необходимо создать папку uploads, в которую будет копироваться загружаемый файл.
Первая часть скрипта. Первоначальная проверка файла. В этом скрипте мы проверим, что файл является картинкой.
<?php
$target_dir = "uploads/"; //Задаем папку в которую загружается файл.
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Проверяем, что файл является картинкой.
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "Файл является картинкой - " . $check["mime"] . "";
$uploadOk = 1;
} else {
echo "Файл не является картинкой допустимого формата.";
$uploadOk = 0;
}
}
?>
Описание PHP скрипта проверки типа файла:
$target_dir = «uploads/» – задаем папку, в которую будем сохранять загружаемый файл $target_file в этой переменной хранится полный путь файла. $uploadOk=1 переменная в которой будет храниться статус ошибки. 1- ошибок нет. $imageFileType в этой переменной мы храним расширение файла
Теперь проверим файл на соответствие заявленному расширению. Проверим соответствует ли расширение содержимому файла.
Замечание: Вам необходимо создать каталог «uploads» в том каталоге в котором создан файл «upload.php». Все загружаемые файл будут храниться там.
Проверим, существует ли такой файл.
Для начала проверим существует ли файл и если он существует обнулим переменную $uploadOk:
// Проверка существует ли файл.
if (file_exists($target_file)) {
echo "Файл уже существует.";
$uploadOk = 0;
}
Ограничим размер файла.
Не очень хорошо загружать фалы большого размера и отображать их на страницах сайта. В этом случае страница будет загружаться очень долго.
Проверим если размер картинки больше 500kb, в случае если фал большой, то мы обнулим $uploadOk и выведем сообщение файл слишком большой:
// Проверим размер файла
if ($_FILES["fileToUpload"]["size"] > 500000) {
echo "Извините, ваш файл слишком большой.";
$uploadOk = 0;
}
Разберем следующую часть скрипта которая проверяет расширение файла.
Код приведенный ниже позволяет загружать только JPG, JPEG, PNG и GIF файлы. Все остальные не будут загружаться и выдадут сообщение об ошибке и обнулят $uploadOk :
// Разрешаем только определенные форматы фалов. Проверяем значение переменной $imageFileType в которой хранится расширение файлов.
if($imageFileType != "jpg" and $imageFileType != "png" and $imageFileType != "jpeg" and $imageFileType != "gif" ) {
echo "Загрузка разрешена только JPG, JPEG, PNG & GIF файлов. Неверный формат файла";
$uploadOk = 0;
}
Полный скрипт загрузки файла изображения.
Полный скрипт «upload.php» теперь выглядит следующим образом:
move_uploaded_file — Перемещает загруженный файл в новое место
Эта функция проверяет, является ли файл filename загруженным на сервер (переданным по протоколу HTTP POST). Если файл действительно загружен на сервер, он будет перемещён в место, указанное в аргументе destination.
Такая проверка особенно важна в том случае, если существует шанс того, что какие-либо действия, производимые над загруженным файлом, могут открыть его содержимое пользователю или даже другим пользователям системы.
<meta charset="utf-8">
<?
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
if(isset($_POST["submit"])) {
$uploadOk = 1;
echo '<pre>';
print_r ($_FILES);
echo '</pre>';
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "Файл является изображением - " . $check["mime"] . "";
$uploadOk = 1;
} else {
echo "Файл не является изображением или поврежден.";
$uploadOk = 0;
}
if (file_exists($target_file)) {
echo "Извините файл уже существует.";
$uploadOk = 0;
}
if ($_FILES["fileToUpload"]["size"] > 500000) {
echo "Файл слишком большой.";
$uploadOk = 0;
}
if($imageFileType != "jpg" and $imageFileType != "png" and $imageFileType != "jpeg" and $imageFileType != "gif" ) {
echo "Только JPG, JPEG, PNG & GIF можно загружать. Неверное расширение файла";
$uploadOk = 0;
}
if ($uploadOk == 0) {
echo "Ошибка загрузки файла.";
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "Файл ". basename( $_FILES["fileToUpload"]["name"]). " загружен.";
} else {
echo "Ошибка копирования файла.";
}
}
}
?>
<form action="" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
-- phpMyAdmin SQL Dump
-- version 4.0.10.6
-- http://www.phpmyadmin.net
--
-- Хост: 127.0.0.1:3306
-- Время создания: Мар 16 2016 г., 17:11
-- Версия сервера: 5.5.41-log
-- Версия PHP: 5.3.29
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- База данных: `iweb`
--
-- --------------------------------------------------------
--
-- Структура таблицы `posts`
--
CREATE TABLE IF NOT EXISTS `posts` (
`id` int(255) NOT NULL AUTO_INCREMENT,
`title` text NOT NULL,
`content` text NOT NULL,
`author` varchar(50) NOT NULL DEFAULT 'Жарова Салтанат',
`img` varchar(200) NOT NULL DEFAULT 'default.jpg',
`date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=21 ;
--
-- Дамп данных таблицы `posts`
--
INSERT INTO `posts` (`id`, `title`, `content`, `author`, `img`, `date`) VALUES
(2, 'Lorem Ipsum', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.', 'Жарова Салтанат', 'images/default.jpg', '2016-03-04 11:42:22'),
(6, 'long established fact', 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ''Content here, content here'', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ''lorem ipsum'' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).', 'Жарова Салтанат', 'images/default.jpg', '2016-03-04 11:46:47'),
(7, 'Contrary to popular belief', 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.', 'Жарова Салтанат', 'images/default.jpg', '2016-03-04 11:48:08'),
(9, 'Lorem Ipsum', '<b>There are many</b> variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don''t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn''t anything embarrassing hidden in the middle of text. <p style="color:red;">All the Lorem Ipsum </p>generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.', 'Жарова Салтанат', 'images/default.jpg', '2016-03-04 11:48:50'),
(10, 'The point of using', 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ''Content here, content here'', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ''lorem ipsum'' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).', 'Жарова Салтанат', 'images/default.jpg', '2016-03-04 11:49:09'),
(11, 'default model', '<strong>It is a long established</strong> fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ''Content here, content here'', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ''lorem ipsum'' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).', 'Жарова Салтанат', 'images/default.jpg', '2016-03-04 11:49:19'),
(14, 'Lorem Ipsum - это текст-"рыба"', 'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.', 'Жарова Салтанат', 'images/default.jpg', '2016-03-07 10:10:01'),
(15, 'заполнение шаблона 11145', 'Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).', 'Жарова Салтанат', 'images/default.jpg', '2016-03-07 10:10:26'),
(16, 'Есть много вариантов Lorem Ipsum', 'Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь. Если вам нужен Lorem Ipsum для серьёзного проекта, вы наверняка не хотите какой-нибудь шутки, скрытой в середине абзаца. Также все другие известные генераторы Lorem Ipsum используют один и тот же текст, который они просто повторяют, пока не достигнут нужный объём. Это делает предлагаемый здесь генератор единственным настоящим Lorem Ipsum генератором. Он использует словарь из более чем 200 латинских слов, а также набор моделей предложений. В результате сгенерированный Lorem Ipsum выглядит правдоподобно, не имеет повторяющихся абзацей или "невозможных" слов.,hj,hj,h', 'Жарова Салтанат', 'images/default.jpg', '2016-03-07 10:10:45'),
(17, 'ugkj,m', 'sdxfcghjbkml;,./uo;jkm.,', 'Жарова Салтанат', 'images/default.jpg', '2016-03-14 10:14:16'),
(18, 'sfdsfsdfds', 'fdsfdsfsdsdfsdfsdfdfsdfdsfd', 'Жарова Салтанат', 'images/uploads/user.png', '2016-03-14 10:29:59'),
(19, 'sfdsfsdfds', 'fdsfdsfsdsdfsdfsdfdfsdfdsfd', 'Жарова Салтанат', 'uploads/user.png', '2016-03-14 10:35:51'),
(20, 'sdfsdfsdf', 'sdfsdf sdfsdfsdf sdfsdf sdfsdfsdfsdfsdf sdfsdfsdfsdfsdf sdfsdfsdfsdfsdf sdfsdfsdfsdfsdf sdfsdfsdfsdfsdf sdfsdfsdfsdfsdf sdfsdfsdfsdfsdf sdfsdfsdf sdfsdf sdfsdfsdfsdfsdf sdfsdfsdfsdfsdf sdfsdfsdfsdfsdf sdfsdfsdf sdfsdf sdfsdfsdfsdfsdf sdfsdfsdfsdfsdf sdfsdfsdf', 'Жарова Салтанат', 'images/uploads/balkon_dver.jpg', '2016-03-14 13:40:22');
-- --------------------------------------------------------
--
-- Структура таблицы `users`
--
CREATE TABLE IF NOT EXISTS `users` (
`id` int(200) NOT NULL AUTO_INCREMENT,
`name` varchar(20) NOT NULL,
`email` varchar(20) NOT NULL,
`pass` varchar(255) NOT NULL,
`auth` int(1) NOT NULL,
`date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=20 ;
--
-- Дамп данных таблицы `users`
--
INSERT INTO `users` (`id`, `name`, `email`, `pass`, `auth`, `date`) VALUES
(16, 'saltik', 'saltik91@mail.ru', '698d51a19d8a121ce581499d7b701668', 1, '0000-00-00 00:00:00'),
(17, 'ddd', 'ddd@ddd.ti', '202cb962ac59075b964b07152d234b70', 1, '0000-00-00 00:00:00'),
(19, 'Salta', 'aaa@aaa.aaa', '202cb962ac59075b964b07152d234b70', 1, '2016-03-14 16:18:19');
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Задание.
1. Создать форму регистрации пользователя.
2. Сделать проверку в базе данных существует ли пользователь с таким логином.
3. Если существует предложить перейти на форму входа на сайт или сменить пароль.
4. Если пользователь не существует, то добавить его в базу данных.
5. Создать форму входа на сайт.
6. Создать форму смены пароля.
7. Создать страницу подтверждения емайла.
1. Для этого создадим файл registration.php в нем будет хранится наша форма для регистрации. В результате получим такой код:
При сохранении файла обязательно указать кодировку как и в предыдущих уроках и смотрим результат:
рис 1
2. Теперь создадим базу данных, в которой будут храниться данные зарегистрированных пользователей. Для этого:
а)
рис 2
Выбрем дополнительно-> phpMyAdmin;
b) Откроется окно где нужно указать пользователь root пароль не нужно указывать и ок.
рис 3
Откроется следующее окно:
рис 4
Во вкладке базы данных вводим название test выбираем utf8_general_ci и жмем создать:
c) Теперь в нашей базе данных нужно создать таблицу users где и будут храниться данные пользователей. Для этого выбираем нашу базу данных test->новая откроется следующее окно.
рис 5
d) Перед тем как заполнять поля таблицы мы добавим еще 2 так как имеющихся нам не хватит для нужной нам таблицы:
рис 6
Далее заполняем поля:
В столбцу имя указываем названия полей: id, email, password, date, name_user, lastname. Для поля id указываем тип int длина значения 11 этого будет достаточно. Для поля date выбираем тип timestamp. Для всех остальных полей выбираем тип varchar и длина 255. Для всех полей в графе сравнения указываем utf8_general_ci. И сохранить.
рис 7
3. Теперь нам нужна страница обработчик, которая указывается в строчке <form action=»proverka.php» method=»POST»> // страница обработчик. Создаем страницу proverka.php.
Первый код программы на странице:
<?php
$connect=mysql_connect("localhost","root",""); /* Здесь мы подключаемся к базе используя функцию mysql_connect, в ней следует указать три параметра 1)сервер базы данных 2)логин пользователя БД 3)пароль пользователя БД */
$db=mysql_select_db("test");
//Здесь мы указываем
//какую БД будем использовать
?>
Второй код программы:
<html>
<head>
<meta charset='utf-8'>
<title>My First PHP Page</title>
</head>
<body>
<?php
if (isset($_POST['submit'])){
$password = $_POST['password'];
$mdPassword = md5($password);
$password2 = $_POST['password2'];
$email = $_POST['email'];
$name = $_POST['name'];
$lastname = $_POST['lastname'];
$table=mysql_query("SELECT * FROM `users` WHERE `email`='$email'"); // проверка на существование email в базе данных
$res=mysql_fetch_array($table);
if($res['email']==$email){
echo '<font color="red">Пользователь с таким e-mail уже зарегистрирован!</font><a href="index.php">Войти на сайт</a> или <a href="SmenaParolya.php">сменить пароль</a>';
}
else{
if ($password==$password2) // сравнение введённых пользователем паролей
{
$query = mysql_query("INSERT INTO `users` (password, email, name_user, lastname ) VALUES ('$mdPassword', '$email', '$name', '$lastname')");
echo '<font color="green">Вы успешно зарегистрировались!</font><br><a href="index.php">На главную</a>';
$query = mysql_query("select * from `users` where `email`='$email' and`password`='$mdPassword'");
$res=mysql_fetch_array($query);
echo '<a href="aktiv.php?id1='.$res['id'].'&id2='.$res['password'].'">активировать</a>'; // ссылка на страницу для активации
}
else {
echo '<font color="red">Пароли не совпадают!</font>';
}
}
}
?>
</body>
</html>
Теперь пользователи могут регистрировать на сайте. Проверим работу формы:
рис 8
После нажатия кнопки зарегистрироваться выйдет окно:
рис 9
А в базе данных появится информация пользователя.
рис 10
Так как пользователи у нас уже существуют создадим форму входа на сайт. Для этого:
1. Создадим форму входа на странице index.php ee код будет таким:
<form action="login.php" method="POST"> <!-- страница обработчик-->
<table>
<tr>
<td>E-mail:</td>
<td><input type="text" name="email"></td> <!--поле для ввода email-->
</tr>
<tr>
<td>Пароль:</td>
<td><input type="password" name="password"></td> <!--поле для пароля-->
</tr>
<tr> // кнопка войти
<td colspan="2"><input type="submit" value="Войти" name="submit"></td>
</tr>
</table>
</form>
<a href="registration.php">Регистрация</a> <br /> <!-- ссылка для тех кто еще не зарегистрирован-->
И добавим ее в начало страницы сразу же после меню.
2. Теперь создадим страницу обработчик login.php . Ее код будет такой:
<?php // как и на странице proverka.php
$connect=mysql_connect("localhost","root","");
$db=mysql_select_db("test");
?>
<html>
<head>
<meta charset='utf-8'>
<title>My First PHP Page</title>
</head>
<body>
<?php
if (isset($_POST['submit'])){
$password = md5($_POST['password']);
$email = $_POST['email'];
$table=mysql_query("SELECT * FROM `users` WHERE `email`='$email' and `password`='$password'");
$res=mysql_fetch_array($table);
if($res['email']==$email and $res['password']==$password) // сравниваем введенные пользователем email и password с данными в базе существует ли такой пользователь или нет
{
echo '<font color="green">Добро пожаловать на сайт!</font>';
}
else {
echo '<font color="red">Введите верные пароль и email или </font><a href="registration.php">зарегистрируйтесь</a>';
}
}
?>
</body>
</html>
Проверяем работу формы:
рис 11
Вводим ранее зарегистрированного пользователя, и войти результат должен быть таким:
рис 12
3. Перед тем как создать страницу для проверки email добавим новое поле в таблицу базы данных status. Выбираем вкладку структура, откроется окно:
рис 13
Внизу есть строчка добавить 1 поле и ok. Откроется следующее окно:
рис 14
Заполняем, сохраняем, в таблице появилось теперь новое поле, где будет отражаться статус пользователя, активирован он или нет.
4. Создадим страницу подтверждения email . В коде на странице proverka.php была такая строчка $query = mysql_query(«select * from `users` where `email`=’$email’ and `password`=’$mdPassword’»); $res=mysql_fetch_array($query); echo ‘<a href=»aktiv.php?id1=’.$res[‘id’].’&id2=’.$res[‘password’].’»>активировать</a>’;
и ссылка активировать после регистрации: (рис 9)
Создадим страницу aktiv.php . Ее код будет такой:
<?php // как и на страницах proverka.php и login.php подключение к базе данных обязательно
$connect=mysql_connect("localhost","root","");
$db=mysql_select_db("test");
?>
<html>
<head>
<meta charset='utf-8'>
<title>My First PHP Page</title>
</head>
<body>
<?php
$query = mysql_query("select * from `users` where `id`='".$_GET['id1']."' and `password`='".$_GET['id2']."'"); // выбираем из базы данных его id и пароль подписывая как id2 в целях безопсности.
$res=mysql_fetch_array($query);
if($res['id']==$_GET['id1']) // сравниваем результат и данные адресной строки
{
echo "ok";
mysql_query("update `users` set `status`='active' where `id`='".$_GET['id1']."' and `password`='".$_GET['id2']."'");
}
else
echo 'err';
?>
</body>
</html>
Теперь при нажатии на ссылку активировать будет выходить такое окно:
рис 15
И статус пользователя будет меняться в базе данных:
рис 16
И на следующем этапе создадим форму смены пароля . Для этого:
1. Создадим страницу SmenaParolya.php. Ее код будет таким:
<html>
<head>
<meta charset='utf-8'>
<title>My First PHP Page</title>
</head>
<body>
<?php
if (isset($_POST['submit'])){
$np=mysql_query("update `users` set password = '".md5($_POST['passwordn'])."' where `email` = '".$_POST['email']."'"); // заменить данные пароль на новые
$res=mysql_query($np);
echo '<font color="green">Пароль сохранен успешно!</font>';
}
?>
Итак, для начала нам потребуется сервер, для того чтобы можно было запускать php скрипты и подключаться к базе данных (БД). Приступим к изучению СУБД (средство управления базой данных).
Создадим БД
Для этого нам необходимо открыть cpanel. Наберем в адресной строке http://ajpro.kz/cpanel. Введем логин ajpro и пароль &.gK^{4.03rI
Для создания базы данных необходимо пользоваться первым ярлыком MySql Databases
Для управления базами данных необходимо воспользоваться phpMyAdmin
рис1
Создаем первую базу данных в MySqlDatabases.
рис2
1. Откройте панель создания БД MySqlDatabases из Cpanel
2. Введите имя базы данных, используя английские строчные буквы без пробелов. И нажмите кнопку создать БД “CreateDatabase”.
После создания базы данных вам необходимо создать пользователя для того чтобы получить доступ к базе данных.
рис3
В том же окне найдите раздел создания пользователя и задайте имя и пароль и нажмите Create User.
Заключающий этап это добавления пользователя в базу данных.
рис4
В том же окне MySqlDatabases найдем раздел Add User To Database и выберем нашу базу данных и нашего пользователя и нажмем кнопку Add — добавить.
После нажатия кнопки add появится окно с выбором уровней доступа пользователя к базе данных. Вы может ограничивать доступ для повышения безопасности. Не рекомендуется разрешать пользователю удалять и очищать таблицы. Ниже приведены описания уровней доступа. ALL PRIVILEGES — как мы видели ранее, это даст пользователю MySQL полный доступ к заданной базе данных (если база данных не указана, то ко всем). CREATE — позволяет создавать новые таблицы или базы данных. DROP — позволяет удалять таблицы или базы данных. DELETE — позволяет удалять строки из таблиц. INSERT — позволяет добавлять строки в таблицу. SELECT — поволит использовать команду Select для чтения из баз данных. UPDATE — позволит редактировать строки таблиц. GRANT OPTION — позволит назначать или удалять права доступа для других пользователей
рис5
Для начала познакомимся СУБД PhpMyAdmin, она позволяет управлять (добавлять, удалять, изменять) записями в БД.
Для этого откройте в Cpanel PHPMyAdmin
Ниже на рисунке отображен внешний вид главной страницы СУБД PhpMyAdmin. В этом окне вы можете создать таблицу, и хранить в ней необходимые записи. Это очень удобно при создании сайтов, так как информация структурирована, и вы можете очень быстро получить любую запись из БД.
Приступим к изучению функционала phpmyadmin.
Для начала работы, нам потребуется создать саму БД (базу данных). У нее будет свое имя, по которому мы потом будем ее искать.
рис6
рис7
Следуя схеме строения БД, нам нужно сделать таблицу. Для этого после создания базы, у вас будет такое окно:
рис8
Здесь я создаю таблицу с именем users и 3 полями в ней.
Дальше phpmyadmin попросит нас задать структуру для каждого поля:
рис9
Здесь в столбце «Поле» нужно указать имя, в «Тип» указываем тип данных, которые будут там храниться (INT — это число, VARCHAR — строка или небольшой(!) текст).
В «Дополнительно» указываем полю с именем «id» параметр «auto_increament», что означает, оно будет увеличиваться каждый раз при вставке каких-либо данных, и задаем ему параметр «Первичный ключ», это значит, что по первому столбцу мы сможем однозначно идентифицировать поле.
«Однозначно идентифицировать поле» — значит даже если имя и фамилия будут одинаковы, столбец «id» будет иметь разные значения (так как он автоматически увеличивается на единицу каждый раз).
Теперь нажимаем «Сохранить». Тем самым мы создали таблицу users, в которой можем хранить имя и фамилию (id не нужно вставлять, mysql сделает все за нас), в БД users.
Таблицу мы создавали для хранения записей. А как их туда вставлять?
рис10
Выбираем в меню «Вставить» и пишем нужные значения в необходимые поля.
Теперь как удалить или изменить значения в базе данных mysql с СУБД PhpMyAdmin:
Для удаления просто перейдите в меню «Обзор» и нажмите красный крестик напротив записи:
рис11
А для редактирования нажмите на карандаш и замените необходимые поля.
Теперь вы можете управлять базой данных mysql используя PhpMyAdmin.
Работа с базой данных mysql из php
Итак, для начала нужно научиться подключаться к уже заведомо созданной БД. Для этого используется вот такой код:
<?php
$connect=mysql_connect("localhost","root","");
/*
Здесь мы подключаемся к базе
используя функцию mysql_connect,
в ней следует указать
три параметра
1)сервер базы данных
2)логин пользователя БД
3)пароль пользователя БД
*/
$db=mysql_select_db("baza");
//Здесь мы указываем
//какую БД будем использовать
?>
В вышеизложенном коде, я подключался к серверу localhost используя логин root который не требует пароля (поэтому его не указываем).
После подключения к базе, мы можем проводить все те операции которые выполняли в СУБД phpmyadmin. То есть вставку, удаление, изменение и получение различной информации.
То есть вставка производится функцией INSERT. Если все прошло успешно, то mysql вернет результат true, или иначе — false.
Полей можно указывать хоть сколько, главное чтобы все они существовали в БД. То есть, к примеру, существует таблица в которой есть поля «name» , «surname» и «city».
Для вставки в нее значений будем использовать такой код:
Удаление выполняется функцией DELETE. Для этого будет примерно вот такой код:
$query="DELETE FROM `users` WHERE `name`='Ruslan' ";
$result=mysql_query($query);
if($result==true)
{
echo "Успешно!";
}
else
{
echo "Ошибка!<br>".mysql_error();
}
То есть мы удалим из таблицы users все строки (ну или одну), где столбец name равен значению Ruslan.
3) Изменение значений в базе данных mysql из php
Также мы можем вносить изменения в уже существующие записи в таблице. К примеру нам надо заменить значение столбца name в строке, где столбец surname имеет значение Huzin. Для этого выполняем такой код:
$query="UPDATE `users` SET `name`='myname' WHERE `surname`='Huzin' ";
$result=mysql_query($query);
if($result==true)
{
echo "Успешно!";
}
else
{
echo "Ошибка!<br>".mysql_error();
}
4) Получение значений из базы данных mysql из php
Теперь самое интересное) Раз мы записали что-то, то ведь должны и получить обратно?)))
К примеру нам нужно достать из таблицы users всю строку где столбец name равен Ruslan.
Для этого нам потребуется чуть другой код, нежели в первых примерах.
Вот собственно и он:
$query="SELECT * FROM WHERE `name`='Ruslan' ";
$result=mysql_query($query);
if($result==true)
{
echo "Успешно!";
}
else
{
echo "Ошибка!<br>".mysql_error();
}
$data=mysql_fetch_array($result);
/*
Теперь в переменной
хранятся данные из таблицы
*/
Тут нам потребовалась еще одна функция, для записи выбранных данных в переменную (массив) на php.
Для того что обратиться к выбранной строке, мы пишем так:
$data[‘имя столбца’]
то есть, чтобы достать фамилию из выбранной строки (где имя было Ruslan), мы на вывод должны написать:
echo $data[‘surname’];
А при выборке из таблицы, писали SELECT *, эта звездочка означает, что нужно выбрать все столбцы из строки.
Если нам надо, к примеру, выбрать только surname, пишем SELECT `surname`.
А для выборки сразу нескольких строк из таблицы, потребуется еще и цикл для их вывода. Это в том случае, если к примеру, строк со столбцом Ruslan будет несколько.
Вот код:
$query="SELECT * FROM WHERE `name`='Ruslan' ";
$result=mysql_query($query);
while($data=mysql_fetch_array($result))
{
echo $data['name']."<br>".$data['surname']."<hr>";
}
Теперь на экран выведутся все строки, у которых столбец name равен значению Ruslan.
Простые mysql запросы
Зная структуру БД, таблиц в БД и полей, можно посылать следующие запросы в MySQL.
Select запросы
слово select, говорит само за себя, и становится понятно, что пользуясь данными запросами, мы будем выбирать (читать) информацию из БД.
SELECT count(*) FROM table_name;
Выведет количество всех записей в таблице
рис 12
SELECT * FROM table_name;
Выбирает все записи из таблицы БД
рис 13
SELECT * FROM table_name LIMIT 2,3;
Выбирает 3 записи из таблицы, начиная с 2 записи. Этот запрос полезен при создании блока страниц навигации.
рис 14
SELECT * FROM person ORDER BY number;
Выберет все записи из таблицы person в порядке возрастания значений поля number
рис15
SELECT * FROM person ORDER BY number DESC;
Выбирает все записи из person, но уже в порядке убывания (т.е. в обратном порядке).
рис 16
SELECT * FROM person ORDER BY number LIMIT 5;
Выбирает 5 записей из таблицы person, в порядке возрастания.
рис 17
SELECT * FROM person WHERE name=’Anna’;
Выбирает все записи из таблицы person, где поле name соответствует значению Anna.
рис18
SELECT * FROM person WHERE name LIKE ‘An%’;
Выбирает все записи из таблицы person, в которой значения поля name начинаются с An.
рис 19
SELECT * FROM person WHERE name LIKE ‘%na’ ORDER BY number ;
Выбирает все записи из таблицы person, где name заканчивается на na, и упорядочивает записи в порядке возрастания значения number.
рис 20
SELECT name, last_name FROM person;
Выбирает все значения полей name и last_name из таблицы person.
рис 21
SELECT DISTINCT site FROM table_name;
Выбирает уникальные (DISTINCT) значения поля site из таблицы table_name. Например, при 5 значениях поля site: sitear.ru, sitear.ru, sitear.ru, yaveterinar.ru, wi-korporaciya.ru; выведет только 3 уникальные значения: sitear.ru, yaveterinar.ru, wi-korporaciya.ru;
рис 22
SELECT * from person where age in (12,15,18);
Выведет все записи таблицы person в которых значения поля age будет равно 12 или 15 или 18.
рис 23
select max(age) from person;
Выберет максимальное значение age из таблицы person.
рис 24
select min(age) from person;
Выберет минимальное значение age из таблицы person.
рис 25
Insert запросы
данные запросы позволяют вставить запись в таблицу БД. Другими словами создать строку в таблице или добавить информацию в таблицу БД. insert into table_name(site, description) values (‘sitear.ru’, ‘SiteAR – создание сайтов’)
Вставит в таблицу table_name, а точнее в поля site и description данной таблицы, соответствующие значения.Update запросы
направлены на изменение уже имеющихся данных в таблице БД.
рис 26
update table_name set site = ‘domain.com’ where id = ‘3’
Изменяет значение поля site на domain.com в таблице table_name где id равен 3.
Delete запросы
удаляют записи из таблицы БД.
рис 27
delete from table_name where id = ‘3’
Удаляет запись из table_name где id равен 3.
рис 28
Сложные mysql запросы
Как уже упоминалось раньше, сложные mysql запросы, работают более, нежели с одной таблицей БД. Данные mysql запросы, мы будем рассматривать более в индивидуальном порядке, так как они сложные и их будет немного. SELECT DISTINCT last_name FROM person, address WHERE person.adress_no = address.address_no AND city LIKE ‘L%’;
или SELECT DISTINCT last_name FROM person p, address adr WHERE p.adress_no = adr.address_no AND city LIKE ‘L%’;
Выводит все уникальные фамилии людей (last_name), которые живут в городе с названием на букву L. (предполагаем, что в таблице address есть поля address_no, city).
Данные примеры сложных mysql запросов, выведут один и тот же результат. Запросы не очень то и сложные, нужно только указать имя таблицы БД, а потом, через точку указать поле таблицы. Или же можно, как во втором примере, дать короткие имена таблицам (p для person, adr для address). Результат запросов будет один и тот же. SELECT heroes.char_name, heroes.count, char_templates.ClassName FROM char_templates, heroes WHERE char_templates.ClassId = heroes.class_id Order by char_templates.ClassName;
или SELECT char_name, count, ClassName FROM heroes left join char_templates on heroes.class_id=char_templates.ClassId;
Берем из таблицы heroes поле char_name, из heroes поле count, из таблицы char_templates поле ClassName, где char_templates.ClassId и heroes.class_id имеют общий идентификатор и сортируем запрос по имени класса героев.
Таким же образом, можно подавать сложные mysql запросы с помощью update, insert, delete и др.
Задание. 1. Создать форму регистрации пользователя. 2. Сделать проверку в базе данных существует ли пользователь с таким логином. 3. Если существует предложить перейти на форму входа на сайт или сменить пароль. 4. Если пользователь не существует, то добавить его в базу данных. 5. Создать форму входа на сайт. 6. Создать форму смены пароля. 7. Создать страницу подтверждения емайла.
<?
//1 соединились с базой данных
mysql_connect("localhost","root","");
mysql_select_db("users");
//2 проверяем были ли отправлены данные из формы
if($_GET['id']>0)
{
mysql_query(
"update `users` set `status`='Ok' where `id`='{$_GET['id']}'");
}
if($_GET['del']>0)
{
mysql_query(
"update `users` set `status`='del' where `id`='{$_GET['del']}'");
}
if(isset($_POST['login']))
{
//2.1 Проверяем есть ли такой пользователь в базе данных
$table=mysql_query(
"select `id` from `users` where `login`='{$_POST['login']}' ");
$row=mysql_fetch_array($table);
//2.2 Если id пользователя больше нуля то выводим сообщение об ошибке
if($row['id']>0)
echo "Извините, но такой пользователь уже зарегистрирован";
else
{
//Если такого пользователя нет то мы его регистрируем
$_POST['password']=MD5($_POST['password']);
mysql_query("insert into `users` (`login`,`password`)
values ('{$_POST['login']}','{$_POST['password']}')");
//сообщаем об успешной регистрации
echo "Поздравляю вас, {$_POST['login']} с успешной регистрацией!";
}
}
?>
<h1>Форма регистрации пользователя</h1>
<form method='post'>
<input name='login' placeholder='Введите логин'><br>
<input name='password' type='password' placeholder='Введите пароль'><br>
<input type='submit' value='Зарегистрироваться'><br>
</form>
<hr>
<h1>Админка. Пользователям не трогать</h1>
<?
$table=mysql_query("select * from `users`");
while($row=mysql_fetch_array($table))
{
if($row['status']!="Ok")
{
echo $row['login'];
echo "<a href='?id={$row['id']}'>Активировать</a>";
echo "<br>";
}
else
{
echo $row['login'];
echo "<a href='?del={$row['id']}'>Заблокировать</a>";
echo "<br>";
}
}
?>
