- Get link
- Other Apps
Here In this tutorial you are going to learn how to create a login and registration form using the HTML, CSS, PHP, MYSQL for the websites.
Three Major Things You Are Going to Learn
You are going to learn how to create beautiful hover effect for the websites
And also you are going to learn onclick event for the login and register forms. And also connecting the Login and Registration form to the MySQL database server
If you want to watch the full video of the tutorial please click on the below link or please click on the image show above
Description of the project:
In the above project you are going to learn how to create the navigation bar as shown in the above image. After creating the beautiful navigation bar you are going to learn how to add the color as the beautiful background. After adding color as the background you are going to learn how to create the subpage in the full page. After creating the subpage you are going to learn how to add the image in the sub page as the background image. After adding the image as background image to the sub page you are going to learn how to write the text on the image. After adding text you are going to learn how to add beautiful hover effect so that when you take your cursor over the image then the text appears.
After creating the hover effect you are going to learn how to create the login form and registration form separately and connecting the login form to the login button and registration form to the registration button. After connecting the login form to the login button and registration form to the registration button you are going to observe that when you click on the login button login form appears and when you click on the register button registration form appears. This is because of the onlick effect of the button. We have one challenge here after login or registration appears on clicking the login or register buttons how to close that, so here you are also going to learn how to remove the login and registration form using the cross button when you click on the cross button then again the login or registration form gets disappears.
After the html, css, javascript part is done you are going to learn how to connect the login and registration form to the mysql database server using the php and mysql queries.....
So please do not miss out the video you are going to learn a lot in this video....
Do not forget to follow this blog for more interesting content provided on this blog.
Note: If you have any doubt or any problem in creating the folder structure and running the program please watch this video completely, why because if you miss one step also you will get error ---the video link is given below---------
How to create #login and #registration #form using #HTML #CSS #PHP #MYSQL - YouTube
Note: You can download the image from the link given below ----
https://drive.google.com/drive/folders/1IasNYtQ96hXZ828vMtcqsRkR1m7ysr-V?usp=sharing
Note: please read each and every line in the registration.php and validate.php every one has to edit one line then only your database will work, i have mentioned a comment as a hint for you(//$connection=mysqli_connect('localhost','root','write your password here')) ------- if you have any doubt please comment under the video, the video link is given above.............
loginandregister.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Connecting Login and Registration Form to Database-----SeekCoding</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Chilanka&family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<div class="full-page">
<div class='navbar'>
<div class='logo'>
<a href='#'><h1>AwesomeWare</h1></a>
</div>
<nav>
<ul id='MenuItems'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About us</a></li>
<li><a href='#'>Products</a></li>
<li><a href='#'>Offers</a></li>
<li><button class='loginbtn'onclick="document.getElementById('login-form').style.display='block'" style="width:auto;">Login</button></li>
<li><button class='loginbtn'onclick="document.getElementById('register-form').style.display='block'" style="width:auto;">Register</button></li>
</ul>
</nav>
</div>
<div class="sub-page">
<div class="overlay"></div>
<div class="text">
<p>awesomeware was born at the intersection of style and technology. Thanks to our inspiring collections and our<br> impeccable customer service, we have been highly <br>successful since day one. Browse through our site <br>and check out the latest additions to our collection,<br> and feel free to get in touch with our team if <br>you need any assistance.<br> Happy shopping!</p>
</div>
</div>
<div id='login-form' class="login-page">
<div class="form-box">
<span onclick="document.getElementById('login-form').style.display='none'" class="close">×</span>
<div class="form">
<form class='login-form', action="validate.php", method="post">
<center><h1 class="main-heading">Login Form</h1></center>
<input type="text"name='emailid' placeholder="Email ID", required/>
<input type="password" name='password' placeholder="password", required/>
<button>LOGIN</button>
</form>
</div>
</div>
</div>
<div id="register-form" class='register-page'>
<div class="form-box1">
<span onclick="document.getElementById('register-form').style.display='none'" class="close">×</span>
<div class="form1">
<form class='register-form', action="registration.php", method="post">
<center><h1 class="main-heading">Register Form</h1></center>
<input type="text" name='user'placeholder="user name" required/>
<input type="text" name='emailid'placeholder="email-id" required/>
<input type="password"name='password' placeholder="password" required/>
<button>REGISTER</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.full-page
{
height: 100vh;
width: 100%;
background: linear-gradient(white,rgba(0,0,0,0.9));
position: absolute;
}
.navbar
{
display: flex;
align-items: center;
padding: 20px;
padding-left: 50px;
padding-right: 30px;
padding-top: 10px;
}
.logo a
{
text-decoration: none;
color: coral;
font-size: 20px;
font-family: 'Dancing Script', cursive;
}
nav
{
flex: 1;
text-align: right;
padding-top: 6px;
}
nav ul
{
display: inline-block;
list-style: none;
}
nav ul li
{
display: inline-block;
margin-right: 70px;
}
nav ul li a
{
text-decoration: none;
font-size: 20px;
color: coral;
font-family: sans-serif;
}
nav ul li button
{
font-size: 20px;
color: coral;
outline: none;
border: none;
background: transparent;
cursor: pointer;
font-family: sans-serif;
}
.sub-page
{
width: 1266px;
height: 550px;
position: absolute;
background: url(abc.png);
background-size: cover;
background-position: center;
left: 50px;
top: 70px;
}
.overlay
{
width: 100%;
height: 100%;
background: linear-gradient(rgba(0,0,0,0.5),white);
opacity: 0;
transition: 1s;
}
.sub-page:hover .overlay
{
opacity: 1;
}
.text
{
text-align: center;
color: white;
padding-right: 350px;
padding-left: 350px;
font-size: 20px;
font-family: 'Chilanka', cursive;
transform: translateY(-220%);
opacity: 0;
transition: 1s;
}
.sub-page:hover .text
{
opacity: 1;
}
#login-form
{
display: none;
}
.form-box
{
width: 300px;
height: 400px;
position: relative;
top: 90px;
left: 210px;
background: rgba(0,0,0,0.6);
}
.close
{
position: relative;
left: 270px;
bottom: 0;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,.close:focus
{
color: red;
cursor: pointer;
}
.main-heading
{
color: orangered;
padding-bottom: 20px;
}
.form
{
position: relative;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
bottom: 20px;
}
.form input, .form1 input
{
font-family: sans-serif;
outline: none;
border: none;
border-bottom: 1px solid black;
width: 100%;
margin: 0 0 15px;
padding: 15px;
font-size: 14px;
}
.form button, .form1 button
{
font-family: sans-serif;
width: 100%;
color: white;
font-size: 14px;
cursor: pointer;
padding: 15px;
border: none;
background: coral;
}
.form .asking
{
font-size: 12px;
margin: 15px 0 0;
color: white;
}
.form .asking a
{
color: orangered;
text-decoration: none;
}
#register-form
{
display: none;
}
.form-box1
{
width: 300px;
height: 400px;
position: absolute;
bottom: 90px;
left: 860px;
background: rgba(0,0,0,0.6);
}
.main-heading
{
color: orangered;
padding-bottom: 20px;
}
.form1
{
position: relative;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
bottom: 20px;
}
registration.php
<?php
session_start();
header('location:loginandregister.php');
$connection=mysqli_connect('localhost','root','shivakesh2');
//$connection=mysqli_connect('localhost','root','write your password here')
mysqli_select_db($connection,'loginandregistrationform');
$name=$_POST['user'];
$email=$_POST['emailid'];
$password=$_POST['password'];
$select="select * from register_table where email_id='$email'";
$result=mysqli_query($connection,$select);
$num=mysqli_num_rows($result);
if($num==1)
{
echo" user already exists";
}
else
{
$reg="insert into register_table(name,email_id,password) values('$name','$email','$password')";
mysqli_query($connection,$reg);
}
?>
validate.php
<?php
session_start();
$connection=mysqli_connect('localhost','root','shivakesh2');
//$connection=mysqli_connect('localhost','root','write your password here')
mysqli_select_db($connection,'loginandregistrationform');
$email=$_POST['emailid'];
$password=$_POST['password'];
$select="select * from register_table where email_id='$email' && password='$password'";
$result=mysqli_query($connection,$select);
$num=mysqli_num_rows($result);
if($num==1)
{
header('location:app.php');
}
else
{
header('location:loginandregister.php');
}
?>
app.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>app screen</title>
</head>
<body>
<a href="logout.php"><button>logout</button></a>
<h1>Hi! Guys welcome to Seek Coding Youtube Channel<br>If You Are New to my channel, please do Subscribe to my channel and <br> like, share video if you found the tutorial is interesting...
<br>Thankyou.....</h1>
</body>
</html>
logout.php
<?php
session_start();
session_destroy();
header('location:loginandregister.php');
?>
sql file.sql
create database loginandregistrationform;
use loginandregistrationform;
create table register_table(name varchar(30),email_id varchar(50) primary key,password varchar(20));
Comments
Post a Comment
If you have any issues please let me know