Web Technology - WordPress.com · For security purposes, Tomcat should be run as an unprivileged user (i.e. not root). We will create a new user and group that will run the Tomcat

TE 2015 Pattern

Web Technology Laboratory Manual Prepared by : Prof. A. N. Gharu

Semester : VI

Course Code: 310256

Pune Vidyarthi Griha’s COLLEGE OF ENGINNERING, NASHIK.

Department of Computer Engineering

PVGCOE,NASHIK, Department of Computer Engineering

1 | P a g e

List of Experiments

Sr. No.

Experiment Title Page No.

1 Installation and Configuration of Web Application Servers Tomcat 02

2 Design and develop any suitable web application using HTML, CSS and XML 09

3 Perform validation of all fields in assignment no.2 by using Java script/JQuery 25

4 Add dynamic web application essence in assignment no. 3 using Servlet, JSP and MySQL

31

5 Add dynamic web application essence in assignment no. 3 using PHP, MySQL database connectivity and AJAX controls.

40

6 Redesign, develop and deploy assignment no. 4 using Strut 49

7 Redesign, develop and deploy assignment no. 5 using Angular JS 64

8 Design, Develop and Deploy separate web application using EJB/CMS/JSF/Spring/Bootstrap.

70

9 Mini Project 76


2 | P a g e

ASSIGNMENT NO - 01 AIM:

Installation and Configuration Web application server Tomcat Apache.

LEARNING OBJECTIVES:

1. Understanding Working of Web application server 2. Able to install and configure Tomcat Apache.

THEORY:

Installation and Configuration of Tomcat Apache.

Seep 1 Install Java

sudo apt-get install default-jdk

STEP 2: CREATE TOMCAT USER

For security purposes, Tomcat should be run as an unprivileged user (i.e. not root). We will

create a new user and group that will run the Tomcat service.

a) First, create a new tomcat group:

sudo groupadd tomcat

b) Next, create a new tomcat user.

We'll make this user a member of the tomcat group, with a home directory of /opt/tomcat (where

we will install Tomcat), and with a shell of /bin/false (so nobody can log into the account):

sudo useradd -s /bin/false -g tomcat -d /opt/tomcat tomcat

STEP 3: INSTALL TOMCAT

a) Download Tomcat from following link

http://tomcat.apache.org/download-80.cgi

http://tomcat.apache.org/download-80.cgi


3 | P a g e

b) change to the /tmp directory on your server.

This is a good directory to download ephemeral items, like the Tomcat tarball, which we won't

need after extracting the Tomcat contents:

Create following directories

cd /tmp

We will install Tomcat to the /opt/tomcat directory.

c) Create the directory.

sudo mkdir /opt/tomcat

d) Copy downloaded package to current directory

cp /home/staff1/Downloads/apache-tomcat-8.5.24.tar.gz .

e) Extract package to tomcat directory

sudo tar xzvf apache-tomcat-8.5.24.tar.gz -C /opt/tomcat –strip-components=1

STEP 4: UPDATE PERMISSIONS

The tomcat user that we set up needs to have access to the Tomcat installation. We'll set that up

now.

a) Change to the directory where we unpacked the Tomcat installation:

/tmp$ cd /opt/tomcat

b) Give the tomcat group ownership over the entire installation directory:

/opt/tomcat$ sudo chgrp -R tomcat /opt/tomcat

c) Next, give the tomcat group read access to the conf directory and all of its contents, and execute

access to the directory itself:


4 | P a g e

/opt/tomcat$ sudo chmod -R g+r conf

/opt/tomcat$ sudo chmod g+x conf

d) Make the tomcat user the owner of the webapps, work, temp, and logs directories:

/opt/tomcat$ sudo chown -R tomcat webapps/ work/ temp/ logs/

Now that the proper permissions are set up, we can create a systemd service file to manage the

Tomcat process.

STEP 5: CREATE A SYSTEMD SERVICE FILE

We want to be able to run Tomcat as a service, so we will set up systemd service file.

Tomcat needs to know where Java is installed. This path is commonly referred to as

"JAVA_HOME".

The easiest way to look up that location is by running this command:

sudo update-java-alternatives -l

Output

java-1.8.0-openjdk-amd64 1081 /usr/lib/jvm/java-1.8.0-openjdk-amd64

The correct JAVA_HOME variable can be constructed by taking the output from the last column

(highlighted in red) and appending /jre to the end. Given the example above, the correct

JAVA_HOME for this server would be:

JAVA_HOME

/usr/lib/jvm/java-1.8.0-openjdk-amd64/jre

Your JAVA_HOME may be different.

a) Open tomcat.service file

With this piece of information, we can create the systemd service file. Open a file called

tomcat.service in the /etc/systemd/system directory by typing:

sudo gedit /etc/systemd/system/tomcat.service

b) Paste the following contents into your service file.

Modify the value of JAVA_HOME if necessary to match the value you found on your system. You

may also want to modify the memory allocation settings that are specified in CATALINA_OPTS:


5 | P a g e

[Unit]

Description=Apache Tomcat Web Application Container

After=network.target

[Service]

Type=forking

Environment=JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-amd64/jre

Environment=CATALINA_PID=/opt/tomcat/temp/tomcat.pid

Environment=CATALINA_HOME=/opt/tomcat

Environment=CATALINA_BASE=/opt/tomcat

Environment='CATALINA_OPTS=-Xms512M -Xmx1024M -server -XX:+UseParallelGC'

Environment='JAVA_OPTS=-Djava.awt.headless=true -

Djava.security.egd=file:/dev/./urandom'

ExecStart=/opt/tomcat/bin/startup.sh

ExecStop=/opt/tomcat/bin/shutdown.sh

User=tomcat

Group=tomcat

UMask=0007

RestartSec=10

Restart=always

[Install]

WantedBy=multi-user.target

When you are finished, save and close the file.

c) Next, reload the systemd daemon so that it knows about our service file:

/opt/tomcat$ sudo systemctl daemon-reload

d) Start the Tomcat service by typing:

/opt/tomcat$ sudo systemctl start tomcat

e) Double check that it started without errors by typing:

/opt/tomcat$ sudo systemctl status tomcat

STEP 6: ADJUST THE FIREWALL AND TEST THE TOMCAT SERVER

Now that the Tomcat service is started, we can test to make sure the default page is available.

Before we do that, we need to adjust the firewall to allow our requests to get to the service. If you

followed the prerequisites, you will have a ufw firewall enabled currently.

Tomcat uses port 8080 to accept conventional requests.


6 | P a g e

a) Allow traffic to that port by typing:

sudo ufw allow 8080

b) With the firewall modified, you can access the default splash page by going to your domain or

IP address followed by :8080 in a web browser:

http://localhost:8080/

You will see the default Tomcat splash page, in addition to other information. However, if you

click the links for the Manager App, for instance, you will be denied access. We can configure that

access next.

c) Enable the service file so that Tomcat automatically starts at boot:

sudo systemctl enable tomcat

STEP 7: CONFIGURE TOMCAT WEB MANAGEMENT INTERFACE

In order to use the manager web app that comes with Tomcat, we must add a login to our Tomcat

server.


7 | P a g e

a) Edit the tomcat-users.xml file:

sudo gedit /opt/tomcat/conf/tomcat-users.xml

You will want to add a user who can access the manager-gui and admin-gui (web apps that come

with Tomcat). You can do so by defining a user, similar to the example below, between the tomcat-

users tags. Be sure to change the username and password to something secure:

Add followin line before </tomcat-users>

<role rolename="manager-gui"/>

<role rolename="admin-gui"/>

<user username="admin" password="admin" roles="manager-gui,admin-gui"/>

b) To put our changes into effect, restart the Tomcat service:

sudo systemctl restart tomcat

Output

SERVER STATUS GUI


8 | P a g e

Application Manager GUI

Tomcat Manager GUI


9 | P a g e

ASSIGNMENT NO – 02

AIM: Design and develop any suitable web application using HTML, CSS and XML


1. Understand Basic Tags of HTML 2. Understand CSS

3. Understand use of XML in HTML.

THEORY:

Basic HTML

HTML stands for Hyper Text Markup Language. An HTML file is a text file containing markup

tags. The markup tags tell the Web browser how to display the page. An HTML file must have an

‘htm’ or ‘html’ file extension. An HTML file can be created using a simple text editor. The rule-

making body of the Web is World Wide Web Consortium (W3C). W3C puts together

specifications for Web standards. The most essential Web standards are HTML, CSS and XML.

The latest HTML standard is XHTML 1.0.

Example: Creating a simple web page

1. Start Notepad.

2. Type in the following text

<html>

<head>

<title>Title of page</title>

</head>

<body>

This is a very basic webpage. <b>This text will be displayed in bold</b>

</body>

</html>

3. Save the file as "firstpage.html".

4. Double click the saved file the browser will display the page.

EXAMPLE EXPLAINED:

The first tag in your HTML document is <html>. This tag tells your browser that this is the start

of an HTML document. The last tag in your document is </html>. This tag tells your browser that

this is the end of the HTML document.

The text between the <head> tag and the </head> tag is header information. Header information

is not displayed in the browser window.

The text between the <title> tags is the title of your document. The title is displayed in your

browser's caption.

The text between the <body> tags is the text that will be displayed in your browser.

The text between the <b> and </b> tags will be displayed in a bold font.


10 | P a g e

HTM OR HTML EXTENSION?

When you save an HTML file, you can use either the .htm or the .html extension. We have used .html in our example.

HTML TAGS

1. HTML tags are used to mark-up HTML elements

2. HTML tags are surrounded by the two characters < and >

3. The surrounding characters are called angle brackets

4. HTML tags normally come in pairs like <b> and </b>

5. The first tag in a pair is the start tag, the second tag is the end tag

6. The text between the start and end tags is the element content

7. HTML tags are not case sensitive, <b> means the same as <B>

USE LOWERCASE TAGS?

We have just said that HTML tags are not case sensitive: <B> means the same as <b>. It is

recommended to always use because

IF YOU WANT TO PREPARE YOURSELF FOR THE NEXT GENERATIONS OF HTML, YOU SHOULD START

USING LOWERCASE TAGS. THE WORLD WIDE WEB CONSORTIUM RECOMMENDS LOWERCASE TAGS

IN THEIR HTML 4 RECOMMENDATION, AND XHTML (THE NEXT GENERATION HTML) DEMANDS

LOWERCASE TAGS.

Tags can have attributes. Attributes can provide additional information about the HTML elements

on your page.

This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute,

you can tell the browser that the background color of your page should be red, like this: <body

bgcolor="red">.

Attributes always come in name/value pairs like this: name="value".

Attributes are always added to the start tag of an HTML element.

QUOTE STYLES, "RED" OR 'RED'?

Attribute values should always be enclosed in quotes. Double style quotes are the most common,

but single style quotes are also allowed. In some rare situations, like when the attribute value itself

contains quotes, it is necessary to use single quotes:

HEADINGS

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines

the smallest heading.

<h1>This is a heading</h1>






HTML automatically adds an extra blank line before and after a heading.

PARAGRAPHS

Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>


11 | P a g e

<p>This is another paragraph</p>

HTML automatically adds an extra blank line before and after a paragraph.

LINE BREAKS

The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.

<p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no closing tag.

COMMENTS IN HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be

ignored by the browser. You can use comments to explain your code, which can help you when

you edit the source code at a later date.



Note: that you need an exclamation point after the opening bracket, but not before the closing

bracket.

TEXT FORMATTING TAGS

Tag Description

<b> Defines bold text

<big> Defines big text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines small text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

CHARACTER ENTITIES

Some characters have a special meaning in HTML, like the less than sign (<) that defines the start

of an HTML tag. If we want the browser to actually display these characters we must insert

character entities in the HTML source.

A character entity has three parts: an ampersand (&), an entity name or a # and an entity number,

and finally a semicolon (;).

To display a less than sign in an HTML document we must write: < or <

The advantage of using a name instead of a number is that a name is easier to remember. The

disadvantage is that not all browsers support the newest entity names, while the support for entity

numbers is very good in almost all browsers.

Note that the entities are case sensitive.

http://www.w3schools.com/html/html_reference.asp











12 | P a g e

NON-BREAKING SPACE

THE MOST COMMON CHARACTER ENTITY IN HTML IS THE NON-BREAKING SPACE.

Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will

remove 9 of them. To add spaces to your text, use the character entity.

MOST COMMON CHARACTER ENTITIES

Result Description Entity Name Entity Number

non-breaking space

< less than < <

> greater than > >

& ampersand & &

" quotation mark " "

' apostrophe ' (does not work in IE) '

ADDITIONAL COMMONLY USED CHARACTER ENTITIES

Result Description Entity Name Entity Number

¢ cent ¢ ¢

£ pound £ £

¥ yen ¥ ¥

§ section § §

© copyright © ©

® registered trademark ® ®

× multiplication × ×

÷ division ÷ ÷

THE ANCHOR TAG AND THE HREF ATTRIBUTE

HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie,

etc.

The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link, the href attribute is used to address the document

to link to, and the words between the open and close of the anchor tag will be displayed as a

hyperlink.

This anchor defines a link to EEE 111 webpage:

<a href="http://faraday.ee.emu.edu.tr/eee111">Visit EEE 111</a>

THE TARGET ATTRIBUTE

With the target attribute, you can define where the linked document will be opened.

The line below will open the document in a new browser window:

<a href="http://faraday.ee.emu.edu.tr/eee111" target="_blank"> Visit EEE 111</a>

http://faraday.ee.emu.edu.tr/eee111

http://faraday.ee.emu.edu.tr/eee111


13 | P a g e

THE ANCHOR TAG AND THE NAME ATTRIBUTE

The name attribute is used to create a named anchor. When using named anchors we can create

links that can jump directly into a specific section on a page, instead of letting the user scroll

around to find what he/she is looking for.

Below is the syntax of a named anchor:

<a name="label">Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you

care to use.

The line below defines a named anchor:

<a href="#down">Bottom of the page</a>

You should notice that a named anchor is not displayed in a special way.

To link directly to the "down" section, add a # sign and the name of the anchor to the end of a

URL, like this:

<a href="http://faraday.ee.emu.edu.tr/eee111#down">Jump to down section</a>

A hyperlink to the Useful Tips Section from WITHIN the file "firstpage.html" will look like this:

<A NAME="DOWN">DOWN IS HERE</A>

TABLES

TABLES ARE DEFINED WITH THE <TABLE> TAG. A TABLE IS DIVIDED INTO ROWS (WITH THE <TR>

TAG), AND EACH ROW IS DIVIDED INTO DATA CELLS (WITH THE <TD> TAG). THE LETTERS TD

STANDS FOR "TABLE DATA," WHICH IS THE CONTENT OF A DATA CELL. A DATA CELL CAN

CONTAIN TEXT, IMAGES, LISTS, PARAGRAPHS, FORMS, HORIZONTAL RULES, TABLES, ETC.

<table border="1">

<tr>

<td>row 1, cell 1</td>


</tr>

<tr>



</tr>

</table>

How it looks in a browser:

row 1, cell 1 row 1, cell 2


TABLES AND THE BORDER ATTRIBUTE

If you do not specify a border attribute the table will be displayed without any borders. Sometimes

this can be useful, but most of the time, you want the borders to show.

To display a table with borders, you will have to use the border attribute:

<table border="1">

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

http://faraday.ee.emu.edu.tr/eee111#down


14 | P a g e

</tr>

</table>

HEADINGS IN A TABLE

Headings in a table are defined with the <th> tag. <table border="1">

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>



</tr>

<tr>



</tr>

</table>


Heading Another Heading



EMPTY CELLS IN A TABLE

Table cells with no content are not displayed very well in most browsers.

<table border="1">

<tr>



</tr>

<tr>


<td></td>

</tr>

</table>



row 2, cell 1

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the

border).

To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible:

<table border="1">


15 | P a g e

<tr>



</tr>

<tr>


<td> </td>

</tr>

</table>



row 2, cell 1

TABLE TAGS

Tag Description

<table> Defines a table

<th> Defines a table header

<tr> Defines a table row

<td> Defines a table cell

<caption> Defines a table caption

<colgroup> Defines groups of table columns

<col> Defines the attribute values for one or more columns in a table

<thead> Defines a table head

<tbody> Defines a table body

<tfoot> Defines a table footer

HTML supports ordered, unordered and definition lists

UNORDERED LISTS

An unordered list is a list of items. The list items are marked with bullets (typically small black

circles).

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

Here is how it looks in a browser:

Coffee

Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.












16 | P a g e

ORDERED LISTS

An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>


1. Coffee

2. Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

DEFINITION LISTS

A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each

definition-list definition starts with the <dd> tag.

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>


Coffee

Milk

Black hot drink

White cold drink

Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links,

other lists, etc.

LIST TAGS

Tag Description

<ol> Defines an ordered list

<ul> Defines an unordered list

<li> Defines a list item

<dl> Defines a definition list

<dt> Defines a definition term

<dd> Defines a definition description








17 | P a g e

WHAT IS CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify

the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text,

the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what

background images or colors are used, layout designs,variations in display for different devices

and screen sizes as well as a variety of other effects.

ADVANTAGES OF CSS

CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML

pages. You can define a style for each HTML element and apply it to as many Web pages

as you want.

Pages load faster − If you are using CSS, you do not need to write HTML tag attributes

every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.

So less code means faster download times.

Easy maintenance − To make a global change, simply change the style, and all elements

in all the web pages will be updated automatically.

Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you

can give a far better look to your HTML page in comparison to HTML attributes.

Multiple Device Compatibility − Style sheets allow content to be optimized for more than

one type of device. By using the same HTML document, different versions of a website

can be presented for handheld devices such as PDAs and cell phones or for printing.

Global web standards − Now HTML attributes are being deprecated and it is being

recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to

make them compatible to future browsers.

Offline Browsing − CSS can store web applications locally with the help of an offline

catche.Using of this, we can view offline websites.The cache also ensures faster loading

and better overall performance of the website.

Platform Independence − The Script offer consistent platform independence and can

support latest browsers as well.

WHO CREATES AND MAINTAINS CSS?

CSS was invented by Håkon Wium Lie on October 10, 1994 and maintained through a group of

people within the W3C called the CSS Working Group. The CSS Working Group creates

documents called specifications. When a specification has been discussed and officially ratified

by W3C members, it becomes a recommendation.

These ratified specifications are called recommendations because the W3C has no control over the

actual implementation of the language. Independent companies and organizations create that

software.

NOTE − The World Wide Web Consortium, or W3C is a group that makes recommendations

about how the Internet works and how it should evolve.

CSS VERSIONS

Cascading Style Sheets, level 1 (CSS1) was came out of W3C as a recommendation in December

1996. This version describes the CSS language as well as a simple visual formatting model for all

the HTML tags.


18 | P a g e

CSS2 was became a W3C recommendation in May 1998 and builds on CSS1. This version adds

support for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element

positioning and tables.

CSS3 was became a W3C recommendation in June 1999 and builds on older versions CSS. it has

divided into documentations is called as Modules and here each module having new extension

features defined in CSS2.

CSS3 MODULES

CSS3 Modules are having old CSS specifications as well as extension features.

Selectors

Box Model

Backgrounds and Borders

Image Values and Replaced Content

Text Effects

2D/3D Transformations

Animations

Multiple Column Layout

User Interface

CSS Syntax

A CSS comprises of style rules that are interpreted by the browser and then applied to the

corresponding elements in your document. A style rule is made of three parts −

Selector − A selector is an HTML tag at which a style will be applied. This could be any

tag like <h1> or <table> etc.

Property - A property is a type of attribute of HTML tag. Put simply, all the HTML

attributes are converted into CSS properties. They could be color, border etc.

Value - Values are assigned to properties. For example, color property can have value

either red or #F1F1F1 etc.

You can put CSS Style Rule Syntax as follows −

selector { property: value }

Example: You can define a table border as follows −

table{ border :1px solid #C00; }

Here table is a selector and border is a property and given value 1px solid #C00 is the value of that

property.

You can define selectors in various simple ways based on your comfort. Let me put these selectors

one by one.


19 | P a g e

THE TYPE SELECTORS

This is the same selector we have seen above. Again, one more example to give a color to all level

1 headings:

h1 {

color: #36CFFF;

}

THE UNIVERSAL SELECTORS

Rather than selecting elements of a specific type, the universal selector quite simply matches the

name of any element type −

* {

color: #000000;

} This rule renders the content of every element in our document in black.

THE DESCENDANT SELECTORS

Suppose you want to apply a style rule to a particular element only when it lies inside a particular

element. As given in the following example, style rule will apply to <em> element only when it

lies inside <ul> tag.

ul em {

color: #000000;

}

THE CLASS SELECTORS

You can define style rules based on the class attribute of the elements. All the elements having that

class will be formatted according to the defined rule.

.black {

color: #000000;

} This rule renders the content in black for every element with class attribute set to black in our

document. You can make it a bit more particular. For example:

h1.black {

color: #000000;

}

This rule renders the content in black for only <h1> elements with class attribute set to black.

You can apply more than one class selectors to given element. Consider the following example:

<p class="center bold">

This para will be styled by the classes center and bold.

</p>

THE ID SELECTORS

You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule.

#black {

color: #000000;

}

This rule renders the content in black for every element with id attribute set to black in our

document. You can make it a bit more particular. For example −

h1#black {


20 | P a g e

color: #000000;

}

This rule renders the content in black for only <h1> elements with id attribute set to black.

The true power of id selectors is when they are used as the foundation for descendant selectors,

For example:

#black h2 {

color: #000000;

}

In this example all level 2 headings will be displayed in black color when those headings will lie

with in tags having id attribute set to black.

THE CHILD SELECTORS

You have seen the descendant selectors. There is one more type of selector, which is very similar

to descendants but have different functionality. Consider the following example −

body > p {

color: #000000;

} This rule will render all the paragraphs in black if they are direct child of <body> element. Other

paragraphs put inside other elements like <div> or <td> would not have any effect of this rule.

THE ATTRIBUTE SELECTORS

You can also apply styles to HTML elements with particular attributes. The style rule below will

match all the input elements having a type attribute with a value of text −

input[type = "text"]{

color: #000000;

} The advantage to this method is that the <input type = "submit" /> element is unaffected, and the

color applied only to the desired text fields.

There are following rules applied to attribute selector.

p[lang] - Selects all paragraph elements with a lang attribute.

p[lang="fr"] - Selects all paragraph elements whose lang attribute has a value of exactly

"fr".

p[lang~="fr"] - Selects all paragraph elements whose lang attribute contains the word

"fr".

p[lang|="en"] - Selects all paragraph elements whose lang attribute contains values that

are exactly "en", or begin with "en-".

MULTIPLE STYLE RULES

You may need to define multiple style rules for a single element. You can define these rules to

combine multiple properties and corresponding values into a single block as defined in the

following example −

h1 {

color: #36C;

font-weight: normal;

letter-spacing: .4em;

margin-bottom: 1em;

text-transform: lowercase;

}


21 | P a g e

Here all the property and value pairs are separated by a semi colon (;). You can keep them in a

single line or multiple lines. For better readability we keep them into separate lines.

For a while, don't bother about the properties mentioned in the above block..

GROUPING SELECTORS

You can apply a style to many selectors if you like. Just separate the selectors with a comma, as

given in the following example −

h1, h2, h3 {

color: #36C;

font-weight: normal;

letter-spacing: .4em;

margin-bottom: 1em;

text-transform: lowercase;

} This define style rule will be applicable to h1, h2 and h3 element as well. The order of the list is

irrelevant. All the elements in the selector will have the corresponding declarations applied to

them.

You can combine the various id selectors together as shown below −

#content, #footer, #supplement {

position: absolute;

left: 510px;

width: 200px;

}

INTRODUCTION TO XML

XML is a software- and hardware-independent tool for storing and transporting data.

WHAT IS XML?

XML stands for eXtensible Markup Language XML is a markup language much like HTML

XML was designed to store and transport data

XML was designed to be self-descriptive

XML is a W3C Recommendation

XML DOES NOT DO ANYTHING

Maybe it is a little hard to understand, but XML does not DO anything.

This note is a note to Tove from Jani, stored as XML:

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>


22 | P a g e

The XML above is quite self-descriptive:

It has sender information.

It has receiver information

It has a heading

It has a message body.

But still, the XML above does not DO anything. XML is just information wrapped in tags.

Someone must write a piece of software to send, receive, store, or display it:

NOTE

To: Tove

From: Jani

REMINDER

Don't forget me this weekend!

THE 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 tags are not predefined like HTML tags are

XML DOES NOT USE PREDEFINED TAGS

The XML language has no predefined tags. The tags in the example above (like <to> and <from>) are not defined in any XML standard.

These tags are "invented" by the author of the XML document.

HTML works with predefined tags like <p>, <h1>, <table>, etc.

With XML, the author must define both the tags and the document structure.

XML IS EXTENSIBLE

Most XML applications will work as expected even if new data is added (or removed).

Imagine an application designed to display the original version of note.xml (<to> <from>

<heading> <body>).

Then imagine a newer version of note.xml with added <date> and <hour> elements, and a

removed <heading>.

The way XML is constructed, older version of the application can still work:

<note>

<date>2015-09-01</date>

<hour>08:30</hour>

<to>Tove</to>

<from>Jani</from>

<body>Don't forget me this weekend!</body>

</note>


23 | P a g e

OLD VERSION

NOTE

To: Tove

From: Jani

HEAD: (NONE)


NEW VERSION

NOTE

To: Tove

From: Jani

Date: 2015-09-01 08:30


XML SIMPLIFIES THINGS

It simplifies data sharing

It simplifies data transport

It simplifies platform changes

It simplifies data availability

Many computer systems contain data in incompatible formats. Exchanging data between

incompatible systems (or upgraded systems) is a time-consuming task for web developers. Large

amounts of data must be converted, and incompatible data is often lost.

XML stores data in plain text format. This provides a software- and hardware-independent way

of storing, transporting, and sharing data.

XML also makes it easier to expand or upgrade to new operating systems, new applications, or

new browsers, without losing data.

With XML, data can be available to all kinds of "reading machines" like people, computers,

voice machines, news feeds, etc.

Algorithm :

Start

Read user name and password

Check whether it is valid

Reda Data of book from XML file. Display Detail of book in Table format using CSS Stop

Conclusion: Hence we have created basic website using HTML,CSS, and XML.


24 | P a g e

ORAL QUESTIONS:

1. What are tags? 2. Do all HTML tags come in a pair?

3. What are some of the common lists that can be used when designing a page?

4. How do you insert a comment in HTML?

5. What is an image map?

6. How do you create links to sections within the same page?

7. What are style sheets?

8. State bullet types available in HTML

9. Write an HTML table tag sequence that outputs the following:

50 pcs 100 500

10 pcs 5 50

10. What are the limitations of CSS ?

11. What are the advantages of CSS ?

12. In how many ways can a CSS be integrated as a web page?

13. What benefits and demerits do External Style Sheets have?

14. What does CSS selector mean?

15. Differentiate Style Sheet concept from HTML?

16. What is the usage of Class selector?

17. What are the features of XML?

18. What are the differences between HTML and XML?

19. Which tag is used to find the version of XML and the syntax?

20. What is XML DOM Document?

21. What is an attribute?

22. What are the basic rules while writing XML?


25 | P a g e


Perform validation of all fields in assignment no.2 by using Java script/Jquery


Understand important of validation.

Understand Basic Syntax of JavaScript.

Understand Basic Syntax Of JQuery.

THEORY:

JavaScript

JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for

enhancing the interaction of a user with the webpage. In other words, you can make your webpage

more lively and interactive, with the help of JavaScript. JavaScript is also being used widely in

game development and Mobile application development.

How to Run JavaScript?

Being a scripting language, JavaScript cannot run on its own. In fact, the browser is

responsible for running JavaScript code. When a user requests an HTML page with JavaScript

in it, the script is sent to the browser and it is up to the browser to execute it. The main advantage

of JavaScript is that all modern web browsers support JavaScript. So, you do not have to worry

whether your site visitor uses Internet Explorer, Google Chrome, Firefox or any other browser.

JavaScript will be supported. Also, JavaScript runs on any operating system including Windows,

Linux or Mac. Thus, JavaScript overcomes the main disadvantages of VBScript (Now deprecated)

which is limited to just IE and Windows.

Tools You Need

To start with, you need a text editor to write your code and a browser to display the web pages you

develop. You can use text editor of your choice including Notepad++, Visual Studio Code,

Sublime Text, Atom or any other text editor you are comfortable with. You can use any web

browser including Google Chrome, Firefox, Microsoft Edge, Internet Explorer etc.

A Simple JavaScript Code

https://www.guru99.com/mobile-testing.html

https://www.guru99.com/unix-linux-tutorial.html

https://www.guru99.com/vbscript-tutorials-for-beginners.html


26 | P a g e

You should place all your JavaScript code within <script> tags (<script> and </script>) if you are

keeping your JavaScript code within the HTML document itself. This helps your browser

distinguish your JavaScript code from the rest of the code. As there are other client side scripting

languages (Example: VBScript), it is highly recommended that you specify the scripting language

you use. You have to use the type attribute within the <script> tag and set its value to

text/javascript like this:

<script type="text/javascript">

Example:

This code is editable. Click Run to Execute

<html>

<head>

<title>My First JavaScript code!!!</title>

<script type="text/javascript">

alert("Welcome!!! You are now learning JavaScript.");

</script>

</head>

<body>

</body>

</html>

Note: type="text/javascript" is not necessary in HTML5. Following code will work.

<html>

<head>

<title>My First JavaScript code!!!</title>

<script>

alert("Welcome!!! You are now learning JavaScript.");

</script>

</head>

<body>

</body>

</html>

USING VARIABLES IN JAVASCRIPT

Variables are used to store values (name = "John") or expressions (sum = x + y). Before using a

variable, you first need to declare it. You have to use the keyword var to declare a variable like

this:

var name;

You can assign a value to the variable either while declaring the variable or after declaring the

variable.

var name = "John";

OR

var name;

name = "John";

Naming Variables

Though you can name the variables as you like, it is a good programming practice to give

descriptive and meaningful names to the variables. Moreover, variable names should start with a

letter and they are case sensitive. Hence the variables studentname and studentName are different


27 | P a g e

because the letter n in name is different (n and N).

LEARN ARRAYS IN JAVASCRIPT

An array is an object that can store a collection of items. Arrays become really useful when you

need to store large amounts of data of the same type. Suppose you want to store details of 500

employees. If you are using variables, you will have to create 500 variables whereas you can do

the same with a single array. You can access the items in an array by referring to its

indexnumber and the index of the first element of any array is zero.

Creating an Array

You can create an array in JavaScript as given below.

var students = ["John", "Ann", "Kevin"];

Here, you are initializing your array as and when it is created with values “John”, “Ann” and

“Kevin”.The index of “John”, “Ann” and “Kevin” is 0, 1 and 2 respectively. If you want to add

more elements to the students array, you can do it like this:

students[3] = "Emma";

students[4] = "Rose";

You can also create an array using Array constructor like this:

var students = new Array("John", "Ann", "Kevin");

OR

var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin";

HOW TO USE LOOPS IN JAVASCRIPT

Loops are useful when you have to execute the same lines of code repeatedly, for a specific

number of times or as long as a specific condition is true. Suppose you want to type a ‘Hello’

message 100 times in your webpage. Of course, you will have to copy and paste the same line

100 times. Instead if you use loops, you can complete this task in just 3 or 4 lines.

Different Types of Loops

There are mainly four types of loops in JavaScript. 1. for loop

2. for/in loop (explained later)

3. while loop

4. do…while loop

FOR LOOP

Syntax:

for(statement1; statement2; statment3)

{

lines of code to be executed

}


28 | P a g e

1. The statement1 is executed first even before executing the looping code. So, this

statement is normally used to assign values to variables that will be used inside the loop.

2. The statement2 is the condition to execute the loop.

3. The statement3 is executed every time after the looping code is executed.

WHILE LOOP

Syntax:

while(condition)

{

lines of code to be executed

}

The “while loop” is executed as long as the specified condition is true. Inside the while loop, you

should include the statement that will end the loop at some point of time. Otherwise, your loop

will never end and your browser may crash.

DO…WHILE LOOP

Syntax: do

{

block of code to be executed

} while (condition)

The do…while loop is very similar to while loop. The only difference is that in do…while loop,

the block of code gets executed once even before checking the condition.

JQuery What is jQuery?

jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website.

jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and

wraps them into methods that you can call with a single line of code.

jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM

manipulation.

The jQuery library contains the following features:

HTML/DOM manipulation

CSS manipulation

HTML event methods

Effects and animations

AJAX

Utilities


29 | P a g e

Advantages of JQuery

ts light weight when compared to other javascript frameworks.

it has a wide range of plugins available for various specific needs.

it is easier for a designer to learn jQuery as it uses familiar CSS syntax. jQuery is Javascript

for Designers

Adding jQuery to Your Web Pages

There are several ways to start using jQuery on your web site. You can: Download the jQuery library from jQuery.com

Include jQuery from a CDN, like Google

Downloading jQuery

There are two versions of jQuery available for downloading: Production version - this is for your live website because it has been minified and

compressed

Development version - this is for testing and development (uncompressed and readable

code)

Both versions can be downloaded from jQuery.com.

The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag

(notice that the <script> tag should be inside the <head> section):

<head>

<script src="jquery-3.3.1.min.js"></script>

</head>

Tip: Place the downloaded file in the same directory as the pages where you wish to use it.

Do you wonder why we do not have type="text/javascript" inside the <script> tag?

This is not required in HTML5. JavaScript is the default scripting language in HTML5 and in all

modern browsers!

jQuery CDN

If you don't want to download and host jQuery yourself, you can include it from a CDN (Content

Delivery Network).

Both Google and Microsoft host jQuery.

To use jQuery from Google or Microsoft, use one of the following:

Google CDN:

<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

Microsoft CDN:

<head>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

</head>

CONCLUSIONS:

Hence, we have studied and implemented JavaScript and JQuery.

http://jquery.com/download/


30 | P a g e

ORAL QUESTION (Answer following Question)

1. What is the difference between JavaScript and jscript? 2. How to write a hello world example of JavaScript?

3. How to use external JavaScript file?

4. What is BOM?

5. What is DOM? What is the use of document object?

6. How to create function in JavaScript?

7. What are the JavaScript data types?

8. How to write html code dynamically using JavaScript?

9. How to create objects in JavaScript?

10. What is the output of 10+20+"30" in JavaScript?

11. What is jQuery?

12. Why jQuery is needed?

13. Whether jQuery HTML work for both HTML and XML documents?

14. What are the methods used to provide effects?

15. What is the advantage of using minimized version of jQuery?

16. Is jQuery is a JavaScript or JSON library file?

17. In what scenarios jQuery can be used?


31 | P a g e


Add dynamic web application essence in assignment no. 3 using Servlet, JSP and MySQL


Understanding Working of servlet. Understanding connectivity between servlet and MySQL

THEORY:

What is Servlet ? Servlets are an important component of a J2EE application. Servlets along with JavaServer Pages

(JSP) and EJB modules can be termed as server-side J2EE component types.

Servlet is a Java Programming Language.

Servlets are used to create web applications. Servlets are used to extend the applications hosted by web servers. Servlet runs in a J2EE

application server

Common Gateway Interface (CGI) technology was used for dynamic content prior to

introduction of Servlets.

Servlet Architecture Following diagram shows the process of Servlets in a Web Application.

The process can be summarized as follows: A client sends a request to a Web Server, through a Web Browser.

The Web Server searches for the required Servlet and initiates it. The Servlet then processes the client request and sends the response back to the server, which is

then forwarded to the client.


32 | P a g e

Advantages of a Servlet Servlets provide component based and platform-independent methods for building Web based

applications.

Each Request is run in a separate thread ,so servlet request processing is faster than CGI.

Servlets overcomes the limitations of CGI program.

Servlets run on Java Virtual Machine and in any platform and it is simple to write.

Servlet are more powerful and the performance is better.

Servlets are platform-independent. Servlet technology, in addition to improved performance, offers security, robustness, object

orientation, and platform independence.

As mentioned in the definition of servlets are fully integrated with the Java language and its

standard APIs. Hence JDBC for Java database connectivity is also integrated in it.

A servlet handles concurrent requests

Handling HTTP requests and send text and data back to the client is made easy by servlet request

and response objects.

Disadvantages of a Servlet Servlets often contain both business logic and presentation logic so it makes application difficult

to understand.

You would need JRE to be installed to run a servlet program.

Servlet API

The Servlet API is supported by all Servlet containers, such as Tomcat and Weblogic, etc. The

Application Programming Interface (API) contains interface and classes to write a servlet

program. The servlet API contains two packages as listed below: javax.servlet

javax.servlet.http

Package javax.servlet javax.servlet contains a number of classes and interface that allows the servlet to access the basic

services provided by the servlet container. Following table lists the classes and interface of

javax.servlet package:

Name Description Type

Servlet Defines methods that a servlet class must implement Interface

ServletConfig During initialization it allows the servlet container to pass

information to a servlet. Interface

ServletContext Servlet Context is used to communicate with the servlet

container to get the details of web application. Interface

ServletContextListener Receive notification about the changes made to the servlet

context of the Web application. Interface

ServletRequest It is used to request client information to the servlet Interface

ServletResponse It is used by servlet to write the response content to the

client. Interface

SingleThreadModel It uses the servlet instance to process only one request at a

time. Interface

ServletRequestListener In the web component it receives a notification of the

particular request that is coming in or out Interface


33 | P a g e

ServletRequestAttributeListener Notifies the changes in request attribute Interface

ServletContextAttributeListener The servlet context receives notification of the changes to be

made on attribute list. Interface

Filter

It is a reusable code that can transform the content of request,

responses and the header information from one format to

another.

Interface

FilterChain Stores information about a chain of filters. Interface

FilterConfig It is used during the initialization. Interface

RequestDispatcher It is used to dispatch the request from one component to

another. Interface

ServletContextEvent It gives the details of the life cycle events of the

ServletContext object. Class

ServletRequestEvent Indicates that the request that is about to come in or go out of

the web component. Class

ServletRequestWrapper Provides implementation of the ServletRequest interface to

receive the request from a servlet. Class

ServletResponseWrapper Provides implementation of the ServletResponse interface to

send response to the servlet. Class

ServletRequestAttributeEvent

Servlet container invokes this method to indicate whether the

attribute is to be added into the request, removed or replaced

from the request.

Class

ServletContextAttributeEvent

Servlet container invokes this method to indicate whether the

attribute is to be added into the context, removed or replaced

from the context.

Class

ServletInputStream Provides an input stream for reading a client requests. Class

ServletOutputStream Provides an output stream for writing servlet response to

client. Class

GenericServlet Implements javax.servlet.Servlet interface and provides the

basic implementation for the methods in this interface. Class

ServletException It is used to indicate that the request has generate an error. Class

UnavailableException Indicates that the servlet is currently unavailable to the

process. Class

Package javax.servlet.http The servlets using HTTP protocol are supported by the package javax.servlet.http. The list of

classes and interface of javax.servlet.http package are listed in the following table:

Name Description Type

HttpServletRequest The web container provides implementation to this interface and

encapsulates all HTTP based request information. Interface

HttpServletResponse Provide HTTP- specific functionality while sending a response. Interface


34 | P a g e

HttpSession It is a mechanism for storing client data across multiple HTTP

requests. Interface

HttpSessionBindingListener Notifies when the objects of its implementation class is added or

removed from the session. Interface

Cookie It is a file containing the information that is sent by web server to

a client. Class

HttpSessionBindingEvent This method is used to indicate whether the object is added into

the HttpSession object or removed from the HttpSession object. Class

HttpServlet Provides convenient methods for implementing for handling

HTTP request. Class

Servlet LifeCycle

Servlets are small programs that run at server side and creates dynamic web pages. Servlets

respond to any type of requests sent by user. In MVC architecture servlet act as controller. The

controller is the logic that processes and responds to the user requests. Life Cycle of Servlets

contain following steps: Load servlet class.

Create servlet instance.

Call the init method.

Call the service method.

Call the destroy method.

Servlet Class Loading The first step in creation of a servlet component is to load the servlet class file into web

container’s JVM (Java Virtual Machine). This step is invoked when either first time servlet is

invoked or configured in the web.xml with load-on-startup element.

Creating Servlet Instance After the servlet class has been loaded into the web container’s JVM, the next step is to create an

instance of that class. Servlet specification declares one and only one servlet instance will be

created for a single definition in the deployment descriptor.

The init () method After servlet instance is created, the web container initializes the parameters that were specified

in the deployment descriptor. This method is invoked only when servlet is first loaded into

memory. The syntax of init () method look like this: public void init () throws Servlet Exception {

//code

}

The service () method After the servlet component has been initialized, the web container can begin sending requests to

that component using the service method .This method is used to process the request. For each

request the web container will issue unique request and response to the service method. The

syntax of service () method as follows: public void service (Servletrequest request, Servletresponse response)

throws ServletException, IOException {

}


35 | P a g e

When service () method is called by web container it invokes doGet (), doPost (), doPut (),

doDelete (), doTrace (), doOptions (), getLastModified () methods. Recommended for you: Get network issues from WhatsUp Gold. Not end users.

The doGet () and doPost () are the two methods which are frequently used with each service

request. We must override doGet () and doPost () methods depending on type of request.

The doGet () method: By using doGet () method we can send specific amount of data. If we use

doGet () method data is shown in address bar. We must override doGet () method depending on

type of request. It can be defined as follows: public void doGet (HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException{

//code

}

The doPost () method: We can send large amount of data by using doPost () method. By using

this method data is not viewable in address bar. When we want to send secure data like

passwords and other things doPost () method is used. We must override doPost () method

depending on type of request. It can be defined as follows: public void doPost (HttpServletRequest request, HttpServletResponse response)


//code

}

doDelete (): It is used to delete files, web pages or documents from the server. If requests are

formatted incorrectly then it will return HTTP “Bad Request” error. It can be defined as follows: protected void doDelete (HttpServletRequest request, HttpServletResponse response)


//code

}

doPut() : This method is used to put files, web pages or documents in the server means for

uploading files on the server. If requests are formatted incorrectly then it will return HTTP “Bad

Request” error. It can be defined as follows: protected void doPut (HttpServletRequest request, HttpServletResponse response)


//code

}

doTrace () : This method is used for logging and debugging purpose. It can be used for testing

the requested message. There is no need to override this method. It can be defined as follows: protected void doTrace(HttpServletRequest request, HttpServletResponse response)


//code

}

doOptions (): This method handles OPTIONS request. There is no need to override this method.

It determines which HTTP method supported by server and returns correct header. If requests are

formatted incorrectly then it will return HTTP “Bad Request” error.

It can be defined as follows: protected void doOptions(HttpServletRequest request, HttpServletResponse response)


//code

http://shareasale.com/r.cfm?b=1080234&u=1121089&m=75001&urllink&afftrack


36 | P a g e

}

getLastModified (): It returns the time when request was last modified. This method should

override GET request to return modification time of object.

It can be defined as follows: protected long getLastModified (HttpServletRequest request)


//code

}

The destroy () method When a web application is being shut down web container will call destroy method. It is used to

clean up any resources that servlet might have initialized. The syntax of destroy () method as

follows: public void destroy(){

//code

}

Sample Code

Following is the sample source code structure of a servlet example to show Hello World −

// Import required java libraries

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

// do nothing.

}

}


37 | P a g e

MySQL MySQL is a Relational DataBase Management System (RDBMS).

RDBMS means R--DB--MS.

- DB stands for Database, a repository for the information store.

The data in a database is organized into tables, and each table is organized into rows and

columns.

Each row in a table is called a record. A record may contains several pieces (called fields)

of information, and each column in a table is known as a field.

-MS stands for Management System, the software that allows you to insert, retrieve, modify, or

delete records.

-R stands for Relational, indicates a particular kind of DBMS that is good at relating information

stored in one table to information stored in another table by looking for elements common to each

of them. Relational DBMS has the advantage of efficient storage, and retrieval mechanisms for

data, and uses normalization process during design of RDBMS. Database normalization process

is beyond the scope of this article, and several references are available.

MySQL operates using client/server architecture in which the server runs on the machine

containing the databases and clients connect to the server over a network. The server operating

systems is usually a Linux (like Redhat 9.0 etc.) or Windows 2000 operating system. Typically

mySQL is supported on Windows XP, Windows Server 2003, Red Hat Fedora Linux, and Debian

Linux, and others. As with any other client/server application, MySQL is a multi-user database

system, meaning several users can access the database simultaneously. Here:

- The server (MySQL server) listens for client requests coming in over the network and accesses

database contents according to those requests and provides that to the clients.

- Clients are programs that connect to the database server and issue queries in a pre-specified

format. MySQL is compatible with the standards based SQL (SQL stands for Structured Query

Language) language. The client program may contact the server programmatically (meaning a

program call the server during execution) or manually. For example, when you are issuing

commands over a telnet session to a MySQL server, you are issuing the requests to the server by

typing commands at your command prompt manually. On the other hand, if you have input some

data (say your credit card information on the Internet towards purchase of some goods) in a form,

and the form is processed by using a server side program, then the MySQL server is contacted

programmatically. This is often the case in credit card approvals, member subscriptions etc.

Features of MySQL

1. Speed:Ofcourse, the speed at which a server side program runs depends primarily on the server

hardware. Given that the server hardware is optimal, MySQL runs very fast. It supports clustered

servers for demanding applications.

2. Ease of use:MySQL is a high-performance, relatively simple database system. From the

beginning, MySQL has typically been configured, monitored, and managed from the command

line. However, several MySQL graphical interfaces are available as described below:

MySQL Administrator: This tool makes it possible for administrators to set up, evaluate,

and tune their MySQL database server. This is intended as a replacement for mysqladmin.

MySQL Query Browser: Provides database developers and operators with a graphical

database operation interface. It is especially useful for seeing multiple query plans and

result sets in a single user interface.


38 | P a g e

Configuration Wizard: Administrators can choose from a predefined list of optimal

settings, or create their own.

MySQL System Tray: Provides Windows-based administrators a single view of their

MySQL instance, including the ability to start and stop their database servers.

3. Cost:MySQL is available free of cost. MySQL is a "Open Source" database. MySQL is part of

LAMP (Linux, Apache, MySQL, PHP / Perl / Python) environemtn, a fast growing open source

enterprise software stack. More and more companies are using LAMP as an alternative to

expensive proprietary software stacks because of its lower cost, reliability, and documentation.

4.Query Language Support:MySQL understands standards based SQL (Structured Query

Language).

5. Capability :Many clients can connect to the server at the same time. Clients can use multiple

database simultaneously. You can access MySQL using several interfaces such as command-line

clients, Web browsers.

6. Connectivity and security: MySQL is fully networked, and database can be accessed from

anywhere on the Internet, so you can share your data with anyone, anywhere. The connectivity

could be achieved with Windows programs by using ODBC drivers. By using the ODBC connector

to MySQL, any ODBC-aware client application (for example, Microsoft Office, report writers,

Visual Basic) can connect to MySQL.

7. Portability: MySQL runs on many varieties of UNIX, as well as on other non-UNIX systems,

such as Windows and OS/2. MySQL runs on hardware from home PCs to high-end server. MySQL

can be installed on Windows XP, Windows Server 2003, Red Hat Fedora Linux, Debian Linux,

and others.

MySQL Tools

1. A SQL server: This is an engine which provides access to your databases.

2. Client programs for accessing the server: A program allows you to enter queries directly and

view results.

3. A client library for writing your own programs: You can write your own programs into the client

library using C.

Algorithm:

Start

Create Web Page

Connect to MySQL


Depending on user name and password find department of user from database

Display books of respective Department.

Stop

CONCLUSION: Hence we created dynamic website using MySQL and Servlet.


39 | P a g e

ORAL QUESTION:

1. What is different between web server and application server? 2. Which HTTP method is non-idempotent?

3. What is the difference between GET and POST method?

4. What is MIME Type?

5. What is a web application and what is it’s directory structure?

6. What is a servlet?

7. What are the advantages of Servlet over CGI?

8. What are common tasks performed by Servlet Container?

9. What is ServletConfig object?

10. What is ServletContext object?

11. What is difference between ServletConfig and ServletContext?

12. What is Request Dispatcher?

13. What is difference between PrintWriter and ServletOutputStream?

14. Can we get PrintWriter and ServletOutputStream both in a servlet?

15. How can we create deadlock situation in servlet?

16. What is the use of servlet wrapper classes?

https://www.journaldev.com/2015/servlet-interview-questions-and-answers#web-server-vs-application-server

https://www.journaldev.com/2015/servlet-interview-questions-and-answers#http-idempotent-methods

https://www.journaldev.com/2015/servlet-interview-questions-and-answers#http-get-vs-post

https://www.journaldev.com/2015/servlet-interview-questions-and-answers#mime-type

https://www.journaldev.com/2015/servlet-interview-questions-and-answers#web-application-directory

https://www.journaldev.com/2015/servlet-interview-questions-and-answers#what-is-servlet

https://www.journaldev.com/2015/servlet-interview-questions-and-answers#servlet-vs-cgi

https://www.journaldev.com/2015/servlet-interview-questions-and-answers#servlet-container

https://www.journaldev.com/2015/servlet-interview-questions-and-answers#servletconfig

https://www.journaldev.com/2015/servlet-interview-questions-and-answers#servletcontext

https://www.journaldev.com/2015/servlet-interview-questions-and-answers#servletconfig-vs-servletcontext

https://www.journaldev.com/2015/servlet-interview-questions-and-answers#request-dispatcher

https://www.journaldev.com/2015/servlet-interview-questions-and-answers#printwriter-vs-servletoutputstream

https://www.journaldev.com/2015/servlet-interview-questions-and-answers#printwriter-servletoutputstream

https://www.journaldev.com/2015/servlet-interview-questions-and-answers#servlet-deadlock

https://www.journaldev.com/2015/servlet-interview-questions-and-answers#servlet-wrapper-classes


40 | P a g e


Add dynamic web application essence in assignment no. 3 using PHP, MySQL database

connectivity and AJAX controls.


Understand the working of PHP

Understanding Importance of AJAX

Implementation of connectivity betweeon PHP and MySQL.

THEORY:

What is PHP?

PHP is a server side scripting language. that is used to develop Static websites or Dynamic

websites or Web applications. PHP stands for Hypertext Pre-processor, that earlier stood for

Personal Home Pages.

PHP scripts can only be interpreted on a server that has PHP installed.

The client computers accessing the PHP scripts require a web browser only.

A PHP file contains PHP tags and ends with the extension ".php".

What is a Scripting Language?

A script is a set of programming instructions that is interpreted at runtime. A scripting language

is a language that interprets scripts at runtime. Scripts are usually embedded into other software

environments. The purpose of the scripts is usually to enhance the performance or perform routine

tasks for an application. Server side scripts are interpreted on the server while client side scripts

are interpreted by the client application. PHP is a server side script that is interpreted on the server

while JavaScript is an example of a client side script that is interpreted by the client browser. Both

PHP and JavaScript can be embedded into HTML pages.

Programming Language Vs Scripting Language

Programming language Scripting language

Has all the features needed to develop

complete applications. Mostly used for routine tasks

The code has to be compiled before it can be

executed

The code is usually executed without

compiling

Does not need to be embedded into other

languages

Is usually embedded into other software

environments.

What does PHP stand for?

PHP means - Personal Home Page, but it now stands for the recursive backronym PHP:

Hypertext Preprocessor.

PHP code may be embedded into HTML code, or it can be used in combination with various web

template systems, web content management system and web frameworks.

https://www.guru99.com/interactive-javascript-tutorials.html


41 | P a g e

Php Syntax

A PHP file can also contain tags such as HTML and client side scripts such as JavaScript.

HTML is an added advantage when learning PHP Language. You can even learn PHP

without knowing HTML but it’s recommended you at least know the basics of HTML.

Database management systems DBMS for database powered applications.

For more advanced topics such as interactive applications and web services, you will

need JavaScript and XML.

The flowchart diagram shown below illustrates the basic architecture of a PHP web application

and how the server handles the requests.

Why use PHP?

You have obviously head of a number of programming languages out there; you may be

wondering why we would want to use PHP as our poison for the web programming. Below are

some of the compelling reasons.

PHP is open source and free.

Short learning curve compared to other languages such as JSP, ASP etc.

Large community document


42 | P a g e

Most web hosting servers support PHP by default unlike other languages such as ASP

that need IIS. This makes PHP a cost effective choice.

PHP is regular updated to keep abreast with the latest technology trends.

Other benefit that you get with PHP is that it’s a server side scripting language; this

means you only need to install it on the server and client computers requesting for

resources from the server do not need to have PHP installed; only a web browser would

be enough.

PHP has in built support for working hand in hand with MySQL; this doesn’t mean you

can’t use PHP with other database management systems. You can still use PHP with

o Postgres

o Oracle

o MS SQL Server

o ODBC etc. PHP is cross platform; this means you can deploy your application on a number of

different operating systems such as windows, Linux, Mac OS etc.

What is PHP used for & Market share

In terms of market share, there are over 20 million websites and application on the internet

developed using PHP scripting language.

This may be attributed to the points raised above;

The diagram below shows some of the popular sites that use PHP

PHP vs Asp.Net VS JSP VS CFML

The table below compares the various server side scripting languages with PHP

FEATURE PHP ASP JSP CFML

Learning curve short Longer than

PHP Longer than PHP Longer than PHP

Web hosting

Supported by

almost all

hosting servers

Needs

dedicated

server

Fairly supported

Needs dedicated server

Open source Yes No Yes Both commercial and

open source

Web services

support Built in

Uses the .NET

framework

Uses add on

libraries Built in

https://www.guru99.com/sql.html


43 | P a g e

Integration with

HTML Easy

Fairly

complex Fairly complex Easy

MySQL support

Native

Needs third

party drivers

Needs third party

drivers

Current version has

native support. Older

versions use ODBC

Easily extended

by other

languages

Yes

No

Extended using

Java classes and

libraries.

Yes

PHP File Extensions

File extension and Tags In order for the server to identify our PHP files and scripts, we must

save the file with the “.php” extension. Older PHP file extensions include

.phtml

.php3

.php4

.php5

.phps

PHP was designed to work with HTML, and as such, it can be embedded into the HTML code.

You can create PHP files without any html tags and that is called Pure PHP file .

The server interprets the PHP code and outputs the results as HTML code to the web browsers.

In order for the server to identify the PHP code from the HTML code, we must always enclose

the PHP code in PHP tags.

A PHP tag starts with the less than symbol followed by the question mark and then the words

“php”.

PHP is a case sensitive language, “VAR” is not the same as “var”.

The PHP tags themselves are not case-sensitive, but it is strongly recommended that we use

lower case letter. The code below illustrates the above point.

<?php … ?>

We will be referring to the PHP lines of code as statements. PHP statements end with a semi

colon (;). If you only have one statement, you can omit the semi colon. If you have more than

one statement, then you must end each line with a semi colon. For the sake of consistency, it is

recommended that you always end your statement(s) with a semi colon. PHP scripts are

executed on the server. The output is returned in form of HTML.

PHP Hello world

The program shown below is a basic PHP application that outputs the words “Hello World!”

When viewed in a web browser.

<?php

echo "Hello world";

?>

Output:

Hello world


44 | P a g e

What is Ajax? AJAX is the acronym for Asynchronous JavaScript & XML. It is a technology that reduces the

interactions between the server and client. It does this by updating only part of a web page rather

than the whole page. The asynchronous interactions are initiated by JavaScript.

JavaScript is a client side scripting language. It is executed on the client side by the web browsers

that support JavaScript.JavaScript code only works in browsers that have JavaScript enabled.

XML is the acronym for Extensible Markup Language. It is used to encode messages in both

human and machine readable formats. It’s like HTML but allows you to create your custom tags.

For more details on XML, see the article on XML

Why use AJAX?

It allows developing rich interactive web applications just like desktop applications. Validation can be performed done as the user fills in a form without submitting it. This can

be achieved using auto completion. The words that the user types in are submitted to the

server for processing. The server responds with keywords that match what the user entered.

It can be used to populate a dropdown box depending on the value of another dropdown

box

Data can be retrieved from the server and only a certain part of a page updated without

loading the whole page. This is very useful for web page parts that load things like

o Tweets

o Commens

o Users visiting the site etc.

How to Create an PHP Ajax application

We will create a simple application that allows users to search for popular PHP MVC

frameworks.

Our application will have a text box that users will type in the names of the framework.

We will then use mvc AJAX to search for a match then display the framework’s complete name

just below the search form.

Step 1) Creating the index page

Index.php <html>

<head>

<title>PHP MVC Frameworks - Search Engine</title>

<script type="text/javascript" src="//cdn.guru99.com/auto_complete.js"></script>

</head>

<body>

<h2>PHP MVC Frameworks - Search Engine</h2>

https://www.guru99.com/interactive-javascript-tutorials.html

https://www.guru99.com/php-and-xml.html


45 | P a g e

<p><b>Type the first letter of the PHP MVC Framework</b></p>

<form method="POST" action="index.php">

<p><input type="text" size="40" id="txtHint" onkeyup="showName(this.value)"></p>

</form>

<p>Matches: <span id="txtName"></span></p>

</body>

</html>

HERE,

“onkeyup="showName(this.value)"” executes the JavaScript function showName

everytime a key is typed in the textbox.

This feature is called auto complete

Step 2) Creating the frameworks

page frameworks.php

<?php

$frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ;

$name = $_GET["name"];

if (strlen($name) > 0) {

$match = "";

for ($i = 0; $i < count($frameworks); $i++) {

if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) {

if ($match == "") {

$match = $frameworks[$i];

} else {

$match = $match . " , " . $frameworks[$i];

}

}


46 | P a g e

}

}

echo ($match == "") ? 'no match found' : $match;

?>

Step 3) Creating the JS script

auto_complete.js <script>

function showName(str){

if (str.length == 0){ //exit function if nothing has been typed in the textbox

document.getElementById("txtName").innerHTML=""; //clear previous results

return;

}

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

} else {// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function() {

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

document.getElementById("txtName").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","frameworks.php?name="+str,true);

xmlhttp.send();


47 | P a g e

}

</script>

HERE,

“if (str.length == 0)” check the length of the string. If it is 0, then the rest of the script is

not executed.

“if (window.XMLHttpRequest)…” Internet Explorer versions 5 and 6 use ActiveXObject

for AJAX implementation. Other versions and browsers such as Chrome, FireFox use

XMLHttpRequest. This code will ensure that our application works in both IE 5 & 6 and

other high versions of IE and browsers.

“xmlhttp.onreadystatechange=function…” checks if the AJAX interaction is complete

and the status is 200 then updates the txtName span with the returned results.

Step 4) Testing our PHP Ajax application

Assuming you have saved the file index.php In phututs/ajax, browse to the

URL http://localhost/phptuts/ajax/index.php

Type the letter C in the text box You will get the following results.

http://localhost/phptuts/ajax/index.php


48 | P a g e

The above example demonstrates the concept of AJAX and how it can help us create rich

interaction applications.

Algorithm:

Start

Create Web Page

Connect to MySQL



Display books of respective Department. Stop

CONCLUSION: Hence we created dynamic website using MySQL,PHP and AJAX.

ORAL QUESTION

1) What is PHP?

2) What is PEAR in PHP?

3) Who is known as the father of PHP?

4) What was the old name of PHP?

5) Explain the difference b/w static and dynamic websites?

6) What is the name of scripting engine in PHP?

7) Explain the difference between PHP4 and PHP5.

8) What are the popular Content Management Systems (CMS) in PHP?

9) What are the popular frameworks in PHP?

10) Which programming language does PHP resemble to?

11) List some of the features of PHP7.

12) What is "echo" in PHP?

13) What is "print" in PHP?

14) What is the difference between "echo" and "print" in PHP?

15) How a variable is declared in PHP?

16) What is the difference between $message and $$message?

17) What are the ways to define a constant in PHP?

1. What is Ajax?

2. How many types of triggers are present in update panel?

3. What are all the controls of Ajax?

4. How to control the duration of an Ajax request?


49 | P a g e


Redesign, develop and deploy assignment no. 4 using Strut


To understand Basics of Struts.

THEORY:

Introduction to Struts

Apache Struts is an elegant, extensible framework for creating enterprise-ready Java web

applications. This framework is designed to streamline the full development cycle from building,

to deploying and maintaining applications over time. Apache Struts was originally known as

Web Work 2.

BASIC MVC ARCHITECTURE

Model View Controller or MVC as it is popularly called, is a software design pattern for

developing web applications. A Model View Controller pattern is made up of the following three

parts −

Model − The lowest level of the pattern which is responsible for maintaining data.

View − This is responsible for displaying all or a portion of the data to the user.

Controller − Software Code that controls the interactions between the Model and View.

MVC is popular as it isolates the application logic from the user interface layer and supports

separation of concerns. Here the Controller receives all requests for the application and then

works with the Model to prepare any data needed by the View. The View then uses the data

prepared by the Controller to generate a final presentable response. The MVC abstraction can be

graphically represented as follows.

THE MODEL


50 | P a g e

The model is responsible for managing the data of the application. It responds to the request

from the view and it also responds to instructions from the controller to update itself.

THE VIEW

It means presentation of data in a particular format, triggered by a controller's decision to present

the data. They are script-based templating systems like JSP, ASP, PHP and very easy to integrate

with AJAX technology.

THE CONTROLLER

The controller is responsible for responding to the user input and perform interactions on the data

model objects. The controller receives the input, it validates the input and then performs the

business operation that modifies the state of the data model

OVERVIEW

Struts2 is a popular and mature web application framework based on the MVC design pattern.

Struts2 is not just a new version of Struts 1, but it is a complete rewrite of the Struts architecture.

The Webwork framework initially started with Struts framework as the basis and its goal was to

offer an enhanced and improved framework built on Struts to make web development easier for

the developers.

After a while, the Webwork framework and the Struts community joined hands to create the

famous Struts2 framework.

STRUTS FRAMEWORK FEATURES

Here are some of the great features that may force you to consider Struts2 − POJO Forms and POJO Actions − Struts2 has done away with the Action Forms that

were an integral part of the Struts framework. With Struts2, you can use any POJO to

receive the form input. Similarly, you can now see any POJO as an Action class.

Tag Support − Struts2 has improved the form tags and the new tags which allow the

developers to write less code.

AJAX Support − Struts2 has recognized the take over by Web2.0 technologies, and has

integrated AJAX support into the product by creating AJAX tags, this function is very

similar to the standard Struts2 tags.

Easy Integration − Integration with other frameworks like Spring, Tiles and SiteMesh is

now easier with a variety of integration available with Struts2.

Template Support − Support for generating views using templates.

Plugin Support − The core Struts2 behavior can be enhanced and augmented by the use

of plugins. A number of plugins are available for Struts2.

Profiling − Struts2 offers integrated profiling to debug and profile the application. In

addition to this, Struts also offers integrated debugging with the help of built in

debugging tools.

Easy to Modify Tags − Tag markups in Struts2 can be tweaked using Freemarker

templates. This does not require JSP or java knowledge. Basic HTML, XML and CSS

knowledge is enough to modify the tags.

Promote Less configuration − Struts2 promotes less configuration with the help of

using default values for various settings. You don't have to configure something unless it

deviates from the default settings set by Struts2.

View Technologies − Struts2 has a great support for multiple view options (JSP,

Freemarker, Velocity and XSLT)

Listed above are the Top 10 features of Struts which makes it as an Enterprise ready framework.


51 | P a g e

STRUTS DISADVANTAGES

Though Struts comes with a list of great features, there are some limitations of the current

version - Struts which needs further improvement. Listed are some of the main points −

Bigger Learning Curve − To use MVC with Struts, you have to be comfortable with the

standard JSP, Servlet APIs and a large & elaborate framework.

Poor Documentation − Compared to the standard servlet and JSP APIs, Struts has fewer

online resources, and many first-time users find the online Apache documentation

confusing and poorly organized.

Less Transparent − With Struts applications, there is a lot more going on behind the

scenes than with normal Java-based Web applications which makes it difficult to

understand the framework.

Final note, a good framework should provide generic behavior that many different types of

applications can make use of it.

ENVIRONMENT SETUP

STEP 1 - SETUP JAVA DEVELOPMENT KIT (JDK)

You can download the latest version of SDK from Oracle's Java site − Java SE Downloads. You

will find instructions for installing JDK in downloaded files, follow the given instructions to

install and configure the setup. Finally, set PATH and JAVA_HOME environment variables to

refer to the directory that contains java and javac, typically java_install_dir/bin and

java_install_dir respectively.

If you are running Windows and installed the SDK in C:\jdk1.5.0_20, you should be inputting

the following line in your C:\autoexec.bat file.

set PATH = C:\jdk1.5.0_20\bin;%PATH%

set JAVA_HOME = C:\jdk1.5.0_20

Alternatively, on Windows NT/2000/XP −

You can right-click on My Computer, Select Properties, then Advanced, then

Environment Variables. Then, you would update the PATH value and press the OK

button.

On Unix (Solaris, Linux, etc.), if the SDK is installed in /usr/local/jdk1.5.0_20 and you

use the C shell, you would put the following into your .cshrc file.

On Unix (Solaris, Linux, etc.), if the SDK is installed in /usr/local/jdk1.5.0_20 and you use the C

shell, you would put the following into your .cshrc file.

setenv PATH /usr/local/jdk1.5.0_20/bin:$PATH

setenv JAVA_HOME /usr/local/jdk1.5.0_20

Alternatively, if you use an Integrated Development Environment (IDE) like Borland JBuilder,

Eclipse, IntelliJ IDEA, or Sun ONE Studio, compile and run a simple program to confirm that

the IDE knows where you installed Java, otherwise do proper setup as per the given document of

IDE.

STEP 2 - SETUP APACHE TOMCAT

You can download the latest version of Tomcat from https://tomcat.apache.org/. Once you

downloaded the installation, unpack the binary distribution into a convenient location.

For example in C:\apache-tomcat-6.0.33 on windows, or /usr/local/apachetomcat-6.0.33 on

Linux/Unix and create CATALINA_HOME environment variable pointing to these locations.

You can start Tomcat by executing the following commands on windows machine, or you can

simply double click on startup.bat

https://www.oracle.com/technetwork/java/javase/downloads/index.html

https://tomcat.apache.org/


52 | P a g e

%CATALINA_HOME%\bin\startup.bat

or

C:\apache-tomcat-6.0.33\bin\startup.bat

Tomcat can be started by executing the following commands on Unix (Solaris, Linux, etc.)

machine −

$CATALINA_HOME/bin/startup.sh

or

/usr/local/apache-tomcat-6.0.33/bin/startup.sh

After a successful startup, the default web applications included with Tomcat will be available

by visiting http://localhost:8080/. If everything is fine, then it should display the following

result −

Further information about configuring and running Tomcat can be found in the documentation

included here, as well as on the Tomcat website: https://tomcat.apache.org/

Tomcat can be stopped by executing the following commands on windows machine −

%CATALINA_HOME%\bin\shutdown

or

C:\apache-tomcat-5.5.29\bin\shutdown

Tomcat can be stopped by executing the following commands on Unix (Solaris, Linux, etc.)

machine −

$CATALINA_HOME/bin/shutdown.sh

https://tomcat.apache.org/


53 | P a g e

or

/usr/local/apache-tomcat-5.5.29/bin/shutdown.sh

STEP 3 - SETUP ECLIPSE (IDE)

All the examples in this tutorial are written using Eclipse IDE. I suggest that, you have the latest

version of Eclipse installed in your machine.

To install Eclipse Download the latest Eclipse binaries from https://www.eclipse.org/downloads/.

Once you download the installation, unpack the binary distribution into a convenient location.

For example in C:\eclipse on windows, or /usr/local/eclipse on Linux/Unix and finally set PATH

variable appropriately. Eclipse can be started by executing the following commands on windows

machine, or you can simply double click on eclipse.exe

%C:\eclipse\eclipse.exe

Eclipse can be started by executing the following commands on Unix (Solaris, Linux, etc.)

machine −

$/usr/local/eclipse/eclipse

After a successful startup, if everything is fine, it should display the following result −

STEP 4 - SETUP STRUTS2 LIBRARIES

Now if everything is fine, then you can proceed to setup your Struts2 framemwork. Following

are the simple steps to download and install Struts2 on your machine.

Make a choice whether you want to install Struts2 on Windows, or Unix and then

proceed to the next step to download .zip file for windows and .tz file for Unix.

https://www.eclipse.org/downloads/


54 | P a g e

Download the latest version of Struts2 binaries from

https://struts.apache.org/download.cgi.

At the time of writing this tutorial, I downloaded struts-2.0.14-all.zip and when you

unzip the downloaded file it will give you directory structure inside C:\struts-2.2.3 as

follows.

Second step is to extract the zip file in any location, I downloaded & extracted struts-2.2.3-

all.zip in c:\ folder on my Windows 7 machine so that I have all the jar files into C:\struts-

2.2.3\lib. Make sure you set your CLASSPATH variable properly otherwise you will face

problem while running your application

ARCHITECTURE

From a high level, Struts2 is a pull-MVC (or MVC2) framework. The Model-ViewController

pattern in Struts2 is implemented with the following five core components −

Actions

Interceptors

Value Stack / OGNL

Results / Result types

View technologies

Struts is slightly different from a traditional MVC framework, where the action takes the role of

the model rather than the controller, although there is some overlap.

https://struts.apache.org/download.cgi


55 | P a g e

The above diagram depicts the Model, View and Controller to the Struts2 high level architecture.

The controller is implemented with a Struts2 dispatch servlet filter as well as interceptors, this

model is implemented with actions, and the view is a combination of result types and results.

The value stack and OGNL provides common thread, linking and enabling integration between

the other components.

Apart from the above components, there will be a lot of information that relates to configuration.

Configuration for the web application, as well as configuration for actions, interceptors, results,

etc.

This is the architectural overview of the Struts MVC pattern. We will go through each

component in more detail in the subsequent chapters.

REQUEST LIFE CYCLE

Based on the above diagram, you can understand the work flow through user's request life cycle

in Struts as follows −

User sends a request to the server for requesting for some resource (i.e. pages).

The Filter Dispatcher looks at the request and then determines the appropriate Action.

Configured interceptor functionalities applies such as validation, file upload etc.

Selected action is performed based on the requested operation.

Again, configured interceptors are applied to do any post-processing if required.

Finally, the result is prepared by the view and returns the result to the user.

HELLO WORLD EXAMPLE

As you have already learnt from the Struts architecture, when you click on a hyperlink or submit

an HTML form in a Struts web-application, the input is collected by the Controller which is sent

to a Java class called Actions. After the Action is executed, a result selects a resource to render

the response. The resource is generally a JSP, but it can also be a PDF file, an Excel spreadsheet,

or a Java applet window.


56 | P a g e

Assuming that you already have built your development environment. Now, let us proceed for

building our first Hello World Struts2 project. The aim of this project is to build a web

application that collects the user's name and displays "Hello World" followed by the user name.

We would have to create following four components for any Struts project −

Sr.No Components & Description

1

Action

Create an action class which will contain complete business logic and control the

interaction between the user, the model, and the view.

2 Interceptors

Create interceptors if required, or use existing interceptors. This is part of Controller.

3 View

Create a JSPs to interact with the user to take input and to present the final messages.

4

Configuration Files

Create configuration files to couple the Action, View and Controllers. These files are

struts.xml, web.xml, struts.properties.

I am going to use Eclipse IDE, so that all the required components will be created under a

Dynamic Web Project. Let us now start with creating Dynamic Web Project.

CREATE A DYNAMIC WEB PROJECT

Start your Eclipse and then go with File > New > Dynamic Web Project and enter project name

as HelloWorldStruts2 and set rest of the options as given in the following screen −


57 | P a g e

Select all the default options in the next screens and finally check Generate Web.xml

deployment descriptor option. This will create a dynamic web project for you in Eclipse. Now

go with Windows > Show View > Project Explorer, and you will see your project window

something as below −

Now copy following files from Struts lib folder C:\struts-2.2.3\lib to our project's WEB-INF\lib

folder. To do this, you can simply drag and drop all the following files into WEB-INF\lib folder.

commons-fileupload-x.y.z.jar

commons-io-x.y.z.jar

commons-lang-x.y.jar

commons-logging-x.y.z.jar

commons-logging-api-x.y.jar freemarker-x.y.z.jar

javassist-.xy.z.GA

ognl-x.y.z.jar

struts2-core-x.y.z.jar

xwork-core.x.y.z.jar

CREATE ACTION CLASS

Action class is the key to Struts application and we implement most of the business logic in

action class. So let us create a java file HelloWorldAction.java under Java Resources > src with

a package name com.tutorialspoint.struts2 with the contents given below.

The Action class responds to a user action when user clicks a URL. One or more of the Action

class's methods are executed and a String result is returned. Based on the value of the result, a

specific JSP page is rendered.

package com.tutorialspoint.struts2;

public class HelloWorldAction {


58 | P a g e

private String name;

public String execute() throws Exception {

return "success";

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

}

This is a very simple class with one property called "name". We have standard getters and setter

methods for the "name" property and an execute method that returns the string "success".

The Struts framework will create an object of the HelloWorldAction class and call the executed

method in response to a user's action. You put your business logic inside this method which

finally returns the String constant. In other words, for each URL, you would have to implement

one action class and either you can use that class name directly as your action name or you can

map to some other name using struts.xml file as shown below.

CREATE A VIEW

We need a JSP to present the final message, this page will be called by Struts framework when a

predefined action will happen and this mapping will be defined in struts.xml file. So let us create

the below jsp file HelloWorld.jsp in the WebContent folder in your eclipse project. To do this,

right click on the WebContent folder in the project explorer and select New >JSP File.

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

<%@ taglib prefix = "s" uri = "/struts-tags" %>

<html>

<head>

<title>Hello World</title>

</head>

<body>

Hello World, <s:property value = "name"/>

</body>

</html>

The taglib directive tells the Servlet container that this page will be using the Struts tags and that

these tags will be preceded by s.

The s:property tag displays the value of action class property "name> which is returned by the

method getName() of the HelloWorldAction class.

CREATE MAIN PAGE


59 | P a g e

We also need to create index.jsp in the WebContent folder. This file will serve as the initial

action URL where a user can click to tell the Struts framework to call a defined method of the

HelloWorldAction class and render the HelloWorld.jsp view.

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

pageEncoding = "ISO-8859-1"%>

<%@ taglib prefix = "s" uri = "/struts-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Hello World</title>

</head>

<body>

<h1>Hello World From Struts2</h1>

<form action = "hello">

<label for = "name">Please enter your name</label><br/>

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

<input type = "submit" value = "Say Hello"/>

</form>

</body>

</html>

The hello action defined in the above view file will be mapped to the HelloWorldAction class

and its execute method using struts.xml file. When a user clicks on the Submit button it will

cause the Struts framework to run the execute method defined in the HelloWorldAction class and

based on the returned value of the method, an appropriate view will be selected and rendered as a

response.

CONFIGURATION FILES

We need a mapping to tie the URL, the HelloWorldAction class (Model), and the

HelloWorld.jsp (the view) together. The mapping tells the Struts framework which class will

respond to the user's action (the URL), which method of that class will be executed, and what

view to render based on the String result that method returns.

So let us create a file called struts.xml. Since Struts requires struts.xml to be present in the

classes folder. Hence, create struts.xml file under the WebContent/WEB-INF/classes folder.

Eclipse does not create the "classes" folder by default, so you need to do this yourself. To do

this, right click on the WEB-INF folder in the project explorer and select New > Folder. Your

struts.xml should look like −

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

<!DOCTYPE struts PUBLIC

"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

<constant name = "struts.devMode" value = "true" />

http://www.w3.org/TR/html4/loose.dtd

http://struts.apache.org/dtds/struts-2.0.dtd


60 | P a g e

<package name = "helloworld" extends = "struts-default">

<action name = "hello"

class = "com.tutorialspoint.struts2.HelloWorldAction"

method = "execute">

<result name = "success">/HelloWorld.jsp</result>

</action>

</package>

</struts>

Few words which need to be understood regarding the above configuration file. Here, we set the

constant struts.devMode to true, because we are working in development environment and we

need to see some useful log messages. Then, we define a package called helloworld.

Creating a package is useful when you want to group your actions together. In our example, we

named our action as "hello" which is corresponding to the URL /hello.action and is backed up

by theHelloWorldAction.class. The execute method of HelloWorldAction.class is the method

that is run when the URL /hello.action is invoked. If the outcome of the execute method returns

"success", then we take the user to HelloWorld.jsp.

Next step is to create a web.xml file which is an entry point for any request to Struts. The entry

point of Struts2 application will be a filter defined in deployment descriptor (web.xml). Hence,

we will define an entry of org.apache.struts2.dispatcher.FilterDispatcher class in web.xml. The

web.xml file needs to be created under the WEB-INF folder under WebContent. Eclipse had

already created a skeleton web.xml file for you when you created the project. So, lets just modify

it as follows −


<web-app xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"

xmlns = "http://java.sun.com/xml/ns/javaee"

xmlns:web = "http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

xsi:schemaLocation = "http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"

id = "WebApp_ID" version = "3.0">

<display-name>Struts</display-name>

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

<filter>

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

<filter-class>

org.apache.struts2.dispatcher.FilterDispatcher

</filter-class>

</filter>

<filter-mapping>

http://www.w3.org/2001/XMLSchema-instance

http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd



http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd


61 | P a g e

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

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

</filter-mapping>

</web-app>

We have specified index.jsp to be our welcome file. Then we have configured the Struts2 filter to

run on all urls (i.e, any url that match the pattern /*)

TO ENABLE DETAILED LOG

You can enable complete logging functionality while working with Struts by creating

logging.properties file under WEB-INF/classes folder. Keep the following two lines in your

property file −

org.apache.catalina.core.ContainerBase.[Catalina].level = INFO

org.apache.catalina.core.ContainerBase.[Catalina].handlers = \

java.util.logging.ConsoleHandler

The default logging.properties specifies a ConsoleHandler for routing logging to stdout and also

a FileHandler. A handler's log level threshold can be set using SEVERE, WARNING, INFO,

CONFIG, FINE, FINER, FINEST or ALL.

That's it. We are ready to run our Hello World application using Struts framework.

PROCEDURE FOR EXECUTING THE APPLICATION

Right click on the project name and click Export > WAR File to create a War file.

Then deploy this WAR in the Tomcat's webapps directory.

Finally, start Tomcat server and try to access URL

http://localhost:8080/HelloWorldStruts2/index.jsp. This will give you following screen −

Enter a value "Struts2" and submit the page. You should see the next page


62 | P a g e

Note that you can define index as an action in struts.xml file and in that case you can call index

page as http://localhost:8080/HelloWorldStruts2/index.action. Check below how you can

define index as an action −


<!DOCTYPE struts PUBLIC

"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

<constant name = "struts.devMode" value = "true" />

<package name = "helloworld" extends = "struts-default">

<action name = "index">

<result >/index.jsp</result>

</action>

<action name = "hello"

class = "com.tutorialspoint.struts2.HelloWorldAction"

method = "execute">

<result name = "success">/HelloWorld.jsp</result>

</action>

</package>

</struts>

Algorithm:

Start

Create Web Page

Connect to MySQL




CONCLUSION: Hence we created dynamic website using Struts.

http://struts.apache.org/dtds/struts-2.0.dtd


63 | P a g e

ORAL QUESTIONS:-

1. What are the components of Struts Framework? 2. What’s the role of a handler in MVC based applications?

3. What’s the flow of requests in Struts based applications?

4. Which file is used by controller to get mapping information for request routing?

5. What’s the role of Action Class in Struts?

6. How an actionForm bean is created?

7. What are the two types of validations supported by Validator FrameWork?

8. What are the steps of Struts Installation?

9. How client side validation is enabled on a JSP form?

10. How action-mapping tag is used for request forwarding in Struts configuration file?


64 | P a g e


Redesign, develop and deploy assignment no. 5 using Angular JS


To understand implementation of AngularJS.

THEORY:

ANGULARJS INTRODUCTION

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.

ANGULARJS IS A JAVASCRIPT FRAMEWORK

AngularJS is a JavaScript framework. It is a library written in JavaScript. AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

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

ANGULARJS EXTENDS HTML

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.

ANGULARJS EXAMPLE

<!DOCTYPE html> <html>


<body>

<div ng-app="">

<p>Name: <input type="text" ng-model="name"></p>

<p ng-bind="name"></p>

</div>

</body>

</html>

Example explained:

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.


65 | P a g e

ANGULARJS DIRECTIVES

As you have already seen, AngularJS directives are HTML attributes with an ng prefix.

The ng-init directive initializes AngularJS application variables.

ANGULARJS EXAMPLE

<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>

Alternatively with valid HTML:

ANGULARJS EXAMPLE

<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>

You can use data-ng-, instead of ng-, if you want to make your page HTML valid.

You will learn a lot more about directives later in this tutorial.

ANGULARJS EXPRESSIONS

AngularJS expressions are written inside double braces: {{ expression }}.

AngularJS will "output" data exactly where the expression is written:

ANGULARJS EXAMPLE



<body>

<div ng-app="">

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

</div>

</body>

</html>

AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive.

ANGULARJS EXAMPLE



<body>

<div ng-app="">

<p>Name: <input type="text" ng-model="name"></p>

<p>{{name}}</p>

</div>


66 | P a g e

</body>

</html>

You will learn more about expressions later in this tutorial.

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.

ANGULARJS EXAMPLE

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

AngularJS modules define applications:

ANGULARJS MODULE

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

AngularJS controllers control applications:

ANGULARJS CONTROLLER

app.controller('myCtrl', function($scope) { $scope.firstName= "John";

$scope.lastName= "Doe";

});


AngularJS binds data to HTML using Expressions.


67 | P a g e


AngularJS expressions can be written inside double braces: {{ expression }}.

AngularJS expressions can also be written inside a directive: ng-bind="expression".

AngularJS will resolve the expression, and return the result exactly where the expression is

written.

AngularJS expressions are much like JavaScript expressions: They can contain literals,

operators, and variables.

Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}

EXAMPLE

<!DOCTYPE html>

<html>


<body>

<div ng-app="">


</div>

</body>

</html>

If you remove the ng-app directive, HTML will display the expression as it is, without solving it:

EXAMPLE

<!DOCTYPE html>

<html>


<body>

<div>


</div>

</body>

</html>


68 | P a g e

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:

EXAMPLE

<div ng-app="" ng-init="myCol='lightblue'">

<input style="background-color:{{myCol}}" ng-model="myCol">

</div>

ANGULARJS NUMBERS

AngularJS numbers are like JavaScript numbers:

EXAMPLE

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

Same example using ng-bind:

EXAMPLE

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>

Algorithm:

Start

Create Web Page

Connect to MySQL




CONCLUSION: Hence we created dynamic website using AngularJS.


69 | P a g e

Oral Questions:

1. What is the difference between Angular and jQuery?

2. Name the key features of AngularJS?

3. Explain data binding in AngularJS.

4. What are directives in AngularJS?

5. What are Controllers in AngularJS?

6. What is Angular Expression? How do you differentiate between Angular expressions and

JavaScript expressions?

7. What are the characteristics of ‘Scope’?

8. What are the advantages of using Angular.js framework?

9. Explain what is injector in AngularJS?

10. What is ng-app, ng-init and ng-model?


70 | P a g e

ASSIGNMENT NO - 08

AIM:

Design, Develop and Deploy separate web application using Bootstrap.

OBJECTIVES:

To understand basic concept of Bootstrap.

THEORY:

What is Bootstrap

Bootstrap is a powerful front-end framework for faster and easier web development. It includes

HTML and CSS based design templates for common user interface components like

Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs,

Accordion, Carousel and many other as well as optional JavaScript extensions.

Bootstrap also gives you ability to create responsive layout with much less efforts.

Advantages of Bootstrap

The biggest advantage of using Bootstrap is that it comes with free set of tools for creating flexible and responsive web layouts as well as common interface components.

Additionally, using the Bootstrap data APIs you can create advanced interface components like

Scrollspy and Typeaheads without writing a single line of JavaScript.

Here are some more advantages, why one should opt for Bootstrap:

Save lots of time — You can save lots of time and efforts using the Bootstrap predefined design

templates and classes and concentrate on other development work. Responsive features — Using Bootstrap you can easily create responsive designs. Bootstrap

responsive features make your web pages to appear more appropriately on different devices and screen resolutions without any change in markup.

Consistent design — All Bootstrap components share the same design templates and styles through a central library, so that the designs and layouts of your web pages are consistent throughout your development.

Easy to use — Bootstrap is very easy to use. Anybody with the basic working knowledge of HTML and CSS can start development with Bootstrap.

Compatible with browsers — Bootstrap is created with modern browsers in mind and it is compatible with all modern browsers such as Mozilla Firefox, Google Chrome, Safari, Internet Explorer, and Opera.

Open Source — And the best part is, it is completely free to download and use.


71 | P a g e

Getting Started with Bootstrap

Here, you will learn how easy it is to create a web page using Bootstrap. Before begin, be sure to

have a code editor and some working knowledge of HTML and CSS.

Downloading the Bootstrap Files

There are two versions available for download, compiled Bootstrap and Bootstrap source files.

Compiled download contain compiled and minified version of CSS and JavaScript files as well

as icons in font format for faster and easier web development, while the source contain original

source files for all CSS and JavaScript, along with a local copy of the docs.

For the purpose of better understanding we'll focus on the compiled Bootstrap files. It saves your

time because you don't have to bother every time including separate files for individual

functionality. It will also increase the performance of your website and saves the precious

bandwidth when you decided to move your site on production because of lesser HTTP request

and download size since files are compiled and minified.

Understanding the File Structure

Once downloaded the compiled Bootstrap, unzip the compressed folder to see the structure.

You'll find the following file structure and contents.

bootstrap/

|—— css/

| |—— bootstrap.css

| |—— bootstrap.min.css

| |—— bootstrap-theme.css

| |—— bootstrap-theme.min.css

|—— js/

| |—— bootstrap.js

| |—— bootstrap.min.js

|—— fonts/

| |—— glyphicons-halflings-regular.eot

| |—— glyphicons-halflings-regular.svg

| |—— glyphicons-halflings-regular.ttf

| |—— glyphicons-halflings-regular.woff

As you can see compiled version of Bootstrap provides compiled CSS and JS files

(bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*).

There are four font files (glyphicons-halflings-regular.*) inside the fonts folder. These fonts file includes more than 250 icons from the Glyphicon Halflings set.


72 | P a g e

Creating Your First Web Page with Bootstrap

So far you have understood the structure and the purposes of Bootstrap files, now it's time to put

Bootstrap into real use. In this section, we'll create a basic Bootstrap template that includes

everything we mentioned in the file structure.

Let's walk through the following steps. At the end of the tutorial, you will have made an HTML

file that displays "Hello world" message in your web browser.

Step 1: Creating a Basic HTML file

Open up your favorite code editor and create a new HTML file. Start with an empty window and

type the following code and save it as "basic.html" on your desktop.

Example

Try this code »

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-

scale=1">

<title>Basic HTML File</title>

</head>

<body>

<h1>Hello, world!</h1>

</body>

</html>

.

Step 2: Making this HTML File a Bootstrap Template

To make this HTML file a Bootstrap template, just include the appropriate Bootstrap CSS and JS

files. You should include JavaScript files at the bottom of the page — before closing of the

<body> tag (i.e. </body>) to improve the performance of your web pages.

Example

Try this code »

<!DOCTYPE html>

<html>

<head>


https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=basic-html-file

https://www.tutorialrepublic.com/html-reference/html-body-tag.php

https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=basic-bootstrap-template


73 | P a g e

<meta http-equiv="X-UA-Compatible" content="IE=edge">


scale=1">

<title>Basic Bootstrap Template</title>

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

href="css/bootstrap.min.css">



<link rel="stylesheet" href="css/bootstrap-theme.min.css">

</head>

<body>


<script src="js/jquery-1.11.3.min.js"></script>

<script src="js/bootstrap.min.js"></script>

</body>

</html>

And we're all set! after adding the Bootstrap's CSS and JS files and the required jQuery library,

we can begin to develop any site or application with Bootstrap framework.

Step 3: Saving the file

Now save the file on your desktop as "bootstrap-template.html".

Note: It is important that the extension .html is specified — some text editors, such as Notepad,

will automatically save it as .txt otherwise.

To open the file in a browser. Navigate to your file then double click on it. It will open in your

default Web browser. (If it does not, open your browser and drag the file to it.)

Including Bootstrap's Files via CDN

You can also include the Bootstrap's CSS and JavaScript files as well as the jQuery library

JavaScript file in your document using the freely available CDN (Content Delivery Network)

links, if you don't want to download and host the Bootstrap or jQuery yourself.

CDNs can offer a performance benefit by reducing the loading time, because they are hosting the

Bootstrap's files on multiple servers spread across the globe and when a user requests the file, it

will be served from the server nearest to them.

Example

Try this code »

<!DOCTYPE html>

<html>

<head>


https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=bootstrap-cdn-links


74 | P a g e

<title>Basic Bootstrap Template</title>


scale=1">

<link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-

BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"

crossorigin="anonymous">



<link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-

theme.min.css" integrity="sha384-

rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"

crossorigin="anonymous">

</head>

<body>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jq

uery.min.js"></script>

<script

src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.j

s" integrity="sha384-

Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"

crossorigin="anonymous"></script>

</body>

</html>

In the above example, we've included the compiled and minified version of Bootstrap's CSS and

JavaScript files as well as the necessary jQuery library using the CDN links. You'll also find

these CDN links in most of the practice examples code throughout this site.

The attributes integrity and crossorigin have been added to Bootstrap CDN to implement

Subresource Integrity (SRI). It is a security feature that enables you to mitigate the risk of attacks originating from compromised CDNs, by ensuring that the files your website fetches

(from a CDN or anywhere) have been delivered without unexpected manipulation. It works by

allowing you to provide a cryptographic hash that a fetched file must match.

CONCLUSION:-We have created website using bootstap.


75 | P a g e

Oral Questions:

1. Explain what is Bootstrap?

2. Explain why to choose Bootstrap for building the websites?

3. What are the key components of Bootstrap?

4. Explain what are class loaders in Bootstrap?

5. Explain what is Bootstrap Grid System?

6. What are offset columns in Bootstrap?

7. What is column ordering in Bootstrap?

8. What function you can use to wrap a page content?

9. Explain what pagination in bootstrap is and how they are classified?

10. What is the use of Jumbotron in Bootstrap?


76 | P a g e

ASSIGNMENT NO - 09 AIM:Mini Project

Report Format

Savitribai Phule Pune University

A

Mini Project Report On

PROJECT TITLE

Submitted By

XXXXXXX T15093

YYYYYYY T15093

ZZZZZZZ T15093

Under the guidance of

Prof. NAME OF GUIDE

In partial fulfilment of

Bachelor of Engineering

[T. E. Computer Engineering]

[MAY 2019] AT

Department of Computer Engineering

Pune Vidyarthi Griha’s

College Of Engineering, Nashik-4

Pune Vidyarthi Griha’s

COLLEGE OF ENGINEERING, Nashik. Department of Computer Engineering

CERTIFICATE

This is certify that the Mini Project entitled “PROJECT NAME”, submitted by

YOUR NAME is a record of bonafide work carried out by him, in the partial

fulfilment of the requirement for the award of Degree of Bachelor of

Engineering (Computer Engineering) at Pune Vidyarthi Griha’s college of

engineering,Nashik under the Savitribai Phule Pune University. This work

is done during year 201_-201_, under our guidance.

———————————

(Prof. GUIDES NAME)

Project Guide

——————————– ———————————-

Prof. Dr. HOD, Computer Department Principal, PVGCOE,Nashik

Examination:

Examiner ————————

Date:

Acknowledgements

I am profoundly grateful to Prof. GUIDE NAME for his expert

guidance and continuous encouragement throughout to see that

this project rights its target since its commencement to its

completion.

I would like to express deepest appreciation towards Dr. ,

Principal PVGCOE, Nashik, Prof. . HOD Computer Department and

I am particularly grateful to GUIDE’s NAME who allows me to work

in the com-pany.

At last I must express my sincere heartfelt gratitude to all the staff members

of Computer Department who helped me directly or indirectly during this

course of work.

Web Technology - WordPress.com · For security purposes, Tomcat should be run as an unprivileged user (i.e. not root). We will create a new user and group that will run the Tomcat

Documents