web technology - wordpress.com · for security purposes, tomcat should be run as an unprivileged...
TRANSCRIPT
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
PVGCOE,NASHIK, Department of Computer Engineering
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
PVGCOE,NASHIK, Department of Computer Engineering
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:
PVGCOE,NASHIK, Department of Computer Engineering
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:
PVGCOE,NASHIK, Department of Computer Engineering
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.
PVGCOE,NASHIK, Department of Computer Engineering
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.
PVGCOE,NASHIK, Department of Computer Engineering
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
PVGCOE,NASHIK, Department of Computer Engineering
8 | P a g e
Application Manager GUI
Tomcat Manager GUI
PVGCOE,NASHIK, Department of Computer Engineering
9 | P a g e
ASSIGNMENT NO – 02
AIM: Design and develop any suitable web application using HTML, CSS and XML
LEARNING OBJECTIVES:
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.
PVGCOE,NASHIK, Department of Computer Engineering
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>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
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>
PVGCOE,NASHIK, Department of Computer Engineering
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.
<!-- This is a comment -->
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.
PVGCOE,NASHIK, Department of Computer Engineering
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>
PVGCOE,NASHIK, Department of Computer Engineering
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>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How it looks in a browser:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, 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>
PVGCOE,NASHIK, Department of Computer Engineering
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>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How it looks in a browser:
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
EMPTY CELLS IN A TABLE
Table cells with no content are not displayed very well in most browsers.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>
How it looks in a browser:
row 1, cell 1 row 1, cell 2
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">
PVGCOE,NASHIK, Department of Computer Engineering
15 | P a g e
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td> </td>
</tr>
</table>
How it looks in a browser:
row 1, cell 1 row 1, cell 2
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.
PVGCOE,NASHIK, Department of Computer Engineering
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>
Here is how it looks in a browser:
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>
Here is how it looks in a browser:
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
PVGCOE,NASHIK, Department of Computer Engineering
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.
PVGCOE,NASHIK, Department of Computer Engineering
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.
PVGCOE,NASHIK, Department of Computer Engineering
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 {
PVGCOE,NASHIK, Department of Computer Engineering
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;
}
PVGCOE,NASHIK, Department of Computer Engineering
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>
PVGCOE,NASHIK, Department of Computer Engineering
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>
PVGCOE,NASHIK, Department of Computer Engineering
23 | P a g e
OLD VERSION
NOTE
To: Tove
From: Jani
HEAD: (NONE)
Don't forget me this weekend!
NEW VERSION
NOTE
To: Tove
From: Jani
Date: 2015-09-01 08:30
Don't forget me this weekend!
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.
PVGCOE,NASHIK, Department of Computer Engineering
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?
PVGCOE,NASHIK, Department of Computer Engineering
25 | P a g e
ASSIGNMENT NO - 03 AIM:
Perform validation of all fields in assignment no.2 by using Java script/Jquery
LEARNING OBJECTIVES:
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
PVGCOE,NASHIK, Department of Computer Engineering
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
PVGCOE,NASHIK, Department of Computer Engineering
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
}
PVGCOE,NASHIK, Department of Computer Engineering
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
PVGCOE,NASHIK, Department of Computer Engineering
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.
PVGCOE,NASHIK, Department of Computer Engineering
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?
PVGCOE,NASHIK, Department of Computer Engineering
31 | P a g e
ASSIGNMENT NO - 04 AIM:
Add dynamic web application essence in assignment no. 3 using Servlet, JSP and MySQL
LEARNING OBJECTIVES:
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.
PVGCOE,NASHIK, Department of Computer Engineering
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
PVGCOE,NASHIK, Department of Computer Engineering
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
PVGCOE,NASHIK, Department of Computer Engineering
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 {
}
PVGCOE,NASHIK, Department of Computer Engineering
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)
throws ServletException, IOException{
//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)
throws ServletException, IOException{
//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)
throws ServletException, IOException{
//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)
throws ServletException, IOException{
//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)
throws ServletException, IOException{
//code
PVGCOE,NASHIK, Department of Computer Engineering
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)
throws ServletException, IOException{
//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.
}
}
PVGCOE,NASHIK, Department of Computer Engineering
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.
PVGCOE,NASHIK, Department of Computer Engineering
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
Read user name and password
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.
PVGCOE,NASHIK, Department of Computer Engineering
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?
PVGCOE,NASHIK, Department of Computer Engineering
40 | P a g e
ASSIGNMENT NO - 05 AIM:
Add dynamic web application essence in assignment no. 3 using PHP, MySQL database
connectivity and AJAX controls.
LEARNING OBJECTIVES:
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.
PVGCOE,NASHIK, Department of Computer Engineering
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
PVGCOE,NASHIK, Department of Computer Engineering
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
PVGCOE,NASHIK, Department of Computer Engineering
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
PVGCOE,NASHIK, Department of Computer Engineering
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>
PVGCOE,NASHIK, Department of Computer Engineering
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];
}
}
PVGCOE,NASHIK, Department of Computer Engineering
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();
PVGCOE,NASHIK, Department of Computer Engineering
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.
PVGCOE,NASHIK, Department of Computer Engineering
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
Read user name and password
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,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?
PVGCOE,NASHIK, Department of Computer Engineering
49 | P a g e
ASSIGNMENT NO - 06 AIM:
Redesign, develop and deploy assignment no. 4 using Strut
LEARNING OBJECTIVES:
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
PVGCOE,NASHIK, Department of Computer Engineering
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.
PVGCOE,NASHIK, Department of Computer Engineering
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
PVGCOE,NASHIK, Department of Computer Engineering
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
PVGCOE,NASHIK, Department of Computer Engineering
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.
PVGCOE,NASHIK, Department of Computer Engineering
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.
PVGCOE,NASHIK, Department of Computer Engineering
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.
PVGCOE,NASHIK, Department of Computer Engineering
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 −
PVGCOE,NASHIK, Department of Computer Engineering
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 {
PVGCOE,NASHIK, Department of Computer Engineering
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
PVGCOE,NASHIK, Department of Computer Engineering
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" />
PVGCOE,NASHIK, Department of Computer Engineering
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 −
<?xml version = "1.0" Encoding = "UTF-8"?>
<web-app xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
xmlns = "http://java.sun.com/xml/ns/javaee"
xmlns:web = "http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation = "http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_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>
PVGCOE,NASHIK, Department of Computer Engineering
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
PVGCOE,NASHIK, Department of Computer Engineering
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 −
<?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" />
<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
Read user name and password
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 Struts.
PVGCOE,NASHIK, Department of Computer Engineering
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?
PVGCOE,NASHIK, Department of Computer Engineering
64 | P a g e
ASSIGNMENT NO - 07 AIM:
Redesign, develop and deploy assignment no. 5 using Angular JS
LEARNING OBJECTIVES:
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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<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.
PVGCOE,NASHIK, Department of Computer Engineering
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
<!DOCTYPE html> <html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<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
<!DOCTYPE html> <html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
PVGCOE,NASHIK, Department of Computer Engineering
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 EXPRESSIONS
AngularJS binds data to HTML using Expressions.
PVGCOE,NASHIK, Department of Computer Engineering
67 | P a g e
ANGULARJS EXPRESSIONS
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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
If you remove the ng-app directive, HTML will display the expression as it is, without solving it:
EXAMPLE
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
PVGCOE,NASHIK, Department of Computer Engineering
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
Read user name and password
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 AngularJS.
PVGCOE,NASHIK, Department of Computer Engineering
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?
PVGCOE,NASHIK, Department of Computer Engineering
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.
PVGCOE,NASHIK, Department of Computer Engineering
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.
PVGCOE,NASHIK, Department of Computer Engineering
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>
<meta charset="utf-8">
PVGCOE,NASHIK, Department of Computer Engineering
73 | P a g e
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Basic Bootstrap Template</title>
<link rel="stylesheet" type="text/css"
href="css/bootstrap.min.css">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<h1>Hello, world!</h1>
<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>
<meta charset="utf-8">
PVGCOE,NASHIK, Department of Computer Engineering
74 | P a g e
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-
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">
<!-- Optional Bootstrap theme -->
<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>
<h1>Hello, world!</h1>
<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.
PVGCOE,NASHIK, Department of Computer Engineering
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?
PVGCOE,NASHIK, Department of Computer Engineering
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.