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

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

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

Шаг 1. XHTML

Для начала нам необходимо прикрутить форму web-creation в нашей странице.

demo.php

В нескольких местах в коде встречаются операторы PHP, которые проверяют определены ли $_SESSION['usr'] или $_SESSION['id']. Они имеют значения true только в случае если посетитель страницы зарегистрированный пользователь, что позволяет нам показывать скрытый контент для зарегистрированных посетителей.

После формы мы размещаем остальное содержимое страницы.

Шаг 2. MySQL

Теперь нам необходимо создать таблицу которая будет содержать все данные о зарегистрированных пользователях. Код запроса доступен в файле table.sql в архиве с исходниками.

table.sql

Здесь мы определяем id как integer с опцией auto_increment – он будет автоматически назначаться для каждого нового зарегистрированного пользователя. Также usr определяется как unique key – в таблице не допускается существование двух записей с одинаковым именем пользователя.

Примечание! После создания таблицы нужно заполнить переменные для соединения с вашей базой данных в файле connect.php, чтобы можно было запустить код на вашем сервере.

Шаг 3. PHP

Теперь будем конвертировать форму в завершенную системы регистрации и входа. Для того, чтобы решить поставленную задачу нам понадобиться маленькая хитрость, кроме обычного кода PHP. Для удобности код был разделен на две части.

demo.php

Куки tzRemember выступают как контрольный элемент для определения, что надо обеспечить выход из системы пользователю, который не отметил чекбокс “Запомнить меня”. Если куки отсутствует (по причине рестарта браузера) и посетитель не отметил опцию "запомнить меня" мы удаляем сессию. Сессия сама по себе будет оставаться активной в течении двух недель (так установлено в параметре session_set_cookie_params).

demo.php

Сохраняем все определенные ошибки в массиве $err, который позже присваивается переменной $_SESSION. Таким образом сохраняется доступ к нему после перенаправления браузера.

Но так как мы используем $_SESSION для хранения всех обнаруженных ошибок, то очень важно, чтобы мы сбрасывали все переменные, как только ошибка будет показана пользователю. В противном случае она будет отображена на каждом виде страницы.

Шаг 4. CSS

Все стили для панели можно потрогать в исходниках, мы рассмотрим некоторые простые стили для страницы и информацией:

demo.css

Шаг 5.  jQuery

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

demo.php

Переменная $script показывает панель на странице загрузки при необходимости. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: