Система регистрации пользователей на PHP, MySql и jQuery

Сегодня мы сделаем простую и красивую систему регистрации и авторизации пользователей.

Для создания нашей авторизационной формы мы будем использовать sliding jQuery panel. Также вы можете посмотреть, как создать регистрацию в один клик от Google

MySql

Для начала нам необходимо создать таблицу, которая будет хранить записи о регистрациях.

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, это значит, что для каждого нового пользователя автоматически будет назначаться новый id, на единицу больше предыдущего. Поле usr — unique, тем самым у нас не будет двух пользователей с одинаковыми логинами. Также необходимо указать параметры для соединения с базой в файле connect.php.

HTML

Файл index.php. Регистрационная форма:

<!-- Panel -->
<div id="toppanel">

<div id="panel">
<div>
<div>
<h1>The Sliding jQuery Panel</h1>
<h2>A register/login solution</h2>
<p>You are free to use this login and registration system in you sites!</p>
<h2>A Big Thanks</h2>
<p>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>
<!-- Login Form -->
<form action="" method="post">
<h1>Member Login</h1>

<?php
if($_SESSION['msg']['login-err'])
{
	echo '<div>'.$_SESSION['msg']['login-err'].'</div>';
	unset($_SESSION['msg']['login-err']);
	// вывод сообщений об ошибках при авторизации
}
?>

<label for="username">Username:</label>
<input type="text" name="username" id="username" value="" size="23" />
<label for="password">Password:</label>
<input type="password" name="password" id="password" size="23" />
<label><input name="rememberMe" id="rememberMe" type="checkbox" checked="checked" value="1" />  Remember me</label>
<div></div>
<input type="submit" name="submit" value="Login" />
</form>

</div>

<div>

<!-- Register Form -->

<form action="" method="post">
<h1>Not a member yet? Sign Up!</h1>

<?php

if($_SESSION['msg']['reg-err'])
{
	echo '<div>'.$_SESSION['msg']['reg-err'].'</div>';
	unset($_SESSION['msg']['reg-err']);
	// вывод ошибок регистрации
}

if($_SESSION['msg']['reg-success'])
{
	echo '<div>'.$_SESSION['msg']['reg-success'].'</div>';
	unset($_SESSION['msg']['reg-success']);
	// сообщение об успешной регистрации
}

?>

<label for="username">Username:</label>
<input type="text" name="username" id="username" value="" size="23" />
<label for="email">Email:</label>
<input 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" />
</form>

</div>

<?php
else:
// если авторизован
?>

<div>
<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>
</div>

<?php
endif;
?>

</div>
</div> <!-- /login -->

<!-- The tab on top -->
<div>
<ul>
<li> </li>
<li>Hello <?php echo $_SESSION['usr'] ? $_SESSION['usr'] : 'Guest';?>!</li>
<li>|</li>
<li id="toggle">
<a id="open" href="#"><?php echo $_SESSION['id']?'Open Panel':'Log In | Register';?></a>
<a id="close" style="display: none;" href="#">Close Panel</a>
</li>
<li> </li>
</ul>

</div> <!-- / top -->
</div> <!--panel -->

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

<div>

<div id="main">

<div>
<h1>A Cool Login System</h1>
<h2>Easy registration management with PHP & jQuery</h2>
</div>

<div>
<p>This is a ...</p>
<div></div>

</div>

</div>

PHP

Настало время приступить к серверной части нашей системы регистрации.

define('INCLUDE_CHECK',true);

require 'connect.php';
require 'functions.php';

session_name('tzLogin');
// создаем сессию

session_set_cookie_params(2*7*24*60*60);
// время хранения cookie 2 недели

session_start();

if($_SESSION['id'] && !isset($_COOKIE['tzRemember']) && !$_SESSION['rememberMe'])
{
	// если авторизован, но не было задано Remember me:

	$_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']);
		}
		else $err[]='Wrong username and/or password!';
	}

	if($err)
		$_SESSION['msg']['login-err'] = implode('<br />',$err);
		// сохраняем сообщение об ошибке

	header("Location: demo.php");
	exit;
}

Если не задан параметр tzRemember (например, из-за перезапуска браузера) мы удаляем сессию, т.к. пользователь не отметил «Remember me».

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);
		// Generate a random password

		$_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@example.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>';
}

Мы храним ошибки в массиве сессии, это позволит нам использовать их даже после редиректа.

CSS

Код 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;
	/* Centering it in the middle of the page */
	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;
}

jQuery

<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; ?>

Наша система регистрации готова!