Scribd
Upload
33 views

WP Manual Uday

Uploaded by

gasoloh694
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views

WP Manual Uday

Uploaded by

gasoloh694
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 69

Web Programming (3160713) 210020107083

EXPERIMENT NO: 1 DATE: / /

EXERCISE:

1) Create a replica of the below given figure, using HTML Code:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
</head>
<body>
<table border="2">
<tr>
<td rowspan="2">Department</td>
<td colspan="2">1st Year</td>
<td colspan="2">2nd Year</td>
<td colspan="2">3rd Year</td>
<td colspan="2">4th Year</td>
</tr>
<tr>
<td>I</td>
<td>II</td>
<td>III</td>
<td>IV</td>
<td>V</td>
<td>VI</td>
<td>VII</td>
<td>VIII</td>
</tr>
<tr>
<td rowspan="2">Computer Engineering</td>
<td>CPU</td>
<td>WS</td>
<td>COA</td>
<td>OS</td>
<td>DAA</td>
<td>SE</td>
<td>CC</td>
<td>DS</td>
</tr>
<tr>
<td>EG</td>
<td>ECE</td>
<td>DLD</td>
<td>DBMS</td>

1
Web Programming (3160713) 210020107083
<td>CN</td>
<td>SP</td>
<td>AJT</td>
<td>PP</td>
</tr>
<tr>
<td rowspan="2">Information Technology</td>
<td>CS</td>
<td>EME</td>
<td>BIS</td>
<td>OOAD</td>
<td>COSM</td>
<td>WT</td>
<td>ERP</td>
<td>CAN</td>
</tr>
<tr>
<td>CAL</td>
<td>EEE</td>
<td>BE</td>
<td>M-I</td>
<td>SEMINAR</td>
<td>IS</td>
<td>MC</td>
<td>AI</td>
</tr>
</table>
</body> </html>
Output:

2) Create a replica of the below given figure, using HTML Code:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
</head>
<style> td{
text-align:center;

2
Web Programming (3160713) 210020107083
}img{
height: 103px;
width: 85px;
}
</style>
<body>
<table align="center" cellspacing="0" cellpadding="5px" border="2px">
<tr align="center" bgcolor="#76D7C4">

</tr>
<tr align="center">
<td colspan="4">EMPLOYEE DATA</td>
</tr>
<tr bgcolor="skyblue">
<th>EMPLOYEE NUMBER</th>
<th>EMPLOYEE NAME</th>
<th>EMPLOYEE SALARY</th>
<th>EMPLOYEE IMAGE</th>
</tr>
<tr bgcolor="#58D68D">
<td>4005405144</td>
<td>Kevork</td>
<td>35889</td>
<td><img src="images/1.jpg"> </td>
</tr>
<tr bgcolor="skyblue">
<td>9435537584</td>
<td>Avedis</td>
<td>23665</td>
<td><img src="images/2.jpg"></td>
</tr>
<tr bgcolor="#58D68D">
<td>4372859384</td>
<td>Taniel </td>
<td>45120</td>
<td><img src="images/3.jpg"></td>
</tr>
<tr bgcolor="skyblue">
<td>2662846968</td>
<td>Hagop</td>
<td>96929</td>
<td><img src="images/4.jpg"></td>
</tr>
</table>
</body>
</html> Output:

3
Web Programming (3160713) 210020107083

3) Create a replica of the below given figure, using HTML. Code:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style> tr
td{
text-align: center;
}
</style>
<body>
<table align="center" cellspacing="0" cellpadding="5px" border="2px">
<tr>
<td colspan="7">AHMEDABAD INSTITUTE OF TECHNOLOGY
</td>
<tr>
<td colspan="7">COMPUTER ENGNEERING</td>
</tr>
<tr>
<td colspan="7">6-CE-A</td>
</tr>
<tr>

4
Web Programming (3160713) 210020107083
<td colspan="7">CLASS ROOM D-103</td>
</tr>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<th></th>
<th>MONDAY</th>
<th>TUESDAY</th>
<th>WEDNESDAY</th>
<th>THURSDAY</th>
<th>FRIDAY</th>
<th>FRIDAY</th>
</tr>
<tr>
<td>09:00 TO 10:00</td>
<td>TOC(SP)</td>
<td rowspan="2"> A1:WP(AJ) LAB 3
<p> A2: IOT(DP) LAB 4 </p>
<p> A3: MPI(JJ) LAB 3 </p>
</td>
<td>MPI(JJ)</td>
<td rowspan="2">AI :IOT(DP) LAB 4
<p> A2:AJP(LP) LAB2 </p>
<p>A3:WP(AJ) LAB 3</p>
</td> <td>AJP(LP) D 103
<p>/ SS(AS) D 102</p>
</td>
<td rowspan="2">DE</td>
</tr>
<tr>
<td>10:00 TO 11:00</td>
<td>MPI(JJ)</td>
<td>AJP(LP) D 103
<p>/ SS(AS) D 102</p>
</td>
<td>TOC(SP)
</td>
</tr>
<tr>
<td>11:00 TO 11:40</td>
<td colspan="5" bgcolor="gray"></td>
<td></td>
</tr>
<tr>
<td>11:40 TO 12:35</td>
<td rowspan="2">AI :IOT(DP) LAB 4
<p> A2:AJP(LP) LAB2 </p>
<p>A3:WP(AJ) LAB 3</p>
5
Web Programming (3160713) 210020107083
</td>
<td>IOT(DP) D 103
<p>/ DV(SP) D 106</p>
</td>
<td>WP(AJ)</td>
<td>MPI(JJ)</td>
<td>MPI(JJ)</td>
<td></td>
</tr>
<tr>
<td>2:35 TO 01:30</td>
<td>TOC(SP)
</td>
<td>IOT(DP) D 103
<p>/ DV(SP) D 106</p>
</td>
<td>TOC(SP)</td>
<td>IOT(DP) D 103
<p>/ DV(SP) D 106</p>
</td>
<td></td>
</tr>

<tr>
<td>01:30 TO 11:45</td>
<td colspan="5" bgcolor="gray"></td>
<td></td>
</tr>
<tr>
<td>01:45 TO 02:35</td>
<td>AJP(LP) D 103
<p>/ SS(AS) D 102</p>
</td>
<td>WP(AJ)</td>
<td rowspan="2">AI :IOT(DP) LAB 4
<p> A2:AJP(LP) LAB2 </p>
<p>A3:WP(AJ) LAB 3</p>
</td>
<td>WP(AJ)</td>
<td rowspan="2">LIBRARY,SPORTS</td>
<td></td>
</tr>
<tr>
<td>02:35 TO 03:30</td>
<td>TOC(SP) D 102</td>
<td>IPDC(SB) D 102</td>
<td>IOT(DP) D 103
<p>/ DV(SP) D 106</p>
</td>
<td></td>
6
Web Programming (3160713) 210020107083
</tr>
</table>
</body> </html>
Output:

4) Create a replica of the below given figure, using HTML form.


Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.redtxt{
color: red; }
</style>
<fieldset style="background: #f6f8ff; border: 2px solid #4238ca;">
<legend><h2>Personal Information</h2></legend>
<form action="">
<label for="fname">First name:</label>
7
Web Programming (3160713) 210020107083
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br>
<label for="lname">Email address:<label class="redtxt"> (One email id only) </label> </label>
<input type="text" id="mail" name="email"><br>
<br>
<br>
<label for="lname">Enter your address:</label>
<textarea rows="2" cols="20"></textarea><br>
<label for="city">City:</label>
<input type="text" id="city" name="email"><br>
<label for="state">State/Province:</label>
<input type="text" id="state" name="email"><br>
<label for="city">Zip Code:</label>
<input type="text" id="Zip" name="email"><br>
<label for="city">Country:</label>
<select>
<option value = "India"> India
</option>
<option value = "China">China
</option>
<option value = "American">American
</option>
<option value = "Canada">Canada
</option>
</select><br>
<label for="TP">Telephone Number:</label>
<input type="text" id="TP" name="TP"><br>
<label for="MN">Mobile Number:</label>
<input type="text" id="MN" name="MN"><br>
<label for="User">User Profile:</label>
<select>
<option value = "Student"> Student
</option>
<option value = "Teacher"> Teacher
</option>
<option value = "Principal"> Principal
</option>
<option value = "Other">other
</option>
</select><br>
<label for="DB">Date Of Birth:</label>
<input type="date" id="DB" name="BD"> <br>
<label for="gender">Gender:</label>
<input type="radio" id="gender" name="MN"> Male
<input type="radio" name="MN"> Female<br>
<label for="User">Qualification:</label>
<select>
<option value = "Student"> Ungraduate
</option>
8
Web Programming (3160713) 210020107083
<option value = "Teacher"> Postgraduate
</option>
<option value = "Principal"> Student
</option>
<option value = "Other"> PHD
</option>
</select><br>
<br>
<input type="submit" value="Submit">
<input type="submit" value="Cancel">
</form>
</body>
</html> Output:

QUIZ:
1) What does HTML stand for?
Answer:
HTML stands for Hyper Text Markup Language.

2) What is the correct HTML element for inserting a line break?


9
Web Programming (3160713) 210020107083
Answer:
The <br> tag inserts a single line break.

EXPERIMENT NO: 2 DATE: / /


EXERCISE:

10
Web Programming (3160713) 210020107083
1) Design a web page for a news site using an HTML Table that includes positioning, margin and
padding properties of CSS.
Code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>News</title>
<link rel="stylesheet" href="style.css">
</head><body>
<nav id="navbar"><div id="logo"><img src="24.jpg" alt="onlinenews.com">
</div><ul>
<li class="item"><a href="#news">NEWS</a></li>
<li class="item"><a href="#home">Home</a></li>
<li class="item"><a href="#services-container">Catagory</a></li>
<li class="item"><a href="#client-section">Latest News</a></li>
<li class="item"><a href="#contact">About</a></li>
<li class="item"><a href="#contact">Support</a></li>
<li class="item"><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id="home">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit architecto, amet possimus unde
laudantium quisquam eius.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</section>
<footer>
<div class="center">
Copyright &copy; www.myOnlineMeal.com. All rights is reserved
</div>
</footer></body></html>
Style.css
/* css reset */
* { margin: 0px;
padding: 0px;} html {
scroll-behavior: smooth;}
/* css variables */
:root {
--navbar-height: 59px}
/* navigation bar */ #navbar
{
display: flex;
align-items: center;
11
Web Programming (3160713) 210020107083
position: sticky;
top: 0px;}
/*navigation bar : logo and image */
#logo { margin:
5px 5px;} #logo img
{ height: 59px;
margin: 3px 6px;
/*navigation bar : list styling */
#navbar ul { display: flex;
font-style: oblique}
#navbar::before { content:
""; background-color: black;
position: absolute; top: 0px;
left: 0px; height: 100%;
width: 100%; z-index: -1;
opacity: 0.89;} #navbar ul li
{ list-style: none; font-
size: 1.3rem;} #navbar ul li a
{ color: white; display:
block; padding: 3px 22px;
border-radius: 20px; text-
decoration: none;} #navbar
ul li a:hover { color: black;
background-color: white;}
/* home section */
#home {
display: flex; flex-
direction: column;
padding: 3px 200px;
height: 550px; justify-
content: center;
align-items: center;} #home::before { content: "";
background: url('23.jpg') no-repeat center center/cover;
/* background-size: cover; */
position: absolute; top: 0px;
left: 0px; height: 642px;
width: 100%; z-index: -1;
opacity: 0.89;} #home
p{
color: white; text-
align: left; font-size:
1.5rem; font-style:
oblique;} footer {
background: black;
color: white;
padding: 9px 20px;}
.center { text-align:
center;}

12
Web Programming (3160713) 210020107083
Output:

2) Design an HTML+ CSS page to understand the concept of pseudo classes. Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS transition-property property</title>
<style>
.box {
background-color: yellow;
width: 300px;
height: 200px;
margin: auto; font-
size: 40px; text-
align: center }
.box:hover {
background-color: orange;}
h1, h2 { color:
green; text-align:
center;} form {
width: 300px;
height: 200px;
margin: 0 auto;
text-align: center;
line-height: 2rem;}
label {
width: 30%;}
input {
background-color: default;

13
Web Programming (3160713) 210020107083
float: right;}
input:focus {
background-color: grey;} h1,h2 {
color: green;
text-align: center;}
</style>
</head>
<body>
<h2>:focus Pseudo-class</h2>
<form>
<label for="username">Username:</label>
<input type="text" name="username" placeholder="Enter your username" />
<br>
<label for="emailid">Email-Id:</label>
<input type="email" name="emailid" placeholder="Enter your email-id" /
<label for="Password">Password:</label>
<input type="password" name="Password" placeholder="Enter your password" />
</form>
<h2>:hover Pseudo-class</h2>
<div class="box">
My color changes if you hover over me!
</div>
<h2>:active Pseudo-class</h2>
<div class="box">
My color changes for a moment if you click me!
</div>
</body>
</html>

Output:

14
Web Programming (3160713) 210020107083

3) Design html page using css that changes color of the table cells on mouse hover. It should
also change the colors of the links (default link/ link on mouse hover and visited link) Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<style>
a:link {text-decoration: none;}
a:visited {color: red;}
a:hover {text-decoration: underline; color: purple;}
a:active {color: yellow;}
</style><body>
<table align="center">
<tr>
<th>Animal</th>
<th>Birds</th>
</tr>

15
Web Programming (3160713) 210020107083
<tr>
<td>
<a href="https://en.wikipedia.org/wiki/Tiger" target="_blank">Tiger</a>
</td> <td>
<a href="https://en.wikipedia.org/wiki/Peafowl" target="_blank">
Peacock</a>
</td>
</tr>
<tr>
<td>
<a href="https://en.wikipedia.org/wiki/Lion" target="_blank">Lion</a>
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Columbidae" target="_blank">Dove</a>
</td>
</tr>
<tr>
<td>Dog</td>
<td>Crow</td>
</tr>
<tr>
<td>Leapord</td>
<td>Spearrow</td>
</tr>
<tr>
<td>Bear</td>
<td>Duck</td>
</tr>
</table>
</body>
</html>

Output:

16
Web Programming (3160713) 210020107083

QUIZ:
1) What does CSS stand for?
Answer: CSS stands for Cascading Style Sheet.
2) Which HTML tag is used to define an internal style sheet?
Answer: An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the
<head> section of an HTML page, within a <style> element.

3) Which CSS property is used to change the text color of an element?


Answer: The color property is used to set the color of the text. The color is specified by: a color name - like
"red" a HEX value - like "#ff0000"

4) What is the default value of the position property?


Answer: By default, the position property for all HTML elements in CSS is set to static

EXPERIMENT NO: 3 DATE: / /


EXERCISE:
1) Create a simple table with Bootstrap.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
17
Web Programming (3160713) 210020107083
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Dark Table</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
<table class="table table-dark">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Carter</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:

2) Create a list with Bootstrap.


Code:
18
Web Programming (3160713) 210020107083
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Numbered List Group</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
<ol class="list-group list-group-numbered w-50">
<li class="list-group-item">APPLE</li>
<li class="list-group-item">MANGO</li>
<li class="list-group-item">BANANA</li>
<li class="list-group-item">GUAVAVA</li>
</ol>
</div>
</body> </html>
Output:

3) Create buttons with Bootstrap.


Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Button Styles</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-dark">Dark</button>
19
Web Programming (3160713) 210020107083
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</body>
</html>

Output:

QUIZ:

1) If you want to have 3 equal columns in Bootstrap, which class would you use?
Answer:
Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So, if you
want three equal-width columns across, you can use col-4.

2) What Bootstrap version should you use if you need to support IE9? Answer: If you require
IE8-9 support, use Bootstrap 3.

EXPERIMENT NO: 4 DATE: / /


EXERCISE:
1) Perform complete form validation name, email, phone number, checkbox etc using JavaScript.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Form Validation using a sample registration form</title>
<meta name="keywords" content="example, JavaScript Form Validation, Sample registration form" />
<meta name="description" content="This document is an example of JavaScript Form Validation using a
sample registration form. " />
20
Web Programming (3160713) 210020107083
<!-- <link rel='stylesheet' href='js-form-validation.css' type='text/css' />
<script src="sample-registration-form-validation.js"></script> -->
<style>
h1 {
margin-left: 70px;
} form li {
list-style: none;
margin-bottom: 5px;
}
form ul li label {
float: left; clear: left;
width: 100px; text-
align: right; margin-
right: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
} form ul
li input,
select,
span {
float: left;
margin-bottom: 10px;
}
form textarea {
float: left;
width: 350px;
height: 150px;
}
[type="submit"] {
clear: left;
margin: 20px 0 0 230px;
font-size: 18px
}
p{
margin-
left:
70px;
font-weight: bold;
}
</style>
<script>
function formValidation() { var uid =
document.registration.userid; var passid =
document.registration.passid; var uname =
document.registration.username; var uadd =
document.registration.address; var ucountry =
document.registration.country;
var uzip = document.registration.zip;
var uemail = document.registration.email; var
umsex = document.registration.msex; var ufsex

21
Web Programming (3160713) 210020107083
= document.registration.fsex; if
(userid_validation(uid, 5, 12)) { if
(passid_validation(passid, 7, 12)) { if
(allLetter(uname)) { if
(alphanumeric(uadd)) { if
(countryselect(ucountry)) { if
(allnumeric(uzip)) { if
(ValidateEmail(uemail)) { if
(validsex(umsex, ufsex)) {}
}}}}}}}
return false; }
function userid_validation(uid, mx, my) {
var uid_len = uid.value.length;
if (uid_len == 0 || uid_len >= my || uid_len < mx) {
alert("User Id should not be empty / length be between " + mx + " to " + my);
uid.focus(); return false; }
return true; }
function passid_validation(passid, mx, my) {
var passid_len = passid.value.length;
if (passid_len == 0 || passid_len >= my || passid_len < mx) {
alert("Password should not be empty / length be between " + mx + " to " + my);
passid.focus(); return false;}
return true;} function
allLetter(uname) { var letters =
/^[A-Za-z]+$/; if
(uname.value.match(letters)) {
return true;} else {
alert('Username must have alphabet characters only');
uname.focus();
return false;}} function
alphanumeric(uadd) { var letters
= /^[0-9a-zA-Z]+$/; if
(uadd.value.match(letters)) {
return true;} else { alert('User
address must have alphanumeric
characters only'); uadd.focus();
return false;}} function
countryselect(ucountry) { if
(ucountry.value == "Default") {
alert('Select your country from the list');
ucountry.focus(); return false;} else {
return true;}} function allnumeric(uzip) {
var numbers = /^[0-9]+$/; if
(uzip.value.match(numbers)) {
return true;} else {
alert('ZIP code must have numeric characters only');
uzip.focus();
return false;}} function
ValidateEmail(uemail) {

22
Web Programming (3160713) 210020107083
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (uemail.value.match(mailformat)) {
return true;} else {
alert("You have entered an invalid email address!");
uemail.focus();
return false;}} function
validsex(umsex, ufsex) {
x = 0; if
(umsex.checked) {
x++;} if
(ufsex.checked) {
x++;}
if (x == 0) {
alert('Select Male/Female');
umsex.focus(); return false;}
else {
alert('Form Succesfully Submitted');
window.location.reload()
return true;}}
</script>
</head>
<body onload="document.registration.userid.focus();">
<h1>Registration Form</h1>
Use tab keys to move from one input field to the next.
<form name='registration' onsubmit="return formValidation();">
<ul>
<li><label for="userid">User id:</label></li>
<li><input type="text" name="userid" size="12" /></li>
<li><label for="passid">Password:</label></li>
<li><input type="password" name="passid" size="12" /></li>
<li><label for="username">Name:</label></li>
<li><input type="text" name="username" size="50" /></li>
<li><label for="address">Address:</label></li>
<li><input type="text" name="address" size="50" /></li>
<li><label for="country">Country:</label></li>
<li><select name="country">
<option selected="" value="Default">(Please select a country)</option>
<option value="AF">Australia</option>
<option value="AL">Canada</option>
<option value="DZ">India</option>
<option value="AS">Russia</option>
<option value="AD">USA</option>
</select></li>
<li><label for="zip">ZIP Code:</label></li>
<li><input type="text" name="zip" /></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="50" /></li>
<li><label id="gender">Sex:</label></li>
<li><input type="radio" name="msex" value="Male" /><span>Male</span></li>
<li><input type="radio" name="msex" value="Female" /><span>Female</span></li>
23
Web Programming (3160713) 210020107083
<li><label>Language:</label></li>
<li><input type="checkbox" name="en" value="en" checked /><span>English</span></li>
<li><input type="checkbox" name="nonen" value="noen" /><span>Non English</span></li>
<li><label for="desc">About:</label></li>
<li><textarea name="desc" id="desc"></textarea></li>
<li><input type="submit" name="submit" value="Submit" /></li>
</ul>
</form>
</body>
</html>

Output:

2) Design a login form using HTML & JavaScript with following validations on username and
password fields.
a. Password length must be 6 to 12 characters
b. Username should not start with _, @ or number.
c. Phone number must be 10 digit start with 6/7/8/9
d. All fields should not be blank.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome To Login Form</title>
<script> function
login(){
var uname = document.getElementById("username").value;
var pwd = document.getElementById("pwd1").value;
var numbers = "[6-9]{1}[0-9]{9}";
var filter = /[a-zA-Z]/;
24
Web Programming (3160713) 210020107083
if(uname =='') {
alert("please enter user name.");
}
else if(pwd=='') {
alert("Enter the password");
}
else if(!filter.test(uname)) {
alert("Enter valid Username.");
}
else if(pwd.length < 6 || pwd.length > 12) {
alert("Password min length is 6 and max length is 12.");
}
else if(!num.value.match(numbers) || num.value.length < 10 || num.value.length >10
){ alert("Enter Valid Phone Number"); } else{
alert('Login Successful');
}
}
//Reset Inputfield code. function clearFunc(){
document.getElementById("username").value="";
document.getElementById("pwd1").value="";
document.getElementById("num").value="";
}
</script>
</head>
<style>
body{
margin:0px;
background-color:#393E46;
color:#f7f7f7;
font-family:Arial, Helvetica, sans-serif;
}
#main{ width:600px;
height:290px; margin-left:auto;
margin-right:auto; border-
radius:5px; padding-left:10px;
margin-top:100px; border-top:3px
double #f1f1f1; border-
bottom:3px double #f1f1f1;
margin-top:250px;
}
#main table{
font-family:"Comic Sans MS", cursive;
}
#main .tb{ height:28px;
width:230px; border:1px
solid #393E46;
color:#2C3333; font-
weight:bold; border-left:5px
solid #f7f7f7; opacity:0.9;
}

25
Web Programming (3160713) 210020107083
#main .btn{ width:80px;
height:32px; outline:none;
font-weight:bold; border:0px
solid #393E46; text-shadow: 0px
0.5px 0.5px #fff;
border-radius: 2px;
font-weight: 600; color:
#393E46; letter-
spacing: 1px;
font-size:14px; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s;
}
#main .btn:hover{ background-
color:#393E46;
outline:none; border-
radius:2px;
color:#f1f1f1; border:1px
solid #f1f1f1;
}
</style>
<body>
<div id="main">
<div class="h-tag">
<h2>Welcome To My Account Login</h2>
</div>
<div class="login">
<table cellspacing="2" align="center" cellpadding="8" border="0">
<tr>
<td>Enter User Name :</td>
<td><input type="text" placeholder="Enter user name here" id="username" class="tb" /></td>
</tr>
<tr>
<td>Enter Password :</td>
<td><input type="password" placeholder="Enter Password here" id="pwd1" class="tb" /></td>
</tr>
<tr>
<td>Mobile Number :</td>
<td><input type="text" placeholder="Enter Mobile Number here" id="num" class="tb" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Reset" onclick="clearFunc()" class="btn" />
<input type="submit" value="Login" class="btn" onClick="login()" /></td>
</tr>
</table>
</div>
</div>
</body>
</html>

26
Web Programming (3160713) 210020107083
Output:

3) Write a javascript program that prints first n Fibonacci numbers. Here n will be inserted by the
user.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJO
Z" crossorigin="anonymous" />
<title>Document</title>
<script>
function result() {
let n1 = 0, n2 =
1, nextTerm;
var number = document.getElementById("input").value;
function fibonacci_numbers(n) { if (n == 0) {
return 0;} else if (n == 1) {
return 1;} else {
return fibonacci_numbers(n - 2) + fibonacci_numbers(n - 1);}}
let n = number;
document.write(" <h2>Fibonacci Series is <h2>" + "<br>");
for (let i = 0; i < n; i++) {

27
Web Programming (3160713) 210020107083
document.write("<h2>" + fibonacci_numbers(i) + " " + "<br>" + "<h2>");
var result = new Array();
result[i] = fibonacci_numbers(i);}}
</script>
</head>
<body>
<style>
.display { width:
300px; height:
100px;} body {
background-color: lightskyblue;}
#form {
padding-top: 150px !important;
}
.container { text-
align: center;
margin-top: 10%;
margin-left: 35%;
height: 500px;
width: 500px;
background-color:
blanchedalmond;
border-radius: 20px;
}
</style>
<div class="container">
<form id="form">
<label><h2>Enter the number :</h2></label>
<br />
<input type="text" id="input" />
<br /><br />
<input type="button" class="btn btn-secondary" value="Result" onclick="result()"/>
</form>
</div>
</body>
</html> Output:

28
Web Programming (3160713) 210020107083

4) Write javascript code that displays the text”AHMEDABAD INSTITUTE OF TECHNOLOGY ''
with increasing font size in intervals of 50 ms in blue color.when font size reaches to 50px it should
stop.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Practical 4</title>
<style>
p{
position: absolute;
top: 40%; left:
50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
var var1 = setInterval(inTimer, 500);
var fs = 5;
var ids = document.getElementById("demo");
function inTimer() {
ids.innerHTML = "AHMEDABAD INSTITUTE OF TECHNOLOGY";

29
Web Programming (3160713) 210020107083
ids.setAttribute("style", "font-size: " + fs + "px; color: blue");
fs += 5; if (fs >= 50) { clearInterval(var1);
var2 = setInterval(deTimer, 1000);} }
</script>
</body>
</html>

Output:

5) Write a javascript program for lighting bulbs using different colors as specified in the below given
image.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJ
OZ"crossorigin="anonymous" />
<title>Document</title>
<script>
function bulb_green() {
document.getElementById("bulb").src = "img/green.png";
document.getElementById("body").style.backgroundColor = "#90C565";
}
function bulb_red() {
document.getElementById("bulb").src = "img/red.png";
document.getElementById("body").style.backgroundColor = "#FEA38F";
}
function bulb_blue() {
document.getElementById("bulb").src = "img/blue.png";
document.getElementById("body").style.backgroundColor = "#5A94FD";
}
function bulb_yellow() {
document.getElementById("bulb").src = "img/yellow.png";
document.getElementById("body").style.backgroundColor = "#FAE410";
}
function bulb_off() {
document.getElementById("bulb").src = "img/off.png";
document.getElementById("body").style.backgroundColor = "#fff";
}
30
Web Programming (3160713) 210020107083
</script>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Georgia, serif;
} header { height:
100px; width: 100%;
color: #3f3f3f;
display: flex; justify-
content: center; align-
items: center;
font-size: 20px;
} section { width:
100%; height: 450px;
display: flex; justify-
content: center; align-
items: center;
flex-direction: row;
}
.btn_container {
margin-left: 27%;
}
.bulb_btn {
font-family: Georgia, serif;
width: 150px; height:
50px; border: none;
outline: black; cursor:
pointer; font-size: 25px;
border-radius: 50px;
}
</style>
<body id="body">
<header>
<h1>lighting bulbs using different colors</h1>
</header>
<section>
<img src="img/off.png" id="bulb" width="200" />
</section>
<div class="btn_container">
<button id="green" class="bulb_btn btn btn-success" onclick="bulb_green()">
Green
</button>
<button id="red" class="bulb_btn btn btn-danger" onclick="bulb_red()">
Red
</button>

31
Web Programming (3160713) 210020107083
<button id="blue" class="bulb_btn btn btn-primary" onclick="bulb_blue()">
Blue
</button>
<button id="yellow" class="bulb_btn btn btn-warning" onclick="bulb_yellow()">
Yellow
</button>
<button id="off" class="bulb_btn" onclick="bulb_off()">OFF</button>
</div>
</body>
</html> Output:

QUIZ:
1) Inside which HTML element do we put the JavaScript?
Answer : In HTML, JavaScript code is inserted between <script> and </script> tags.
2) How do you write "Hello World" in an alert box?
Answer:
<script>
alert("Hello");
</script>
3) How do you create a function in JavaScript?
Answer: A JavaScript function is defined with the function keyword, followed by a name, followed by
parentheses ().
4) How do you round the number 7.25, to the nearest integer?
Answer: The Math.round() method rounds a number to the nearest integer.
5) Which operator is used to assign a value to a variable?
Answer: The assignment ( = ) operator is used to assign a value to a variable.
6) Is JavaScript case-sensitive?
Answer: JavaScript is a case-sensitive language.
32
Web Programming (3160713) 210020107083

EXPERIMENT NO: 5 DATE: / /


EXERCISE:
1) Write a PHP program to print alphabet triangles.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php
$alpha=range('A','Z');
$k=0;
for($i=0;$i<=4;$i++)
{ for($j=0;$j<=$i;$j++)
echo $alpha[$j];
for($k=$i-1;$k>=0;$k--)
echo $alpha[$k];
echo"<br>";
}?>
</body> </html>
33
Web Programming (3160713) 210020107083
Output:

2) Write a PHP program to print the factorial of a number.


Code:
<html>
<head>
<title> Factorial Program</title>
</head>
<body>
<form method="POST">
<label>Enter a number</label>
<input type="text" name="number" />
<input type="submit" name="submit" value="Submit" />
</form>
<?php
error_reporting(0);
if($_POST['submit'] == "Submit") {
$input = $_POST['number'];
$fact=1; for($i=$input;
$i>=1;$i--) { $fact = $fact *
$i;}
echo '<br>'. 'The factorial of the number '.$input.' is ' . $fact;}
?>
</body> </html>
Output:

3) Write a PHP program to check Armstrong numbers.


Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
34
Web Programming (3160713) 210020107083
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form method="post">
Enter a Number: <input type="text" name="num" /><br>
<button type="submit">Check</button>
</form>
<?php
error_reporting(0);
$n=$_POST['num'];
$sum=0; $i=$n;
while($i!=0)
{
$x=$i%10;
$sum=$sum+$x*$x*$x;
$i=$i/10; }if($n==$sum)
{
echo "$n is an Armstrong Number."; } else {
echo "$n is not an Armstrong Number."; } ?>
</body>
</html>

Output:

4) Write a PHP program to check palindrome


numbers.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form method="post">
Enter a Number: <input type="text" name="num"/><br>
<button type="submit">Check</button>
</form> <?php
error_reporting(0);
$num = $_POST['num'];

35
Web Programming (3160713) 210020107083
$p=$num;
$revnum = 0; while
($num != 0)
{$revnum = $revnum * 10 + $num % 10;
//below cast is essential to round remainder towards zero
$num = (int)($num / 10);
}if($revnum==$p){ echo $p," is
Palindrome number";} else{
echo $p." is not Palindrome number";}
?>
</body> </html>
Output:

5) Write a PHP script for login authentication.


Code:
<?php
ob_start();
session_start();
?> <?
// error_reporting(E_ALL);
// ini_set("display_errors", 1);
?>
<html lang = "en">
<head>
<title>Tutorialspoint.com</title>
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJ
OZ" crossorigin="anonymous">
<style> body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #AFD3E2;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
color: black;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
36
Web Programming (3160713) 210020107083
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; padding:
10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: -1px; border-bottom-
right-radius: 0; border-bottom-left-radius: 0;
border-color:#05BFDB;
}
.form-signin input[type="password"] {
margin-bottom: 10px; border-top-left-
radius: 0; border-top-right-radius: 0;
border-color:#05BFDB;
} h2{
text-align: center;
color: black; }
</style>
</head>
<body>
<h2>Enter Username and Password</h2>
<div class = "container form-signin">
<?php
$msg = '';
$msg1="You have entered valid use name and password";
if (isset($_POST['login']) && !empty($_POST['username'])
&& !empty($_POST['password'])) {
if ($_POST['username'] == 'aitindia' &&
$_POST['password'] == '1234') {
$_SESSION['valid'] = true;
$_SESSION['timeout'] = time();
$_SESSION['username'] = 'tutorialspoint';
echo $msg1;
}else {
$msg = 'Wrong username or password';}} ?>
</div>
<div class = "container">
<form class = "form-signin" role = "form"
action = "<?php echo htmlspecialchars($_SERVER['PHP_SELF']);
?>" method = "post">
<h4 class = "form-signin-heading"><?php echo $msg; ?></h4>
37
Web Programming (3160713) 210020107083
<input type = "text" class = "form-control"
name = "username" placeholder = "username = aitindia"
required autofocus></br>
<input type = "password" class = "form-control"
name = "password" placeholder = "password = 1234" required>
<br>
<button class = "btn btn-lg btn-primary btn-block" type = "submit"
name = "login">Login</button>
</form>
</div>
</body>
</html>
Output:

7) Write a php code to calculate the number of days between to two input dates if the difference is
even number then render background color as blue or red.
Code:
<?php
error_reporting(1);
$day=0;
$yr=0; $mon=0;
if(isset($_POST['b1']))
{
$d1=$_POST['t1'];
$d2=$_POST['t2'];
$arr=explode("/",$d1);
$brr=explode("/",$d2); if($arr[0]<$brr[0])
{
$arr[0]+=30;
$arr[1]-=1;
}
$day=$arr[0]-$brr[0]; if($arr[1]<$brr[1])
{
$m1+=12;
$arr[2]-=1;
}
38
Web Programming (3160713) 210020107083
$mon=$arr[1]-$brr[1];
$month=$mon*30;
$yr=$arr[2]-$brr[2];
$year1=$yr*365-$month;
$year=$year1-$day;
}
?>
<form method="post">
<table border="2">
<tr>
<td align="center" colspan="2">
<font color="orange">
<h2><b> Difference between two dates </b></h2>
</font>
</td>
</td>
<tr>
<td align="center"><b>Enter Date 1:</b></td>
<td align="center"><input type="text" name="t1" autofocus></td>
</tr>
<tr>
<td align="center"><b>Enter Date 2:</b></td>
<td align="center"><input type="text" name="t2"></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" name="b1" value="calculate"></td>
</tr>
<tr>
<td align="center"><b>Difference is:</b></td>
<td align="center">
<?php
error_reporting(1);
echo '<font color="blue" size="5">';
// echo $year.' Days '.$mon.' months '.$day.' days ';
echo abs($year).' Days '; echo '</font>'; ?>
</td>
</tr>
</table>
</form> Output:

39
Web Programming (3160713) 210020107083

QUIZ:
1) All variables in PHP start with which symbol?
Answer: A variable starts with the $ sign, followed by the name of the variable.
2) PHP files have a default file extension of _______ Answer: .php

40
Web Programming (3160713) 210020107083

EXPERIMENT NO: 6 DATE: / /


EXERCISE :

1) Login Page(Without Database take username “admin” and Password “admin123”) Code:
<?php
ob_start();
session_start();
?> <?
// error_reporting(E_ALL);
// ini_set("display_errors", 1);
?>
<html lang = "en">
<head>
<title>Tutorialspoint.com</title>
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous">
<style> body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #AFD3E2;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
color: black;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}

41
Web Programming (3160713) 210020107083
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; padding:
10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] { margin-
bottom: -1px; border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-color:#05BFDB;
}
.form-signin input[type="password"] {
margin-bottom: 10px; border-top-left-
radius: 0; border-top-right-radius: 0;
border-color:#05BFDB;
} h2{
text-align: center;
color: black;
}
</style>
</head>
<body>
<h2>Enter Username and Password</h2>
<div class = "container form-signin">
<?php
$msg = '';
$msg1="You have entered valid use name and password";
if (isset($_POST['login']) && !empty($_POST['username'])
&& !empty($_POST['password'])) {
if ($_POST['username'] == 'admin' &&
$_POST['password'] == 'admin123') {
$_SESSION['valid'] = true;
$_SESSION['timeout'] = time();
$_SESSION['username'] = 'tutorialspoint';
echo $msg1;
}else {
$msg = 'Wrong username or password';}} ?>
</div> <!-- /container -->
<div class = "container">
<form class = "form-signin" role = "form"
action = "<?php echo htmlspecialchars($_SERVER['PHP_SELF']);
?>" method = "post">
<h4 class = "form-signin-heading"><?php echo $msg; ?></h4>

42
Web Programming (3160713) 210020107083
<input type = "text" class = "form-control"
name = "username" placeholder = "username = aitindia"
required autofocus></br>
<input type = "password" class = "form-control"
name = "password" placeholder = "password = 1234" required>
<br>
<button class = "btn btn-lg btn-primary btn-block" type = "submit" name =
"login">Login</button>
</form>
</div>
</body>
</html> Output:

2) Create a web page which shows use of include & require (Include txt File using include and require
Statement) Code:
includeScript.php
<?PHP
include "myOtherScript.php"; include
"linksPage.txt";
print "This was printed from the includeScript.php";
print "<BR>"; doPrint(); ?>
linksPage.txt
<table width="182" border="1" cellpadding="0" cellspacing="0"><tr>
<td width="182" height="30" valign="middle" bgcolor="#FFFFCC"><a href="links.php">About
Us</a></td></tr><tr>
<td valign="middle" height="30" bgcolor="#FFFFCC"><a href="links.php">Latest News</a></td>
</tr><tr>
<td height="30" valign="middle" bgcolor="#FFFFCC"><a href="links.php">Forum</a></td>
</tr><tr>
<td height="30" valign="middle" bgcolor="#FFFFCC"><a href="links.php">Login</a></td> </tr>
</table>

myOtherScript.php
<?PHP
function doPrint() {
print "This was printed from the myOtherScript.php"; }

43
Web Programming (3160713) 210020107083
?>

Output:

3) Create a Web Page which shows use of all file handling Functions
(readfile(),fopen(),fread(),fclose(),fgets(),feof(),fgetc(),fwrite()) Code:
<!-- fgets() -->
<?php
echo "This is use of fgets() function ";?>
<br>
<br>
<html>
<head>
<title>PHP fgets() Example</title>
</head>
<body>
<FORM method="POST">
Enter String1 : <input type="text" name="str"> <br/>
Enter String2 : <input type="text" name="str1"> <br/> <br/>
<input type="submit" name="Submit1" value="Create File">
<input type="submit" name="Submit2" value="Read File - gets()">
</FORM>
<?php
if(isset($_POST['Submit1']))
{
//open file abc.txt in append mode
$myfile = fopen("abc.txt", "a");

$text = $_POST["str"]. PHP_EOL . $_POST["str1"];


fwrite($myfile, $text);

fclose($myfile); echo
"file created !!";
}
if(isset($_POST['Submit2']))
{
$file=fopen("abc.txt","r");
$readfile=fgets($file);
echo $readfile;
fclose($file);
}
44
Web Programming (3160713) 210020107083
echo "<br>";
$file = fopen("abc.txt","r"); while(!feof($file))
{
echo fgets($file)."<br>";
} fclose($file);
?>
<br><br><br>
<!-- fgetc() -->
<?php echo"This is use of fgetc() function" ?>
<html>
<head>
<title>PHP fgetc() Example</title>
</head>
<body>
<FORM method="POST">
Enter String : <input type="text" name="str"> <br/> <br/>
<input type="submit" name="Submit1" value="Create File">
<input type="submit" name="Submit2" value="Read File - getc()">
</FORM>
<?php
if(isset($_POST['Submit1']))
{
//open file abc.txt in append mode
$myfile = fopen("abc.txt", "a");
$text = $_POST["str"];
fwrite($myfile, $text);
fclose($myfile); echo "file
created !!";
}
if(isset($_POST['Submit2']))
{
$file=fopen("abc.txt","r");
$readfile=fgetc($file); echo
$readfile; fclose($file);
}
?>

Output: 4) Create a Webpage


through which the admin can upload a photo of Employee and pdf
of Aadhar Card with following constraints.
45
Web Programming (3160713) 210020107083
a. Photo in jpeg or png format only and having Size <200 kb.
b. Aadhar Card in pdf only Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<span style="margin:10;">
<div style="padding: 50px; border: 1px solid #999">
<h2>Upload a photo of Employee :</h2>
<form method="post" enctype="multipart/form-data">
<p> <input type="file" name="file">
<br /> <br>
<input type="submit" name="submit"/>
</p>
</form>
</div>
<br>
<div style="padding: 50px; border: 1px solid #999"
<h2>Upload Adhar Card PDF File :</h2>
<form enctype="multipart/form-data" action="<?php print $_SERVER['PHP_SELF'] ?>"
method="post">
<p> <input type="file" name="pdfFile" /><br />
<br />
<input type="submit" value="upload!" />
</p>
</form>
</div>
</span>
<!-- Upload image -->
<?php
// uploading files on submit
if (isset($_POST['submit'])) {
// uploading files
$msg = upload_file();
session_start();
$_SESSION['msg'] = $msg;
// header('location:upload-form.php');
}
function upload_file()
{
46
Web Programming (3160713) 210020107083
$uploadTo = "uploads/";
$allowFileType = array('jpg', 'png', 'jpeg',);
$fileName = $_FILES['file']['name'];
$tempPath = $_FILES["file"]["tmp_name"];
$basename = basename($fileName);
$originalPath = $uploadTo . $basename;
$fileType = pathinfo($originalPath, PATHINFO_EXTENSION);
if (!empty($fileName)) {
$size = $_FILES['file']['size'] / 1024;
if ($size < 200) {
if (in_array($fileType, $allowFileType)) {
// Upload file to server
if (move_uploaded_file($tempPath, $originalPath)) {
echo "Image Uploaded successfully ";
return $fileName . " was uploaded successfully";
// write here sql query to store image name in database
} else {
echo "File Not uploaded ! try again";
$error = 'File Not uploaded ! try again';
}}}else {
echo "Image File is too large to be uploaded! only file < 200 kb is allowed";
return $fileType . " file type not allowed";
}} else {
return "Please Select a file";
} } ?>
<!-- Upload image -->
<!-- upload pdfFile -->
<?php
if (isset($_FILES['pdfFile'])) {
if ($_FILES['pdfFile']['type'] == "application/pdf") {
$source_file = $_FILES['pdfFile']['tmp_name'];
$dest_file = "uploads/" . $_FILES['pdfFile']['name']; if
(file_exists($dest_file)) {
print "The file name already exists!!";
} else {
move_uploaded_file($source_file, $dest_file) or
die("Error!!"); if ($_FILES['pdfFile']['error'] == 0) {
print "Pdf file uploaded successfully!"; print "<b><u>Details :
</u></b><br/>"; print "File Name : " . $_FILES['pdfFile']['name'] .
"<br.>" . "<br/>"; print "File Size : " . $_FILES['pdfFile']['size'] . "
bytes" . "<br/>"; print "File location : upload/" .
$_FILES['pdfFile']['name'] . "<br/>";
}}} else {
if ($_FILES['pdfFile']['type'] != "application/pdf") {
print "Error occured while uploading file : " . $_FILES['pdfFile']['name'] . "<br/>";
print "Invalid file extension, should be pdf !!" . "<br/>"; print "Error Code : " .
$_FILES['pdfFile']['error'] . "<br/>"; }}}
?>
<!-- upload pdfFile -->
</body>
47
Web Programming (3160713) 210020107083
</html> Output:

EXPERIMENT NO: 7 DATE: / /


EXERCISE:
1) Use try...catch to show a message when an exception is thrown.
Code:
<!DOCTYPE html>
<html lang="en">
48
Web Programming (3160713) 210020107083
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body> <?php class DivideByZeroException extends
Exception {}; class DivideByNegativeException extends
Exception {}; function process($denominator)
{try{
if ($denominator == 0)
{throw new DivideByZeroException();}
else if ($denominator < 0)
{throw new DivideByNegativeException();}
else
{
echo 25 / $denominator;
}
}
catch (DivideByZeroException $ex)
{
echo "DIVIDE BY ZERO EXCEPTION!";
}
catch (DivideByNegativeException $ex)
{
echo "DIVIDE BY NEGATIVE NUMBER EXCEPTION!";
}
catch (Exception $x)
{
echo "UNKNOWN EXCEPTION!";
}
} process(0);
?>
</body>
</html>

Output:

49
Web Programming (3160713) 210020107083

EXPERIMENT NO: 8 DATE: / /


EXERCISE:
1) Perform keep me logged checkbox checked using cookie.
50
Web Programming (3160713) 210020107083
Code:
page1.php
<?php ?>
<form action="page2.php" method="post" style="border: 2px dotted blue; text-align:center; width:
400px;">
<p>
Username: <input name="username" type="text" value="<?php if (isset($_COOKIE["username"])) {
echo $_COOKIE["username"]; } ?>"></p>
<p>Password: <input name="password" type="password" value="<?php if (isset($_COOKIE["password"]))
{echo $_COOKIE["password"];} ?>">
</p><p><input type="checkbox" name="remember" /> Remember me
</p><p><input type="submit" value="Login"></span></p>
</form>
page2.php <?php
if (!empty($_POST["remember"])) {
setcookie("username", $_POST["username"], time() + 3600);
setcookie("password", $_POST["password"], time() + 3600);
echo "Cookies Set Successfuly";
} else {
setcookie("username", "");
setcookie("password", ""); echo "Cookies Not
Set";
}?>
<p><a href="page1.php"> Go to Login Page </a> </p>

Output:

2) Write a php script for setting and retrieving your name and email address using cookies.
Code:
example.php <?php
setcookie("name","Ait", time() + 3600, "/", "", 0);
setcookie("id", "002", time() + 3600, "/", "", 0); ?>
<HTML>
<head>
<title>Create cookies in PHP</title>
</head>
51
Web Programming (3160713) 210020107083
<body>
<?php echo "The cookies created for name and id.";?>
</body> </HTML>
cexample.php
<HTML>
<head>
<title>Retrieve cookies in PHP</title>
</head>
<body> <?php if(isset($_COOKIE["name"]) &&
isset($_COOKIE["id"])){ echo " The name = "
.$_COOKIE["name"]. "<br/>"; echo "The id = ".
$_COOKIE["id"];
}
else{echo "Sorry !! cookies is not set.";}?>
</body> </HTML>
dexample.php <?php
setcookie("name","", time() - 3600, "/", "", 0);
setcookie("id", "", time() - 3600, "/", "", 0);?>
<HTML><head>
<title>Delete cookies in PHP</title>
</head><body>
<?php echo "The cookies Deleted for name and id.";?>
</body>
</HTML> Output:

3) Perform login to logout session handling. Non logged in users can not access the page.
Code:
Index.php
<?php
session_start();
include("functions.php");
$message=""; if(count($_POST)>0)
{
if( $_POST["user_name"] == "admin" and $_POST["password"] == "admin") {
$_SESSION["user_id"] = 1001;
$_SESSION["user_name"] = $_POST["user_name"];
$_SESSION['loggedin_time'] = time();
} else {

52
Web Programming (3160713) 210020107083
$message = "Invalid Username or Password!";}} if(isset($_SESSION["user_id"]))
{
if(!isLoginSessionExpired()) {
header("Location:user_dashboard.php");} else {
header("Location:logout.php?session_expired=1");}}
if(isset($_GET["session_expired"])) {
$message = "Login Session is Expired. Please Login Again";}?>
<html><head>
<title>User Login Session Timeout Logout in PHP</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head><body>
<form name="frmUser" method="post" action="">
<?php if($message!="") { ?>
<div class="message"><?php echo $message; ?></div>
<?php } ?>
<table border="0" cellpadding="10" cellspacing="1" width="100%" class="tblLogin"> <tr
class="tableheader">
<td align="center" colspan="2">Enter Login Details</td></tr>
<tr class="tablerow"><td align="right">Username</td>
<td><input type="text" name="user_name"></td></tr> <tr
class="tablerow"><td align="right">Password</td>
<td><input type="password" name="password"></td>
</tr><tr class="tableheader">
<td align="center" colspan="2"><input type="submit" name="submit" value="Submit"></td>
</tr></table></form> </body></html> functions.php <?php function
isLoginSessionExpired() {
$login_session_duration = 10; $current_time = time();
if(isset($_SESSION['loggedin_time']) and isset($_SESSION["user_id"])){
if(((time() - $_SESSION['loggedin_time']) > $login_session_duration)){
return true; } }return false;} ?> logout.php
<?php
session_start();
unset($_SESSION["user_id"]); unset($_SESSION["user_name"]);
$url = "index.php";
if(isset($_GET["session_expired"])) {
$url .= "?session_expired=" .
$_GET["session_expired"];} header("Location:$url");?>
user_login_session.php
<?php
session_start(); $message="";
if(count($_POST)>0) {
if( $_POST["user_name"] == "admin" and $_POST["password"] == "admin") {
$_SESSION["user_id"] = $row[user_id];
$_SESSION["user_name"] = $row[user_name];
$_SESSION['loggedin_time'] = time();
} else {
$message = "Invalid Username or Password!";}}
if(isset($_SESSION["user_id"])) { header("Location:user_dashboard.php")}?>
<html><head>
<title>User Login</title><link rel="stylesheet" type="text/css" href="styles.css" />
53
Web Programming (3160713) 210020107083
</head><body><form name="frmUser" method="post" action="">
<div class="message"><?php if($message!="") { echo $message; } ?></div>
<table border="0" cellpadding="10" cellspacing="1" width="500" align="center"> <tr
class="tableheader"><td align="center" colspan="2">Enter Login Details</td> </tr>
<tr class="tablerow">
<td align="right">Username</td>
<td><input type="text" name="user_name"></td></tr> <tr
class="tablerow"><td align="right">Password</td>
<td><input type="password" name="password"></td></tr>
<tr class="tableheader"><td align="center" colspan="2"><input type="submit" name="submit"
value="Submit"></td></tr>
</table></form>
</body></html> Output:

4) Write a php program to greet the user based on time.


Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head><body>
<?php
$dat = new DateTime('now', new DateTimeZone('Asia/Kolkata'));
$date=$dat->format('H');
if($date < 12)
echo "Good morning to everyone"; else
if($date < 17)
echo "Good afternoon to everyone"; else
if($date<20)
echo "Good evening to everyone"; else
echo "Good night to everyone"; ?>
</body>
</html>

Output:
54
Web Programming (3160713) 210020107083

5) write a php code to upload file on server and display file details on the page(ex. File
name,extension,file size) Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="padding: 50px; border: 1px solid #999">
<h2>Upload PDF File :</h2>
<form enctype="multipart/form-data" action="<?php print $_SERVER['PHP_SELF'] ?>"
method="post">
<p> <input type="file" name="pdfFile" /><br /><br />
<input type="submit" value="upload!" /></p>
</form>
</div>
<!-- upload pdfFile -->
<?php
if (isset($_FILES['pdfFile'])) { if
($_FILES['pdfFile']['type'] == "application/pdf") {
$source_file = $_FILES['pdfFile']['tmp_name'];
$dest_file = "uploads/" . $_FILES['pdfFile']['name'];
if (file_exists($dest_file)) {
print "The file name already exists!!";
} else {
move_uploaded_file($source_file, $dest_file) or
die("Error!!"); if ($_FILES['pdfFile']['error'] == 0) {
print "Pdf file uploaded successfully!"; print "<b><u>Details :
</u></b><br/>"; print "File Name : " . $_FILES['pdfFile']['name'] .
"<br.>" . "<br/>"; print "File Size : " . $_FILES['pdfFile']['size'] . "
bytes" . "<br/>"; print "File location : upload/" .
$_FILES['pdfFile']['name'] . "<br/>";
}}} else {
if ($_FILES['pdfFile']['type'] != "application/pdf") {
print "Error occured while uploading file : " . $_FILES['pdfFile']['name'] . "<br/>";
print "Invalid file extension, should be pdf !!" . "<br/>"; print "Error Code : " .
$_FILES['pdfFile']['error'] . "<br/>"; }}}?>
<!-- upload pdfFile -->
</body>
</html>

55
Web Programming (3160713) 210020107083
Output:

6) Create a web page which shows the use of Session. (Create, Retrieve, Modify Delete and
Destroy Session Variables) Code:
<?php
session_start();
?>
<html>
<head>
<title>PHP Session Example</title>
</head>
<body>

<FORM method="POST">
Enter Name : <input type="text" name="name"> <br/> <br/>
<input type="submit" name="Submit1" value="Session">
<input type="submit" name="Submit2" value="View Seesion">
<input type="submit" name="Submit3" value="Destroy Session">
</FORM>
<?php
if(isset($_POST['Submit1']))
{
$_SESSION["sname"]=$_POST["name"];
} if(isset($_POST['Submit2'])) {
if(isset($_SESSION["sname"]))
{echo "The Session Value = " . $_SESSION["sname"];}else
{echo "All Sessions Destoyed !!";}}if(isset($_POST['Submit3']))
{ session_destroy();}?>
</body> </html>
Output:

56
Web Programming (3160713) 210020107083

Ouiz:
1) How do you create a cookie in PHP?
Answer:
A cookie is created with the setcookie() function.
Syntax: setcookie(name, value, expire, path, domain, secure,
httponly); 2) What is the purpose of $_SESSION[]?
Answer: Used to store variables of the current session.
3) What is the default execution time set in set_time_limit()?
Answer: The default limit is 30 seconds or, if it exists, the max_execution_time value defined
in the php.ini . When called, set_time_limit() restarts the timeout counter from zero.

57
Web Programming (3160713) 210020107083

EXPERIMENT NO: 9 DATE: / /


EXERCISE:
1) Perform complete user registration i.e. signup, display, update and delete.
2) Write a php code to check whether the given username is already in the “login_tbl” table or not
and display an appropriate message.
Code:
Index.php <?php
session_start(); if
(!isset($_SESSION["user"])) {
header("Location: login.php");}?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>User Dashboard</title>
</head>
<body>
<div class="container">
<h1>Welcome to Dashboard</h1>
<a href="logout.php" class="btn btn-warning">Logout</a>
</div>
</body> </html>
database.php
<?php
$hostName = "localhost";
$dbUser = "root";
$dbPassword = "";
$dbName = "users";
58
Web Programming (3160713) 210020107083
$conn = mysqli_connect($hostName, $dbUser, $dbPassword, $dbName); if
(!$conn) {
die("Something went wrong;");
}?>
Login.php <?php
session_start(); if
(isset($_SESSION["user"])) {
header("Location: index.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<?php if
(isset($_POST["login"])) { $email
= $_POST["email"]; $password =
$_POST["password"];
require_once "database.php";
$sql = "SELECT * FROM users WHERE email = '$email'";
$result = mysqli_query($conn, $sql);
$user = mysqli_fetch_array($result, MYSQLI_ASSOC);
if ($user) {
if (password_verify($password, $user["password"])) {
session_start();
$_SESSION["user"] = "yes";
header("Location: index.php");
die();}else{
echo "<div class='alert alert-danger'>Password does not match</div>";}
}else{
echo "<div class='alert alert-danger'>Email does not match</div>";}}
?>
<form action="login.php" method="post">
<div class="form-group">
<input type="email" placeholder="Enter Email:" name="email" class="form-control"> </div><div
class="form-group">
<input type="password" placeholder="Enter Password:" name="password" class="form-control">
</div><div class="form-btn">
<input type="submit" value="Login" name="login" class="btn btn-primary"></div>

59
Web Programming (3160713) 210020107083
</form><div><p>Not registered yet <a href="registration.php">Register Here</a></p></div>
</div>
</body> </html>
registration.php
<?php
session_start(); if
(isset($_SESSION["user"])) {
header("Location: index.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<?php if
(isset($_POST["submit"])) {
$fullName = $_POST["fullname"];
$email = $_POST["email"];
$password = $_POST["password"];
$passwordRepeat = $_POST["repeat_password"];
$passwordHash = password_hash($password, PASSWORD_DEFAULT);
$errors = array();
if (empty($fullName) OR empty($email) OR empty($password) OR empty($passwordRepeat)) {
array_push($errors,"All fields are required");
}
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
array_push($errors, "Email is not valid");
}
if (strlen($password)<8) {
array_push($errors,"Password must be at least 8 charactes long");
}
if ($password!==$passwordRepeat) {
array_push($errors,"Password does not match");
}
require_once "database.php";
$sql = "SELECT * FROM users WHERE email = '$email'";
$result = mysqli_query($conn, $sql);
$rowCount = mysqli_num_rows($result);
if ($rowCount>0) {
array_push($errors,"Email already exists!");}
60
Web Programming (3160713) 210020107083
if (count($errors)>0) {
foreach ($errors as $error) {
echo "<div class='alert alert-danger'>$error</div>";}}else{
$sql = "INSERT INTO users (full_name, email, password) VALUES ( ?, ?, ? )";
$stmt = mysqli_stmt_init($conn);
$prepareStmt = mysqli_stmt_prepare($stmt,$sql);
if ($prepareStmt) {
mysqli_stmt_bind_param($stmt,"sss",$fullName, $email, $passwordHash);
mysqli_stmt_execute($stmt);
echo "<div class='alert alert-success'>You are registered successfully.</div>";
}else{die("Something went wrong");}}}?>
<form action="registration.php" method="post">
<div class="form-group">
<input type="text" class="form-control" name="fullname" placeholder="Full Name:">
</div>
<div class="form-group">
<input type="emamil" class="form-control" name="email" placeholder="Email:"></div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password:">
</div><div class="form-group">
<input type="password" class="form-control" name="repeat_password" placeholder="Repeat Password:">
</div><div class="form-btn">
<input type="submit" class="btn btn-primary" value="Register" name="submit">
</div></form> <div>
<div><p>Already Registered <a href="login.php">Login Here</a></p></div></div></div> </body>
</html>

Output:

61
Web Programming (3160713) 210020107083

Quiz:
1) Can I run several versions of PHP at the same time?
Answer: Yes we can run several versions of php
2) Can echo in php accept more than 1 parameter?
Answer: echo accepts multiple parameters.

62
Web Programming (3160713) 210020107083

EXPERIMENT NO: 10 DATE: / /


EXERCISE:
1) create your own jQuery AJAX form having a submit button with validation feature.
2) write a code to validate user input using jQUERY.
Code:
index.php
<!DOCTYPE html>
<html>
<head>
<title> Registration form validation using jquery ajax and php </title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-
9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOP
nzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.error input {
border-color: red;
border-width: 2px;
}
.success input {
border-color: green;
border-width: 2px;
}
.error span {
color: red;
}
.success span {
color: green;
}
span.error {
color: red;
}
i{
font-weight: 900;
63
Web Programming (3160713) 210020107083
font-family: 'Font Awesome 5 Free';
}
</style>
</head>
<body class="bg-light">
<div class="container">
<div class="row">
<div class="col-md-12 pt-4">
<script async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=capub-1190033123418031"
crossorigin="anonymous"></script>

<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1190033123418031"


data-ad-slot="5335471635" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
<div class="container p-3">
<div class="col-lg-6 m-auto d-block p-3 bg-white">
<h2 class="pb-3 text-success">
Registration form validation using jquery ajax and php
</h2>
<div id="message"></div>
<form method="POST" id="myform">
<div class="row">
<div class="form-group col-md-6">
<label for="user1">
Username: </label>
<input type="text" name="username" id="username" class="form-control">
<span class="error" id="username_err"> </span>
</div>
<div class="form-group col-md-6">
<label for="user1"> Email:
</label>
<input type="email" name="email" id="email" class="form-control">
<span class="error" id="email_err"> </span>
</div>
<div class="form-group col-md-12">
<label for="mob">
Mobile
</label>
<input type="text" name="mobile" id="mobile" class="form-control">
<!-- <h5 id="conpasscheck" style="color: red;">
**Password didn't match
</h5> -->
<span class="error" id="mobile_err"> </span>
</div>
64
Web Programming (3160713) 210020107083
<div class="form-group col-md-12">
<label for="password">
Password:
</label>
<div class="input-group">
<input type="password" name="password" id="password" class="form-control">
<div class="input-group-append">
<span class="input-group-text" onclick="password_show_hide();">
<i class="fas fa-eye" id="show_eye"></i>
<i class="fas fa-eye-slash d-none" id="hide_eye"></i>
</span>
</div>
</div>
<span class="error" id="password_err"> </span>
</div>
<div class="form-group col-md-12">
<label for="conpassword"> Confirm
Password: </label>
<input type="password" name="cpass" id="cpassword" class="form-control">
<!-- <h5 id="conpasscheck" style="color: red;">
**Password didn't match
</h5> -->
<span class="error" id="cpassword_err"> </span>
</div>
<div class="col-md-12">
<button type="button" id="submitbtn" class="btn btn-primary ">Submit</button>
</div>
</div>
</form>
</div>
</div>
<script src="validation.js"></script>
</body> </html>
process.php
<?php
$con = mysqli_connect("localhost", "gogab4tr_bfriendly_u", "12345", "gogab4tr_bootstrapfriendly_demo");
if (!$con) {
echo "connection error";}
$name = htmlspecialchars(trim($_POST['username']));
$email = htmlspecialchars(trim($_POST['email']));
$pass = htmlspecialchars(trim($_POST['password']));
//$cpass = htmlspecialchars(trim($_POST['cpassword'])); $mobile =
htmlspecialchars(trim($_POST['mobile'])); if (empty($name) ||
empty($email) || empty($pass) || empty($mobile)) { echo '<div
class="alert alert-success">please fill all required field</div>'; } else {
$sql = "insert into jquery_val_table(username,email,password,mobile) values
('$name','$email','$pass','$mobile')"; if
($res = mysqli_query($con, $sql)) {
echo '<div class="alert alert-success">data successfully inserted</div>';
} else {
65
Web Programming (3160713) 210020107083
echo '<div class="alert alert-warning">data not inserted</div>';}}?> validation.js
$(document).ready(function () {
$('#username').on('input', function () {
checkuser();
});
$('#email').on('input', function () {
checkemail();
});
$('#password').on('input', function () {
checkpass();
});
$('#cpassword').on('input', function () {
checkcpass();
});
$('#mobile').on('input', function () {
checkmobile();
});
$('#submitbtn').click(function () {
if (!checkuser() && !checkemail() && !checkmobile() && !checkpass() && !checkcpass()) {
console.log("er1");
$("#message").html(`<div class="alert alert-warning">Please fill all required field</div>`);
} else if (!checkuser() || !checkemail() || !checkmobile() || !checkpass() || !checkcpass()) {
$("#message").html(`<div class="alert alert-warning">Please fill all required field</div>`);
console.log("er");
} else {
console.log("ok");
$("#message").html("");
var form = $('#myform')[0];
var data = new FormData(form);
$.ajax({ type:
"POST", url:
"process.php", data:
data, processData:
false, contentType:
false, cache: false,
async: false,
beforeSend: function () {
$('#submitbtn').html('<i class="fa-solid fa-spinner fa-spin"></i>');
$('#submitbtn').attr("disabled", true);
$('#submitbtn').css({ "border-radius": "50%" });
},
success: function (data) {
$('#message').html(data);
},
complete: function () {
setTimeout(function () {
$('#myform').trigger("reset");
$('#submitbtn').html('Submit');
$('#submitbtn').attr("disabled", false);
$('#submitbtn').css({ "border-radius": "4px" });
66
Web Programming (3160713) 210020107083
}, 200);}});}});});
function checkuser() { var
pattern = /^[A-Za-z0-9]+$/; var
user = $('#username').val(); var
validuser = pattern.test(user); if
($('#username').val().length < 4)
{
$('#username_err').html('username length is too short');
return false; } else if (!validuser) {
$('#username_err').html('username should be a-z ,A-Z only');
return false;
} else {
$('#username_err').html('');
return true;
}
}
function checkemail() {
var pattern1 = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var email = $('#email').val(); var
validemail = pattern1.test(email); if
(email == "") {
$('#email_err').html('required field');
return false;
} else if (!validemail) {
$('#email_err').html('invalid email');
return false;
} else {
$('#email_err').html('');
return true;
}}
function checkpass() {
console.log("sass");
var pattern2 = /^(?=.*\d)(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
var pass = $('#password').val(); var validpass = pattern2.test(pass); if
(pass == "") {
$('#password_err').html('password can not be empty');
return false; } else if (!validpass) {
$('#password_err').html('Minimum 5 and upto 15 characters, at least one uppercase letter, one
lowercase letter, one number and one special character:'); return false;
} else {
$('#password_err').html("");
return true;
}}
function checkcpass() { var pass
= $('#password').val(); var cpass
= $('#cpassword').val();
if (cpass == "") {
$('#cpassword_err').html('confirm password cannot be empty');
return false;
} else if (pass !== cpass) {

67
Web Programming (3160713) 210020107083
$('#cpassword_err').html('confirm password did not match');
return false;
} else {
$('#cpassword_err').html('');
return true;
}}
function checkmobile() {
if (!$.isNumeric($("#mobile").val())) {
$("#mobile_err").html("only number is allowed");
return false;
} else if ($("#mobile").val().length != 10) {
$("#mobile_err").html("10 digit required");
return false; }
else {
$("#mobile_err").html("");
return true;
}}
function password_show_hide() {
console.log('ok');
var x = document.getElementById("password"); var
show_eye = document.getElementById("show_eye");
var hide_eye = document.getElementById("hide_eye");
hide_eye.classList.remove("d-none"); if (x.type ===
"password") { x.type = "text";
show_eye.style.display = "none";
hide_eye.style.display = "block";
} else {
x.type = "password";
show_eye.style.display = "block";
hide_eye.style.display = "none";
}}

Output:

Quiz
68
Web Programming (3160713) 210020107083
1) Is jQuery a library for client scripting or server scripting?
Answer: It is a library for client-side Scripting.
2) Is it possible to use jQuery together with AJAX?
Answer: jQuery provides several methods for AJAX functionality.

69

You might also like