Отправить cookie в браузер

Для выполнения действий на сайте существует большое количество разнообразных библиотек PHP и JavaScript. Опытные веб-разработчики пишут код без дополнительных плагинов, который будет выполнять ту или иную задачу. В этой статье Я поделюсь своим опытом, работы с cookie (куки).

Что такое cookies (куки) и для чего они нужны в этой статье рассматриваться не будет.

Для примера работы с куки, рассмотрим всплывающее окно на веб-сайте. В настоящее время на многих сайтах срабатывает всплывающее окно с помощью библиотеки jQuery читайте урок «Всплывающее окно для сайта».

Создать всплывающее окно для сайта и добавить его в куки можно без библиотеки jQuery. Достаточно написать несколько строк PHP и добавить несколько функций JavaScript.

Что бы легче было понять Я нарисовал схему работы веб-формы. Стрелками указан порядок взаимодействие браузера с сервером и отправки электронной почты на адрес указанный в поле формы.

Схема работы веб-формы в браузере пользователя
Простая схема работы веб-формы в браузере

Переменная $_COOKIE определяет полученные в результате запроса содержимое cookie. Переменную $_COOKIE мы применим для чтения cookie в браузере пользователя. isset определит значение сессии с именем переменной и вернёт TRUE если в браузере уже есть сессия с названием которое содержит переменная $_COOKIE. В этом случае код всплывающего окна выполнятся не будет.

Вот как использовать переменную для чтения сессии cookie в браузере пользователя:

<?php
   if (!isset($_COOKIE['popup']))
?>

Дальше создадим переменную которая выведет HTML код всплывающего окна. Для этого Я использовал переменную с функцией file_get_contents.

file_get_contents — читает содержимое файла в строку, этот файл может содержать пробелы кавычки, скобки и т.д. Функция file_get_contents избавит нас от написания кода HTML в echo и обратного слеша.

Создайте файл cookie.php с кодом ниже:

<?php
   if (!isset($_COOKIE['popup'])) {
   $html = file_get_contents('путь к файлу html.php');
   echo $html;
   }

Если файл находится на первом или втором уровне в корне каталога, возможно потребуется написать так путь к файлу html.php, true подробности можно узнать здесь.

к меню ↑

Что бы сбросить куки в браузере нужно вызвать строку PHP setcookie('popup', '', 0, '/'); Замете, что функции time() в этом способе очистить куки нет.

Для того что бы добавить кнопку очистки куки в файле cookie.php, нужно создать переменную равную FALSE перед проверкой сессии куки. Значение TRUE для переменной определить после проверки куки. Дальше передачу содержания вывести в функцию, если функция принимает куки добавить кнопку очистки куки.

Вот простой способ сообщить о том, что очистка куки выполнилось успешно:

$var = 'Поздравляю, куки успешно удалены!';
print '<script>alert("'.$var.'");</script>'

Второй способ очистить куки с помощью JavaScript:

function deleteCookie(popup) {
	    setCookie(popup, null, { expires: -1 })
}
к меню ↑

HTML код всплывающего окна

Для HTML кода всплывающего окна создайте файл html.php. Всплывающее окно будет содержать только три элемента: поле, кнопка и крестик для закрытия окна. Вы можете оформить окно на своё усмотрение.

Форма отправки электронного адреса:

<div id="popup" role="dialog">
<div onclick="show('none')" class="modal"></div>
  <form id="myform" action="mailer.php" method="post"
   onsubmit="javascript:return validate('myform','email');">
    <input type="email" name="email" id="email" value="Ваш email">
    <input type="submit" name="submit" value="Отправить">
  </form>
    <a href="#" class="close" title="Закрыть" onclick="confirm();location.reload();">&times;</a>
</div>

Существует и другой способ показать окно с полем ввода, окно alert. Как передать переменную из JavaScript в PHP и обратно смотрите на странице «Взаимодействие PHP и JavaScript»

к меню ↑

Показать всплывающее окно через время

Как сделать так, чтобы всплывающее окно открывалось не сразу при первом посещении сайта пользователем, а через несколько секунд или минут и даже часов. Самый простой способ сделать это добавить setTimeout() с идентификатором всплывающего окна.

Открыть всплывающее окно через 7 секунд:

setTimeout(function() {
 document.getElementById('popup').style.display='block'";
}, 7000);

Поскольку нам нужно знать больше, вот код для закрытия окна через 30 секунд:

setTimeout(function() {
 document.getElementById('popup').style.display='none'";
}, 3000);
к меню ↑

Валидатор для поля email

В форме отправки эл.адреса обратите внимание на строку: onsubmit="javascript:return validate('myform','email'); — это валидатор JavaScript для поля email. Этот скрипт хорош тем, что не отправляет данные для проверки на сервер, если пользователь отправляет пустое поле или написал что то не похоже на эл.адрес, alert покажет предупреждение на этой странице.

function validate(myform,email) {
   var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
   var address = document.forms[myform].elements[email].value;
   if(reg.test(address) == false) {
      alert('Введите корректный e-mail');
      return false;
   }
}

Также скрипт содержит «Регулярные выражения для формы» поля email.

Список проверки для всех типов вводимых данных в поле веб-формы:

к меню ↑

Добавить куки

Представим, пользователь не хочет заполнять форму и закрыть всплывающее окно. После закрытия окна крестиком произойдёт запись куки в браузер пользователя на 30 дней.

function setCookie (name, value, seconds) {
    if (typeof(seconds) != 'undefined') {
        var date = new Date();
        date.setTime(date.getTime() + (seconds) * 2592000);
        var expires = "; expires=" + date.toGMTString();
    }
    else {
        var expires = "";
    }

    document.cookie = name + "=" + value + expires + "; path=/";

function confirm() {
    setCookie("popup", "popup", 10);
    document.getElementById("popup").style.display = "none";
}
}

Конечно пользователь может удалить куки в настройках браузера.

Второй способ закрыть всплывающее окно — это кликнуть курсором мыши вне области окна с формой. Это будет означать что пользователь “воздержался” или отложил это вопрос на потом. Поэтому запись в куки не должна происходить. Для пользователя который “воздержался”, при следующем заходе на страницу, всплывающее окно появится заново, пока пользователь не нажмёт на крестик или не заполнит форму.

function show() {
    document.getElementById("popup").style.display = "none";
}
к меню ↑

Заключение

В этом уроке Я привёл пример всплывающего окна без применения больших библиотек jQuery. Всего несколько строк PHP и JavaScript с экономят время загрузки веб-страницы. В следующем уроке Я напишу как добавить обработчик формы и запись эл.адреса пользователя в базу данных PDO.

Если Вы нашли ошибку в примере или знаете способ сделать код меньше, сообщите мне в комментариях.