Laboratory Manual: Web Engineering

Sagar Institute of Research and Technology, Bhopal
Department of Computer Science & Engineering
LABORATORY MANUAL
For
Web Engineering
[CS-7003]
VII Semester
Submitted To: Submitted By:

Dr. Deepshikha Patel Aniket Bel
Professor 0133CS161029
1
Subject Name/ Subject Code: Web Engineering/ CS-7003

Branch: CSE
Semester: VIIth
INDEX
Sr. No. Name of Experiment Experiment Submission Date Sign
Date
1. Design a HTML form by using
HTML.
2. Design a Website in HTML in
which Audio, Video and
Images are desired.
3. Design a Form by using CSS.
4. Design a registration form and

validate its field by using java
script.
5. Create Cookies and reading
cookies by using java
script/ASP/JSP
6. Design a Webpage using
DHTML.
7. Design a Webpage using PHP.
8. Design a Webpage using ASP.
9. Design a Webpage using JSP.
10. Configuration of web server.
2
EXPERIMENT 1
TITLE: Design a HTML form by using HTML.
<html>
<head>
<title>SIRT College</title>
<meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
</head>
<body>
<fieldset style="width:380px;background-color:silver;border-color:red">
<legend style="background-color:fuchsia;"align="center">REGISTRATION FORM</legend>
<form action="#"method="post">
<table name="registration_table">
<tr>
<td>First Name</td>
<td><input type="text"name="First Name"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text"name="Last Name"></td>
</tr>
<tr>
<td>Gender</td>
<td>Male<input type="radio"name="Gender"value="Male">
Female<input type="radio"name="Gender"value="Female"></td>
</tr>
<tr>
<td>Date Of Birth</td>
<td><input type="text"name="D_O_B"><lable>(DD/MM/YYYY)</lable></td>
</tr>
<tr>
<td>Father's Name</td>
<td><input type="text"name="Father_Name"></td>
</tr>
<tr>
<td>Mother's Name</td>
<td><input type="text"name="Mother_Name"></td>
</tr>
<tr>
<td>Adderss</td>
<td><textarea name="Address"></textarea></td>
</tr>
<tr>
<td>Contact No.</td>
<td><input type="text"name="Contact_No"></td>
</tr>
<br/>
<tr align="center">
<td colspan="2"><input type="submit" name="Submit"/><input type="reset"name="reset"></td>
</tr>
</table>
3
</form>
</fieldset>
</body>
</html>
OUTPUT :
4
EXPERIMENT 2
TITLE: Design a Website in HTML in which Audio, Video and Images are desired.
<html>
<head>
<title>SIRTE College</title>
<meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
</head>
<body>
<img src="images.jpg"><br/>
<embed height="50" width="100" src="horse.mp3"><br/>
<video width="320" height="240" controls autoplay>
<source src="movie.ogg" type="video/ogg">
</video>
</body>
</html>
5
OUTPUT:
6
EXPERIMENT 3
TITLE: Design a Form by using CSS.
Index.html
<!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='validation.css' type='text/css' />
<script src="fvalidation.js"></script>
</head>
<body onload="document.registration.userid.focus();">
<h1>Registration Form</h1>
<p>Use tab keys to move from one input field to the next.</p>
<form name='registration' onSubmit="return formValidation();">
<ul>
<li><label for="userid">User id:</label></li>
<li><input type="text" name="userid" size="12" /></li>
<li><label for="passid">Password:</label></li>
<li><input type="password" name="passid" size="12" /></li>
<li><label for="username">Name:</label></li>
<li><input type="text" name="username" size="50" /></li>
<li><label for="address">Address:</label></li>
<li><input type="text" name="address" size="50" /></li>
<li><label for="country">Country:</label></li>
<li><select name="country">
<option selected="" value="Default">(Please select a country)</option>
<option value="AF">Australia</option>
<option value="AL">Canada</option>
<option value="DZ">India</option>
<option value="AS">Russia</option>
<option value="AD">USA</option>
</select></li>
<li><label for="zip">ZIP Code:</label></li>
<li><input type="text" name="zip" /></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="50" /></li>
<li><label id="gender">Sex:</label></li>
<li><input type="radio" name="sex" value="Male" /><span>Male</span></li>
<li><input type="radio" name="sex" value="Female" /><span>Female</span></li>
<li><label>Language:</label></li>
7
<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><input type="submit" name="submit" value="Submit" /></li>
</ul>
</form>
</body>
</html>
FORM.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;
}
[type="submit"] {
clear: left;
margin: 20px 0 0 230px;
font-size:18px
}
p{
margin-left: 70px;
font-weight: bold;
8
}
OUTPUT:
9
EXPERIMENT 4
TITLE: Design a registration form and validate its field by using java script.
Index.html
<!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='validation.css' type='text/css' />
<script src="fvalidation.js"></script>
</head>
<body onload="document.registration.userid.focus();">
<h1>Registration Form</h1>
<p>Use tab keys to move from one input field to the next.</p>
<form name='registration' onSubmit="return formValidation();">
<ul>
<li><label for="userid">User id:</label></li>
<li><input type="text" name="userid" size="12" /></li>
<li><label for="passid">Password:</label></li>
<li><input type="password" name="passid" size="12" /></li>
<li><label for="username">Name:</label></li>
<li><input type="text" name="username" size="50" /></li>
<li><label for="address">Address:</label></li>
<li><input type="text" name="address" size="50" /></li>
<li><label for="country">Country:</label></li>
<li><select name="country">
<option selected="" value="Default">(Please select a country)</option>
<option value="AF">Australia</option>
<option value="AL">Canada</option>
<option value="DZ">India</option>
<option value="AS">Russia</option>
<option value="AD">USA</option>
</select></li>
<li><label for="zip">ZIP Code:</label></li>
<li><input type="text" name="zip" /></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="50" /></li>
<li><label id="gender">Sex:</label></li>
<li><input type="radio" name="sex" value="Male" /><span>Male</span></li>
<li><input type="radio" name="sex" value="Female" /><span>Female</span></li>
<li><label>Language:</label></li>
<li><input type="checkbox" name="en" value="en" checked /><span>English</span></li>
10
<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>
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;
}
[type="submit"] {
clear: left;
margin: 20px 0 0 230px;
font-size:18px
}
p{
margin-left: 70px;
11
font-weight: bold;
}
Fvalidation.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))
{
}
}
}
}
}
}
}
}
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();
12
return false;
}
return true;
}
function passid_validation(passid,mx,my)
{
var passid_len = passid.value.length;
if (passid_len == 0 ||passid_len >= my || passid_len < mx)
{
alert("Password should not be empty / length be between "+mx+" to "+my);
passid.focus();
return false;
}
return true;
}
function allLetter(uname)
{
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
return true;
}
else
{
alert('Username must have alphabet characters only');
uname.focus();
return false;
}
}
function alphanumeric(uadd)
{
var letters = /^[0-9a-zA-Z]+$/;
if(uadd.value.match(letters))
{
return true;
}
else
{
alert('User address must have alphanumeric characters only');
uadd.focus();
return false;
}
}
function countryselect(ucountry)
13
{
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;
14
if(umsex.checked)
{
x++;
} if(ufsex.checked)
{
x++;
}
if(x==0)
{
alert('Select Male/Female');
umsex.focus();
return false;
}
else
{
alert('Form Successfully Submitted');
window.location.reload()
return true;}
}
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))
{
}
}
15
}
}
}
}
}
}
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))
16
{
return true;
}
else
{
alert('User address must have alphanumeric characters only');
uadd.focus();
return false;
}
}
function countryselect(ucountry)
{
if(ucountry.value == "Default")
{
alert('Select your country from the list');
ucountry.focus();
return false;
}
else
{
return true;
}
}
function allnumeric(uzip)
{
var numbers = /^[0-9]+$/;
if(uzip.value.match(numbers))
{
return true;
}
else
{
alert('ZIP code must have numeric characters only');
uzip.focus();
return false;
}
}
function ValidateEmail(uemail)
{
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();
17
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;
}
}
18
OUTPUT:
19
EXPERIMENT 5
TITLE: Create cookies and reading cookies by using java script/ASP/JSP.
<!DOCTYPE html>
<html>
<head>
<script>
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
{
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1)
{
c_value = null;
}
else
{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1)
{
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
{
alert("Welcome again " + username);
20
}
else
{
username=prompt("Please enter your name:","");
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>
21
22
EXPERIMENT 6
1. TITLE: Design a Webpage using DHTML.
<html>
<head>
<title>Create an alert</title>
</head>
<body>
<h1 id = "para1">My Name is Aniket</h1>
<input type = "Submit" onclick = "Click()"/>
<script style = "text/javascript">
function Click() {
document.getElementById("para1").style.color = "#009900";
window.alert("Color changed to green");
}
</script>
</body>
</html>
OUTPUT:
Before Click
On Click
After Click
23
EXPERIMENT 7
1. TITLE: Design a Webpage using PHP.
<!DOCTYPE html>
<html lang="en">
<head>
<title>PHP switch-case Statement</title>
</head>
<body>
<?php
$today = date("D");
switch($today){
case "Mon":
echo "Today is Monday. Clean your house.";
break;
case "Tue":
echo "Today is Tuesday. Buy some food.";
break;
case "Wed":
echo "Today is Wednesday. Visit a doctor.";
break;
case "Thu":
echo "Today is Thursday. Repair your car.";
break;
case "Fri":
echo "Today is Friday. Party tonight.";
break;
case "Sat":
echo "Today is Saturday. Its movie time.";
break;
case "Sun":
echo "Today is Sunday. Do some rest.";
break;
default:
echo "No information available for that day.";
break;
}
?>
</body>
</html>
OUTPUT:
Today is Sunday. Do some rest.
24
EXPERIMENT 8
1. TITLE: Design a Webpage using ASP.
<!DOCTYPE html>
<html>
<body>
@{
if (IsPost)
{
string companyname = Request["CompanyName"];
string contactname = Request["ContactName"];
<p>You entered: <br>
Company Name: @companyname <br>
Contact Name: @contactname </p>
}
else
{
<form method="post" action="">
Company Name:<br>
<input type="text" name="CompanyName" value=""><br>
Contact Name:<br><br>
<input type="text" name="ContactName" value=""><br><br>
<input type="submit" value="Submit" class="submit">
</form>
}
}
</body>
</html>
OUTPUT:
Before Click
After Click
25
EXPERIMENT 9
TITLE: Design a Webpage using JSP.
HTML Page:
<html>
<head>
<title>JSP Demo</title>
</head>
<body><center>
<form action="welcome.jsp">
<b>Enter your name:</b><input type="text" name="username"><br>
<input type="submit" value="submit">
</form>
</center>
</body>
</html>
JSP Pages:
1: welcome.jsp
<html>
<head>
<title>Welcome Page</title>
</head>
<body><center>
<%
String user=request.getParameter("username");
%>
<h3>Welcome To Home Page Dear <%= user %></h3> <br>
<%@ include file="showdate.jsp" %>
</center>
</body>
</html>
26
2:showdate.jsp
<%@page import="java.util.*,java.text.*" %>

<%
Date today=new Date();

SimpleDateFormat sdf=new SimpleDateFormat("dd-MMM-yyyy");
String str=sdf.format(today);
%>
Current System Date is :<%= str %>
OUTPUT:
Before Click:
After Click
27
EXPERIMENT 10
TITLE: Configuration of web server.
What is a Web Server?
A web server is software that listens for requests and returns data (usually a file). When you
type “www.mysite.com”, the request is forwarded to a machine running web server software
which returns a file back to your browser, e.g. the contents of index.html. The browser might
then make further requests based on the HTML content, e.g. CSS, JavaScript, and graphic files.
Since the web server sits between your browser and the requested file, it can perform
processing that is not possible by opening an HTML file directly. For example, it can parse PHP
code which connects to a database and returns data.
You can use your host’s web server for testing, but uploading will become tiresome and
changes could go live before they had been fully tested. What you need is a local web server
installation.
Why Apache?
In general, I would recommend using the web server software that your web host uses. Unless
you are creating ASP.NET applications on Microsoft IIS, your host is likely to use Apache: the
most widespread and fully-featured web server available. It is open-source project so it does
not cost anything to download or install.
The following instructions describe how to install Apache on Windows. Mac OSX comes with
Apache and PHP, although you might need to enable them. Most Linux users will have Apache
pre-installed or available in the base repositories.
All-in-One packages
There are some excellent all-in-one Windows distributions that contain Apache, PHP, MySQL
and other applications in a single installation file, e.g. XAMPP (including a Mac
version), WampServer and Web.Developer. There is nothing wrong with using these packages,
although manually installing Apache will help you learn more about the system and its
configuration options.
28
The Apache Installation Wizard
An excellent official .msi installation wizard is available from the Apache download page. This
option is certainly recommended for novice users or perhaps those installing Apache for the
first time.
Manual Installation
Manual installation offers several benefits:
 backing up, reinstalling, or moving the web server can be achieved in seconds (see 8 Tips
for Surviving PC Failure)
 you have more control over how and when Apache starts
 you can install Apache anywhere, such as a portable USB drive (useful for client
demonstrations).
Step 1: configure IIS, Skype and other software (optional)
If you have a Professional or Server version of Windows, you may already have IIS installed. If
you would prefer Apache, either remove IIS as a Windows component or disable its services.
Apache listens for requests on TCP/IP port 80. The default installation of Skype also listens on
this port and will cause conflicts. To switch it off, start Skype and choose Tools > Options >
Advanced > Connection. Ensure you untick “Use port 80 and 443 as alternatives for incoming
connections”.
Step 2: download the files
We are going to use the unofficial Windows binary from Apache Lounge. This version has
performance and stability improvements over the official Apache distribution, although I am yet
to notice a significant difference. However, it is provided as a manually install-able ZIP file
from www.apachelounge.com/download/
You should also download and install the Windows C++ runtime from Microsoft.com. You may
have this installed already, but there is no harm installing it again.
As always, remember to virus scan all downloads.
Step 2: extract the files
We will install Apache in C:Apache2, so extract the ZIP file to the root of the C: drive.
29
Apache can be installed anywhere on your system, but you will need to change the
configuration file paths accordingly…
Step 3: configure Apache
Apache is configured with the text file confhttpd.conf contained in the Apache folder. Open it
with your favourite text editor.
Note that all file path settings use a ‘/’ forward-slash rather than the Windows backslash. If you
installed Apache anywhere other than C:Apache2, now is a good time to search and replace all
references to “c:/Apache2”.
There are several lines you should change for your production environment:
Line 46, listen to all requests on port 80:
Listen *:80
Line 116, enable mod-rewrite by removing the # (optional, but useful):
LoadModule rewrite_module modules/mod_rewrite.so
Line 172, specify the server domain name:
ServerName localhost:80
Line 224, allow .htaccess overrides:
AllowOverride All
Step 4: change the web page root (optional)
By default, Apache return files found in its htdocs folder. I would recommend using a folder on
an another drive or partition to make backups and re-installation easier. For the purposes of
this example, we will create a folder called E:ApacheTomcat and change httpd.conf accordingly:
Line 179, set the root:
DocumentRoot "E:/ApacheTomcat"
and line 204:
<Directory "D:/WebPages">
30
Step 5: test your installation
Your Apache configuration can now be tested. Open a command box (Start > Run > cmd) and
enter:
cd Apache2bin
httpd -t
Correct any httpd.conf configuration errors and retest until none appear.
Step 6: install Apache as a Windows service
The easiest way to start Apache is to add it as a Windows service. From a command prompt,
enter:
cd Apache2bin
httpd -k install
Open the Control Panel, Administrative Tools, then Services and double-click Apache2.2. Set the
Startup type to “Automatic” to ensure Apache starts every time you boot your PC.
Alternatively, set the Startup type to “Manual” and launch Apache whenever you choose using
the command “net start Apache2.2”.
Step 7: test the web server
Create a file named index.html in Apache’s web page root (either htdocs or D:WebPages) and
add a little HTML code:
<html>
<head><title>testing Apache</title></head>
<body><p>Apache is working!</p></body>
31
</html>
Ensure Apache has started successfully, open a web browser and enter the
address http://localhost/. If all goes well, your test page should appear.
In general, most problems will be caused by an incorrect setting in the httpd.conf configuration
file.
32

Laboratory Manual: Web Engineering

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Laboratory Manual: Web Engineering

Uploaded by

Copyright:

Available Formats

Sagar Institute of Research and Technology, Bhopal

Department of Computer Science & Engineering

Submitted To: Submitted By:

Subject Name/ Subject Code: Web Engineering/ CS-7003

4. Design a registration form and

TITLE: Design a HTML form by using HTML.

TITLE: Design a Form by using CSS.

form ul li input, select, span {

form ul li input, select, span {

TITLE: Create cookies and reading cookies by using java script/ASP/JSP.

1. TITLE: Design a Webpage using DHTML.

1. TITLE: Design a Webpage using PHP.

Today is Sunday. Do some rest.

1. TITLE: Design a Webpage using ASP.

TITLE: Design a Webpage using JSP.

<%@page import="java.util.*,java.text.*" %>

Date today=new Date();

Current System Date is :<%= str %>

TITLE: Configuration of web server.

What is a Web Server?

Manual installation offers several benefits:

Step 2: download the files

As always, remember to virus scan all downloads.

Step 2: extract the files

Step 3: configure Apache

Line 46, listen to all requests on port 80:

Line 116, enable mod-rewrite by removing the # (optional, but useful):

LoadModule rewrite_module modules/mod_rewrite.so

Line 172, specify the server domain name:

Line 224, allow .htaccess overrides:

Step 4: change the web page root (optional)

Line 179, set the root:

and line 204:

Step 6: install Apache as a Windows service

Step 7: test the web server

You might also like

<%@page import="java.util.,java.text." %>