Введение
В данном уроке мы разберем простую и эффектную систему регистрации пользователей. Она дает возможность просто организовать область, доступную только зарегистрированным пользователям на сайте, и обеспечивает простой процесс регистрации.
sourse
Все происходит под управлением PHP, а данные хранятся в базе данных MySQL.
В системе используется отличная выскальзывающая панель, разработанная Web-kreation.
Шаг 1 – MySQL
Сначала нам надо создать таблицу, которая будет содержать все данные о зарегистрированных пользователях. Код запроса доступен в файле table.sql в архиве с исходниками.
table.sql
--
-- Структура таблицы `tz_members`
--
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, чтобы можно было запустить код на вашем сервере.
Шаг 2 – XHTML
Сначала, нам нужно встроить форму Web-creation в нашу страницу.
demo.php
<!-- Панель -->
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h1>Выскальзывающая панель jQuery</h1>
<h2>Решение по регистрации/входу пользователей на сайт</h2>
</div>
<?php
if(!$_SESSION['id']):
// Если Вы еще не зарегистрированы
?>
<div class="left">
<!-- Форма Входа -->
<form class="clearfix" action="" method="post">
<h1>Вход для зарегистрированных пользователей</h1>
<?php
if($_SESSION['msg']['login-err'])
{
echo '<div class="err">'.$_SESSION['msg']['login-err'].'</div>';
unset($_SESSION['msg']['login-err']);
// This will output login errors, if any
}
?>
<label class="grey" for="username">Имя пользователя:</label>
<input class="field" type="text" name="username" id="username" value="" size="23" />
<label class="grey" for="password">Пароль:</label>
<input class="field" type="password" name="password" id="password" size="23" />
<label><input name="rememberMe" id="rememberMe" type="checkbox" checked="checked" value="1" /> Запомнить меня</label>
<div class="clear"></div>
<input type="submit" name="submit" value="Войти" class="bt_login" />
</form>
</div>
<div class="left right">
<!-- Форма регистрации -->
<form action="" method="post">
<h1>Еще не зарегистрировались? Вводите данные!</h1>
<?php
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>
<input class="field" type="text" name="username" id="username" value="" size="23" />
<label class="grey" for="email">Email:</label>
<input class="field" type="text" name="email" id="email" size="23" />
<label>Пароль будет отправлен Вам по почте.</label>
<input type="submit" name="submit" value="Зарегистрироваться" class="bt_register" />
</form>
</div>
<?php
else:
// Если вы вошли в систему
?>
<div class="left">
<h1>Для зарегистрированных пользователей</h1>
<p>Демонстрационные данные</p>
<a href="registered.php">Перейти на страницу пользователя</a>
<p>- или -</p>
<a href="?logoff">Выйти из системы</a>
</div>
<div class="left right">
</div>
<?php
endif;
// Закрываем конструкцию IF-ELSE
?>
</div>
</div> <!-- /login -->
<!-- Закладка наверху -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li>Здравствуйте <?php echo $_SESSION['usr'] ? $_SESSION['usr'] : 'Гость';?>!</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#"><?php echo $_SESSION['id']?'Открыть панель':'Вход | Регистрация';?></a>
<a id="close" style="display: none;" class="close" href="#">Закрыть панель</a>
</li>
<li class="right"> </li>
</ul>
</div>
</div>
В нескольких местах в коде встречаются операторы PHP, которые проверяют определены ли $_SESSION['usr'] или $_SESSION['id']. Они имеют значения true только в случае если посетитель страницы зарегистрированный пользователь, что позволяет нам показывать скрытый контент для зарегистрированных посетителей.
После формы мы размещаем остальное содержимое страницы.
<div class="pageContent">
<div id="main">
<div class="container">
<h1>Выскальзывающая панель jQuery</h1>
<h2>Простое управление регистрацией с использованием PHP и jQuery</h2>
</div>
<div class="container">
<p>Какой-то текст ...</p>
<div class="clear"></div>
</div>
</div>
В коде нет ничего особенного.
Шаг 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);
// Определяет период жизни куки на две недели
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']=='Login')
{
// Проверяем, что запрос пришел из формы Входа
$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']);
// Создаем куки tzRemember
}
else $err[]='Ошибочное имя пользователя или/и пароль!';
}
if($err)
$_SESSION['msg']['login-err'] = implode('<br />',$err);
// Сохраняем сообщение об ошибке в сессии
header("Location: demo.php");
exit;
}
Здесь куки tzRemember выступает как контрольный элемент для определения, что надо обеспечить выход из системы пользователю, который не отметил чекбокс “Запомнить меня”. Если куки отсутствует (по причине рестарта браузера) и посетитель не отметил опцию "запомнить меня" мы удаляем сессию.
Сессия сама по себе будет оставаться активной в течении двух недель (так установлено в параметре session_set_cookie_params).
А вот и вторая часть demo.php.
else if($_POST['submit']=='Register')
{
// Если запрос отправлен из формы Регистрации
$err = array();
if(strlen($_POST['username'])<4 || 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( 'demo-test@ruseller.com',
$_POST['email'],
'Демонстрация системы регистрации - генерация пароля',
'Ваш пароль: '.$pass);
$_SESSION['msg']['reg-success']='Мы отправили вам email с вашим новым паролем!';
}
else $err[]='Данное имя пользователя уже используется!';
}
if(count($err))
{
$_SESSION['msg']['reg-err'] = implode('<br />',$err);
}
header("Location: demo.php");
exit;
}
$script = '';
if($_SESSION['msg'])
{
// Скрипт показывает выскальзывающую панель на странице загрузки
$script = '
<script type="text/javascript">
$(function(){
$("div#panel").show();
$("#toggle a").toggle();
});
</script>';
}
Сохраняем все определенные ошибки в массиве $err, который позже присваивается переменной $_SESSION. Таким образом сохраняется доступ к нему после перенаправления браузера.
На некторых сайтах может быть получено предупреждение, когда отправляется форма или при следующем обновлении страницы, что данные уже были отправлены. Это может быть проблемой, так как ведет к дублированию регистраций и лишней нагрузке на сервер.
Мы используем функцию header, чтобы предотвратить ошибку с помощью перенаправления браузера на туже страницу. Таким образом обновляется вид страницы без того, что браузер распознает это как запрос из формы. В результате происходит обновление страницы и нет пересылки данных.
Но так как мы используем $_SESSION для хранения всех обнаруженных ошибок, то очень важно, чтобы мы сбрасывали все переменные, как только ошибка будет показана пользователю. В противном случае она будет отображена на каждом виде страницы.
Также используется дополнительный скрипт, который показывает панель на странице загрузки, так что сообщение видно пользователю.
Система регистрации/входа
Система регистрации/входа
Шаг 4 – CSS
Выскальзывающая панель использует свой собственный файл со стилями. Таким образом нам остается только создать стиль для нашей страницы.
demo.css
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
/* Сброс правил */
margin:0px;
padding:0px;
}
body{
color:#555555;
font-size:13px;
background: #eeeeee;
font-family:Arial, Helvetica, sans-serif;
width: 100%;
}
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
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- Фиксируем PNG для IE6 -->
<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
<!--[IE 6]>
<script type="text/javascript" src="login_panel/js/pngfix/supersleight-min.js"></script>
<![endif]-->
<script src="login_panel/js/slide.js" type="text/javascript"></script>
<?php echo $script; ?>
В первой строке включается библиотека jQuery из CDN Google. Затем следует заплатка для IE6 PNG для элементов прозрачности. Затем включается скрипт панели
Переменная $script показывает панель на странице загрузки при необходимости.
Все. Система готова.