• Home
  • JQuery PHP MYSQL login panel example

JQuery PHP MYSQL login panel example

January 3, 2012 Ning 1 Comment


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

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


Slide.js

$(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

    	
	


CSS

.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

One Comment

leave a comment

*