Создание формы входа
с PHP, MySQL и Jquery
Сегодня мы делаем простую систему Входа /
регистрации. Это даст возможность посетителям войти на ваш сайт и пройти простой
процесс регистрации.
ДЕМО СКАЧАТЬ
Шаг 1 - MySQL
Сначала мы должны создать таблицу, которая будет содержать
все регистрационные данные. Этот код доступен в table.sql .
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;
Обратите внимание, что мы определили идентификатор в виде
целого числа с auto_increment - он автоматически назначается
каждому посетителю сайта. Кроме того, мы определили USR
в качестве уникального ключа - нет двух пользователей с одинаковыми
именами.
Мы позже используем это в регистрации, чтобы определить, было ли
принято имя пользователя.
После создания таблицы, не забудьте заполнить учетные данные
базы данных в connect.php так что вы можете запустить демо на
своем сервере.
Шаг 2 - XHTML
Во-первых, мы должны включать форму веб-Kreation в нашей странице.
demo.php
<!-- Panel -->
<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']):
// If you are not logged in
?>
<div class="left">
<!-- Login Form -->
<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']);
//
This will output login errors, if any
}
?>
<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">
<!-- Register Form -->
<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']);
//
This will output the registration errors, if any
}
if($_SESSION['msg']['reg-success'])
{
echo
'<div
class="success">'.$_SESSION['msg']['reg-success'].'</div>';
unset($_SESSION['msg']['reg-success']);
//
This will output the registration success message
}
?>
<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:
// If you are logged in
?>
<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;
// Closing the IF-ELSE construct
?>
</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
операторы, которые проверяют li $ _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>
Шаг 3 - PHP
Пора преобразовать форму полной регистрации и авторизации
системы. Чтобы добиться этого, нам понадобится больше, чем обычное,
количество PHP. Я разделил код на две части.
Если вы планируете добавить больше кода, было бы хорошей
идеей, разбить его на несколько файлов, которые включаются при
необходимости. Это способствует развитию крупных проектов и позволяет
повторное использование кода в разных частях сайта.
Но давайте посмотрим, как мы сделали это здесь.
demo.php
define('INCLUDE_CHECK',true);
require 'connect.php';
require 'functions.php';
// Those two files can be included only if
INCLUDE_CHECK is defined
session_name('tzLogin');
// Starting the session
session_set_cookie_params(2*7*24*60*60);
// Making the cookie live for 2 weeks
session_start();
if($_SESSION['id'] &&
!isset($_COOKIE['tzRemember']) && !$_SESSION['rememberMe'])
{
// If
you are logged in, but you don't have the tzRemember cookie (browser restart)
//
and you have not checked the rememberMe checkbox:
$_SESSION = array();
session_destroy();
//
Destroy the session
}
if(isset($_GET['logoff']))
{
$_SESSION = array();
session_destroy();
header("Location: demo.php");
exit;
}
if($_POST['submit']=='Login')
{
//
Checking whether the Login form has been submitted
$err
= array();
//
Will hold our errors
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'];
// Escaping all input data
$row = mysql_fetch_assoc(mysql_query("SELECT id,usr FROM tz_members
WHERE usr='{$_POST['username']}' AND
pass='".md5($_POST['password'])."'"));
if($row['usr'])
{
// If everything is OK login
$_SESSION['usr']=$row['usr'];
$_SESSION['id'] = $row['id'];
$_SESSION['rememberMe'] = $_POST['rememberMe'];
// Store some data in the session
setcookie('tzRemember',$_POST['rememberMe']);
// We create the tzRemember cookie
}
else $err[]='Wrong username and/or password!';
}
if($err)
$_SESSION['msg']['login-err'] = implode('<br />',$err);
// Save the error messages in the session
header("Location: demo.php");
exit;
}
Здесь tzRemember действует как контроль, должны
ли мы войти в выключения пользователей, которые не отмечены в "запомнить
меня" флажок. Если нет (из-за перезапуска браузера) и посетитель не
проверил опцию Remember Me, мы уничтожаем сессию.
Сам сеанс остается в течение двух недель (как
установлено session_set_cookie_params ).
Давайте посмотрим, вторую часть demo.php .
else if($_POST['submit']=='Register')
{
// If
the Register form has been submitted
$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))
{
// If there are no errors
$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']);
// Escape the input data
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'])
{
// The
script below shows the sliding panel on page load
$script = '
<script type="text/javascript">
$(function(){
$("div#panel").show();
$("#toggle a").toggle();
});
</script>';
}
Мы храним все встречающиеся ошибки в ошибаться $ массива,
который позже назначенного на $ _SESSION переменной. Это
позволяет ему быть доступным после перенаправления браузера.
Вы могли заметить, на некоторых сайтах, что, когда вы заполнили
форму, а затем обновите страницу, данные передаются снова и снова. Это
может стать проблематичным, поскольку это может привести к двойной регистрации
и ненужной нагрузке на сервер.
Мы используем функцию заголовка, чтобы предотвратить это,
путем перенаправления браузера на той же странице. Это будет обновление на
страницы, без браузера, связывающей его с формой входа. Результатом
является то, что, при обновлении страницы, никакие данные не отправляются.
Также обратите внимание, как мы создаем дополнительный
скрипт (строки 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;
/* 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;
}
Шаг 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>
Сначала мы включаем библиотеку
JQuery от CDN
Google. Позже специальное
исправление для вопросов прозрачности в IE6 PNG и, наконец, сценарий Группы
вход.
В нижней части страницы находится переменная $ сценарий -
это показывает панель при загрузке страницы, если это необходимо.
Вывод
Сегодня мы узнали, как использовать фантастический компонент
формы и превратить его в функциональный Вход / Регистрация.
ДЕМО СКАЧАТЬ
Источник
| 
