php注册成功动画_在PHP中创建外观现代的动画登录系统

最新推荐文章于 2021-12-23 22:42:11 发布

cuke3186

最新推荐文章于 2021-12-23 22:42:11 发布

阅读量577

点赞数

文章标签： html css js python less ViewUI

原文链接：https://www.script-tutorials.com/creating-modern-looking-login-system-on-php/

版权

php注册成功动画

>Login system with PHP. Today we will continue PHP lessons, and our article will about creating modern php login system. Possible you already saw similar ways to display login forms, and today we will repeat this by self. In result – it will some small element in your page layout, and after clicking on it – will appear some area, where we will see some welcome message, login form and another useful information. All very user friendly. So, its time to try demo.

>使用PHP登录系统。今天，我们将继续PHP课程，我们的文章将介绍创建现代php登录系统 。可能您已经看到过类似的显示登录表单的方式，今天我们将自行重复。结果-它会在您的页面布局中显示一些小元素，然后单击它-将出现在某个区域，我们将在其中看到一些欢迎消息，登录表单以及其他有用的信息。都非常人性化。因此，该尝试演示了。

Here are sample and downloadable package:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML. This is main page code:

和往常一样，我们从HTML开始。这是主页代码：

main_page.html (main_page.html)


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
    <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="example" id="main">
        {login_form}
    </div>
</body>
</html>


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
    <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="example" id="main">
        {login_form}
    </div>
</body>
</html>

As we can see – all pretty easy here. I just put one key {login_form} here, which we will using after.

我们可以看到–在这里一切都很容易。我只是在这里放置了一个密钥{login_form}，我们将在以后使用它。

login_form.html (login_form.html)


<div class="bar">
    <a href="#" id="my_userarea">Log In</a>
</div>
<div style="display: none;" id="my_panel">
    <div class="column">
        <h3>My website title</h3>
        <p>My website description. Our website was created for anybody. Here we can read recent news, tutorials, and find many useful information. Welcome !</p>
        <p><a class="more" href="#about.php" rel="nofollow"><span>Read more</span></a></p>
    </div>
    <div class="column">
        <form class="login_form" action="index.php" method="post">
            <h3>Log In</h3>
            <label>Nickname:</label><input type="text" name="username">
            <label>Password:</label><input type="password" name="password">
            <input type="submit" name="LogIn" value="Login">
            <a class="more" href="#forgot.php" rel="nofollow"><span>Forgot password?</span></a>
        </form>
    </div>
    <div class="column">
        <h3>Still not our member? Join us!</h3>
        <p>Which gives us a registration? This gives us opportunity to become full member of our website. You can communicate with another member etc..</p>
        <p align="center"><a class="more" href="#registration.php" rel="nofollow"><span>Registration</span></a></p>
    </div>
    <div style="clear:both"></div>
    <hr>
    <div class="close"><a id="my_close" class="my_close">Hide this panel</a></div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $('#my_userarea').click(function(){
        $('div#my_panel').slideToggle('slow');
        return false;
    });
    $('#my_close').click(function(){
        $('div#my_panel').slideUp('slow');
        return false;
    });
});
</script>
<h3>You can use username "User1" of "User2" and password "qwerty" to login in system</h3>


<div class="bar">
    <a href="#" id="my_userarea">Log In</a>
</div>
<div style="display: none;" id="my_panel">
    <div class="column">
        <h3>My website title</h3>
        <p>My website description. Our website was created for anybody. Here we can read recent news, tutorials, and find many useful information. Welcome !</p>
        <p><a class="more" href="#about.php" rel="nofollow"><span>Read more</span></a></p>
    </div>
    <div class="column">
        <form class="login_form" action="index.php" method="post">
            <h3>Log In</h3>
            <label>Nickname:</label><input type="text" name="username">
            <label>Password:</label><input type="password" name="password">
            <input type="submit" name="LogIn" value="Login">
            <a class="more" href="#forgot.php" rel="nofollow"><span>Forgot password?</span></a>
        </form>
    </div>
    <div class="column">
        <h3>Still not our member? Join us!</h3>
        <p>Which gives us a registration? This gives us opportunity to become full member of our website. You can communicate with another member etc..</p>
        <p align="center"><a class="more" href="#registration.php" rel="nofollow"><span>Registration</span></a></p>
    </div>
    <div style="clear:both"></div>
    <hr>
    <div class="close"><a id="my_close" class="my_close">Hide this panel</a></div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $('#my_userarea').click(function(){
        $('div#my_panel').slideToggle('slow');
        return false;
    });
    $('#my_close').click(function(){
        $('div#my_panel').slideUp('slow');
        return false;
    });
});
</script>
<h3>You can use username "User1" of "User2" and password "qwerty" to login in system</h3>

This file is our floating login form with 3 columns. And, last one file – logout:

此文件是我们的浮动登录表单，共有3列。并且，最后一个文件–注销：

logout_form.html (logout_form.html)


<div class="bar">
    <a href="index.php?logout" id="my_userarea">Log Out</a>
</div>


<div class="bar">
    <a href="index.php?logout" id="my_userarea">Log Out</a>
</div>

步骤2. CSS (Step 2. CSS)

Here are used CSS styles:

以下是使用CSS样式：

css / main.css (css/main.css)


body{background-color:#888;margin:0;padding:0}
.example{position:relative;width:980px;height:700px;background-image:url(../images/background.jpg);border:1px #000 solid;margin:20px auto;padding:20px;-moz-border-radius:3px;-webkit-border-radius:3px}
.bar{background-color:#444;height:24px;padding:10px}
a#my_userarea{font-size:12px;position:relative;display:block;overflow:hidden;color:#909090;-webkit-border-radius:11px;-moz-border-radius:11px;text-decoration:none;border-radius:11px;background:url(../images/button-user-area.gif) repeat-x 0 0;text-shadow:#000 1px 1px;float:right;padding:4px 10px 3px}
#my_panel{background-color:#272727;border:1px solid #444;color:#999;font-size:.85em;z-index:1001;padding:15px;position:absolute;width:948px}
#my_panel .column{float:left;width:30%;padding:15px}
#my_panel .column h3{color:#fff}
#my_panel .login_form input,#my_panel .login_form label{margin-bottom:5px;display:block}
#my_panel input[type=text],#my_panel input[type=password]{width:200px}
#my_panel input[type=submit]{background:url(../images/button.png) no-repeat scroll right 0 transparent;width:72px;height:30px;color:#fff;border-width:0}
.more{background:url(../images/more-left.png) no-repeat scroll 0 0 transparent;cursor:pointer;display:block;float:right;padding-left:11px;text-align:center;text-decoration:none}
.more span{background:url(../images/more-right.png) no-repeat scroll right 0 transparent;color:#fff;display:block;height:30px;line-height:29px;padding:0 19px 0 8px}
.more:hover{text-decoration:none;background-position:0 bottom}
.more:hover span,#my_panel input[type=submit]:hover{background-position:right bottom}
#my_panel .close{text-align:center}
#my_panel .close a{color:#07BBE2;cursor:pointer}


body{background-color:#888;margin:0;padding:0}
.example{position:relative;width:980px;height:700px;background-image:url(../images/background.jpg);border:1px #000 solid;margin:20px auto;padding:20px;-moz-border-radius:3px;-webkit-border-radius:3px}
.bar{background-color:#444;height:24px;padding:10px}
a#my_userarea{font-size:12px;position:relative;display:block;overflow:hidden;color:#909090;-webkit-border-radius:11px;-moz-border-radius:11px;text-decoration:none;border-radius:11px;background:url(../images/button-user-area.gif) repeat-x 0 0;text-shadow:#000 1px 1px;float:right;padding:4px 10px 3px}
#my_panel{background-color:#272727;border:1px solid #444;color:#999;font-size:.85em;z-index:1001;padding:15px;position:absolute;width:948px}
#my_panel .column{float:left;width:30%;padding:15px}
#my_panel .column h3{color:#fff}
#my_panel .login_form input,#my_panel .login_form label{margin-bottom:5px;display:block}
#my_panel input[type=text],#my_panel input[type=password]{width:200px}
#my_panel input[type=submit]{background:url(../images/button.png) no-repeat scroll right 0 transparent;width:72px;height:30px;color:#fff;border-width:0}
.more{background:url(../images/more-left.png) no-repeat scroll 0 0 transparent;cursor:pointer;display:block;float:right;padding-left:11px;text-align:center;text-decoration:none}
.more span{background:url(../images/more-right.png) no-repeat scroll right 0 transparent;color:#fff;display:block;height:30px;line-height:29px;padding:0 19px 0 8px}
.more:hover{text-decoration:none;background-position:0 bottom}
.more:hover span,#my_panel input[type=submit]:hover{background-position:right bottom}
#my_panel .close{text-align:center}
#my_panel .close a{color:#07BBE2;cursor:pointer}

步骤3. JS (Step 3. JS)

For our demo I require only jQuery for sliding effect – nothing more :)

对于我们的演示，我只需要jQuery即可实现滑动效果–仅此而已:)

js / jquery-1.4.4.min.js (js/jquery-1.4.4.min.js)

步骤4. PHP (Step 4. PHP)

Our main part of project – login functionality. Commonly, we will use our old system, but with new changed of course.

我们项目的主要部分–登录功能。通常，我们将使用旧系统，但是当然会进行新的更改。

index.php (index.php)


<?php
// set error reporting level
if (version_compare(phpversion(), "5.3.0", ">=") == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
// initialization of login system and generation code
$oSimpleLoginSystem = new SimpleLoginSystem();
$sLoginForm = $oSimpleLoginSystem->getLoginBox();
echo strtr(file_get_contents('main_page.html'), array('{login_form}' => $sLoginForm));
// class SimpleLoginSystem
class SimpleLoginSystem {
    // variables
    var $aExistedMembers; // Existed members array
    // constructor
    function SimpleLoginSystem() {
        $this->aExistedMembers = array(
            'User1' => 'd8578edf8458ce06fbc5bb76a58c5ca4',  //Sample: MD5('qwerty')
            'User2' => 'd8578edf8458ce06fbc5bb76a58c5ca4'
        );
    }
    function getLoginBox() {
        ob_start();
        require_once('login_form.html');
        $sLoginForm = ob_get_clean();
        ob_start();
        require_once('logout_form.html');
        $sLogoutForm = ob_get_clean();
        if (isset($_GET['logout'])) {
            if (isset($_COOKIE['member_name']) && isset($_COOKIE['member_pass']))
                $this->simple_logout();
        }
        if ($_POST['username'] && $_POST['password']) {
            if ($this->check_login($_POST['username'], MD5($_POST['password']))) {
                $this->simple_login($_POST['username'], $_POST['password']);
                return $sLogoutForm . '<h2>Hello ' . $_COOKIE['member_name'] . '!</h2>';
            } else {
                return $sLoginForm . '<h2>Username or Password is incorrect</h2>';
            }
        } else {
            if ($_COOKIE['member_name'] && $_COOKIE['member_pass']) {
                if ($this->check_login($_COOKIE['member_name'], $_COOKIE['member_pass'])) {
                    return $sLogoutForm . '<h2>Hello ' . $_COOKIE['member_name'] . '!</h2>';
                }
            }
            return $sLoginForm;
        }
    }
    function simple_login($sName, $sPass) {
        $this->simple_logout();
        $sMd5Password = MD5($sPass);
        $iCookieTime = time() + 24*60*60*30;
        setcookie("member_name", $sName, $iCookieTime, '/');
        $_COOKIE['member_name'] = $sName;
        setcookie("member_pass", $sMd5Password, $iCookieTime, '/');
        $_COOKIE['member_pass'] = $sMd5Password;
    }
    function simple_logout() {
        setcookie('member_name', '', time() - 96 * 3600, '/');
        setcookie('member_pass', '', time() - 96 * 3600, '/');
        unset($_COOKIE['member_name']);
        unset($_COOKIE['member_pass']);
    }
    function check_login($sName, $sPass) {
        return ($this->aExistedMembers[$sName] == $sPass);
    }
}
?>


<?php
// set error reporting level
if (version_compare(phpversion(), "5.3.0", ">=") == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
// initialization of login system and generation code
$oSimpleLoginSystem = new SimpleLoginSystem();
$sLoginForm = $oSimpleLoginSystem->getLoginBox();
echo strtr(file_get_contents('main_page.html'), array('{login_form}' => $sLoginForm));
// class SimpleLoginSystem
class SimpleLoginSystem {
    // variables
    var $aExistedMembers; // Existed members array
    // constructor
    function SimpleLoginSystem() {
        $this->aExistedMembers = array(
            'User1' => 'd8578edf8458ce06fbc5bb76a58c5ca4',  //Sample: MD5('qwerty')
            'User2' => 'd8578edf8458ce06fbc5bb76a58c5ca4'
        );
    }
    function getLoginBox() {
        ob_start();
        require_once('login_form.html');
        $sLoginForm = ob_get_clean();
        ob_start();
        require_once('logout_form.html');
        $sLogoutForm = ob_get_clean();
        if (isset($_GET['logout'])) {
            if (isset($_COOKIE['member_name']) && isset($_COOKIE['member_pass']))
                $this->simple_logout();
        }
        if ($_POST['username'] && $_POST['password']) {
            if ($this->check_login($_POST['username'], MD5($_POST['password']))) {
                $this->simple_login($_POST['username'], $_POST['password']);
                return $sLogoutForm . '<h2>Hello ' . $_COOKIE['member_name'] . '!</h2>';
            } else {
                return $sLoginForm . '<h2>Username or Password is incorrect</h2>';
            }
        } else {
            if ($_COOKIE['member_name'] && $_COOKIE['member_pass']) {
                if ($this->check_login($_COOKIE['member_name'], $_COOKIE['member_pass'])) {
                    return $sLogoutForm . '<h2>Hello ' . $_COOKIE['member_name'] . '!</h2>';
                }
            }
            return $sLoginForm;
        }
    }
    function simple_login($sName, $sPass) {
        $this->simple_logout();
        $sMd5Password = MD5($sPass);
        $iCookieTime = time() + 24*60*60*30;
        setcookie("member_name", $sName, $iCookieTime, '/');
        $_COOKIE['member_name'] = $sName;
        setcookie("member_pass", $sMd5Password, $iCookieTime, '/');
        $_COOKIE['member_pass'] = $sMd5Password;
    }
    function simple_logout() {
        setcookie('member_name', '', time() - 96 * 3600, '/');
        setcookie('member_pass', '', time() - 96 * 3600, '/');
        unset($_COOKIE['member_name']);
        unset($_COOKIE['member_pass']);
    }
    function check_login($sName, $sPass) {
        return ($this->aExistedMembers[$sName] == $sPass);
    }
}
?>

Our system working with cookies, we will check cookies data to determinate, are member logged or not. Of course, you can have your own login system if you already using some own CMS. But you always can use our login system too. One point, this is not necessary to keep whole array of members directly in this file. Possible better solution will keep it separated or in database as example.

我们的系统使用cookie，我们将检查cookie数据以确定是否已登录会员。当然，如果您已经使用自己的CMS，则可以拥有自己的登录系统。但是您也总是可以使用我们的登录系统。要点，不必将成员的整个数组直接保留在此文件中。可能的更好解决方案是将其分开或保留在数据库中。

现场演示

结论 (Conclusion)

Today we prepared new nice login system which you can use in your projects. If this was useful for you – do not forget to thank us. I would be grateful for your interesting comments. Good luck!

今天，我们准备了一个新的漂亮的登录系统，您可以在您的项目中使用它。如果这对您有用–不要忘了感谢我们。谢谢您提出的宝贵意见。祝好运！