0% found this document useful (0 votes)
7 views

Web Dev Manual 5th IT final

WDT

Uploaded by

vishv patel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
7 views

Web Dev Manual 5th IT final

WDT

Uploaded by

vishv patel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 69

Alpha College of

Engineering and Technology

Web Development
(3151606)

V - Semester

Department of
Information Technology

Student Name:

Enrollment No:

Batch No:
CERTIFICATE

This is to certify
That the lab experiments entitled “WEB DEVELOPMENT (3151606)”
submitted by ………………………………………………….. towards the
partial fulfillment of the requirements for the completion of 5th semester
of Bachelor of Engineering in Information Technology . And this work is
carried out at Alpha college of Engineering and Technology, Khtaraj.

Date:
Place:

Sign Sign
Internal Guide Head of Department
INDEX
Sr.
Practical Title Signature
No.
Develop HTML page using HTML tags. Task Includes:-
- Headers
- Formatting and fonts
1
- Commenting code, color
- Hyperlink
- Lists
- Tables
Develop HTML page.
- Images
2 - Simple HTML forms design
- Create frame and frame sets
- Use of get and post method
CSS - Apply CSS in previously created HTML pages or you can
also create new pages.
- Background image
3
- Borders and boxes
- Colors and properties
- Margins and padding
- Positioning
- Screen Distribution using CSS
Java-script:-
1. Examples of JS(Form validation)
4 2. Examples of JS(Get day, month and year)
3. Examples of JS( Java-script Document Object)
Design static web-site using HTML, CSS, Java-script. (Lay-out
5 will be given at the time of practical)
XML, XSL, XSLT.
6 - Create page using XML. And then transform with XSLT
PHP:-
7 - Create php pages.
- Arrays
- Establish connection with the server

8 PHP Forms:-
Advance PHP:- Create a Program to upload the file
9 - Check if File Already Exists
- Limit File Size and Type
Web Development

Practical: 1

Aim: Develop HTML page using HTML tags.


Task Includes:-
- Headers
- Formatting and fonts
- Commenting code, color
- Hyperlink
- Lists
- Tables
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Practical 1</title>

</head>

<body>

<h1>This is my First Header!!!</h1>

<h2>This is my Second Header!!!</h2>

<h3>This is my Third Header!!!</h3>

<h4>This is my Fourth Header!!!</h4>

<h5>This is my Fifth Header!!!</h5>

<h6>This is my Sixth Header!!!</h6>

<hr/>

<p>Welcome to Internet and World Wide Web programming and Web 2.0! And
welcome to a walkthrough of the Web 2.0 phenomenon from the technical, business
and social perspectives. We've worked hard to create what we hope you'll find
to be an informative, entertaining and challenging learning experience. As you
read this book, you may want to refer to www.deitel.com for updates and
additional information.

Alpha College of Engineering and Technology Department of Information Technology |


1
Web Development

</p>

<hr/>

<pre>

To keep up to date with Internet and web programming developments, and the latest

information on Internet & World Wide Web How to Program, 4/e, at Deitel &
Associates,

please register for our free e-mail newsletter, the Deitel® Buzz Online, at

www.deitel.com/newsletter/subscribe.html

Please check out our growing list of Internet and web programming, and Internet
business Resource Centers a
www.deitel.com/resourcecenters.html

</pre>

<hr/>

<b>This is in Bold text.</b><br /><br />

<i>This is in Italic text</i><br /><br />

<strong>This is strongly emphasized text.</strong><br /><br />

<strike>This is the strike text.</strike><br /><br />

<center>This is appering in the center.</center>

<hr/>

<div align="center">This is aligned at the Center.</div>

<div align="left">This is aligned at the Left.</div>

<div align="right">This is aligned at the Right.</div>

<hr/>

<font face="Verdana" size="10"/>

This is Verdana.<br /><br />

<font face="Arial" size="6"/>

This is Arial.<br /><br />

<font face="Times New Roman" size="4"/>

Alpha College of Engineering and Technology Department of Information Technology |


2
Web Development

This is Times New Roman.<br /><br />

<hr/>

<h2>All branch in Alpha College.</h2>

<ul type="disc">

<li>Information Technology</li>

<li>Electronics Communication</li>

<li>Computer Engineering</li>

<li>Mechanical Engineering</li>

<li>Electrical Engineering</li>

<li>Civil Engineering</li>

</ul>

<h2>All branch in Alpha College.</h2>

<ul type="square">

<li>Information Technology</li>

<li>Electronics Communication</li>

<li>Computer Engineering</li>

<li>Mechanical Engineering</li>

<li>Electrical Engineering</li>

<li>Civil Engineering</li>

</ul>

<h2>All branch in Alpha College.</h2>

<ul type="circle">

<li>Information Technology</li>

<li>Electronics Communication</li>

<li>Computer Engineering</li>

<li>Mechanical Engineering</li>

<li>Electrical Engineering</li>

<li>Civil Engineering</li>

</ul>

<hr/>

Alpha College of Engineering and Technology Department of Information Technology |


3
Web Development

<h2>All branch in Alpha College.</h2>

<ol type="1">

<li>Information Technology</li>

<li>Electronics Communication</li>

<li>Computer Engineering</li>

<li>Mechanical Engineering</li>

<li>Electrical Engineering</li>

<li>Civil Engineering</li>

</ol>

<h2>All branch in Alpha College.</h2>

<ol type="a" start="5">

<li>Information Technology</li>

<li>Electronics Communication</li>

<li>Computer Engineering</li>

<li>Mechanical Engineering</li>

<li>Electrical Engineering</li>

<li>Civil Engineering</li>

</ol>

<h2>All branch in Alpha College.</h2>

<ol type="A">

<li>Information Technology</li>

<li>Electronics Communication</li>

<li>Computer Engineering</li>

<li>Mechanical Engineering</li>

<li>Electrical Engineering</li>

<li>Civil Engineering</li>

</ol>

<h2>All branch in Alpha College.</h2>

<ol type="i">

<li>Information Technology</li>

Alpha College of Engineering and Technology Department of Information Technology |


4
Web Development

<li>Electronics Communication</li>

<li>Computer Engineering</li>

<li>Mechanical Engineering</li>

<li>Electrical Engineering</li>

<li>Civil Engineering</li>

</ol>

<h2>All branch in Alpha College.</h2>

<ol type="I">

<li>Information Technology</li>

<li>Electronics Communication</li>

<li>Computer Engineering</li>

<li>Mechanical Engineering</li>

<li>Electrical Engineering</li>

<li>Civil Engineering</li>

</ol>

<hr/>

<ol type="1">

<li>All branch in Alpha College.</li>

<ul type="circle">

<li>Information Technology</li>

<li>Electronics Communication</li>

<li>Computer Engineering</li>

<li>Mechanical Engineering</li>

<li>Electrical Engineering</li>

<li>Civil Engineering</li>

</ul><br />

<li>All branch in Alpha College.</li>

<ul type="Disc">

<li>Information Technology</li>

<li>Electronics Communication</li>

Alpha College of Engineering and Technology Department of Information Technology |


5
Web Development

<li>Computer Engineering</li>

<li>Mechanical Engineering</li>

<li>Electrical Engineering</li>

<li>Civil Engineering</li>

</ul><br />

<li>All branch in Alpha College.</li>

<ul type="square">

<li>Information Technology</li>

<li>Electronics Communication</li>

<li>Computer Engineering</li>

<li>Mechanical Engineering</li>

<li>Electrical Engineering</li>

<li>Civil Engineering</li>

</ul>

</ol>

<hr/>

<table width="100%" border="1" cellspacing="10" cellpadding="10" >

<tr align="center">

<td>Name</td>

<td>Marks</td>

</tr>

<tr>

<td>abc</td>

<td>85</td>

</tr>

<tr>

<td>def</td>

<td>75</td>

</tr>

<tr>

Alpha College of Engineering and Technology Department of Information Technology |


6
Web Development

<td>ghi</td>

<td>95</td>

</tr>

<tr>

<td>xyz</td>

<td>80</td>

</tr>

</table>

<br />

<center>

<br/>

<table width="500px" border="1" cellspacing="2" cellpadding="3">

<tr align="center">

<td>Name</td>

<td>Marks</td>

</tr>

<tr>

<td>abc</td>

<td>85</td>

</tr>

<tr>

<td>def</td>

<td>75</td>

</tr>

<tr>

<td>ghi</td>

<td>95</td>

</tr>

<tr>

<td>xyz</td>

Alpha College of Engineering and Technology Department of Information Technology |


7
Web Development

<td>80</td>

</tr>

</table>

</center>

<br/>

<table width="300px" border="1" cellspacing="2" cellpadding="3"


align="center">

<tr align="center">

<td bgcolor="#000000">&nbsp;</td>

<td>&nbsp;</td>

<td bgcolor="#000000">&nbsp;</td>

<td>&nbsp;</td>

<td bgcolor="#000000">&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td bgcolor="#000000">&nbsp;</td>

<td>&nbsp;</td>

<td bgcolor="#000000">&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td bgcolor="#000000">&nbsp;</td>

<td>&nbsp;</td>

<td bgcolor="#000000">&nbsp;</td>

<td>&nbsp;</td>

<td bgcolor="#000000">&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td bgcolor="#000000">&nbsp;</td>

Alpha College of Engineering and Technology Department of Information Technology |


8
Web Development

<td>&nbsp;</td>

<td bgcolor="#000000">&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td bgcolor="#000000">&nbsp;</td>

<td>&nbsp;</td>

<td bgcolor="#000000">&nbsp;</td>

<td>&nbsp;</td>

<td bgcolor="#000000">&nbsp;</td>

</tr>

</table>

<br/>

<table width="300px" cellpadding="3" align="center">

<tr align="center">

<td bgcolor="#000000" colspan="5">&nbsp;</td>

</tr>

<tr>

<td rowspan="3" bgcolor="#000000">&nbsp;</td>

<td bgcolor="#000000">&nbsp;</td>

<td>&nbsp;</td>

<td bgcolor="#000000">&nbsp;</td>

<td rowspan="3" bgcolor="#000000">&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td bgcolor="#000000">&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

Alpha College of Engineering and Technology Department of Information Technology |


9
Web Development

<td bgcolor="#000000">&nbsp;</td>

<td>&nbsp;</td>

<td bgcolor="#000000">&nbsp;</td>

</tr>

<tr>

<td bgcolor="#000000" colspan="5">&nbsp;</td>

</tr>

</table>

</body>

</html>

Alpha College of Engineering and Technology Department of Information Technology |


10
Web Development

OUTPUT

Alpha College of Engineering and Technology Department of Information Technology |


11
Web Development

Alpha College of Engineering and Technology Department of Information Technology |


12
Web Development

Alpha College of Engineering and Technology Department of Information Technology |


13
Web Development

Alpha College of Engineering and Technology Department of Information Technology |


14
Web Development

Practical: 2
Aim: Develop HTML page.
- Images
- Simple HTML forms design
- Create frame and frame sets
- Use of get and post method

Simple HTML forms design with GET and POST method

<html>

<head>

<title>HTML Registration form</title>

</head>

<body>

<h1>Registration Form</h1>

<form name='registration' method="POST">

<table>

<tr>

<td><label for="userid">User id:</label></td>

<td><input type="text" name="userid" size="12" /></td>

</tr>

<tr>

<td><label for="passid">Password:</label></td>

<td><input type="password" name="passid" size="12" /></td>

</tr>

<tr>

<td><label for="username">Name:</label></td>

<td><input type="text" name="username" size="50" /></td>

</tr>

<tr>

<td><label for="address">Address:</label></td>

<td><input type="text" name="address" size="50" /></td>

Alpha College of Engineering and Technology Department of Information Technology |


15
Web Development

</tr>

<tr>

<td><label for="country">Country:</label></td>

<td>

<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>

</td>

</tr>

<tr>

<td><label for="zip">ZIP Code:</label></td>

<td><input type="text" name="zip" /></td>

</tr>

<tr>

<td><label for="email">Email:</label></td>

<td><input type="text" name="email" size="50" /></td>

</tr>

<tr>

<td><label id="gender">Sex:</label></td>

<td><input type="radio" name="msex" value="Male"


/><span>Male</span><input type="radio" name="fsex" value="Female"
/><span>Female</span></td>

</tr>

<tr>

<td><label>Language:</label></td>

Alpha College of Engineering and Technology Department of Information Technology |


16
Web Development

<td>

<input type="checkbox" name="en" value="en" checked


/><span>English</span>

<input type="checkbox" name="nonen" value="noen"


/><span>Non English</span>

</td>

</tr>

<tr>

<td><label for="desc">About:</label></td>

<td><textarea name="desc" id="desc"></textarea></td>

</tr>

<tr>

<td><input type="submit" name="submit" value="Submit" /></td>

</tr>

</table>

</form>

</body>

</html>
For POST Method

For GET Method

Alpha College of Engineering and Technology Department of Information Technology |


17
Web Development

Create frame and frame sets

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Practical 2</title>

</head>

<frameset rows="80,80,80" frameborder="yes" border="1" framespacing="0">

<frame src="2.html" name="topFrame" scrolling="No" id="topFrame"


title="topFrame" />

<frameset cols="50%,50%" border="1">

<frame src="3.html" name="mainFrame" scrolling="yes" id="mainFrame"


title="mainFrame" />

<frame src="3.html" name="mainFrame" scrolling="yes" id="mainFrame"


title="mainFrame" />

</frameset>

<frame src="4.html" name="bottomFrame" scrolling="No" id="bottomFrame"


title="bottomFrame" />

</frameset>

<noframes><body>

</body>

</noframes>

Alpha College of Engineering and Technology Department of Information Technology |


18
Web Development

Practical: 3
Aim: CSS: - Apply CSS in previously created HTML pages or you can also create new
pages.
- Background image
- Borders and boxes
- Colors and properties
- Margins and padding
- Positioning
- Screen Distribution using CSS

Background image, Borders and boxes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Practical 4a</title>

<style type="text/css">

body

background-image:url("whitepattern1.jpg");

background-repeat:repeat;

h4.none{border-style:none}

h4.dotted{border-style:dotted}

h4.dashed{border-style:dashed}

h4.hidden{border-style:hidden}

h4.double{border-style:double}

h4.solid{border-style:solid}

h4.groove{border-style:groove}

h4.ridge{border-style:ridge}

h4.inset{border-style:inset}

Alpha College of Engineering and Technology Department of Information Technology |


19
Web Development

h4.thickred

border-style:solid;

border-width:3px;

border-color:Red;

h4.thickblue

border-style:solid;

border-width:5px;

border-color:Blue;

h4.thickgreen

border-style:solid;

border-width:7px;

border-color:Green;

</style>

</head>

<body>

<h4 class="none">This text has no border.</h4>

<h4 class="dotted">This text has Dotted border.</h4>

<h4 class="dashed">This text has Dashed border.</h4>

<h4 class="hidden">This text has Hidden border.</h4>

<h4 class="double">This text has Double border.</h4>

<h4 class="solid">This text has Solid border.</h4>

<h4 class="groove">This text has Groove border.</h4>

<h4 class="ridge">This text has Ridge border.</h4>

<h4 class="inset">This text has Inset border.</h4>

Alpha College of Engineering and Technology Department of Information Technology |


20
Web Development

<br/>

<h4 class="thickred">This text has Thick border.</h4>

<h4 class="thickblue">This text has Thicker border.</h4>

<h4 class="thickgreen">This text has Thickest border.</h4>

</body>

</html>

Alpha College of Engineering and Technology Department of Information Technology |


21
Web Development

- Margins and padding (Box Model)

<html xmlns="http://www.w3.org/1999/xhtml" ><head>

<title>Practical 4b</title>

<style type="text/css">

p.method1

{border-style:solid;margin-top:80px; margin-bottom:60Px;margin-
left:30px; margin-right:70px;
padding-top:80px;

padding-bottom:60Px;

padding-left:30px;

padding-right:70px;

</style>

</head>

<body>

<h3>Neighbouring Text</h3>

<p class="method1">Text</p>

<pre>Note: Just change the values of Margin and Padding

and notice the effect on the Browser.</pre>

</body>

</html>

Alpha College of Engineering and Technology Department of Information Technology |


22
Web Development

- Positioning

<html>

<head>

<title>Practical 4c</title>

</head>

<style>

.firstlayer

position:relative;

top:100px;

left:150px;

height:150px;

width:150px;

background-color:red;

.secondlayer

position:relative;

top:30px;

left:30px;

height:150px;

width:150px;

background-color:yellow;

.thirdlayer

position:relative;

top:30px;

left:30px;

height:150px;

Alpha College of Engineering and Technology Department of Information Technology |


23
Web Development

width:150px;

background-color:green;

.forthlayer{

position:relative;

top:30px;

left:30px;

height:150px;

width:150px;

background-color:blue;

</style>

<body>

<div class="firstlayer">

<div class="secondlayer">

<div class="thirdlayer">

<div class="forthlayer">

</div>

</div>

</div>

</div>

</body>

</html>

Alpha College of Engineering and Technology Department of Information Technology |


24
Web Development

Screen Distribution using CSS

<html>

<head>

<title>Practical 4d</title>

</head>

<style>

.header

background-color: green;

height: 15%;

width: 100%;

.menu

background-color: blue;

height: 5%;

width: 100%;

.sidemenu

background-color: red;

height: 80%;

width: 20%;

float: left;

.block

height: 100%;

width: 100%;

Alpha College of Engineering and Technology Department of Information Technology |


25
Web Development

.blockorange

background-color: orange;

height: 40%;

width: 100%;

.blockyellow

background-color: yellow;

height: 40%;

width: 100%;

</style>

<body>

<div class="header">

</div>

<div class="menu">

</div>

<div class="sidemenu">

</div>

<div class="block">

<div class="blockorange">

</div>

<div class="blockyellow">

</div>

</div>

</body>

</html>

Alpha College of Engineering and Technology Department of Information Technology |


26
Web Development

OUTPUT

Alpha College of Engineering and Technology Department of Information Technology |


27
Web Development

Practical: 5
Aim: Java-script:-
1. Examples of JS(Form validation)
2. Examples of JS(Get day, month and year)
3. Examples of JS( Java-script Document Object)
1. Examples of JS(Form validation)
From Validation.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>JavaScript Form Validation</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>

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

Alpha College of Engineering and Technology Department of Information Technology |


28
Web Development

<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="fsex" 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>

Alpha College of Engineering and Technology Department of Information Technology |


29
Web Development

</ul>

</form>

</body>

</html>

js-form-validation.css

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;

Alpha College of Engineering and Technology Department of Information Technology |


30
Web Development

[type="submit"] {

clear: left;

margin: 20px 0 0 230px;

font-size: 18px;

}
p {

margin-left: 70px;

font-weight: bold;

sample-registration-form-validation.js

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)) {

}
Alpha College of Engineering and Technology Department of Information Technology |
31
Web Development

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;

Alpha College of Engineering and Technology Department of Information Technology |


32
Web Programming

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]+$/;

var ziplength = uzip.value.length;

if (uzip.value.match(numbers)) {

if(ziplength == 6)

return true;

else

Alpha College of Engineering and Technology Department of Information Technology | 33


Web Programming

alert('ZIP code must have 6 digit numeric characters');

return false;

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');

Alpha College of Engineering and Technology Department of Information Technology | 34


Web Programming

umsex.focus();

return false;

else {

alert('Form Succesfully Submitted');

window.location.reload()

return true;

Alpha College of Engineering and Technology Department of Information Technology | 35


Web Programming

OUTPUT

Alpha College of Engineering and Technology Department of Information Technology | 36


Web Programming

2. Examples of JS(Get day, month and year)


<html>

<head>

<title>JavaScript Date Method</title>

</head>

<body>

<h3>Returns today's date and time</h3>

<script type="text/javascript">

var dt = Date();

document.write("Date and Time : " + dt );

</script>

<br />

<h3>Returns the day of the month for the specified date according to local
time.</h3>

<script type="text/javascript">

var dt = new Date("December 25, 1995 23:15:00");

document.write("getDate() : " + dt.getDate() );

</script>

<h3>Returns the day of the week for the specified date according to local
time.</h3>

<script type="text/javascript">

var dt = new Date("December 25, 1995 23:15:00");

document.write("getDay() : " + dt.getDay() );

</script>

<h3>Returns the year of the specified date according to local time.</h3>

<script type="text/javascript">

var dt = new Date("December 25, 1995 23:15:00");

document.write("getFullYear() : " + dt.getFullYear() );

</script>

<h3>Returns the hour in the specified date according to local time.</h3>

Alpha College of Engineering and Technology Department of Information Technology | 37


Web Programming

<script type="text/javascript">

var dt = new Date("December 25, 1995 23:15:00");

document.write("getHours() : " + dt.getHours() );

</script>

<h3>Returns the milliseconds in the specified date according to local time.</h3>

<script type="text/javascript">

var dt = new Date();

document.write("getMilliseconds() : " + dt.getMilliseconds() );

</script>

<h3>Returns the minutes in the specified date according to local time.</h3>

<script type="text/javascript">

var dt = new Date( "December 25, 1995 23:15:00" );

document.write("getMinutes() : " + dt.getMinutes() );

</script>

<h3>Returns the month in the specified date according to local time.</h3>

<script type="text/javascript">

var dt = new Date( "December 25, 1995 23:15:00" );

document.write("getMonth() : " + dt.getMonth() );

</script>

<h3>Returns the seconds in the specified date according to local time.</h3>

<script type="text/javascript">

var dt = new Date( "December 25, 1995 23:15:20" );

document.write("getSeconds() : " + dt.getSeconds() );

</script>

</body>

</html>

Alpha College of Engineering and Technology Department of Information Technology | 38


Web Programming

OUTPUT

Alpha College of Engineering and Technology Department of Information Technology | 39


Web Programming

3. Examples of JS( Java-script Document Object)

<html>

<head>

<title>Document Object Example</title>

<script type="text/javascript">

function incrementCurrent() {

current = parseInt(document.forms["noteForm"].total.value);

document.forms["noteForm"].total.value = current + 1;

</script>

</head><body>

<div id="mainDiv">

<h1>Document Object Example</h1>

<form id="noteForm">

Current number of notes:

<input type="text" name="total" value="0" size="3"/>

<input type="button" value="Add a new note" onclick="incrementCurrent()"/>

</form>

</div>

</body>

</html>

Alpha College of Engineering and Technology Department of Information Technology | 40


Web Programming

OUTPUT

Alpha College of Engineering and Technology Department of Information Technology | 41


Web Programming

Practical: 6
Aim: Design static web-site using HTML, CSS, Java-script. (Lay-out will be given at the
time of practical)

Business.html

<html>

<head>

<title>webpage</title>

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

</head>

<div class="header"><img src="margu/logo.jpg" class="logopos" alt="logo"/>

</div>

<div class="fcontent"></div>

<div class="scontent"></div>

<div class="footer"></div>

<div class="emboselayer">

<div class="menu">

<ul>

<li><a href="default.asp">Home</a></li>

<li><a href="Aboutus.asp">Aboutus</a></li>

<li><a href="Services.asp">Services</a></li>

<li><a href="Solutions.asp">Solutions</a></li>

<li><a href="Support.asp">Support</a></li>

<li><a href="Blog.asp">Blog</a></li>

<li><a href="Contacts.asp">Contacts</a></li>

</ul>

Alpha College of Engineering and Technology Department of Information Technology | 42


Web Programming

</div>

<div class="maincontent">

<div class="img1"><h1 style="font-size: 90%">Dear Students You have


to </br> create the template using css</h1></div>

<div class="img2"><img src="margu/discussing.jpg" class="pic1"


alt="discussing"></div>

<div class="img3">

<div class="image1"><img src="margu/shake-hands.jpg" class="edit1"


alt="shake-hands"></div>

<div class="image2"><img src="margu/professionals.jpg"


class="edit2" alt="professionals"></div>

</div>

</div>

<div class="gridimages">

<div class="grid1"><img src="margu/meeting2.jpg" class="edit3"


alt="meeting2"><p class="text">Hello Alpha IT Students, </br> Have a Nice
Day</p></div>

<div class="grid2"><img src="margu/flags2.jpg" class="edit4"


alt="flags2"><p class="text1">Hello Alpha IT Students, </br> Have a Nice
Day</p></div>

<div class="grid3"><img src="margu/boys.jpg" class="edit5"


alt="boys"><p class="text2">Hello Alpha IT Students, </br> Have a Nice
Day</p></div>

</div>

</div>

</body>

</html>

Alpha College of Engineering and Technology Department of Information Technology | 43


Web Programming

Business.css
.header
{
font-size: large;
height:20%;
width:100%;
background-image: url("margu/bgcolor.JPG");
}
.fcontent
{
height:50%;
width:100%;
}
.scontent
{
height:20%;
width:100%;
background-image: url("margu/bg-content.gif");
}
.footer
{
height:10%;
width:100%;
background-image: url("margu/bgcolor.JPG");
}
.logopos
{
position:absolute;
left:150px;
top:50px;
}
.emboselayer
{
height:420px;
width:1000px;
position:absolute;
left:150px;
top:115px;
}
.menu
{

Alpha College of Engineering and Technology Department of Information Technology | 44


Web Programming

height: 10%;
width:100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: gainsboro;
}

li {
float: left;
}

li a {
display: block;
color: midnightblue;
text-align: center;
padding: 12px;
text-decoration: none;
}
li a:hover {
background-color: black;
}
.maincontent
{
height: 60%;
width:100%;
}
.gridimages
{
width:100%;
height: 30%;
.img1
{
height:100%;
width:25%;
float:left;
}

Alpha College of Engineering and Technology Department of Information Technology | 45


Web Programming

.img2
{
height:100%;
width:50%;
float:left;
}
.pic1
{
position:absolute;
top:42px;
right:250px;
height:60%;
width:50%;
}
.img3
{
height:100%;
width:25%;
float:left;
}
.image1
{
height:50%;
width:100%;
}
.image2
{
height:50%;
width:100%;
}
.edit1
{
height:100%;
width:100%;
}
.edit2
{
height:100%;
width:100%;
}

Alpha College of Engineering and Technology Department of Information Technology | 46


Web Programming

.grid1
{
height: 100%;
width: 30%;
background-color: whitesmoke;
float: left;
}
.edit3
{
position: absolute;
top:74.5%;
left:2%;
}
.grid2
{
height: 100%;
width: 30%;
float: left;
background-color: gainsboro;
}
.edit4
{
position: absolute;
top:74.5%;
left:32%;
}
.grid3
{
height: 100%;
width: 40%;
background-color: gainsboro;
float: left;
}
.edit5
{
position: absolute;
top:74.5%;
left:62%;
}

Alpha College of Engineering and Technology Department of Information Technology | 47


Web Programming

.text
{padding-left: 40%;
padding-top: 4%;
font-size: 70%;
}
.text1
{
padding-left: 40%;
padding-top: 4%;
font-size:70%;
}
.text2
{
padding-left: 30%;
padding-top: 4%;
font-size: 70%;

Alpha College of Engineering and Technology Department of Information Technology | 48


Web Programming

Practical: 7
Aim: XML, XSL, XSLT.
- Create page using XML. And then transform with XSLT

Catalog.xml

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/xsl" href="sample.xsl"?>

<catalog>

<book id="bk101">

<author>Gambardella, Matthew</author>

<title>XML Developer's Guide</title>

<genre>Computer</genre>

<price>44.95</price>

<publish_date>2000-10-01</publish_date>

<description>An in-depth look at creating applications

with XML.</description>

</book>

<book id="bk102">

<author>Ralls, Kim</author>

<title>Midnight Rain</title>

<genre>Fantasy</genre>

<price>5.95</price>

<publish_date>2000-12-16</publish_date>

<description>A former architect battles corporate zombies,

an evil sorceress, and her own childhood to become queen

of the world.</description>

</book>

<book id="bk103">

<author>Corets, Eva</author>

<title>Maeve Ascendant</title>

<genre>Fantasy</genre>

Alpha College of Engineering and Technology Department of Information Technology | 49


Web Programming

<price>5.95</price>

<publish_date>2000-11-17</publish_date>

<description>After the collapse of a nanotechnology

society in England, the young survivors lay the

foundation for a new society.</description>

</book>

<book id="bk104">

<author>Corets, Eva</author>

<title>Oberon's Legacy</title>

<genre>Fantasy</genre>

<price>5.95</price>

<publish_date>2001-03-10</publish_date>

<description>In post-apocalypse England, the mysterious

agent known only as Oberon helps to create a new life

for the inhabitants of London. Sequel to Maeve

Ascendant.</description>

</book>

<book id="bk105">

<author>Corets, Eva</author>

<title>The Sundered Grail</title>

<genre>Fantasy</genre>

<price>5.95</price>

<publish_date>2001-09-10</publish_date>

<description>The two daughters of Maeve, half-sisters,

battle one another for control of England. Sequel to

Oberon's Legacy.</description>

</book>

<book id="bk106">

<author>Randall, Cynthia</author>

<title>Lover Birds</title>

Alpha College of Engineering and Technology Department of Information Technology | 50


Web Programming

<genre>Romance</genre>

<price>4.95</price>

<publish_date>2000-09-02</publish_date>

<description>When Carla meets Paul at an ornithology

conference, tempers fly as feathers get ruffled.</description>

</book>

<book id="bk107">

<author>Thurman, Paula</author>

<title>Splish Splash</title>

<genre>Romance</genre>

<price>4.95</price>

<publish_date>2000-11-02</publish_date>

<description>A deep sea diver finds true love twenty

thousand leagues beneath the sea.</description>

</book>

<book id="bk108">

<author>Knorr, Stefan</author>

<title>Creepy Crawlies</title>

<genre>Horror</genre>

<price>4.95</price>

<publish_date>2000-12-06</publish_date>

<description>An anthology of horror stories about roaches,

centipedes, scorpions and other insects.</description>

</book>

<book id="bk109">

<author>Kress, Peter</author>

<title>Paradox Lost</title>

<genre>Science Fiction</genre>

<price>6.95</price>

<publish_date>2000-11-02</publish_date>

Alpha College of Engineering and Technology Department of Information Technology | 51


Web Programming

<description>After an inadvertant trip through a Heisenberg

Uncertainty Device, James Salway discovers the problems

of being quantum.</description>

</book>

<book id="bk110">

<author>O'Brien, Tim</author>

<title>Microsoft .NET: The Programming Bible</title>

<genre>Computer</genre>

<price>36.95</price>

<publish_date>2000-12-09</publish_date>

<description>Microsoft's .NET initiative is explored in

detail in this deep programmer's reference.</description>

</book>

<book id="bk111">

<author>O'Brien, Tim</author>

<title>MSXML3: A Comprehensive Guide</title>

<genre>Computer</genre>

<price>36.95</price>

<publish_date>2000-12-01</publish_date>

<description>The Microsoft MSXML3 parser is covered in

detail, with attention to XML DOM interfaces, XSLT processing,

SAX and more.</description>

</book>

<book id="bk112">

<author>Galos, Mike</author>

<title>Visual Studio 7: A Comprehensive Guide</title>

<genre>Computer</genre>

<price>49.95</price>

<publish_date>2001-04-16</publish_date>

<description>Microsoft Visual Studio 7 is explored in depth,

Alpha College of Engineering and Technology Department of Information Technology | 52


Web Programming

looking at how Visual Basic, Visual C++, C#, and ASP+ are

integrated into a comprehensive development

environment.</description>

</book>

</catalog>

Design.xsl

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="2.0">

<xsl:output method="html" indent="yes" encoding="utf-8"


doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>

<xsl:template match="/">

<html>

<head>

<title>Sample xml transformation</title>

</head>

<body>

<table border="1">

<tr bgcolor="#9acd32">

<th>Author</th>

<th>Title</th>

<th>Genration</th>

<th>Price</th>

<th>Publish_date</th>

<th>Description</th>

</tr>

<xsl:for-each select="catalog/book">

<tr>

<td><xsl:value-of select="author" /></td>

<td><xsl:value-of select="title" /></td>

Alpha College of Engineering and Technology Department of Information Technology | 53


Web Programming

<td><xsl:value-of select="genre" /></td>

<td><xsl:value-of select="price" /></td>

<td><xsl:value-of select="publish_date" /></td>

<td><xsl:value-of select="description" /></td>

</tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

Alpha College of Engineering and Technology Department of Information Technology | 54


Web Programming

Practical: 8
Aim: PHP:-
- Create php pages.
- Arrays
- Establish connection with the server
Arrays (Index, Associative, Associative Loop, Multidimensional Array )
<html>
<head>
<title>Indexed Array</title>
</head>
<body>
<?php
$cars=array("Volvo","BMW","Toyota");
echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
echo "<br/>Length of an Array is:";
echo count($cars);
?>
<?php
$cars=array("Volvo","BMW","Toyota");
$arrlength=count($cars);
echo "<br/>";
for($x=0;$x<$arrlength;$x++)
{
echo "<br>";
echo $cars[$x];
}
?>

</body>
</html>

OUTPUT:

Alpha College of Engineering and Technology Department of Information Technology | 55


Web Programming

<html>
<head>
<title>Associative Array along with loop</title>
</head>
<body>
<?php
$age=array("Peter"=>"35","Ben"=>"37","Joe"=>"43");
echo "Peter is " . $age['Peter'] . " years old.<br/>";
?>
<?php
$age=array("Peter"=>"35","Ben"=>"37","Joe"=>"43");

foreach($age as $x=>$x_value)
{
echo "Key=" . $x . ", Value=" . $x_value;
echo "<br>";
}
print "<br><br>Example of array_merge<br>";
$first = array("a","b","c","d","e");
$second = array("1","2","3","4","5");
$third = array_merge($first,$second);
foreach($third as $val)
{
print "$val";
}
print "<br><br>Example of array_slice<br>";
$fourth = array_slice($first,2,3);
foreach($fourth as $val)
{
print "$val";
}?>
</body>
</html>

Alpha College of Engineering and Technology Department of Information Technology | 56


Web Programming

<html>
<head>
<title>Multidimensional Arrays</title>
</head>
<body>
<?php
$cars = array
(
array("Volvo",22,18),
array("BMW",15,13),
array("Saab",5,2),
array("Land Rover",17,15)
);

echo $cars[0][0].": In stock: <b>".$cars[0][1]."</b>, sold:


<b>".$cars[0][2]."</b>.<br>";
echo $cars[1][0].": In stock: <b>".$cars[1][1]."</b>, sold:
<b>".$cars[1][2]."</b>.<br>";
echo $cars[2][0].": In stock: <b>".$cars[2][1]."</b>, sold:
<b>".$cars[2][2]."</b>.<br>";
echo $cars[3][0].": In stock: <b>".$cars[3][1]."</b>, sold:
<b>".$cars[3][2]."</b>.<br>";
?>

</body>
</html>
Output:

Alpha College of Engineering and Technology Department of Information Technology | 57


Web Programming

Establish connection with the server


<html>
<head>
<title>Server Connectivity</title>
</head>
<body>
<?php
// Create connection
$con=mysqli_connect("localhost","root","");
echo "Connection created Successfully.";

// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$sql="CREATE DATABASE temp";


if (mysqli_query($con,$sql))
{
echo "Database temp created successfully";
}
else
{
echo "Error creating database: " . mysqli_error();
}

// Close connection
mysqli_close($con);
?>
</body>
</html>

Alpha College of Engineering and Technology Department of Information Technology | 58


Web Programming

OUTPUT

Alpha College of Engineering and Technology Department of Information Technology | 59


Web Programming

Practical: 9
Aim: PHP Forms:-
Registrationform.html
<html>
<head>
<title>Registration Form (without Database)</title>
</head>
<body>
<form action="registrationvalue.php" method="post">
<table>
<tr>
<td><label for="userid">User id:</label></td>
<td><input type="text" name="userid" size="12" /></td>
</tr>
<tr>
<td><label for="passid">Password:</label></td>
<td><input type="password" name="passid" size="12" /></td>
</tr>
<tr>
<td><label for="username">Name:</label></td>
<td><input type="text" name="username" size="50" /></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><input type="text" name="address" size="50" /></td>
</tr>
<tr>
<td><label for="country">Country:</label></td>
<td>
<select name="country">
<option selected="" value="Default">(Please select a
country)</option>
<option value="Australia">Australia</option>
<option value="Canada">Canada</option>
<option value="India">India</option>
<option value="Russia">Russia</option>
<option value="USA">USA</option>
</select>
</td>
</tr>

Alpha College of Engineering and Technology Department of Information Technology | 60


Web Programming

<tr>
<td><label for="zip">ZIP Code:</label></td>
<td><input type="text" name="zip" /></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="text" name="email" size="50" /></td>
</tr>
<tr>
<td><label id="gender">Gender:</label></td>
<td><input type="radio" name="gender" value="Male"
/><span>Male</span><input type="radio" name="gender" value="Female"
/><span>Female</span></td>
</tr>
<tr>
<td><label for="desc">About:</label></td>
<td><textarea name="desc" id="desc"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="Submit Details"
/></td>
</tr>
</table>
</form>
</body>
</html>

Registrationform.php
<?php
//receiving userid field value in $userID variable
$userid=$_POST["userid"];

//receiving password field value in $password variable


$password=$_POST["passid"];

//receiving name field value in $name variable


$username=$_POST["username"];

//receiving address field value in $add variable


$add=$_POST["address"];

Alpha College of Engineering and Technology Department of Information Technology | 61


Web Programming

//receiving country field value in $country variable


$country=$_POST["country"];

//receiving ZipCode field value in $zip variable


$zip=$_POST["zip"];

//receiving Email ID field value in $email variable


$email=$_POST["email"];

//receiving Gender field value in $gender variable


$gender=$_POST["gender"];

//receiving Description field value in $desc variable


$desc=$_POST["desc"];

echo "Welcome: $username,<br/><br/>";


echo "<table>
<tr>
<td>User ID: </td>
<td><b>$userid</b></td>
</tr>
<tr>
<td>User name: </td>
<td><b>$username</b></td>
</tr>
<tr>
<td>Password: </td>
<td><b>$password</b></td>
</tr>
<tr>
<td>Address: </td>
<td><b>$add</b></td>
</tr>
<tr>
<td>Country: </td>
<td><b>$country</b></td>
</tr>
<tr>
<td>Pincode: </td>

Alpha College of Engineering and Technology Department of Information Technology | 62


Web Programming

<td><b>$zip</b></td>
</tr>
<tr>
<td>Email ID: </td>
<td><b>$email</b></td>
</tr>

<tr>
<td>Gender: </td>
<td><b>$gender</b></td>
</tr>

<tr>
<td>About: </td>
<td><b>$desc</b></td>

Alpha College of Engineering and Technology Department of Information Technology | 63


Web Programming

Practical: 10
Aim: Advance PHP:- Create a Program to upload the file

- Check if File Already Exists


- Limit File Size and Type

FileUpload.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload Form</title>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<h2>Upload File</h2>
<label for="fileSelect">Filename:</label>
<input type="file" name="photo" id="fileSelect"
<input type="submit" name="submit" value="Upload">
<br>
<br>
<input type="submit" value="Upload Image" name="submit">
<p><strong>Note:</strong> Only .jpg, .jpeg, .gif, .png formats allowed
to a max size of 5 MB.</p>
</form>
</body>
</html>

Upload.php
<?php
// Check if the form was submitted
if($_SERVER["REQUEST_METHOD"] == "POST"){
// Check if file was uploaded without errors
if(isset($_FILES["photo"]) && $_FILES["photo"]["error"] == 0){
$allowed = array("jpg" => "image/jpg", "jpeg" => "image/jpeg", "gif" =>
"image/gif", "png" => "image/png");
$filename = $_FILES["photo"]["name"];
$filetype = $_FILES["photo"]["type"];

Alpha College of Engineering and Technology Department of Information Technology | 64


Web Programming

// Verify file extension


$ext = pathinfo($filename, PATHINFO_EXTENSION);
if(!array_key_exists($ext, $allowed)) die("Error: Please select a valid
file format.");

// Verify file size - 5MB maximum


$maxsize = 5 * 1024 * 1024;
if($filesize > $maxsize) die("Error: File size is larger than the allowed
limit.");

// Verify MYME type of the file


if(in_array($filetype, $allowed)){
// Check whether file exists before uploading it
if(file_exists("upload/" . $_FILES["photo"]["name"])){
echo $_FILES["photo"]["name"] . " is already exists.";
} else{
move_uploaded_file($_FILES["photo"]["tmp_name"], "upload/" .
$_FILES["photo"]["name"]);
echo "Your file was uploaded successfully.";
}
} else{
echo "Error: There was a problem uploading your file. Please try
again.";
}
} else{
echo "Error: " . $_FILES["photo"]["error"];
}
}
?>

Alpha College of Engineering and Technology Department of Information Technology | 65


Web Programming

Output:

Alpha College of Engineering and Technology Department of Information Technology | 66

You might also like