Make a Sign In and Sign Up Form and Connect to the Database - CodeTextPro | Web Tutorial | Technology

CodeTextPro.com Provides - Web design, Technology gyan, Digital marketing, Online earnings, Seo, Adsense, Technology news, Motivation and inspiration, Latest Technology Affairs, Gadgets, Blogging

Friday, December 14, 2018

Make a Sign In and Sign Up Form and Connect to the Database

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>

<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">

<link rel="stylesheet" type="text/css" href="css/main.css">




</head>
<body>

<form method="post" action="welcome.php">

<div class="limiter">
<div class="container-login100">
<div class="wrap-login100 p-t-85 p-b-20">
<form class="login100-form validate-form">
<span class="login100-form-title p-b-70">
Welcome
</span>
<span class="login100-form-avatar">
<img src="images/hanif.jpg" alt="AVATAR">
</span>

      <div class="wrap-input100 validate-input m-t-85 m-b-35" data-validate = "Enter username">
<input class="input100" type="text" name="un">
<span class="focus-input100" data-placeholder="Username"></span>
</div>
<br><br>

<div class="wrap-input100 validate-input m-b-50" data-validate="Enter password">
                  <input class="input100" type="password" name="pwd">
<span class="focus-input100" data-placeholder="Password"></span>
</div>
<br><br>

<div class="container-login100-form-btn">
<button class="login100-form-btn">
Login
</button>
</div>
<br>

<ul class="login-more p-t-190">
<li class="m-b-8">
<span class="txt1">
Forgot
</span>

<a href="#" class="txt2">
Username / Password?
</a>
</li>

<li>
<span class="txt1">
Don’t have an account?
</span>

<a href="sign_up.html" class="txt2">
Sign up
</a>
</li>
</ul>
</form>
</div>
</div>
</div>
</body>
</html>



welcome.php

<?php
$user=$_POST['un'];
$pass=$_POST['pwd'];
if($user=="admin" && $pass=="nopass")
{
echo "Welcome Admin";
}
else
{
echo "Wrong User Id or Password";
}
?>










sign_up.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>SignUp</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>

<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">

<link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<body>
<form method="post" action="register.php">

<div class="limiter">
<div class="container-login100">
<div class="wrap-login100 p-t-85 p-b-20">
<form class="login100-form validate-form">
<span class="login100-form-title p-b-70">
Welcome
</span>
<span class="login100-form-avatar">
<img src="images/hanif.jpg" alt="AVATAR">
</span>

<div class="wrap-input100 validate-input m-t-85 m-b-35" data-validate = "Enter username">
<input class="input100" type="text" name="name">
<span class="focus-input100" data-placeholder="Full Name"></span>
</div>
<br>

<div class="wrap-input100 validate-input m-t-85 m-b-35" data-validate = "Enter email">
<input class="input100" type="email" name="Email">
<span class="focus-input100" data-placeholder="Email"></span>
</div>
<br>

<div class="wrap-input100 validate-input m-b-50" data-validate="Enter password">
<input class="input100" type="password" name="pass">
<span class="focus-input100" data-placeholder="Password"></span>
</div>
<br>

<div class="wrap-input100 validate-input m-b-50" data-validate="Enter Confirm password">
<input class="input100" type="password" name="c_pass">
<span class="focus-input100" data-placeholder="Confirm Password"></span>
</div>
<br>

<div class="container-login100-form-btn">
<button class="login100-form-btn">
Sign Up
</button>
</div>
<br>

<ul class="login-more p-t-190">
<li class="m-b-8">
<span class="txt1">
Forgot
</span>

<a href="#" class="txt2">
Username / Password?
</a>
</li>

<li>
<span class="txt1">
Don’t have an account?
</span>

<a href="index.html" class="txt2">
Sign In
</a>
</li>
</ul>
</form>
</div>
</div>
</div>
</body>
</html>







register.php

<?php
$server="localhost";
$user="root";
$pass="";
$db="hanif";

$name=$_POST['name'];
$email=$_POST['Email'];
$upass=md5($_POST['pass']);
$cpass=md5($_POST['c_pass']);
$con=mysqli_connect($server,$user,$pass,$db);
if(!$con){
echo "not connected";
}
else {
echo "connected";

$sql="insert into users(name,email,pass)values('$name','$email','$upass')";
if($upass==$cpass){
if(mysqli_query($con,$sql)){
echo " value inserted";
}
else
echo "not inserted";
}
else
echo "mismatch";
}

?>






You Want CSS File

2 comments:

  1. nice work bro

    hello guy's to get free courses of a bunch of domains like programing,art,design,cooking .... :
    https://www.facebook.com/Free-courses-Here-345341249496614

    ReplyDelete