SAVITRIBAI PHULE PUNE UNIVERSITY

ADSUL’S TECHNICAL CAMPUS

DEPARTMENT OF COMPUTER ENGINEERING

THIRD YEAR OF COMPUTER ENGINEERING

WEB TECHNOLOGY

LAB MANUAL (310257)

 INDEX

Sr.No. Name of Assignment Page No.

1 Before coding of the website, planning is important, students should visit 1-2
different websites
Implement a web page for any client website using HTML and CSS
2 3-5

Design the XML document to store the information of the

employees of any business organization and demonstrate the use of:

3 a. DTD 6-10

b. XML Schema
And display the content in (e.g., tabular format) by using CSS/XSL.
4 HTML, Java Script 11-12
5 Implement the sample program demonstrating the use of Servlet. 13-15
6 Implement the program demonstrating the use of JSP. 16-19
Add dynamic web application essence using PHP, HTML and
7 MySQL 20-23
Design a login page with entries for name, mobile number email id
8 and login button. Use struts and perform following validations 24-31
9 Design an application using Angular JS. 32-38
10 Web application using EJB. 39-47
11 Mini Project 48
 ADSUL’S TECHNICAL CAMPUS, CHAS

Lab Practices 1

Assignment No 1 Case study Page No

Title of the Assignment:

Case study:
Before coding of the website, planning is important, students should visit different websites (Min. 5)
for the different client projects and note down the evaluation results for these websites, either good
website or bad website in following format:
Sr. No. Website Purpose of Things liked Things Overall evaluation
URL Website in the website disliked in of the website
the website (Good/Bad)

From the evaluation, students should learn and conclude different website design issues, which
should be considered while developing a website.

Objective of the Assignment: Students should be able to know the website design issues.

Outcomes of the Assignment:

Students will be able to,
1. Find out different Web site Design Issues.
2. How to design a good website.

Software and Hardware Requirements: Browser

Theory:
Parameters to check a Website Quality:
1. Site Purpose
2. Target Audience
3. Responsive/ Mobile Friendly
4. Fresh Content or Outdated Content
5. Using understandable language on the web pages
6. Visual Design/ Quality of Images
7. Look and feel (• Using a uniform look and feel)
8. Engaging Content(Making the site interesting)
9. Navigation(Making the site easy to use)
10. Slow upload speed
11. Contents Representation (Font Size/Style)

Design/Execution Steps:
Before coding of the website, planning is important, Visit different websites (Min. 5) for the different client
projects and note down the evaluation results for these websites, either good website or bad website in
following format by considering above parameters.

1
 ADSUL’S TECHNICAL CAMPUS, CHAS

From the evaluation, conclude different website design issues, which should be considered
while developing a website

Conclusion/Analysis:

Hence, Students has learned what are different design issues and how to design good website.

Questions:
1. What are different parameters to find good quality of website?
2. What are different web design issues?
3. What are advantages of websites?
4. What are disadvantages of websites?
5. If you are told to design website which website you will design? Why?

2
 ADSUL’S TECHNICAL CAMPUS, CHAS

Lab Practices 2

Assignment No 2 Implement a web page for any client Page No

` website using HTML and CSS

Title of the Assignment:

Implement a web page index.htm for any client website using following:
a. HTML syntax: heading tags, basic tags and attributes, frames, tables, images, lists, links for
text and images, forms etc.
b. Use of Internal CSS, Inline CSS, External CSS

Objective of the Assignment:

1. Understand about basic concepts of html
2. Understand the basic concepts of CSS
Outcomes of the Assignment:
Students will be able to,
3. Design static webpage using HTML.
4. Apply CSS to HTML pages.

Software and Hardware Requirements:

Notepad, Browser

Theory:
HTML: HTML is the standard markup language for creating Web pages.
 HTML stands for Hyper Text Markup Language
 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
 Browsers do not display the HTML tags, but use them to render the content of the page

 HTML Versions:

HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML 5 2014
Table.1: HTML Versions

3
 CSS:

CSS stands for Cascading Style Sheet. It is nothing, but design language intended to simplify the
process of making web pages presentable.CSS handles the feel and look part of a web page.By using
CSS, one can control the color of text, style of fonts, spacing between paragraphs, layout designs.

CSS is easy to learn, easy to understandand it provides powerful control on presentation of an HTML
document.

Advantages of CSS:
It saves the time, Pages load faster, Easy maintenance, Superior styles to HTML, Multiple Device
Compatibility, Global web standards, Offline Browsing, Platform Independence.
CSS3 Modules:
CSS3 Modules are having old CSS specifications as well as extension features.

 Box Model
 Selectors
 Background
 Border
 Image Values and Replaced Content
 Text Effect

Technology / Tool:
 The <!DOCTYPE html> declaration defines this document to be HTML5
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph
 HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>

CSS can be added to HTML elements in 3 ways:

 Inline - by using the style attribute in HTML elements. An inline CSS is used to apply a unique
style to a single HTML element.

4
 Ex. <h1 style="color:blue;">This is a Blue Heading</h1>

 Internal - by using a <style> element in the <head> section. An internal CSS is used to define a
style for a single HTML page. An internal CSS is defined in the <head> section of an HTML
page, within a <style> element.
Example:
<style>
body {background-color: yellow ;}
h1 {color: blue;}
p {color: red;}
</style>
 External - by using an external CSS file. An external style sheet is used to define the style for
many HTML pages. With an external style sheet, you can change the look of an entire web site,
by changing one file!To use an external style sheet, add a link to it in the
<head> section of the HTML page.
Example:
<link rel="stylesheet" href="styles.css">
 Use the HTML <head> element to store <style> and <link> elements
 Use the CSS color property for text colors
 Use the CSS font-family property for text fonts
 Use the CSS font-size property for text sizes
 Use the CSS border property for borders
 Use the CSS padding property for space inside the border
 Use the CSS margin property for space outside the border

Design / Execution Steps:

Following steps are used to Create and Execute web applications,
2. Write the HTML code in notepad and save with .html extension.
3. Write the CSS code in notepad and save with .css extension.
4. Import CSS file in HTML page.
5. Open HTML page in the browser.

Conclusion/Analysis:
Hence, we have designed static web pages using HTML and CSS.

Questions:
1. Explain any five HTML tags.
2. What is CSS? Explain types of CSS with example.
3. What is CSS selector?

5
 Lab Practices 3

Assignment No 3 XML,DTD and XSLT. Page No

Title of the Assignment:

Design the XML document to store the information of the employees of any business organization and
demonstrate the use of:
a. DTD
b. XML Schema
And display the content in (e.g., tabular format) by using CSS/XSL.
Objective of the Assignment:
1. Understand and use of DTD
2. Understand and apply XML schema.
Outcomes of the Assignment:
Students will be able to,
1. Design static webpage using XML.
2. Apply DTD to XML pages.
3. Apply XSLT to XML pages
Software and Hardware Requirements:
Software: Notepad, Any Browser, Eclipse(for DTD)

Theory:
XML stands for Extensible Markup Language. It is nothing but the text-based markup language which
is derived from Standard Generalized Markup Language(SGML). XML tags identify the data and are
used to store and organize the data, rather than specifying how to display it like HTML tags, which are
used to display the data. XML is not going to replace HTML in the near future, but it introduces new
possibilities by adopting many successful features of HTML.

There are three important characteristics of XML that make it useful in a variety of systems and
solutions –
 XML is extensible − XML allows you to create your own self-descriptive tags, or language,
that suits your application.

 XML carries the data, does not present it − XML allows you to store the data irrespective of how it
will be presented.

XML is a public standard − XML was developed by an organization called the World Wide
Web Consortium (W3C) and is available as an open standard.

6
 Technology / Tool:

The XML document have an XML declaration, but it is optional, and it is written as−
<? xml version = "1.0" encoding = "UTF-8"?>
Where version is nothing but the version of an XML document and UTF specifies the character- encoding
used in the document.
Each XML-element needs to be closed either with start or with end elements as shown below −
<element>………</element> An
XML document can have only one root element.
<root>
<x>...</x>
<y>...</y>
</root>
XML Attributes:
Using a name/value pair, an attribute specifies a single property for an element. An XML- element can
have one or more attributes. For example −

<a href = "http://www.google.com/">XMLTutorial</a>

Here href is the attribute name and http://www.google.com/ is attribute value.

DTD:

A DTD is a Document Type Definition.

A DTD defines the structure and the legal elements and attributes of an XML document.

With a DTD, independent groups of people can agree on a standard DTD for interchanging data.

An application can use a DTD to verify that XML data is valid.

An Internal DTD Declaration

If the DTD is declared inside the XML file, it must be wrapped inside the <!DOCTYPE> definition:

XML document with an internal DTD

<?xml version="1.0"?>

<!DOCTYPE note [

<!ELEMENT note (to,from,heading,body)>

<!ELEMENT to (#PCDATA)>
7
<!ELEMENT from (#PCDATA)>

<!ELEMENT heading (#PCDATA)>

]>

<note>

<to>Neha</to>

<from>Amit</from>

<heading>Reminder</heading>

</note>

The DTD above is interpreted like this:

!DOCTYPE note defines that the root element of this document is note

!ELEMENT note defines that the note element must contain four elements: "to,from,heading"

!ELEMENT to defines the to element to be of type "#PCDATA"

!ELEMENT from defines the from element to be of type "#PCDATA"

!ELEMENT heading defines the heading element to be of type "#PCDATA"

An External DTD Declaration

If the DTD is declared in an external file, the <!DOCTYPE> definition must contain a reference
to the DTD file:

<?xml version="1.0"?>

<!DOCTYPE note SYSTEM "note.dtd">

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

</note>

8
 XSLT:

XSL (eXtensible Stylesheet Language) is a styling language for XML.

XSLT stands for XSL Transformations.

The root element that declares the document to be an XSL style sheet is <xsl:stylesheet> or <xsl:transform>.

Note: <xsl:stylesheet> and <xsl:transform> are completely synonymous and either can be used!

The correct way to declare an XSL style sheet according to the W3C XSLT Recommendation is:

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

Create an XSL Style Sheet

Then you create an XSL Style Sheet ("stud.xsl") with a transformation template:

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

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Student</h2>
<table border="1">
<tr> <th>RollNo</th>
<th>Name </th>
</tr>
<xsl:for-each select="Student/stud">
<tr>
<td><xsl:value-of select="rno"/></td>
<td><xsl:value-of select="name"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Link the XSL Style Sheet to the XML Document

Add the XSL style sheet reference to your XML document ("student.xml"):

<?xml version="1.0" ?>

<?xml-stylesheet type="text/xsl" href="stud.xsl"?>
If you have an XSLT compliant browser it will nicely transform your XML into XHTML.

9
DESIGN/EXECUTION STEPS:
Following steps are used to Create and Execute web applications,
1. Write the XML code in notepad and save with .xml extension.
2. Write the DTD in notepad and save with .dtd extension (For external DTD)
3. Write a XSLT code in notepad and save using .xsl extension.
4. Open XML page in the browser for running simple XML or XML using XSLT.
5. To run internal/external dtd open Eclipse and run the code using validate

TEST CASES:
Manual testing is used to check whether XSLT gets applied or not.
Eclipse validate function used to check whether DTD gets applied or not.

CONCLUSION/ANALYSIS:

Hence, we have designed static web pages using XML ,XSLT and DTD

QUESTIONS
1. Explain difference between HTML and XML?
2. Explain difference between CDATA and PCDATA?
3. What is DTD?
4. Explain XSL and XSLT

10
 Lab Practices 4

Assignment No 4 HTML, Java Script Page No

Title of the Assignment:

Implement an application in Java Script using following:
a) Design UI of application using HTML, CSS etc.
b) Include Java script validation
c) Use of prompt and alert window using Java Script
Objective of the Assignment:
1. Understand about basic concepts of JavaScript.
2. Use JavaScript for validation of data.
Outcomes of the Assignment:
Students will be able to,
1. Design static webpage using HTML.
2. Apply JavaScript to HTML pages for validation of data.

Software and Hardware Requirements:

Software’s: Notepad, Any Browser

Theory:
JavaScript is a programming language of HTML as well web. It is preferred for creating network-
centric applications.It is integrated and complimentary with Java. As JavaScript is integrated with
HTML it is very easy to implement. It is open as well as cross-platform.
Advantages:

The advantages of using JavaScript are −

 It requires less server interaction

 Immediate feedback to the visitors

 Increased interactivity
 Richer interfaces

Validation:

When client enters the all necessary data and press the submit button form validation is done at
server side If data entered by a client is incorrect or missing,the server needs to send all data back to
the client and request for resubmission of form with correct information. This is really a lengthy
process which puts a lot of load(burden) on the server.

So, JavaScript provides a way to validate form's data on the client's side itself before sending it to the
11
 web server. Form validation performs two functions-

 Basic Validation –First of all the form must be checked to make sure all the mandatory fields
are filled in. It would require just a loop through each field in the form and check for the data.

 Data Format Validation − Secondly, the data that is entered must be checked for correct format and
its value. The code must include appropriate logic to test correctness of data.

Technology / Tool:
JavaScript can be implemented using JavaScript statements that are placed within the <script>.
You can place the <script> tags, containing your JavaScript, anywhere within your web page, but it is
normally recommended that you should keep it within the <head> tags.
The script tag takes two important attributes:
o Language − This attribute specifies what scripting language you are using. Typically, its value
will be JavaScript. Although recent versions of HTML (and XHTML, its successor) have
phased out the use of this attribute.

o Type − This attribute is what is now recommended to indicate the scripting language in use and
its value should be set to "text/javascript".
Design/Execution Steps:
Following steps are used to Create and Execute web applications,
1. Write an HTML code in notepad and save with .html extension.
2. First Program is of Login- if uname and password is correct it will redirect to enquiry form and if
incorrect will give alert message.
3. Write the function for validation of name, email id and phone no and enclosed this function in
script in enquiry.html.
4. Call this function on ‘onSubmit’ event of submit button.
5. Open HTML page in the browser.
Test Cases:
Manual testing is used to check following validations
 All the fields like Name, Address, Phone number, DOB, Gender and email id are
mandatoryfields.
 Name should be characters only.
 Phone no. should be numbers only.
 Email id should be in proper format like [email protected]

Conclusion/Analysis:
Hence, we applied validate the data using JavaScript.

Questions:
1. Name some Java Script features.
2. What are JavaScript data types?
3. How to declare array in JavaScript?

12
 Lab Practices 5

Assignment No 5 Servlet Page No

Title of the Assignment:

Implement the sample program demonstrating the use of Servlet.
Objective of the Assignment:
1. Understand about basic concepts of html, CSS
2. Understand the basic functionalities of Servlets
Outcomes of the Assignment:
Students will be able to,
1. Develop a dynamic webpage using HTML and Servlet.
2. Write a server side java application called Servlet to catch the data sent from client, process it
and show the output.

Software and Hardware Requirements:

1. LINUX
2. JDK 7or later
3. Editors; Eclipse
4. Web browser
5. Tomcat 7 or later
6. MySQL
7. Connector: Java MySQL Connector

Theory:
Servlet:
A Servlet is a server side program and written in Java. Servlet is a web component that is deployed on
the server for creating the dynamic web pages. A Java servlet is a Java program that extends the
capabilities of a server. Although servlets can respond to any types of requests, they most commonly
execute applications hosted on Web servers.

Java Servlets are Java classes run by a web server that has an interpreter that supports the Java Servlet
specification.
Servlets can be created using the packages
• javax.servlet
• javax.servlet.http

Servlet Life Cycle

• The servlet is initialized by calling the init() method.

• The servlet calls service() method to process a client's request.
• The servlet is terminated by calling the destroy() method.
• Finally, servlet is garbage collected by the garbage collector of the JVM.

13
 Figure.3: Functions of Servlet

Technology / Tool:
How to configure tomcat server in Eclipse ? (One time Requirement)

• If you are using Eclipse IDE first time, you need to configure the tomcat server First.
• For configuring the tomcat server in eclipse IDE,
• click on servers tab at the bottom side of the IDE -> right click on blank area -> New -> Servers ->
choose tomcat then its version -> next -> click on Browse button -> select the apache tomcat root
folder previous to bin -> next -> addAll -> Finish.
•
Steps to run servlet in Eclipse

• Create a Dynamic web project

• create a servlet
• add servlet-api.jar file
• Run the servlet
Methods
• doGet-
A GET request results from a normal request for a URL or from an HTML form that has no
METHOD specified and it should be handled by doGet() method.

• doPost-
A POST request results from an HTML form that specifically lists POST as the METHOD and it
should be handled by doPost() method
Reading HTML Form Data using Servlet
• getParameter() − You call request.getParameter() method to get the value of a form parameter.
• getParameterValues() − Call this method if the parameter appears more than once and returns
multiple values, for example checkbox.
• getParameterNames() − Call this method if you want a complete list of all parameters in the current
request.

14
Design/Execution Steps:
Following steps are used to Create and Execute web applications,
1. Design html and servlet files with an extension of.html and .java
2. Start the Tomcat Server with port number

Conclusion/Analysis:
Hence, we have performed the dynamic web application using Servlet and MySQL.

Questions:

1. What is Servlet?
2. What is the life-cycle of a servlet?
3. What is difference between Get and Post method?
4. What is difference between GenericServlet and HttpServlet?

15
 Lab Practices 6

Assignment No 6 JSP, and MySQL(Backend) Page No

Title of the Assignment:

Implement the program demonstrating the use of JSP.

Objective of the Assignment:

1. Understand about basic concepts of html, CSS
2. Understand the basic functionalities of JSP
3. Having the knowledge of SQL query to create the database
Outcomes of the Assignment:
Students will be able to,
1. Develop a dynamic webpage using JSP, HTML .
2. Write a server side application called JSP to catch the data sent from client, process it and store
it on database (MySQL).

Software and Hardware Requirements:

1. LINUX
2. JDK 7or later
3. Editors; Eclipse
4. Web browser
5. Tomcat 7 or later
6. MySQL
7. Connector: Java MySQL Connector

Theory:
Java Server Pages (JSP): It is a server side programming technology that is used to create dynamic
web-based applications. JSP have right to use the complete Java APIs, including the JDBC API to
access the databases.
It is a technology that helps software developers to create dynamic web pages based on HTML, XML
and other document types. It was released in 1999 by Sun Microsystems. It is just like a PHP and ASP,
but it uses the Java programming language.
A JSP element is a type of java servlet that is designed to accomplish the role of a user interface for a
java web application. Web developers write JSPs as text files that combine HTML or XHTML code,
XML elements, and rooted JSP actions and commands.
Using JSP, you can collect input from users through webpage forms, current records from a database
or another source and create web pages dynamically.
JSP tags can be used for different purposes, such as retrieving information from a database or
registering user preferences, accessing JavaBeans components, passing control between pages, and
sharing information between requests, pages etc.

16
Why we need JSP?
JSP is used for the design of dynamic web page and servlet is used to code the logic that is present i.e.
in the MVC (Model-View-Controller) architecture, the servlet is the controller and the JSP is the view.

Advantage of JSP over Servlet

1) Extension to Servlet
2) Easy to maintain
3) Fast Development: No need to recompile and redeploy
4) Less code than Servlet

Architecture of JSP

1. The request / response part of a JSP is defined in below architecture

2. The client initiated request for a JSP file using browser
3. Webs server (i.e, JSP Engine) invokes the JSP file and interpret the JSP file produce a java
code. The created java code will be a Servlet.
4. Once Servlet is created, JSP engine compiles the servlet. Compilation errors will be detected in
this phase.
5. Now servlet class is loaded by the container and executes it.
6. Engine sends the response back to the client.

17
Syntax of JSP:
Following is the simple and first example for JSP:
//Hello.jsp
<html>
<body>
<% out.println("Welcome to JSP Class"); %>
</body>
</html>

Output:
Welcome to JSP Class

Elements of JSP
Scripting Element Example

Comment <%-- comment --%>

Directive <%@ directive %>

Declaration <%! declarations %>

Scriptlet <% scriplets %>

Expression <%= expression %>

18
 JDBC
Java JDBC is a java API to connect and execute query with the database. JDBC API uses jdbc drivers to
connect with the database.
JDBC Driver is a software component that enables java application to interact with the database.
There are 4 types of JDBC drivers:
1. JDBC-ODBC bridge driver
2. Native-API driver (partially java driver)
3. Network Protocol driver (fully java driver)
4. Thin driver (fully java driver)
Technology / Tool:
1. JSP
2. IDE: Eclipse
3. Databases: MySQL

MySQL: MySQL is a freely available open source Relational Database Management System
(RDBMS). It uses the Structured Query Language (SQL).

SQL is the most popular language for adding, accessing and managing data in a database. It is most
noted for its quick processing, proven reliability, ease and flexibility of use. MySQL is an essential part
of almost every open source PHP application. Good examples for PHP & MySQL- based scripts are
WordPress, Joomla, Magento and Drupal.

Design/Execution Steps:
Following steps are used to Create and Execute web applications,
1. Design html and jsp files with an extension of.html and .jsp
2. Write database connection code in jsp file
3. Set MySQL username, password and database name in database connection page
4. Start the Tomcat Server with port number

Conclusion/Analysis:

Hence, we have performed the dynamic web application using JSP and MySQL

Questions:
1. What is JSP?
2. What are the life-cycle methods for a JSP?
3. What are elements of JSP?
4. What is JDBC?

19
 Lab Practices 7

Assignment No 7 Add dynamic web application essence Page No

using PHP, HTML and MySQL

Title of the Assignment:

Build a dynamic web application using PHP and MySQL.
a. Create database tables in MySQL and create connection with PHP.
b. Create the add, update, delete and retrieve functions in the PHP web app interacting with MySQL database

Objective of the Assignment:

To understand the principles and methodologies of PHP web based applications development process,

Outcomes of the Assignment:

Students should be able to,
1. Develop web based application using suitable client side and server side web technologies.
2. Develop solution to complex problems using appropriate method, technologies, frameworks, web
services and content management.

Software and Hardware Requirements:

1. LINUX
2. Web browser
3. XAMPP
Theory:
1. PHP:
The PHP Hypertext Preprocessor (PHP) began as a little open source venture that advanced as an ever
increasing number of individuals discovered how valuable it was. Rasmus Lerdorf released the
principal form of PHP route in 1994. PHP is a recursive acronym for "PHP: Hypertext Preprocessor".
PHP is a server side scripting dialect that is installed in HTML. It is utilized to oversee dynamic
substance, databases, session following, even form whole internet business locales. It is incorporated
with various prevalent databases, including MySQL, PostgreSQL, Oracle, Sybase, Informix, and
Microsoft SQL Server.
PHP is pleasingly zippy in its execution, particularly when gathered as an Apache module on the Unix
side. The MySQL server, once began, executes even extremely complex questions with colossal
outcome sets in record-setting time.
PHP bolsters a substantial number of real conventions, for example, POP3, IMAP, and LDAP. PHP4
included help for Java and conveyed question designs (COM and CORBA), making n- level
improvement a plausibility out of the blue. PHP is excusing: PHP dialect tries to be as pardoning as
would be prudent. PHP Syntax is C-Like.

20
PHP performs framework capacities, i.e. from documents on a framework it can make, open, read,
compose, and close them. PHP can deal with frames, i.e. accumulate information from records, spare
information to a document; through email you can send information, return information to the client.

You include, erase, adjust components inside your database through PHP. Access treats factors and set
treats. Utilizing PHP, you can confine clients to get to a few pages of your site. It can encode
information.

Example:

"Hello World" Script in PHP

To get a feel for PHP, first start with simple PHP scripts. Since "Hello, World!" is an essential
example, first we will create a friendly little "Hello, World!" script.

As mentioned earlier, PHP is embedded in HTML. That means that in amongst your normal HTML
(or XHTML if you're cutting-edge) you'll have PHP statements like this –

<html>
<body>
<?php
echo “Hello Php”) ;
?>
</body>
</html>

To create and run PHP Web pages three fundamental parts should be introduced on your PC
framework.
Web Server – PHP is server side scripting language so it requires Web server to execute(eg. Apache
Tomcat)
Database − PHP will work with for all intents and purposes all database programming, including
Oracle and Sybase yet most regularly utilized is uninhibitedly accessible MySQL database.
PHP Parser − keeping in mind the end goal to process PHP content directions a parser must be
introduced to create HTML yield that can be sent to the Web Browser. This instructional exercise will
manage you how to introduce PHP parser on your PC.
2. MySQL:

MySQL is the most famous Open Source Relational SQL Database Management System. MySQL is
outstanding amongst other RDBMS being utilized for creating different online programming
applications. MySQL is created, advertised and upheld by MySQL AB, which is a Swedish
organization. This instructional exercise will give you a fast begin to MySQL and make you OK with
MySQL programming.

21
 MySQL Database

MySQL is a quick, simple to-utilize RDBMS being utilized for some little and huge organizations.
MySQL is produced, showcased and upheld by MySQL AB, which is a Swedish organization.
MySQL is winding up so famous as a result of numerous great reasons:
 MySQL is discharged under an open-source permit. So you don't have anything to pay to utilize
it.
 MySQL is a capable program in its own particular right. It handles a huge subset of the
usefulness of the most costly and intense database bundles.
 MySQL utilizes a standard type of the outstanding SQL information dialect.
 MySQL takes a shot at many working frameworks and with numerous dialects including PHP,
PERL, C, C++, JAVA, and so forth.
 MySQL works rapidly and functions admirably even with extensive informational indexes.
 MySQL is amicable to PHP, the most refreshing dialect for web advancement.
 MySQL underpins huge databases, up to 50 million lines or more in a table. The default
document measure restrain for a table is 4GB, yet you can expand this (if your working
framework can deal with it) to a hypothetical utmost of 8 million terabytes (TB).
 MySQL is adaptable. The open-source GPL permit enables developers to alter the MySQL
programming to fit their own particular surroundings.

Technology / Tool:
1. Technology is to be used is PHP (PHP Hypertext Preprocessor) and tool XAMPP server is to be
used to execute PHP web application.
2. XAMPP server embeds the PHP, MySQL and phpmyadmin, these three tools must be required
to run php web application.

Design/Execution Steps:
For the design purpose html and CSS is to be used. For this design part contains the GUI of web
applications, how its looks like? When users going to use the web application.
Steps to install XAMPP and configure the PHP, MYSQL server.
1. Download the XAMPP using following link (download latest version as per your Operating system
Windows/ Linux). https://www.apachefriends.org/download.html
2. Install XAMPP by running .exe file
3. Go to start->Xampp-> Xampp control panel. Start Apache and Mysql.
4. Goto Web browser(eg. Firefox) and write localhost and see Xampp has been started or not. If it is started
then you will see in browser like shown in following image.
5. By Clicking on phpmyAdmin you can create database, table and insert values in MySQL.
6. Open a note pad write a PHP code and save this file in Xampp->htdoc->create a folder here(eg.PHP1 )
and save file in this folder with name index.php

22
 7. To run the code goto Firefox or any web browser and type in address bar - localhost/PHP1 your code will
get run.
8. If file name is other that index.php then to run type in address bar – localhost/PHP1/hello.php (file name)

Conclusion/Analysis:
In this assignment, we have studied how to design and develop small web application using PHP script,
XAMPP server with apache server and MySQL as backend.
Questions:

1. Differences between GET and POST methods ?

2. What is the difference between Session and Cookie?
3. Explain different MySQL methods used in PHP to connect with MySQL database?

23
 Lab Practices 8

Assignment No 8 Validation using Struts Page No

Title of the Assignment:

Design a login page with entries for name, mobile number email id and login button. Use struts and
perform following validations
a. Validation for correct names
b. Validation for mobile numbers
c. Validation for email id
d. Validation if no entered any value
e. Re-display for wrongly entered values with message
f. Congratulations and welcome page upon successful entries

Objective of the Assignment:

To understand the Strut and its applications

Outcomes of the Assignment:

Students should be able to,
1. Develop web based application using Strut2
2. Perform Validation on fields using Strut2.

Software and Hardware Requirements:

1. LINUX
2. JDK 7or later
3. Editors; Eclipse
4. Web browser
5. Tomcat 7 or later
6. MySQL
7. Connector: Java MySQL Connector
8. Strut2 Libraries
Theory:
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 2 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.
24
  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)
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 2 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.

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

25
 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 2 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 2 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.
Design/Execution Steps:

At the Struts core, we have the validation framework that assists the application to run the rules to perform
validation before the action method is executed.
Client side validation is usually achieved using Javascript. However, one should not rely upon client side
validation alone. The best practices suggest that the validation should be introduced at all levels of your
application framework. Now let us look at two ways of adding validation to our Struts project.
Here, we will take an example of an Employee whose name and age should be captured using a simple
page, and we will put these two validations to make sure that the user always enters a name and age which
should be in a range between 28 and 65.
Let us start with the main JSP page of the example.

Create Main Page

Let us write main page JSP file index.jsp, which will be used to collect Employee related information
mentioned above.
<%@ 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>Employee Form</title>
</head>
<body>

26
 ADSUL’S TECHNICAL CAMPUS, CHAS

<s:form action = "empinfo" method = "post">

<s:textfield name = "name" label = "Name" size = "20" />
<s:textfield name = "age" label = "Age" size = "20" />
<s:submit name = "submit" label = "Submit" align="center" />
</s:form>
</body>
</html>
The index.jsp makes use of Struts tag, which we have not covered yet, but we will study them in tags related
chapters. But for now, just assume that the s:textfield tag prints a input field, and the s:submit prints a submit
button. We have used label property for each tag which creates label for each tag.

Create Views
We will use JSP file success.jsp which will be invoked in case defined action returns SUCCESS.
<%@ 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>Success</title>
</head>

<body>
Employee Information is captured successfully.
</body>
</html>

Create Action
So let us define a small action class Employee, and then add a method called validate() as shown below
in Employee.java file. Make sure that your action class extends the ActionSupport class, otherwise your validate
method will not be executed.
package com.tutorialspoint.struts2;

import com.opensymphony.xwork2.ActionSupport;

public class Employee extends ActionSupport {

private String name;
private int age;

public String execute() {

return SUCCESS;
}

public String getName() {

return name;
}
27
 ADSUL’S TECHNICAL CAMPUS, CHAS

public void setName(String name) {

this.name = name;
}

public int getAge() {

return age;
}

public void setAge(int age) {

this.age = age;
}

public void validate() {

if (name == null || name.trim().equals("")) {
addFieldError("name","The name is required");
}

if (age < 28 || age > 65) {

addFieldError("age","Age must be in between 28 and 65");
}
}
}
As shown in the above example, the validation method checks whether the 'Name' field has a value or not. If no
value has been supplied, we add a field error for the 'Name' field with a custom error message. Secondly, we chec
if entered value for 'Age' field is in between 28 and 65 or not, if this condition does not meet we add an error abov
the validated field.

Configuration Files
Finally, let us put everything together using the struts.xml configuration file as follows −

<?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 = "empinfo"

class = "com.tutorialspoint.struts2.Employee"
method = "execute">
<result name = "input">/index.jsp</result>
<result name = "success">/success.jsp</result>
</action>

</package>
</struts>

28
 ADSUL’S TECHNICAL CAMPUS, CHAS

Following is the content of web.xml file −

<?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 2</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>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>

29
Now, right click on the project name and click Export > WAR File to create a War file. Then deploy this WAR i
the Tomcat's webapps directory. Finally, start Tomcat server and try to access
URL http://localhost:8080/HelloWorldStruts2/index.jsp. This will produce the following screen −

30
 ADSUL’S TECHNICAL CAMPUS, CHAS

Now do not enter any required information, just click on Submit button. You will see the following result −

Enter the required information but enter a wrong From field, let us say name as "test" and age as 30, and finally
click on Submit button. You will see the following result −

How this Validation Works?

When the user presses the submit button, Struts 2 will automatically execute the validate method and if any of
the “if” statements listed inside the method are true, Struts 2 will call its addFieldError method. If any errors have
been added, then Struts 2 will not proceed to call the execute method. Rather the Struts 2 framework will
return input as the result of calling the action.
Hence, when validation fails and Struts 2 returns input, the Struts 2 framework will redisplay the index.jsp file.
Since, we used Struts 2 form tags, Struts 2 will automatically add the error messages just above the form
filed.These error messages are the ones we specified in the addFieldError method call.

31
 ADSUL’S TECHNICAL CAMPUS, CHAS

Lab Practices 9

Assignment No 9 Design an application using Angular JS. Page No

Title of the Assignment:

Design an application using Angular JS.
e.g., Design registration (first name, last name, username, password) and login page using Angular JS.

Objective of the Assignment:

1. Understand the design of single-page applications and how AngularJS facilitates their
development
2. Properly separate the model, view, and controller layers of your application and implement
them using AngularJS
3. Master AngularJS expressions, filters, and scopes
4. Build Angular forms
5. Elegantly implement Ajax in your AngularJS applications
6. Write AngularJS directives
Outcomes of the Assignment:
Students can able to,
1. Implement the effective client side implementation.
2. Solve the complex problem of development using MVC framework.
Software and Hardware Requirements:
Eclipse IDE/ Notepad/ Notepad++, Modern Web browser
Theory:
AngularJS is an open-source web application framework. It was initially created in 2009 by MiskoHevery
and Adam Abrons. It is presently kept up by Google. Its most recent adaptation is
1.2.21. "AngularJS is an auxiliary system for dynamic web applications. It gives you a chance to
utilize HTML as your layout dialect and gives you a chance to stretch out HTML's linguistic structure
to express your application parts plainly and compactly. Its information official and reliance infusion
take out a significant part of the code you as of now need to compose. Also, everything occurs inside
the program, making it a perfect band together with any server innovation".
General Features
 AngularJS is a productive system that can make Rich Internet Applications (RIA).
 AngularJS gives designers a choices to compose customer side applications utilizing
JavaScript in a spotless Model View Controller (MVC) way.
 Applications written in AngularJS are cross-program agreeable. AngularJS consequently
handles JavaScript code reasonable for every program.
 AngularJS is open source, totally free, and utilized by a great many engineers the world

32
 ADSUL’S TECHNICAL CAMPUS, CHAS
over. It is authorized under the Apache permit version2.0.
 By and large, AngularJS is a system to assemble expansive scale, elite, and simple to- keep
up web applications.
Core Features:

Figure.7: Architecture of AngularJS

1. Data-authoritative: It is the programmed synchronization of information amongst model and
view parts.
2. Scope: These are objects that allude to the model. They go about as paste amongst controller
and view.
3. Controller: These are JavaScript capacities bound to a specific degree.

4. Services: AngularJS accompanies a few implicit administrations, for example, $http to make
aXMLHttpRequests. These are singleton objects which are instantiated just once in application.

5. Filters: These select a subset of things from a cluster and restore another exhibit.

6. Directives: Directives are markers on DOM components, for example, components,

characteristics, css, and that's only the tip of the iceberg. These can be utilized to make custom
HTML labels that fill in as new, custom gadgets. AngularJS has worked in mandates, for
example, ngBind, ngModel, and so on.

7. Templates: These are the rendered see with data from the controller and model. These can be a
solitary record, (for example, index.html) or different perspectives in a single page utilizing
partials.

33
 ADSUL’S TECHNICAL CAMPUS, CHAS
8. Routing: It is idea of exchanging sees.

9. Model View Whatever: MVW is an outline design for isolating an application into various
parts called Model, View, and Controller, each with unmistakable obligations. AngularJS does
not actualize MVC in the conventional sense, yet rather something nearer to MVVM (Model-
View-ViewModel). The Angular JS group alludes it cleverly as Model View Whatever.

10. Deep Linking: Deep connecting permits to encode the condition of use in the URL with the
goal that it can be bookmarked. The application would then be able to be re- established from
the URL to a similar state.
11. Dependency Injection: AngularJS has a worked in reliance infusion subsystem that encourages
the designer to make, comprehend, and test the applications effectively.

Advantages of AngularJS
 It gives the ability to make Single Page Application in a spotless and viable way.
 It gives information restricting ability to HTML. Along these lines, it gives client a rich and
responsive experience.
 AngularJS code is unit testable.
 AngularJS utilizations reliance infusion and make utilization of partition of concerns.
 AngularJS gives reusable segments.
 With AngularJS, the engineers can accomplish greater usefulness with short code.
 In AngularJS, sees are unadulterated html pages, and controllers written in JavaScript do
the business handling.

Model View Controller

Model View Controller or MVC as it is famously called, is a product configuration design for creating
web applications. A Model View Controller design is comprised of the accompanying three sections.
 Model − It is the most minimal level of the example in charge of looking after information.
 View − It is in charge of showing all or a part of the information to the client.
 Controller − It is a product Code that controls the connections between the Model and View.
MVC is mainstream since it secludes the application rationale from the UI layer and backings
detachment of concerns. The controller gets all solicitations for the application and afterward works
with the model to set up any information required by the view.

34
 ADSUL’S TECHNICAL CAMPUS, CHAS

Model

The model is in chargeof overseeingapplicationinformation. It reacts to the demandfromseeandto the directions

fromcontroller to refresh itself.

The View

An introduction of information in a specific arrangement, activated by the controller's choice to exhibit the information.
They are content based layout frameworks, for example, JSP, ASP, PHP and simple to incorporate with AJAX
innovation.

The Controller

The controller reacts to client enter and performs communications on the information show objects. The controller gets
input, approvesit, and afterward performs businessoperationsthat alter the conditionof the informationdemonstrate.

AngularJS is a MVC based structure.

 AnAngularJS application comprisesoffollowingthreeessentialparts−ng-app − This directive

defines and links an AngularJS application to HTML.
 ng-model − This directive binds the values of AngularJS application data to HTML
input controls.
 ng-bind − This directive binds the AngularJS Application data to HTML tags.

35
 ADSUL’S TECHNICAL CAMPUS, CHAS
Technology / Tool:
Design/Execution Steps:
Steps for AngularJS
1. Either download AngularJS
2. Or Use CDN Method.

<head>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

We have included the AngularJS JavaScript file in the HTML page so we can use AngularJS
1. Point to AngularJS app
Next we tell what part of the HTML contains the AngularJS app. This done by adding the ng- app
attribute to the root HTML element of the AngularJS app. You can either add it to html
element or body element as shown below −

<body ng-app="myapp">
</body>

2. View
The view is this part −

<div ng-controller="HelloController">
<h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>

ng-controller tells AngularJS what controller to use with this view. helloTo.titletells AngularJS
to write the "model" value named helloTo.title to the HTML at this location.
3. Controller
The controller part is −

36
 ADSUL’S TECHNICAL CAMPUS, CHAS

<script>
angular.module("myapp",[])
.controller("HelloController",function($scope){
$scope.helloTo={};
$scope.helloTo.title="AngularJS";
});
</script>

This code registers a controller function named HelloController in the angular module named
myapp. The controller function is registered in angular via the angular.module(...).controller(...)
function call.

The $scope parameter passed to the controller function is the model. The controller function adds a
helloTo JavaScript object, and in that object it adds a title field.

4. Execution
Save the above code as myfirstexample.html and open it in any browser.
Output as below:

Welcome AngularJS to the world of Tutorialspoint!

5. HowAngularJSintegrateswithHTML
 ng-app directive indicates the start of AngularJS application.
 ng-model directive then creates a model variable named "name" which can be used with the
html page and within the div having ng-app directive.
 ng-bind then uses the name model to be displayed in the html span tag whenever user input
something in the text box.
 Closing</div> tag indicates the end of AngularJS application.
AngularJS directives are used to extend HTML. These are special attributes starting with ng- prefix.
We're going to discuss following directives −
 ng-app − This directive starts an AngularJS Application.
 ng-init − This directive initializes application data.
 ng-model − This directive binds the values of AngularJS application data to HTML
input controls.
 ng-repeat − This directive repeats html elements for each item in a collection.

37
 ADSUL’S TECHNICAL CAMPUS, CHAS

Conclusion/Analysis:
With the help of this assignment it is helpful to understand features of AngularJS. MVC model
structure and its use in advanced web programming is studied.

Questions:
1. What is AngularJS and what are some of its advantages?
2. What is the Model View Controller (MVC)?
3. What is data binding in AngularJS? How does it relate to the MVC architecture?
4. What is dependency injection and how does it work?

38
 ADSUL’S TECHNICAL CAMPUS, CHAS

Lab Practices 10

Assignment No Web application using EJB. Page No

10

Title of the Assignment:

Design and implement a business interface with necessary business logic for any web application using
EJB.
e.g., Design and implement the web application logic for deposit and withdraw amount transactions using
EJB.

Objective of the Assignment:

1. To learn the basic concept of EJB
2. To implement web application in EJB
Outcomes of the Assignment:
Students can able to,

1. Implement Web application in EJB.

Software and Hardware Requirements:
 Java Programming
 NetBeans IDE

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

Types
EJB is primarily divided into three categories; following table lists their names with brief descriptions −

S.No Type & Description

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

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

39
 ADSUL’S TECHNICAL CAMPUS, CHAS

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

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

EJB - Environment Setup

EJB is a framework for Java, so the very first requirement is to have a Java Development Kit (JDK) installed in
your machine.

System Requirement
JDK 1.5 or above.

Memory no minimum requirement.

Disk Space no minimum requirement.

Operating System no minimum requirement.

Design/Execution Steps:
Step 1 - Verify Java Installation in Your System
Now open console and execute the following java command.

OS Task Command

Windows Open Command Console c:\> java –version

Linux Open Command Terminal $ java –version

Mac Open Terminal machine:~ joseph$ java -version

Let's verify the output for all the operating systems −

40
 ADSUL’S TECHNICAL CAMPUS, CHAS

OS Output

java version "1.6.0_21"

Windows
Java(TM) SE Runtime Environment (build 1.6.0_21-b11)
Java HotSpot(TM) 64-Bit Server VM (build 23.21-b01, mixed mode)

java version "1.6.0_21"

Linux Java(TM) SE Runtime Environment (build 1.6.0_21-b11)
Java HotSpot(TM) 64-Bit Server VM (build 23.21-b01, mixed mode)

java version "1.6.0_21"

Mac Java(TM) SE Runtime Environment (build 1.6.0_21-b11)
Java HotSpot(TM) 64-Bit Server VM (build 23.21-b01, mixed mode)

If you do not have Java installed, install the Java Software Development Kit (SDK) from www.oracle.com. We are
assuming that Java 1.6.0_21 as installed version for this tutorial.

Step 2 – Set JAVA Environment

Set the JAVA_HOME environment variable to point the base directory location where Java is installed on your
system. For example,

OS Output

Windows Set the environment variable JAVA_HOME to C:\Program Files\Java\jdk1.6.0_21

Linux export JAVA_HOME=/usr/local/java-current

Mac export JAVA_HOME=/Library/Java/Home

Append Java compiler location to System Path.

OS Output

Append the string ;C:\Program Files\Java\jdk1.6.0_21\bin to the end of the system

Windows
variable, Path.

41
 ADSUL’S TECHNICAL CAMPUS, CHAS

Linux export PATH=$PATH:$JAVA_HOME/bin/

Mac not required

Verify Java Installation using java -version command explained above.

Step 3 – Download and Install NetBeans IDE

Download the latest version of NetBeans IDE from netbeans.org. At the time of writing this tutorial, I
downloaded Netbeans 7.3 which comes bundled with JDK 1.7 using the following link www.oracle.com

OS Installer name

Windows Netbeans 7.3

Linux Netbeans 7.3

Mac Netbeans 7.3

Step 4 – Setup JBoss Application Server

You can download the latest version of JBoss Server from www.jboss.org. Download the archive as per the
platform. Extract the Jboss to any location on your machine.

OS File name

Windows jboss-5.1.0.GA-jdk6.zip

Linux jboss-5.1.0.GA-src.tar.gz

Mac jboss-5.1.0.GA-src.tar.gz

Step 5 - Configure JEE Plugins to Netbeans

Open Plugin window using Tools > Plugins. Open "Available Plugin" tab and select "Java EE Base" and "EJB and
EAR" under "Java Web and EE" category. Click install button. Netbeans will download and install the respective
plugins. Verify plugins installation using "Installed" tab (as shown in the image given below).

42
 ADSUL’S TECHNICAL CAMPUS, CHAS

Step 6 - Configure JBoss Server in Netbeans

Go to Services tab and right click on servers to add a new server.

Add Server Instance wizard will open. Select JBoss and in next step enter the relevant details to configure server in
netbeans.

43
 ADSUL’S TECHNICAL CAMPUS, CHAS

Once everything is configured, you will see the following screen.

Step 7 - Install Database Server (PostGreSql)

Download latest version of PostGreSql database server from www.postgresql.org. At the time of writing this
tutorial, I downloaded PostGreSql 9.2

OS Installer name

Windows PostGreSql 9.2

Linux PostGreSql 9.2

Mac PostGreSql 9.2

EJB - Create Application

44
 ADSUL’S TECHNICAL CAMPUS, CHAS
To create a simple EJB module, we will use NetBeans, "New project" wizard. In the example given below, We will
create an EJB module project named Component.

Create Project
In NetBeans IDE, select File > New Project >. You will see the following screen

Select project type under category Java EE, Project type as EJB Module. Click Next > button. You will see the
following screen.

Enter project name and location. Click Next > button. You will see the following screen.
45
 ADSUL’S TECHNICAL CAMPUS, CHAS

Select Server as JBoss Application Server. Click Finish button. You will see the following project created by
NetBeans.

Create a Sample EJB

To create a simple EJB, we will use NetBeans "New" wizard. In the example given below, We will create a
stateless EJB class named librarySessionBean under EjbComponent project.
Select project EjbComponent in project explorer window and right click on it. Select, New > Session Bean. You
will see the New Session Bean wizard.

46
 ADSUL’S TECHNICAL CAMPUS, CHAS

Enter session bean name and package name. Click Finish button. You will see the following EJB classes created
by NetBeans.
 LibrarySessionBean − stateless session bean
 LibrarySessionBeanLocal − local interface for session bean

Conclusion/Analysis:
Hence, we have performed the web application using EJB

Questions:
2. What is EJB?
3. What are the benefits of EJB?
4. What are the types of Enterprise Bean?

47
 ADSUL’S TECHNICAL CAMPUS, CHAS

Lab Practices 11

Assignment No 11 Mini Project Page No

Title of the Assignment:

Mini Project-Design and implement a dynamic web application for any business functionality by
using web development technologies that you have learnt in the above given assignments.

Objective of the Assignment:

1. Explore and strengthen the understanding of fundamentals through practical application.
2. To Let the students apply the programming knowledge into a real- world situation/problem
Outcomes of the Assignment:
1. Students will be able to practice acquired knowledge within the chosen area of technology for
project development.
2. Identify, discuss and justify the technical aspects of the chosen project with a comprehensive and
systematic approach.

Theory:
1. A team of two or four students must develop the mini project.
2. Each student must demonstrate the project individually.
3. The team must submit a brief project report (15-20 pages) that must include the following:
a) Introduction
b) Requirement Analysis
c) Software Requirement Specification
d) Analysis and Design
e) Implementation
f) Testing
Technology / Tool:

Any Technology that you learn in above practical assignment.

Conclusion/Analysis:

Hence, we have successfully completed the mini project on recent web technology

48