Você está na página 1de 32

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
Sagar Institute of Research and Technology, Bhopal

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
Sagar Institute of Research and Technology, Bhopal
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
Sagar Institute of Research and Technology, Bhopal
</form>
</fieldset>
</body>
</html>

OUTPUT :

4
Sagar Institute of Research and Technology, Bhopal
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
Sagar Institute of Research and Technology, Bhopal
OUTPUT:

6
Sagar Institute of Research and Technology, Bhopal
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
Sagar Institute of Research and Technology, Bhopal
<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
Sagar Institute of Research and Technology, Bhopal
}

OUTPUT:

9
Sagar Institute of Research and Technology, Bhopal
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
Sagar Institute of Research and Technology, Bhopal
<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
Sagar Institute of Research and Technology, Bhopal
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
Sagar Institute of Research and Technology, Bhopal
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
Sagar Institute of Research and Technology, Bhopal
{
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
Sagar Institute of Research and Technology, Bhopal
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
Sagar Institute of Research and Technology, Bhopal
}
}
}
}
}
}
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
Sagar Institute of Research and Technology, Bhopal
{
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
Sagar Institute of Research and Technology, Bhopal
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
Sagar Institute of Research and Technology, Bhopal
OUTPUT:

19
Sagar Institute of Research and Technology, Bhopal
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
Sagar Institute of Research and Technology, Bhopal
}
else
{
username=prompt("Please enter your name:","");
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>

21
Sagar Institute of Research and Technology, Bhopal

22
Sagar Institute of Research and Technology, Bhopal
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
Sagar Institute of Research and Technology, Bhopal
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
Sagar Institute of Research and Technology, Bhopal
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
Sagar Institute of Research and Technology, Bhopal
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
Sagar Institute of Research and Technology, Bhopal

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
Sagar Institute of Research and Technology, Bhopal
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
Sagar Institute of Research and Technology, Bhopal
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
Sagar Institute of Research and Technology, Bhopal
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
Sagar Institute of Research and Technology, Bhopal
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
Sagar Institute of Research and Technology, Bhopal
</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