Hello Viewers in this article we are going to discuss about sign up and login form and this tutorial i will teach you How to Create Login and Sign up in PHP using Ajax with fade pop up effects. Signup login form basically use for website and web applications. where users can registered in your website and after registration it is able to login on your websites. Login and Logout system is the most imortant thing for the user management, session management is one important thing for manage the user for whole time of login. We have to fetch same value for the user and check the session and Register the session value and make destroy for logout.
How to Create Login and Sign up in PHP using Ajax
1-Creating Database
- Open Phpmyadmin in your Browser
- Click on Database Tab Display on Top side
- Give the Database name “oops”.
- After Creating Database Open it.
- Click on SQL Tab on Top area
- Copy the Below Source Code and paste it.
- Then Click on Go.
-- phpMyAdmin SQL Dump -- version 4.7.0 -- https://www.phpmyadmin.net/ -- -- Host: 127.0.0.1 -- Generation Time: Jan 22, 2018 at 09:05 PM -- Server version: 10.1.26-MariaDB -- PHP Version: 7.1.8 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `oops` -- -- -------------------------------------------------------- -- -- Table structure for table `user` -- CREATE TABLE `user` ( `userid` int(11) NOT NULL, `username` varchar(50) NOT NULL, `password` varchar(50) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `user` -- INSERT INTO `user` (`userid`, `username`, `password`) VALUES (19, 'deepak', '202cb962ac59075b964b07152d234b70'), (20, 'admin', '21232f297a57a5a743894a0e4a801fc3'); -- -- Indexes for dumped tables -- -- -- Indexes for table `user` -- ALTER TABLE `user` ADD PRIMARY KEY (`userid`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `user` -- ALTER TABLE `user` MODIFY `userid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=21;COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
OR Import DB File
After Downloading the source code extract it in your root folder where found db folder to access db file.
- Open Phpmyadmin in your Browser
- Click on Database Tab Display on Top side
- Give the Database name “oops”.
- After Creating Database Open it.
- Click on Import Tab on Top area
- You can Find Db file in Downloaded source code Select it.
- Then Click on Go.
2- Creating Database Connection
After import Database File then next step is creating database connection using php copy the below code and save it is as “conn.php”.
<?php
$conn = new mysqli("localhost", "root", "", "oops");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
3 – Creating Index Page
This step we are creating login and sign up form in php mysql using ajax.
<?php
session_start();
if(isset($_SESSION['user'])){
header('location:home.php');
}
?>
<?php include('includes/header.php'); ?>
<body><br /><br />
<div class="container">
<div style="height:50px;">
</div>
<div class="row" id="loginform">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-lock"></span> Login
<span class="pull-right"><span class="glyphicon glyphicon-pencil"></span> <a style="text-decoration:none; cursor:pointer; color:white;" id="signup">Sign up</a></span>
</h3>
</div>
<div class="panel-body">
<form role="form" id="logform">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Username" name="username" id="username" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" id="password" type="password">
</div>
<button type="button" id="loginbutton" class="btn btn-lg btn-primary btn-block"><span class="glyphicon glyphicon-log-in"></span> <span id="logtext">Login</span></button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="row" id="signupform" style="display:none;">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-pencil"></span> Sign Up
<span class="pull-right"><span class="glyphicon glyphicon-log-in"></span> <a style="text-decoration:none; cursor:pointer; color:white;" id="login">Login</a></span>
</h3>
</div>
<div class="panel-body">
<form role="form" id="signform">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Username" name="susername" id="susername" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="spassword" id="spassword" type="password">
</div>
<button type="button" id="signupbutton" class="btn btn-lg btn-primary btn-block"><span class="glyphicon glyphicon-check"></span> <span id="signtext">Sign Up</span></button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div id="myalert" style="display:none;">
<div class="col-md-4 col-md-offset-4">
<div class="alert alert-info">
<center><span id="alerttext"></span></center>
</div>
</div>
</div>
</div>
<script src="js/custom.js"></script>
</body>
</html>
4 – Creating Sign up Function in PHP MySQL
This step we are going create sign up function in php.
<?php
include('includes/conn.php');
if(isset($_POST['susername'])){
$username=$_POST['susername'];
$password=$_POST['spassword'];
$query=$conn->query("select * from user where username='$username'");
if ($query->num_rows>0){
?>
<span>Username already exist.</span>
<?php
}
elseif (!preg_match("/^[a-zA-Z0-9_]*$/",$username)){
?>
<span style="font-size:11px;">Invalid username. Space & Special Characters not allowed.</span>
<?php
}
elseif (!preg_match("/^[a-zA-Z0-9_]*$/",$password)){
?>
<span style="font-size:11px;">Invalid password. Space & Special Characters not allowed.</span>
<?php
}
else{
$mpassword=md5($password);
$conn->query("insert into user (username, password) values ('$username', '$mpassword')");
?>
<span>Sign up Successful.</span>
<?php
}
}
?>
5 – Create Login Function in PHP MySQL
in this step we are creating login function using php mysql.
<?php
include('includes/conn.php');
session_start();
if(isset($_POST['username'])){
$username=$_POST['username'];
$password=md5($_POST['password']);
$query=$conn->query("select * from user where username='$username' and password='$password'");
if ($query->num_rows>0){
$row=$query->fetch_array();
$_SESSION['user']=$row['userid'];
}
else{
?>
<span>Login Failed. User not Found.</span>
<?php
}
}
?>
6 – Creating Home Page Redirect after Login
this step we are creating homepage after login user gets this home page.
<?php include('session.php'); ?>
<?php include('includes/header.php'); ?>
<body>
<div class="container">
<div style="height:50px;">
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<h2>Hi, <?php echo $user; ?>!</h2>
<img src="image/1.jpg">
<br /><br /><a href="logout.php" class="btn btn-danger"><span class="glyphicon glyphicon-log-out">
</span> Logout</a>
</div>
</div>
</div>
</body>
</html>
7 – Creating Session For Security
This step we are creating session for security reason.
<?php
session_start();
include('includes/conn.php');
$query=$conn->query("select * from user where userid='".$_SESSION['user']."'");
$row=$query->fetch_array();
$user=$row['username'];
?>
8 – Creating logout Function
This step are going to create logout function. logout function is nothing only destroy the session.
<?php
session_start();
session_destroy();
header('location:index.php');
?>
If you facing any type of problem with this source code then you can Download the Complete source code in zip Formate by clicking the below button Download Now otherwise you can send Comment.