How to Create a Login With Signup form in php

Code of the Login & Signup Form in php.

Login & Signup form is must for websites.

Check Code Below Here..

Important Note:-

If you want run this code. First of all you need to create a mysql database and Table.

Create a database called (registration). In the registration database, add a table called (users).

The users table will take the following four fields.

1- id - int(11) autoincrement primary key

2- username - varchar(100) collation(latin1_swedish)_ci

3- email - varchar(100)

4- password - varchar(100)

Step:1:- Create a 5 php pages...

1- index.php

2- errors.php

3- login.php

4- register.php

5- server.php

Step:2:- Write the Code of (index.php) page.

<?php

session_start();

if (!isset($_SESSION['username'])) {

$_SESSION['msg'] = "You must log in first";

header('location: login.php');

}

if (isset($_GET['logout'])) {

session_destroy();

unset($_SESSION['username']);

header("location: login.php");

}

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<?php if (isset($_SESSION['success'])) : ?>

<h3>

<?php

echo $_SESSION['success'];

unset($_SESSION['success']);

</h3>

</div>

<?php endif ?>

<?php if (isset($_SESSION['username'])) : ?>

<p>Welcome <strong><?php echo $_SESSION['username']; ?></strong></p>

<p> <a href="index.php?logout='1'" style=color:red>logout</a> </p>

<?php endif ?>

</div>

</body>

</html>

Step:3:- Write the Code of (errors.php) page.

<?php if (count($errors) > 0) : ?>

<?php foreach ($errors as $error) : ?>

<?php endforeach ?>

</div>

<?php endif ?>

Step:4:- Write the Code of (login.php) page.

<?php include('server.php') ?>

<!DOCTYPE html>

<html>

<head>

<title>Registration system PHP and MySQL</title>

</head>

<body>

<h2>Login</h2>

</div>

<?php include('errors.php'); ?>

<label>Username</label>

</div>

<label>Password</label>

</div>

<button type=submit class=btn name=login_user>Login</button>

</div>

<p>

Not yet a member? <a href=register.php>Sign up</a>

</p>

</form>

</body>

</html>

Step:5:- Write the Code of (register.php) page.

<?php include('server.php') ?>
<!DOCTYPE html>
<html>
<head>
<title>Registration system PHP and MySQL</title>
<link rel=stylesheet type=text/css href=style.css>
</head>
<body>
<div class=header>
<h2>Register</h2>
</div>
<form method=post action=register.php>
<?php include('errors.php'); ?>
<div class=input-group>
<label>Username</label>
<input type=text name=username value=<?php echo $username; ?>>
</div>
<div class=input-group>
<label>Email</label>
<input type=email name=email value=<?php echo $email; ?>>
</div>
<div class=input-group>
<label>Password</label>
<input type=password name=password_1>
</div>
<div class=input-group>
<label>Confirm password</label>
<input type=password name=password_2>
</div>
<div class=input-group>
<button type=submit class=btn name=reg_user>Register</button>
</div>
<p>
Already a member? <a href=login.php>Sign in</a>
</p>
</form>
</body>
</html>

Step:6:- Write the Code of (server.php) page.

<?php
session_start();
$username = "";
$email = "";
$errors = array();
$db = mysqli_connect('localhost', 'root', '', 'registration');
if (isset($_POST['reg_user'])) {
$username = mysqli_real_escape_string($db, $_POST['username']);
$email = mysqli_real_escape_string($db, $_POST['email']);
$password_1 = mysqli_real_escape_string($db, $_POST['password_1']);
$password_2 = mysqli_real_escape_string($db, $_POST['password_2']);
if (empty($username)) { array_push($errors, "Username is required"); }
if (empty($email)) { array_push($errors, "Email is required"); }
if (empty($password_1)) { array_push($errors, "Password is required"); }
if ($password_1 != $password_2) {
array_push($errors, "The two passwords do not match");
}
$user_check_query = "SELECT * FROM users WHERE username='$username' OR email='$email' LIMIT 1";
$result = mysqli_query($db, $user_check_query);
$user = mysqli_fetch_assoc($result);
if ($user) {
if ($user['username'] === $username) {
array_push($errors, "Username already exists");
}
if ($user['email'] === $email) {
array_push($errors, "email already exists");
}
}
if (count($errors) == 0) {
$password = md5($password_1);
$query = "INSERT INTO users (username, email, password)
VALUES('$username', '$email', '$password')";
mysqli_query($db, $query);
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: index.php');
}
}
if (isset($_POST['login_user'])) {
$username = mysqli_real_escape_string($db, $_POST['username']);
$password = mysqli_real_escape_string($db, $_POST['password']);
if (empty($username)) {
array_push($errors, "Username is required");
}
if (empty($password)) {
array_push($errors, "Password is required");
}
if (count($errors) == 0) {
$password = md5($password);
$query = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$results = mysqli_query($db, $query);
if (mysqli_num_rows($results) == 1) {
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: index.php');
}else {
array_push($errors, "Wrong username/password combination");
}
}
}

?>

Step:7:- And Now the time of CSS page.

Create a CSS Page (style.css)

1- style.css Code

* {

margin: 0px;

padding: 0px;

}

body {

font-size: 120%;

background: #F8F8FF;

}

.header {

width: 30%;

margin: 50px auto 0px;

color: white;

background: #5F9EA0;

text-align: center;

border: 1px solid #B0C4DE;

border-bottom: none;

border-radius: 10px 10px 0px 0px;

padding: 20px;

}

form, .content {

width: 30%;

margin: 0px auto;

padding: 20px;

border: 1px solid #B0C4DE;

background: white;

border-radius: 0px 0px 10px 10px;

}

.input-group {

margin: 10px 0px 10px 0px;

}

.input-group label {

display: block;

text-align: left;

margin: 3px;

}

.input-group input {

height: 30px;

width: 93%;

padding: 5px 10px;

font-size: 16px;

border-radius: 5px;

border: 1px solid gray;

}

.btn {

padding: 10px;

font-size: 15px;

color: white;

background: #5F9EA0;

border: none;

border-radius: 5px;

}

.error {

width: 92%;

margin: 0px auto;

padding: 10px;

border: 1px solid #a94442;

color: #a94442;

background: #f2dede;

border-radius: 5px;

text-align: left;

}

.success {

color: #3c763d;

background: #dff0d8;

border: 1px solid #3c763d;

margin-bottom: 20px;

}

Search This Blog

Your Development Site