Создание формы входа с 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" /> &nbsp;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">&nbsp;</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">&nbsp;</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 &amp; 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 и, наконец, сценарий Группы вход.

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

Вывод

Сегодня мы узнали, как использовать фантастический компонент формы и превратить его в функциональный Вход / Регистрация.

ДЕМО                            СКАЧАТЬ

Источник