Создаем панель с регистрацией с помощью PHP

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

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

Шаг 1. XHTML

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

demo.php

</pre>

<h1>WWW.RUDEBOX.ORG.UA</h1>

<h2>Добро пожаловать на нашем сайте</h2>

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

<h2>Сглашение</h2>

Материалы взяты только в ознакомительных целях и пренадлежат ихним владельцам <a title="Читать соглашение" href="http://www.rudebox.org.ua/home/soglashenie/"> »</a></div>

<h1>Пожалуйста авторизируйтесь!</h1>

if($_SESSION['msg']['login-err'])

{

echo '

<div class="err">'.$_SESSION['msg']['login-err'].'</div>

unset($_SESSION['msg']['login-err']);

}

<label class="grey" for="username">Имя пользователя:</label>

<label class="grey" for="password">Пароль который пришел на почту:</label>

<label><input id="rememberMe" type="checkbox" name="rememberMe" value="1" checked="checked" /> Запомнить меня</label>

<h1>Еще не зарегистрировалсь? Тогда чего ждете!</h1>

if($_SESSION['msg']['reg-err'])

{

echo '

<div class="err">'.$_SESSION['msg']['reg-err'].'</div>

unset($_SESSION['msg']['reg-err']);

}

if($_SESSION['msg']['reg-success'])

{

echo '

<div class="success">'.$_SESSION['msg']['reg-success'].'</div>

unset($_SESSION['msg']['reg-success']);

}

<label class="grey" for="username">Имя пользователя:</label>

<label class="grey" for="email">Email:</label>

<label>Пароль будет отправлен Вам по почте.</label>

<h1>Для зарегистированных пользователей</h1>

Демонстрационные данные

<a href="registered.php">Перейти на страницу пользователя</a>

- или -

<a href="?logoff">Выйти из системы</a></div>

</div>

</div>

<li>Здравствуй, !</li>

<li id="toggle"><a id="close" class="close" style="display: none;" href="#">Закрыть панель</a></li>

</ul>

</div>

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

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

</pre>

<h1>Создаем пенель регистрации/авторизации</h1>

<h2>Простое управление регистрацией с использованием PHP и jQuery</h2>

</div>

<div class="container">В данной демонстрации мы рассмотрим как создать панель регистрации/авторизации. .

.После регистрации, на указанную Вами почту будет выслано письмо с паролем.

<a href="registered.php">Демонстрационная страница</a>, доступная только для <strong>зарегистрированных пользователей</strong>.

</div>

Шаг 2. MySQL

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

table.sql

CREATE TABLE `tz_members` (

`id` int(11) NOT NULL auto_increment,

`usr` varchar(32) collate utf8_unicode_ci NOT NULL default '',

`pass` varchar(32) collate utf8_unicode_ci NOT NULL default '',

`email` varchar(255) collate utf8_unicode_ci NOT NULL default '',

`regIP` varchar(15) collate utf8_unicode_ci NOT NULL default '',

`dt` datetime NOT NULL default '0000-00-00 00:00:00',

PRIMARY KEY (`id`),

UNIQUE KEY `usr` (`usr`)

) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

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

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

Шаг 3. PHP

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

demo.php

define('INCLUDE_CHECK',true);

require 'connect.php';

require 'functions.php';

// Данные два файла нужно включать только в случае определения INCLUDE_CHECK

session_name('tzLogin');

// Запуск сессии

session_set_cookie_params(2*7*24*60*60);

// Устанавливаем время жизни куки 2 недели

session_start();

if($_SESSION['id'] && !isset($_COOKIE['tzRemember']) && !$_SESSION['rememberMe'])

{

// Если вы вошли в систему, но куки tzRemember (рестарт браузера) отсутствует

// и вы не отметили чекбокс 'Запомнить меня':

$_SESSION = array();

session_destroy();

// Удалаяем сессию

}

if(isset($_GET['logoff']))

{

$_SESSION = array();

session_destroy();

header("Location: demo.php");

exit;

}

if($_POST['submit']=='Войти')

{

// Проверяем, что представлена форма Войти

$err = array();

// Запоминаем ошибки

if(!$_POST['username'] || !$_POST['password'])

$err[] = 'Все поля должны быть заполнены!';

if(!count($err))

{

$_POST['username'] = mysql_real_escape_string($_POST['username']);

$_POST['password'] = mysql_real_escape_string($_POST['password']);

$_POST['rememberMe'] = (int)$_POST['rememberMe'];

// Получаем все ввденые данные

$row = mysql_fetch_assoc(mysql_query("SELECT id,usr FROM tz_members WHERE usr='{$_POST['username']}' AND pass='".md5($_POST['password'])."'"));

if($row['usr'])

{

// Если все в порядке - входим в систему

$_SESSION['usr']=$row['usr'];

$_SESSION['id'] = $row['id'];

$_SESSION['rememberMe'] = $_POST['rememberMe'];

// Сохраняем некоторые данные сессии

setcookie('tzRemember',$_POST['rememberMe']);

}

else $err[]='Ошибочный пароль или/и имя пользователя!';

}

if($err)

$_SESSION['msg']['login-err'] = implode('

',$err);

// Сохраняем сообщение об ошибке сессии

header("Location: demo.php");

exit;

}

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

demo.php

else if($_POST['submit']=='Зарегистрироваться')

{

// Проверяем, что представлена форма Зарегистрироваться

$err = array();

if(strlen($_POST['username'])32)

{

$err[]='Имя пользователя должно содержать от 3 до 32 символов!';

}

if(preg_match('/[^a-z0-9\-\_\.]+/i',$_POST['username']))

{

$err[]='Ваше имя пользователя сожержит недопустимые символы!';

}

if(!checkEmail($_POST['email']))

{

$err[]='Email не правильный!';

}

if(!count($err))

{

// Если нет ошибок

$pass = substr(md5($_SERVER['REMOTE_ADDR'].microtime().rand(1,100000)),0,6);

// Генерируем случайный пароль

$_POST['email'] = mysql_real_escape_string($_POST['email']);

$_POST['username'] = mysql_real_escape_string($_POST['username']);

// Получаем введеные данные

mysql_query(" INSERT INTO tz_members(usr,pass,email,regIP,dt)

VALUES(

'".$_POST['username']."',

'".md5($pass)."',

'".$_POST['email']."',

'".$_SERVER['REMOTE_ADDR']."',

NOW()

)");

if(mysql_affected_rows($link)==1)

{

send_mail( 'admin@rudebox.org.ua',

$_POST['email'],

'Регистрация в системе демонстрации rudebox demo',

'Ваш пароль: '.$pass);

$_SESSION['msg']['reg-success']='Мы отправили вам письмо с вашим новым паролем!';

}

else $err[]='Данное имя пользователя уже занято!';

}

if(count($err))

{

$_SESSION['msg']['reg-err'] = implode('

',$err);

}

header("Location: demo.php");

exit;

}

$script = '';

if($_SESSION['msg'])

{

// Скрипт ниже показывает выскальзывающую панель

$script = '

$(function(){ $("div#panel").show(); $("#toggle a").toggle(); });

// ]]></script>';

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

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

Шаг 4. CSS

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

demo.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{

/* Сброс правил */

margin:0px;

padding:0px;

}

body{

text-align: justify;

color:#555555;

font-size:13px;

background: #eeeeee;

font-family:Arial, Helvetica, sans-serif;

width: 100%;

background: #000000 url(login_panel/css/header.jpg) no-repeat center top;

}

h1{

font-size:28px;

font-weight:bold;

font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;

letter-spacing:1px;

}

h2{

font-family:"Arial Narrow",Arial,Helvetica,sans-serif;

font-size:10px;

font-weight:normal;

letter-spacing:1px;

padding-left:2px;

text-transform:uppercase;

white-space:wrap;

margin-top:4px;

color:#888888;

}

#main p{

padding-bottom:8px;

}

.clear{

clear:both;

}

#main{

width:800px;

/* Центрируем по середине страницы */

margin:60px auto;

}

.container{

margin-top:20px;

background:#FFFFFF;

border:1px solid #E0E0E0;

padding:15px;

/* Скругленные углы */

-moz-border-radius:20px;

-khtml-border-radius: 20px;

-webkit-border-radius: 20px;

border-radius:20px;

}

.err{

color:red;

}

.success{

color:#00CC00;

}

a, a:visited {

color:#00BBFF;

text-decoration:none;

outline:none;

}

a:hover{

text-decoration:underline;

}

.tutorial-info{

text-align:center;

padding:10px;

}

Шаг 5. jQuery

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

demo.php

<!--[IE 6]>

<![endif]-->

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