Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик PR-CY.Rank
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Ccылки

Свежак

Главная » 2013 » Ноябрь » 28 » Создание формы входа с PHP, MySQL и Jquery
21:40
Создание формы входа с 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 и, наконец, сценарий Группы вход.

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

Вывод

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

ДЕМО                            СКАЧАТЬ

 

 

Источник

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

Статьи
[Менеджмент]
Факторы микросреды организации
[Безопасность систем]
Защита исходных текстов и двоичного кода
[Операционные системы]
Особенности применения технологий Lotus Domino и Notes в современных информационных системах
[Прогараммирование]
ЛЕКЦИЯ Процедуры и функции
[Устронение ошибок систем]
Устранение неполадок при возникновении (синего экрана) Blue Screen Of Death (BSOD) (2)
[Прогараммирование]
Разработка ПО с открытыми исходными текстами как особый вид прикладной науки
[Информатика]
Как измеряется количество информации?
[Устронение ошибок систем]
Использование "чистой загрузки" для устранения неполадок в работе Windows
[Устронение ошибок систем]
Извлечение файлов Windows 7 из установочного DVD и замена ими поврежденных системных файлов
[Информатика]
Что такое инфоpматика?

Категории
HTML/CSS [21]
jQuery/JS [36]
PHP [4]
Для Ucoz [38]

Популярный софт
Iron Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Iron Virtual DJ
Virtual DJ
Iron SoundForge 11
SoundForge 11
Iron Alcohol 120
Alcohol 120
Iron Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Жми

Copyright MyCorp © 2018Конструктор сайтов - uCoz