- Get link
- X
- Other Apps
Live Action :
- First , install the xampp server on your local machine.
- After installed the xampp server, open the xampp control panel (xampp-control.exe) from xampp server directory
 |
4. After start apche , open browser and write the "localhost" or "127.0.0.1".
5. Open xampp server directory.
6. In directory we can see the "htdocs folder". By default xampp server point the htdocs folder. we will make any php file at htdocs folder.
You can see below image where my every project are inside the htdocs folder.
7. Here we start coding for login page . we use the ajax for this login page system.
instruction :
we have 5 file those are 1) index.php
2) sign_up.php
3) verify_login.php
4) check_session.php
5) main.php
Create the table :
table name : sign_up
Note : first make the above file. After that paste this code.
1)index.php : this file contain Ajax , php code , html.
2)sign_up.php : it contain the code for insert the sign_up data into data base.
3)verify_login.php : it contain the code for login form where it match the username and passeword with table data.
4) check_session.php : this file check the user session are active or not . if user session is not activate then redirect the login page first.
5)main.php : after login user redirect on this page where you can see the active user name or email-id
- index.php
<?php
session_start();
error_reporting(E_ERROR | E_PARSE);
?>
<!doctype html>
<html lang="en">
<head>
<title>Exam Page</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<style>
.form {
opacity: 90%;
background-color: antiquewhite;
width: 30%;
}
</style>
<script>
var count = 0, count1 = 0, count2 = 0, count3 = 0;
function verify_input() {
var email = document.getElementById('email');
var password = document.getElementById("password");
if (email.value == '' && password.value == '') {
alert("Please fill the all field");
}
else {
//call the data base for check the input
var http = new XMLHttpRequest();
http.open("GET","verify_login.php?email="+email.value+"&password="+password.value,false);
http.send();
if("1" == http.responseText){
alert("Succesfully Logged In");
window.location = "/exam/main.php";
}
else{
alert("Please Enter Correct password")
alert(http.responseText);
}
}
}
//password conformation function
function conformation() {
var a = document.getElementById("h1")
var m = document.getElementById("h3");
var span1 = document.getElementById("t1");
var span2 = document.getElementById("t2");
var span3 = document.getElementById("t3");
var format = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/;
var str = /[0-9]/;
if ((a.value.length) >= 8) {
t1.style.display = "none";
count = 1;
}
else {
t1.style.display = "";
count = 0
}
if (a.value.match(format)) {
t2.style.display = "none";
count1 = 1;
}
else {
t2.style.display = "";
count1 = 0;
}
if (a.value.match(str)) {
t3.style.display = "none";
count2 = 1
}
else {
t3.style.display = "";
count2 = 0;
}
if (a.value == m.value) {
h2.style.display = "none";
count3 = 1;
}
else {
h2.style.display = "";
count3 = 0;
}
}
//submit sign-up form
function submitted() {
var name= document.getElementById("sign_name").value ;
var email = document.getElementById("sign_email-id").value;
var a = document.getElementById("h1").value;
var m = document.getElementById("h3").value;
if (name!='' & email!='' & count == 1 && count1 == 1 && count2 == 1 && count3 == 1) {
var http = new XMLHttpRequest();
http.open("GET","sign_up.php?name="+name+"&email="+email+"&password="+a,false);
http.send();
if('Data insert succesfully' == http.responseText){
alert("Succesfully Register Your data");
swap_form("1")
}
else{
alert("Not login");
}
}
else {
alert('Please check all field');
}
}
function swap_form(a){
if(a =='0'){
document.getElementById("login_form").style.display ="none";
document.getElementById("sign_up_form").style.display ="";
}
else{
document.getElementById("login_form").style.display ="";
document.getElementById("sign_up_form").style.display ="none";
}
}
</script>
</head>
<body>
<div class='container form mt-5' id='login_form'>
<form class='p-4'>
<h4 class='text-center'>Login</h4>
<hr class='w-50'>
<div class="form-group">
<label for="title_username">Email address/username:</label>
<input type="email" class="form-control" placeholder="Enter email /user" id="email" >
</div>
<div class="form-group">
<label for="title_username">Password</label>
<input type="password" class="form-control" placeholder="Enter Password" id="password">
</div>
<div class='text-center'>
<button type='button' class="btn btn-primary p-3" type="button" value='Login'
onclick='verify_input()'>Login</button>
</div>
</form>
<div class='text-center'>
<a href="#" class='text-center btn ' onclick='swap_form("0")' id='swap_sign'><b>Create Account</b></a>
</div>
</div>
<div class='container form mt-5' id=sign_up_form style="display: none;">
<form class='p-4'>
<h4 class='text-center'>Registration Form</h4>
<hr class='w-50'>
<div class="form-group">
<label for="title_username">Enter the Name:</label>
<input type="email" class="form-control" placeholder="Enter email /user" id="sign_name">
</div>
<div class="form-group">
<label for="title_email">Enter Email-id</label>
<input type="email" class="form-control" placeholder="Enter email /user" id="sign_email-id">
</div>
<div class="form-group">
<label for="title_password">Password</label>
<input type="password" class="form-control" id="h1" onkeyup="conformation()">
<span class="alert alert-danger my-1" id="t1" style="display:block;">*minimum 8 character required</span><br>
<span class="alert alert-danger my-1" id="t2" style="display:block;">*at least one symbol required</span><br>
<span class="alert alert-danger my-1" id="t3" style="display:block">*at least one number required</span><br>
</div>
<div class="form-group">
<label for="title_conformapass">Conform Password</label>
<input type="password" class="form-control" id="h3" onkeyup="conformation()">
<span class="alert alert-danger my-1" id="h2" style="display:block">Password Not match</span>
</div>
<div class='text-center'>
<button type='button' class="btn btn-primary p-3" type="button" value='Login'
onclick='submitted()'>Sign Up</button>
</div>
</form>
<div class='text-center'>
<a href="#" class='text-center btn ' onclick='swap_form("1")' id='swap_login'><b>Already have Account</b></a>
</div>
</div>
</body>
</html>
- connection_sql.php :
Note: change the data base name and host name Normally default hostname is "localhost" Default username :root and password :root <?php $conn = mysqli_connect("localhost:3307","root","root","exam"); ?>
- sign_up.php
$conn = mysqli_connect("localhost:3307","root","root","exam");
?>
<?php
include("connection_sql.php");
if($conn){
$name = $_GET['name'];
$email =$_GET['email'];
$password =$_GET['password'];
$query = "INSERT INTO sign_up(name, email ,password) values('$name','$email','$password')" ;
$insert = mysqli_query($conn,$query);
if($insert){
echo "Data insert succesfully";
}
else{
echo "Not inserted any value";
}
}
else{
echo "connection not succesfully";
}
?>
- verify_login.php
<?php
session_start();
error_reporting(E_ERROR | E_PARSE);
include("connection_sql.php");
if($conn){
$email =$_GET['email'];
$password =$_GET['password'];
$query = "SELECT * FROM sign_up WHERE email='$email' AND password='$password'";
$row = mysqli_query($conn,$query);
if($row)
{
$count = mysqli_num_rows($row);
if($count){
$_SESSION['email'] =$email;
echo "1";
}
else{
echo "Please Check your username and password";
}
}
}
else{
echo "You are not connected with server ";
}
?>
- check_session.php
<?phpif(isset($_SESSION['email'])){ echo $_SESSION['email'];}else{
header("Location: http://localhost/exam/index.php"); }
?>
<?php
if(isset($_SESSION['email'])){
echo $_SESSION['email'];
}
else{
header("Location: http://localhost/exam/index.php");
}
?>
- main.php
<?php
session_start();
include("../check_session.php");
?>
<!doctype html>
<html lang="en">
<head>
<title>Main Page</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav>
</nav>
</body>
</html>
If you have any doubt then ask me in comment I will give the best solution .
And if you have any problem in php then ask me also.
Download code : Download
Easy and simple login form.
ReplyDeleteKeep it up
Perfect form
ReplyDelete