Небольшое вступление
Сегодня мы создадим классную и одновременно простую систему входа и регистрации, которая упростит процесс регистрации, а так же позволит вам создать на сайте область только для зарегистрированных пользователей.
Система будет управляться при помощи PHP, а все регистрационные данные сохраняться MySQL.
Для того, чтобы воплотить нашу задумку в жизнь нам понадобится раздвигающаяся панель, выполненная посредством jQuery, которую разработала команда Web-kreation.
Демо находится на сайте автора, так как для правильной работы требуется настроить подключение к БД.
Шаг 1 – MySQL
Сначала мы создадим таблицу, в которую будут вноситься все регистрационные данные. А вот и код:
table.sql
--
-- Table structure for table `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 как единое целое с auto_increment , он будет автоматически приписываться каждому новозарегистрировавшемуся пользователю. А usr будет выступать как уникальный ключ, так что теперь никто не сможет зарегистрироваться под уже занятым ником.
Позже мы еще раз воспользуемся этим свойством с целью установить, выбран ли ник.
Как только создадите таблицу, не забудьте внести учетные записи базы данных в файл connect.php, так чтобы вы смогли запустить демо на вашем сайте.
Шаг 2 – XHTML
Итак, сначала нам надо вставить форму в нашу страницу.
demo.php
<!-- панель -->
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h1>The Sliding jQuery Panel</h1>
<h2>A register/login solution</h2>
<p class="grey">You are free to use this login and registration system in you sites!</p>
<h2>A Big Thanks</h2>
<p class="grey">This tutorial was built on top of <a href="http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Go to site">Web-Kreation</a>'s amazing sliding panel.</p>
</div>
<?php
if(!$_SESSION['id']):
// Если вы не зарегистрированы
?>
<div class="left">
<!-- Форма входа -->
<form class="clearfix" action="" method="post">
<h1>Member Login</h1>
<?php
if($_SESSION['msg']['login-err'])
{
echo '<div class="err">'.$_SESSION['msg']['login-err'].'</div>';
unset($_SESSION['msg']['login-err']);
// Будет сообщать об ошибках, которые могут возникнуть при вводе данных для входа на сайт
}
?>
<label class="grey" for="username">Username:</label>
<input class="field" type="text" name="username" id="username" value="" size="23" />
<label class="grey" for="password">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" /> Remember me</label>
<div class="clear"></div>
<input type="submit" name="submit" value="Login" class="bt_login" />
</form>
</div>
<div class="left right">
<!-- Регистрационная форма -->
<form action="" method="post">
<h1>Not a member yet? Sign Up!</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">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>A password will be e-mailed to you.</label>
<input type="submit" name="submit" value="Register" class="bt_register" />
</form>
</div>
<?php
else:
// Если пользователь входит на сайт
?>
<div class="left">
<h1>Members panel</h1>
<p>You can put member-only data here</p>
<a href="registered.php">View a special member page</a>
<p>- or -</p>
<a href="?logoff">Log off</a>
</div>
<div class="left right">
</div>
<?php
endif;
// Закрывает IF-ELSE конструкцию
?>
</div>
</div> <!-- /login -->
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li>Hello <?php echo $_SESSION['usr'] ? $_SESSION['usr'] : 'Guest';?>!</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#"><?php echo $_SESSION['id']?'Open Panel':'Log In | Register';?></a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
</div> <!--panel -->
В некоторых местах кода есть PHP-операторы, которые проверяют какая переменная установлена: $_SESSION['usr'] или $_SESSION['id']. Но они работают, когда посетитель входит на сайт, так как именно они позволяют показать контент, предназначенный только для зарегистрированных пользователей. Чуть позже мы все детально разберем.
Так пришла пора для остальной части страницы:
<div class="pageContent">
<div id="main">
<div class="container">
<h1>A Cool Login System</h1>
<h2>Easy registration management with PHP & jQuery</h2>
</div>
<div class="container">
<p>This is a ...</p>
<div class="clear"></div>
</div>
</div>
В этой части нет ничего сложного, поэтому предлагаю перейти к созданию PHP файла.
Шаг 3 – PHP
Пора превратить нашу форму в самостоятельную систему регистрации и входа. Для этого нам понадобится нечто большее, чем стандартные свойства PHP. Я разделю код на две части.
Когда вы работаете над большим и сложным проектом, лучше разделить большой код на несколько файлов, а затем задействовать только нужный.
Но давайте вернемся к нашему коду:
define('INCLUDE_CHECK',true);
require 'connect.php';
require 'functions.php';
// Эти два файла запускаются, только если активирована переменная INCLUDE_CHECK
session_name('tzLogin');
// Starting the session
session_set_cookie_params(2*7*24*60*60);
// Cookies хранятся две недели
session_start();
if($_SESSION['id'] && !isset($_COOKIE['tzRemember']) && !$_SESSION['rememberMe'])
{
// Если пользователь входит на сайт, но у него нет tzRemember cookie (исчезают при перезапуске браузера)
// и он не активировал опцию rememberMe:
$_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[] = 'All the fields must be filled in!';
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 cookie
}
else $err[]='Wrong username and/or password!';
}
if($err)
$_SESSION['msg']['login-err'] = implode('<br />',$err);
// Сохраняет сообщения об ошибках, произошедших за текущую сессию
header("Location: demo.php");
exit;
}
tzRemember cookie определяют нужно ли прекратить обслуживание пользователей, которые не воспользовались опцией “remember me”. Если tzRemember cookie отсутствуют (в связи с перезапуском браузера) и пользователь не поставил флажок у пункта “remember me” при входе на сайт, сессия разрывается.
Сама сессия может храниться две недели (это указано в session_set_cookie_params).
Теперь давайте ознакомимся со второй частью demo.php.
else if($_POST['submit']=='Register')
{
// Если регистрационная форма принята
$err = array();
if(strlen($_POST['username'])<4 || strlen($_POST['username'])>32)
{
$err[]='Your username must be between 3 and 32 characters!';
}
if(preg_match('/[^a-z0-9\-\_\.]+/i',$_POST['username']))
{
$err[]='Your username contains invalid characters!';
}
if(!checkEmail($_POST['email']))
{
$err[]='Your email is not valid!';
}
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@tutorialzine.com',
$_POST['email'],
'Registration System Demo - Your New Password',
'Your password is: '.$pass);
$_SESSION['msg']['reg-success']='We sent you an email with your new password!';
}
else $err[]='This username is already taken!';
}
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 для сохранения ошибок, важно установить эти переменные на ''0'', и указать пользователю на ошибку один раз. Иначе ошибки будут выскакивать при каждом обновлении страницы (см. выделенные строчки в XHTML коде).
Также посмотрите на то, как мы вводим дополнительный скрипт (см. строчки 60-70 второй части PHP кода), он отображает нашу панель при загрузке страницы.
Теперь давайте ознакомимся с CSS кодом.
Шаг 4 – CSS
Итак, пора задать стили нашей раздвигающейся панели:
demo.css
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
/* The reset rules */
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:nowrap;
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;
/* Rounded corners */
-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 FIX for IE6 -->
<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
<!--[if lte 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 из Google’s CDN. Затем идет специальная настройка для IE6, обеспечивающая прозрачность PNG файлов и, наконец, мы подключаем сценарий панели.
Внизу страницы - переменная $script, которая показывает панель на странице.
Вот и все! Код можно применять:)
Заключение
Теперь вы не только знаете, как создать фантастическую форму, но и как превратить ее в функциональную систему регистрации и входа. Но не останавливайтесь на достигнутом, а развивайте дизайн дальше.