I am using login and registration in the same page. Here is my HTML Code~~
body {
margin:0 !important ;
padding:0 !important ;
}
.container{
width: 100%;
height: 100vh;
background-image: url('image/innerScream.jpg');
display: flex;
justify-content: center;
align-items: center;
background-size: contain;
background-repeat: repeat;
}
.card{
width: 350px;
height: 500px;
box-shadow: 0 0 40px 20px rgba(0,0,0,0.26);
perspective: 1000px;
border-radius: 1em;
}
.inner-box{
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s;
}
.card-front, .card-back{
position: absolute;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-image: linear-gradient(rgb(0 0 100 / 38%), rgb(0 27 100)), url(image/mirrorWindow.jpg);
padding: 55px;
padding-top: 1em;
box-sizing: border-box;
backface-visibility: hidden;
border-radius: 1em;
}
.card-back{
transform: rotateY(180deg);
}
.card h2{
font-weight: normal;
font-size: 24px;
text-align: center;
margin-bottom: 20px;
color: #fff;
}
.input-box{
width: 100%;
background: transparent;
border: 1px solid #fff;
margin: 6px 0;
height: 32px;
border-radius: 20px;
padding: 0 20px;
box-sizing: border-box;
outline: none;
text-align: center;
color: #fff;
}
::placeholder{
color: #fff;
font-size: 12px;
}
button{
width: 100%;
background: transparent;
border: 1px solid #fff;
margin: 35px 0 10px;
height: 32px;
font-size: 12px;
border-radius: 20px;
padding: 0 20px;
box-sizing: border-box;
outline: none;
color: #fff;
cursor: pointer;
}
.submit-btn {
position: relative;
display: block;
width: 55%;
margin: 0 auto;
margin-top: 6em;
}
.submit-btn::after{
content: '\27a4';
color: #333;
line-height: 32px;
font-size: 17px;
height: 32px;
width: 32px;
border-radius: 50%;
background: #fff;
position: absolute;
right: -1px;
top: -1px;
}
span{
font-size: 13px;
color: #fff;
margin-left: 10px;
}
.card .btn {
margin-top: 70px;
}
.card a{
text-decoration: none;
color: #fff;
display: block;
text-align: center;
font-size: 13px;
margin-top: 8px;
}
.check{
margin-left: 5em;
margin-top: 1em;
cursor: pointer;
}
.massage{
background: green;
}<?php
require_once "register.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Memories - A NoteBook </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="inner-box" id="card" >
<div class="card-front">
<h2>Memories - A NoteBook</h2>
<form action="" method="POST" enctype="multipart/form-data" >
<input type="email" class=" input-box" placeholder="Please Enter Your Email Id" name="email" required>
<input type="password" class=" input-box" placeholder="Password" name="password" required>
<button type="submit" class="submit-btn" value="Login"> Login </button>
<input class="check" type="checkbox"><span>Remember Me</span>
</form>
<button type="button" class="btn" onclick="openRegister()"> I am New Here </button>
<a href="">Forgot Password?</a>
</div>
<div class="card-back">
<h2>Memories - A NoteBook</h2>
<?php
if(isset($massage)){
foreach($massage as $msg){
echo '<div class="massage" style="color:red;">'.$massage.'</div>';
}
}
?>
<form action="" method="POST" enctype="multipart/form-data" >
<input type="text" class=" input-box" placeholder=" Enter Your Name" name="name" required>
<input type="email" class=" input-box" placeholder=" Enter Your Email " name="email" required>
<input type="password" class=" input-box" placeholder="Password" name="password" required>
<input type="password" class=" input-box" placeholder="Re-Type Password" name="cpassword" required>
<input type="file" class="upload-button" accept="image/jpg, image/jpeg, image/png" name="image" required>
<button type="submit" class="submit-btn" value="Register"> Register </button>
</form>
<button type="button" class="btn" onclick="openLogin()"> I've an Account !! </button>
<a href="">Forgot Password?</a>
</div>
</div>
</div>
</div>
<script>
var card = document.getElementById("card");
function openRegister(){
card.style.transform = "rotateY(-180deg)";
}
function openLogin(){
card.style.transform = "rotateY(0deg)";
}
</script>
</body>
</html>The problem is
When I hit submit button for register the user It doesn't Insert data into data table. and doesn't redirect my desired page. After submitting it only redirect the login form. Here is the php code ~~
<?php
//include config file
include "config.php";
//register user
if (isset($_POST['submit']) ){
$name = mysqli_real_escape_string($conn, $_POST['name']);
$email = mysqli_real_escape_string($conn, $_POST['email']);
$password = mysqli_real_escape_string($conn, md5 ($_POST['password']) );
$cpassword = mysqli_real_escape_string($conn, md5 ($_POST['cpassword']) );
$image = $_FILES['image']['name'];
$image_size = $_FILES['image']['size'];
$image_tmp_name = $_FILES['image']['tmp_name'];
$image_folder = "images/".$image;
//check if email already exists
$select = mysqli_query($conn, "SELECT * FROM user WHERE email = '$email' AND userpassword = '$password' ") or die(mysqli_error($conn));
if(mysqli_num_rows($select) > 0){
$massage[] = "User already exists";
}else{
if($password != $cpassword){
$massage[] = "Password does not match";
}elseif($image_size > 5097152){
$massage[] = "Image size should be less than 5MB";
}else{
$insert = mysqli_query($conn, "INSERT INTO user (username, email, userpassword, Image) VALUES ('$name', '$email', '$password', '$image')") or die(mysqli_error($conn));
if($insert){
move_uploaded_file($image_tmp_name, $image_folder);
$massage[] = "Registration successful";
header("location: home.php");
}else{
$massage[] = "Registration failed";
}
}
}
}
?>
Database is successfully connected and it's showing the success alert