Download as pdf or txt
Download as pdf or txt
You are on page 1of 37

PRACTICAL 3

Aim: Develop a registration form by using various form elements like input
box, text area, radio buttons, check boxes etc.
Html code:
<html>
<head>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<form action="#" name="StudentRegistration">
<center><font size=4><b>Student Registration Form</b></font></center>
Name
<input type="text" name="textnames" id="textname" size="30"><br><br>
Father Name
<input type=”text" name="fathername" id="fathername" size="30"><br><br>
Postal Address
<input type="text" name="paddress" id="paddress" size="30"><br><br>
Personal Address
<input type="text" name="personaladdress" id="personaladdress" size="30"><br><br>
Sex
<input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female<br><br>
City
<select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select><br><br>
Course
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select><br><br>
District
<select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>

Sumit pandey 2003260


<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select><br><br>
State
<select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select><br><br>
PinCode
<input type="text" name="pincode" id="pincode" size="30"><br><br>
EmailId
<input type="text" name="emailid" id="emailid" size="30"><br><br>
DOB
<input type="text" name="dob" id="dob" size="30"><br><br>
MobileNo
<input type="text" name="mobileno" id="mobileno" size="30"><br><br>
<input type="reset">
<input type="submit" value="Submit Form" />
</form>
</body>
</html>
Output:

Sumit pandey 2003260


PRACTICAL 4
Aim:Design an HTML page by using the concept of internal , inline and external style
sheets.
Html code:
//External CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="mystyle.css">
</head>
<body>
<p>This is the first paragraph</p>
</body>
</html>
body{
background-color: lightblue;
}
h1
{
color: navy;
margin-left:20px;
}
Output:

//internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:linen;
}
h1{

Sumit pandey 2003260


color: maroon;
margin-left:40px;
}
</style>
</head>
<body>
<h1>internal css</h1>
<p>The internal css</p>
</body>
</html>
Output:

//inline CSS
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">
inline CSS
</h1>
<p style="color: red;">
This is a inline css</p>
</body>
</html>

Output:

Sumit pandey 2003260


PRACTICAL 5

Aim: Create an HTML file to implement the styles related to text , fonts , links
using cascading style sheets
HTML Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
text-indent: 50px;
}
h1
{
background-color: black;
color: white;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
text-shadow: 2px 2px red;
}
.serif
{
font-family: "Times New Roman", Times, serif;
}
.sansserif
{
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 20px;
}
.monospace
{
font-family: "Lucida Console", Courier, monospace;
}
a:link
{
color: red;
}
a:visited
{

Sumit pandey 2003260


color: green;
}
a:hover
{
color: hotpink;
}
a:active
{
color: blue;
}
</style>
</head>
<body>
<h1>This Heading is Black with White Text</h1>
<p>This page has a grey background color and a blue text.</p>
<p>Another paragraph.</p>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
<p class="monospace">This is a paragraph, shown in the Lucida Console font.</p>
<p><b><a href="#" target="_blank">This is a link</a></b></p>
</body>
</html>
OUTPUT:

Sumit pandey 2003260


PRACTICAL-6

OBJECTIVE:Create an HTML file to implement the concept of document object model


using JavaScript.
Use getElementById Method and write in an element
Use getElementsTagName Method and Change color and add border to
the elements
Use getElementsByClassName Method and for one paragraph and
heading having same class name, change alignment
Use querySelectorAll Method and Create Table on Click

Solution:

1. Use getElementById Method and write in an element

<!DOCTYPE html>
<html>
<head>
<title>GET ELEMENT</title>
<style>
body{
background-color:rgb(122, 165, 127);
text-align: center;
font-size: 20px;
font-family:'Lucida Sans', 'Lucida Sans Regular';
color: #9b620c;
margin-top: 120px;
}
</style>
</head>
<body>
<h2>Finding HTML Elements by Id</h2>
<p id="intro">Nitin Gupta</p>
<p id="demo"></p>
<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML ="My Name is " + myElement.innerHTML;
</script>
</body>
</html>
Output:

Sumit pandey 2003260


2. Use getElementsTagName Method and Change color and add border to
the elements
<!DOCTYPE html>
<html>
<head>
<title>GET ELEMENT</title>
<style>
Body{ background-color:rgb(78, 36, 95);
text-align: center;
font-size: 20px;
font-family:'Lucida Sans', 'Lucida Sans Regular';
color: #cac2ce;
margin-top: 120px; }
</style>
</head>
<body>
<p>HERE IS NITIN GUPTA</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = document.getElementsByTagName("p");
x[0].style.color = "red";
x[0].style.border = "dotted #0000FF";
}
</script>
</body>
</html>

OUTPUT:

Sumit pandey 2003260


3. Use getElementsByClassName Method and for one paragraph andheading having
same class name, change alignment
<!DOCTYPE html>
<html>
<head>
<title>GET ELEMENT</title>
<style>
body{
background-color:rgb(78, 36, 95);
text-align: center;
font-size: 20px;
font-family:'Lucida Sans', 'Lucida Sans Regular';
color: #cac2ce;
margin-top: 120px;
}
</style>
</head>
<body>

Sumit pandey 2003260


<h1 class="ab">HEADING</h1>
<p class="ab">HERE IS NITIN GUPTA</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementsByClassName("ab")[0].style.fontSize = "100px";
document.getElementsByClassName("ab")[1].style.fontSize = "x-large";
document.getElementsByClassName("ab")[1].style.textAlign = "rigth";
document.getElementsByClassName("ab")[0].style.textAlign = "left";

}
</script>
</body>
</html>

Output:

Sumit pandey 2003260


PRACTICAL-7

Aim:- Create an HTML page including JavaScript that takes a given set of
integer numbers and shows them after sorting in descending order.
HTML CODE:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the button to sort the array in descending order.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML= points;
function myFunction()
{
points.sort(function(a, b){return b - a});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
OUTPUT:

Sumit pandey 2003260


PRACTICAL-8

OBJECTIVE: Write an HTML page including any required JavaScript that takes
a number from one text field in the range of 0 to 999 and shows it in another
text field in words. If the number is out of range, it should show “out of range”
and if it is not a number, it should show “not a number” message in the result
box
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>GET ELEMENT</title>
<style>
body{
background-color:rgb(78, 36, 95);

text-align: center;
font-size: 20px;
font-family:'Lucida Sans', 'Lucida Sans Regular';
color: #cac2ce;
margin-top: 120px;
}
</style>
</head>
<body>
<button onclick="myFunction()">CLICK ON A BUTTON TO INPUT A NUMBER</button
>
<p id="a"></p>
<script>
function myFunction()
{
var num = prompt("Please enter your number", "0-999");
document.getElementById("a").innerHTML=num;
if(num>=0 && num<=999)
{
var res=num.toString().split("");
document.getElementById("a").innerHTML=res;

var s="";
var i;
for(i=0;i<res.length;i++)
{
if(res[i]=='0')

Sumit pandey 2003260


{
s=s+" zero";
}
else if(res[i]=='1')
{
s=s+" one";
}
else if(res[i]=='2')
{
s=s+" two";
}
else if(res[i]=='3')
{
s=s+" three";
}
else if(res[i]=='4')
{
s= s+" four";
}
else if(res[i]=='5')
{
s= "five"+s;
}
else if(res[i]=='6')
{
s= s+" six";
}
else if(res[i]=='7')
{
s= s+" seven";
}
else if(res[i]=='8')
{
s= s+" eigth";
}
else if(res[i]=='9')
{
s= s+" nine";
}
}
document.getElementById("a").innerHTML=s;
}
else if(num<=0 || num>=999)
{

Sumit pandey 2003260


document.getElementById("a").innerHTML="OUT OF RANGE";
}
else
{
document.getElementById("a").innerHTML="NOT A NUMBER";

}
}
</script>
</body>
</html>

OUTPUT:

Sumit pandey 2003260


Sumit pandey 2003260
PRACTICAL 9

Aim: Create a PHP file to print any text using variable.


<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<?php
echo "<h2>PHP is Fun!</h2>";
echo "Hello world!<br>";
echo "I'm about to learn PHP!<br>";
echo "This ", "string ", "was ", "made ", "with multiple parameters.";
?>
</body>
</html>
Output:

Sumit pandey 2003260


PRACTICAL 10

Aim: Demonstrate the use of conditional statements and Loops in PHP.


odd or even
<?php
function check($number)
{
if($number % 2==0)
{
echo "Even";
}
else
{
echo "odd";
}
}
$number=18;
check($number)
?>
Output:

vowel or consonant

<?php
$ch='r';
switch($ch)
{
case 'a':
echo "Character is vowel";
break;
case 'e':
echo "Character is vowel";
break;
case 'i':
echo "Character is vowel";
break;
case 'o':

Sumit pandey 2003260


echo "Character is vowel";
break;
case 'u':
echo "Character is vowel";
break;
default:
echo "Character is Consonant";
break;
}
?>
Output:

cube of integer

<?php
function cube($n)
{
$sum=0;
for($x=1; $x<=$n; $x++)
$sum=$x*$x*$x;
return $sum;
}
$n=7;
echo cube($n);
?>
Output:

right triangle

Sumit pandey 2003260


<?php
for ($i=0; $i<=5; $i++){
for ($j=1; $j<=$i; $j++){
echo $j;
}
echo "<br>";
}
?>
Output:

Sumit pandey 2003260


PRACTICAL 11:

Aim:- Create a PHP file using GET and POST methods.


(a) Use two text boxes (Name, Email ID) and pass data using both methods
(b) Create a form with 5 different elements and pass data using both methods
a) GET METHOD
HTML CODE:
<html>
<body>
<form action="welcome.php" method="get">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
PHP CODE:
<html>
<body>
Welcome <?php echo $_GET["name"]; ?><br>
Your email address is: <?php echo $_GET["email"]; ?>
</body>
</html>
OUTPUT:
Welcome Janvi
Your email address is janvimadhu06@gmail.com
POST METHOD
HTML CODE:
<html>
<body>
<form action="welcome.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
PHP CODE:
<html>
<body>
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
</body>

Sumit pandey 2003260


</html>

OUTPUT:
Welcome Janvi
Your email address is janvimadhu06@gmail.com
b) POST METHOD
<!DOCTYPE HTML>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);

if (!preg_match("/^[a-zA-Z-' ]*$/",$name)) {
$nameErr = "Only letters and white space allowed";
}
}
if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}

if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);

Sumit pandey 2003260


URL)
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-
9+&@#\/%=~_|]/i",$website)) {
$websiteErr = "Invalid URL";
}
}
if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}
if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<h2>PHP Form Validation Example</h2>
<p><span class="error">* required field</span></p>
<form method="post" action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name" value="<?php echo $name;?>">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail: <input type="text" name="email" value="<?php echo $email;?>">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website: <input type="text" name="website" value="<?php echo $website;?>">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></te
xtarea>
<br><br>
Gender:
<input type="radio" name="gender"<?php if (isset($gender) &&
$gender=="female") echo "checked";?> value="female">Female
<input type="radio" name="gender"<?php if (isset($gender) &&

Sumit pandey 2003260


$gender=="male") echo "checked";?> value="male">Male
<input type="radio" name="gender"<?php if (isset($gender) &&
$gender=="other") echo "checked";?> value="other">Other
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>
</body>
</html>
Output:

Sumit pandey 2003260


PRACTICAL 12

Aim: A simple calculator web application that takes two numbers and an
operator (+,-, /, * and %) from an HTML page and returns the result page with
the operation
performed on the operands.
HTML Code:
<html>
<head>
<script>
//function that display value
function dis(val)
{
document.getElementById("result").value+=val
}

//function that evaluates the digit and return result


function solve()
{
let x = document.getElementById("result").value
let y = eval(x)
document.getElementById("result").value = y
}

//function that clear the display


function clr()
{
document.getElementById("result").value = ""
}
</script>
<!-- for styling -->
<style>
.title{
margin-bottom: 10px;
text-align:center;
width: 210px;
color:green;
border: solid black 2px;
}

input[type="button"]
{
background-color:green;

Sumit pandey 2003260


color: black;
border: solid black 2px;
width:100%
}

input[type="text"]
{
background-color:white;
border: solid black 2px;
width:100%
}
</style>
</head>
<!-- create table -->
<body>
<div class = title >Calculator</div>
<table border="1">
<tr>
<td colspan="3"><input type="text" id="result"/></td>
<!-- clr() function will call clr to clear all value -->
<td><input type="button" value="c" onclick="clr()"/></td>
</tr>
<tr>
<!-- create button and assign value to each button -->
<!-- dis("1") will call function dis to display value -->
<td><input type="button" value="1" onclick="dis('1')"/></td>
<td><input type="button" value="2" onclick="dis('2')"/></td>
<td><input type="button" value="3" onclick="dis('3')"/></td>
<td><input type="button" value="/" onclick="dis('/')"/></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="dis('4')"/></td>
<td><input type="button" value="5" onclick="dis('5')"/></td>
<td><input type="button" value="6" onclick="dis('6')"/></td>
<td><input type="button" value="-" onclick="dis('-')"/></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="dis('7')"/></td>
<td><input type="button" value="8" onclick="dis('8')"/></td>
<td><input type="button" value="9" onclick="dis('9')"/></td>
<td><input type="button" value="+" onclick="dis('+')"/></td>
</tr>
<tr>
<td><input type="button" value="." onclick="dis('.')"/></td>

Sumit pandey 2003260


<td><input type="button" value="0" onclick="dis('0')"/></td>
<!-- solve function call function solve to evaluate value -->
<td><input type="button" value="=" onclick="solve()"/></td>
<td><input type="button" value="*" onclick="dis('*')"/></td>
</tr>
</table>
</body>
</html>

OUTPUT:

Sumit pandey 2003260


PRACTICAL 13

AIM: Implement login page contains the user name and the password of the user to
authenticate with Session using PHP and MySQL, also implement this with the
help of PHP-Ajax.
Html code:
<!DOCTYPE html>
<html>
<head>
<script>
function _(el) {
return document.getElementById(el);
}

function ajax_data(php_file, el, send_data) {


_(el).innerHTML = "Please wait..";
var hr = new XMLHttpRequest();
hr.open('POST', php_file, true);
hr.setRequestHelper("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function () {
if (hr.readyState === 4 && hr.status === 200) {
_(el).innerHTML = hr.responseText;
}
};
hr.send(send_data);
}
function login_page() {
ajax_data('login-form.php', 'page', null);
}
function validFName(fld) {

var illegalChars = /\W/; // allow letters, numbers, and underscores


if ((fld.value.length < 4) || (fld.value.length > 15)) {
_('name_error').innerHTML = "Name 5 - 15 characters";
return false;
}else if (illegalChars.test(fld.value)) {
_('name_error').innerHTML = "Yout type illegal characters";
return false;
}
else{
_('name_error').innerHTML = "<img src='ok.png'>";

}
return true;
}
function validate_email(fld) {
with (fld)
{
apos = value.indexOf("@");
dotpos = value.lastIndexOf(".");

Sumit pandey 2003260


if (apos < 1 || dotpos - apos < 2) {
_('email_error').innerHTML = "Please type valid email address";
return false;
} else {
_('email_error').innerHTML = "<img src='ok.png'>";
return true;
} }}
function valid_msg(fld) {

var illegalChars = /\W /; // allow letters, numbers, and underscores


if ((fld.value.length < 14) || (fld.value.length > 100)) {
_('msg_error').innerHTML = "Message 15 - 100 characters";
return false;
}else if (illegalChars.test(fld.value)) {
_('name_error').innerHTML = "Yout type illegal characters";
return false;
}
else{
_('msg_error').innerHTML = "<img src='ok.png'>";
}
return true;}
function login() {
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
type: 'POST',
url: 'login.php',
data: {
username: username,
password: password
},
success: function (response) {
$('#login-response').html(response);
if (response === "login") {
$('#login-response').html("Please Wait Redirecting...");
setTimeout(function () {
window.location = "welcome.php";
}, 5000); } } });
}
</script>
</head>
<body>

<form class="contact-form" action="login.php" method="POST">


<fieldset>
<legend>AJAX Login Form</legend>

<div id="login-response" class="response_error"></div>

<div>
<span id="login-response"></span>

Sumit pandey 2003260


</div>

<div>
<label for="name">Username</label>
<input type="text" name="username" id="username" placeholder="username">
</div>

<div>
<label for="email">Password</label>
<input type="password" name="password" id="password" placeholder="Password">
</div>
<div>
<input type="submit" value="Login" onmousedown="login();">
</div>
</fieldset>
</form>
</body>
</html>
Login
<?php
$conn = new mysqli("localhost", "root", "","estore");
session_start();
if (isset($_POST['username'])) {
$username = $_POST['username'];
$password = $_POST['password'];
$query="select name password from signin where name = '$username' and password =
'$password' ";
$result=mysqli_query($conn, $query);
$row=mysqli_fetch_array($result);

if(mysqli_num_rows($result)==1)
{
$_SESSION['user'] = $username;
echo "Login Successful";
} else {
echo "Username and Password is incorrect";
}
}
?>

Output:

Login Form
Confirmation Message

Sumit pandey 2003260


PRACTICAL 14

AIM:A web Application for Implementation:

Html code:

inc/dbcon.php

<?php
$server ="localhost";
$user="root";
$password="";
$db="e_learning";
$con=mysqli_connect($server,$user,$password,$db);
if($con){
}
else{
}
?>
inc/style.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">

*{
margin:0; padding:0; font-family:'Muli' , sans-serif; box-sizing:border-box;
}

.divider-text{
position: relative;
text-align:center;
margin-top: 15px;
margin-bottom: 15px;
}
.divider-text span{
padding: 7px;
font-size: 12px;
position: relative;
z-index: 2;
}
.divider-text: after{
content:"";

Sumit pandey 2003260


position: absolute;
width: 100%;
border-bottom: 1px solid #ddd;
top: 55%;
left:0;
z-index: 1;
}
.btn-facebook{
background-color: #405D9D !important;
color:#fff!important;
}
.btn-gmail{
background-color: #ea4335 !important;
color:#fff !important;
}
</style>
<body>
</body>
</html>
inc/links.php
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
regis.php
<?php
session_start();
ob_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Registeration | E-Learning</title>
<?php include 'inc/style.php' ?>
<?php include 'inc/links.php' ?>
</head>
<body>

Sumit pandey 2003260


<?php
include 'inc/dbcon.php';
if(isset($_POST['submit'])){
$username = mysqli_real_escape_string($con,$_POST['username']);
$email =mysqli_real_escape_string($con,$_POST['email']);
$mobile = mysqli_real_escape_string($con,$_POST['mobile']);
$password =mysqli_real_escape_string($con,$_POST['password']);
$cpassword = mysqli_real_escape_string($con,$_POST['cpassword']);
$pass=password_hash($password,PASSWORD_BCRYPT);
$cpass=password_hash($cpassword,PASSWORD_BCRYPT);
$emailquery="select * from registeration where email='$email'";
$query=mysqli_query($con,$emailquery);
$emailcount=mysqli_num_rows($query);
if($emailcount>0)
{
echo "Email already exists";
}
else{
if($password === $cpassword)
{
$insertquery="insert into registeration (username,email,mobile,password,cpassword)
values('$username','$email','$mobile','$pass','$cpass')";
$iquery=mysqli_query($con,$insertquery);
if($iquery)
{
echo ("Inserted Successfully");
?>
<script>
location.replace("login.php");
</script>
<?php
}
else{
echo("Not Inserted Successfully");
}
}
else{
echo ("Password are not matching");
}
}
}
?>
<div class="card bg-light">
<article class="card-body mx-auto" style="max-width: 400px;">

Sumit pandey 2003260


<h4 class="card-title mt-3 text-center">Create Account</h4>
<p class="text-center">Get Started with your Free Account</p>
<p>
<a href="" class="btn btn-block btn-gmail"><i class="fa fa-google"></i> Login via
Gmail</a>
<a href="" class="btn btn-block btn-facebook"><i class="fa fa-facebook"></i> Login via
Facebook</a>
</p>
<p class="divider-text">
<span class="bg-light">OR</span>
</p>
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="POST">
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
<input name="username" class="form-control" placeholder="Full Name" type="text"
required>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-envelope"></i></span>
</div>
<input name="email" class="form-control" placeholder="Email Address" type="email"
required>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-phone"></i></span>
</div>
<input name="mobile" class="form-control" placeholder="Phone number" type="number"
required>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-lock"></i></span>
</div>
<input name="password" class="form-control" placeholder="Create Password"
type="password" required>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-lock"></i></span>
</div>

Sumit pandey 2003260


<input name="cpassword" class="form-control" placeholder="Repeat Password"
type="password" required>
</div>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-primary btn-block"> Create Account
</button>
</div>
<p class="text-center"> Have an account? <a href="login.php">Log In</a></p>
<br>
</form>
</article>
</div>
</div>
</div>
</div>
</body>
</html>
login.php
<?php
session_start();
?>

<!DOCTYPE html>
<html>
<head>
<title>Login | E-Learning</title>
<?php include 'inc/style.php' ?>
<?php include 'inc/links.php' ?>
</head>
<body>
<?php
include 'inc/dbcon.php';
if(isset($_POST['submit'])){
$email=$_POST['email'];
$password =$_POST['password'];

$email_search ="select * from registeration where email='$email' ";


$query= mysqli_query($con,$email_search);
$email_count=mysqli_num_rows($query);
if($email_count){
$email_pass=mysqli_fetch_assoc($query);
$pass=$email_pass['password'];
$_SESSION['username']=$email_pass['username'];
$pass_decode = password_verify($password,$pass);

Sumit pandey 2003260


if($pass_decode){
?>
<script>
location.replace("index.php");
</script>
<?php
}
else{
?>
<script>
alert("Password incorrect");
</script>
<?php
}
}
else{
?>
<script>
alert("Invalid Email");
</script>
<?php
} }
?>
<div class="card bg-light">
<article class="card-title mx-auto" style="max-width: 400px;">
<h4 class="card-title mt-3 text-center">Login through</h4>
<p class="text-center">Get started with your Free Account</p>
<p>
<a href="" class="btn btn-block btn-gmail"><i class="fa fa-google"></i> Login via
Gmail</a>
<a href="" class="btn btn-block btn-facebook"><i class="fa fa-facebook-f"></i> Login via
Facebook </a>
</p>
<p class="divider-text">
<span class="bg-light">OR</span>
</p>

<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="POST">


<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
<input name="email" class="form-control" placeholder="Enter Email" type="email">
</div>

Sumit pandey 2003260


<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-lock"></i></span>
</div>
<input name="password" class="form-control" placeholder="Create Password"
type="password" required>
</div>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-primary btn-block"> Log In </button>
</div>
<p class="text-center"> Forgot Password? Don't Worry <a href="recover_email.php">Click
Here</a></p>
<p class="text-center"> Don't have an account? <a href="regis.php">Sign up</a></p>
<br><br><br><br><br><br>
</form>
</article>
</div>
</body>
</html>
index.php

<?php
session_start();

if (!isset($_SESSION['username'])) {
header('location:login.php');
exit();
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>User Details</h1>
<h4><a href="index.php">Hello!
<?php
include('inc/dbcon.php');
$query=mysqli_query($con,"SELECT * FROM `registeration` WHERE
username='".$_SESSION['username']."'");
$row=mysqli_fetch_array($query);
echo 'Admin '.$row['username'].'';
?>

Sumit pandey 2003260


</a></h4>
</div>
</body>
</html>
output

Sumit pandey 2003260

You might also like