How to Create Form sing in and sign up using php
1.database
name database : register_login
CREATE TABLE `user_login` (
`id` int(6) NOT NULL,
`fname` varchar(40) NOT NULL,
`lname` varchar(40) NOT NULL,
`email` varchar(50) NOT NULL,
`phone_number` int(10) NOT NULL,
`password` varchar(40) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
2. error.php
<?php if (count($errors) > 0) : ?>
<div class="error">
<?php foreach ($errors as $error) : ?>
<p><?php echo $error ?></p>
<?php endforeach ?>
</div>
<?php endif ?>
3.index.php
<?php
session_start();
if (!isset($_SESSION['email']))
{
$_SESSION['msg'] = "You must log in first";
header('location: signin.php');
}
if (isset($_GET['logout']))
{
session_destroy();
unset($_SESSION['email']);
header("location: signin.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css'
integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/form-doc.css">
<link href='https://fonts.googleapis.com/css?family=Bayon|Francois+One' rel='stylesheet' type='text/css'>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/styles.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>
<body>
<br>
<br>
<div class="header text-center">
<h2>Home Page</h2>
<p> <a href="index.php?logout='1'" style="color: red;">logout</a> </p>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<hr>
<!-- logged in user information -->
<?php if (isset($_SESSION['email'])) : ?>
<p>Welcome <strong><?php echo $_SESSION['email']; ?></strong></p>
<?php endif ?>
</div>
<div class="content">
<!-- notification message -->
<?php if (isset($_SESSION['success'])) : ?>
<div class="error success" >
<h3>
<?php
echo $_SESSION['success'];
unset($_SESSION['success']);
?>
</h3>
</div>
<?php endif ?>
</div>
</body>
</html>
4.register.php
<?php include('server.php') ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Sign Up</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/form-doc.css"> <link href='https://fonts.googleapis.com/css?family=Bayon|Francois+One' rel='stylesheet' type='text/css'> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- Your custom styles (optional) --> <link href="css/styles.css" rel="stylesheet"> <link href="css/style.min.css" rel="stylesheet"> </head> <body> <!-- Material form register --> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-md-4 mt-3 rounded "> <div class="card "> <h5 class="card-header info-colorwhite-text text-center py-4"> <strong>Sign up</strong> </h5> <!--Card content--> <div class="card-body px-lg-5 pt-0"> <!-- Form --> <form class="text-center" action="register.php"method="POST"> <?php include('errors.php'); ?> <div class="form-row"> <div class="col"> <!-- First name --> <div class="md-form"> <input type="text" name="fname" id="fname" class="form-control" placeholder="First name"> </div> </div> <div class="col"> <!-- Last name --> <div class="md-form"> <input type="text" name="lname" id="lname" class="form-control" placeholder="Last name"> </div> </div> </div> <!-- E-mail --> <div class="md-form mt-0"> <input type="email" id="email" name="email" class="form-control"placeholder="E-mail"> </div> <!-- Phone number --> <div class="md-form"> <input type="tel" name="phone_number" id="phone_number" class="form-control" placeholder="Phone number"> </div> <!-- Password --> <div class="md-form"> <input type="password" name="password_1" id="password_1" class="form-control" placeholder="Password"> </div> <!-- Confirm password--> <div class="md-form"> <input type="password" name="password_2" id="password_2" class="form-control" placeholder="Confirm password"> </div> <!-- Sign up button --> <button class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0 " type="submit" name="reg_user">Sign Up</button> <!-- Social register --> <p>or sign up with:</p> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-youtube"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> <hr> <!-- Terms of service --> <em>Already have account? <a href="signin.php"> Sign in</a></em> </form> <!-- Form --> </div> </div> <!-- Material form register --> </div> </div> </div> </body> </html>
5.server.php
<?php session_start(); // initializing variables $fname = ""; $lname = ""; $email = ""; $errors = array(); // connect to the database $db = mysqli_connect('localhost', 'root', '', 'register_login'); // REGISTER USER if (isset($_POST['reg_user'])) { // receive all input values from the form $fname = mysqli_real_escape_string($db, $_POST['fname']); $lname = mysqli_real_escape_string($db, $_POST['lname']); $email = mysqli_real_escape_string($db, $_POST['email']); $phone_number = mysqli_real_escape_string($db, $_POST['phone_number']); $password_1 = mysqli_real_escape_string($db, $_POST['password_1']); $password_2 = mysqli_real_escape_string($db, $_POST['password_2']); // form validation: ensure that the form is correctly filled ... // by adding (array_push()) corresponding error unto $errors array if (empty($fname)) { array_push($errors,'<div class="alert alert-danger" role="alert">Frist Name is required</div>'); } if (empty($lname)) { array_push($errors,'<div class="alert alert-danger" role="alert">Last Name is required</div>'); } if (empty($email)) { array_push($errors,'<div class="alert alert-danger" role="alert">Email is required</div>'); } if (empty($phone_number)) { array_push($errors, '<div class="alert alert-danger" role="alert">Phone number is required</div>'); } if (empty($password_1)) { array_push($errors, '<div class="alert alert-danger" role="alert">Password is required</div>'); } if ($password_1 != $password_2) { array_push($errors, '<div class="alert alert-danger"role="alert">The two passwords do not match</div>'); } // first check the database to make sure // a user does not already exist with the same username and/or email $user_check_query = "SELECT * FROM user_login WHERE fname='$fname' OR email='$email' LIMIT 1"; $result = mysqli_query($db, $user_check_query); $user = mysqli_fetch_assoc($result); if ($user) { // if user exists if ($user['fname'] === $fname) { array_push($errors, '<div class="alert alert-danger" role="alert">Username already exists</div>'); } if ($user['email'] === $email) { array_push($errors, '<div class="alert alert-danger" role="alert">Email already exists</div>'); } } // Finally, register user if there are no errors in the form if (count($errors) == 0) { $password = md5($password_1);//encrypt the password before saving in the database $query = "INSERT INTO `user_login`(`fname`, `lname`, `email`, `phone_number`, `password`)VALUES('$fname','$lname', '$email','$phone_number', '$password')"; mysqli_query($db, $query); $_SESSION['fname'] = $fname; $_SESSION['lname'] = $lname; $_SESSION['success'] = "You are now logged in"; header('location: index.php'); } } //**********************/ // LOGIN USER if (isset($_POST['login_user'])) { $email = mysqli_real_escape_string($db, $_POST['email']); $password = mysqli_real_escape_string($db, $_POST['password']); if (empty($email)) { array_push($errors, '<div class="alert alert-danger" role="alert">email is required</div>'); } if (empty($password)) { array_push($errors,'<div class="alert alert-danger" role="alert">password is required</div>'); } if (count($errors) == 0) { $password = md5($password); $query = "SELECT * FROM user_loginWHERE email='$email' and password='$password'"; $results = mysqli_query($db, $query); if (mysqli_num_rows($results) == 1) { $_SESSION['email'] = $email; $_SESSION['success'] = '<h4 class="text-center">You are now logged in<h4>'; header('location: index.php') }else { array_push($errors, '<div class="alert alert-danger" role="alert">Wrong email/password, Please login again.</div>'); } } } ?>
<?php include('server.php') ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sign In</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css'
integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/form-doc.css">
<link href='https://fonts.googleapis.com/css?family=Bayon|Francois+One' rel='stylesheet' type='text/css'>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/styles.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>
<body>
<!-- Material form login -->
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-4 mt-5 rounded">
<div class="card">
<h5 class="card-header info-color white-text text-center py-4">
<strong>Sign in</strong>
</h5>
<!--Card content-->
<div class="card-body px-lg-5 pt-0">
<!-- Form -->
<form class="text-center"action="signin.php" method="POST">
<?php include('errors.php'); ?>
<!-- Email -->
<div class="md-form">
<input type="email"name="email" id="email" class="form-control" placeholder="E-mail">
</div>
<!-- Password -->
<div class="md-form">
<input type="password" name="password" id="password" class="form-control" placeholder="Password">
</div>
<div class="d-flex justify-content-around">
<div>
<!-- Remember me -->
<div class="form-check">
<input type="checkbox" name="checkbox" class="form-check-input" id="checkbox" required>
<label class="form-check-label" for="checkbox">Remember me</label>
</div>
</div>
<div>
<!-- Forgot password -->
<a href="">Forgot password?</a>
</div>
</div>
<!-- Sign in button -->
<button class="btn btn-outline-info btn-rounded btn-blockmy-4 waves-effect z-depth-0" type="submit" name="login_user">Sign in</button>
<!-- Register -->
<p>Not a member?
<a href="register.php">Register</a>
</p>
<!-- Social login -->
<p>or sign in with:</p>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</form>
<!-- Form -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>
0 Comments
CAN FEEDBACK
Emoji