Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Ноябрь » 28 » Создание формы входа с PHP, MySQL и Jquery


21:45
Создание формы входа с PHP, MySQL и Jquery

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

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

Вывод

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

ДЕМО                            СКАЧАТЬ

 

 

Источник

Категория: CSS//HTML//JS | Просмотров: 765 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди