Problem statement:
Design HTML pages for Registration/login and connect that pages with database also generate
several reports as per the application requirement in your project.
Objective:
1. create login and registration page.
1.1 when user enters username and password check either it is valid display the message login succesfull..or if not.
1.2 if it is not valid store his information in database and make him valid and again perform the
login if login successfull display the appropriate message login successfull.
Solution:
A. First install XAMPP server on your machine as per the machine operating system and also
download sublime Text editor. (Errors may be like this:>api-ms-win-crt-runtime-|1-1-0.dll
reinstall)
B. Start Apache and MySQL services.
C. Go to browser and type localhost/phpmyadmin
D. Create database eg:login after that Create table eg:users inside this database and insert
one row value in it like testuser and password testuserpass.
E. Create one folder inside C:/Program file/XAMPP --> htdoc ---> create your project folder like
LoginProj
F. inside this LoginProj folder store three files in it. 1.login.php 2. style.css 3.process.php
G. Now inside login.php write the code of login form design with form action=process.php and
method="POST"
H. After that go to Browser and check either login form design is proper or not so for that type
localhost/LoginProj/login.php.
I. When we click on login button it take us to process.php page.
J. Now go to style.css page and write all code neccessary for login form design.
K. Now go to process.php page and write code
//1.to get values passes from form in login.php file.
<?php
$username=$_POST['username']; //username must be id="username" value in login.php file
$password=$_POST['password']; //password must be id="password" value in login.php file
//2.to prevent mysql injection. Ref:https://www.youtube.com/watch?v=arqv2YVp_3E
$username=stripcslashes($username);
$password=stripcslashes($password);
$username=mysql_real_escape_string($username);
$password=mysql_real_escape_string($password);
//3.connect to the server and select database.
mysql_connect("localhost","root","");
mysql_select_db("login");
//4.query the database for user.
$result=mysql_query("select * from users where username = '$username' and password =
'$password'") or die("Failed to query database" .mysql_error());
$row = mysql_fetch_array($result);
if($row['username']==$username && $row['password']==$password)
{
echo "Login success!!! Welcome".$row['username'];
}
else
{
echo "Failed to login...";
}
?>
L. Now go to browser and type localhost/LoginProj/login.php. enter user and password and click on login button appropriate message gets displayed.
/*HERE IS THE CODE FOR ALL PAGES*/
1. login.php
<html>
<head>
<title> Login and Registration Form Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="username" name="useri" id="user"/>
<input type="text" placeholder="password" name="pasw" id="pass"/>
<input type="text" placeholder="email id" name="emaill" id="email"/>
<button>Create</button>
<p class="message"> Already Registered?<a href="#"> Login</a></p>
</form>
<form class="login-form" action="process.php" method="POST">
<input type="text" placeholder="username" id="username" name="usr"/>
<input type="password" placeholder="password" id="password" name="passw"/>
<button>Login</button>
<p class="message">Not Registered?<a href="#"> Register</a></p>
</div>
</div>
<script src='https://code.jquery.com/jquery-3.4.1.min.js'>
</script>
<script>
$('.message a').click(function(){
$('form').animate({height:"toggle",opacity:"toggle"},"slow");
});
</script>
</body>
</html>
2. style.css
body{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url(Lighthouse.jpg);
height:100vh;
background-size:cover;
background-position:center;
}
.login-page{
width:360px;
padding:10% 0 0;
margin:auto;
}
.form{
position:relative;
z-index:1;
background:rgba(7,40,195,0.8);
max-width:360px;
margin:0 auto 100px;
padding:45px;
text-align:center;
}
.form input{
font family:"Roboto",sans-serif;
outline:1;
background:#f2f2f2;
width:100%;
border:0;
margin:0 0 15px;
padding:15px;
box-sizing:border-box;
font-size:14px;
}
.form button{
font family:"Roboto",sans-serif;
text-transform:uppercase;
outline:0;
background:#4cAF50;
width:100%;
border:0;
padding:15px;
color:#ffffff;
font-size:14px;
cursor:pointer;
}
.form button:hover,.form button:active{
background:#43A047;
}
.form .message{
margin:15px 0 0;
color:aliceblue;
font-size:12px;
}
.form .message a{
color:#4CAF50;
text-decoration:none;
}
.form .register-form{
display:none;
}
3. process.php
//query to the database
$sql="select * from users where username = '$uname' and password = '$password'";
$result=mysqli_query($con,$sql);
if (!mysqli_query($con,$sql)) {
die('Error: ' . mysqli_error($con));
}
else
{
$row=mysqli_fetch_array($result,MYSQLI_ASSOC);
if($row['username']==$uname && $row['password']==$password)
{
echo "Login success!!! Welcome ".$row['username'];
}
else
{
echo "Failed to login...";
}
}
mysqli_close($con);
?>
Design HTML pages for Registration/login and connect that pages with database also generate
several reports as per the application requirement in your project.
Objective:
1. create login and registration page.
1.1 when user enters username and password check either it is valid display the message login succesfull..or if not.
1.2 if it is not valid store his information in database and make him valid and again perform the
login if login successfull display the appropriate message login successfull.
Solution:
A. First install XAMPP server on your machine as per the machine operating system and also
download sublime Text editor. (Errors may be like this:>api-ms-win-crt-runtime-|1-1-0.dll
reinstall)
B. Start Apache and MySQL services.
C. Go to browser and type localhost/phpmyadmin
D. Create database eg:login after that Create table eg:users inside this database and insert
one row value in it like testuser and password testuserpass.
E. Create one folder inside C:/Program file/XAMPP --> htdoc ---> create your project folder like
LoginProj
F. inside this LoginProj folder store three files in it. 1.login.php 2. style.css 3.process.php
G. Now inside login.php write the code of login form design with form action=process.php and
method="POST"
H. After that go to Browser and check either login form design is proper or not so for that type
localhost/LoginProj/login.php.
I. When we click on login button it take us to process.php page.
J. Now go to style.css page and write all code neccessary for login form design.
K. Now go to process.php page and write code
//1.to get values passes from form in login.php file.
<?php
$username=$_POST['username']; //username must be id="username" value in login.php file
$password=$_POST['password']; //password must be id="password" value in login.php file
//2.to prevent mysql injection. Ref:https://www.youtube.com/watch?v=arqv2YVp_3E
$username=stripcslashes($username);
$password=stripcslashes($password);
$username=mysql_real_escape_string($username);
$password=mysql_real_escape_string($password);
//3.connect to the server and select database.
mysql_connect("localhost","root","");
mysql_select_db("login");
//4.query the database for user.
$result=mysql_query("select * from users where username = '$username' and password =
'$password'") or die("Failed to query database" .mysql_error());
$row = mysql_fetch_array($result);
if($row['username']==$username && $row['password']==$password)
{
echo "Login success!!! Welcome".$row['username'];
}
else
{
echo "Failed to login...";
}
?>
L. Now go to browser and type localhost/LoginProj/login.php. enter user and password and click on login button appropriate message gets displayed.
/*HERE IS THE CODE FOR ALL PAGES*/
1. login.php
<html>
<head>
<title> Login and Registration Form Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="username" name="useri" id="user"/>
<input type="text" placeholder="password" name="pasw" id="pass"/>
<input type="text" placeholder="email id" name="emaill" id="email"/>
<button>Create</button>
<p class="message"> Already Registered?<a href="#"> Login</a></p>
</form>
<form class="login-form" action="process.php" method="POST">
<input type="text" placeholder="username" id="username" name="usr"/>
<input type="password" placeholder="password" id="password" name="passw"/>
<button>Login</button>
<p class="message">Not Registered?<a href="#"> Register</a></p>
</div>
</div>
<script src='https://code.jquery.com/jquery-3.4.1.min.js'>
</script>
<script>
$('.message a').click(function(){
$('form').animate({height:"toggle",opacity:"toggle"},"slow");
});
</script>
</body>
</html>
2. style.css
body{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url(Lighthouse.jpg);
height:100vh;
background-size:cover;
background-position:center;
}
.login-page{
width:360px;
padding:10% 0 0;
margin:auto;
}
.form{
position:relative;
z-index:1;
background:rgba(7,40,195,0.8);
max-width:360px;
margin:0 auto 100px;
padding:45px;
text-align:center;
}
.form input{
font family:"Roboto",sans-serif;
outline:1;
background:#f2f2f2;
width:100%;
border:0;
margin:0 0 15px;
padding:15px;
box-sizing:border-box;
font-size:14px;
}
.form button{
font family:"Roboto",sans-serif;
text-transform:uppercase;
outline:0;
background:#4cAF50;
width:100%;
border:0;
padding:15px;
color:#ffffff;
font-size:14px;
cursor:pointer;
}
.form button:hover,.form button:active{
background:#43A047;
}
.form .message{
margin:15px 0 0;
color:aliceblue;
font-size:12px;
}
.form .message a{
color:#4CAF50;
text-decoration:none;
}
.form .register-form{
display:none;
}
3. process.php
<?php
$con=mysqli_connect("localhost","root","","login");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
// escape variables for security
$uname = mysqli_real_escape_string($con, $_POST['usr']);
$password = mysqli_real_escape_string($con, $_POST['passw']);
$con=mysqli_connect("localhost","root","","login");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
// escape variables for security
$uname = mysqli_real_escape_string($con, $_POST['usr']);
$password = mysqli_real_escape_string($con, $_POST['passw']);
//query to the database
$sql="select * from users where username = '$uname' and password = '$password'";
$result=mysqli_query($con,$sql);
if (!mysqli_query($con,$sql)) {
die('Error: ' . mysqli_error($con));
}
else
{
$row=mysqli_fetch_array($result,MYSQLI_ASSOC);
if($row['username']==$uname && $row['password']==$password)
{
echo "Login success!!! Welcome ".$row['username'];
}
else
{
echo "Failed to login...";
}
}
mysqli_close($con);
?>
