Subject Name- WT Lab Class/Branch: TE Computer Engineering

Assignment No: 1
Problem Statement: Case study: Before coding of the website, planning is important,
students should visit different websites (Min. 5) for the different client projects and
note down the evaluation results for these websites, either good website or bad
website in following format:
Sr.No Website Purpose of Liked Disliked Evaluation
URL Website

From the evaluation, students should learn and conclude different website design
issues, which should be considered while developing a website.
Objectives: To learn the web based development environment.
Outcome: Students will be able to understand the importance of website planning and
website design issues .
Software & Hardware Requirments:
Operating System: Ubuntu
Hardware: i3 Processor, 4GB RAM, 500GB HDD

Theory:
1. Introduction
1.1 Internet and WWW
The Internet is the global system of interconnected computer networks that use the
Internet protocol suite (TCP/IP) to link devices worldwide.
It is a network of networks that consists of private, public, academic, business, and
government networks of local to global scope, linked by a broad array of electronic,
wireless, and optical networking technologies.
The Internet carries a vast range of information resources and services, such as the
inter-linked hypertext documents and applications of the World Wide Web (WWW),
electronic mail, telephony, and file sharing.
The World Wide Web (abbreviated WWW or the Web) is an information space
where documents and other web resources are identified by Uniform Resource
Locators (URLs), interlinked by hypertext links, and can be accessed via the Internet.
Web pages are primarily text documents formatted and annotated with Hypertext
Markup Language.
Department of Computer Engineering
PCET’s PCCOER, Pune-412101 Page1
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

1.2 Advantages of the Internet

1. Online Banking and Transaction: The Internet allows us to transfer money online
by the net banking system. Money can be credited or Debited from one account to
the other.
2. Education, online jobs, freelancing: Through the Internet, we are able to get more
jobs via online platforms like Linkedin and to reach more job providers. Freelancing
on the other hand has helped the youth to earn a side income and the best part is all
this can be done via INTERNET.
3. Entertainment: There are numerous options of entertainment online we can listen to
music, play games can watch movies, web series, listening to podcasts, youtube itself
is a hub of knowledge as well as entertainment.
4. New Job roles: The Internet has given us access to social media, and digital products
so we are having numerous new job opportunities like digital marketing and social
media marketing online businesses are earning huge amounts of money just because
the internet being the medium to help us to do so.
5. Best Communication Medium: The communication barrier has been removed from
the Internet. You can send messages via email, Whatsapp, and Facebook. Voice
chatting and video conferencing are also available to help you to do important
meetings online.
6. Comfort to humans: Without putting any physical effort you can do so many things
like shopping online it can be anything from stationaries to clothes, books to
personal items, etc. You can books train and plane tickets online.
7. GPS Tracking and google maps: Yet another advantage of the internet is that you
are able to find any road in any direction, areas with less traffic with the help of GPS
in your mobile.
1.3 Disadvantages of the Internet
1. Time wastage: Wasting too much time on the internet surfing on social media apps
and doing nothing decreases your productivity rather than wasting time on scrolling
social media apps one should utilize that time in doing something skillful and even
more productive.
2. Bad impacts on health: Spending too much time on the internet causes bad impacts
on your health physical body needs some outdoor games exercise and many more
things. Looking at the screen for a longer duration causes serious impacts on the
eyes.
3. Cyber Crimes: Cyberbullying, spam, viruses, hacking, and stealing data are some of
the crimes which are on the verge these days. Your system which contains all the
confidential data can be easily hacked by cybercriminals.
4. Effects on children: Small children are heavily addicted to the Internet watching
movies, games all the time is not good for their overall personality as well as social
development.
5. Bullying and spreading negativity: The Internet has given a free tool in the form of
social media apps to all those people who always try to spread negativity with very
revolting and shameful messages and try to bully each other which is wrong.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page2
Subject Name- WT Lab Class/Branch: TE Computer Engineering

2. Web site planning and design issues

Main technical issues in web design
Before you create a website, you should consider the technical issues relating to web
design, specifically:
2.1. Browser issues
WebPages should be able to display across different browsers, including Internet
Explorer, Firefox, Safari and Chrome.
2.2. Screen resolutions
The most common screen resolution is 1024 x 768 pixels, although there is a growing
trend towards higher resolutions. If you design your website for a higher resolution,
some low-resolution screens may not be able to display all of the content.
It is worth keeping in mind from the start your mobile users. Consider how your site
will appear when it is accessed from mobile devices.
2.3 Download speeds
Not all internet users have high-speed access, so connection speed should also
influence your webpage design. Research suggests that:
• nearly half of web users expect a webpage to load in 2 seconds or less
• 40 per cent of people abandon a website that takes more than 3 seconds to
load
Too many images or rich media - such as animations or video - will slow down the
speed at which your webpage loads. This can result in your customers leaving the
site. Since page speed is a ranking factor, slow speeds can also hurt your search
ranking.
Try to keep file and image sizes to a minimum. The total size of a webpage should be
no more than 40 to 60 kilobytes.
2.4 Technology
Some web technologies can prevent users from viewing your site or affect indexing
of your website by search engines. These include:
• HTML frames
• JavaScript
• Flash
• AJAX
If using any of these technologies, consider the potential risks to the usability and
accessibility of your website.
2.5 What must your website deliver for you?
Defining the objectives of your website is vital. If you are a startup, ideally you
should have some preliminary ideas before you talk to a web design house; if you
are re-working or completely redesigning your website then you probably have
some idea of what went right, what went wrong and where it should go in the
future.
The following are typical objectives for a website:
Department of Computer Engineering
PCET’s PCCOER, Pune-412101 Page3
Subject Name- WT Lab Class/Branch: TE Computer Engineering

• Brochure - showing what you do: goods and services

• Commerce - selling goods or services
• CRM - keeping the customer happy, encouraging return visits
• Decision support - helping the prospect decide what to buy (this can be for
both online and offline sales)
• Product support - increase effectiveness and reduce costs of supporting
your wares and services
• Extranet - ring-fenced area for resellers, partners, etc to transact business
or run a virtual office
• Intranets - typically remote working on centrally-held files or updating
timesheets of staff working away
• Reference - provision of (usually) non-commercial data like technical
specifications, statistics or reports
• A combination of the above.
Within each of the above items there is usually a set of sub-objectives.

2.6 Budgeting
The budget has to cover (at the very least):
• Planning - setting out requirements and perhaps a specification
• Design
• Implementation - including databases, associated support software,
integration with existing systems
• Testing - both functional and cross-platform compatibility
• Launch - deployment of component parts, website configuration
• Operational costs - hosting, marketing, CRM, secure certificate
• Website content management - in-house, out-of-house.
Frequently thought is only given to the design element, but some websites may
require web forms, databases, and perhaps integration with an existing sales order
processing system. Some calculation has to be done on the likely returns on
investment for a commercial website to keep the expenditure appropriate.
2.7 Commerce
There are specific issues with commerce that can cause problems. Apart from selling
something downloadable like software or reports (which are infinitely available) any
other system has to take account of stock either in-house or from a wholesaler. Even
selling software presents its own issues because a number of people making a
simultaneous download of a 25Mb app may have a serious impact on the
performance of the server, not just for the visitors doing the downloads, but also for
any others visiting the website.
Some of the issues are:

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page4
Subject Name- WT Lab Class/Branch: TE Computer Engineering

• Shopping systems - product management, price list management, baskets,

special offers, affiliate schemes
• Payment handling - credit card, payment service provider, credit transfer
and whether manual or automatic
• Credit card transactions - merchant ID, AVS (address verification system)
• Secure certificates
• Drop shipping - shipping directly from a wholesaler
• Integration with your existing sales order processing system
• Serial number management (software sales only)
• VAT processing - place of supply, place of delivery considerations, EU
issues
• Terms and conditions, copyright, privacy policy and securing 'personal
information'.

2.8 Operational Planning Issue

Where are you going to host your website? The USA can be apparently cheap but if
your market is mostly based in the Europe or Australia it takes longer to get pages,
images, etc down submarine cables to your visitors and this can have a perceptible
effect on website performance. Studies have shown that this affects sales.
If it's likely that your website traffic will have large peaks (hundreds of thousands or
millions of pages per hour) followed by quiescent periods, then you should consider
a scalable solution in the 'cloud'.

Conclusion:
Hence, we have successfully visited different website and identified different issues
in that website.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page5
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Assignment No: 2
Problem Statement: Implement a web page index.htm for any client website (e.g., a
restaurant website project) using following:
a. HTML syntax: heading tags, basic tags and attributes, frames, tables, images, lists,
links for text and images, forms etc.
b. Use of Internal CSS, Inline CSS, External CSS
Objectives: To use client side and server side web technologies.
Outcome: Apply the client side and server side technologies for web application
development
Software & Hardware Requirments:
Operating System: Ubuntu
Software: Gedit
Browser: Mozilla/Google Chrome
Hardware: i3 Processor, 4GB RAM, 500GB HDD

Theory:
1. HTML:
HTML stands for Hyper Text Markup Language, which is the most widely used language
on Web to develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML
2.0" was the first standard HTML specification which was published in 1995. HTML 4.01
was a major version of HTML and it was published in late 1999. Though HTML 4.01 version
is widely used but currently we are having HTML-5 version which is an extension to HTML
4.01, and this version was published in 2012.
● Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
● As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to structure
it to display.
1.1 Basic HTML Document
<!DOCTYPE html>

<html>

<head>

<title>This is document title</title>

</head>

<body>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page6
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

<h1>This is a heading</h1>

<p>Document content goes here.....</p>

</body>

</html>

Tag & Description

<!DOCTYPE...> This tag defines the document type and HTML version.

<html> This tag encloses the complete HTML document and mainly comprises of
document header which is represented by <head>...</head> and document body which is
represented by <body>...</body> tags.

<head> This tag represents the document's header which can keep other HTML tags like
<title>, <link> etc.

<title> The <title> tag is used inside the <head> tag to mention the document title.

<body> This tag represents the document's body which keeps other HTML tags like <h1>,
<div>, <p> etc.

<h1> This tag represents the heading.

<p> This tag represents a paragraph.

1.2 HTML - Basic Tags
1.2.1 Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML
also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>. While displaying any heading, browser adds one line before and one line
after that heading.
<body> This is heading 1
This is heading 2
<h1>This is heading 1</h1> This is heading 3
<h2>This is heading 2</h2> This is heading 4
<h3>This is heading 3</h3> This is heading 5
This is heading 6
<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page7
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

</body>

1.2.2 Paragraph Tag

The <p> tag offers a way to structure your text into different paragraphs. Each
paragraph of text should go in between an opening <p> and a closing </p> tag
as shown below in the example −
<body>

<p>Here is a first paragraph of text.</p>

<p>Here is a second paragraph of text.</p>

<p>Here is a third paragraph of text.</p>

</body>

1.2.3 Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next line. This
tag is an example of an emptyelement, where you do not need opening and closing tags, as
there is nothing to go in between them.
You delivered your assignment ontime.<br />

1.2.4 Centering Content

You can use <center> tag to put any content in the center of the page or any table cell.
<center>
<p>This text is in the center.</p>
</center>

1.2.5 Horizontal Lines

Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a
line from the current position in the document to the right margin and breaks the line
accordingly.
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
1.3 HTML - Colors
Colors are very important to give a good look and feel to your website. You can specify
colors on page level using <body> tag or you can set colors for individual tags
using bgcolor attribute.
Department of Computer Engineering
PCET’s PCCOER, Pune-412101 Page8
Subject Name- WT Lab Class/Branch: TE Computer Engineering

The <body> tag has following attributes which can be used to set different
colors −
● bgcolor − sets a color for the background of the page.
● text − sets a color for the body text.
● alink − sets a color for active links or selected links.
● link − sets a color for linked text.
● vlink − sets a color for visited links − that is, for linked text that you have
already clicked on.

1.3.1 HTML Color Coding Methods

There are following three different methods to set colors in your web page.
● Color names − You can specify color names directly like green, blue or
red.
● Hex codes − A six-digit code representing the amount of red, green, and
blue that makes up the color.
● Color decimal or percentage values − This value is specified using the rgb( )
property.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page9
Subject Name- WT Lab Class/Branch: TE Computer Engineering

1.3.2 Color Names

You can specify direct a color name to set text or background color. W3C has listed 16 basic
color names that will validate with an HTML validator but there are over 200 different color
names supported by major browsers.
<body text = "blue" bgcolor = "green">
<p>Use different color names for for body and table and see the result.</p>
<table bgcolor = "black">
<tr>
<td>
<font color = "white">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>

1.3.4 Hex Codes

A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red
value, the next two are a green value(GG), and the last are the blue value(BB).
<body text = "#0000FF" bgcolor = "#00FF00">
<p>Use different color hexa for body and table and see the result.</p>
<table bgcolor = "#000000">
<tr>
<td>
<font color = "#FFFFFF">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>

1.3.5 RGB Values

This color value is specified using the rgb( ) property. This property takes three values, one
each for red, green, and blue. The value can be an integer between 0 and 255 or a percentage.
<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
<p>Use different color code for for body and table and see the result.</p>
<table bgcolor = "rgb(0,0,0)">
<tr>
<td>
<font color = "rgb(255,255,255)">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page10
Subject Name- WT Lab Class/Branch: TE Computer Engineering

1.4 Fonts
The font tag is having three attributes called size, color, and face to customize your fonts. To
change any of the font attributes at any time within your webpage, simply use the <font> tag.
The text that follows will remain changed until you close with the </font> tag. You can
change one or all of the font attributes within one <font> tag.

1.4.1 Set Font Size

You can set content font size using size attribute. The range of accepted values is from
1(smallest) to 7(largest). The default size of a font is 3.
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>

1.4.2 Relative Font Size

You can specify how many sizes larger or how many sizes smaller than the preset font size
should be. You can specify it like <font size = "+n"> or <font size = "−n">
<body>
<font size = "-1">Font size = "-1"</font><br />
<font size = "+1">Font size = "+1"</font><br />
<font size = "+2">Font size = "+2"</font><br />
<font size = "+3">Font size = "+3"</font><br />
<font size = "+4">Font size = "+4"</font>
</body>

1.4.3 Setting Font Face

You can set font face using face attribute but be aware that if the user viewing the page
doesn't have the font installed, they will not be able to see it. Instead user will see the default
font face applicable to the user's computer.
<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page11
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

2. CSS
2.1 What is CSS?
● CSS stands for Cascading Style Sheets
● CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
● CSS saves a lot of work. It can control the layout of multiple web pages all at once
● External stylesheets are stored in CSS files
● CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.

2.2 CSS Syntax:

A CSS rule-set consists of a selector and a declaration block:

● The selector points to the HTML element you want to style.

● The declaration block contains one or more declarations separated by semicolons.
● Each declaration includes a CSS property name and a value, separated by a colon.
● A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.

2.3 CSS Selectors:

CSS selectors are used to "find" (or select) HTML elements based on their element name, id,
class, attribute, and more.

2.3.1 The element Selector

The element selector selects elements based on the element name. You can select all <p>
elements on a page like this (in this case, all <p> elements will be center-aligned, with a red
text color):
<!DOCTYPE html>

<html><head>

<style>

p{

color: red;

text-align: center;

</style>

</head>

<body>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page12
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>

</body>

</html>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page13
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

2.3.2 The id Selector

The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one
unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
The style rule below will be applied to the HTML element with id="para1".

<!DOCTYPE html>

<html>

<head>

<style>

#para1 {

text-align: center;

color: red;

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the

style.</p>

</body>

</html>

2.3.3 The class Selector:

The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of
the class.
In the example below, all HTML elements with class="center" will be red and center-aligned.

<!DOCTYPE html>

<html><head>

<style>

.center {

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page14
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

text-align: center;

color: red;

</style>

</head>

<body>

<h1 class="center">Red and center-aligned

heading</h1>

<p class="center">Red and center-aligned

paragraph.</p>

</body></html>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page15
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

2.4 Types:
2.4.1 External Style Sheet:
With an external style sheet, you can change the look of an entire website by changing just
one file. An external style sheet can be written in any text editor. The file should not contain
any html tags. The style sheet file must be saved with a .css extension. Each page must
include a reference to the external style sheet file inside the <link> element. The <link>
element goes inside the <head> section:
mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

<html>

<head>

<link rel="stylesheet" type="text/css"

href="mystyle.css">

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

2.4.2 Internal Style Sheet:

An internal style sheet may be used if one single page has a unique style. Internal styles are
defined within the <style> element, inside the <head> section of an HTML page:
<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: linen;

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page16
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

h1 {

color: maroon;

margin-left: 40px;

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body></html>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page17
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

2.4.3 Inline Styles:

An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can
contain any CSS property.
The example below shows how to change the color and the left margin of a <h1> element:
<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue; margin-left:30px;">

This is a heading.

</h1>

<p>This is a paragraph.</p>

</body>

</html>

Conclusion:
Hence, we have successfully designed web page index.htm using HTML and CSS.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page18
Subject Name- WT Lab Class/Branch: TE Computer Engineering

1. style.css
body

background-image: url("img.jpeg");

background-repeat: no-repeat;

background-size: cover;

margin: 100px 0 0 36px;

input[type="password"], input[type="text"]

border:1px solid;

background-color:rgba(0,0,0,0.0);

height: 33px;

width:240px;

margin: 2px 0 0 36px;

padding-left: 10px;

input[type="submit"]

background-color: #4CAF50;

color: white;

height: 42px;

margin: 10px 0 0 36px;

width: 250px;

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page19
Subject Name- WT Lab Class/Branch: TE Computer Engineering

padding-left: 10px;

input[type="submit"]:hover

background-image: linear-gradient(#4ec7c0,#31aba3)

input[type="submit"]:active

background-image: linear-gradient(#319d91, #3db0a6);

padding: 0;

2. login.html
<!DOCTYPE html>

<html>

<head>

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

<style>

.login

border: 2px solid;

border-radius: 5px;

height: 200px;

margin: 150px 0 auto 400px;

width: 310px;

border-color:#3498DB;

padding-top: 20px;

.register

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page20
Subject Name- WT Lab Class/Branch: TE Computer Engineering

border: 2px solid;

border-radius: 5px;

height: 350px;

margin: 150px 0 auto 400px;

width: 310px;

border-color:#3498DB;

padding-top: 20px;

</style>

</head>

<body>

<div class="login">

<form action="" name="myform" onsubmit="loadDoc()" method="post">

<label><b>Username</b></label>

<input type="text" name="username" id="username" placeholder=

"Username" required="required" onfocus="this.value = '';">

<label><b>Password</b></label>

<input type="password" name="password" id="password"

placeholder="password" required="required" onfocus="this.value =
'';">

<input type="submit" value="Login">

<a href="register.html"> Register Yourself</a>

</form>

</div>

</body>

</html>

OutPut:
1. login

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page21
Subject Name- WT Lab Class/Branch: TE Computer Engineering

FAQs:
1. What is the difference between HTML and HTML5?
2. What is the difference between html elements and tags?
3. What is marquee?
4. What is the use of span tag? Give an example?
5. What is the use of ‘required ’attribute in HTML5?
6. What is External stylesheet? What are the advantages and disadvantages?
7. What is CSS selector?
8. What are the components of CSS style?
9. What is browser safe color?
10. Explain difference between HTML and XML?

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page22
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Assignment No: 3
Problem Statement: Design the XML document to store the information of the
employees of any business organization and demonstrate the use of:
a) DTD
b) XML Schema
And display the content in (e.g., tabular format) by using CSS/XSL
Objectives: To use client side and server side web technologies.
Outcome: Apply the client side and server side technologies for web application
development
Software & Hardware Requirments:
Operating System: Ubuntu
Software: Gedit
Browser: Mozilla/Google Chrome
Hardware: i3 Processor, 4GB RAM, 500GB HDD

Theory:
1. CSS
1.1 What is CSS?
● CSS stands for Cascading Style Sheets
● CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
● CSS saves a lot of work. It can control the layout of multiple web pages all at once
● External stylesheets are stored in CSS files
● CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.

1.2 CSS Syntax:

A CSS rule-set consists of a selector and a declaration block:

● The selector points to the HTML element you want to style.

● The declaration block contains one or more declarations separated by semicolons.
● Each declaration includes a CSS property name and a value, separated by a colon.
● A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.

1.3 CSS Selectors:

CSS selectors are used to "find" (or select) HTML elements based on their element name, id,
class, attribute, and more.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page23
Subject Name- WT Lab Class/Branch: TE Computer Engineering

1.3.1 The element Selector

The element selector selects elements based on the element name. You can select all <p>
elements on a page like this (in this case, all <p> elements will be center-aligned, with a red
text color):
<!DOCTYPE html>

<html><head>

<style>

p {

color: red;

text-align: center;

</style>

</head>

<body>

<p>Hello World!</p>

<p>This paragraph is styled with

CSS.</p>

</body>

</html>

1.3.2 The id Selector

The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one
unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
The style rule below will be applied to the HTML element with id="para1".

<!DOCTYPE html>

<html>

<head>

<style>

#para1 {

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page24
Subject Name- WT Lab Class/Branch: TE Computer Engineering

text-align: center;

color: red;

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected

by the style.</p>

</body>

</html>

1.3.3 The class Selector:

The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of
the class.
In the example below, all HTML elements with class="center" will be red and center-aligned.

<!DOCTYPE html>

<html><head>

<style>

.center {

text-align: center;

color: red;

</style>

</head>

<body>

<h1 class="center">Red and center-

aligned heading</h1>

<p class="center">Red and center-

aligned paragraph.</p>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page25
Subject Name- WT Lab Class/Branch: TE Computer Engineering

</body></html>

1.4 Types:
1.4.1 External Style Sheet:
With an external style sheet, you can change the look of an entire website by changing just
one file. An external style sheet can be written in any text editor. The file should not contain
any html tags. The style sheet file must be saved with a .css extension. Each page must
include a reference to the external style sheet file inside the <link> element. The <link>
element goes inside the <head> section:
mystyle.css
body {
background-color:
lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

<html>

<head>

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

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

1.4.2 Internal Style Sheet:

An internal style sheet may be used if one single page has a unique style. Internal styles are
defined within the <style> element, inside the <head> section of an HTML page:

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page26
Subject Name- WT Lab Class/Branch: TE Computer Engineering

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: linen;

h1 {

color: maroon;

margin-left: 40px;

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body></html>

1.4.3 Inline Styles:

An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can
contain any CSS property.
The example below shows how to change the color and the left margin of a <h1> element:
<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue; margin-

left:30px;"> This is a heading.

</h1>

<p>This is a paragraph.</p>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page27
Subject Name- WT Lab Class/Branch: TE Computer Engineering

</body>

</html>

2. XML
XML stands for Extensible Markup Language and is a text-based markup language
derived from Standard Generalized Markup Language (SGML).
● XML is extensible − XML allows you to create your own self-descriptive tags, or
language, that suits your application.
● XML carries the data, does not present it − XML allows you to store the data
irrespective of how it will be presented.
● XML is a public standard − XML was developed by an organization called the
World Wide Web Consortium (W3C) and is available as an open standard.

2.1 Difference Between XML and HTML

XML and HTML were designed with different goals:
● XML was designed to carry data - with focus on what data is
● HTML was designed to display data - with focus on how data looks
● XML is often used to separate data from presentation.
● XML tags are not predefined like HTML tags are

2.2 XML Syntax Rules

1. XML Documents Must Have a Root Element: XML documents must contain
one root element that is the parent of all other elements
<root>
<child>
<subchild>.....</subchild>
</child>
</root>
2. XML Declaration: The XML document can optionally have an XML declaration. It
is written as follows
<?xml version = "1.0" encoding = "UTF-8"?>
Syntax Rules for XML Declaration
● The XML declaration is case sensitive and must begin with "<?xml>" where
"xml" is written in lower-case.
● If document contains XML declaration, then it strictly needs to be the first
statement of the XML document.
● The XML declaration strictly needs be the first statement in the XML
document.
● An HTTP protocol can override the value of encoding that you put in the XML
declaration.

3. All XML Elements Must Have a Closing Tag :In HTML, some elements might
work well, even with a missing closing tag, In XML, it is illegal to omit the closing
tag. All elements must have a closing tag.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page28
Subject Name- WT Lab Class/Branch: TE Computer Engineering

4. XML Tags are Case Sensitive : XML tags are case sensitive. The tag <Letter> is
different from the tag <letter>. Opening and closing tags must be written with
the same case

5. XML Elements Must be Properly Nested: In HTML, you might see improperly
nested elements:
<b><i>This text is bold and
italic</b></i>

XML Elements Must be Properly Nested.

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this
weekend!</body>
</note>

6. XML Attribute Values Must be Quoted :XML elements can have attributes in
name/value pairs just like in HTML. In XML, the attribute values must always be
quoted.
<note date="12/11/2007">
<to>Tove</to>
<from>Jani</from>
</note>

7. Entity References : Some characters have a special meaning in XML. If you place a
character like "<" inside an XML element, it will generate an error because the parser
interprets it as the start of a new element.
<message>salary &lt; 1000</message>

There are 5 pre-defined entity references in XML:

&lt; < less than

&gt; > greater than

&amp; & ampersand

&apos; ' apostrophe

&quot; " quotation mark

8. Comments in XML : The syntax for writing comments in XML is similar to that of
HTML.
<!-- This is a comment -->

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page29
Subject Name- WT Lab Class/Branch: TE Computer Engineering

9. White-space is Preserved in XML : XML does not truncate multiple white-spaces

(HTML truncates multiple white-spaces to one single white-space).

Conclusion:
Hence, we have successfully designed the XML document to store the information of
the employees and display the content in tabular format by using CSS.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page30
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

Program:
Home.html
<html>

<head>

<style>

table, th, td

border: 1px solid black;

border-collapse:collapse;

th, td

padding: 5px;

</style>

</head>

<body>

<button type="button" onclick="loadXMLDoc()">Display Employee

Information</button>

<br><br>

<table id="demo">

</table>

<script>

function loadXMLDoc()

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page31
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

if (this.readyState == 4 && this.status == 200) {

myFunction(this);

};

xmlhttp.open("GET", "emp.xml", true);

xmlhttp.send();

function myFunction(xml)

var i;

var xmlDoc = xml.responseXML;

var table="<tr><th>EmpName</th><th>Address</th><th>organization</th></tr>";

var x = xmlDoc.getElementsByTagName("employee");

for (i = 0; i <x.length; i++) {

table += "<tr><td>" +

x[i].getElementsByTagName("empname")[0].childNodes[0].nodeValue +

"</td><td>" +

x[i].getElementsByTagName("address")[0].childNodes[0].nodeValue +

"</td><td>"+x[i].getElementsByTagName("organization")[0].childNodes[0].nodeVal
ue +

"</td></tr>";

document.getElementById("demo").innerHTML = table;

</script>

</body>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page32
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

</html>

emp.xml
<information>

<employee>

<empname>NileshKorade</empname>

<address>Pune</address>

<organization>PCCOER</organization>

</employee>

<employee>

<empname>AmolDumbare</empname>

<address>Nigdi</address>

<organization>HCL Technology</organization>

</employee>

<employee>

<empname>GaneshAdmane</empname>

<address>Solapur</address>

<organization>TCS</organization>

</employee>

</information>

Output:

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page33
Subject Name- WT Lab Class/Branch: TE Computer Engineering

FAQs:
1. Explain difference between HTML and XML?
2. What is XML DOM?
3. Explain difference between CDATA and PCDATA?
4. What is mean by simple element and complex element?
5. What is XPATH?
6. Explain XSL and XSLT?

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page34
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Assignment No: 4
Problem Statement: Implement an application in Java Script using following:
a) Design UI of application using HTML, CSS etc.
b) Include Java script validation
c) Use of prompt and alert window using Java Script
Objectives: To use client side and server side web technologies.
Outcome: Apply the client side and server side technologies for web application
development
Software & Hardware Requirments:
Operating System: Ubuntu
Software: Gedit
Browser: Mozilla/Google Chrome
Hardware: i3 Processor, 4GB RAM, 500GB HDD

Theory:
1. JavaScript
1. 1. History
JavaScript is a lightweight, interpreted programming language. It is designed for
creating network-centric applications. It is complimentary to and integrated with Java.
JavaScript is very easy to implement because it is integrated with HTML. It is open and
cross-platform.
JavaScript is a dynamic computer programming language. It is lightweight and most
commonly used as a part of web pages, whose implementations allow client-side script to
interact with the user and make dynamic pages. It is an interpreted programming language
with object-oriented capabilities.
JavaScript was first known as LiveScript, but Netscape changed its name to
JavaScript, possibly because of the excitement being generated by Java. JavaScript made its
first appearance in Netscape 2.0 in 1995 with the name LiveScript.
The general-purpose core of the language has been embedded in Netscape, Internet
Explorer, and other web browsers.
JavaScript is a lightweight, interpreted programming language.
Designed for creating network-centric applications.
Complementary to and integrated with Java.
Complementary to and integrated with HTML.
Open and cross-platform

1. 2. Limitations
Client-side JavaScript does not allow the reading or writing of files. This has been
kept for security reason.
JavaScript cannot be used for networking applications because there is no such
support available.
JavaScript doesn't have any multithreading or multiprocessor capabilities.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page35
Subject Name- WT Lab Class/Branch: TE Computer Engineering

1.3. </script>
JavaScript can be implemented using JavaScript statements that are placed within the
<script>... </script> HTML tags in a web page.
You can place the <script> tags, containing your JavaScript, anywhere within
you web page, but it is normally recommended that you should keep it within the
<head> tags.

The script tag takes two important attributes −

Language − This attribute specifies what scripting language you are using.
Typically, its value will be javascript. Although recent versions of HTML
(and XHTML, its successor) have phased out the use of this attribute.

Type − This attribute is what is now recommended to indicate the

scripting language in use and its value should be set to "text/javascript"

<script language="javascript" type="text/javascript">

JavaScript code

</script>

1.4. Example
<html>

<body>

<script language="javascript" type="text/javascript">

<!--

document.write("Hello World!")

//-->

</script>

</body>

</html>

The comment ends with a "//-->". Here "//" signifies a comment in JavaScript, so we
add that to prevent a browser from reading the end of the HTML comment as a piece of
JavaScript code. Next, we call a function document.write which writes a string into our
HTML document.
This function can be used to write text, HTML, or both.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page36
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

1.5. Whitespace and Line Breaks

JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs. You
can use spaces, tabs, and newlines freely in your program and you are free to format and
indent your programs in a neat and consistent way that makes the code easy to read and
understand.

1.6. Semicolons are Optional

Simple statements in JavaScript are generally followed by a semicolon character, just
as they are in C, C++, and Java. JavaScript, however, allows you to omit this semicolon if
each of your statements are placed on a separate line.

<script language="javascript" But when formatted in a single line as

type="text/javascript"> follows, you must use semicolons

<!-- <script language="javascript"

type="text/javascript">
var1 = 10
<!--
var2 = 20
var1 = 10; var2 = 20;
//-->
//-->
</script>
</script>

1.7. Case Sensitivity

JavaScript is a case-sensitive language. This means that the language keywords,
variables, function names, and any other identifiers must always be typed with a consistent
capitalization of letters.

1. 8. Comments in JavaScript
JavaScript supports both C-style and C++-style comments, Thus −
Any text between a // and the end of a line is treated as a comment and is ignored by
JavaScript.
Any text between the characters /* and */ is treated as a comment. This may span
multiple lines.
JavaScript also recognizes the HTML comment opening sequence <!--. JavaScript
treats this as a single-line comment, just as it does the // comment.
The HTML comment closing sequence --> is not recognized by JavaScript so it
should be written as //-->.

<script language="javascript" type="text/javascript">

<!--

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page37
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

// This is a comment. It is similar to comments in C++

/*

* This is a multiline comment in JavaScript

* It is very similar to comments in C Programming

*/

//-->

</script>

1.9 Using JS in an HTML

There is a flexibility given to include JavaScript code anywhere in an HTML
document. However the most preferred ways to include JavaScript in an HTML
file are as follows −
● Script in <head>...</head> section.
● Script in <body>...</body> section.
● Script in <body>...</body> and <head>...</head> sections.
● Script in an external file and then include in <head>...</head> section.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page38
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

1.9.1 JavaScript in <head>...</head> section

If you want to have a script run on some event, such as when a user clicks somewhere, then
you will place that script in the head as follows
<html>

<head>

<script type="text/javascript">

<!--

function sayHello()

alert("Hello World")

//-->

</script>

</head>

<body>

<input type="button" onclick="sayHello()" value="Say Hello" />

</body>

</html>

1.9.2 JavaScript in <body>...</body> section

If you need a script to run as the page loads so that the script generates content in the page,
then the script goes in the <body> portion of the document. In this case, you would not have
any function defined using JavaScript.
<html>

<head> </head>

<body>

<script type="text/javascript">

<!--

document.write("Hello World")

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page39
Subject Name- WT Lab Class/Branch: TE Computer Engineering

//-->

</script>

<p>This is web page body </p>

</body>

</html>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page40
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

1.9.3 JavaScript in <body> and <head> Sections

<html>

<head>

<script type="text/javascript">

<!--

function sayHello()

alert("Hello World")

//-->

</script>

</head>

<body>

<script type="text/javascript">

<!--

document.write("Hello World")

//-->

</script>

<input type="button" onclick="sayHello()" value="Say Hello" />

</body>

</html>

1.9.4 JavaScript in External File

To use JavaScript from an external file source, you need to write all your JavaScript source
code in a simple text file with the extension ".js" and then include that file as shown above.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page41
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

function sayHello()

alert("Hello World") //filename.js

<html>

<head>

<script type="text/javascript" src="filename.js" ></script>

</head>

<body>

< input type="button" onclick="sayHello()" value="Say Hello" /> </body>

</html>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page42
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

1.10 Variables
One of the most fundamental characteristics of a programming language is the set of
data types it supports. These are the type of values that can be represented and manipulated in
a programming language.
JavaScript allows you to work with three primitive data types −
Numbers, eg. 123, 120.50 etc.
Strings of text e.g. "This text string" etc.
Boolean e.g. true or false.

Note − Java does not make a distinction between integer values and floating-
point values. All numbers in JavaScript are represented as floating-point values.

1.10.1 JavaScript Variables

Like many other programming languages, JavaScript has variables. Variables can be
thought of as named containers. You can place data into these containers and then refer to the
data simply by naming the container.
Before you use a variable in a JavaScript program, you must declare it. Variables are
declared with the var keyword as follows.
<script type="text/javascript">

<!--

var money;

var name;

//-->

</script>

You can also declare multiple variables with the same var keyword as follows −
<script type="text/javascript">

<!--

var money, name;

//-->

</script>

Storing a value in a variable is called variable initialization. You can do variable

initialization at the time of variable creation or at a later point in time when you need that
variable.
For instance, you might create a variable named money and assign the value 2000.50
to it later. For another variable, you can assign a value at the time of initialization as follows.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page43
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

<script type="text/javascript">

<!--

var name = "Ali";

var money;

money = 2000.50;

//-->

</script>

Note − Use the var keyword only for declaration or initialization, once for the life of any
variable name in a document. You should not re-declare same variable twice.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page44
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

JavaScript is untyped language. This means that a JavaScript variable can hold a
value of any data type. Unlike many other languages, you don't have to tell JavaScript during
variable declaration what type of value the variable will hold. The value type of a variable
can change during the execution of a program and JavaScript takes care of it automatically.

1.10.2 JavaScript Variable Scope

The scope of a variable is the region of your program in which it is defined.
JavaScript variables have only two scopes.
Global Variables − A global variable has global scope which means it can
be defined anywhere in your JavaScript code.
Local Variables − A local variable will be visible only within a function
where it is defined. Function parameters are always local to that function.
Within the body of a function, a local variable takes precedence over a global variable with
the same name. If you declare a local variable or function parameter with the same name as a
global variable, you effectively hide the global variable. Take a look into the following
example.
<html>

<body onload = checkscope();>

<script type = "text/javascript">

<!--

var myVar = "global"; // Declare a global variable

function checkscope( )

var myVar = "local"; // Declare a local variable

document.write(myVar);

//-->

</script>

</body>

</html>

1.10.3 JavaScript Variable Names

While naming your variables in JavaScript, keep the following rules in mind.
● You should not use any of the JavaScript reserved keywords as a variable
name. These keywords are mentioned in the next section. For example, break
or boolean variable names are not valid.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page45
Subject Name- WT Lab Class/Branch: TE Computer Engineering

● JavaScript variable names should not start with a numeral (0-9). They must
begin with a letter or an underscore character. For example, 123test is an
invalid variable name but _123test is a valid one.
● JavaScript variable names are case-sensitive. For example, Name and name
are two different variables.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page46
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

1.11 Functions
Before we use a function, we need to define it. The most common way to define a function in
JavaScript is by using the function keyword, followed by a unique function name, a list of
parameters (that might be empty), and a statement block surrounded by curly braces.
<html>

<head>

<script type="text/javascript">

function sayHello()

document.write ("Hello there!");

</script>

</head>

<body>

<p>Click the following button to call the function</p>

<form>

<input type="button" onclick="sayHello()" value="Say Hello">

</form>

<p>Use different text in write method and then try...</p>

</body>

</html>

<html>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page47
Subject Name- WT Lab Class/Branch: TE Computer Engineering

<head>

<script type="text/javascript">

function concatenate(first, last)

var full;

full = first + last;

return full;

function secondFunction()

var result;

result = concatenate('Zara', 'Ali');

document.write (result );

</script>

</head>

<body>

<p>Click the following button to call the function</p>

<form>

<input type="button" onclick="secondFunction()" value="Call Function">

</form>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page48
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

<p>Use different parameters inside the function and then try...</p>

</body>

</html>

1.12 Events
JavaScript's interaction with HTML is handled through events that occur when the user or the
browser manipulates a page.
When the page loads, it is called an event. When the user clicks a button, that click too is an
event. Other examples include events like pressing any key, closing a window, resizing a
window, etc.
<html>

<head>

<script type="text/javascript">

function sayHello()

alert("Hello World")

</script>

</head>

<body>

<p>Click the following button and see result</p>

<form>

<input type="button" onclick="sayHello()" value="Say Hello" />

</form>

</body>

</html>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page49
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Conclusion:
Hence, we have successfully designed UI of application using HTML, CSS and
performed validation using Java script.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page50
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Program
1. style.css
body

background-image: url("img.jpeg");

background-repeat: no-repeat;

background-size: cover;

margin: 100px 0 0 36px;

.login

border: 2px solid;

border-radius: 5px;

height: 200px;

margin: 150px 0 auto 400px;

width: 310px;

border-color:#3498DB;

padding-top: 20px;

.register

border: 2px solid;

border-radius: 5px;

height: 350px;

margin: 150px 0 auto 400px;

width: 310px;

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page51
Subject Name- WT Lab Class/Branch: TE Computer Engineering

border-color:#3498DB;

padding-top: 20px;

input[type="password"], input[type="text"]

border:1px solid;

background-color:rgba(0,0,0,0.0);

height: 33px;

width:240px;

margin: 2px 0 0 36px;

padding-left: 10px;

input[type="submit"]

background-color: #4CAF50;

color: white;

height: 42px;

margin: 10px 0 0 36px;

width: 250px;

padding-left: 10px;

input[type="submit"]:hover

background-image: linear-gradient(#4ec7c0,#31aba3)

input[type="submit"]:active

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page52
Subject Name- WT Lab Class/Branch: TE Computer Engineering

background-image: linear-gradient(#319d91, #3db0a6);

padding: 0;

2. login.html
<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<div class="login">

<form action="" name="myform" onsubmit="loadDoc()" method="post">

<label><b>Username</b></label>

<input type="text" name="username" id="username" placeholder=

"Username" required="required" onfocus="this.value = '';">

<label><b>Password</b></label>

<input type="password" name="password" id="password"

placeholder="password" required="required" onfocus="this.value =
'';">

<input type="submit" value="Login">

<a href="register.html"> Register Yourself</a>

</form>

</div>

</body>

</html>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page53
Subject Name- WT Lab Class/Branch: TE Computer Engineering

3. welcome.html
<!DOCTYPE html>

<html>

<body>

<center><h2> <font color="red">Welcome Page</h2></font>

</center>

</body>

</html>

4. register.html
<!DOCTYPE html>

<html>

<head>

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

<script type="text/javascript">

function validateform()

var pass=document.myform.password.value;

if(pass.length<4)

alert("Enter Password At Least 4 Charactor");

return false;

var mobile=document.myform.mobile.value;

if(isNaN(mobile))

alert("Enter Digit Only in Mobile Number");

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page54
Subject Name- WT Lab Class/Branch: TE Computer Engineering

return false;

else if (mobile.length<10||mobile.length>10)

alert("Enter Mobile Number 10 Digit Only");

return false;

var email = document.myform.email.value;

var atpos = email.indexOf("@");

var dotpos = email.lastIndexOf(".");

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)

alert("Not a valid e-mail address");

return false;

var age=document.myform.age.value;

if(isNaN(age))

alert("Enter Digit Only in Age");

return false;

return true;

</script>

</head>

<body>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page55
Subject Name- WT Lab Class/Branch: TE Computer Engineering

<div class="register">

<form action="Welcome.html" name="myform" onsubmit="return

validateform()" method="post">

<label><b>Username</b></label>

<input type="text" name="username" id="username" placeholder=

"Username" required="required" onfocus="this.value = '';">

<label><b>Password</b></label>

<input type="password" name="password" id="password"

placeholder="password" required="required" onfocus="this.value =
'';">

<label><b>Mobile Number</b></label>

<input type="text" name="mobile" id="mobile" placeholder= "Mobile

Number" required="required" onfocus="this.value = '';">

<label><b>E-Mail Address</b></label>

<input type="text" name="email" id="email" placeholder= "E-Mail

Address" required="required" onfocus="this.value = '';">

<label><b>Age</b></label>

<input type="text" name="age" id="age" placeholder= "Age"

required="required" onfocus="this.value = '';">

<input type="submit" value="Register">

</form>

</body>

</html>

OutPut:
1. login

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page56
Subject Name- WT Lab Class/Branch: TE Computer Engineering

2. Registration

3. Validation using JavaScript

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page57
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page58
Subject Name- WT Lab Class/Branch: TE Computer Engineering

FAQs:

1. Explain feature of JavaScript?

2. Explain how to define JavaScript in external file?
3. Explain how to define function in JavaScript?
4. What are the default objects available in JavaScript?
5. Explain advantages and limitation of JavaScript?
6. What is event in JavaScript? Explain with example?
7. Which dialog boxes available in JavaScript?
8. How to find HTML Elements using JavaScript?

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page59
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Assignment No: 5
Problem Statement: Implement the sample program demonstrating the use of
Servlet.
Objectives: To use client side and server side web technologies.
Outcome: Apply the client side and server side technologies for web application
development
Software & Hardware Requirments:
Operating System: Ubuntu
Software: Eclipse
Programming Language: Java(Servlet/JSP)
Server: Tomcat
Browser: Mozilla/Google Chrome
Hardware: i3 Processor, 4GB RAM, 500GB HDD

Theory:
1. Servlet
Java Servlets are programs that run on a Web or Application server and act as a
middle layer between a request coming from a Web browser or other HTTP client and
databases or applications on the HTTP server. Using Servlets, you can collect input from
users through web page forms, present records from a database or another source, and create
web pages dynamically. Java Servlets often serve the same purpose as programs implemented
using the Common Gateway Interface (CGI).

1.1 Advantages in comparison with the CGI.

● Performance is significantly better.
● Servlets execute within the address space of a Web server. It is not necessary
to create a separate process to handle each client request.
● Servlets are platform-independent because they are written in Java.
● Java security manager on the server enforces a set of restrictions to protect the
resources on a server machine. So servlets are trusted.
● The full functionality of the Java class libraries is available to a servlet. It can
communicate with applets, databases, or other software via the sockets and
RMI mechanisms that you have seen already.

1.2 . Servlets - Life Cycle

The web container maintains the life cycle of a servlet instance. Let's see the life cycle of the
servlet:
1. Servlet class is loaded.
2. Servlet instance is created.
3. init method is invoked.
4. service method is invoked.
5. destroy method is invoked.

The init() method :

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page60
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

The init method is designed to be called only once. It is called when the servlet is first
created, and not called again for each user request. So, it is used for one-time initializations,
just as with the init method of applets.
When a user invokes a servlet, a single instance of each servlet gets created, with each
user request resulting in a new thread that is handed off to doGet or doPost as appropriate.
The init() method simply creates or loads some data that will be used throughout the life of
the servlet.
The init method definition looks like this:
public void init() throws ServletException

// Initialization code...

The service() method :

The service() method is the main method to perform the actual task. The servlet
container (i.e. web server) calls the service() method to handle requests coming from the
client( browsers) and to write the formatted response back to the client.
Each time the server receives a request for a servlet, the server spawns a new thread
and calls service. The service() method checks the HTTP request type (GET, POST, PUT,
DELETE, etc.) and calls doGet, doPost, doPut, doDelete, etc. methods as appropriate.
public void service(ServletRequest request, ServletResponse response)throws
ServletException, IOException

The destroy() method :

The destroy() method is called only once at the end of the life cycle of a servlet. This
method gives your servlet a chance to close database connections, halt background threads,
write cookie lists or hit counts to disk, and perform other such cleanup activities.
After the destroy() method is called, the servlet object is marked for garbage
collection.
public void destroy() \

// Finalization code...

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page61
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page62
Subject Name- WT Lab Class/Branch: TE Computer Engineering

1.3 Examples
import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

// Extend HttpServlet class

public class HelloWorld extends HttpServlet

private String message;

public void init() throws ServletException

// Do required initialization

message = "Hello World";

public void doGet(HttpServletRequest request, HttpServletResponse

response)

throws ServletException, IOException

// Set response content type

response.setContentType("text/html");

// Actual logic goes here.

PrintWriter out = response.getWriter();

out.println("<h1>" + message + "</h1>");

public void destroy()

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page63
Subject Name- WT Lab Class/Branch: TE Computer Engineering

// do nothing.

Conclusion:
Hence, we have successfully designed web page to demonstrate the use of Servlet.
.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page64
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Program
ShowBookInfo.java
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ShowBookInfo")
public class ShowBookInfo extends HttpServlet {

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws

ServletException, IOException
{
response.setContentType("text/html");
PrintWriter out=response.getWriter();
out.print("<center><h2>Book Information</h2></center>");
try
{
Class.forName("com.mysql.cj.jdbc.Driver");
Connection
con=DriverManager.getConnection("jdbc:mysql://localhost:3306/ebooks","root","root");
Statement st=con.createStatement();
ResultSet rs=st.executeQuery("select * from bookinfo");
out.print("<center><table border=\"1\">");

out.print("<tr><th>BookId</th><th>BookName</th><th>Author</th><th>Prize</th><th
>Quantity</th></tr>");
while(rs.next())
{
out.print("<tr>");
out.print("<td>"+rs.getString(1)+"</td>");
out.print("<td>"+rs.getString(2)+"</td>");
out.print("<td>"+rs.getString(3)+"</td>");
out.print("<td>"+rs.getInt(4)+"</td>");
out.print("<td>"+rs.getInt(5)+"</td>");
out.print("</tr>");
}
out.print("</table></center>");
}
catch(Exception e)
{

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page65
Subject Name- WT Lab Class/Branch: TE Computer Engineering

out.print("<center><h2>Unable to connect to database</h2></center>");

}

}
Database

Output:

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page66
Subject Name- WT Lab Class/Branch: TE Computer Engineering

FAQs:
1. What is Servlet?
2. Explain life cycle of servlet?
3. What is session management?
4. Explain advantages of Servlet over CGI?

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page67
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Assignment No: 6
Problem Statement: Implement the sample program demonstrating the use of JSP.
Objectives: To use client side and server side web technologies.
Outcome: Apply the client side and server side technologies for web application
development
Software & Hardware Requirments:
Operating System: Ubuntu
Software: Eclipse
Programming Language: Java(Servlet/JSP)
Server: Tomcat
Browser: Mozilla/Google Chrome
Hardware: i3 Processor, 4GB RAM, 500GB HDD

Theory:
1. JavaServer Pages.
JavaServer Pages (JSP) is a technology for developing web pages that support
dynamic content which helps developers insert java code in HTML pages by making use of
special JSP tags, most of which start with <% and end with %>.
A JavaServer Pages component is a type of Java servlet that is designed to fulfill the
role of a user interface for a Java web application. Web developers write JSPs as text files
that combine HTML or XHTML code, XML elements, and embedded JSP actions and
commands.
Using JSP, you can collect input from users through web page forms, present records
from a database or another source, and create web pages dynamically.
JSP tags can be used for a variety of purposes, such as retrieving information from a
database or registering user preferences, accessing JavaBeans components, passing control
between pages and sharing information between requests, pages etc.

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

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page68
Subject Name- WT Lab Class/Branch: TE Computer Engineering

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

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

1.3 JSP - Architecture

The web server needs a JSP engine ie. container to process JSP pages. The JSP
container is responsible for intercepting requests for JSP pages. This tutorial makes use of
Apache which has built-in JSP container to support JSP pages development.
A JSP container works with the Web server to provide the runtime environment and
other services a JSP needs. It knows how to understand the special elements that are part of
JSPs.
Following diagram shows the position of JSP container and JSP files in a Web Application.

JSP Processing:
The following steps explain how the web server creates the web page using JSP:
● As with a normal page, your browser sends an HTTP request to the web server.
● The web server recognizes that the HTTP request is for a JSP page and forwards it to
a JSP engine. This is done by using the URL or JSP page which ends with .jsp instead
of .html.
● The JSP engine loads the JSP page from disk and converts it into a servlet content.
This conversion is very simple in which all template text is converted to println( )
statements and all JSP elements are converted to Java code that implements the
corresponding dynamic behavior of the page.
● The JSP engine compiles the servlet into an executable class and forwards the original
request to a servlet engine.
● A part of the web server called the servlet engine loads the Servlet class and executes
it. During execution, the servlet produces an output in HTML format, which the
servlet engine passes to the web server inside an HTTP response.
● The web server forwards the HTTP response to your browser in terms of static HTML
content.
● Finally web browser handles the dynamically generated HTML page inside the HTTP
response exactly as if it were a static page.
● All the above mentioned steps can be shown below in the following diagram:

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page69
Subject Name- WT Lab Class/Branch: TE Computer Engineering

1.4. JSP Compilation:

When a browser asks for a JSP, the JSP engine first checks to see whether it needs to
compile the page. If the page has never been compiled, or if the JSP has been modified since
it was last compiled, the JSP engine compiles the page.
The compilation process involves three steps:
● Parsing the JSP.
● Turning the JSP into a servlet.
● Compiling the servlet.

1.4.1 JSP Initialization:

When a container loads a JSP it invokes the jspInit() method before servicing any
requests. If you need to perform JSP-specific initialization, override the jspInit() method:

public void jspInit()

// Initialization code...

Typically initialization is performed only once and as with the servlet init method,
you generally initialize database connections, open files, and create lookup tables in the
jspInit method.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page70
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

1.4.2 JSP Execution:

This phase of the JSP life cycle represents all interactions with requests until the JSP
is destroyed. Whenever a browser requests a JSP and the page has been loaded and
initialized, the JSP engine invokes the _jspService() method in the JSP.
The _jspService() method takes an HttpServletRequest and an
HttpServletResponse as its parameters as follows:

void _jspService(HttpServletRequest request,

HttpServletResponse response)

// Service handling code...

The _jspService() method of a JSP is invoked once per a request and is responsible
for generating the response for that request and this method is also responsible for generating
responses to all seven of the HTTP methods ie. GET, POST, DELETE etc.

1.4.3 JSP Cleanup:

The destruction phase of the JSP life cycle represents when a JSP is being removed
from use by a container. The jspDestroy() method is the JSP equivalent of the destroy
method for servlets. Override jspDestroy when you need to perform any cleanup, such as
releasing database connections or closing open files.
The jspDestroy() method has the following form:

public void jspDestroy()

// Your cleanup code goes here.

1.5. JSP – Syntax

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

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page71
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page72
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

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>

1.5.2 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; ]+ ... %>
You can write XML equivalent of the above syntax as follows:
<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); %>

1.5.3 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 %>
You can write XML equivalent of the above syntax as follows:
<jsp:expression>
expression
Department of Computer Engineering
PCET’s PCCOER, Pune-412101 Page73
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

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

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

1.6. JSP Directives:

A JSP directive affects the overall structure of the servlet class. It usually has the
following form:
<%@ directive attribute="value" %>

There are three types of directive tag:

Directive Description
Defines page-dependent attributes, such as scripting language,
<%@ page ... %>
error page, and buffering requirements.
<%@ include ... %> Includes a file during the translation phase.
Declares a tag library, containing custom actions, used in the
<%@ taglib ... %>
page

1.7. JSP Implicit Objects:

JSP supports nine automatically defined variables, which are also called implicit
objects. These variables are:
Objects Description
This is the HttpServletRequest object associated with the
request
request.
This is the HttpServletResponse object associated with the
response
response to the client.
out This is the PrintWriter object used to send output to the client.
session This is the HttpSession object associated with the request.
application This is the ServletContext object associated with application

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page74
Subject Name- WT Lab Class/Branch: TE Computer Engineering

context.
config This is the ServletConfig object associated with the page.
This encapsulates use of server-specific features like higher
pageContext
performance JspWriters.
This is simply a synonym for this, and is used to call the
page
methods defined by the translated servlet class.
The Exception object allows the exception data to be accessed
Exception
by designated JSP.

Conclusion:
Hence, we have successfully designed web page to demonstrate the use of JSP.
.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page75
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Program
showinfo.jsp

<%@pageimport="java.sql.*"language="java"contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
out.print("<h2>Student Information Table</h2>");
try
{
Class.forName("com.mysql.cj.jdbc.Driver");
Connection
con=DriverManager.getConnection("jdbc:mysql://localhost:3306/student","root","root");
Statement st=con.createStatement();
ResultSet rs=st.executeQuery("select * from studentinfo");
out.print("<center><table border=\"1\">");
out.print("<tr><th>Id</th><th>Student
Name</th><th>Class</th><th>Division</th><th>City</th></tr>");
while(rs.next())
{
out.print("<tr>");
out.print("<td>"+rs.getString(1)+"</td>");
out.print("<td>"+rs.getString(2)+"</td>");
out.print("<td>"+rs.getString(3)+"</td>");
out.print("<td>"+rs.getString(3)+"</td>");
out.print("<td>"+rs.getString(5)+"</td>");
out.print("</tr>");
}
out.print("</table></center>");
}
catch(Exception e)
{
e.printStackTrace();
}

%>
</body>
</html>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page76
Subject Name- WT Lab Class/Branch: TE Computer Engineering

DataBase:

OutPut:

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page77
Subject Name- WT Lab Class/Branch: TE Computer Engineering

FAQs:
1. What is JSP?
2. What is the syntax of JSP?
3. How do we connect JSP file to database?
4. What is session management?
5. Explain advantages of JSP over Servlet?
6. Explain Scriptlet, Expression, Declaration tag in JSP?
7. List default object in JSP?

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page78
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Assignment No: 7
Problem Statement: Build a dynamic web application using PHP and MySQL.
a. Create database tables in MySQL and create connection with PHP.
b. Create the add, update, delete and retrieve functions in the PHP web app
interacting with MySQL database
Objectives: To use client side and server side web technologies.
Outcome: Apply the client side and server side technologies for web application
development
Software & Hardware Requirments:
Operating System: Ubuntu
Software: Gedit
Programming Language: PhP
Server: Wamp
Browser: Mozilla/Google Chrome
Hardware: i3 Processor, 4GB RAM, 500GB HDD

Theory:
1. PHP
The PHP Hypertext Preprocessor (PHP) is a programming language that allows web
developers to create dynamic content that interacts with databases. PHP is basically used for
developing web based software applications.
1.1 Introduction
● PHP started out as a small open source project that evolved as more and more people
found out how useful it was. Rasmus Lerdorf unleashed the first version of PHP way
back in 1994.
● PHP is a recursive acronym for "PHP: Hypertext Preprocessor".
● PHP is a server side scripting language that is embedded in HTML. It is used to
manage dynamic content, databases, session tracking, even build entire e-commerce
sites.
● It is integrated with a number of popular databases, including MySQL, PostgreSQL,
Oracle, Sybase, Informix, and Microsoft SQL Server.
● PHP supports a large number of major protocols such as POP3, IMAP, and LDAP.
PHP4 added support for Java and distributed object architectures (COM and
CORBA), making n-tier development a possibility for the first time.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page79
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

1.2 Features
● PHP Syntax is C-Like.
● PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
● PHP is compatible with almost all servers used today (Apache, IIS, etc.)
● PHP supports a wide range of databases
● PHP is free. Download it from the official PHP resource: www.php.net
● PHP is easy to learn and runs efficiently on the server side
● PHP can generate dynamic page content
● PHP can create, open, read, write, delete, and close files on the server
● PHP can collect form data
● PHP can send and receive cookies
● PHP can add, delete, modify data in your database
● PHP can be used to control user-access
● PHP can encrypt data

1.3 Sample code

<html>

<head> <title>First Program</title> </head>

<body>

<?php echo "Nilesh Korade!";?>

</body>

</html>

1.4 PHP - Syntax

1.4.1 Escaping to PHP
The PHP parsing engine needs a way to differentiate PHP code from other elements in the
page. The mechanism for doing so is known as 'escaping to PHP'. There are four ways to do
this:
Canonical PHP tags <?php...?>

Short-open tags <?...?>

ASP-style tags <%...%>

HTML script tags <script language = "PHP">...</script>

1.4.2 Commenting PHP Code

Single-line comments − They are generally used for short explanations or notes
relevant to the local code. Here are the examples of single line comments.
<?

# This is a comment, and

# This is the second line of the comment

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page80
Subject Name- WT Lab Class/Branch: TE Computer Engineering

// This is a comment too. Each style comments only

print "An example with single line comments";

?>

Multi-lines comments
/* This is a comment with multiline

Author : Nilesh Korade

Subject: PHP

*/

1.4.5 PHP – Variable

Here are the most important things to know about variables in PHP.
● All variables in PHP are denoted with a leading dollar sign ($).
● The value of a variable is the value of its most recent assignment.
● Variables are assigned with the = operator, with the variable on the left-hand side and
the expression to be evaluated on the right.
● Variables can, but do not need, to be declared before assignment.
● PHP does a good job of automatically converting types from one to another when
necessary.

PHP has a total of eight data types which we use to construct our variables −
Integers − are whole numbers, without a decimal point, like 4195.
Doubles − are floating-point numbers, like 3.14159 or 49.1.
Booleans − have only two possible values either true or false.
NULL − is a special type that only has one value: NULL.
Strings − are sequences of characters, like 'PHP supports string
operations.'
Arrays − are named and indexed collections of other values.
Objects − are instances of programmer-defined classes, which can
package up both other kinds of values and functions that are specific to
the class.
Resources − are special variables that hold references to resources
external to PHP (such as database connections).

<?php

$many = 2.2888800;

$many_2 = 2.2111200;

$few = $many + $many_2;

print("$many + $many_2 = $few <br>");

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page81
Subject Name- WT Lab Class/Branch: TE Computer Engineering

?>

1.4.5 PHP – constant

A constant is a name or an identifier for a simple value. A constant value cannot change
during the execution of the script.
● There is no need to write a dollar sign ($) before a constant, where as in Variable one
has to write a dollar sign.
● Constants cannot be defined by simple assignment, they may only be defined using
the define() function.
● Constants may be defined and accessed anywhere without regard to variable scoping
rules.
● Once the Constants have been set, may not be redefined or undefined.
<?php

define("MINSIZE", 50);

echo MINSIZE;

echo constant("MINSIZE"); // same thing as the previous line

?>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page82
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

1.5 PHP - Decision Making & Loops

1.5.1 The If...Else Statement
If you want to execute some code if a condition is true and another code if a condition
is false, use the if....else statement.
<?php
$t = date("H");
if ($t < "10")

{
echo "Have a good morning!";
}

elseif ($t < "20")

{
echo "Have a good day!";
}

else

{
echo "Have a good night!";
}
?>

1.5.2 PHP switch Statement

Use the switch statement to select one of many blocks of code to be executed.
<?php
$favcolor = "red";
switch ($favcolor)

{
case "red":
echo "Your favorite color is red!";
break;
case "blue":
echo "Your favorite color is blue!";
break;
case "green":
echo "Your favorite color is green!";
break;
default:
echo "Your favorite color is neither red, blue, nor green!";
}
?>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page83
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

1.5.3 PHP while Loop

The while loop executes a block of code as long as the specified condition is true.
<?php
$x = 1;
while($x <= 5)

{
echo "The number is: $x <br>";
$x++;
}
?>

1.5.4 PHP for Loop

The for loop is used when you know in advance how many times the script should
run.
<?php
for ($x = 0; $x <= 10; $x++)

{
echo "The number is: $x <br>";
}
?>

1.5.5 PHP foreach Loop

<?php
$colors = array("red", "green", "blue", "yellow");

foreach ($colors as $value)

{
echo "$value <br>";
}
?>

1.6 PhP Function

while creating a function its name should start with keyword function and all the PHP code
should be put inside { and } braces
<html>

<head>

<title>Writing PHP Function</title>

</head>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page84
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

<body>

<?php

function addFunction($num1, $num2)

$sum = $num1 + $num2;

echo "Sum of the two numbers is : $sum";

addFunction(10, 20);

?>

</body>

</html>

PHP Functions - Returning values :To let a function return a value, use the return
statement.
<?php
function sum($x, $y)

{
$z = $x + $y;
return $z;
}

echo "5 + 10 = " . sum(5, 10) . "<br>";

echo "7 + 13 = " . sum(7, 13) . "<br>";
echo "2 + 4 = " . sum(2, 4);
?>

1.7. Using MySQL with PHP

PHP provides mysql_connect function to open a database connection. This function takes
five parameters and returns a MySQL link identifier on success, or FALSE on failure.
connection mysql_connect(server,user,passwd,new_link,client_flag);

Closing Database Connection:Its simplest function mysql_close PHP provides to close a

database connection.
bool mysql_close ( resource $link_identifier );

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page85
Subject Name- WT Lab Class/Branch: TE Computer Engineering

<?php

$dbhost = 'localhost:3036';

$dbuser = 'guest';

$dbpass = 'guest123';

$conn = mysql_connect($dbhost, $dbuser, $dbpass);

if(! $conn ) {

die('Could not connect: ' . mysql_error());

echo 'Connected successfully';

mysql_close($conn);

?>

Data can be entered into MySQL tables by executing SQL INSERT statement through PHP
function mysql_query.
<?php

$dbhost = 'localhost:3036';

$dbuser = 'root';

$dbpass = 'rootpassword';

$conn = mysql_connect($dbhost, $dbuser, $dbpass);

if(! $conn ) {

die('Could not connect: ' . mysql_error());

$sql = 'INSERT INTO employee '.

'(emp_name,emp_address, emp_salary, join_date) '.

'VALUES ( "guest", "XYZ", 2000, NOW() )';

mysql_select_db('test_db');

$retval = mysql_query( $sql, $conn );

if(! $retval ) {

die('Could not enter data: ' . mysql_error());

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page86
Subject Name- WT Lab Class/Branch: TE Computer Engineering

echo "Entered data successfully\n";

mysql_close($conn);

?>

Conclusion:
Hence, we have successfully created database tables in MySQL and performed add,
update, delete and retrieve functions in the PHP

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page87
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Program
Index.html
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<style>
input[type="submit"]
{
background-color: #4CAF50;
color: white;
height: 42px;
margin: 10px 0 0 36px;
width: 250px;
padding-left: 10px;
}
</style>
<body>
<form action="deletedata.php">
<input type="submit"value="Delete">
</form>
<form action="updatedata.php">
<input type="submit"value="Update">
</form>
<form action="showdata.php">
<input type="submit"value="Show">
</form>
<form action="insertdata.php">
<input type="submit"value="Insert">
</form>
</body>
</htm>

showdata.php
<?php

$db_name = 'student';
$db_user = 'root';
$db_pass = 'root';
$db_host = 'localhost';

$conn = mysqli_connect($db_host, $db_user, $db_pass,$db_name);

if (!$conn )
{
$result= $conn->connect_error;
}
else
{
$sql = "SELECT * FROM studentinfo";

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page88
Subject Name- WT Lab Class/Branch: TE Computer Engineering

$result = $conn->query($sql);
if ($result->num_rows >0)
{
echo'<table border="1">';
echo
"<tr><th>Name</th><th>Roll</th><th>Class</th><th>Address</th></tr>";
while($row = $result->fetch_assoc())
{
$name =$row['name'];
$roll=$row['roll'];
$class =$row['class'];
$address =$row['address'];
echo "<tr><td>".$name
."</td><td>".$roll."</td><td>".$class."</td><td>".$address."</td></tr>";
}
echo"</table>";
}
$conn->close();
}

?>
<html>
<head>
</head>
<body>
<h2><a href="index.html">Click Here !!! fro Home Page</a?</h2>
</body>
</html>

insertdata.php
<?php

if($_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_POST['name'];
$roll = $_POST['roll'];
$class =$_POST['class'];
$address=$_POST['address'];

$db_name = 'student';
$db_user = 'root';
$db_pass = 'root';
$db_host = 'localhost';

$conn = mysqli_connect($db_host, $db_user, $db_pass,$db_name);

if (!$conn )
{
$result= $conn->connect_error;
}
else

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page89
Subject Name- WT Lab Class/Branch: TE Computer Engineering

$sql = "insert into studentinfo values('$name','$roll','$class','$address')";

if ($conn->query($sql) === TRUE)

{
echo"<center><font color=\"red\">SData Inserted
Successfully</font></center>";
}

else
{ echo "Error: ". $sql . "<br>". $conn->error;
echo"<center><font color=\"red\">Problem in Inserting
data</font></center>";
}

}
$conn->close();
}

?>
<html>

<head>
<style>
input[type="password"], input[type="text"]
{
border:1px solid;
background-color:rgba(0,0,0,0.0);
height: 33px;
width:240px;
margin: 2px 0 0 36px;
padding-left: 10px;

input[type="submit"]
{
background-color: #4CAF50;
color: white;
height: 42px;
margin: 10px 0 0 36px;
width: 250px;
padding-left: 10px;
}
</style>
</head>
<body>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page90
Subject Name- WT Lab Class/Branch: TE Computer Engineering

<form action=""name="myform"method="post">
<label><b>StudentName:</b></label>
<br><input type="text"name="name"id="name"placeholder=
"Username"required="required"onfocus="this.value = '';">
<br><label><b>Roll No:</b></label>
<br><input type="text"name="roll"id="roll"placeholder= "Roll
No"required="required"onfocus="this.value = '';">
<br><label><b>Class:</b></label>
<br><input type="text"name="class"id="class"placeholder=
"Class"required="required"onfocus="this.value = '';">
<br><label><b>Address:</b></label>
<br><input type="text"name="address"id="address"placeholder=
"Address"required="required"onfocus="this.value = '';">

<br><input type="submit"value="Insert Data">

<h2><a href="index.html">Click Here !!! fro Home Page</a?</h2>
</body>
</html>

updatedata.php
<?php

if($_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_POST['name'];
$roll = $_POST['roll'];
$class =$_POST['class'];
$address=$_POST['address'];

$db_name = 'student';
$db_user = 'root';
$db_pass = 'root';
$db_host = 'localhost';

$conn = mysqli_connect($db_host, $db_user, $db_pass,$db_name);

if (!$conn )
{
$result= $conn->connect_error;
}
else
{

$sql = "update studentinfo set

name='$name',class='$class',address='$address'where roll='$roll'";

if ($conn->query($sql) === TRUE)

{
echo"<center><font color=\"red\">SData Updated

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page91
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Successfully</font></center>";
}

else
{ echo "Error: ". $sql . "<br>". $conn->error;
echo"<center><font color=\"red\">Problem in Updating
data</font></center>";
}

}
$conn->close();
}

?>
<html>

<head>
<style>
input[type="password"], input[type="text"]
{
border:1px solid;
background-color:rgba(0,0,0,0.0);
height: 33px;
width:240px;
margin: 2px 0 0 36px;
padding-left: 10px;

input[type="submit"]
{
background-color: #4CAF50;
color: white;
height: 42px;
margin: 10px 0 0 36px;
width: 250px;
padding-left: 10px;
}
</style>
</head>
<body>

<form action=""name="myform"method="post">
<label><b>StudentName:</b></label>
<br><input type="text"name="name"id="name"placeholder=
"Username"required="required"onfocus="this.value = '';">
<br><label><b>Roll No:</b></label>
<br><input type="text"name="roll"id="roll"placeholder= "Roll
No"required="required"onfocus="this.value = '';">

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page92
Subject Name- WT Lab Class/Branch: TE Computer Engineering

<br><label><b>Class:</b></label>
<br><input type="text"name="class"id="class"placeholder=
"Class"required="required"onfocus="this.value = '';">
<br><label><b>Address:</b></label>
<br><input type="text"name="address"id="address"placeholder=
"Address"required="required"onfocus="this.value = '';">

<br><input type="submit"value="Insert Data">

<h2><a href="index.html">Click Here !!! fro Home Page</a?</h2>
</body>
</html>

deletedata.php
<?php

if($_SERVER['REQUEST_METHOD'] == "POST")
{

$roll = $_POST['roll'];

$db_name = 'student';
$db_user = 'root';
$db_pass = 'root';
$db_host = 'localhost';

$conn = mysqli_connect($db_host, $db_user, $db_pass,$db_name);

if (!$conn )
{
$result= $conn->connect_error;
}
else
{

$sql = "delete from studentinfo where roll='$roll'";

if ($conn->query($sql) === TRUE)

{
echo"<center><font color=\"red\">SData Deleted
Successfully</font></center>";
}

else
{ echo "Error: ". $sql . "<br>". $conn->error;
echo"<center><font color=\"red\">Problem in Updating
data</font></center>";
}

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page93
Subject Name- WT Lab Class/Branch: TE Computer Engineering

$conn->close();
}

?>
<html>

<head>
<style>
input[type="password"], input[type="text"]
{
border:1px solid;
background-color:rgba(0,0,0,0.0);
height: 33px;
width:240px;
margin: 2px 0 0 36px;
padding-left: 10px;

input[type="submit"]
{
background-color: #4CAF50;
color: white;
height: 42px;
margin: 10px 0 0 36px;
width: 250px;
padding-left: 10px;
}
</style>
</head>
<body>

<form action="<?php echo $_SERVER['PHP_SELF'];?>"name="myform"method="post">

<br><label><b>Roll No:</b></label>
<br><input type="text"name="roll"id="roll"placeholder= "Roll
No"required="required"onfocus="this.value = '';">

<br><input type="submit"value="Delete Record">

<h2><a href="index.html">Click Here !!! fro Home Page</a?</h2>
</body>
</html>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page94
Subject Name- WT Lab Class/Branch: TE Computer Engineering

OutPut:

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page95
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page96
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Database

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page97
Subject Name- WT Lab Class/Branch: TE Computer Engineering

FAQs:
1. What is the use of "echo" in php?
2. How to include a file to a php page?
3. Differences between GET and POST methods ?
4. What is the use of 'print' in php?
5. What is the difference between Session and Cookie?
6. What are the different errors in PHP?
7. How to print current date and time?
8. What is the difference between sql and Mysql?
9. Why do we use GROUP BY and ORDER BY function in mysql?
10. What is JOIN in MySQL? What are the different types of join?

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page98
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Assignment No: 8
Problem Statement: Design a login page with entries for name, mobile number
email id and login button. Use struts and perform following validations
a. Validation for correct names
b. Validation for mobile numbers
c. Validation for email id
d. Validation if no entered any value
e. Re-display for wrongly entered values with message
f. Congratulations and welcome page upon successful entries
Objectives: To use web technology languages, frameworks and services.
Outcome: Analyze the web technology languages, frameworks and services
Software & Hardware Requirments:
Operating System: Ubuntu
Software: Eclipse
Programming Language: Java
Server: Tomcar
Browser: Mozilla/Google Chrome
Hardware: i3 Processor, 4GB RAM, 500GB HDD

Theory:
1. Introduction
The struts 2 framework is used to develop MVC-based web application. The Struts 2
framework is used to develop MVC (Model View Controller) based web applications. Struts
2 is the combination of webwork framework of opensymphony and struts 1.
Struts 2 provides many features that were not in struts 1. The important features of struts 2
framework are as follows:
1. Configurable MVC components
2. POJO based actions
3. AJAX support
4. Integration support
5. Various Result Types
6. Various Tag support
7. Theme and Template support

1.1 Model 2 (MVC) Architecture

Model 2 is based on the MVC (Model View Controller) design pattern. The MVC design
pattern consists of three modules model, view and controller.
Model The model represents the state (data) and business logic of the application.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page99
Subject Name- WT Lab Class/Branch: TE Computer Engineering

View The view module is responsible to display data i.e. it represents the presentation.
Controller The controller module acts as an interface between view and model. It intercepts
all the requests i.e. receives input and commands to Model / View to change accordingly.

Fig1. MVC Architecture

1.3 Directory structure

The directory structure of struts 2 is same as servlet/JSP. Here, struts.xml file must be located
in the classes folder.

Fig 2. Directory structure

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page100
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

2. Components
2.1 web.xml
web.xml file Provide the entry of Controller. In struts
2, StrutsPrepareAndExecuteFilter class works as the controller. As we know well, struts 2
uses filter for the controller. It is implicitly provided by the struts framework.
1. <?xml version="1.0" encoding="UTF-8"?>
2. <web-app>
3. <filter>
4. <filter-name>struts2</filter-name>
5. <filter-class>
6. org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter

7. </filter-class>
8. </filter>
9.
<filter-mapping>

<filter-name>struts2</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

</web-app>

2.2 struts.xml
It is the important file from where struts framework gets information about the action and
decides which result to be invoked. Here, we have used many elements such as struts,
package, action and result.
struts element is the root elements of this file. It represents an application.
package element is the sub element of struts. It represents a module of the
application. It generally extends the struts-default package where many interceptors
and result types are defined.
action element is the sub element of package. It represents an action to be invoked for
the incoming request. It has name, class and method attributes. If you don't specify
name attribute by default execute() method will be invoked for the specified action
class.
result element is the sub element of action. It represents an view (result) that will be
invoked. Struts framework checks the string returned by the action class, if it returns
success, result page for the action is invoked whose name is success or has no name.
It has name and type attributes. Both are optional. If you don't specify the result
name, by default success is assumed as the result name. If you don't specify the type
attribute, by default dispatcher is considered as the default result type. We will learn
about result types later.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page101
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

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

2. <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts

3. Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">

4. <struts>

5. <package name="default" extends="struts-default">

6. <action name="product" class="nilesh.korade.Product">

7. <result name="success">welcome.jsp</result>

8. </action>

</package>

</struts>

2.3 view components

It is the view component the displays information of the action. Here, we are using struts tags
to get the information. The s:property tag returns the value for the given name, stored in the
action object.
1. <%@ taglib uri="/struts-tags" prefix="s" %>
2. Product Id:<s:property value="id"/><br/>
3. Product Name:<s:property value="name"/><br/>
4. Product Price:<s:property value="price"/><br/>

2.4 Action class

This is simple bean class. In struts 2, action is POJO (Plain Old Java Object). It has one extra
method execute i.e. invoked by struts framework by default.

2.5 StrutsPrepareAndExecuteFilter
Handles both the preparation and execution phases of the Struts dispatching process. This
filter is better to use when you don't have another filter that needs access to action context
information, such as Sitemesh.
StrutsPrepareAndExecuteFilter belongs to org.apache.struts2.dispatcher.ng.filter
package. StrutsPrepareAndExecuteFilter can also be understood by its name.
StrutsPrepareAndExecuteFilter has the responsibility to prepare and execute all phases of
struts. The question is when we shouldz use StrutsPrepareAndExecuteFilter filter. Struts 2
apache documentation says that when there is no other filter being used that can access action
context information, better to use StrutsPrepareAndExecuteFilter filter.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page102
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

2.6 Struts 2 Action

In struts 2, action class is POJO (Plain Old Java Object). POJO means you are not forced to
implement any interface or extend any class. Generally, execute method should be specified
that represents the business logic. The simple action class may look like:
1. package com.javatpoint;

2. public class Welcome

3. {

4. public String execute()

5. {

6. return "success";

7. }

8. }

2.6.1 Action Interface

A convenient approach is to implement the com.opensymphony.xwork2.Action interface
that defines 5 constants and one execute method.
Five Constants of Action Interface
Action interface provides 5 constants that can be returned form the action class. They are:
1. SUCCESS indicates that action execution is successful and a success result should be
shown to the user.
2. ERROR indicates that action execution is failed and a error result should be shown to
the user.
3. LOGIN indicates that user is not logged-in and a login result should be shown to the
user.
4. INPUT indicates that validation is failed and a input result should be shown to the
user again.
5. NONE indicates that action execution is successful but no result should be shown to
the user.
Action interface contains only one method execute that should be implemented overridden by
the action class even if you are not forced.
public String execute();

2.6.2 ActionSupport class

It is a convenient class that implements many interfaces such as Action, Validateable,
ValidationAware, TextProvider, LocaleProvider and Serializable . So it is mostly used
instead of Action.
Struts ActionSupport class provides the default implementation of the most common actions.
It provides a collection of methods. Some of the common methods are-

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page103
Subject Name- WT Lab Class/Branch: TE Computer Engineering

execute() - This method executed automatically when action is called. This is default
implemented method subclasses should implement this method by proving their business
logic.
validate() - This method is default implemented method subclasses should override this
method to provide validation.
clearErrors() - This method can be used when you want to continue execution, and want to
clear the state of the action.

Conclusion:
Hence, we have successfully designed a login page with entries for name, mobile number
email id and login button and used struts and perform validation.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page104
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Program
web.xml
<?xmlversion="1.0"encoding="UTF-8"?>
<web-appxmlns:xsi="http://www.w3.org/2001/XMLSchema-
instance"xmlns="http://xmlns.jcp.org/xml/ns/javaee"xsi:schemaLocation="http://xmlns.jcp.org/x
ml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-
app_3_1.xsd"id="WebApp_ID"version="3.1">
<display-name>AAStrutsApplication</display-name>
<welcome-file-list>
<welcome-file>Registration.jsp</welcome-file>
</welcome-file-list>
<filter>
<filter-name>Struts2</filter-name>
<filter-
class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>Struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>

struts.xml
<?xmlversion="1.0"encoding="UTF-8"?>
<!DOCTYPEstrutsPUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
<includefile="struts-default.xml"></include>
<packagename="default"namespace="/"extends="struts-default">
<actionname="register"class="nilesh.korade.RegistrationAction">
<resultname="success">/Welcome.jsp</result>
<resultname="input">/Registration.jsp</result>

</action>
</package>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page105
Subject Name- WT Lab Class/Branch: TE Computer Engineering

RegistrationAction.java
packagenilesh.korade;
importcom.opensymphony.xwork2.ActionSupport;
publicclassRegistrationActionextendsActionSupport{
String emailid;
String name;
longcontactno;
publicString execute() throwsException
{
returnSUCCESS;
}
publicString getEmailid() {
returnemailid;
}
publicvoidsetEmailid(String emailid) {
this.emailid= emailid;
}
publicString getName() {
returnname;
}
publicvoidsetName(String name) {
this.name= name;
}
publiclonggetContactno() {
returncontactno;
}
publicvoidsetContactno(longcontactno) {
this.contactno= contactno;
}
}

RegistrationAction-validation.xml
<!DOCTYPEvalidatorsPUBLIC"-//Apache Struts//XWork Validator 1.0.3//EN"
"http://struts.apache.org/dtds/xwork-validator-1.0.3.dtd">
<validators>
<fieldname="name">
<field-validatortype="requiredstring">
<message>You must enter Your Name</message>
</field-validator>
</field>
<fieldname="emailid">
<field-validatortype="requiredstring">
<message>You must enter Your Emil-ID</message>
</field-validator>
</field>

<fieldname="contactno">
<field-validatortype="regex">
<paramname="regex"><![CDATA[\d{10}]]></param>
<message>Phone number must be entered as 9999999999.</message>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page106
Subject Name- WT Lab Class/Branch: TE Computer Engineering

</field-validator>
</field>
</validators>

Registration.jsp
<%@pagelanguage="java"contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglibprefix="s"uri="/struts-tags"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD HTML 4.01
Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=ISO-8859-1">
<title>Registration</title>
<linkrel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<s:formaction="register"method="post">

<s:textfieldlabel="Username "name="name"/>
<s:textfieldlabel="Email-ID "name="emailid"/>
<s:textfieldlabel="Contact No "name="contactno"/>
<s:submitvalue="Submit"/>
</s:form>
</div>
</body>
</html>

Welcome.jsp
<%@pagelanguage="java"contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglibprefix="s"uri="/struts-tags"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD HTML 4.01
Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>Welcome</h1>
Hello: <s:propertyvalue="name"/>
Your Email-ID: <s:propertyvalue="emailid"/>
Your Contact No: <s:propertyvalue="contactno"/>
</body>
</html>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page107
Subject Name- WT Lab Class/Branch: TE Computer Engineering

OutPut:

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page108
Subject Name- WT Lab Class/Branch: TE Computer Engineering

FAQs:
1. What are the components of Struts Framework?
2. Which file is used by controller to get mapping information for request routing?
3. What’s the role of Action Class in Struts?
4. What’s the purpose of Execute method of action class?
5. What are the benefits of Struts framework?
6. What is Struts2?
7. What are the differences between Struts1 and Struts2 or how Struts2 is better than Struts1?
8. What is the difference in using Action interface and ActionSupport class for our action
classes, which one you would prefer?

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page109
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Assignment No: 9
Problem Statement: Design an application using Angular JS.
Objectives: To use web technology languages, frameworks and services.
Outcome: Analyze the web technology languages, frameworks and services
Software & Hardware Requirments:
Operating System: Ubuntu
Software: Gedit
Programming Language: Angular JS
Server: Wamp
Browser: Mozilla/Google Chrome
Hardware: i3 Processor, 4GB RAM, 500GB HDD

Theory:
1. Introduction
AngularJS is an open-source web application framework. It was initially created in 2009 by
MiskoHevery and Adam Abrons. It is presently kept up by Google. Its most recent adaptation
is 1.2.21. "AngularJS is an auxiliary system for dynamic web applications. It gives you a
chance to utilize HTML as your layout dialect and gives you a chance to stretch out HTML's
linguistic structure to express your application parts plainly and compactly. Its information
official and reliance infusion take out a significant part of the code you as of now need to
compose. Also, everything occurs inside the program, making it a perfect band together with
any server innovation".
General Features
∙ AngularJS is a productive system that can make Rich Internet Applications (RIA).
∙ AngularJS gives designers a choices to compose customer side applications utilizing
JavaScript in a spotless Model View Controller (MVC) way.
∙ Applications written in AngularJS are cross-program agreeable. AngularJS
consequently handles JavaScript code reasonable for every program.
∙ AngularJS is open source, totally free, and utilized by a great many engineers the
world over. It is authorized under the Apache permit version2.0.
∙ By and large, AngularJS is a system to assemble expansive scale, elite, and simple to
keep up web applications.

AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.
AngularJS extends HTML attributes with Directives, and binds data to HTML with
Expressions.

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angul
ar.min.js"></script>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page110
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

AngularJS extends HTML with ng-directives.

The ng-app directive defines an AngularJS application.
The ng-model directive binds the value of HTML controls (input, select, textarea) to
application data.
The ng-bind directive binds application data to the HTML view.
<!DOCTYPE html>
<html>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angul
ar.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>

AngularJS starts automatically when the web page has loaded.

The ng-app directive tells AngularJS that the <div> element is the "owner" of an
AngularJS application.
The ng-model directive binds the value of the input field to the application
variable name.
The ng-bind directive binds the innerHTML of the <p> element to the application
variable name.

1.1. AngularJS Directives

As you have already seen, AngularJS directives are HTML attributes with
an ng prefix.
The ng-init directive initializes AngularJS application variables.
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>

1.2. AngularJS Expressions

AngularJS expressions are written inside double braces: {{ expression }}.
AngularJS will "output" data exactly where the expression is written.
<!DOCTYPE html>
<html>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angul
ar.min.js"></script>
<body>

<div ng-app="">

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page111
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

<p>My first expression: {{ 5 + 5 }}</p>

</div>
</body>
</html>

AngularJS expressions bind AngularJS data to HTML the same way as the ng-binddirective.
<!DOCTYPE html>
<html>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angul
ar.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>

1.3. AngularJS Applications

AngularJS modules define AngularJS applications.
AngularJS controllers control AngularJS applications.
The ng-app directive defines the application, the ng-controller directive defines the
controller.
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>

2. AngularJS Expressions
Expressions are used to bind application data to html. Expressions are written inside double
braces like {{ expression}}. Expressions behaves in same way as ng-bind directives.
AngularJS application expressions are pure javascript expressions and outputs the data where
they are used.
<!DOCTYPE html>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page112
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

<html>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angul
ar.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>

If you remove the ng-app directive, HTML will display the expression as it is, without
solving it.
You can write expressions wherever you like, AngularJS will simply resolve the expression
and return the result.
Example: Let AngularJS change the value of CSS properties. Change the color of the input
box below, by changing its value.
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model=
"myCol" value="{{myCol}}">
</div>

2.1 AngularJS Numbers

AngularJS numbers are like JavaScript numbers.
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>

2.2 AngularJS Strings

AngularJS strings are like JavaScript strings
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>

2.3 AngularJS Objects

AngularJS objects are like JavaScript objects
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page113
Subject Name- WT Lab Class/Branch: TE Computer Engineering

2.4 AngularJS Arrays

AngularJS arrays are like JavaScript arrays
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>

2.5 AngularJS Expressions vs. JavaScript Expressions

Like JavaScript expressions, AngularJS expressions can contain literals, operators, and
variables.
Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.
AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript
expressions do.
AngularJS expressions support filters, while JavaScript expressions do not.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page114
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

3. AngularJS Modules
An AngularJS module defines an application.
The module is a container for the different parts of an application.
The module is a container for the application controllers.
Controllers always belong to a module.

3.1 Creating a Module

A module is created by using the AngularJS function angular.module.
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>

The "myApp" parameter refers to an HTML element in which the application will run. Now
you can add controllers, directives, filters, and more, to your AngularJS application.

3.2 Adding a Controller

Add a controller to your application, and refer to the controller with the ng-
controllerdirective.
<!DOCTYPE html>

<html>

<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"
></script>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

{{ firstName + " " + lastName }}

</div>

<script>

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {

$scope.firstName = "John";

$scope.lastName = "Doe";

});

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page115
Subject Name- WT Lab Class/Branch: TE Computer Engineering

</script>

</body>

</html>

4. AngularJS Controllers
AngularJS application mainly relies on controllers to control the flow of data in the
application. A controller is defined using ng-controller directive. A controller is a JavaScript
object ontaining attributes/properties and functions. Each controller accepts $scope as a
parameter which refers to the application/module that controller is to control.
<html>

<head>

<title>Angular JS Controller</title>

<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

</script>

</head>

<body>

<h2>AngularJS Sample Application</h2>

<div ng-app = "mainApp" ng-controller = "studentController">

Enter first name: <input type = "text" ng-model =

"student.firstName"><br><br>

Enter last name: <input type = "text" ng-model =

"student.lastName"><br>

<br>

You are entering: {{student.fullName()}}

</div>

<script>

var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function($scope) {

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page116
Subject Name- WT Lab Class/Branch: TE Computer Engineering

$scope.student = {

firstName: "Mahesh",

lastName: "Parashar",

fullName: function() {

var studentObject;

studentObject = $scope.student;

return studentObject.firstName + " " +

studentObject.lastName;

};

});

</script>

</body>

</html>

● studentController defined as a JavaScript object with $scope as argument.

● $scope refers to application which is to use the studentController object.
● $scope.student is property of studentController object.
● firstName and lastName are two properties of $scope.student object. We've passed the
default values to them.
● fullName is the function of $scope.student object whose task is to return the combined
name.
● In fullName function we're getting the student object and then return the combined
name.
● As a note, we can also define the controller object in separate JS file and refer that file
in the html page.
● We've bounded student.firstName and student.lastname to two input boxes.
● We've bounded student.fullName() to HTML.
● Now whenever you type anything in first name and last name input boxes, you can
see the full name getting updated automatically.

Conclusion:
Hence, we have successfully designed a web application using Angular JS.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page117
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Program
1. Userhome.html
<!DOCTYPE html>

<html>

<style>

table, th , td

border: 1px solid grey;

border-collapse: collapse;

padding: 5px;

align: center;

table tr:nth-child(odd)

background-color: #f1f1f1;

table tr:nth-child(even)

background-color: #ffffff;

</style>

<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.m
in.js"></script>

<body>

<div ng-app="myApp" ng-controller="courseCtrl">

<center><h3><font color="red"> {{welcome}}</font></h1>

<table>

<tr>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page118
Subject Name- WT Lab Class/Branch: TE Computer Engineering

<th>Qualification</th>

<th>Course</th>

<th>Duration</th>

</tr>

<tr ng-repeat="x in names">

<td>{{ x.qual }}</td>

<td>{{ x.course }}</td>

<td>{{ x.duration }}</td>

</tr>

</table>

</div>

</center>

<script>

var app = angular.module('myApp', []);

app.controller('courseCtrl', function($scope, $http)

$scope.welcome = "Welcome in Course Counceling Website";

$http.get("course.php")

.then(function (response)

{$scope.names = response.data.records;});

});

</script>

</body>

</html>

2. course.php
{ "records":[

{"qual":"SSC","course":"MSCIT","duration":"3 months"},

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page119
Subject Name- WT Lab Class/Branch: TE Computer Engineering

{"qual":"SSC","course":"DTP","duration":"3 months"},

{"qual":"HSC","course":"HTML","duration":"1 months"},

{"qual":"HSC","course":"C Programming","duration":"3 months"},

{"qual":"Diploma","course":"OCJP","duration":"3 months"},

{"qual":"Diploma","course":"CCNA","duration":"3 months"},

{"qual":"BE","course":"Software Development","duration":"6 months"},

{"qual":"BE","course":"Software Testing","duration":"6 months"}

] }

Output:
Userhome page

FAQs:
1. What is AngularJS and what are some of its advantages?
2. What is the Model View Controller (MVC)?
3. What is data binding in AngularJS? How does it relate to the MVC architecture?
4. Explain the concept of scope. How does scope inheritance work in AngularJS?
5. Explain the difference between a factory and a service in AngularJS?
6. Explain why there are two “destroy” events associated with the termination of a scope in
AngularJS?
7. What is dependency injection and how does it work?
8. What are directives? Can you explain the functions of the following directives?
9. Explain the role of $routeProvider in AngularJS?

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page120
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

Assignment No: 10
Problem Statement: Design and implement a business interface with necessary
business logic for any web application using EJB.
Objectives: To design and develop web applications using front end technologies
and backend databases.
Outcome: Create three tier web based applications
Software & Hardware Requirments:
Operating System: Ubuntu
Software: Eclipse
Programming Language: Java
Server: Tomcat
Browser: Mozilla/Google Chrome
Hardware: i3 Processor, 4GB RAM, 500GB HDD

Theory:
1. Introduction
EJB stands for Enterprise Java Beans. EJB is an essential part of a J2EE platform. J2EE
platform has component based architecture to provide multi-tiered, distributed and highly
transactional features to enterprise level applications. EJB provides an architecture to develop
and deploy component based enterprise applications considering robustness, high scalability,
and high performance. An EJB application can be deployed on any of the application server
compliant with the J2EE 1.3 standard specification.

1.1Types
EJB is primarily divided into three categories; following table lists their names with brief
descriptions −
S.No Type & Description

1 Session Bean
Session bean stores data of a particular user for a single session. It can
be stateful or stateless. It is less resource intensive as compared to entity bean. Session bean
gets destroyed as soon as user session terminates.

2 Entity Bean
Entity beans represent persistent data storage. User data can be saved to database via entity
beans and later on can be retrieved from the database in the entity bean.

3 Message Driven Bean

Message driven beans are used in context of JMS (Java Messaging Service). Message Driven
Beans can consumes JMS messages from external entities and act accordingly.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page121
Subject Name- WT Lab Class/Branch: TE Computer Engineering

1.3 Benefits
Following are the important benefits of EJB −
● Simplified development of large-scale enterprise level application.
● Application Server/EJB container provides most of the system level services like
transaction handling, logging, load balancing, persistence mechanism, exception
handling, and so on. Developer has to focus only on business logic of the application.
● EJB container manages life cycle of EJB instances, thus developer needs not to worry
about when to create/delete EJB objects.

2. Create a new EJB Project :

Open Eclipse IDE and create a new EJB project which can be done by clicking on, File menu
-> New -> EJB Project. Name the Project as SimpleEjb3Project.Make sure that Target
Runtime as JBoss 5.1 Runtime EJB Module version as 3.0 and click on finish.

You will see an EJB project in the Project Explorer view as shown below.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page122
Subject Name- WT Lab Class/Branch: TE Computer Engineering

2.1 Creating Session Bean and Bean Interface :

Create a new package by Right click on ejbModule -> New -> Package and name this
package to com.jwt.ejb.business and click on Finish.

Right click on this package and Create a new Interface and name it to Hello and click Finish

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page123
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Interface can be either @Remote or @Local or without any annotation. In this example we
have used @Remote .
Add following code into this Interface.
Hello.java
package com.jwt.ejb.business;

import javax.ejb.Remote;

@Remote

public interface Hello {

public String sayHello();

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page124
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page125
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Create a new package by Right click on ejbModule -> New -> Package and name this
package to com.jwt.ejb.businesslogic and click on Finish.

Create a new Class HelloBean in this package which should implement Hello interface and
add the following code.
This is a Bean class. Bean type can either be @Stateful or @Stateless . In this example we
have used @Stateless .
Hello.java
package com.jwt.ejb.businesslogic;

import javax.ejb.Stateless;

import com.jwt.ejb.business.Hello;

@Stateless

public class HelloBean implements Hello {

public HelloBean() {

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page126
Subject Name- WT Lab Class/Branch: TE Computer Engineering

public String sayHello() {

return "Hello Boss Welcome to EJB";

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page127
Subject Name- WT Lab Class/Branch: TE Computer Engineering

2.3 Creating Client :

The next step is to write a remote Java client application (with main()) for accessing and
invoking the EJBs deployed on the server.
Client uses JNDI to lookup for a proxy of your bean and invokes method on that proxy.
Creating JNDI InitialContext :
All naming service operations are performed on implementation
of javax.naming.Context interface.The starting point of interacting with the naming service is
to obtain a Context by providing the properties specific to the server implementation being
used. In our case it is, JBoss Application Server.
To create a javax.naming.InitialContext , we need to initialize it with properties from the
environment. JNDI verifies each property's values from the following two sources,
● jndi.properties resource files found on the classpath.
● Using parametrized constructor of InitialContext which takes properties of supplied
environment
We are going to use constructor for initializing the InitialContext.
For JBoss AS 5 we need to set following properties
Context.INITIAL_CONTEXT_FACTORY =
org.jnp.interfaces.NamingContextFactory<br>

Context.URL_PKG_PREFIXES = org.jboss.naming:org.jnp.interfaces<br>

Context.PROVIDER_URL = jnp://localhost:1099

2.4 Steps to create Client Class :

● Right click on ejbModule -> New -> Class
● Enter the class name as Client .
● Enter the package name as com.jwt.ejb.test and click on Finish.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page128
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Client.java

package com.jwt.ejb.test;
import java.util.Properties;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import com.jwt.ejb.business.Hello;
public class Client {
public static void main(String[] args) {
Hello bean = doLookup();
System.out.println(bean.sayHello()); // 3. Call business logic
}
private static Hello doLookup() {
Context context = null;
Hello bean = null;
try {
// 1. Obtaining Context
context = getInitialContext();
// 2. Lookup and cast
bean = (Hello) context.lookup(LOOKUP_STRING);
} catch (NamingException e) {
e.printStackTrace();
}
return bean;

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page129
Subject Name- WT Lab Class/Branch: TE Computer Engineering

}
private static final String LOOKUP_STRING = "HelloBean/remote";
private static final String PROVIDER_URL = "jnp://localhost:1099";
private static final String JNP_INTERFACES = "org.jboss.naming:org.jnp.interfaces";
private static final String INITIAL_CONTEXT_FACTORY = "org.jnp.interfaces.NamingConte
private static Context initialContext;
public static Context getInitialContext() throws NamingException {
if (initialContext == null) {
// Properties extends HashTable
Properties prop = new Properties();
prop.put(Context.INITIAL_CONTEXT_FACTORY, INITIAL_CONTEXT_FACTORY);
prop.put(Context.URL_PKG_PREFIXES, JNP_INTERFACES);
prop.put(Context.PROVIDER_URL, PROVIDER_URL);
initialContext = new InitialContext(prop);
}
return initialContext;
}
}

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page130
Subject Name- WT Lab Class/Branch: TE Computer Engineering

2.5 Directory Structure of Project

2.6 Deploying the project :

Now we need to deploy the our EJB "SimpleEjb3Project" on server.Follow the steps
mentioned bellow to deploy this project on server.
Strat the server
Right click on "JBoss 5.1 Runtime Server" from Servers view and click on Start.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page131
Subject Name- WT Lab Class/Branch: TE Computer Engineering

2.7 Deploy the application :

Right click on "JBoss 5.1 Runtime Server" available in Servers view -> Add and Remove. ->
Select the SimpleEjb3Project JAR file from the left pane and click Add-> and then Finish.

If the project is deployed properly with global JNDI mapping then you will see the
following message in the console.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page132
Subject Name- WT Lab Class/Branch: TE Computer Engineering

2.8 Testing the Client Application :

Open Client class Client.java in your eclipse editor and press Ctrl + F11 to run the
client.
Output
Hello Boss Welcome to EJB

Conclusion:
Hence, we have successfully designed and implement a EJB Application.
FAQs:
1. What is EJB?
2. What are the types of Enterprise Bean?
3. What is stateless session bean?
4. Write down the steps for the creation of stateless EJB.
5. What is JMS?
6. What is Entity Bean?

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page133
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Assignment No: 11
Problem Statement: Mini Project: Design and implement a dynamic web
application for any business functionality by using web development technologies
that you have learnt in the above given assignments.
Objectives: To design and develop web applications using front end technologies
and backend databases.
Outcome: Create three tier web based applications
Software & Hardware Requirments:
Operating System: Ubuntu
Software: Eclipse
Programming Language: Java
Server: Tomcat
Browser: Mozilla/Google Chrome
Hardware: i3 Processor, 4GB RAM, 500GB HDD

1. Servlet
Java Servlets are programs that run on a Web or Application server and act as a
middle layer between a request coming from a Web browser or other HTTP client and
databases or applications on the HTTP server. Using Servlets, you can collect input from
users through web page forms, present records from a database or another source, and create
web pages dynamically. Java Servlets often serve the same purpose as programs implemented
using the Common Gateway Interface (CGI).

1.1 Advantages in comparison with the CGI.

● Performance is significantly better.
● Servlets execute within the address space of a Web server. It is not necessary
to create a separate process to handle each client request.
● Servlets are platform-independent because they are written in Java.
● Java security manager on the server enforces a set of restrictions to protect the
resources on a server machine. So servlets are trusted.
● The full functionality of the Java class libraries is available to a servlet. It can
communicate with applets, databases, or other software via the sockets and
RMI mechanisms that you have seen already.

1.2 . Servlets - Life Cycle

The web container maintains the life cycle of a servlet instance. Let's see the life cycle of the
servlet:
1. Servlet class is loaded.
2. Servlet instance is created.
3. init method is invoked.
4. service method is invoked.
5. destroy method is invoked.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page134
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

The init() method :

The init method is designed to be called only once. It is called when the servlet is first
created, and not called again for each user request. So, it is used for one-time initializations,
just as with the init method of applets.
When a user invokes a servlet, a single instance of each servlet gets created, with each
user request resulting in a new thread that is handed off to doGet or doPost as appropriate.
The init() method simply creates or loads some data that will be used throughout the life of
the servlet.
The init method definition looks like this:
public void init() throws ServletException

// Initialization code...

The service() method :

The service() method is the main method to perform the actual task. The servlet
container (i.e. web server) calls the service() method to handle requests coming from the
client( browsers) and to write the formatted response back to the client.
Each time the server receives a request for a servlet, the server spawns a new thread
and calls service. The service() method checks the HTTP request type (GET, POST, PUT,
DELETE, etc.) and calls doGet, doPost, doPut, doDelete, etc. methods as appropriate.
public void service(ServletRequest request, ServletResponse response)throws
ServletException, IOException

The destroy() method :

The destroy() method is called only once at the end of the life cycle of a servlet. This
method gives your servlet a chance to close database connections, halt background threads,
write cookie lists or hit counts to disk, and perform other such cleanup activities.
After the destroy() method is called, the servlet object is marked for garbage
collection.
public void destroy() \

// Finalization code...

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page135
Subject Name- WT Lab Class/Branch: TE Computer Engineering

1.3 Examples
import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

// Extend HttpServlet class

public class HelloWorld extends HttpServlet

private String message;

public void init() throws ServletException

// Do required initialization

message = "Hello World";

public void doGet(HttpServletRequest request, HttpServletResponse

response)

throws ServletException, IOException

// Set response content type

response.setContentType("text/html");

// Actual logic goes here.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page136
Subject Name- WT Lab Class/Branch: TE Computer Engineering

PrintWriter out = response.getWriter();

out.println("<h1>" + message + "</h1>");

public void destroy()

// do nothing.

2. JavaServer Pages.
JavaServer Pages (JSP) is a technology for developing web pages that support
dynamic content which helps developers insert java code in HTML pages by making use of
special JSP tags, most of which start with <% and end with %>.
A JavaServer Pages component is a type of Java servlet that is designed to fulfill the
role of a user interface for a Java web application. Web developers write JSPs as text files
that combine HTML or XHTML code, XML elements, and embedded JSP actions and
commands.
Using JSP, you can collect input from users through web page forms, present records
from a database or another source, and create web pages dynamically.
JSP tags can be used for a variety of purposes, such as retrieving information from a
database or registering user preferences, accessing JavaBeans components, passing control
between pages and sharing information between requests, pages etc.

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

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page137
Subject Name- WT Lab Class/Branch: TE Computer Engineering

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

2.3 JSP - Architecture

The web server needs a JSP engine ie. container to process JSP pages. The JSP
container is responsible for intercepting requests for JSP pages. This tutorial makes use of
Apache which has built-in JSP container to support JSP pages development.
A JSP container works with the Web server to provide the runtime environment and
other services a JSP needs. It knows how to understand the special elements that are part of
JSPs.
Following diagram shows the position of JSP container and JSP files in a Web Application.

JSP Processing:
The following steps explain how the web server creates the web page using JSP:
● As with a normal page, your browser sends an HTTP request to the web server.
● The web server recognizes that the HTTP request is for a JSP page and forwards it to
a JSP engine. This is done by using the URL or JSP page which ends with .jsp instead
of .html.
● The JSP engine loads the JSP page from disk and converts it into a servlet content.
This conversion is very simple in which all template text is converted to println( )
statements and all JSP elements are converted to Java code that implements the
corresponding dynamic behavior of the page.
● The JSP engine compiles the servlet into an executable class and forwards the original
request to a servlet engine.
● A part of the web server called the servlet engine loads the Servlet class and executes
it. During execution, the servlet produces an output in HTML format, which the
servlet engine passes to the web server inside an HTTP response.
● The web server forwards the HTTP response to your browser in terms of static HTML
content.
● Finally web browser handles the dynamically generated HTML page inside the HTTP
response exactly as if it were a static page.
● All the above mentioned steps can be shown below in the following diagram:

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page138
Subject Name- WT Lab Class/Branch: TE Computer Engineering

2.4. JSP Compilation:

When a browser asks for a JSP, the JSP engine first checks to see whether it needs to
compile the page. If the page has never been compiled, or if the JSP has been modified since
it was last compiled, the JSP engine compiles the page.
The compilation process involves three steps:
● Parsing the JSP.
● Turning the JSP into a servlet.
● Compiling the servlet.

2.4.1 JSP Initialization:

When a container loads a JSP it invokes the jspInit() method before servicing any
requests. If you need to perform JSP-specific initialization, override the jspInit() method:

public void jspInit()

// Initialization code...

Typically initialization is performed only once and as with the servlet init method,
you generally initialize database connections, open files, and create lookup tables in the
jspInit method.

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page139
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

2.4.2 JSP Execution:

This phase of the JSP life cycle represents all interactions with requests until the JSP
is destroyed. Whenever a browser requests a JSP and the page has been loaded and
initialized, the JSP engine invokes the _jspService() method in the JSP.
The _jspService() method takes an HttpServletRequest and an
HttpServletResponse as its parameters as follows:

void _jspService(HttpServletRequest request,

HttpServletResponse response)

// Service handling code...

The _jspService() method of a JSP is invoked once per a request and is responsible
for generating the response for that request and this method is also responsible for generating
responses to all seven of the HTTP methods ie. GET, POST, DELETE etc.

2.4.3 JSP Cleanup:

The destruction phase of the JSP life cycle represents when a JSP is being removed
from use by a container. The jspDestroy() method is the JSP equivalent of the destroy
method for servlets. Override jspDestroy when you need to perform any cleanup, such as
releasing database connections or closing open files.
The jspDestroy() method has the following form:

public void jspDestroy()

// Your cleanup code goes here.

2.5. JSP – Syntax

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

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page140
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page141
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

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>

2.5.2 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; ]+ ... %>
You can write XML equivalent of the above syntax as follows:
<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); %>

2.5.3 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 %>
You can write XML equivalent of the above syntax as follows:
<jsp:expression>
expression
Department of Computer Engineering
PCET’s PCCOER, Pune-412101 Page142
 Subject Name- WT Lab Class/Branch: TE Computer Engineering

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

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

2.6. JSP Directives:

A JSP directive affects the overall structure of the servlet class. It usually has the
following form:
<%@ directive attribute="value" %>

There are three types of directive tag:

Directive Description
Defines page-dependent attributes, such as scripting language,
<%@ page ... %>
error page, and buffering requirements.
<%@ include ... %> Includes a file during the translation phase.
Declares a tag library, containing custom actions, used in the
<%@ taglib ... %>
page

2.7. JSP Implicit Objects:

JSP supports nine automatically defined variables, which are also called implicit
objects. These variables are:
Objects Description
This is the HttpServletRequest object associated with the
request
request.
This is the HttpServletResponse object associated with the
response
response to the client.
out This is the PrintWriter object used to send output to the client.
session This is the HttpSession object associated with the request.
application This is the ServletContext object associated with application

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page143
Subject Name- WT Lab Class/Branch: TE Computer Engineering

context.
config This is the ServletConfig object associated with the page.
This encapsulates use of server-specific features like higher
pageContext
performance JspWriters.
This is simply a synonym for this, and is used to call the
page
methods defined by the translated servlet class.
The Exception object allows the exception data to be accessed
Exception
by designated JSP.

Conclusion:
Hence, we have successfully designed and implement a Mini Project.
Program:
Project Structure

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page144
Subject Name- WT Lab Class/Branch: TE Computer Engineering

1. style.css
body

background-image: url("img.jpeg");

background-repeat: no-repeat;

background-size: cover;

margin: 100px 0 0 36px;

.login

border: 2px solid;

border-radius: 5px;

height: 200px;

margin: 150px 0 auto 400px;

width: 310px;

border-color:#3498DB;

padding-top: 20px;

.register

border: 2px solid;

border-radius: 5px;

height: 350px;

margin: 150px 0 auto 400px;

width: 310px;

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page145
Subject Name- WT Lab Class/Branch: TE Computer Engineering

border-color:#3498DB;

padding-top: 20px;

input[type="password"], input[type="text"]

border:1px solid;

background-color:rgba(0,0,0,0.0);

height: 33px;

width:240px;

margin: 2px 0 0 36px;

padding-left: 10px;

input[type="submit"]

background-color: #4CAF50;

color: white;

height: 42px;

margin: 10px 0 0 36px;

width: 250px;

padding-left: 10px;

input[type="submit"]:hover

background-image: linear-gradient(#4ec7c0,#31aba3)

input[type="submit"]:active

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page146
Subject Name- WT Lab Class/Branch: TE Computer Engineering

background-image: linear-gradient(#319d91, #3db0a6);

padding: 0;

2. index.html
<!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=UTF-8">

<title>Insert title here</title>

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

</head>

<body>

<div class="login">

<form action="LoginValidate" name="myform" method="post">

<label><b>Username</b></label>

<input type="text" name="username" id="username" placeholder=

"Username" required="required" onfocus="this.value = '';">

<label><b>Password</b></label>

<input type="password" name="password" id="password"

placeholder="password" required="required" onfocus="this.value =
'';">

<input type="submit" value="Login">

<a href="register.jsp"> Register Yourself</a>

</form>

</div>

</body>

</html>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page147
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page148
Subject Name- WT Lab Class/Branch: TE Computer Engineering

3. DBConnection.java
import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;

import java.sql.Statement;

public class DBConnection

public boolean verify(String user,String pass)

boolean flag=false;

try

Class.forName("com.mysql.jdbc.Driver");

Connection
con=DriverManager.getConnection("jdbc:mysql://localhost/tecomp","roo
t","root");

Statement stmt=con.createStatement();

ResultSet rs=stmt.executeQuery("select * from

login");

while(rs.next())

String Dname= rs.getString("username");

String Dpass=rs.getString("password");

if(user.equals(Dname) && pass.equals(Dpass))

flag=true;

break;

con.close();

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page149
Subject Name- WT Lab Class/Branch: TE Computer Engineering

catch (Exception e)

e.printStackTrace();

if(flag==true)

return true;

else

return false;

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page150
Subject Name- WT Lab Class/Branch: TE Computer Engineering

4. LoginValidate.java
import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.RequestDispatcher;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet("/LoginValidate")

public class LoginValidate extends HttpServlet

protected void doPost(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException

response.setContentType("text/html");

PrintWriter out=response.getWriter();

String UserName=request.getParameter("username");

String Password=request.getParameter("password");

//out.println("Username :"+UserName);

//out.println("<br>Pass:"+Password);

DBConnection d=new DBConnection();

if(d.verify(UserName, Password))

RequestDispatcher
rd=request.getRequestDispatcher("Home.jsp");

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page151
Subject Name- WT Lab Class/Branch: TE Computer Engineering

rd.forward(request, response);

else

out.println("<b><center>Username or Password is
Wrong Please Retry</center></b>");

RequestDispatcher
rd=request.getRequestDispatcher("index.html");

rd.include(request, response);

5. Home.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!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=UTF-8">

<title>Insert title here</title>

</head>

<body>

<center><h2> <font color="red">Welcome to Course Consultation

Website</h2></font>

<table border="1">

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page152
Subject Name- WT Lab Class/Branch: TE Computer Engineering

<tr>

<th>Qualification</th>

<th>Intrest</th>

<th>Course Suggestion</th>

</tr>

<tr>

<td>12th</td>

<td>Programming</td>

<td>C,C++</td>

</tr>

<tr>

<td>12th</td>

<td>Web Design</td>

<td>HTML,CSS,JavaScript</td>

</tr>

<tr>

<td>12th</td>

<td>Car Design</td>

<td>AutoCAD, CATIA</td>

</tr>

<tr>

<td>12th</td>

<td>Robotics</td>

<td>Artificial Intelligence and Robotics</td>

</tr>

</table>

</center>

</body>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page153
Subject Name- WT Lab Class/Branch: TE Computer Engineering

</html>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page154
Subject Name- WT Lab Class/Branch: TE Computer Engineering

6. Register.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!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=UTF-8">

<title>Insert title here</title>

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

</head>

<body>

<div class="register">

<form action="addDataTodatabase.jsp" name="myform" onsubmit="return

validateform()" method="post">

<label><b>Username</b></label>

<input type="text" name="username" id="username" placeholder=

"Username" required="required" onfocus="this.value = '';">

<br> <label><b>Password</b></label>

<input type="password" name="password" id="password"

placeholder="password" required="required" onfocus="this.value =
'';">

<br><label><b>Mobile Number</b></label>

<input type="text" name="mobile" id="mobile" placeholder= "Mobile

Number" required="required" onfocus="this.value = '';">

<br><label><b>E-Mail Address</b></label>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page155
Subject Name- WT Lab Class/Branch: TE Computer Engineering

<input type="text" name="email" id="email" placeholder= "E-Mail

Address" required="required" onfocus="this.value = '';">

<br><label><b>Age</b></label>

<input type="text" name="age" id="age" placeholder= "Age"

required="required" onfocus="this.value = '';">

<br><input type="submit" value="Register">

</form>

</body>

</html>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page156
Subject Name- WT Lab Class/Branch: TE Computer Engineering

7. addDataTodatabase.jsp
<%@page import="java.sql.*"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!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=UTF-8">

<title>Insert title here</title>

</head>

<body>

<%

boolean flag=false;

String username =request.getParameter("username");

String password =request.getParameter("password");

String mobile =request.getParameter("mobile");

String email =request.getParameter("email");

String age =request.getParameter("age");

Class.forName("com.mysql.jdbc.Driver");

Connection
con=DriverManager.getConnection("jdbc:mysql://localhost/tecomp","roo
t","root");

Statement stmt=con.createStatement();

int i=stmt.executeUpdate("insert into login

values('"+username+"','"+password+"','"+mobile+"','"+email+"','"+age
+"')");

if(i>0)

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page157
Subject Name- WT Lab Class/Branch: TE Computer Engineering

//out.println("<b><font color=\"Red\"> You Have Register

Successfully <a href=\"index.html\">goto Login Page");

response.sendRedirect("index.html");

%>

</body>

</html>

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page158
Subject Name- WT Lab Class/Branch: TE Computer Engineering

Output:
1. Login Page

2. Home Page

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page159
Subject Name- WT Lab Class/Branch: TE Computer Engineering

3. Registration Page

4. Database

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page160
Subject Name- WT Lab Class/Branch: TE Computer Engineering

FAQs:
1. What is JSP?
2. What is Servlet?
3. What is the purpose of MySQL?
4. What is database?
5. What is the syntax of JSP?
6. How do we connect JSP file to database?
7. Explain life cycle of servlet?
8. What is session management?
9. Explain advantages of JSP over Servlet?
10. Explain Scriptlet, Expression, Declaration tag in JSP?
11. List default object in JSP?

Department of Computer Engineering

PCET’s PCCOER, Pune-412101 Page161