JQuery PHP MYSQL login panel example
View demo click here
Download demo
This is a cool simple login / registration system. It will give you the ability to easily create a member-only area on your site and provide an easy registration process.
It is going to be PHP driven and store all the registrations into a MySQL database.
To add the needed flair, we are using the amazing sliding jQuery panel, developed by Web-kreation
MYSQL
|
1 2 3 4 5 6 7 8 9 10 |
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 |
Table tz_members is use for storing regsister user information
ID is primary key and auto increase
Index.php
1. require ‘connect.php’; -> connect mysql db
2. require ‘functions.php’; -> check email format
-> send email function
3. php session -> user login or not
4. php to check login information
5. php register new user and send password to new usr’s email
6. css dome.css login-panel.css
7. JQueriy library
8. login panel js
JQuery
index.php
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript">
$(function(){
$("div#panel").show();
$("#toggle a").toggle();
});
</script> |
Slide.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
}); |
click link
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left"> </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"> </li>
</ul>
</div> <!-- / top --> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.tab ul.login li.left {
background: url(../images/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(../images/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
} |
PNG Transparency
Ajax Jquery and PHP contact form example MYSQL5 event scheduler example
Thank You… ^_^