Build login system using PHP and MySQL. Also show landing page after user successfully logged in. In landing page user should be able to logout from the system. Do proper validation of Login and Sign Up form as shown below. For landing page use your own design.
Solution:-
- Start WAMP or XAMPP server and type http://localhost/phpmyadmin/ in your browser url. Default username of phpmyadmin is root and password is blank).
- On phpmyadmin at the top you can see Database tab . Click on Database and look for the create database option.
- You can choose any name you want for your database. For this tutorial create a database named registeration by clicking on create button.
- Now, look for Import tab option, there you will find upload section to upload sql file to your server ( import this file users.sql ) .
- If you are using XAMPP , place all the php and css file in the htdocs located under the xampp folder on your C drive else if you are using WAMPP ,place all the file in the www folder located under the wampp folder on your C drive.
- Folder structure should be like this inside the htdocs/www.
Code:-
conn.php file (for Database connection)
<?php
$conn = mysqli_connect("localhost","root","","registeration");
// if($conn){
// echo "successfully connected";
// }else{
// echo "error connecting".mysqli_error($conn);
// }
?>
signup.php file (signup form)
<?php
include "conn.php";
if(isset($_POST["submit"]))
{
$username = $_POST["username"];
$password = $_POST["password"];
$cpassword = $_POST["cpassword"];
if(preg_match("/^[a-zA-Z0-9 _]{3,30}$/",$username))
{
$user_exist_query = "select * from users where username='$username'";
$user_exist = mysqli_query($conn,$user_exist_query);
if(mysqli_num_rows($user_exist)>0)
{
echo "<script>
alert('Username already exist!');
</script>";
}else{
if(preg_match("/^[a-zA-Z0-9#$%&*@?]{8,16}$/",$password))
{
if($cpassword == $password)
{
$insert = "insert into users(username,password) values('$username','$password')";
if(mysqli_query($conn,$insert))
{
echo "<script>
alert('Account created successfully');
</script>";
header('location:login.php');
}
}else{
echo "<script>
alert('Password does not match');
</script>";
}
}else{
echo "<script>
alert('Invalid password!.Password should be 8 to 16 char');
</script>";
}
}
}else{
echo "<script>
alert('Invalid username');
</script>";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Sign up</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<h1>Sign Up</h1>
<p align="center">Please fill this form to create an account</p>
<form method="post" action="">
<p>Username</p>
<input type="text" name="username" placeholder="Username" required><br>
<p>Password</p>
<input type="password" name="password" placeholder="Password" required><br>
<p>Confirm Password</p>
<input type="password" name="cpassword" placeholder="Confirm Password" required>
<br><br>
<button type="submit" name="submit">Sign Up</button>
<button type="reset" class="reset">Reset</button>
</form>
<p class="text">Already have an account? <a href="login.php">Login here</a></p>
</div>
</body>
</html>
login.php file (Login form)
<?php
include "conn.php";
session_start();
if(isset($_POST["submit"]))
{
$username = $_POST["username"];
$password = $_POST["password"];
$check_query = "select * from users where username='$username' and password='$password'";
$check = mysqli_query($conn,$check_query);
if(mysqli_num_rows($check)==1)
{
$_SESSION['user'] = $username;
header('location:index.php');
}else{
echo "<script>
alert('Invalid username and password');
</script>";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<h1>Login</h1>
<p align="center">Please fill in your credentials to login</p>
<form method="post" action="">
<p>Username</p>
<input type="text" name="username" placeholder="Username" required><br>
<p>Password</p>
<input type="password" name="password" placeholder="Password" required><br>
<br><br>
<button type="submit" name="submit">Login</button>
</form>
<p class="text">Don't have an account? <a href="signup.php">Sign up now</a></p>
</div>
</body>
</html>
style.css file (style sheet)
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: sans-serif;
}
div{
background-color: lightgray;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 10;
box-shadow: 2px 2px 10px 10px gray;
}
form{
padding: 20px;
}
div h1{
text-align: center;
color:#a517ba;
padding: 20px;
}
form p{
font-size: 20px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}
div input{
padding: 10px;
width: 430px;
border: 1px solid;
border-radius: 5px;
}
.text{
text-align: center;
margin-top: 10px;
padding: 10px;
}
button{
background-color: skyblue;
padding: 10px;
color: white;
border: none;
width: 80px;
font-size: 15px;
font-weight: bold;
}
.reset{
background-color: #fff;
color: black;
margin-left: 10px;
}
a{
text-decoration: none;
}
index.php file (Simple Landing Page have Logout Option)
<?php
include "conn.php";
session_start();
if(!isset($_SESSION['user']))
{
header('location:login.php');
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<style>
.head1 {
font-size:40px;
color:#009900;
font-weight:bold;
}
.head2 {
font-size:17px;
margin-left:10px;
margin-bottom:15px;
}
body {
margin: 0 auto;
background-position:center;
background-size: contain;
}
.menu {
position: sticky;
top: 0;
background-color: #009900;
padding:10px 0px 10px 0px;
color:white;
margin: 0 auto;
overflow: hidden;
}
.menu a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.menu-log {
right: auto;
float: right;
}
footer {
width: 100%;
bottom: 0px;
background-color: #000;
color: #fff;
position: absolute;
padding-top:20px;
padding-bottom:50px;
text-align:center;
font-size:30px;
font-weight:bold;
}
.body_sec {
padding:40px;
}
</style>
</head>
<body>
<!-- Header Section -->
<header>
<div class="head1">MyBlog.com</div>
<div class="head2">Welcome here <span style="background-color: black; color: white; font-weight: bold;"><?php echo $_SESSION['user']; ?></span></div>
</header>
<!-- Menu Navigation Bar -->
<div class="menu">
<a href="#home">HOME</a>
<a href="#news">NEWS</a>
<a href="#notification">NOTIFICATIONS</a>
<div class="menu-log">
<a href="logout.php">LOGOUT</a>
</div>
</div>
<!-- Body section -->
<div class = "body_sec">
<section id="Content">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>
</section>
</div>
<!-- Footer Section -->
<footer>
© copyright 2020. MyBlog.com
</footer>
</body>
</html>
logout.php file
<?php
session_start();
session_destroy();
header('location:login.php');
?>
************* END ***************
Thank you so much��
ReplyDelete