Scribd
Upload
21 views71 pages

WP Manual

Uploaded by

udaypatidar990
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
21 views71 pages

WP Manual

Uploaded by

udaypatidar990
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/ 71

Web Programming (3160713) Enrollment

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>
1
Web Programming (3160713) Enrollment
<td>DBMS</td>
<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">

2
Web Programming (3160713) Enrollment
<title>Document</title>
</head>
<style>
td{
text-align:center;
}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>
3
Web Programming (3160713) Enrollment
</html>
Output:

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>
4
Web Programming (3160713) Enrollment
<tr>
<td colspan="7">6-CE-A</td>
</tr>
<tr>
<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>
5
Web Programming (3160713) Enrollment
<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>
</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>
6
Web Programming (3160713) Enrollment
<td>IOT(DP) D 103
<p>/ DV(SP) D 106</p>
</td>
<td></td>
</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;
7
Web Programming (3160713) Enrollment
}
</style>
<fieldset style="background: #f6f8ff; border: 2px solid #4238ca;">
<legend><h2>Personal Information</h2></legend>
<form action="">
<label for="fname">First name:</label>
<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>
8
Web Programming (3160713) Enrollment
<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>
<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:

9
Web Programming (3160713) Enrollment

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?


Answer:
The <br> tag inserts a single line break.

10
Web Programming (3160713) Enrollment

EXPERIMENT NO: 2 DATE: / /


EXERCISE:
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 */
11
Web Programming (3160713) Enrollment
:root {
--navbar-height: 59px}
/* navigation bar */
#navbar {
display: flex;
align-items: center;
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;
12
Web Programming (3160713) Enrollment
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;}

Output:

13
Web Programming (3160713) Enrollment

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;
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>
14
Web Programming (3160713) Enrollment
<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:

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" />
15
Web Programming (3160713) Enrollment
<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>
<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>

16
Web Programming (3160713) Enrollment

Output:

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

17
Web Programming (3160713) Enrollment

EXPERIMENT NO: 3 DATE: / /


EXERCISE:
1) Create a simple table 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 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>
18
Web Programming (3160713) Enrollment
</html>
Output:

2) Create a list 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 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">

19
Web Programming (3160713) Enrollment
<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>
<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.

20
Web Programming (3160713) Enrollment
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. " />
<!-- <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{
21
Web Programming (3160713) Enrollment
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 = 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 {
22
Web Programming (3160713) Enrollment
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) {
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>
23
Web Programming (3160713) Enrollment
<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>
<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:

24
Web Programming (3160713) Enrollment
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]/;
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;
25
Web Programming (3160713) Enrollment
}
#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;
}
#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>
26
Web Programming (3160713) Enrollment
</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>

Output:

27
Web Programming (3160713) Enrollment
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++) {
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;
28
Web Programming (3160713) Enrollment
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:

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>

29
Web Programming (3160713) Enrollment
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";
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";
30
Web Programming (3160713) Enrollment
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";
}
</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 {
31
Web Programming (3160713) Enrollment
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>
<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:

32
Web Programming (3160713) Enrollment
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.

33
Web Programming (3160713) Enrollment
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>
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
34
Web Programming (3160713) Enrollment
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">
<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."; }
35
Web Programming (3160713) Enrollment
?>
</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'];
$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:

36
Web Programming (3160713) Enrollment
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 {
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"] {
37
Web Programming (3160713) Enrollment
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>
<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>
38
Web Programming (3160713) Enrollment
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;
}
$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">
39
Web Programming (3160713) Enrollment
<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:

40
Web Programming (3160713) Enrollment
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

41
Web Programming (3160713) Enrollment
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;
}
.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;
}
42
Web Programming (3160713) Enrollment
.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>
<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"
43
Web Programming (3160713) Enrollment
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";
}
?>

44
Web Programming (3160713) Enrollment
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);
}
45
Web Programming (3160713) Enrollment
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:

46
Web Programming (3160713) Enrollment
4) Create a Webpage through which the admin can upload a photo of Employee and pdf of Aadhar
Card with following constraints.
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;
47
Web Programming (3160713) Enrollment
// header('location:upload-form.php');
}
function upload_file()
{
$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/>";
48
Web Programming (3160713) Enrollment
print "Invalid file extension, should be pdf !!" . "<br/>";
print "Error Code : " . $_FILES['pdfFile']['error'] . "<br/>";
}}}
?>
<!-- upload pdfFile -->
</body>
</html>
Output:

49
Web Programming (3160713) Enrollment
EXPERIMENT NO: 7 DATE: / /
EXERCISE:
1) Use try...catch to show a message when an exception is thrown.
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
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>

50
Web Programming (3160713) Enrollment
Output:

51
Web Programming (3160713) Enrollment
EXPERIMENT NO: 8 DATE: / /
EXERCISE:
1) Perform keep me logged checkbox checked using cookie.
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:

52
Web Programming (3160713) Enrollment
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>
<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:

53
Web Programming (3160713) Enrollment
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 {
$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

54
Web Programming (3160713) Enrollment
<?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" />
</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:

55
Web Programming (3160713) Enrollment
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:

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>
56
Web Programming (3160713) Enrollment
</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>

Output:

57
Web Programming (3160713) Enrollment
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:

58
Web Programming (3160713) Enrollment
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.

59
Web Programming (3160713) Enrollment
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";
$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>
60
Web Programming (3160713) Enrollment
<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>
</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>
61
Web Programming (3160713) Enrollment
<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!");}
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");}}}?>
62
Web Programming (3160713) Enrollment
<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:

63
Web Programming (3160713) Enrollment

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.

64
Web Programming (3160713) Enrollment
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;
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=ca-
pub-1190033123418031" crossorigin="anonymous"></script>

65
Web Programming (3160713) Enrollment
<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>
<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>
66
Web Programming (3160713) Enrollment
</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 {
echo '<div class="alert alert-warning">data not inserted</div>';}}?>
validation.js
$(document).ready(function () {
$('#username').on('input', function () {
checkuser();
});
$('#email').on('input', function () {
67
Web Programming (3160713) Enrollment
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" });
}, 200);}});}});});
function checkuser() {
var pattern = /^[A-Za-z0-9]+$/;
var user = $('#username').val();
68
Web Programming (3160713) Enrollment
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) {
$('#cpassword_err').html('confirm password did not match');
69
Web Programming (3160713) Enrollment
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:

70
Web Programming (3160713) Enrollment
Quiz
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.

71

You might also like