Web Development

JIET-School of Engineering & Technology for Girls (JIET-SETG)
(Session 2014 - 15)

LABORATORY MANUAL
Web Development Lab
Prepared by:
Bhawana Bothara
[Lecturer CSE Dept. JIET SETG]
1 Web Devlopment 7CS7

7CS7 Web Development Lab
Class: VIl Sem. B.Tech. Evaluation
Branch: Computer Engg. Examination Time = Three (3) Hours
Schedule per Week Maximum Marks = 50 [Mid-term (60) & End-term
Practical Hrs: 2 (40)]
S. No. List of Experiment

1 Creation of HTML Files
2 Working with Client Side Scripting : VBScript, JavaScript
3 Configuration of web servers: Apache Web Server, Internet Information Server (IIS)
4 Working with Client Side Scripting : VBScript, JavaScript
5 Working with ActiveX Controls in web documents 5 Experiments in Java Server Pages: Implementing MVC
Architecture using Servlets, Data Access Programming (using ADO), Session and Application objects, File
System Management
6 Working with other Server Side Scripting: Active Server Pages, Java Servlets, PHP
7 Experiments in Ajax Programming
8 Developing Web Services
9 Developing any E-commerce application (Mini Project)
10 Application Development in cloud computing Environment
11 Experiment Using Open Source Tool e.g. ANEKA

Week Wise Schedule Plan Date Actual
Date
Week 1
Basic html and css file creations.
Convert a design into html css site
Week 2
Intro to javascript and jquery
1. Write a program to print “Hello world” in a web page using javascript.
2. Write a program to display a alert box.
3. Write a program to that takes input from user and display it.
4. Write a program to define a simple function in javascript for addition
of two numbers.
5. Write a function in javascript to find odd and even numbers.
6. Write a program in javascript to display day using switch case.
7. Write a program in javascript to add all numbers in array.
8. Write a program for validating a form using javascript.
9. Write a program that uses string functions in javascript.
10. Write a program that uses date object in javascript.
Week 3-4
IIS and Appache
Configure IIS Server and appache server
Week 4
ActiveX control
Week 5-6
1. Create an MVC application using JSP Servelets
2. ADO.Net
3. Create Application object and session in JSP
4. File system management in JSP
Week 7-8
1. Create a small web aplication in asp.
2. Create a small web application in php.
Week 8
AJAX Introduction
1. Write a program to change content using ajax.
2. Write a program to read hint from a php file using AJAX.
3. Write a program to change the text using AJAX JQuery.
Week 9
Web Services
1. Create a web service usin SOAP.
Week 10
Cloud computing online IDE
1. Create a basic application in Salesforce.com
2. Create an application that uses database in salesforce.com

Week11
Aneka Tool Introduction

UNIT – 1
Creation of HTML Files.
What is HTML?
HTML is a markup language for describing web documents (web pages).
 HTML stands for Hyper Text Markup Language
 A markup language is a set of markup tags
 HTML documents are described by HTML tags
 Each HTML tag describes different document content
Some important tags
HTML Headings
Headings are defined with the <h1> to <h6> tags.<h1> defines the most important heading. <h6> defines the
least important heading.
HTML Horizontal Rules

The <hr> tag creates a horizontal line in an HTML page.The hr element can be used to separate content.
The HTML <head> Element

The HTML <head> element has nothing to do with HTML headings.
The HTML <head> element contains meta data. Meta data are not displayed.
The HTML <head> element is placed between the <html> tag and the <body> tag
The HTML <title> Element

The HTML <title> element is meta data. It defines the HTML document's title.
The title will not be displayed in the document, but might be displayed in the browser tab.
HTML Paragraphs
The HTML <p> element defines a paragraph.
HTML Styling
Every HTML element has a default style (background color is white and text color is black).
Changing the default style of an HTML element, can be done with the style attribute.
This example changes the default background color from white to lightgrey:
<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
HTML Text Formatting Elements

Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
HTML Comment Tags

You can add comments to your HTML source by using the following syntax:

HTML Links
In HTML, links are defined with the <a> tag. The href attribute specifies the destination address .The link text is the
visible part (Visit our HTML tutorial).The target attribute specifies where to open the linked document.
This example will open the linked document in a new browser window or in a new tab:
Example
<a href="http://www.test.com/" target="_blank">Visit test!</a>
HTML Images Syntax

In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag. The alt attribute specifies
an alternate text for an image, if the image cannot be displayed.
The src attribute specifies the URL (web address) of the image:
<img src="url" alt="some_text” />
HTML Tables
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.

<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Unordered HTML Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles):
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Assignment 1
1. Write a program which will perform the following tasks:
1. Use of html main tags
2. H1 to h6 tags
3. P , b , I tags
4. Use of br hr
5. Use of hyperlink and image
<html>
<head>
<title>one</title>
</head>

<body>
<h1>one</h1>
<h2>two</h2>
<h3>three</h3>
<p>
<b>This text is bold</b>.
</p>
<hr/>
<p>This is a paragraph.</p>
<br/>
<p>
<strong>This text is strong</strong>.
</p>
<p>
<i>This text is italic</i>.
</p>
<h2>HTML
<small>Small</small> Formatting
</h2>
<p>My favorite
<ins>color</ins> is red.
</p>
<p>This is
<sup>superscripted</sup> text.
</p>
</body>
</html>
2. Write a program to use lists in html.
<html>
<head></head>
<body>
<ul>
<li>on</li>
<li>off</li>
</ul>
<ol>
<li>on</li>
<li>off</li>
</ol>
</body>
</html>
3. Write a program to create table given below.
A B
C D E
F G
<html>
<head></head>
<body>
<table>
<tr>
<td>A</td>
<td colspan=”2”>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
<td rowspan=”2”>E</td>
</tr>
<tr>
<td>F</td>
<td>G</td>
</tr>
</table>
</body>
</html>

UNIT – 2
Client Side Script
What is Javascript?
JavaScript is a scripting language, created for making html-pages live. It turns the web into something more
powerful than just interlinked html pages.It is open and cross-platform.Programs in JavaScript are
called scripts. They need no compilation, you just write a script, append it to HTML-page and it works.
JavaScript can be placed in the <body> and the <head> sections of an HTML page.In HTML, JavaScript code
must be inserted between <script> and </script> tags.
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
JavaScript Functions and Events
A JavaScript function is a block of JavaScript code, that can be executed when "asked" for.
For example, a function can be executed when an event occurs, like when the user clicks a button.
JavaScript Function Syntax

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().
Function names can contain letters, digits, underscores, and dollar signs (same rules as variables). The
parentheses may include parameter names separated by commas: (parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}
function name(parameter1, parameter2, parameter3) {

code to be executed
}
Function Invocation
The code inside the function will execute when "something" invokes (calls) the function:
 When an event occurs (when a user clicks a button)

 When it is invoked (called) from JavaScript code
 Automatically (self invoked)
Function Return
When JavaScript reaches a return statement, the function will stop executing.
If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking
statement.
Functions often compute a return value. The return value is "returned" back to the "caller"
External JavaScript
Scripts can also be placed in external files.
External scripts are practical when the same code is used in many different web pages.
JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the src (source) attribute of the <script> tag:
<script src=”jsfile.js”></script>
JavaScript Display Possibilities
JavaScript can "display" data in different ways:
 Writing into an alert box, using window.alert().

 Writing into the HTML output using document.write().
 Writing into an HTML element, using innerHTML.
 Writing into the browser console, using console.log().
JavaScript Variables
In a programming language, variables are used to store data values.
JavaScript uses the var keyword to define variables.
An equal sign is used to assign values to variables.

JavaScript Arrays
JavaScript arrays are used to store multiple values in a single variable.
var cars = ["Saab", "Volvo", "BMW"];
var cars = new Array("Saab", "Volvo", "BMW");
VB SCRIPT
VBScript is a Microsoft scripting language.
VBScript is a light version of Microsoft's programming language Visual Basic.
VBScript is the default scripting language in ASP (Active Server Pages).
Declaring (Creating) VBScript Variables
Creating variables in VBScript is most often referred to as "declaring" variables.
You can declare VBScript variables with the Dim, Public or the Private statement.
VBScript Sub Procedures
A Sub procedure:
 is a series of statements, enclosed by the Sub and End Sub statements
 can perform actions, but does not return a value
 can take arguments
Sub mysub(argument1,argument2)
some statements
End Sub
VBScript Function Procedures
A Function procedure:

 is a series of statements, enclosed by the Function and End Function statements
 can perform actions and can return a value
 can take arguments that are passed to it by a calling procedure
 without arguments, must include an empty set of parentheses ()
 returns a value by assigning a value to its name
Function myfunction(argument1,argument2)
some statements
myfunction=some value
End Function
Conditional Statements
Conditional statements are used to perform different actions for different decisions.
In VBScript we have four conditional statements:
 If statement - executes a set of code when a condition is true
 If...Then...Else statement - select one of two sets of lines to execute
 If...Then...ElseIf statement - select one of many sets of lines to execute
 Select Case statement - select one of many sets of lines to execute
Looping Statements
Looping statements are used to run the same block of code a specified number of times.
In VBScript we have four looping statements:
 For...Next statement - runs code a specified number of times
 For Each...Next statement - runs code for each item in a collection or each element of an array
 Do...Loop statement - loops while or until a condition is true
 While...Wend statement - Do not use it - use the Do...Loop statement instead
Assignment – 2
1. Write a program to print “Hello world” in a web page using javascript.

<html>
<body>
<script>
document.write("Hello, World! (With JavaScript)") ;
</script>
</body>
</html>
2. Write a program to display a alert box.
<html>
<body>
<script>
alert("Hello, World! (As an alert!)") ;
</script>
</body>
</html>
 Write a program to that takes input from user and display it.
<html>
<body>
<p>Click the button to demonstrate the prompt box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var person = prompt("Please enter your name", "Harry Potter");
if (person != null) {
document.getElementById("demo").innerHTML =
"Hello " + person + "! How are you today?";
}
}
</script>
</body>
</html>

4. Write a program to define a simple function in javascript for addition of two numbers.
<html>
<script>
function addno()
{
var val1 = parseInt(document.getElementById("value1").value);
var z = val1+val2;
alert(z);
}
</script>
<body>
value1 = <input type="text" id="value1" name="value1" value="1"/>
<button onclick="addno()">Try it</button>

</body>
</html>
5. Write a function in javascript to find odd and even numbers.
<html>
<head>
<script type="text/javascript">
function checknumber()
{
if (isNaN(val1))
{
alert("Please Enter a Number");
}
else if (val1 == 0)
{
alert("The number is zero");
}
else if (val1%2==0)
{
alert("The number is odd");
}
else
{

alert("The number is even");
}
}
</script>
</head>
<body>
value2 =<input type=”button” onclick=”checknumber()” />
</body>
</html>
6. Write a program in javascript to display day using switch case.
<html>
<head>
var n=prompt("Enter a number between 1 and 7");
switch (n)
{
case (n="1"):
document.write("Sunday");
break;
case (n="2"):
document.write("Monday");
break;
case (n="3"):
document.write("Tuesday");
break;
case (n="4"):
document.write("Wednesday");break;
case (n="5"):
document.write("Thursday");
break;
case (n="6"):
document.write("Friday");
break;
case (n="7"):
document.write("Saturday");
break;
default:
document.write("Invalid Weekday");

break
}
</script>
</head>
</html>
7. Write a program in javascript to add all numbers in array.
<html>
<head>
<script>
var testa = [1,2,5,6,9,1];
var arrayLength = testa.length;\
var sum = 0;
for (var i = 0; i < arrayLength; i++) {
sum = sum+testa[i];
}
alert(sum);
</script>
</head>
<body>
test
</body>
</html>
8. Write a program for validating a form using javascript.
<html>
<head>
function sub()
{
if(document.getElementById("t1").value == "")
{
alert("Please enter your name");
return false;
}
else if(document.getElementById("t2").value == "")
{
alert("Please enter a password");
return false;

}
else if(document.getElementById("t2").value !=
document.getElementById("t3").value)
{
alert("Please enter correct password");
return false;
}
else if(document.getElementById("t4").value == "")
{
alert("Please enter your address");
return false;
}
else
{
alert("Form has been submitted");
return true;
}
}
</script>
</head>
<body>
<form method="POST">
<p align="center">
User Name:<input name="username" type="text" id="t1"><br><br>
Password:<input name="pass" type="password" id="t2"><br><br>
Confirm Password:<input type="password" id="t3"><br><br>
Address:<textarea rows="2" cols="25" id="t4"></textarea><br><br>
<input type="submit" value="Submit" onclick="return sub()">
<input type="reset" value="Clear All">
</p>
</form>
</body>
</html>
9. Write a program that uses string functions in javascript.

<html>
<head>
var str = "Please locate where 'locate' occurs!";

var pos = str.indexOf("locate");

alert(pos);
var pos = str.lastIndexOf("locate");
alert(pos);
var str = "Apple, Banana, Kiwi";
var res = str.slice(7,13);
alert(res)
</script>
</head>
</body>
</html>
10. Write a program that uses date object in javascript.

<html>
<body>
<p>The internal clock in JavaScript starts at midnight January 1, 1970.</p>

<p>The getTime() function returns the number of milliseconds since then:</p>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getTime();
</script>
</body>
</html>

UNIT – 3
Web Servers
A Web server is a program that, using the client/server model and the World Wide Web's Hypertext
Transfer Protocol ( HTTP ), serves the files that form Web pages to Web users (whose computers contain
HTTP clients that forward their requests). Every computer on the Internet that contains a Web site must have
a Web server program. Two leading Web servers are Apache , the most widely-installed Web server, and
Microsoft's Internet Information Server ( IIS ). Other Web servers include Novell's Web Server for users of its
NetWare operating system and IBM's family of Lotus Domino servers, primarily for IBM's OS/390 and AS/400
customers.
Apache
Apache is a freely available Web server that is distributed under an "open source" license. Version 2.0 runs on
most UNIX-based operating systems (such as Linux, Solaris, Digital UNIX, and AIX), on other UNIX/POSIX-
derived systems (such as Rhapsody, BeOS, and BS2000/OSD), on AmigaOS, and on Windows 2000. According
to a Netcraft (www.netcraft.com) Web server survey 60% of all Web sites on the Internet are using Apache
(62% including Apache derivatives), making Apache more widely used than all other Web servers combined.
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.
1. Download the software from: http://www.apachefriends.org/en/xampp-windows.html#641

Select the Installer option under the Basic Package. You may be taken to a page that presents you with
a bunch of different download locations. Just click one of the download buttons, and then save the file
to your desktop. Once downloaded, the installer works like most Windows installers.
In Internet Explorer, you may get a warning about downloading the file. Click the yellow information
bar that appears above the Web page in IE, and choose Download File…
2. Double-click the .exe file you downloaded.

A window opens, asking you to select the language you’d like to use.
If a warning dialog appears click the "Allow" option to install XAMPP.
3. Choose a language from the menu, and then click OK.

A Setup Wizard window appears, ready to step you through the setup process.
In Vista you may see a message warning you that XAMPP may not work when installed in the
C:\Program Files directory. The default installation is in C:\XAMPP so you don’t have to worry about
this problem.
4. Click the Next button.
The installer suggests putting the application on your main drive at C:\XAMPP. You can pretty much
install it anywhere, but with the Vista operating system you may encounter problems if you install it in
C:\Program Files.
5. Click the Next button once again.

The XAMPP Options window appears (see below). In most cases, it’s fine to leave all the window’s
checkboxes just as you see; see the note below for details.
Check all check boxes.
6. Click Install.
The installer places all the files onto your system. This process takes a while, since a lot of programs
and files are being installed.
7. Finally, click the Finish button.

A window appears “congratulating” you (way to double-click the installer program!), and asking
whether you wish to start the XAMPP Control panel.
8. Click Yes, to open the XAMPP Control Panel (see screenshot below).
The XAMPP Control Panel lets you start and stop the Apache Web server and MySQL database server.

In this figure, both Apache and MySQL are currently NOT running, as indicated by the word Start to the
right of their names. Click the Start buttons to turn the servers on. You can open the Control Panel by
clicking the XAMPP Control Panel shortcut on your desktop.
9. If the buttons to the right of Apache and MySQL say Start, click them to start the Web server and the
MySQL database server.
You probably get a Windows security alert about both MySQL and Apache: Click the Unblock button in
both cases. This action allows the two servers to run, and tells the Windows firewall protection service
that everything is OK.If Apache and MySQL are already running, these buttons say Stop. (Clicking them
turns off the Web server and MySQL.) Whenever you start Apache, PHP automatically starts as well. At
this point, you should have a complete testing server running on your machine. You just need to make
sure it’s working.
10. To do so, launch a Web browser, and, in the Location bar, type http://localhost/.
You encounter a page that lists a bunch of languages; click the language you prefer, and you’re taken
to a kind of Web-based control panel for XAMPP (see screenshot below).

Once installed, you can view your XAMPP home page from http://localhost/xampp/. From the left-hand list of
links, you can access helpful programs and information, such as phpMyAdmin (for working with the MySQL
database) and phpinfo() for finding out more about the server setup.
Once you’ve installed XAMPP, you’ll see a shortcut called XAMPP Control Panel on your desktop. Double-click
this icon to control the servers you’ve just installed—you can turn the servers off and on, as well as turn them
into services (which launch each time you start up your computer).
To uninstall XAMPP, just go to the location where you installed XAMPP (like C:\XAMPP\) and run the program
named Uninstall.exe. This action, however, deletes any databases you created, and destroys any Web pages
that you placed on the server.
IIS
Internet Information Services (IIS, formerly Internet Information Server) is an extensible web server created by
Microsoft for use with Windows NT family.[2] IIS supports HTTP, HTTPS, FTP, FTPS, SMTP and NNTP. It has
been an integral part of the Windows NT family since Windows NT 4.0, though it may be absent from some
editions (e.g. Windows XP Home edition), and is not active by default.

Install and C onfigure IIS on Windows 7
1. First of all, select the Control Panel.

2. In the Programs section, select Turn Windows Features on or off.
3. You might encounter the following screen:
4. Now, simply click on the features that are checked on the following screens and then hit the OK button

5. A progress bar will appear.
6. Once the installation is over, to confirm it, simply type the following URL into your
browser: http://localhost.
7. If installation is successful, then you will see the following screen:
8. Now you can use Internet Information Services Manager to manage and configure IIS. To open IIS
Manager, click Start, type inetmgr in the Search Programs and Files box, and then press Enter.
Managing a Virtual Directory :
Managing a virtual directory includes creating a virtual directory and its all settings. When IIS is installed a
directory named "c:/Inetpub/wwwroot" is created automatically.Any files in this directory will appear as
they're in the root of the web server.using the wwwroot directory fro creating a virtual directory makes a very
poor organisation so try to avoid it.That's why I coosen the second option as below
Making a Virtual directory:
1. Go to run and type inetmgr and press enter. You will get IIS management console as below and do as the
screen shot.

2. Click next.Set alias of your website as you want

3. Click Next and browse the physical path of your application.
4. Set Permissions as we have five options as

 Read: It is most basic and is mandatory to access the webpage of your application.
 Run Scripts: It is required for the aspx pages not for the static HTML pages because aspx pages need
more permissions sp that they could conceivably perform operations.
 Execute: This allows the user to run an ordinary executable file or CGI application. This can be a
security risk so allow when it is really needed.
 Write: It allows to add, modify or remove files from the web server. This should never be allowed.
 Browse: This allows one to retrieve a full list of files in the virtual directory even if the contents of the
file are restricted.It is generally disabled.
5. Right Click on the Virtual Directory and go to properties and clock on create to set it as application

Configure IIS for Windows XP Pro
1. Install IIS 5.1. This is a Windows Add-on available in Windows XP Pro or Windows XP Media
Center editions of Windows XP.
 Open Control Panel from the Start Menu.
 Click on Add or Remove Programs
 Click on Add/Remove Windows Components
 Select Internet Information Services from the Windows Component Wizard
 Select Next. The Wizard may prompt you for your XP Installation Disc.
 IIS 5.1 will now be installed
2. Once it has completely installed you will have to open it (this may be tricky because it doesn't
include any shortcuts on the desktop or in the start menu).
 First go to the Control Panel again and click "Performance and Maintenance" and then
navigate to "Administrative Tools". (For Service Pack 3, click directly on "Administrative
Tools")
 Now you should see "Internet Information Services"; open the program up (You may create
a shortcut on the desktop so it is easier to find).
3. If it opens then congratulations, you have successfully installed it.

Assignment 4
Active X Controls
Introduction
An ActiveX control is an object that supports a customizable, programmatic interface. Using the
methods, events, and properties exposed by a control, Web authors can automate their HTML pages.
Examples of ActiveX Controls include text boxes, command buttons, audio players, video players, stock
tickers, and so on.
You can develop ActiveX Controls using Microsoft Visual Basic, Microsoft Visual C++, and Java.
Assignment 4
1. Write a simple program to display popup using active control in c# asp.net.

Solution : Working on it.

Assignment 5
Java Server Pages(JSP)
Objective : Working with ActiveX Controls in web documents 5 Experiments in Java Server Pages: Implementing MVC
Architecture using Servlets, Data Access Programming (using ADO), Session and Application objects, File System
Management
Java server pages (JSP) is based on java languages and used to develop dynamic web pages JSP was developed
by Sun Microsystems to allow server side development. JSP files are HTML files with special Tags containing
Java source code that provide the dynamic content.JSP provide excellent server side scripting support for
creating database driven web applications. JSP is a java technology which allows developers to create wide
ranges of web services like ecommerce, banking ,corporate intranet banking. JSP combines HTML, XML, Java
Servlet and JavaBeans technologies into one highly productive technology which allow web developers to
develop reliable, high performance and platform independent web applications .
JSP stands for Java Server Pages, it is a kind of server side technology.It is used to host the dynamic data on
the web server and the product of Sun & part of J2EE.But now it is the product of Oracle Corpation.
JSP technology is used to create web application just like Servlet technology. It can be thought of as an
extension to servlet because it provides more functionality than servlet such as expression language, jstl etc.
A JSP page consists of HTML tags and JSP tags. The jsp pages are easier to maintain than servlet because we
can separate designing and development. It provides some additional features such as Expression Language,
Custom Tag etc.
Why Use JSP?
JavaServer Pages often serve the same purpose as programs implemented using the Common Gateway
Interface (CGI). But JSP offer several advantages in comparison with the CGI.
 Performance is significantly better because JSP allows embedding Dynamic Elements in HTML Pages
itself instead of having a separate CGI files.
 JSP are always compiled before it's processed by the server unlike CGI/Perl which requires the server
to load an interpreter and the target script each time the page is requested.
 JavaServer Pages are built on top of the Java Servlets API, so like Servlets, JSP also has access to all the
powerful Enterprise Java APIs, including JDBC, JNDI, EJB, JAXP etc.
 JSP pages can be used in combination with servlets that handle the business logic, the model
supported by Java servlet template engines.

Finally, JSP is an integral part of Java EE, a complete platform for enterprise class applications. This means that
JSP can play a part in the simplest applications to the most complex and demanding.
Advantages of JSP:
Following is the list of other advantages of using JSP over other technologies:
 vs. Active Server Pages (ASP): The advantages of JSP are twofold. First, the dynamic part is written in
Java, not Visual Basic or other MS specific language, so it is more powerful and easier to use. Second, it
is portable to other operating systems and non-Microsoft Web servers.
 vs. Pure Servlets: It is more convenient to write (and to modify!) regular HTML than to have plenty of
println statements that generate the HTML.
 vs. Server-Side Includes (SSI): SSI is really only intended for simple inclusions, not for "real" programs
that use form data, make database connections, and the like.
 vs. JavaScript: JavaScript can generate HTML dynamically on the client but can hardly interact with the
web server to perform complex tasks like database access and image processing etc.
 vs. Static HTML: Regular HTML, of course, cannot contain dynamic information.
JSP - Environment Setup

A development environment is where you would develop your JSP programs, test them and finally run
them.
Setting up Java Development Kit
This step involves downloading an implementation of the Java Software Development Kit (SDK) and
setting up PATH environment variable appropriately.
You can download SDK from Oracle's Java site: Java SE Downloads.
Once you download your Java implementation, follow the given instructions to install and configure
the setup. Finally set PATH and JAVA_HOME environment variables to refer to the directory that
contains java and javac, typically java_install_dir/bin and java_install_dir respectively.
If you are running Windows and installed the SDK in C:\jdk1.5.0_20, you would put the following line in
your C:\autoexec.bat file.
set PATH=C:\jdk1.5.0_20\bin;%PATH%
set JAVA_HOME=C:\jdk1.5.0_20

Alternatively, on Windows NT/2000/XP, you could also right-click on My Computer, select Properties,
then Advanced, then Environment Variables. Then, you would update the PATH value and press the OK
button.
On Unix (Solaris, Linux, etc.), if the SDK is installed in /usr/local/jdk1.5.0_20 and you use the C shell,
you would put the following into your .cshrc file.
setenv PATH /usr/local/jdk1.5.0_20/bin:$PATH
setenv JAVA_HOME /usr/local/jdk1.5.0_20
Alternatively, if you use an Integrated Development Environment (IDE) like Borland JBuilder, Eclipse,
IntelliJ IDEA, or Sun ONE Studio, compile and run a simple program to confirm that the IDE knows
where you installed Java.
Web Server
We will use apache web server.
Setting up CLASSPATH
Since servlets are not part of the Java Platform, Standard Edition, you must identify the servlet classes
to the compiler.
If you are running Windows, you need to put the following lines in your C:\autoexec.bat file.
set CATALINA=C:\apache-tomcat-5.5.29
set CLASSPATH=%CATALINA%\common\lib\jsp-api.jar;%CLASSPATH%
Alternatively, on Windows NT/2000/XP, you could also right-click on My Computer, select Properties,
then Advanced, then Environment Variables. Then, you would update the CLASSPATH value and press
the OK button.
On Unix (Solaris, Linux, etc.), if you are using the C shell, you would put the following lines into your
.cshrc file.
setenv CATALINA=/usr/local/apache-tomcat-5.5.29
setenv CLASSPATH $CATALINA/common/lib/jsp-api.jar:$CLASSPATH
NOTE: Assuming that your development directory is C:\JSPDev (Windows) or /usr/JSPDev (Unix) then
you would need to add these directories as well in CLASSPATH in similar way as you have added above.

Life cycle of a JSP Page
The JSP pages follows these phases:
 Translation of JSP Page
 Compilation of JSP Page
 Classloading (class file is loaded by the classloader)
 Instantiation (Object of the Generated Servlet is created).
 Initialization ( jspInit() method is invoked by the container).
 Reqeust processing ( _jspService() method is invoked by the container).
 Destroy ( jspDestroy() method is invoked by the container).
JSP page is create with write a html code, and save as .jsp extension. We have save this file as index.jsp. Put it
in a folder and paste the folder in the web-apps directory in apache tomcat to run the jsp page.
<html>
<body>
<% out.print(2*5); %>
</body>

</html>
How to run JSP page
These are steps used to run JSP page.
1. Start the server
2. put the jsp file in a folder and deploy on the server
3. visit the browser by the url http://localhost:portno/contextRoot/jspfile
e.g. http://localhost:8888/myapplication/index.jsp
JSP API are two packages define as follows :

1. javax.servlet.jsp
2. javax.servlet.jsp.tagext
In JSP API define javax.servlet.jsp package with two interfaces and classes.The two interfaces are as
follows:
1. JspPage
2. HttpJspPage
And its classes are as follows:
1. JspWriter
2. PageContext
3. JspFactory
4. JspEngineInfo
5. JspException
6. JspError
The JspPage interface

In JSP is generated a servlet classes that implemented the JspPage interface and extends with the
Servlet interface. JSP API is provided two type of life cycle methods.

JSP - Syntax
The Scriptlet:
A scriptlet can contain any number of JAVA language statements, variable or method declarations, or
expressions that are valid in the page scripting language.
Following is the syntax of Scriptlet:
<% code fragment %>
You can write XML equivalent of the above syntax as follows:
<jsp:scriptlet>
code fragment
</jsp:scriptlet>
Any text, HTML tags, or JSP elements you write must be outside the scriptlet. Following is the simple and first
example for JSP:
<html>
<head><title>Hello World</title></head>
<body>
Hello World!<br/>
<%
out.println("Your IP address is " + request.getRemoteAddr());
%>
</body>
</html>

Let us keep above code in JSP file hello.jsp and put this file in C:\apache-tomcat-
7.0.2\webapps\ROOT directory and try to browse it by giving URL http://localhost:8080/hello.jsp. This would
generate following result:
JSP Declarations:
A declaration declares one or more variables or methods that you can use in Java code later in the JSP file. You
must declare the variable or method before you use it in the JSP file.
Following is the syntax of JSP Declarations:
<%! declaration; [ declaration; ]+ ... %>
<jsp:declaration>
code fragment
</jsp:declaration>
Following is the simple example for JSP Declarations:
<%! int i = 0; %>
<%! int a, b, c; %>
<%! Circle a = new Circle(2.0); %>
JSP Expression:
A JSP expression element contains a scripting language expression that is evaluated, converted to a String, and
inserted where the expression appears in the JSP file.
Because the value of an expression is converted to a String, you can use an expression within a line of text,
whether or not it is tagged with HTML, in a JSP file.
The expression element can contain any expression that is valid according to the Java Language Specification
but you cannot use a semicolon to end an expression.
Following is the syntax of JSP Expression:
<%= expression %>
<jsp:expression>
expression
</jsp:expression>
Following is the simple example for JSP Expression:
<html>
<head><title>A Comment Test</title></head>
<body>
<p>
Today's date: <%= (new java.util.Date()).toLocaleString()%>
</p>
</body>
</html>
This would generate following result:
Today's date: 11-Sep-2010 21:24:25

JSP Comments:
JSP comment marks text or statements that the JSP container should ignore. A JSP comment is useful when
you want to hide or "comment out" part of your JSP page.
Following is the syntax of JSP comments:
<%-- This is JSP comment --%>
Following is the simple example for JSP Comments:
<html>
<head><title>A Comment Test</title></head>
<body>
<h2>A Test of Comments</h2>
<%-- This comment will not be visible in the page source --%>
</body>
</html>
This would generate following result:
A Test of Comments
There are a small number of special constructs you can use in various cases to insert comments or characters
that would otherwise be treated specially. Here's a summary:
Syntax Purpose
<%-- comment --%> A JSP comment. Ignored by the JSP engine.
 An HTML comment. Ignored by the browser.
<\% Represents static <% literal.
%\> Represents static %> literal.
\' A single quote in an attribute that uses single quotes.
\" A double quote in an attribute that uses double quotes.

Decision-Making Statements:
The if...else block starts out like an ordinary Scriptlet, but the Scriptlet is closed at each line with HTML text
included between Scriptlet tags.
<%! int day = 3; %>

<html>
<head><title>IF...ELSE Example</title></head>
<body>
<% if (day == 1 | day == 7) { %>
<p> Today is weekend</p>
<% } else { %>
<p> Today is not weekend</p>
<% } %>
</body>
</html>
This would produce following result:
Today is not weekend
Now look at the following switch...case block which has been written a bit differentlty using out.println() and
inside Scriptletas:
<%! int day = 3; %>
<html>
<head><title>SWITCH...CASE Example</title></head>
<body>
<%
switch(day) {
case 0:
out.println("It\'s Sunday.");
break;
case 1:
out.println("It\'s Monday.");
break;

case 2:
out.println("It\'s Tuesday.");
break;
case 3:
out.println("It\'s Wednesday.");
break;
case 4:
out.println("It\'s Thursday.");
break;
case 5:
out.println("It\'s Friday.");
break;
default:
out.println("It's Saturday.");
}
%>
</body>
</html>
This would produce following result:
It's Wednesday.
Loop Statements:
You can also use three basic types of looping blocks in Java: for, while,and do…whileblocks in your JSP
programming.
Let us look at the following for loop example:
<%! int fontSize; %>
<html>
<head><title>FOR LOOP Example</title></head>
<body>
<%for ( fontSize = 1; fontSize <= 3; fontSize++){ %>
<font color="green" size="<%= fontSize %>">
JSP Tutorial
</font><br />
<%}%>
</body>
</html>
Above example can be written using while loop as follows:

<%! int fontSize; %>

<html>
<head><title>WHILE LOOP Example</title></head>
<body>
<%while ( fontSize <= 3){ %>
<font color="green" size="<%= fontSize %>">
JSP Tutorial
</font><br />
<%fontSize++;%>
<%}%>
</body>
</html>
JSP Operators:
JSP supports all the logical and arithmetic operators supported by Java. Following table give a list of all the
operators with the highest precedence appear at the top of the table, those with the lowest appear at the
bottom.
Within an expression, higher precedence operators will be evaluated first.
Category Operator Associativity
Postfix () [] . (dot operator) Left to right
Unary ++ - - ! ~ Right to left
Multiplicative */% Left to right
Additive +- Left to right
Shift >> >>> << Left to right
Relational > >= < <= Left to right
Equality == != Left to right
Bitwise AND & Left to right
Bitwise XOR ^ Left to right
Bitwise OR | Left to right
Logical AND && Left to right
Logical OR || Left to right

Conditional ?: Right to left
Assignment = += -= *= /= %= >>= <<= &= ^= |= Right to left
Comma , Left to right

JSP Literals:
The JSP expression language defines the following literals:
 Boolean: true and false
 Integer: as in Java
 Floating point: as in Java
 String: with single and double quotes; " is escaped as \", ' is escaped as \', and \ is escaped as \\.
 Null: null
How to create a JSP web page in the Netbeans IDE 7.4 using the Tomcat Server 7.0.40.
In a JSP web page in the Netbeans IDE we must do the following three main steps:
1. Start by creating a "Java web" -> "web application project".
2. Create a JSP web file.
3. Last and finally, start the Tomcat Server and deploy the project.
Step 1: Start creating web application project
Step 1(a): Open the Netbeans IDE to start your project.
Step 1(b) : click on file menu and select New Project then select Java Web and then Web Application as
follows.
Then we select "New Project" -> "Java Web" -> "Web Application" as in the following figure:

Step 1(c) :Now click on "Next". A new window is generated with a default project name.
Step 1(d) :A new window is generated for the server and setting and go to the server and click on "Add
server".
Step 1(e) : Then after server path you can see two more options for username and password.This is your
choice whether you want your username and password or you want the default created by the Netbeans IDE.
Now click on "Finish".
After that a window is generated containing the default index.jsp file.

Step 2 Create a JSP Page : Now change some coding in the default JSP page as given below.
index.jsp
Change the title: JSP Web Page
Change the heading: "Welcome To The JSP Web World!" as in the following:
Step 3 Run The Project using Tomcat Server

step 3(a) : At this time we recheck the Tomcat configuratio,then we have to changed the default port number
of Apache Tomcat .After that we need to do the same in the Netbeans IDE.
Then we go to the services menu and then click on "Servers" and then right-click on "Apache Tomcat" and
choose "Properties" as in the following:

Step 3(b) :Then select the server port number that you chose in configuring the Apache Tomcat Server. Since I
can choose port 9999 in Apache Tomcat so it needs to be changed in Netbeans also. As in the following:
Step 3(c): And Now click on close and run the project, after that for running your project right-click on the
project and select "Run" as follows.

Output :
Servlet
Servlet technology is used to create web application (resides at server side and generates dynamic web page).
Servlet technology is robust and scalable because of java language. Before Servlet, CGI (Common Gateway
Interface) scripting language was popular as a server-side programming language. But there was many
disadvantages of this technology. We have discussed these disadvantages below.

There are many interfaces and classes in the servlet API such as Servlet, GenericServlet, HttpServlet,
ServletRequest, ServletResponse etc.
Servlet Terminology
There are some key points that must be known by the servlet programmer like server, container, get
request, post request etc. Let's first discuss these points before starting the servlet technology.
The basic terminology used in servlet are given below:
1. HTTP
2. HTTP Request Types
3. Difference between Get and Post method
4. Container
5. Server and Difference between web server and application server
6. Content Type
7. Introduction of XML
8. Deployment
HTTP (Hyper Text Transfer Protocol)

1. Http is the protocol that allows web servers and browsers to exchange data over the web.
2. It is a request response protocol.
3. Http uses reliable TCP connections bydefault on TCP port 80.
4. It is stateless means each request is considered as the new request. In other words, server doesn't
recognize the user bydefault.

Http Request Methods
Every request has a header that tells the status of the client. There are many request methods. Get and Post
requests are mostly used.
The http request methods are:
 GET
 POST
 HEAD
 PUT
 DELETE
 OPTIONS
 TRACE
HTTP Description
Request
GET Asks to get the resource at the requested URL.
POST Asks the server to accept the body info attached. It is like GET request with extra info sent with
the request.
HEAD Asks for only the header part of whatever a GET would return. Just like GET but with no body.
TRACE Asks for the loopback of the request message, for testing or troubleshooting.
PUT Says to put the enclosed info (the body) at the requested URL.
DELETE Says to delete the resource at the requested URL.
OPTIONS Asks for a list of the HTTP methods to which the thing at the request URL can respond
What is the difference between Get and Post?
There are many differences between the Get and Post request. Let's see these differences:
GET POST

1) In case of Get request, only limited amount of data can In case of post request, large amount of
be sent because data is sent in header. datacan be sent because data is sent in body.
2) Get request is not secured because data is exposed in Post request is secured because data is not
URL bar. exposed in URL bar.
3) Get request can be bookmarked Post request cannot be bookmarked
4) Get request is idempotent. It means second request Post request is non-idempotent

will be ignored until response of first request is delivered.
Anatomy of Get Request
As we know that data is sent in request header in case of get request. It is the default request type. Let's see
what informations are sent to the
server.

Anatomy of Post Request
As we know, in case of post request original data is sent in message body. Let's see how informations are
passed to the server in case of post
request.
Container
It provides runtime environment for JavaEE (j2ee) applications.
It performs many operations that are given below:
1. Life Cycle Management

2. Multithreaded support
3. Object Pooling
4. Security etc.

Server
It is a running program or software that provides services.
There are two types of servers:
1. Web Server
2. Application Server
Web Server
Web server contains only web or servlet container. It can be used for servlet, jsp, struts, jsf etc. It can't be used
for EJB.
Example of Web Servers are: Apache Tomcat and Resin.
Application Server
Application server contains Web and EJB containers. It can be used for servlet, jsp, struts, jsf, ejb etc.
Example of Application Servers are:
1. JBoss Open-source server from JBoss community.

2. Glassfish provided by Sun Microsystem. Now acquired by Oracle.
3. Weblogic provided by Oracle. It more secured.
4. Websphere provided by IBM.
Content Type
Content Type is also known as MIME (Multipurpose internet Mail Extension) Type. It is a HTTP header that
provides the description about what are you sending to the browser.
There are many content types:
 text/html
 text/plain
 application/msword
 application/vnd.ms-excel

 application/jar
 application/pdf
 application/octet-stream
 application/x-zip
 images/jpeg
 video/quicktime etc.
Servlet API
The javax.servlet and javax.servlet.http packages represent interfaces and classes for servlet api.
The javax.servlet package contains many interfaces and classes that are used by the servlet or web container.
These are not specific to any protocol.
The javax.servlet.http package contains interfaces and classes that are responsible for http requests only.
Servlet Interface
Servlet interface provides common behaviour to all the servlets.
Servlet interface needs to be implemented for creating any servlet (either directly or indirectly). It provides 3
life cycle methods that are used to initialize the servlet, to service the requests, and to destroy the servlet and
2 non-life cycle methods.
Methods of Servlet interface
There are 5 methods in Servlet interface. The init, service and destroy are the life cycle methods of servlet.
These are invoked by the web container.
Method Description
public void init(ServletConfig config) initializes the servlet. It is the life cycle method of servlet
and invoked by the web container only once.
public void service(ServletRequest provides response for the incoming request. It is invoked
request,ServletResponse response) at each request by the web container.

public void destroy() is invoked only once and indicates that servlet is being
destroyed.
public ServletConfig getServletConfig() returns the object of ServletConfig.
public String getServletInfo() returns information about servlet such as writer,

copyright, version etc.
GenericServlet class
GenericServlet class implements Servlet, ServletConfig andSerializable interfaces. It provides the

implementaion of all the methods of these interfaces except the service method.
GenericServlet class can handle any type of request so it is protocol-independent.
You may create a generic servlet by inheriting the GenericServlet class and providing the implementation of
the service method.
Methods of GenericServlet class
There are many methods in GenericServlet class. They are as follows:
1. public void init(ServletConfig config) is used to initialize the servlet.

2. public abstract void service(ServletRequest request, ServletResponse response) provides service for
the incoming request. It is invoked at each time when user requests for a servlet.
3. public void destroy() is invoked only once throughout the life cycle and indicates that servlet is being
destroyed.
4. public ServletConfig getServletConfig() returns the object of ServletConfig.
5. public String getServletInfo() returns information about servlet such as writer, copyright, version etc.
6. public void init() it is a convenient method for the servlet programmers, now there is no need to call
super.init(config)
7. public ServletContext getServletContext() returns the object of ServletContext.
8. public String getInitParameter(String name) returns the parameter value for the given parameter
name.
9. public Enumeration getInitParameterNames() returns all the parameters defined in the web.xml file.
10. public String getServletName() returns the name of the servlet object.
11. public void log(String msg) writes the given message in the servlet log file.
12. public void log(String msg,Throwable t) writes the explanatory message in the servlet log file and a
stack trace.

Steps to create a servlet example
There are given 6 steps to create a servlet example. These steps are required for all the servers.
The servlet example can be created by three ways:
1. By implementing Servlet interface,

2. By inheriting GenericServlet class, (or)
3. By inheriting HttpServlet class
The mostly used approach is by extending HttpServlet because it provides http request specific method such
as doGet(), doPost(), doHead() etc.
Here, we are going to use apache tomcat server in this example. The steps are as follows:
1. Create a directory structure

2. Create a Servlet
3. Compile the Servlet
4. Create a deployment descriptor
5. Start the server and deploy the project
6. Access the servlet
Assignment
1. Create an MVC application in JSP using servlet.
Sol:
MVC i.e. Model-View-Controller is a pattern helpful separation of concerns.
 Model represents a POJO object that carries data.

 View is the layer in which the data is presented in visual format.
 Controller is the component which is responsible for communication between model and view.
A user always sees the view and communicates with the controller. We will understand this using a sample login
application which will display a welcome username message and if the login fails, it will redirect to an error page.
Here is what we are going to create.
 login.jsp :- this will input username and password

 success.jsp :- If login is successful, then this page is displayed
 error.jsp :- If login is not successful then this page is displayed.
 LoginController.java :- This is controller part of the application which communicates with model

 Authenticator.java :- Has business logic for authentication
 User.java :- Stores username and password for the user.
Requirements:
 Eclipse IDE
 Apache tomcat server
 JSTL jar
Create a new Dynamic web project in eclipse by clicking File -> New -> Dynamic Web Project. Fill the details i.e.
project name, the server. Enter your project name as “MVCDemo”. You will get the following directory structure for
the project.
Create success.jsp, error.jsp and login.jsp and LoginController servlet, Authenticator class, User class in the packages
as shown in the images. Put the jstl.jar in WEB-INF/lib folder.
Now that we have file structure, put this code in corresponding files.
Code in logincontroller

import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import mvcdemo.model.Authenticator;
import mvcdemo.model.User;
import sun.text.normalizer.ICUBinary.Authenticate;
public class LoginController extends HttpServlet {

private static final long serialVersionUID = 1L;
public LoginController() {
super();
}
protected void doPost(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");

String password = request.getParameter("password");
RequestDispatcher rd = null;
Authenticator authenticator = new Authenticator();

String result = authenticator.authenticate(username, password);
if (result.equals("success")) {
rd = request.getRequestDispatcher("/success.jsp");
User user = new User(username, password);
request.setAttribute("user", user);
} else {
rd = request.getRequestDispatcher("/error.jsp");
}

rd.forward(request, response);
}
Model Authenticator.java code
package mvcdemo.model;
public class Authenticator {
public String authenticate(String username, String password) {
if (("prasad".equalsIgnoreCase(username)) && ("password".equals(password))) {
return "success";
} else {
return "failure";
}
}
}
User.java
package mvcdemo.model;
public class User {

private String username;
private String password;
public User(String username, String password){
this.username = username;
this.password = password;
}
public String getUsername() {return username;}
public void setUsername(String username) {

this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;

}
}
error.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
Login failed, please try again.
</body>
</html>
login.jsp

<html>
<head>
</head>
<body>
<form action="LoginController" method="post">
Enter username : <input type="text" name="username"> <BR>
Enter password : <input type="password" name="password"> <BR>
<input type="submit" />

</form>
</body>
</html>
success.jsp

<html>
<head>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
</head>
<body>
Welcome ${requestScope['user'].username}.
</body>
</html>
web.xml
<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-
app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>MVCDemo</display-name>
<servlet>
<description></description>
<display-name>LoginController</display-name>
<servlet-name>LoginController</servlet-name>
<servlet-class>mvcdemo.controllers.LoginController</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginController</servlet-name>

<url-pattern>/LoginController</url-pattern>
</servlet-mapping>
</web-app>
Start your tomcat server and hit url http://localhost:8080/MVCDemo/login.jsp.
2. Write a program to develop an application that uses ado to access data.

3. Use sessions and application object in jsp.
4. Use file system in jsp.

UNIT – 6
Working with other Server Side Scripting: Active Server
Pages, Java Servlets, PHP
ASP
An Active Server Page (ASP) is an HTML page that includes one or morescripts (small embedded programs)
that are processed on a Microsoft Webserver before the page is sent to the user. An ASP is somewhat similar
to aserver-side include or a common gateway interface (CGI) application in that all involve programs that run
on the server, usually tailoring a page for the user. Typically, the script in the Web page at the server uses
input received as the result of the user's request for the page to access data from adatabase and then builds
or customizes the page on the fly before sending it to the requestor.
1. Open Visual Studio or Microsoft Visual Web Developer Express.

2. On the File menu, click New Web Site.
The New Web Site dialog box appears, as shown in the following illustration:

3. Under Installed Templates, click Visual Basic or C# and then select ASP.NET Web Site.
When you create a Web site project, you specify a template. Each template creates a Web project that
contains different files and folders. In this walkthrough, you are creating a Web site based on
the ASP.NET Web Site template, which creates files and folders that are typically used in ASP.NET Web
sites.
4. In the Web Location box, select File System, and then enter the name of the folder where you want to
keep the pages of your Web site.
For example, type the folder name C:\BasicWebSite.
5. Click OK.
Visual Studio creates a Web project that includes prebuilt functionality for layout (a master page, the
Default.aspx and About.aspx content pages, and a cascading style sheet), for Ajax (client script files),
and for authentication (ASP.NET membership). When a new page is created, by default Visual Studio
displays the page in Source view, where you can see the page's HTML elements. The following
illustration shows what you would see in Source view if you created a new Web page named
FirstWebPage.aspx.

A Tour of the Visual Studio Web Development Environment
Before you proceed with working on the page, it is useful to familiarize yourself with the Visual Studio
development environment. The following illustration shows you the windows and tools that are available in
Visual Studio and Microsoft Visual Web Developer Express.
Note
This diagram shows default windows and window locations. The View menu allows you to display additional windows,
windows to suit your preferences. If changes have already been made to the window arrangement, what you see will n
The Visual Studio environment

To familiarize yourself with the Web designer
 Examine the preceding illustration and match the text to the following list, which describes the most
commonly used windows and tools. (Not all windows and tools that you see are listed here, only those
marked in the preceding illustration.)
o Toolbars. Provide commands for formatting text, finding text, and so on. Some toolbars are
available only when you are working in Design view.
o Solution Explorer window. Displays the files and folders in your Web site.
o Document window. Displays the documents you are working on in tabbed windows. You can
switch between documents by clicking tabs.
o Properties window. Allows you to change settings for the page, HTML elements, controls, and
other objects.
o View tabs. Present you with different views of the same document. Design view is a near-
WYSIWYG editing surface. Source view is the HTML editor for the page. Split view displays both
the Design view and the Source view for the document. You will work with
the Design and Source views later in this walkthrough. If you prefer to open Web pages
in Design view, on the Tools menu, click Options, select the HTML Designer node, and change
the Start Pages In option.
o ToolBox. Provides controls and HTML elements that you can drag onto your
page. Toolbox elements are grouped by common function.
o Server Explorer/Database Explorer. Displays database connections. If Server Explorer is not
visible, on the View menu, click Server Explorer or Database Explorer.
JSP Servelets
Discussed in assignment 5.
PHP
PHP is an acronym for "PHP: Hypertext Preprocessor". PHP is a widely-used, open source scripting
language.PHP scripts are executed on the server.PHP is free to download and use
Basic PHP Syntax

A PHP script can be placed anywhere in the document.
A PHP script starts with <?php and ends with ?>:

<?php
// PHP code goes here
?>
The default file extension for PHP files is ".php".

A PHP file normally contains HTML tags, and some PHP scripting code.
Below, we have an example of a simple PHP file, with a PHP script that uses a built-in PHP function "echo"
to output the text "Hello World!" on a web page:
<!DOCTYPE html>
<html>
<body>
<h1>My first PHP page</h1>
<?php
echo "Hello World!";
?>
</body>
</html>
PHP Arrays
An array stores multiple values in one single variable:
Example
<?php
$cars = array("Volvo", "BMW", "Toyota");
echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
?>
PHP Associative Arrays

Associative arrays are arrays that use named keys that you assign to them.
There are two ways to create an associative array:
$age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");
or:
$age['Peter'] = "35";
$age['Ben'] = "37";
$age['Joe'] = "43";
The named keys can then be used in a script:
Example
<?php
echo "Peter is " . $age['Peter'] . " years old.";
?>
Loop Through an Associative Array

To loop through and print all the values of an associative array, you could use a foreach loop, like this:
Example

<?php
foreach($age as $x => $x_value) {

echo "Key=" . $x . ", Value=" . $x_value;
echo "<br>";
}
?>
ASSIGNMENT - 1
1. CREATE A BASIC WEB PAGE WITH ASP.NET WITH LOGIN FUNCTION?
2. Create a web page using java servlets
3. Create a simple website in php.

UNIT – 7
Assignment 7
Experiments in Ajax Programming
Asynchronous JavaScript and XML.AJAX is an important front-end web technology that lets JavaScript
communicate with a web server. It lets you load new content without leaving the current page,
creating a better, faster experience for your web site's visitors.
Before you continue you should have a basic understanding of the following:
 HTML / XHTML
 CSS
 JavaScript / DOM
How AJAX works?
The keystone of AJAX is the XMLHttpRequest object.
The XMLHttpRequest Object

All modern browsers support the XMLHttpRequest object (IE5 and IE6 use an ActiveXObject).
The XMLHttpRequest object is used to exchange data with a server behind the scenes. This means that
it is possible to update parts of a web page, without reloading the whole page.

Create an XMLHttpRequest Object
All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have a built-in XMLHttpRequest object.
Syntax for creating an XMLHttpRequest object:
variable=new XMLHttpRequest();
Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object:
variable=new ActiveXObject("Microsoft.XMLHTTP");
To handle all modern browsers, including IE5 and IE6, check if the browser supports the
XMLHttpRequest object. If it does, create an XMLHttpRequest object, if not, create an ActiveXObject:
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
Send a Request To a Server
To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object:
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
Method Description
open(method,url,async) Specifies the type of request, the URL, and if the request should be
handled asynchronously or not.
method: the type of request: GET or POST

url: the location of the file on the server
async: true (asynchronous) or false (synchronous)

send(string) Sends the request off to the server.
string: Only used for POST requests
GET or POST?
GET is simpler and faster than POST, and can be used in most cases.
However, always use POST requests when:
 A cached file is not an option (update a file or database on the server)
 Sending a large amount of data to the server (POST has no size limitations)
 Sending user input (which can contain unknown characters), POST is more robust and secure than GET
A simple GET request:

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
In the example above, you may get a cached result.

To avoid this, add a unique ID to the URL:
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();
A simple POST request:

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
To POST data like an HTML form, add an HTTP header with setRequestHeader(). Specify the data you
want to send in the send() method:
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
Method Description
setRequestHeader(header,value) Adds HTTP headers to the request.
header: specifies the header name

value: specifies the header value
The url - A File On a Server

The url parameter of the open() method, is an address to a file on a server:
xmlhttp.open("GET","ajax_test.asp",true);
The file can be any kind of file, like .txt and .xml, or server scripting files like .asp and .php (which can perform
actions on the server before sending the response back).
Asynchronous - True or False?

AJAX stands for Asynchronous JavaScript and XML, and for the XMLHttpRequest object to behave as AJAX, the
async parameter of the open() method has to be set to true:
xmlhttp.open("GET","ajax_test.asp",true);
Server Response
To get the response from a server, use the responseText or responseXML property of the XMLHttpRequest
object.
Property Description
responseText get the response data as a string
responseXML get the response data as XML data
The responseText Property

If the response from the server is not XML, use the responseText property.
The responseText property returns the response as a string, and you can use it accordingly:
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
The onreadystatechange event
When a request to a server is sent, we want to perform some actions based on the response.
 The onreadystatechange event is triggered every time the readyState changes.
 The readyState property holds the status of the XMLHttpRequest.
Three important properties of the XMLHttpRequest object:
Property Description
onreadystatechange Stores a function (or the name of a function) to be called automatically each time the
readyState property changes

readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
status 200: "OK"

404: Page not found
In the onreadystatechange event, we specify what will happen when the server response is ready to be
processed.
When readyState is 4 and status is 200, the response is ready:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
}
}
Using a Callback Function

A callback function is a function passed as a parameter to another function.
If you have more than one AJAX task on your website, you should create ONE standard function for creating
the XMLHttpRequest object, and call this for each AJAX task.
The function call should contain the URL and what to do on onreadystatechange (which is probably different
for each call):
Example
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
{
}

});
}
Assignment 7
4. Write a program to change content using ajax.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
{
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
5. Write a program to read hint from a php file using AJAX.

Index.html file
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "gethint.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>

<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
The PHP File - "gethint.php"

?php
// Array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";
// get the q parameter from URL

$q = $_REQUEST["q"];
$hint = "";
// lookup all hints from array if $q is different from ""

if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
6. Write a program to change the text using AJAX JQuery.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>

UNIT 8
Developing Web Services
Web services are web application components.

Web services can be published, found, and used on the Web.
This unit introduces WSDL, SOAP, RDF, and RSS.
WSDL
 WSDL stands for Web Services Description Language
 WSDL is an XML-based language for describing Web services.
 WSDL is a W3C recommendation
SOAP
 SOAP stands for Simple Object Access Protocol
 SOAP is an XML based protocol for accessing Web Services.
 SOAP is based on XML
 SOAP is a W3C recommendation
RDF
 RDF stands for Resource Description Framework
 RDF is a framework for describing resources on the web
 RDF is written in XML

 RDF is a W3C Recommendation
RSS
 RSS stands for Really Simple Syndication
 RSS allows you to syndicate your site content
 RSS defines an easy way to share and view headlines and content
 RSS files can be automatically updated
 RSS allows personalized views for different sites
 RSS is written in XML
We will use SOAP.
SOAP
Before you study SOAP you should have a basic understanding of XML and XML Namespaces.
What is SOAP?
 SOAP stands for Simple Object Access Protocol
 SOAP is a communication protocol
 SOAP is for communication between applications
 SOAP is a format for sending messages
 SOAP communicates via Internet
 SOAP is platform independent
 SOAP is language independent
 SOAP is based on XML
 SOAP is simple and extensible
 SOAP allows you to get around firewalls
 SOAP is a W3C recommendation
Why SOAP?
It is important for application development to allow Internet communication between programs.
Today's applications communicate using Remote Procedure Calls (RPC) between objects like DCOM and
CORBA, but HTTP was not designed for this. RPC represents a compatibility and security problem; firewalls and
proxy servers will normally block this kind of traffic.
A better way to communicate between applications is over HTTP, because HTTP is supported by all Internet
browsers and servers. SOAP was created to accomplish this.
SOAP provides a way to communicate between applications running on different operating systems, with
different technologies and programming languages.
SOAP is a W3C Recommendation

SOAP became a W3C Recommendation 24. June 2003.
SOAP Building Blocks

A SOAP message is an ordinary XML document containing the following elements:
 An Envelope element that identifies the XML document as a SOAP message
 A Header element that contains header information

 A Body element that contains call and response information
 A Fault element containing errors and status information
Syntax Rules
Here are some important syntax rules:
 A SOAP message MUST be encoded using XML
 A SOAP message MUST use the SOAP Envelope namespace
 A SOAP message MUST use the SOAP Encoding namespace
 A SOAP message must NOT contain a DTD reference
 A SOAP message must NOT contain XML Processing Instructions
<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="http://www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">
<soap:Header>
...
</soap:Header>
<soap:Body>
...
<soap:Fault>
...
</soap:Fault>
</soap:Body>
</soap:Envelope>

UNIT – 9
E-commerce Application
Assignment - 9
1. Develop a small e-commerce application.
This application will have two module front-end and admin panel. Technologies we are using is
PHP, HTML, CSS, Jquery, MYSQL.
Tables :
UserMaster
Admin
ProductMaster
OrderMaster
TransactionMaster
Admin Pages
Login Page
Add Prodcut Page
Change Password Page
View Orders

Log out
Front End Page

Home page
Product page
Login page
Cart page
Check out
Log out
Orders
UNIT -10
Application Development in cloud computing Environment
"Cloud computing" has dramatically changed how business applications are built and run. Delivering a new
application is now as fast as opening your internet browser. Platform as a service-- or PaaS-- is a proven model
for running applications without the hassle of maintaining the hardware and software infrastructure at your
company. Enterprises of all sizes have adopted PaaS solutions like salesforce.com for the simplicity, scalability
and reliability. PaaS applications that always have the latest features without constant upgrade pain.
We will use salesforce.com , Salesforce.com is a cloud computing and social enterprise Software as a Service
provider based in San Francisco. It was founded in March 1999, in part by former Oracle executive Marc
Benioff.
1. Create a simple application in cloud.

Sol:
a. Create an account on http://developer.force.com/join
b.

Step 2: Create an App
Creating the foundation of a basic cloud app with Force.com requires just a few mouse clicks. In this
tutorial, you use the App Quick Start wizard to create an app that can help you manage merchandise
records in a warehouse.
From the Force.com Home page, click the big Add App button in the Getting Started section. (If you're
starting from somewhere else, click <your_name> | Setup to return to the Force.com Home page).
Next, fill in the form as follows to match this screen, then click Create:

Once the wizard finishes, click Go To My App, Start Tour, and follow along for a quick overview of your
app's user interface.
Step 3: Try Out the App
To try out your new app, just click New to create a new record of Merchandise.

Then add a new merchandise record for "Laptop" computers.
2. Build A Cloud Database — Add Fields to an Object

Step 1: Access the New Custom Field Wizard
From the Force.com Quick Access menu (the tab that pops out from the right side of the window),
hover your mouse over View Fields and click +New to switch from your app to theNew Custom
Field wizard that's part of the Force.com development environment.

Note: Alternatively, you can navigate to the New Custom Field wizard by clicking <your_name> | Setup
| Create | Objects, click the Merchandise object, scroll down to Custom Fields and Relationships and
click New.
Step 2: Add the Price Field to the Merchandise Object
The New Custom Field wizard lets you quickly specify everything about a new field, including its name,
labels to use for app pages, help information, and visibility and security settings.
1. For the data type, select Currency and then click Next.
2. Fill in the custom field details as follows:
 Field Label: Price
 Length: 16
 Decimal Places: 2
 Select the Required checkbox to make the field value required.
3. Leave the defaults for the remaining fields, then click Next.
4. Click Next again to accept the default field visibility and security settings.
5. Click Save and New to finish and start the wizard again to add the next field.
Step 3: Add the Quantity Field to the Merchandise Object
Now create a Quantity field in the same manner.
1. Select Number and then click Next.
2. Fill in the custom field details as follows:
 Field Label: Quantity
 Select the Required checkbox.
3. Leave the defaults for the remaining fields, and click Next and Next again.
4. Click Save.
The Merchandise record should now have the following fields.
Step 4: Try Out the App

In the first tutorial, you created one Merchandise record with just a name (Laptop). Edit your first
Merchandise record and create a few more Merchandise records with all of the fields, including the
new Price and Quantity fields.
1. Click the Merchandise tab to leave setup and return to the app.
2. Click Laptop, Edit, then specify Price and Quantity:
 Price: 500
 Quantity: 1000
3. Click Save & New to save the record and start a new record.
Before you move on, take note how Force.com automatically added the new Price and Quantityfields
to the form for editing Merchandise. Your app's user interface is automatically evolving along with your
database. Nice!

Now create two new Merchandise records with the following attributes:
Merchandise Name Price Quantity
Desktop 1000 500
Tablet 300 5000
UNIT – 11
ANEKA TOOL
Aneka is a market oriented Cloud development and management platform with rapid
application development and workload distribution capabilities. Aneka is an integrated
middleware package which allows you to seamlessly build and manage an interconnected
network in addition to accelerating development, deployment and management of distributed
applications using Microsoft .NET frameworks on these networks. It is market oriented since it
allows you to build, schedule, provision and monitor results using pricing, accounting, QoS/SLA
services in private and/or public (leased) network environments.
Aneka is a workload distribution and management platform that accelerates applications in

Microsoft .NET framework environments. Some of the key advantages of Aneka over other
GRID or Cluster based workload distribution solutions include:
 rapid deployment tools and framework,
 ability to harness multiple virtual and/or physical machines for accelerating application
result
 provisioning based on QoS/SLA

 support of multiple programming and application environments
 simultaneous support of multiple run-time environments
 built on-top of Microsoft .NET framework, with support for Linux environments through
Mono

Web Development

Uploaded by

Document Information

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

Web Development

Uploaded by

Copyright:

Available Formats

JIET-School of Engineering & Technology for Girls (JIET-SETG)

(Session 2014 - 15)

1 Web Devlopment 7CS7

S. No. List of Experiment

2 Web Devlopment 7CS7

3 Web Devlopment 7CS7

4 Web Devlopment 7CS7

Some important tags

HTML Horizontal Rules

The HTML <head> Element

The HTML <title> Element

5 Web Devlopment 7CS7

<b> Defines bold text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

HTML Comment Tags

HTML Images Syntax

6 Web Devlopment 7CS7

Unordered HTML Lists

Ordered HTML Lists

7 Web Devlopment 7CS7

9 Web Devlopment 7CS7

JavaScript Functions and Events

JavaScript Function Syntax

function name(parameter1, parameter2, parameter3) {

 When an event occurs (when a user clicks a button)

10 Web Devlopment 7CS7

Scripts can also be placed in external files.

JavaScript files have the file extension .js.

JavaScript Display Possibilities

JavaScript can "display" data in different ways:

 Writing into an alert box, using window.alert().

In a programming language, variables are used to store data values.

JavaScript uses the var keyword to define variables.

An equal sign is used to assign values to variables.

11 Web Devlopment 7CS7

JavaScript arrays are used to store multiple values in a single variable.

var cars = ["Saab", "Volvo", "BMW"];

var cars = new Array("Saab", "Volvo", "BMW");

VBScript is a Microsoft scripting language.

VBScript is a light version of Microsoft's programming language Visual Basic.

VBScript is the default scripting language in ASP (Active Server Pages).

Declaring (Creating) VBScript Variables

Creating variables in VBScript is most often referred to as "declaring" variables.

VBScript Sub Procedures

 is a series of statements, enclosed by the Sub and End Sub statements

 can perform actions, but does not return a value

 can take arguments

VBScript Function Procedures

12 Web Devlopment 7CS7

 can perform actions and can return a value

 can take arguments that are passed to it by a calling procedure

 without arguments, must include an empty set of parentheses ()

 returns a value by assigning a value to its name

In VBScript we have four conditional statements:

 If statement - executes a set of code when a condition is true

 If...Then...Else statement - select one of two sets of lines to execute