SiamWebCity.com รับสร้างเว็บไซต์ครบวงจร
เลือกภาษา ภาษาอังกฤษ   
หน้าแรก
web
โปรโมทเว็บ
web
รับทำเว็บไซต์
web
สอนทำเว็บ
web
Domain 299บ.
web
ติดต่อเรา
web
 
รับทำเว็บไซต์ครบวงจร รับพัฒนาแอพพลิเคชั่น สำหรับ Facebook iPad iPhone Android รับอบรมการสร้างเว็บไซต์ โปรโมทเว็บไซต์ ดูแลเว็บไซต์ แก้ไขเว็บไซต์ : เริ่มต้นติดต่อที่เรา ที่เหลือเราเป็นผู้จัดการเพื่อท่าน : เราเป็นมากกว่าเครื่องมือที่ช่วยฝ่าวิกฤตเศรษฐกิจ
รายการ
เกี่ยวกับเรา
ทำไมต้องเลือกเรา
ผลงานที่ผ่านมา
เตรียมตัวก่อนทำเว็บ
รับดูแลเว็บไซต์
แอพ Facebook iPhone
โปรแกรมmlm สำเร็จรูป
เช่าโฮสติง
บริการหลังการขาย
เงื่อนไขการรับบริการ
ร่วมงานกับเรา
คำถามที่พบบ่อย
ติดต่อเรา

ฟรีบทความ
คู่มือการใช้งาน  คู่มือการใช้งาน
VDO สอน Dreamweaver  VDO สอน Dreamweaver
Bitcoin บิทคอยน์  Bitcoin บิทคอยน์
PHP MySQL  VDO  เบื้องต้น  PHP MySQL VDO เบื้องต้น
PHP MySQL  เกร็ดความรู้  PHP MySQL เกร็ดความรู้
jQuery  jQuery
HTML5  HTML5
ASP net   MS SQL  ASP net MS SQL
facebook app  facebook app
JSP  JSP
Oracle  Oracle
CSS  CSS
Google  Google
iphone ipad iphone itune ios  iphone ipad iphone itune ios
SEO  SEO
SQL Server  SQL Server
AJAX  AJAX
รดน้ำอัตโนมัติ  สปริงเกอร์  รดน้ำอัตโนมัติ สปริงเกอร์
คอมพิวเตอร์   อินเตอร์เน็ต  คอมพิวเตอร์ อินเตอร์เน็ต
JavaScripts  JavaScripts
cloud computing  cloud computing
xhtml  xhtml
Photoshop  Photoshop
RSS Feed  RSS Feed
wordpress  wordpress
Computer  Computer
MLM ขายตรง ขยายสายงาน  MLM ขายตรง ขยายสายงาน
NUTT's blog  NUTT's blog
ทีวีดิจิตอล DVB T2  ทีวีดิจิตอล DVB T2
Bootstrap CSS  Bootstrap CSS

รับสอน PHP, MySQL, HTML, CSS, Javascripts, FTP, Dreamweaver,PHPMyAdmin, Appserv, WMSEVER, php-Nuke , Joomla, SMF, Oscommerce, Phpbb, Paypal, Adwordsมาเรียนการสร้างเว็บกัน
บริการสอน แนะนำ Adwords , PHP, MySQL, HTML, FTP, SMF, PHPMyAdmin, Dreamweaver, Oscommerce, Photoshop, Flash...

test speed
Display Pagerank
ดูสถิติเว็บไซต์

Creating modern looking login system on PHP jQuery



jQuery > Creating modern looking login system on PHP jQuery


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.


Here are sample and downloadable package:

Live Demo

download in package

Ok, download the example files and lets start coding !

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

main_page.html

01
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
02
<head>
03
    <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
04
    <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
05
</head>
06
<body>
07
    <div class="example" id="main">
08
        {login_form}
09
    </div>
10
</body>
11
</html>
As we can see – all pretty easy here. I just put one key {login_form} here, which we will using after.

login_form.html

01
<div class="bar">
02
    <a href="#" id="my_userarea">Log In</a>
03
</div>
04
<div style="display: none;" id="my_panel">
05
    <div class="column">
06
        <h3>My website title</h3>
07
        <p>My website description. Our website was created for anybody. Here we can read recent news, tutorials, and find many useful information. Welcome !</p>
08
        <p><a class="more" href="#about.php" rel="nofollow"><span>Read more</span></a></p>
09
    </div>
10
    <div class="column">
11
        <form class="login_form" action="index.php" method="post">
12
            <h3>Log In</h3>
13
            <label>Nickname:</label><input type="text" name="username">
14
            <label>Password:</label><input type="password" name="password">
15
            <input type="submit" name="LogIn" value="Login">
16
            <a class="more" href="#forgot.php" rel="nofollow"><span>Forgot password?</span></a>
17
        </form>
18
    </div>
19
    <div class="column">
20
        <h3>Still not our member? Join us!</h3>
21
        <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>
22
        <p align="center"><a class="more" href="#registration.php" rel="nofollow"><span>Registration</span></a></p>
23
    </div>
24
    <div style="clear:both"></div>
25
    <hr>
26
    <div class="close"><a id="my_close" class="my_close">Hide this panel</a></div>
27
</div>
28
 
29
<script language="javascript" type="text/javascript">
30
$(document).ready(function() {
31
    $('#my_userarea').click(function(){
32
        $('div#my_panel').slideToggle('slow');
33
        return false;
34
    });
35
    $('#my_close').click(function(){
36
        $('div#my_panel').slideUp('slow');
37
        return false;
38
    });
39
});
40
</script>
41
 
42
<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:

logout_form.html

1
<div class="bar">
2
    <a href="index.php?logout" id="my_userarea">Log Out</a>
3
</div>
Step 2. CSS
Here are used CSS styles:

css/main.css

01
body{background-color:#888;margin:0;padding:0}
02
.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}
03
 
04
.bar{background-color:#444;height:24px;padding:10px}
05
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}
06
#my_panel{background-color:#272727;border:1px solid #444;color:#999;font-size:.85em;z-index:1001;padding:15px;position:absolute;width:948px}
07
#my_panel .column{float:left;width:30%;padding:15px}
08
#my_panel .column h3{color:#fff}
09
#my_panel .login_form input,#my_panel .login_form label{margin-bottom:5px;display:block}
10
#my_panel input[type=text],#my_panel input[type=password]{width:200px}
11
#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}
12
.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}
13
.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}
14
.more:hover{text-decoration:none;background-position:0 bottom}
15
.more:hover span,#my_panel input[type=submit]:hover{background-position:right bottom}
16
#my_panel .close{text-align:center}
17
#my_panel .close a{color:#07BBE2;cursor:pointer}
Step 3. JS
For our demo I require only jQuery for sliding effect – nothing more 

js/jquery-1.4.4.min.js

Step 4. PHP
Our main part of project – login functionality. Commonly, I will using our old system, but with new changed of course.

index.php

01
<?php
02
 
03
// set error reporting level
04
if (version_compare(phpversion(), "5.3.0", ">=") == 1)
05
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
06
else
07
  error_reporting(E_ALL & ~E_NOTICE);
08
 
09
// initialization of login system and generation code
10
$oSimpleLoginSystem = new SimpleLoginSystem();
11
$sLoginForm = $oSimpleLoginSystem->getLoginBox();
12
echo strtr(file_get_contents('main_page.html'), array('{login_form}' => $sLoginForm));
13
 
14
// class SimpleLoginSystem
15
class SimpleLoginSystem {
16
 
17
    // variables
18
    var $aExistedMembers; // Existed members array
19
 
20
    // constructor
21
    function SimpleLoginSystem() {
22
        $this->aExistedMembers = array(
23
            'User1' => 'd8578edf8458ce06fbc5bb76a58c5ca4',  //Sample: MD5('qwerty')
24
            'User2' => 'd8578edf8458ce06fbc5bb76a58c5ca4'
25
        );
26
    }
27
 
28
    function getLoginBox() {
29
        ob_start();
30
        require_once('login_form.html');
31
        $sLoginForm = ob_get_clean();
32
 
33
        ob_start();
34
        require_once('logout_form.html');
35
        $sLogoutForm = ob_get_clean();
36
 
37
        if (isset($_GET['logout'])) {
38
            if (isset($_COOKIE['member_name']) && isset($_COOKIE['member_pass']))
39
                $this->simple_logout();
40
        }
41
 
42
        if ($_POST['username'] && $_POST['password']) {
43
            if ($this->check_login($_POST['username'], MD5($_POST['password']))) {
44
                $this->simple_login($_POST['username'], $_POST['password']);
45
                return $sLogoutForm . '<h2>Hello ' . $_COOKIE['member_name'] . '!</h2>';
46
            } else {
47
                return $sLoginForm . '<h2>Username or Password is incorrect</h2>';
48
            }
49
        } else {
50
            if ($_COOKIE['member_name'] && $_COOKIE['member_pass']) {
51
                if ($this->check_login($_COOKIE['member_name'], $_COOKIE['member_pass'])) {
52
                    return $sLogoutForm . '<h2>Hello ' . $_COOKIE['member_name'] . '!</h2>';
53
                }
54
            }
55
            return $sLoginForm;
56
        }
57
    }
58
 
59
    function simple_login($sName, $sPass) {
60
        $this->simple_logout();
61
 
62
        $sMd5Password = MD5($sPass);
63
 
64
        $iCookieTime = time() + 24*60*60*30;
65
        setcookie("member_name", $sName, $iCookieTime, '/');
66
        $_COOKIE['member_name'] = $sName;
67
        setcookie("member_pass", $sMd5Password, $iCookieTime, '/');
68
        $_COOKIE['member_pass'] = $sMd5Password;
69
    }
70
 
71
    function simple_logout() {
72
        setcookie('member_name', '', time() - 96 * 3600, '/');
73
        setcookie('member_pass', '', time() - 96 * 3600, '/');
74
 
75
        unset($_COOKIE['member_name']);
76
        unset($_COOKIE['member_pass']);
77
    }
78
 
79
    function check_login($sName, $sPass) {
80
        return ($this->aExistedMembers[$sName] == $sPass);
81
    }
82
}
83
 
84
?>
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.


Live Demo
download in package

refer: http://www.script-tutorials.com/creating-modern-looking-login-system-on-php/


Short URL click! Facebook Share
<< Back : เข้าชม 4,928 ครั้ง : ขึ้นไปด้านบน
รับโพสเว็บ รับจ้างโพสเว็บบอร์ด รับโพสเว็บไซด์ webboard Seeding รับจ้างโพสต์ โปรโมทเว็บไซต์ webUB.com



รับทำเว็บไซต์, ทำเว็บ, สร้างเว็บไซต์, รับทำเว็บ, รับออกแบบเว็บ, รับเขียนเว็บ, ออกแบบเว็บ, เว็บดีไซน์, รับสร้างเว็บ, เขียนเว็บไซต์, เว็บ, บริษัท ทำเว็บ, บริษัท สร้างเว็บ, บริษัท ออกแบบเว็บ, บริษัท เขียนเว็บ, ผลงานเว็บ, โฮสติ้ง,Design,Web,เว็บ,เว็บ โฮสติ้ง,เว็ป,โฮสติ้ง ราคาถูก,เว็บไซต์,จดโดเมน,เว็บโฮสติ้ง,Web Download,Web PHP,Flash MX,Graphic Design,Search Engine, Web, Design, Web Host,Web Hosting,Web Page,เขียนเว็บ,เขียนเว็บไซต์,จัดทำเว็บ,จัดทำเว็บไซต์,ทำเว็บ,ทำเว็บไซต์, โปรโมทเว็บ,ฟรี เว็บ,รับเขียนเว็บ,รับทำเว็บ,รับทำเว็บไซต์,รับออกแบบเว็บ,รับออกแบบเว็บไซ ต์,เว็บ สำเร็จรูป,เว็บดีไซน์,เว็ปไซต์, สร้างเว็บ,สร้างเว็บไซต์,ออกแบบ เว็บไซต์,ออกแบบเว็บ,ออกแบบเว็บไซต์,เขียนโปรแกรม,บริการเว็บโฮสติ้ง,ประชา สัมพันธ์เว็บ,รับจัดทำเว็บไซต์,รับสร้างเว็บ,เว็บโปรแกรม,เว็บสวย, บริการจัดทำเว็บไซต์,บริษัทรับจัดทำเว็บไซต์,ให้บริการจัดทำเว็บไซต์, มีประสบการณ์การจัดทำเว็บไซต์, งานบริการเว็บไซต์,ผลงานการเว็บไซต์,ผลงานเว็บไซต์,เว็บไซต์,เว็บไซต์ ปรัชญา "พอเพียง",เว็บไซต์ราคาที่ยุติธรรม,เว็บไซต์ระบบมาตรฐาน,เว็บไซต์ทุกงาน, เว็บไซต์ธุรกิจ, โปรโมทเว็บ,ประชาสัมพันธ์เว็บ,เว็บ,ออกแบบเว็บ,เขียนโปรแกรม,สร้างเว็บ,ออก แบบเว็บไซต์,ทำเว็บ,เว็บสวย,เขียนเว็บไซต์,ทำเว็บไซต์,รับทำเว็บ,รับออกแบบ เว็บ,เขียนเว็บ,รับเขียนเว็บ,รับทำเว็บไซต์,รับจัดทำเว็บไซต์,เว็บโฮสติ้ง, จัดทำเว็บ,เว็บโปรแกรม,เว็บไซต์,เว็บดีไซน์,รับออกแบบเว็บไซต์,สร้างเว็บไซ ต์,เว็บ,จดโดเมน,บริการเว็บโฮสติ้ง,จัดทำเว็บไซต์,โปรแกรมคอมพิวเตอร์

รับทำเว็บไซต์ : โปรโมทเว็บไซต์ : รับเขียนโปรแกรม : สอนสร้างเว็บ : จด Domain name 299บ. : เช่า Hosting : บริการดูแลเว็บไซต์ : รับซื้อ ขาย Rolex : Sitemap.xml
สปริงเกอร์

ข้อสอบ คลังข้อสอบ ระบบข้อสอบ โปรแกรมข้อสอบ ฟรี Exam.in.th
เว็บไซต์ในเครือข่าย: SiamWebCity.com webUB.com EXAM.in.th ข้อสอบ.ไทย ไอเดียแต่งบ้าน homeEST.com
Copyright © 2009-2019 SiamWebCity.COM. ® All rights reserved. หมายเลขทะเบียนประกอบพานิชย์อิเลคทรอนิกส์ : 0447314800321
E-mail, Google Talk : admin [at] siamwebcity.com, Skype: SiamWebCity.com
ขึ้นไปด้านบน