Open a text editor like sublime text and then copy the below code, then save it to your Wamp Server. After that try to run this program.
Code:
<!DOCTYPE html><html>
<head>
<title>
Login Page
</title>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin = "anonymous">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin = "anonymous"></script>
<style type = "text/css">
.divStyle{
background-color: #f2f2f2;
padding: 50px;
margin-top: 150px;
border-radius: 10px;
height: 350px;
width: 350px;
padding-top: 10px;
position: fixed;
}
.divSign{
margin-top: 20px;
border-top: 2px solid #fff;
padding-top: 10px;
}
.divColumn{
margin: 30px 0px;
}
</style>
<script type = "text/javascript">
$(document).ready(function(){
$('.openLogin').click(function(){
$('#divLogin').css('z-index', '10');
$('#divSignup').css('z-index', '0');
});
$('.openSignup').click(function(){
$('#divLogin').css('z-index', '0');
$('#divSignup').css('z-index', '10');
});
});
</script>
</head>
<body>
<!--// PHP CODE FOR SIGN UP -->
<?php
// dbname is the name of the database.
$connection = mysqli_connect("localhost","root","","dbname");
if (isset($_POST["signup"])) {
if ($connection) {
$username = $_POST['username'];
$password = $_POST['password'];
$enpass = md5($password);
// tbl_name is the name of the table
$signup = "INSERT INTO tbl_name(username,password)VALUES('{$username}','{$enpass}')";
$output = mysqli_query($connection,$signup);
if ($output) {
echo "<script> alert('You have successfully created your account') </script>";
}else
{
echo "<script> alert('You have failed to create your account') </script>";
}
}else{
echo "Connection error";
}
}
?>
<!-- PHP CODE FOR SIGN UP //-->
<!--// PHP CODE FOR LOGIN -->
<?php
if (isset($_POST['login'])) {
if ($connection) {
$mail = $_POST['mail'];
$pass = md5($_POST['pass']);
// tbl_name is the name of the table
$login = "SELECT * FROM tbl_name WHERE username = '$mail' AND password = '$pass'";
$output = mysqli_query($connection,$login);
$count = mysqli_num_rows($output);
if ($count == 1) {
echo "<script> alert('You have logged in successfully') </script>";
}else{
echo "<script> alert('Incorrect Username or Password') </script>";
}
}else{
echo "Connection error";
}
}
?>
<!-- PHP CODE FOR LOGIN //-->
<div class = "container">
<div class = "col-md-4 col-md-offset-4">
<div class = "divStyle" id = "divLogin">
<center style = "border-bottom: 2px solid #fff; padding-bottom: 15px;"><h2>Sign In</h2></center>
<form name = "signInForm" method = "post" action = "index.php">
<div class = "divColumn">
<div class = "form-group">
<label>Username</label>
<input type = "email" name = "mail" class = "form-control" placeholder = "Email" required>
</div>
<div class = "form-group">
<label>Password</label>
<input type = "password" name = "pass" class = "form-control" placeholder = "Password" required>
</div>
</div>
<div class = "divSign">
<button type = "submit" class = "btn btn-default" name = "login">Sign In</button>
<a href = "#" class = "openSignup"><span style = "float: right;margin-top: 10px;">Don't have an account?</span></a>
</div>
</form>
</div>
<div class = "divStyle" id = "divSignup">
<center style = "border-bottom: 2px solid #fff; padding-bottom: 15px;"><h2>Sign Up</h2></center>
<form name = "signUpForm" method = "post" action = "index.php">
<div class = "divColumn">
<div class = "form-group">
<label>Username</label>
<input type = "email" name = "username" class = "form-control" placeholder = "Email" required>
</div>
<div class = "form-group">
<label>Password</label>
<input type = "password" name = "password" class = "form-control" placeholder = "Password" required>
</div>
</div>
<div class = "divSign">
<button type = "submit" class = "btn btn-default" name = "signup">Sign Up</button>
<a href = "#" class = "openLogin"><span style = "float: right;margin-top: 10px;">Already have an account?</span></a>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
